/* ============================================================
   Game detail pages (/games/:slug): hero, rules, extras +
   the interactive demos driven by js/game-demos.js.
   Board colors follow the app (mssgs-electron src/ui/games/):
   green #4cbe7a = you, coral #ff7f66 = opponent, gold = special.
   ============================================================ */

/* ---- Hero ---- */
.gd-hero{padding-bottom:30px}
.gd-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;font-size:13.5px;font-weight:600;color:var(--w-mut);text-decoration:none}
.gd-back:hover{color:var(--w-ink)}
.gd-back i{font-size:11px}
.gd-hero h1 .gnew{font-size:13px;vertical-align:middle;position:relative;top:-6px}
.page-hero-sub{max-width:620px;margin:0 auto;font-size:17px;line-height:1.6;color:var(--w-mut)}
.gd-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.gd-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--w-ink2)}
.gd-chip i{color:var(--green-700);font-size:12px}

/* ---- Demo section ---- */
.gd-demosec{padding:26px 0 10px}
.gd-demo-tile{max-width:720px;margin:0 auto;padding:28px}
.gd-demo-head{display:flex;align-items:center;gap:14px}
.gd-demo-head .gameicon{width:52px;height:52px;border-radius:12px}
.gd-demo-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green-700)}
.gd-demo-labels h2{font-size:26px;margin:2px 0 0;color:var(--w-ink)}
.gd-demo-hint{font-size:14.5px;color:var(--w-mut);line-height:1.55;margin:14px 0 18px}
.gd-demo-note{font-size:12.5px;color:var(--w-mut2);margin:16px 0 0;text-align:center}
@media (max-width:480px){.gd-demo-tile{padding:20px 12px}}
.gd-noscript{font-size:14px;color:var(--w-mut);text-align:center;padding:30px 0}

/* ---- Rules ---- */
.gd-rules{padding:60px 0 10px}
.gd-rules .fsection-head{margin-bottom:36px}
.gd-rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.glass-tile.gd-rule{padding:26px}
.gd-rule i{font-size:18px;color:var(--brand)}
.gd-rule h3{font-size:18px;font-weight:600;margin:12px 0 6px;color:var(--w-ink)}
.gd-rule p{font-size:14.5px;color:var(--w-mut);line-height:1.55;margin:0}
@media (max-width:720px){.gd-rules-grid{grid-template-columns:1fr}}

/* ---- Extras ---- */
.gd-extras{padding:70px 0 10px}
.gd-extras-tile{padding:36px 40px}
.gd-extras-tile h2{font-size:26px;margin:0 0 24px;color:var(--w-ink)}
.gd-extras-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 34px}
.gd-extra{display:flex;gap:14px;align-items:flex-start}
.gd-extra i{font-size:16px;color:var(--brand);margin-top:3px;width:20px;text-align:center;flex-shrink:0}
.gd-extra-t{display:block;font-size:15px;font-weight:600;color:var(--w-ink)}
.gd-extra-d{display:block;font-size:13.5px;color:var(--w-mut);line-height:1.5;margin-top:2px}
@media (max-width:680px){.gd-extras-grid{grid-template-columns:1fr}.gd-extras-tile{padding:28px}}

/* ---- More games ---- */
.gd-others{padding:60px 0 20px;text-align:center}
.gd-others h2{font-size:24px;color:var(--w-ink);margin:0 0 22px}
.gd-others-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gd-other-link{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;font-size:14px;font-weight:600;color:var(--w-ink2);text-decoration:none;transition:transform .3s var(--ease-standard)}
.gd-other-link:hover{color:var(--w-ink);transform:translateY(-2px)}
.gd-other-link .gameicon.sm{width:30px;height:30px;border-radius:8px}

/* ============================================================
   Demos — shared bits
   ============================================================ */
.gdemo{display:flex;flex-direction:column;align-items:center;gap:14px}
.gdemo-status{min-height:22px;font-size:14.5px;font-weight:600;color:var(--w-ink2);text-align:center}
.gdemo-status.win{color:var(--green-600)}
.gdemo-status.lose{color:#c24a33}
.gdemo-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:none;border-radius:10px;background:var(--brand);color:var(--brand-contrast);font-family:var(--font-sans);font-size:13.5px;font-weight:600;cursor:pointer;transition:background var(--dur-base) var(--ease-standard)}
.gdemo-btn:hover{background:var(--brand-hover)}
.gdemo-btn.ghost{background:var(--w-inset);color:var(--w-ink2)}
.gdemo-btn.ghost:hover{background:rgba(35,40,25,.1)}
.gdemo-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.gdemo-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}

/* Touch d-pad (snake + capture) */
.gdemo-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);grid-template-areas:". up ." "left down right";gap:6px;justify-content:center}
.gdemo-pad button{border:none;border-radius:9px;background:var(--w-inset);color:var(--w-ink2);font-size:14px;cursor:pointer}
.gdemo-pad button:active{background:var(--brand);color:var(--brand-contrast)}
.gdemo-pad .up{grid-area:up}
.gdemo-pad .left{grid-area:left}
.gdemo-pad .down{grid-area:down}
.gdemo-pad .right{grid-area:right}
@media (hover:hover) and (pointer:fine){.gdemo-pad{display:none}}

