/* =============================================================
   GAME: Ô ăn quan — chalk lines on dark ground, river pebbles
   ============================================================= */
.board-oanquan {
  --cell: min(calc((100vw - 74px) / 6.8), 82px);
  --mw: calc(var(--cell) * .9);
  --oq-chalk: #dff8ff;
  --oq-glow: #9fe8ff;
  display: grid; grid-template-columns: var(--mw) repeat(5, var(--cell)) var(--mw); grid-template-rows: repeat(2, var(--cell));
  padding: 14px 12px; border-radius: 20px; margin-top: 12px; margin-bottom: 12px;
  background:
    radial-gradient(circle at 23% 31%, rgba(255, 255, 255, .05) 0 1px, transparent 1.6px) 0 0 / 13px 11px,
    radial-gradient(circle at 71% 64%, rgba(0, 0, 0, .35) 0 1.2px, transparent 2px) 0 0 / 9px 14px,
    radial-gradient(120% 90% at 50% 0%, rgba(159, 232, 255, .10), transparent 60%),
    linear-gradient(180deg, #252c3d 0%, #1a1f2d 60%, #12151f 100%);
  box-shadow: 0 0 0 2px var(--oq-glow), 0 0 26px rgba(159, 232, 255, .35),
    inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .35);
}
.oq-chalk {
  position: absolute; left: 12px; top: 14px; width: calc(var(--cell) * 6.8); height: calc(var(--cell) * 2);
  color: var(--oq-chalk); opacity: .9; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(159, 232, 255, .8));
}
.oq-sq, .oq-mand { position: relative; min-width: 0; min-height: 0; }
.oq-hit {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink);
  border-radius: 6px; cursor: default; -webkit-tap-highlight-color: transparent; font: inherit;
}
.oq-stones { position: absolute; inset: 6%; display: block; pointer-events: none; }
.oq-mand .oq-stones { inset: 4% 0; }
/* pebbles: smooth river stones, a little oval, glossy */
.oq-stones i {
  --c: #cfc8b8; --k: 1;
  position: absolute; width: calc(var(--cell) * .23 * var(--k)); height: calc(var(--cell) * .185 * var(--k)); border-radius: 50% 46% 52% 48%;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .35) 16%, transparent 38%),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, .28) 0, transparent 45%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c) 50%, color-mix(in srgb, var(--c) 50%, #000) 100%);
  box-shadow: 0 1.5px 2px rgba(0, 0, 0, .75), inset 0 -1px 1px rgba(0, 0, 0, .25);
}
/* the big mandarin stone */
.oq-quan {
  position: absolute; z-index: 1; width: calc(var(--cell) * .52); height: calc(var(--cell) * .46); border-radius: 48% 52% 46% 54%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .4) 12%, transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(0, 0, 0, .4) 0, transparent 50%),
    radial-gradient(circle at 50% 50%, #ff7a5c 0%, #d8322e 45%, #6d0b16 100%);
  box-shadow: 0 0 0 2px #ffd23f, 0 0 14px rgba(255, 210, 63, .65), 0 3px 5px rgba(0, 0, 0, .7), inset 0 -3px 5px rgba(0, 0, 0, .35);
}
.oq-n {
  position: absolute; right: 4px; bottom: 1px; z-index: 2; pointer-events: none;
  font: 700 12px/14px var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.oq-sq.top .oq-n { bottom: auto; top: 1px; }
.oq-mand .oq-n { right: auto; left: 50%; bottom: 2px; transform: translateX(-50%); color: var(--oq-chalk); }
.oq-mand.ml .oq-n { left: 62%; }
.oq-mand.mr .oq-n { left: 38%; }
.oq-sq.empty .oq-n, .oq-mand.empty .oq-n { opacity: .45; }

.oq-sq.legal .oq-hit { cursor: pointer; }
.oq-sq.legal .oq-hit::before {
  content: ""; position: absolute; inset: 5px; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(159, 232, 255, .55), inset 0 0 14px rgba(159, 232, 255, .25);
}
.oq-sq.legal .oq-n { color: var(--ink); }
.oq-sq.legal .oq-hit:hover::before { background: rgba(159, 232, 255, .09); }
.oq-sq.sel .oq-hit::before { box-shadow: inset 0 0 0 2.5px var(--t-gold), inset 0 0 16px rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .08); }
.oq-sq.last .oq-hit::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 30%; height: 3px; border-radius: 3px; transform: translateX(-50%);
  background: var(--t-gold); box-shadow: 0 0 6px var(--t-gold);
}
.oq-sq.top.last .oq-hit::after { bottom: auto; top: 3px; }
.oq-hit:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* direction arrows on the selected square */
.oq-arrow {
  --ar: clamp(26px, calc(var(--cell) * .46), 36px);
  position: absolute; top: 50%; z-index: 4; width: var(--ar); height: var(--ar); margin: calc(var(--ar) / -2) 0 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #1a1300;
  background: radial-gradient(circle at 40% 35%, #fff3b0, var(--t-gold) 60%, #c99a00);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 210, 63, .7), 0 3px 6px rgba(0, 0, 0, .5);
  animation: oqpop .18s ease-out;
}
.oq-arrow[hidden] { display: none; }
.oq-arrow svg { width: 62%; height: 62%; }
.oq-arrow.l { left: calc(var(--ar) / -2); }
.oq-arrow.r { right: calc(var(--ar) / -2); }
.oq-arrow:hover { filter: brightness(1.1); }
.oq-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@keyframes oqpop { from { transform: scale(.4); opacity: 0; } }

/* stones in hand while sowing */
.oq-hand {
  position: absolute; z-index: 6; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; pointer-events: none;
  transform: translate(-50%, 2px); display: grid; place-items: center;
  font: 800 13px/1 var(--font-body); color: #1a1300; background: var(--t-gold);
  box-shadow: 0 0 10px rgba(255, 210, 63, .8), 0 2px 4px rgba(0, 0, 0, .5);
  transition: left .09s linear, top .09s linear;
}
.oq-hand.up { transform: translate(-50%, calc(-100% - 2px)); }
.oq-hand[hidden] { display: none; }

.drop .oq-stones { animation: oqdrop .22s ease-out; }
@keyframes oqdrop { 40% { transform: scale(1.08); } }
.drop .oq-stones i:last-child { animation: oqseed .25s ease-out; }
@keyframes oqseed { from { transform: translate(-50%, -130%) rotate(var(--r, 0deg)) scale(1.3); opacity: 0; } }
.pick .oq-stones { animation: oqpick .3s ease-out; }
@keyframes oqpick { 40% { transform: scale(.85); opacity: .5; } }
.oq-sq.taken::after, .oq-mand.taken::after {
  content: ""; position: absolute; inset: 4px; border-radius: 10px; pointer-events: none;
  animation: oqtaken .6s ease-out forwards;
}
.oq-mand.taken::after { border-radius: 50%; }
@keyframes oqtaken { 0% { background: rgba(255, 61, 127, .55); box-shadow: 0 0 22px var(--t-red); } 100% { background: transparent; box-shadow: none; } }