/* Ô ăn quan: chalk board on a brick courtyard, pebbles and mandarin stones. */

.oq-setup { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.oq-court {
    display: grid;
    gap: 0.6rem;
    padding: clamp(0.75rem, 2.5vw, 1.4rem);
    border-radius: 18px;
    background: #b5553a url('images/courtyard.webp') center / 320px repeat;
    box-shadow: inset 0 0 60px rgba(60, 20, 5, 0.45), 0 20px 40px -22px rgba(60, 20, 5, 0.8);
}

.oq-score {
    justify-self: center;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    background: rgba(40, 14, 4, 0.55);
    color: #fff4e6;
    backdrop-filter: blur(2px);
    font-weight: 700;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.oq-score.is-turn { box-shadow: 0 0 0 3px #ffd36b; transform: scale(1.04); }
.oq-score-name { font-family: var(--gm-head); font-weight: 800; }
.oq-score-pts { font: 800 1.35rem/1 var(--gm-head); color: #ffd36b; }
.oq-score-detail { font-size: 0.8rem; opacity: 0.85; }

.oq-board {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr repeat(5, 1fr) 1.25fr;
    grid-template-rows: 1fr 1fr;
    width: min(100%, 52rem);
    justify-self: center;
    aspect-ratio: 7.5 / 2.3;
}

.oq-cell {
    position: relative;
    margin: 0;
    padding: 0;
    border: 3px solid rgba(255, 252, 240, 0.88);
    margin: -1.5px;
    background: rgba(255, 255, 255, 0.04);
    font: inherit;
    color: inherit;
    cursor: default;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.oq-cell.is-quan:first-child, .oq-cell[data-cell="0"] { border-radius: 999px 0 0 999px; }
.oq-cell[data-cell="6"] { border-radius: 0 999px 999px 0; }

.oq-cell.is-playable { cursor: pointer; background: rgba(255, 236, 160, 0.14); }
@media (hover: hover) {
    .oq-cell.is-playable:hover { background: rgba(255, 236, 160, 0.28); }
}
.oq-cell.is-chosen { background: rgba(255, 220, 100, 0.32); }
.oq-cell:focus-visible { outline: 3px solid #ffd36b; outline-offset: -6px; }
.oq-cell:disabled { opacity: 1; }

.oq-stones { position: absolute; inset: 0; pointer-events: none; }
.oq-pebble {
    position: absolute;
    width: 13%;
    aspect-ratio: 1.25;
    max-width: 18px;
    transform: translate(-50%, -50%) rotate(var(--rot));
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 55%, rgba(0, 0, 0, 0.25) 100%);
    box-shadow: 0 2px 2px rgba(40, 15, 5, 0.45);
}
.oq-cell.is-quan .oq-pebble { width: 7%; }
.oq-quan {
    position: absolute;
    width: 38%;
    aspect-ratio: 1.15;
    transform: translate(-50%, -50%);
    border-radius: 48% 52% 45% 55%;
    background: radial-gradient(circle at 35% 28%, #a1887f, #5d4037 55%, #3e2723);
    box-shadow: 0 4px 6px rgba(30, 10, 0, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}

.oq-count {
    position: absolute;
    left: 6px;
    top: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(40, 14, 4, 0.62);
    color: #fff4e6;
    font: 800 0.72rem/1.5 'Mulish', sans-serif;
    pointer-events: none;
}
.oq-cell[data-cell="0"] .oq-count { left: auto; right: 8px; }
.oq-cell[data-cell="6"] .oq-count { left: 8px; }
.oq-cell.is-empty .oq-count { opacity: 0.55; }

.oq-dir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: min(100%, 26rem);
    justify-self: center;
}
.oq-dir[hidden] { display: none; }
.oq-dir button {
    min-height: 2.8rem;
    border: 0;
    border-radius: 0.9rem;
    background: #ffd36b;
    color: #4a1d0b;
    font: 800 0.95rem var(--gm-body);
    box-shadow: 0 4px 0 #b07a12;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.oq-dir button:active { transform: translateY(3px); box-shadow: 0 1px 0 #b07a12; }

.oq-cell.is-picked { animation: oq-flash 0.4s ease; }
.oq-cell.is-dropped { animation: oq-drop 0.22s ease; }
.oq-cell.is-captured { animation: oq-capture 0.7s ease; }
@keyframes oq-flash { 40% { background: rgba(255, 236, 160, 0.45); } }
@keyframes oq-drop { 50% { background: rgba(255, 255, 255, 0.18); } }
@keyframes oq-capture { 30%, 60% { background: rgba(255, 120, 80, 0.55); } }

.oq-hand {
    position: absolute;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -110%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffd36b;
    color: #4a1d0b;
    font: 900 0.85rem/1 'Mulish', sans-serif;
    box-shadow: 0 4px 10px rgba(40, 15, 5, 0.5);
    transition: left 0.18s ease, top 0.18s ease;
    pointer-events: none;
}
.oq-hand::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom: 0;
    border-top-color: #ffd36b;
}

.oq-status { font-weight: 700; line-height: 1.45; flex: 1; min-width: 14rem; }

@media (max-width: 640px) {
    .oq-board { aspect-ratio: 7.5 / 3.4; }
    .oq-count { font-size: 0.62rem; left: 3px; top: 3px; padding: 0 4px; }
    .oq-score { gap: 0.4rem; padding: 0.3rem 0.7rem; }
    .oq-score-detail { display: none; }
    .oq-court { padding: 0.6rem 0.4rem; }
}

/* full screen: option rows go away and the court fills the width */
.gm.is-full .oq-setup { display: none; }
.gm.is-full .oq-board { width: min(100%, calc((var(--gm-h) - 11rem) * 3.26)); }