:root { color-scheme:light dark; }
.board-intro { margin-bottom:24px; }
.board-intro h1 { margin:0; font-size:28px; letter-spacing:-.035em; }
.board-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; }
.board-intro p,.game-description { margin:8px 0 0; color:var(--muted); font-size:14px; }
.games-grid { align-items:stretch; }
.game-card { display:flex; flex-direction:column; }
.game-card[hidden],.player-filter[hidden] { display:none; }
.player-icon,.clock-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.player-count,.play-duration { display:inline-flex; align-items:center; gap:7px; color:var(--teal); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.game-stats { display:inline-flex; align-items:center; gap:14px; }
.play-duration { color:var(--muted); }
.game-card--locked .player-count { color:var(--muted); }
.card-meta .reactions { flex-basis:100%; }
.card-meta .reaction-options { justify-content:flex-end; }
.card-meta time { margin-left:auto; color:var(--muted); font-size:13px; white-space:nowrap; }
.card-meta .status { margin-left:6px; font-size:12px; }
.player-filter { position:relative; flex-shrink:0; width:120px; margin-left:auto; }
.player-filter > .player-icon { position:absolute; left:12px; top:12px; color:var(--teal); pointer-events:none; }
.player-filter select { display:block; width:100%; min-height:44px; appearance:none; padding:8px 34px 8px 40px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--panel); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; cursor:pointer; transition:border-color .18s,background .18s; }
.player-filter select:hover { border-color:#526c79; background:#19302b; }
.filter-chevron { position:absolute; right:10px; top:14px; width:16px; height:16px; fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.filter-summary { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.game-card.filter-enter { animation:filter-enter .22s ease-out; }
@keyframes filter-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .game-card.filter-enter { animation:none; } }
.game-media { flex-shrink:0; }
.game-copy { display:flex; flex-direction:column; flex:1; }
.game-actions { margin-top:auto; padding-top:18px; }
.gem-market-card { border-color:#63553b; background:linear-gradient(145deg,#192b33,#111c25); }
.gem-market-cover { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate; container-type:inline-size; background:#11232b; border-bottom:1px solid #c3a36544; }
.cover-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; }
.gem-market-cover::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#07151eef 0%,#07151ea6 36%,#07151e15 70%),linear-gradient(0deg,#07151ee8,transparent 38%); }
.cover-wordmark { position:absolute; top:17%; left:7%; z-index:3; color:#f3deb3; text-shadow:0 2px 10px #0008; }
.cover-eyebrow { display:block; margin-bottom:8px; color:#d6b679; font-size:clamp(8px,2.3cqw,13px); font-weight:600; letter-spacing:.2em; }
.cover-title { display:block; font-family:"Noto Serif KR","Nanum Myeongjo",Georgia,serif; font-size:clamp(24px,8.7cqw,52px); font-weight:700; line-height:1.16; letter-spacing:.08em; }
.cover-cards { position:absolute; left:45%; top:15%; width:47%; height:68%; z-index:2; }
.cover-card { position:absolute; width:48%; height:92%; overflow:hidden; border:1px solid #d6b679a6; border-radius:6px; background:#10202b; box-shadow:0 5px 16px #0009; }
.cover-card::after { content:""; position:absolute; inset:0; border:3px solid #10202b55; border-radius:5px; background:linear-gradient(0deg,#07151e85,transparent 40%); }
.cover-card img { width:100%; height:100%; object-fit:cover; }
.cover-card--mine { left:0; top:6%; transform:rotate(-16deg); }
.cover-card--lapidary { left:26%; top:-3%; z-index:2; transform:rotate(-2deg); }
.cover-card--emporium { left:52%; top:7%; z-index:3; transform:rotate(14deg); }
.cover-gems { display:flex; align-items:center; gap:3%; position:absolute; left:7%; bottom:8%; width:64%; z-index:4; }
.cover-gems img { display:block; width:12%; height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 3px 4px #000b); }
.game-card--locked:hover { border-color:#3a4650; transform:none; }
.game-card--locked .game-image,.game-card--locked .cover-scene,.game-card--locked .cover-cards,.game-card--locked .cover-gems { filter:grayscale(1) brightness(.7); }
.game-card--locked .cover-wordmark { color:#b4bec4; }
.game-card--locked .cover-eyebrow { color:#95a3ad; }
.game-card--locked .gem-market-cover { border-bottom-color:#3a4650; }
.game-card--locked .status { color:#b3bec7; }
.cover-lock { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:#09131c55; }
.lock-badge { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 20px; border:1px solid #66737f; border-radius:12px; background:#101b23ed; color:#e0e7eb; font-size:14px; font-weight:700; }
.lock-icon { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lock-badge .lock-icon { width:32px; height:32px; }
.button--locked { flex:1; background:#24313b; border-color:#3a4650; color:#e0e7eb; cursor:pointer; }
.button--locked:hover { background:#344653; }
.nightmarket-card { border-color:#59664f; background:linear-gradient(145deg,#20352c,#132423); }
.game-card--locked { border-color:#3a4650; background:#151f28; }
.second-bid-card { border-color:#65766a; background:linear-gradient(145deg,#243b32,#142720); }
.second-bid-card .button--primary { background:#eadcc1; border-color:#eadcc1; color:#223e32; }
.greedy-cover { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#1a2d22; border-bottom:1px solid #a9cb6655; }
.treasure-split-card { border-color:#6b775a; background:linear-gradient(145deg,#293e32,#142720); }
.treasure-split-card .button--primary { background:#eadcc1; border-color:#eadcc1; color:#223e32; }
@media (prefers-color-scheme:light) {
  :root { --ink:#213b32; --muted:#56685f; --line:#c9d2c8; --teal:#26735d; --panel:#fffcf4; }
  body { background:#f2f0e6; }
  .game-card,.gem-market-card,.nightmarket-card,.second-bid-card,.treasure-split-card { background:linear-gradient(145deg,#fffdf6,#ebece0); border-color:#becbb9; }
  .game-card:hover { border-color:#819b85; }
  .game-card--locked,.game-card--locked:hover { background:#e8eae4; border-color:#c1c8be; }
  .game-card--locked .status { color:var(--muted); }
  .contact-links { background:#fffcf4; }
  .contact-link { color:#51655b; }
  .contact-link:hover,.player-filter select:hover,.reaction:hover:not(:disabled) { background:#e3ece2; }
  .reaction[aria-pressed="true"] { background:#d4ebdf; color:#174e3d; }
  .has-error .reaction-feedback { background:var(--panel); }
  .button--primary { color:#fffdf6; }
  .button--primary:hover { background:#1f604c; }
  .second-bid-card .button--primary,.treasure-split-card .button--primary { background:#315f49; border-color:#315f49; color:#fffdf6; }
  .button--locked,.button--locked:hover { background:#d7ded3; border-color:#c1c8be; color:#5a695d; }
}
@media (prefers-reduced-motion:reduce) { .reaction { transition:none; } }
.last-stride-cover { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#b99355; }
.last-stride-scene { display:block; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.last-stride-horse { position:absolute; width:49%; aspect-ratio:1; background-image:url('/board/assets/last-stride-horses.webp'); background-size:300% 200%; background-repeat:no-repeat; filter:drop-shadow(0 5px 3px #48372333); }
.last-stride-horse--one { left:29%; bottom:-16%; background-position:0 0; }
.last-stride-horse--two { left:11%; bottom:1%; background-position:50% 0; width:39%; }
.last-stride-horse--three { left:54%; bottom:5%; background-position:100% 0; width:35%; }
.last-stride-card .status { background:#b6862220; border:1px solid #b6862260; color:#dabc70; padding:3px 7px; border-radius:6px; }
@media(prefers-color-scheme:light) { .last-stride-card .status { color:#795319; } }
.gomoku-cover { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:radial-gradient(ellipse at 60% 40%,#405443,#13261e); }
.gomoku-cover-board { position:absolute; width:78%; aspect-ratio:1; left:14%; top:-24%; transform:rotate(-13deg); border:7px solid #8b653e; border-radius:5px; background:#d4a969 url('/board/assets/gomoku-wood.webp') center/cover; box-shadow:0 6px 0 #4f3825,0 14px 25px #0006; }
.gomoku-cover-grid { position:absolute; inset:8%; border:1px solid #593c24; background-image:linear-gradient(#593c2499 1px,transparent 1px),linear-gradient(90deg,#593c2499 1px,transparent 1px); background-size:12.5% 12.5%; }
.gomoku-cover-stone { position:absolute; width:10.8%; aspect-ratio:1; background:url('/board/assets/gomoku-black.webp') center/contain no-repeat; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 1px #2a1e1866); }
.gomoku-cover-stone.white { background-image:url('/board/assets/gomoku-white.webp'); }
@media(prefers-color-scheme:dark) { .gomoku-cover-board { background-color:#917b64; background-blend-mode:multiply; border-color:#66503a; } .gomoku-cover-grid { border-color:#efd4a4; background-image:linear-gradient(#efd4a499 1px,transparent 1px),linear-gradient(90deg,#efd4a499 1px,transparent 1px); } }