/* Forge premium surfaces. Static depth, readable contrast, restrained motion. */
body{--fp-surface:#fff9ef;--fp-ink:#242920;--fp-muted:#596358;--fp-line:rgba(70,87,63,.22);--fp-gold:#bd9145;--fp-glass:rgba(255,252,240,.84)}
body.dark{--fp-surface:#16211e;--fp-ink:#f6f2e8;--fp-muted:#bac7be;--fp-line:rgba(204,222,206,.22);--fp-gold:#e8c573;--fp-glass:rgba(19,31,26,.94)}
body.oled{--fp-surface:#080d0b;--fp-ink:#fff8e7;--fp-muted:#bdc9c1;--fp-line:rgba(215,230,217,.23);--fp-gold:#edc96e;--fp-glass:rgba(5,10,7,.96);background:#000!important}
#home .card{position:relative;overflow:hidden;background:var(--fp-surface)!important;color:var(--fp-ink)!important;border:1px solid var(--fp-line)!important;border-radius:22px!important;box-shadow:0 2px 0 rgba(255,255,255,.2) inset,0 12px 28px rgba(22,37,23,.13)!important;transition:transform .18s ease,box-shadow .18s ease}
#home .card h2,#home .card p,#home .card small{color:var(--fp-ink)!important}
#home .card h2{font:700 clamp(16px,2vw,21px)/1.18 var(--s-display,Georgia,serif);letter-spacing:-.025em;margin:10px 0 5px}
#home .card p{font:500 13px/1.45 var(--s-font,system-ui);opacity:.84}
#home .card .mini{background:linear-gradient(145deg,#183e31,#0e241c)!important;border-radius:15px!important;min-height:104px!important;display:grid!important;place-items:center;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.16) inset}
#home .card .mini:has(.forge-preview){padding:0!important}
.forge-preview{display:block;width:100%;height:112px;object-fit:contain}
#home .card .pill{background:rgba(174,136,54,.14);color:var(--fp-ink);border:1px solid var(--fp-line);font-weight:700}
#home .card .forge-soon-label{background:#574024!important;color:#fff7e8!important}
@media(hover:hover){#home .card:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(255,255,255,.22) inset,0 18px 34px rgba(22,37,23,.2)!important}}
#home .card:focus-visible{outline:3px solid var(--fp-gold)!important;outline-offset:3px}
@media(min-width:1000px){#home.home .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
#play .desk-stage,#play #stage .tk{background:var(--fp-glass);color:var(--fp-ink);border:1px solid var(--fp-line);border-radius:22px;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 38px rgba(15,29,18,.18)}
#play #stage .tk{padding:14px 12px}
#play #stage .tk-bar{padding:2px 2px 12px;border-bottom:1px solid var(--fp-line);gap:10px;align-items:center;flex-wrap:wrap}
#play #stage .tk-title{font:700 clamp(19px,4vw,25px)/1.15 var(--s-display,Georgia,serif);letter-spacing:-.025em}
#play #stage .tk-meta{color:var(--fp-muted);font:700 12px/1.4 var(--s-font,system-ui);font-variant-numeric:tabular-nums}
#play #stage .tk-board{padding-top:14px}
#play #stage .tk-note{background:rgba(138,160,132,.1);border-left:3px solid var(--fp-gold);padding:11px 12px;border-radius:0 12px 12px 0;color:var(--fp-ink);font:500 14px/1.55 var(--s-font,system-ui)}
#play #stage .tk-paper{background:var(--fp-surface);color:var(--fp-ink);border:1px solid var(--fp-line);border-radius:16px;box-shadow:0 2px 10px rgba(22,37,23,.08)}
#play #stage .tk-felt{background:radial-gradient(ellipse at 40% 5%,rgba(113,161,116,.16),transparent 65%),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),#183d2c;border:1px solid rgba(229,204,136,.28);border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,.2) inset}
#play #stage .tk-cv{border:1px solid rgba(231,203,133,.4);border-radius:16px;box-shadow:0 3px 0 rgba(7,25,15,.23),0 12px 20px rgba(15,29,18,.16)}
#play #stage .tk-cell{border:1px solid rgba(36,63,40,.24);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 2px 3px rgba(16,35,19,.16)}
#play #stage .tk-cell:focus-visible,#play #stage .tk-btn:focus-visible{outline:3px solid var(--fp-gold);outline-offset:2px}
#play #stage .tk-cell:disabled{cursor:default}
#play #stage .tk-btn{border:1px solid var(--fp-line);border-radius:12px;font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 3px 7px rgba(22,37,23,.1)}
#play #stage .tk-btn.pri{background:linear-gradient(145deg,#efd28a,#cda456);color:#231e14;border-color:#ad833b}
#play #stage .tk-actions{gap:8px;margin-top:12px}
body.oled #play.screen.game{background:#000!important;color:var(--fp-ink)}
body.dark #play .bar,body.oled #play .bar{background:var(--fp-surface);color:var(--fp-ink)}
body.dark #play #status,body.oled #play #status{color:var(--fp-ink)}
@media(min-width:768px){#play .desk-stage{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}}
@media(prefers-reduced-motion:reduce){#home .card{transition:none!important;transform:none!important}}
body.reduce #home .card{transition:none!important;transform:none!important}
@media(prefers-contrast:more){#home .card,#play #stage .tk,#play .desk-stage{background:var(--fp-surface)!important;border:2px solid var(--fp-ink)!important;box-shadow:none!important}}

.forge-code-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--fp-line)}
.forge-code-chip{display:inline-grid;place-items:center;gap:4px;font-size:11px;min-width:40px}
.forge-code-chip::before{content:'';display:block;width:28px;height:28px;border-radius:50%;background:var(--code-color);border:2px solid rgba(255,255,255,.4);box-shadow:0 2px 5px rgba(0,0,0,.25),0 3px 3px rgba(255,255,255,.22) inset}
.forge-code-feedback{flex-basis:100%;font:600 12px/1.4 var(--s-font,system-ui);color:var(--fp-muted)}

/* Wood intersections with clear black/ivory stones; zoom keeps touch targets usable. */
#play #stage .forge-gomoku-scroll{max-width:100%;overflow:auto;padding:8px 0 12px;overscroll-behavior:contain}
#play #stage .forge-gomoku-grid{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));width:100%;min-width:300px;max-width:660px;padding:8px;box-sizing:border-box;background:repeating-linear-gradient(3deg,rgba(116,67,25,.035) 0 2px,transparent 2px 7px),linear-gradient(145deg,#e6c48c,#cfa86d);border:1px solid #947143;border-radius:12px;box-shadow:0 2px 0 #967649,0 10px 20px rgba(57,34,12,.14)}
#play #stage .forge-gomoku-grid.large{width:660px;min-width:660px}
#play #stage .forge-gomoku-point{position:relative;aspect-ratio:1;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:linear-gradient(transparent 48%,rgba(57,42,24,.5) 48% 52%,transparent 52%),linear-gradient(90deg,transparent 48%,rgba(57,42,24,.5) 48% 52%,transparent 52%);cursor:pointer;touch-action:manipulation}
#play #stage .forge-gomoku-point::after{content:'';position:absolute;inset:8%;border-radius:50%;pointer-events:none}
#play #stage .forge-gomoku-point.star::after{inset:42%;background:#674d2b}
#play #stage .forge-gomoku-point.stone1::after{background:radial-gradient(circle at 35% 25%,#5f6266,#12171a 55%,#030506);box-shadow:0 2px 3px rgba(0,0,0,.4)}
#play #stage .forge-gomoku-point.stone2::after{background:radial-gradient(circle at 35% 25%,#fffef8,#e9e6db 60%,#a7a89d);box-shadow:0 2px 3px rgba(0,0,0,.3)}
#play #stage .forge-gomoku-point:focus-visible{outline:3px solid #9c472d;outline-offset:-2px;z-index:1}
#play #stage .forge-gomoku-point:disabled{opacity:1;cursor:default}