/* ---------------------------------------------------------------- room games: the picker and Dokuz Taş
   The board is the centre of the room while a match is on: a wooden board between the two
   players' cards, each in its stone colour. The card of the player to move lights up and
   carries the move clock. js/games/dokuz/, js/games/picker.js. */

/* Game picker ("Oyun") */
.game-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.game-card { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2, var(--surface)); border: 1.5px solid var(--border); transition: border-color .15s, background-color .15s; }
.game-card:hover { border-color: var(--border-strong); }
.game-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.game-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.game-card input { position: absolute; opacity: 0; pointer-events: none; }
.game-card svg { flex: none; width: 40px; height: 40px; }
.game-card.off svg { filter: grayscale(.8); opacity: .55; }
.gc-text { display: grid; gap: 2px; min-width: 0; }
.gc-text b { font-size: 15px; }
.gc-text small { color: var(--muted); font-size: 12px; }
.gc-text em { font-style: normal; font-size: 12px; color: var(--warning); }
.gc-text em:empty { display: none; }
.game-rules { margin: 0 0 12px; }
.game-rules p { margin: 0 0 8px; }
.game-rules ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.game-own { margin: 0 0 12px; }
.game-own[hidden] { display: none; }
.game-own summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.game-own textarea { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; resize: vertical;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font: 14px/1.45 var(--font); }
.game-own textarea:focus { outline: none; border-color: var(--primary); }
.game-own .hint { margin: 6px 0 0; }
.game-own .bad { color: var(--warning); }
#g-plays-row[hidden] { display: none; }

/* Dokuz Taş */
#dokuz-root { padding: 12px 16px 0; }
#dokuz-root[hidden] { display: none; }
/* The layout follows the width the game actually gets (the room column changes with the sidebar
   and the chat column), not the window: a container query on .dz. */