/* ---- Four in a Row ---- */
.d4-board{background:#1a213d;border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;width:100%;max-width:420px;cursor:pointer;touch-action:manipulation}
.d4-cell{aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.35);transition:box-shadow .3s var(--ease-standard)}
.d4-cell.g{background:radial-gradient(circle at 32% 30%,#4cbe7a,#2e9e5b);animation:d4in .3s var(--ease-standard)}
.d4-cell.c{background:radial-gradient(circle at 32% 30%,#ff9d85,#ff7f66);animation:d4in .3s var(--ease-standard)}
.d4-cell.win{box-shadow:0 0 0 2.5px rgba(255,255,255,.9)}
.d4-cell.hint{background:rgba(255,255,255,.09)}
@keyframes d4in{0%{transform:translateY(-320%)}70%{transform:translateY(6%)}100%{transform:none}}

/* ---- Battleship ---- */
.bs-board{background:#dfe9f6;border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%;max-width:400px;touch-action:manipulation}
.bs-cell{aspect-ratio:1;border-radius:8px;background:#c3d5ee;border:none;cursor:pointer;position:relative;padding:0;transition:background var(--dur-fast) var(--ease-standard)}
.bs-cell:hover{background:#b1c8e8}
.bs-cell:disabled{cursor:default}
.bs-cell.miss{background:#c3d5ee}
.bs-cell.miss::after{content:'';position:absolute;inset:34%;border-radius:50%;background:#fff;animation:bsin .25s var(--ease-standard)}
.bs-cell.hit{background:#9fb4d8}
.bs-cell.hit::after{content:'';position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ff8a70,#e3574b);animation:bsin .25s var(--ease-standard)}
.bs-cell.sunk{background:#7d93bb}
.bs-cell.sunk::after{content:'';position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 32% 30%,#5a5f6e,#2e3340)}
@keyframes bsin{from{transform:scale(0)}to{transform:none}}

/* ---- Checkers ---- */
.ck-board{border-radius:14px;overflow:hidden;display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:400px;box-shadow:0 10px 26px rgba(31,35,33,.12);touch-action:manipulation}
.ck-sq{aspect-ratio:1;background:#eef0f9;position:relative;border:none;padding:0;cursor:default}
.ck-sq.dark{background:#aab2df}
.ck-sq.sel{background:#8d97d4}
.ck-sq.tgt{cursor:pointer}
.ck-sq.tgt::after{content:'';position:absolute;inset:36%;border-radius:50%;background:rgba(32,48,31,.35);animation:bsin .25s var(--ease-standard)}
.ck-pc{position:absolute;inset:14%;border-radius:50%;transition:transform .3s var(--ease-standard)}
.ck-pc.g{background:radial-gradient(circle at 32% 30%,#4cbe7a,#2e9e5b);box-shadow:inset 0 -2px 0 #1e6e3c;cursor:pointer}
.ck-pc.c{background:radial-gradient(circle at 32% 30%,#ff9d85,#ff7f66);box-shadow:inset 0 -2px 0 #c24a33}
.ck-pc.king{box-shadow:0 0 0 2.5px #f5c94c,inset 0 -2px 0 #1e6e3c}
.ck-pc.fade{animation:ckfade .45s var(--ease-standard) forwards}
.ck-pc.crowned{animation:ckcrown .6s var(--ease-standard)}
@keyframes ckfade{to{opacity:0;transform:scale(.5)}}
@keyframes ckcrown{0%,100%{transform:none}50%{transform:scale(1.18)}}
.ck-shake{animation:ckshake .35s}
@keyframes ckshake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---- Word Guesser ---- */
.wd-rows{display:flex;flex-direction:column;gap:6px}
.wd-row{display:flex;gap:6px}
.wd-tile{width:52px;height:52px;border-radius:9px;background:rgba(35,40,25,.06);border:1.5px solid rgba(50,55,30,.16);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;text-transform:uppercase;color:var(--w-ink);transition:transform .12s var(--ease-standard)}
.wd-tile.typed{transform:scale(1.07);border-color:rgba(50,55,30,.4)}
.wd-tile.good,.wd-tile.mid,.wd-tile.bad{color:#fff;border-color:transparent;animation:wdflip .45s var(--ease-standard)}
.wd-tile.good{background:#2e9e5b}
.wd-tile.mid{background:#d9a92d}
.wd-tile.bad{background:#7c8177}
@keyframes wdflip{0%{transform:rotateX(90deg)}100%{transform:none}}
.wd-row.shake{animation:ckshake .35s}
.wd-kb{display:flex;flex-direction:column;gap:5px;align-items:center;width:100%;max-width:440px}
.wd-kb-row{display:flex;gap:4px;justify-content:center;width:100%}
.wd-key{flex:1;max-width:40px;height:44px;border:none;border-radius:7px;background:rgba(35,40,25,.09);color:var(--w-ink);font-family:var(--font-sans);font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.wd-key:hover{background:rgba(35,40,25,.16)}
.wd-key.wide{max-width:62px;flex:1.6;font-size:11px}
.wd-key.good{background:#2e9e5b;color:#fff}
.wd-key.mid{background:#d9a92d;color:#fff}
.wd-key.bad{background:#7c8177;color:#fff}
@media (max-width:480px){
  .wd-tile{width:44px;height:44px;font-size:20px}
  .wd-kb-row{gap:3px}
}
@media (max-width:350px){.wd-tile{width:38px;height:38px;font-size:18px}}

/* ---- Snake + Snake Capture ---- */
.sn-wrap{position:relative;width:100%;max-width:560px}
.sn-canvas{display:block;width:100%;border-radius:14px;background:#141a2e}
.sn-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(16,20,38,.55);border-radius:14px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;text-align:center;padding:20px}
.sn-overlay[hidden]{display:none}
.sn-meta{display:flex;gap:18px;font-size:13px;font-weight:600;color:var(--w-mut)}
.sn-meta b{color:var(--w-ink)}

/* ---- Monopoly ---- */
.mp-wrap{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.mp-board{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:4px;background:#1a213d;border-radius:14px;padding:10px;width:100%;max-width:430px;aspect-ratio:1}
.mp-tile{position:relative;border-radius:7px;background:#232c52;display:flex;flex-direction:column;overflow:hidden}
.mp-tile.center{grid-area:2/2/5/5;background:#1b2344;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.mp-band{height:26%;flex-shrink:0}
.mp-tile .mp-ico{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:clamp(10px,2.4vw,15px);color:rgba(255,255,255,.75)}
.mp-tile.owned-g{box-shadow:inset 0 0 0 2px #4cbe7a}
.mp-tile.owned-c{box-shadow:inset 0 0 0 2px #ff7f66}
.mp-tok{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.85);transition:all .28s var(--ease-standard);z-index:2}
.mp-tok.g{background:#4cbe7a;left:8%;top:8%}
.mp-tok.c{background:#ff7f66;right:8%;top:8%}
.mp-pot{font-size:12px;font-weight:700;color:#f5c94c}
.mp-dice{display:flex;gap:8px}
.mp-die{width:34px;height:34px;border-radius:8px;background:#fdfaf1;color:#1a213d;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.mp-die.rolling{animation:mproll .4s var(--ease-standard)}
@keyframes mproll{0%{transform:rotate(0) scale(.7)}100%{transform:rotate(360deg) scale(1)}}
.mp-money{display:flex;gap:16px;font-size:13.5px;font-weight:700}
.mp-money .you{color:var(--green-600)}
.mp-money .bot{color:#c24a33}
.mp-log{min-height:20px;font-size:13px;color:var(--w-mut);text-align:center}

/* ---- Stratego ---- */
.st-wrap{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%;max-width:460px}
.st-field{background:#eef0f9;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px;width:100%;box-shadow:0 10px 26px rgba(31,35,33,.12)}
.st-row{display:flex;gap:8px;justify-content:center}
.st-pc{position:relative;flex:1 1 0;min-width:0;max-width:64px;aspect-ratio:64/76;border-radius:10px;border:none;padding:0;font-family:var(--font-sans);cursor:default;transition:transform .25s var(--ease-standard),opacity .45s var(--ease-standard);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.st-pc.enemy{background:linear-gradient(160deg,#ff9d85,#ff7f66);box-shadow:inset 0 -3px 0 #c24a33;color:#fff;cursor:pointer}
.st-pc.enemy .q{font-size:26px;font-weight:800}
.st-pc.enemy:disabled{cursor:default}
.st-pc.mine{background:linear-gradient(160deg,#4cbe7a,#2e9e5b);box-shadow:inset 0 -3px 0 #1e6e3c;color:#fff;cursor:pointer}
.st-pc.mine.sel{transform:translateY(-6px);box-shadow:inset 0 -3px 0 #1e6e3c,0 0 0 3px #f5c94c}
.st-pc .nm{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;opacity:.9}
.st-pc .rk{font-size:22px;font-weight:800;line-height:1}
.st-pc.gone{opacity:0;transform:scale(.6);pointer-events:none}
.st-pc.reveal{animation:wdflip .45s var(--ease-standard)}
.st-pc.flag{background:linear-gradient(160deg,#f5d94c,#e8c22e);box-shadow:inset 0 -3px 0 #a87f16;color:#4a3a08}
.st-lakes{display:flex;gap:8px;justify-content:center}
.st-lake{width:40px;height:14px;border-radius:6px;background:#8fb6e8}
.st-note{font-size:12.5px;color:var(--w-mut2);text-align:center;min-height:18px}
@media (max-width:480px){
  .st-field{padding:12px 8px}
  .st-row{gap:5px}
  .st-pc .rk{font-size:16px}
  .st-pc .nm{display:none}
  .st-pc.enemy .q{font-size:20px}
}