/* The scene owns its canvas; this shell only frames play and accessible controls. */
.mini-game { width:min(100%,520px); margin:0 auto; color:var(--text); font-family:var(--font-ui,"Onest","Segoe UI",sans-serif); }
.mini-game *,.mini-game *::before,.mini-game *::after { box-sizing:border-box; }
.mini-game-heading { display:flex; align-items:center; gap:16px; margin:0 0 16px; }
.mini-game-heading h2 { margin:0; font-size:27px; font-weight:650; letter-spacing:-.04em; }
.mini-game-back,.mini-game-text-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 0; border:0; color:var(--muted); background:transparent; font:inherit; font-size:14px; cursor:pointer; }
.mini-game-back > span { font-size:20px; }
.mini-game-back:hover,.mini-game-text-button:hover { color:var(--text); }
.mini-game-board { position:relative; overflow:hidden; border:1px solid var(--line-strong); border-radius:24px; background:var(--surface); }
.mini-game-scoreboard { position:absolute; z-index:4; inset:16px 16px auto; display:flex; align-items:center; gap:10px; height:58px; pointer-events:none; }
.mini-game-score { display:flex; align-items:center; gap:11px; min-width:106px; height:58px; padding:8px 14px 8px 12px; border:1px solid var(--line-strong); border-radius:17px; color:var(--text); background:var(--surface); }
.mini-game-score > div { display:flex; flex-direction:column; gap:2px; }
.mini-game-score > div > span { color:var(--muted); font-size:12px; line-height:1.2; }
.mini-game-score strong { font-size:25px; font-weight:600; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.mini-game-egg-mark { width:19px; height:25px; flex:0 0 19px; border-radius:52% 52% 47% 47% / 64% 64% 39% 39%; background:var(--text); box-shadow:inset -3px -2px 0 var(--muted); transform:rotate(10deg); }
.mini-game-time { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:72px; height:58px; margin-left:auto; border:1px solid var(--line-strong); border-radius:17px; color:var(--text); background:var(--surface); }
.mini-game-time > strong { font-size:25px; font-weight:550; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.mini-game-time small { margin-left:4px; color:var(--muted); font-size:14px; font-weight:450; }
.mini-game-time > span { color:var(--muted); font-size:12px; }
.mini-game-pause { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid var(--line-selected); border-radius:15px; color:var(--text); background:var(--surface); cursor:pointer; pointer-events:auto; }
.mini-game-pause > span { font-size:23px; line-height:1; }
.mini-game-pause:hover { background:var(--surface-raised); }
.mini-game-arena { position:relative; height:clamp(460px,72dvh,600px); overflow:hidden; isolation:isolate; background:var(--surface-inset); touch-action:pan-y; }
.mini-game-arena[data-phase="running"][data-scene="ready"] { touch-action:none; cursor:grab; }
.mini-game-arena[data-phase="running"]:active { cursor:grabbing; }
.mini-game-arena:focus-visible { outline:2px solid var(--focus); outline-offset:-4px; }
.mini-game-scene { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.mini-game-scene canvas { display:block; width:100%; height:100%; }
.mini-game-catch-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.mini-game-catch-pop { position:absolute; top:0; left:0; padding:3px 7px; color:#ffe09a; font-size:25px; font-weight:750; line-height:1.1; letter-spacing:-.04em; text-shadow:0 2px 3px #342d1b,0 0 12px rgb(231 189 82 / .32); will-change:transform,opacity; }
.mini-game-catch-pop[hidden] { display:none; }
.mini-game-overlay { position:absolute; z-index:3; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:90px 23px 45px; text-align:center; color:var(--text); background:color-mix(in srgb,var(--bg) 92%,transparent); cursor:default; }
.mini-game-round-kicker { margin:0 0 12px; color:var(--muted); font-size:11px; font-weight:500; line-height:1.4; }
.mini-game-overlay h2 { max-width:300px; margin:0; color:var(--text); font-size:29px; font-weight:600; line-height:1.1; letter-spacing:-.04em; }
.mini-game-overlay > p { max-width:280px; margin:13px 0 22px; color:var(--muted); font-size:13px; line-height:1.55; }
.mini-game-welcome { inset:90px 22px auto; gap:17px; max-width:310px; margin:0 auto; padding:20px 16px; border:1px solid var(--line-strong); border-radius:20px; background:var(--surface); box-shadow:0 10px 24px rgb(0 0 0 / .16); }
.mini-game-welcome h2 { font-size:23px; }
.mini-game-primary { display:flex; align-items:center; justify-content:center; gap:28px; min-width:187px; min-height:48px; padding:12px 21px; border:1px solid var(--yellow); border-radius:13px; color:var(--action-text); background:var(--yellow); font:inherit; font-size:14px; font-weight:650; line-height:1.4; cursor:pointer; transition:background-color .15s ease; }
.mini-game-primary:hover:enabled { background:color-mix(in srgb,var(--yellow) 85%,var(--text)); }
.mini-game-primary:disabled { opacity:.45; cursor:wait; }
.mini-game-primary > span { font-size:21px; font-weight:450; line-height:1; }
.mini-game-paused .mini-game-text-button { margin-top:9px; color:var(--muted); font-size:13px; }
.mini-game-result .mini-game-result-number { display:flex; flex-direction:column; gap:6px; margin:22px 0 26px; }
.mini-game-result-number > strong { color:var(--yellow); font-size:72px; font-weight:550; line-height:1; letter-spacing:-.05em; }
.mini-game-result-number > span { color:var(--muted); font-size:13px; }
.mini-game-result h2:focus { outline:none; }
.mini-game-loading { background:var(--surface); }
.mini-game-loading h2,.mini-game-error h2 { font-size:25px; }
.mini-game-loader { width:32px; height:32px; margin-bottom:23px; border:2px solid var(--line-strong); border-top-color:var(--yellow); border-radius:50%; animation:mini-game-load 1s linear infinite; }
.mini-game-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:69px; padding:12px 15px; border-top:1px solid var(--line-strong); background:var(--surface); }
.mini-game-controls > p { margin:0; color:var(--text); font-size:14px; line-height:1.5; }
.mini-game-controls > p > span { display:block; color:var(--muted); font-size:12px; }
.mini-game-direction-buttons { display:flex; flex-shrink:0; gap:7px; }
.mini-game-direction-buttons > button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line-selected); border-radius:13px; color:var(--text); background:var(--surface-raised); font:inherit; font-size:23px; cursor:pointer; touch-action:manipulation; }
.mini-game-direction-buttons > button:disabled { opacity:.34; cursor:default; }
.mini-game-direction-buttons > button:hover:enabled { border-color:var(--focus); }
.mini-game button:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.cabinet-game { width:min(100%,960px); margin:0 auto; }
.page-content:has(> .cabinet-game) { animation-fill-mode:backwards; }
.cabinet-game-intro { margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.6; }
.cabinet-game-stage { position:relative; }
@media(max-width:1023px) { .cabinet-game-stage { width:min(100%,520px); margin:0 auto; }.cabinet-game .mini-game-heading { min-height:44px; padding-right:56px; }.cabinet-game .support-launcher { position:absolute; top:0; right:0; bottom:auto; width:44px; height:44px; min-height:44px; padding:10px; border-radius:13px; box-shadow:none; }.cabinet-game .support-launcher > span { display:none; }.cabinet-game .support-launcher > b { position:absolute; top:-6px; right:-6px; } }
@media(min-width:1024px) { .cabinet-game .mini-game { width:100%; }.cabinet-game .mini-game-arena { height:clamp(560px,64dvh,640px); } }
@keyframes mini-game-load { to { transform:rotate(360deg); } }
@media(max-width:360px) { .mini-game-scoreboard { inset:13px 13px auto; }.mini-game-welcome { inset:90px 15px auto; padding-inline:12px; }.mini-game-controls { padding-inline:12px; gap:7px; }.mini-game-direction-buttons { gap:5px; } }
@media(prefers-reduced-motion:reduce) { .mini-game *,.mini-game *::before,.mini-game *::after { animation:none; transition:none; scroll-behavior:auto; } }