.dz { --dz-red: #e5413c; --dz-black: #c4cad6; display: grid; gap: 10px; container: dz / inline-size; }
.dz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dz-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.dz-phase { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 1px 10px; border-radius: 999px; }
.dz-clock { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 3px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); }
.dz-clock:empty { display: none; }
.dz-clock.low { color: #ff8a80; border-color: rgba(255, 138, 128, .5); }

/* Narrow: both cards side by side (same height), the board under them */
.dz-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dz-seat { display: grid; min-width: 0; }
.dz-board-wrap { position: relative; grid-column: 1 / -1; grid-row: 2; justify-self: center; aspect-ratio: 1;
  /* as wide as there is room for, and short enough to fit the screen with the cards and the bar */
  width: min(100%, 560px, max(260px, 100vh - 340px));
  width: min(100%, 560px, max(260px, 100svh - 340px)); }
/* Wide (room for a board of ~480px beside the cards): the board on the left, the two cards next to it */
@container dz (min-width: 700px) {
  .dz-table { grid-template-columns: minmax(0, 780px) minmax(170px, 240px); grid-template-rows: auto auto;
    justify-content: center; column-gap: 16px; row-gap: 12px; }
  .dz-board-wrap { grid-column: 1; grid-row: 1 / span 2; align-self: center;
    width: min(100%, max(320px, 100vh - 260px));
    width: min(100%, max(320px, 100svh - 260px)); }
  .dz-seat { display: block; }
  .dz-seat[data-color="r"] { grid-column: 2; grid-row: 1; align-self: end; }
  .dz-seat[data-color="s"] { grid-column: 2; grid-row: 2; align-self: start; }
}
.dz-art, .dz-play { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dz-art { border-radius: 4.4%; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .9), 0 2px 0 rgba(255, 255, 255, .06); }
/* Announcements sit on the top edge of the board, clear of the points (and of the stones to take) */
.dz-board-wrap .g-banner { z-index: 2; top: 0; font-size: clamp(14px, 2vw, 19px); padding: 7px 18px; border-radius: 12px;
  max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.g-banner.mill { background: rgba(138, 92, 6, .92); }
.g-banner.warn { background: rgba(120, 52, 12, .9); }

/* The player cards */
.dz-card { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .2s, opacity .3s; }
.dz-card.turn.r { border-color: rgba(229, 65, 60, .75); box-shadow: 0 0 0 3px rgba(229, 65, 60, .16), 0 14px 30px -16px rgba(229, 65, 60, .7); }
.dz-card.turn.s { border-color: rgba(196, 202, 214, .6); box-shadow: 0 0 0 3px rgba(196, 202, 214, .12), 0 14px 30px -16px rgba(0, 0, 0, .9); }
.dz-card.won { border-color: #f2c14e; box-shadow: 0 0 0 3px rgba(242, 193, 78, .18); }
.dz-card.lost { opacity: .62; }
.dz-card .avatar { transition: box-shadow .15s; }
.dz-card.speaking .avatar { box-shadow: 0 0 0 3px var(--success); }
.dz-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dz-names { min-width: 0; }
.dz-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dz-side { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dz-dot, .m { display: inline-block; border-radius: 50%; flex: none; }
.dz-dot { width: 10px; height: 10px; }
.dz-dot.r, .m.r { background: radial-gradient(circle at 35% 30%, #ff9e92, #df332e 45%, #7a0e11); }
.dz-dot.s, .m.s { background: radial-gradient(circle at 35% 30%, #7e8492, #2a2e37 50%, #050608); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }

.dz-timer { display: flex; align-items: center; gap: 8px; color: var(--dz-black); }
.dz-card.r .dz-timer { color: var(--dz-red); }
.dz-timer.off { visibility: hidden; }
.dz-timer.low { color: #ff6b5e; }
.dz-timer-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.dz-timer-bar i { display: block; height: 100%; background: currentColor; transform-origin: left center; transition: transform .25s linear; }
.dz-secs { min-width: 3.4em; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dz-timer.low .dz-secs { animation: dz-blink 1s steps(2, start) infinite; }

.dz-tray { display: grid; grid-template-columns: 3.6em 1.4em 1fr; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dz-tray b { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.dz-minis { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 67px; justify-self: end; }  /* rows of five */
.m { width: 11px; height: 11px; }
.dz-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-flags:empty { display: none; }
.dz-flag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.dz-flag.fly { background: rgba(242, 193, 78, .16); color: #f2c14e; }
.dz-flag.late { background: rgba(255, 107, 94, .14); color: #ff8a80; }
.dz-flag.win { background: rgba(242, 193, 78, .22); color: #f2c14e; }

/* On the board: last move, mills, and what the player to move can click */
.dz-lastring { fill: none; stroke: #fff4d6; stroke-opacity: .75; stroke-width: 3; }
.dz-trail { stroke: #fff4d6; stroke-opacity: .6; stroke-width: 4; stroke-dasharray: 1 11; stroke-linecap: round; }
.dz-gone { stroke: #3b200c; stroke-opacity: .55; stroke-width: 4; stroke-linecap: round; fill: none; }
.dz-millglow, .dz-millflash { stroke: #ffd54f; stroke-width: 16; stroke-linecap: round; }
.dz-millglow { opacity: .45; animation: dz-glow 1.4s ease-in-out infinite; }
.dz-hit { cursor: pointer; outline: none; }
.dz-hit .area { fill: transparent; }
.dz-hit[data-kind="spot"] .dot { fill: #fff8e6; opacity: .9; transform-box: fill-box; transform-origin: center; animation: dz-breathe 1.6s ease-in-out infinite; }
.dz-hit[data-kind="spot"] .ghost { opacity: 0; transition: opacity .12s; }
.dz-hit[data-kind="spot"]:is(:hover, :focus-visible) .ghost { opacity: .6; }
.dz-hit[data-kind="spot"]:is(:hover, :focus-visible) .dot { opacity: 0; }
.dz-hit[data-kind="pick"] .ring { fill: none; stroke: #ffe39a; stroke-width: 3; stroke-dasharray: 7 6; opacity: .85; }
.dz-hit[data-kind="pick"]:is(:hover, :focus-visible) .ring { stroke-dasharray: none; opacity: 1; }
.dz-hit[data-sel] .ring { stroke: #ffd54f; stroke-width: 5; stroke-dasharray: none; opacity: 1; }
.dz-hit[data-kind="take"] .ring { fill: rgba(255, 82, 82, .16); stroke: #ff5252; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: dz-throb 1.1s ease-in-out infinite; }
.dz-hit[data-kind="take"] .x { stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .12s; }
.dz-hit[data-kind="take"]:is(:hover, :focus-visible) .x { opacity: .95; }
.dz-hit:focus-visible .area { stroke: #fff; stroke-width: 2; stroke-dasharray: 3 4; }
@keyframes dz-breathe { 50% { transform: scale(1.35); opacity: .5; } }
@keyframes dz-throb { 50% { transform: scale(1.08); } }
@keyframes dz-glow { 50% { opacity: .2; } }
@keyframes dz-blink { 50% { opacity: .35; } }

/* End card */
.dz-end h3.r { color: #ff7a73; }
.dz-end h3.s { color: var(--dz-black); }
.dz-end h3.draw { color: var(--text); }
.dz-end .dz-note { color: var(--text-2, var(--text)); }
.dz-end-buttons { flex-wrap: wrap; }
.dz-end { scroll-margin-bottom: 96px; }  /* clear of the sticky dock when scrolled into view */
.dz-bar { flex-wrap: wrap; row-gap: 8px; }
.dz-bar .g-hint { flex: 1 1 240px; }           /* the buttons move under the hint when both don't fit */
.dz-bar .g-buttons { margin-left: auto; }
.dz-bar[hidden] { display: none; }

@container dz (max-width: 699px) {
  /* Compact cards above the board */
  .dz-card { padding: 10px; gap: 7px; }
  .dz-card .avatar { width: 32px; height: 32px; font-size: 12px; }
  .dz-tray { grid-template-columns: 3.4em 1.2em 1fr; }
  .m { width: 8px; height: 8px; }
  .dz-minis { max-width: 52px; }
}
@container dz (max-width: 359px) {
  .dz-minis { display: none; }   /* the counts are enough */
  .dz-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-hit[data-kind="spot"] .dot, .dz-hit[data-kind="take"] .ring, .dz-millglow { animation: none; }
}