/*! Goraku Kit 1.0.0 — base styles for every game page (spec §6.1 "Goraku minimal") */
:root{--sun:#ffc21a;--sun-deep:#ff8a00;
 --f-display:"Fredoka","Baloo 2",ui-rounded,system-ui,sans-serif;
 --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
/* Self-hosted fonts (drop the files in play/assets/fonts/; until then the system fallbacks above are used) */
@font-face{font-family:"Fredoka";font-weight:500 700;font-display:swap;src:url(/assets/fonts/fredoka.woff) format("woff")}
@font-face{font-family:"Figtree";font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree.woff) format("woff")}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{background:#1e1b2e;font-family:var(--f-body);font-size:15px;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px}
/* The game box fills the frame; games size themselves with container query units (cqw/cqh) */
#gamebox{position:fixed;inset:0;overflow:hidden;container-type:size;display:grid;place-items:center;background:var(--g-bg)}
.logoimg{width:40px;height:40px;border-radius:50%;display:block;flex:none;object-fit:cover}
span.aemo{width:auto;height:auto;margin-left:.2em;vertical-align:baseline}
.gpause svg{width:16px;height:16px;fill:currentColor}
.gtoast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:50;background:rgba(18,18,22,.9);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.gtoast.show{opacity:1;transform:translate(-50%,0)}
.gsitelock{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:#1e1b2e;color:#fff;text-align:center;padding:24px}
.gsitelock h1{font-family:var(--f-display);font-weight:600;font-size:24px;margin:0}
.gsitelock a{background:var(--sun);color:#16161a;border-radius:999px;padding:10px 22px;font-weight:800;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- game shell (mockup L62-90) --- */
/* Game shell — themeable (dark default, light via .garea.light). Volume = same shape repeated below in a darker value of the same hue. */
.garea{--rim:rgba(255,255,255,.14);--drop:rgba(0,0,0,.35);--g-bg:#1e1b2e;--g-cell:#2d2945;--g-cell-h:#3a3560;--g-cell-d:#1a1729;--g-text:#fff;--g-muted:#b9b5d6;--g-p1:#ffc21a;--g-p1d:#c98a00;--g-p2:#7fd3ff;--g-p2d:#3f9bd0;--g-card:#f4f9ff;--g-cardd:#b9c9d6;background:var(--g-bg);transition:background .3s}
.garea.light{--rim:rgba(255,255,255,.45);--drop:rgba(0,0,0,.13);--g-bg:#f2f2ef;--g-cell:#e3e3df;--g-cell-h:#d8d8d3;--g-cell-d:#c9c9c4;--g-text:#141414;--g-muted:#77777a;--g-p1:#ffb800;--g-p1d:#d18a00;--g-p2:#38b6f0;--g-p2d:#1f86bd;--g-card:#ffffff;--g-cardd:#d4d4cf}
.gtheme{position:absolute;top:8px;right:86px;z-index:7;border:0;background:color-mix(in srgb,var(--g-text) 12%,transparent);color:var(--g-text);border-radius:999px;width:30px;height:28px;display:grid;place-items:center;font-size:14px}
.gview:not(:has(.gback))~.gtheme{right:8px}
.garea.zp .gtheme{display:none}
.gtheme:hover{background:color-mix(in srgb,var(--g-text) 22%,transparent)}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pulse2{50%{transform:translateY(-4px)}}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}}
.status.chg,.rps-msg.chg{animation:msgin .25s ease-out}

.gurl{z-index:6;pointer-events:none}
.gview,.gplay{position:absolute;inset:0;display:grid;place-items:center}
.gback{position:absolute;top:8px;right:8px;z-index:7;border:0;background:color-mix(in srgb,var(--g-text) 12%,transparent);color:var(--g-text);border-radius:999px;padding:5px 12px;font-weight:700;font-size:12.5px}
.gback:hover{background:color-mix(in srgb,var(--g-text) 22%,transparent)}
.gmenu{display:grid;gap:min(4cqh,18px);justify-items:center;text-align:center;color:var(--g-text);padding:16px;max-width:100%}
.gm-t{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,8cqh,44px);line-height:1.05}
.gm-b{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.gm-btn{border:0;border-radius:18px;padding:min(3cqh,14px) 22px;min-width:150px;display:grid;gap:2px;color:#16161a;transition:transform .12s,box-shadow .12s;box-shadow:inset 0 -2px 0 var(--rim),0 1px 0 var(--bd),0 2px 0 var(--bd),0 3px 0 var(--bd),0 4px 0 var(--bd),0 5px 0 var(--bd),0 7px 3px var(--drop)}
.gm-btn:hover{transform:translateY(-2px);box-shadow:inset 0 -2px 0 var(--rim),0 1px 0 var(--bd),0 2px 0 var(--bd),0 3px 0 var(--bd),0 4px 0 var(--bd),0 5px 0 var(--bd),0 6px 0 var(--bd),0 7px 0 var(--bd),0 9px 3px var(--drop)}
.gm-btn:active{transform:translateY(4px);box-shadow:inset 0 -2px 0 var(--rim),0 1px 0 var(--bd),0 3px 3px var(--drop)}
.gm-btn.p1{background:var(--g-p1);--bd:var(--g-p1d)}.gm-btn.p2{background:var(--g-p2);--bd:var(--g-p2d)}
.gm-btn b{font-family:var(--f-display);font-size:20px;font-weight:700}.gm-btn span{font-size:12.5px;font-weight:600;opacity:.75}
.gm-h{font-size:12.5px;color:var(--g-muted);max-width:46ch}
.gm-mini{border:0;background:var(--g-cell);color:var(--g-text);box-shadow:0 1px 0 var(--g-cell-d),0 2px 0 var(--g-cell-d),0 3px 0 var(--g-cell-d);border-radius:999px;padding:6px 12px;font-weight:600;font-size:12.5px}
.gm-mini:hover{background:#ffc21a;color:#16161a}
canvas.gc{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:pointer}


/* --- difficulty pills (mockup L133-139) --- */
/* Difficulty pills */
.gm-lv{display:inline-flex;gap:4px;background:var(--g-cell);padding:4px;border-radius:999px;box-shadow:0 1px 0 var(--g-cell-d),0 2px 0 var(--g-cell-d),0 3px 0 var(--g-cell-d)}
.gm-lv button{border:0;background:none;color:var(--g-muted);font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:999px;transition:background .2s,color .2s}
.gm-lv button:hover{color:var(--g-text)}
.gm-lv button.on{background:var(--g-text);color:var(--g-bg)}
.lvtag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}


/* --- emoji (mockup L160-160) --- */
.aemo{width:1.05em;height:1.05em;vertical-align:-.16em;margin-left:.2em}

/* --- shared (new games) (mockup L304-315) --- */
/* ===== SHARED (new games) ===== */
.gw{display:grid;gap:min(2.2cqh,12px);justify-items:center;color:var(--g-text);max-width:100%;padding:8px;user-select:none;-webkit-user-select:none}
.gw .status{font-family:var(--f-display);font-size:min(5.2cqh,22px);font-weight:600;min-height:1.3em;text-align:center}
.gw .status b{font-weight:700}
.gtools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.gtool{border:0;background:var(--g-cell);color:var(--g-text);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 1px 0 var(--g-cell-d),0 2px 0 var(--g-cell-d),0 3px 0 var(--g-cell-d)}
.gtool.ico{width:60px;height:60px;padding:0;justify-content:center;border-radius:50%;background:var(--g-text);color:var(--g-bg);box-shadow:0 2px 0 color-mix(in srgb,var(--g-text) 55%,#000),0 4px 0 color-mix(in srgb,var(--g-text) 55%,#000)}.gtool.ico svg{width:32px;height:32px}.gtool.ico:active{transform:translateY(3px)}
.gtool.on{background:var(--g-p1);color:#16161a;box-shadow:0 1px 0 var(--g-p1d),0 2px 0 var(--g-p1d),0 3px 0 var(--g-p1d)}
.gtool .aemo,.ms-hud .aemo{margin:0}
.pc{--pd:var(--g-cell-d);box-shadow:inset 0 -2px 0 var(--rim),0 1px 0 var(--pd),0 2px 0 var(--pd),0 3px 0 var(--pd),0 4px 0 var(--pd),0 6px 3px var(--drop)}
.lock{pointer-events:none}
@keyframes popin{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1)}}


/* --- no layout jumps (mockup L554-558) --- */
/* No layout jumps inside games */
.gplay .status,.gplay .rps-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:94cqw;min-height:1.35em;line-height:1.35}
.gplay .again{height:36px;box-sizing:border-box;padding:0 18px}
.gtools{min-height:36px}
.gplay :is(.ttt,.c4,.mem,.rps,.gw):not(:has(> .again)):not(:has(> .gtools))::after{content:"";display:block;height:36px}

/* --- how-to panel (mockup L648-649) --- */
.ginfo{position:absolute;top:8px;right:122px;z-index:7;width:28px;height:28px;border:0;border-radius:50%;background:color-mix(in srgb,var(--g-text) 12%,transparent);color:var(--g-text);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:15px;display:grid;place-items:center}
.ginfo:hover,.ginfo.on{background:var(--g-p1);color:#16161a}

/* --- how-to panel 2 (mockup L651-672) --- */
.gview:not(:has(.gback))~.ginfo{right:44px}
.gview{container-type:size;transition:right .4s cubic-bezier(.2,.9,.3,1)}
.garea.info-open .gview{right:340px}
.garea.info-open .ginfo,.garea.info-open .gtheme{transform:translateX(-340px)}
.ginfo,.gtheme,.gback{transition:transform .4s cubic-bezier(.2,.9,.3,1),background .2s}
.ipanel{position:absolute;z-index:8;background:var(--g-cell);color:var(--g-text);overflow-y:auto;padding:18px 20px}
.ipanel.side{top:0;right:0;bottom:0;width:340px;box-shadow:-1px 0 0 var(--g-cell-d);animation:ipside .4s cubic-bezier(.2,.9,.3,1)}
.ipanel.over{inset:0;animation:ipover .32s ease-out}
.ipanel.side.out{animation:ipsideout .3s ease-in forwards}.ipanel.over.out{animation:ipout .2s ease-in forwards}
@keyframes ipside{from{transform:translateX(100%)}}@keyframes ipsideout{to{transform:translateX(100%)}}@keyframes ipover{from{opacity:0;transform:translateY(12px)}}
.ipanel.below{animation-name:ipinb}
.ipanel.out{animation:ipout .2s ease-in forwards}
@keyframes ipout{to{opacity:0}}
html.zen .ipanel{animation-duration:.7s;animation-timing-function:ease-in-out}
.ip-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}.ip-h b{flex:1;font-family:var(--f-display);font-size:19px;font-weight:600}
.ip-x{border:0;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--g-text) 10%,transparent);color:var(--g-text);font-size:18px}
.ipanel h3{font-family:var(--f-body);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--g-muted);margin:16px 0 6px}
.ipanel p{margin:0;font-size:14.5px;line-height:1.55}
.ip-ctl{display:flex;gap:8px;align-items:center;background:color-mix(in srgb,var(--g-text) 7%,transparent);border-radius:10px;padding:8px 10px;margin-top:10px!important;font-size:13.5px!important}
.howto{margin:0;padding-left:0;list-style:none;counter-reset:st;display:grid;gap:8px}
.howto li{counter-increment:st;display:grid;grid-template-columns:24px 1fr;gap:8px;font-size:14.5px;line-height:1.5}
.howto li::before{content:counter(st);width:22px;height:22px;border-radius:50%;background:var(--g-p1,var(--sun));color:#16161a;font-weight:800;font-size:12px;display:grid;place-items:center;margin-top:1px}

/* --- pause button (mockup L681-683) --- */
.gpause{position:absolute;top:8px;left:8px;z-index:7;width:32px;height:28px;border:0;border-radius:999px;background:color-mix(in srgb,var(--g-text) 12%,transparent);color:var(--g-text);display:grid;place-items:center}
.gpause:hover{background:color-mix(in srgb,var(--g-text) 22%,transparent)}
.gpause .ms{font-size:18px}

/* --- board / cell / status / splash (mockup L862-880) --- */
/* Tic tac toe */
.ttt{display:flex;flex-direction:column;align-items:center;gap:min(3cqh,14px);color:var(--g-text)}
.ttt .status{font-family:var(--f-display);font-size:min(5.5cqh,22px);font-weight:600;min-height:1.3em;text-align:center}
.board{--cs:min(19cqh,26cqw,100px);display:grid;grid-template-columns:repeat(3,var(--cs));grid-template-rows:repeat(3,var(--cs));gap:min(2cqh,9px)}
.cell{border:0;border-radius:16px;background:var(--g-cell);box-shadow:0 1px 0 var(--g-cell-d),0 2px 0 var(--g-cell-d),0 3px 0 var(--g-cell-d);transition:background .12s,transform .12s;font-family:var(--f-display);font-weight:700;font-size:calc(var(--cs)*.62);display:grid;place-items:center;transition:background .12s;color:#fff}
.cell:hover:not(:disabled){background:var(--g-cell-h)}
.cell span{display:block}
.cell span.new{animation:pop .32s cubic-bezier(.3,1.6,.5,1)}
.cell.x{color:var(--g-p1);text-shadow:0 1px 0 var(--g-p1d),0 2px 0 var(--g-p1d),0 3px 0 var(--g-p1d),0 4px 0 var(--g-p1d),0 6px 2px var(--drop)}.cell.o{color:var(--g-p2);text-shadow:0 1px 0 var(--g-p2d),0 2px 0 var(--g-p2d),0 3px 0 var(--g-p2d),0 4px 0 var(--g-p2d),0 6px 2px var(--drop)}.cell.win{animation:pulse2 .7s ease-in-out infinite;background:color-mix(in srgb,var(--g-p1) 22%,var(--g-cell))}
.cell:disabled{cursor:default}
.gplay .score{display:flex;gap:14px;font-size:13px;color:var(--g-muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center}
.gplay .score b{color:var(--g-text);font-size:15px}
.gplay .again{border:0;background:var(--g-p1);color:#16161a;box-shadow:inset 0 -2px 0 var(--rim),0 1px 0 var(--g-p1d),0 2px 0 var(--g-p1d),0 3px 0 var(--g-p1d),0 4px 0 var(--g-p1d),0 6px 3px var(--drop);animation:pop .35s cubic-bezier(.3,1.6,.5,1);border-radius:999px;padding:7px 18px;font-weight:700}
.splash{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:var(--g-text);text-align:center;background:var(--g-bg)}
.splash svg{width:84px}
.splash .load{width:160px;height:6px;border-radius:9px;background:var(--g-cell);overflow:hidden}
.splash .load i{display:block;height:100%;width:0;background:#ffc21a;animation:ld 1.1s ease forwards}
@keyframes ld{to{width:100%}}


/* Online matches: "waiting for your rival" / "your rival left" veil (kit oveil) */
.gveil{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:var(--veil,rgba(20,18,36,.72));color:#fff;text-align:center;padding:24px}
.garea.light .gveil{background:rgba(255,255,255,.85);color:#141414}
.gveil div{display:grid;gap:10px;justify-items:center;max-width:320px}
.gveil b{font-family:var(--f-display);font-size:20px;font-weight:600}
.gveil small{opacity:.8;font-size:14px}
.gspin{width:26px;height:26px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:gspin .8s linear infinite;display:block}
@keyframes gspin{to{transform:rotate(360deg)}}

/* No text selection or drag ghosts inside games (feels like a web page, not a game) */
html,body,.garea,.garea *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.garea input,.garea textarea{-webkit-user-select:text;user-select:text}
.garea img{-webkit-user-drag:none}

/* Connected gamepads: one small icon per pad, in its own color, that beats when used */
.gpads{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;gap:8px;pointer-events:none}
.gpads span{display:inline-flex;align-items:center;gap:2px;opacity:.45;font:800 12px/1 system-ui,sans-serif}
.gpads svg{width:24px;height:24px;display:block}
.gpads .beat{animation:gpbeat .45s ease-out}
@keyframes gpbeat{0%{transform:scale(1);opacity:.45}30%{transform:scale(1.35);opacity:.95}100%{transform:scale(1);opacity:.45}}

/* White flag: give up (kit, every game but toys). Subtle until hovered or armed. */
.gflag{position:absolute;right:10px;bottom:10px;z-index:7;height:30px;min-width:30px;padding:0 7px;border:0;border-radius:999px;display:flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--g-text) 12%,transparent);color:var(--g-text);opacity:.5;transition:opacity .2s,background .2s;font-size:13px;font-weight:700}
.gflag[hidden]{display:none}.gflag svg{width:18px;height:18px}.gflag span:empty{display:none}
.gflag:hover{opacity:.9}.gflag.sure{opacity:1;background:#fff;color:#c62828}
.garea.zp .gflag{display:none}

.gcheat{position:absolute;top:8px;left:8px;z-index:8;width:30px;height:28px;border:0;border-radius:999px;background:color-mix(in srgb,var(--g-text) 12%,transparent);font-size:15px;line-height:1;padding:0;opacity:.75}
.gcheat:hover{opacity:1}.gpause~.gcheat{left:46px}