/* Illustrated Brain Gym: the same storybook world as the Arcade, with readable controls. */
:root{--card:rgba(255,250,252,.8);--glass-strong:rgba(255,250,252,.96);--cream:#fff9f2;--r:24px;--r2:17px;
  --line:rgba(255,255,255,.94);--shadow:inset 0 1px 0 #fff,0 6px 22px rgba(137,63,91,.1)}
html[data-theme="night"]{--card:rgba(58,30,45,.92);--glass-strong:rgba(48,24,36,.98);--cream:#38232d;
  --line:rgba(247,188,213,.18);--shadow:inset 0 1px 0 #ffd6e918,0 6px 22px #0003}
.gym-art{display:block;flex:0 0 auto;width:44px;height:44px;aspect-ratio:1;border-radius:12px;overflow:hidden;vertical-align:middle}
.tabbar{height:74px;padding:4px;background:var(--glass-strong);border-color:var(--pink3);border-radius:24px}
.tab{gap:3px;padding:4px 2px}
.tab-icon{width:36px;height:36px;flex:0 0 36px}
.nav-illustration{display:block;width:34px;height:34px;object-fit:contain;transform:none}
.tab.on::before{background:var(--pink2);box-shadow:none}
.tab.on{color:var(--accent-ink)}
html[data-theme="night"] .tab.on::before{background:#71374f}
html[data-theme="night"] .tab.on{color:#ffe6f1}
.apphead{padding:8px 2px 14px}
.apphead h1{line-height:1.35}
.apphead .tag{margin-top:3px}
.kitty img,.note-mascot,.you-top img,.boss-mascot{object-fit:contain}
.section-header{gap:14px;align-items:center;min-height:96px;margin-bottom:14px}
.header-art{width:72px;height:72px;flex:0 0 72px;border-radius:18px;object-fit:contain}
.section-header>div{min-width:0}
.hero,html[data-theme="night"] .hero{position:relative;overflow:hidden;border:1px solid var(--pink3);padding:15px;color:var(--ink);
  background:linear-gradient(145deg,var(--glass-strong),var(--pink1));box-shadow:var(--shadow)}
.hero-top{padding-bottom:0;gap:10px}
.hero-greet{color:var(--ink2)}
.hero-name{color:var(--accent-ink);font-size:var(--fs-l);margin-top:4px;line-height:1.3}
.hstat{background:var(--glass-strong);border:1px solid var(--pink3);padding:8px 4px}
.hstat b{color:var(--accent-ink)}
.hstat span{color:var(--ink2)}
.ring{background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--pink3) 0);box-shadow:none;flex-shrink:0}
.ring::after{background:var(--accent)}
.ring-num{color:#fff}
.xp-bar{background:var(--pink2)}
.xp-bar i{background:linear-gradient(90deg,var(--pink4),var(--accent))}
.xp-txt{color:var(--ink2);text-align:right;white-space:normal}
.wo{padding:10px 6px 9px;background:var(--glass-strong);border-color:var(--line);overflow:visible;min-width:0}
.wo-ic{display:block;margin:0 auto 4px}
.wo-ic .gym-art{width:54px;height:54px;border-radius:13px}
.wo-nm{font-weight:var(--fw-bold);font-size:var(--fs-s)}
.wo-tick{top:5px;right:5px}
.wo-new{top:5px;right:5px;max-width:calc(100% - 10px);margin:0;font-size:10px;line-height:1.2;padding:3px 5px}
.mini-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:10px;align-content:center;align-items:center;
  min-height:82px;padding:11px;text-align:left;background:var(--glass-strong)!important;color:var(--ink);border:1px solid var(--line);border-radius:18px;overflow:visible}
.mc-ic{grid-row:1/3;display:block}
.mc-ic .gym-art{width:48px;height:48px;border-radius:12px}
.mini-card b{font-size:var(--fs-s);color:var(--accent-ink);line-height:1.2}
.mini-card i{color:var(--ink2);font-size:var(--fs-xs)}
.mini-card.locked .mc-ic{filter:saturate(.65)}
.grow{gap:12px;margin-bottom:12px}
.gtiles{gap:7px}
.tile{padding:9px 3px 8px;gap:5px;border-width:1px;overflow:visible}
.tile-ic .gym-art{width:42px;height:42px;border-radius:11px}
.tile-nm{font-size:var(--fs-xs);line-height:1.25;overflow-wrap:normal}
.tile-ft{font-size:var(--fs-xs);line-height:1.3}
.tile-ft .new-pill{line-height:1.2;padding:2px 5px}
.arc-home-link{margin-top:10px;padding:10px 12px}
.arc-home-art{width:44px;height:44px}
.playhead{padding:4px 0 8px;margin-bottom:10px}
.playhead .gym-art{width:42px;height:42px;border:1px solid var(--line)}
.playhead h1{gap:10px}
.q-card,.bl-q,.sp-show,.boss-intro,.gamebox,.handoff,.cg-recap-box{background:var(--glass-strong);border:1px solid var(--pink3);border-radius:24px;box-shadow:var(--shadow)}
.gamebox{padding:17px}
.gamebox .q-card{box-shadow:none}
.opt,.wh-cell,.stile,.pkey,.tin,.code-box,.memory-card,.pt-cell{background:var(--card);box-shadow:inset 0 1px 0 #fff9,0 3px 0 color-mix(in srgb,var(--pink3) 45%,transparent)}
.opt:not(.correct):not(.wrong){border-color:var(--pink3)}
.opt.correct,.wh-cell.sel,.pkey.go{box-shadow:inset 0 1px 0 #fff4,0 3px 0 #784b6025}
.memory-card:not(.flipped):not(.matched){background-image:url('../img/gym/collection-transparent.webp');background-size:400% 400%;background-position:100% 66.6667%;color:transparent;border-color:var(--pink3)}
.btn{border:1px solid #ffffff55;box-shadow:inset 0 1px 0 #ffffff44,0 5px 12px #91304e1c}
.btn.gold{background:linear-gradient(135deg,#fff0bf,#dfbc69);border-color:#f9e8b5;color:#705023}
.btn.ghost{border-color:transparent;box-shadow:none}
.panel,.row-btn,.tileb,.bgd,.note,.cp-daily,.cp-board,.best-row,.sheet-card,.res-card{border-color:var(--line);box-shadow:var(--shadow)}
.panel,.row-btn,.tileb,.bgd,.note,.cp-daily,.cp-board,.best-row{background:var(--card)}
.lvl-panel{padding:20px}
.lvl-badge{background:linear-gradient(140deg,#ffecc2,#e8bfd0);color:#8b3155;border:2px solid #fff2da;box-shadow:0 4px 12px #a7547420}
.tiles{gap:10px}
.tiles .tileb{padding:15px 5px;border-radius:20px}
.tileb b{margin:7px 0}
.save-item:not(.used) .save-state{color:var(--ink)}
.bg-grid{gap:12px}
.bgd{padding:16px 6px;border-radius:21px}
.bgd .bgi{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#fff1d6,#ffe1ef);border:2px solid #f4dcb6;box-shadow:inset 0 1px 0 #fff,0 3px 8px #99547420}
.bgd:not(.locked) .bgi{border-color:#d6b26c}
.bgd b{margin:7px 0 2px}
html[data-theme="night"] .bgd .bgi{background:linear-gradient(135deg,#563448,#342032);border-color:#906e51}
.br-ic .gym-art{width:38px;height:38px}
.sheet-card,.res-card{background:var(--glass-strong);border-radius:28px;border:1px solid var(--pink3)}
.res-ic .gym-art{width:84px;height:84px;border-radius:23px;margin-bottom:10px}
.note{border-style:solid;background:var(--glass-strong);padding:18px 14px;border-radius:22px}
.you-top{background:var(--glass-strong);padding:22px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.cp-games .tile-ic .gym-art{width:64px;height:64px;border-radius:15px}
.cp-games .tile.pick{background:var(--glass-strong)!important;border-color:var(--line);padding:12px 6px}
.cp-games .tile.pick .tile-nm{color:var(--ink)}
.cp-board{border-radius:24px;padding:16px}
.cg-turn{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20;display:grid;grid-template-columns:minmax(0,1fr) 90px;
  gap:12px;padding:17px;border-radius:23px;background:var(--glass-strong);border:2px solid #bacce7;box-shadow:0 5px 16px #58415f1c}
.cg-turn.mine{border-color:var(--pink5);background:var(--glass-strong)}
.cg-turn-person{display:grid;gap:3px;min-width:0}
.cg-turn-caption{font-size:var(--fs-xs);color:var(--ink2);font-weight:var(--fw-reg)}
.cg-turn-person strong{font-size:var(--fs-xl);line-height:1.25;color:var(--ink)}
.cg-turn.mine .cg-turn-person strong{color:var(--accent-ink)}
.cg-turn-detail{font-size:var(--fs-xs);line-height:1.4;color:var(--ink2);font-weight:var(--fw-reg)}
.cg-clock{display:grid;place-items:center;padding:9px 4px;background:var(--pink2);border-radius:17px;border:1px solid var(--pink3)}
.cg-clock-number{font-size:var(--fs-display);line-height:1.1;font-weight:var(--fw-bold);color:var(--accent-ink)!important}
.cg-clock-label{font-size:var(--fs-xs);color:var(--ink2);font-weight:var(--fw-reg)}
.cg-clock-track{grid-column:1/-1;height:8px;background:var(--pink2);border-radius:99px;overflow:hidden}
.cg-clock-track i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .1s linear}
.cg-turn .chip,.cg-turn .cg-off{grid-column:1/-1}
.cg-turn.low{border-color:var(--no)}
.cg-turn.low .cg-clock{background:#ffe2d9;border-color:#e79785}
.cg-turn.low .cg-clock-number,.cg-turn.low .cg-clock-label{color:#a52e28!important}
.cg-turn.low .cg-clock-track i{background:#ba3d38}
.cg-head .cs{border-radius:17px;padding:12px}
.lead[class*="turn-"]{position:sticky;top:8px;z-index:20;padding:15px;margin:4px 0 12px;border-radius:20px;background:var(--glass-strong);border:2px solid var(--pink5);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--accent-ink);box-shadow:var(--shadow)}
.lead.turn-him,.lead.turn-ammu{border-color:#a7bde6;color:#435b8c}
html[data-theme="night"] .lead.turn-him,html[data-theme="night"] .lead.turn-ammu{color:#bacef7}
.bl-time,.gym-quiz-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:83px;padding:9px 12px;border:1px solid var(--pink3);
  border-radius:17px;background:var(--glass-strong);font-size:var(--fs-xxl);font-weight:var(--fw-bold);line-height:1.2;color:var(--accent-ink);font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.bl-time::before{content:'time left';font-size:var(--fs-xs);color:var(--ink2);font-weight:var(--fw-reg);margin-bottom:3px}
.gym-quiz-clock{flex-direction:row;justify-content:space-between;gap:15px;min-width:0;padding:10px 15px;order:-1}
.gym-quiz-clock>span{font-size:var(--fs-s);color:var(--ink2);font-weight:var(--fw-reg)}
.gym-quiz-clock b{font-size:var(--fs-xxl)}
.gym-quiz-clock[hidden]{display:none}
.bl-time.low,.gym-quiz-clock.low{background:#ffe2d9;border-color:#e79785;color:#a52e28}
.bl-time.low::before,.gym-quiz-clock.low>span{color:#a52e28}
.bl-top{gap:12px;padding:9px 12px;border-radius:21px;background:var(--card);border:1px solid var(--line)}
.bl-bar,.q-bar{height:9px}
.phud:not(:empty){padding:8px 11px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--pink3);font-size:var(--fs-m);font-weight:var(--fw-bold)}
@media(max-width:350px){.cg-turn{padding:12px;grid-template-columns:minmax(0,1fr) 78px;gap:9px}.cg-turn-person strong{font-size:var(--fs-l)}.cg-clock-number{font-size:var(--fs-xxl)}.mini-card{grid-template-columns:40px minmax(0,1fr);padding:9px;column-gap:7px}.mc-ic .gym-art{width:40px;height:40px}.gamebox{padding:12px}}

/* Chat stays within reach while the game or lobby scrolls. */
.talk{margin-top:14px;padding-top:54px}
.chat-btn{position:fixed;right:max(14px,calc((100vw - 536px)/2));bottom:calc(16px + var(--safeb));z-index:35;
  min-height:48px;min-width:112px;padding:12px 18px;border:2px solid var(--glass-strong);border-radius:99px;background:var(--accent);color:#fff;
  font-size:var(--fs-m);font-weight:var(--fw-bold);box-shadow:0 5px 20px #7d294744}
.chat-btn .chat-badge{background:#fff;color:var(--accent-ink);border:1px solid var(--pink3)}
.play:has(.chat-btn){padding-bottom:calc(88px + var(--safeb))}
.cg-live-status{display:flex;align-items:center;justify-content:center;gap:7px;font-size:var(--fs-xs);color:var(--ink2);margin:0 0 8px}
.cg-live-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* Square illustrations are contained; wide cards never rescale their x/y axes independently. */
.arc-art,.arc-home-art{background-image:none}
.arc-home-art{display:block;flex:0 0 44px;overflow:hidden;border-radius:12px}
.arc-feature{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px;padding:16px;background:var(--glass-strong);min-height:0}
.arc-feature .arc-feature-art{position:static;inset:auto;z-index:auto;width:84px;height:84px;border-radius:18px}
.arc-feature::after{display:none}
.arc-feature-copy{padding:0}
.arc-feature h2{font-size:22px;line-height:1.35}
.arc-feature p{margin:5px 0 0}
.arc-feature .arc-launch,.arc-feature-meta{grid-column:1/-1}
.arc-feature-meta{margin-top:0}
.arc-card-image{aspect-ratio:auto;height:130px;background:var(--glass-strong)}
.arc-card-image .arc-art{display:block;width:100%;height:100%;overflow:hidden}
.arc-status{bottom:6px;left:6px}
@media(max-width:350px){.tile-ic .gym-art{width:36px;height:36px}.gtiles{gap:5px}.grow{gap:8px}.tile{padding-inline:2px}.arc-feature{grid-template-columns:72px minmax(0,1fr);padding:14px}.arc-feature .arc-feature-art{width:72px;height:72px}.arc-feature h2{font-size:19px}}

/* Native image frames avoid SVG viewport clipping in the iPhone Home Screen app. */
.gym-art,.sheet-gym{--sheet-cols:4;--sheet-rows:4;display:block;overflow:hidden}
.arc-art,.arc-home-art{--sheet-cols:2;--sheet-rows:4;display:block;overflow:hidden}
.art-tile{position:relative;display:block;width:100%;height:100%;overflow:hidden;isolation:isolate}
.art-tile .art-sprite{position:absolute;display:block;max-width:none;max-height:none;margin:0;border-radius:0;
  width:calc(100% * var(--sheet-cols));height:calc(100% * var(--sheet-rows));
  left:calc(-100% * var(--sheet-x));top:calc(-100% * var(--sheet-y));object-fit:fill;pointer-events:none}
.arc-art,.arc-home-art{display:flex;align-items:center;justify-content:center}
.arc-art .art-tile{flex:0 0 auto;width:var(--tile-width,100%);height:auto;aspect-ratio:var(--tile-aspect,1)}
/* Match the compact Home cards: illustration beside the title, a short action, then status. */
.arc-grid{gap:10px}
.arc-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:1fr auto;gap:9px 10px;padding:12px;align-items:start;border-radius:18px;min-height:114px}
.arc-card-image{grid-column:1;grid-row:1;width:48px;height:48px;aspect-ratio:1;padding:0;border-radius:12px;background:transparent}
.arc-card-image .arc-art{width:48px;height:48px}
.arc-card-copy{grid-column:2;grid-row:1;padding:0;min-width:0;display:grid;gap:4px}
.arc-card h3{font-size:14px;line-height:1.25;margin:0}
.arc-card p{font-size:11px;line-height:1.35;min-height:0;margin:0}
.arc-card-foot{border:0;padding:0;margin:0;font-size:11px;line-height:1.3}
.arc-card-foot:empty{display:none}
.arc-status{grid-column:1/-1;grid-row:2;position:static;justify-self:start;display:inline-block;margin:0;padding:3px 7px;font-size:10px;box-shadow:none}
@media(max-width:350px){.arc-card{grid-template-columns:40px minmax(0,1fr);gap:8px;padding:10px}.arc-card-image,.arc-card-image .arc-art{width:40px;height:40px}.arc-card h3{font-size:13px}}

/* Full Arcade: roomy touch controls, readable clocks, and the same card surfaces. */
.arc-title-art{width:32px;height:32px;flex:0 0 32px}
.arc-panel-art{width:64px;height:64px;margin:0 auto}
.arc-session-meta{display:flex;justify-content:space-between;align-items:center;min-height:28px;margin:0 4px 8px;color:var(--accent-ink);font-size:15px;font-weight:800}
#arcTime{font-size:20px;font-variant-numeric:tabular-nums}
#arcTime.low{color:var(--bad)}
.arc-controls{display:flex;gap:10px;justify-content:center;margin:12px 0 0}
.arc-control{min-height:44px;min-width:52px;padding:8px 16px;border:1px solid var(--pink3);border-radius:14px;background:var(--glass-strong);color:var(--accent-ink);font:800 18px 'Baloo 2',sans-serif;box-shadow:var(--rim);touch-action:manipulation}
.arc-control:focus-visible,.arc-memory-card:focus-visible,.arc-bop-hole:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.arc-board-layer{position:absolute;inset:0;pointer-events:none}
.arc-memory-grid{inset:12% 5% 13%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}
.arc-memory-card{pointer-events:auto;display:grid;place-items:center;min-width:0;padding:3px;background:#fff8fb;border:2px solid #eba7c6;border-radius:12px;touch-action:manipulation}
.arc-memory-card .gym-art{width:100%;height:auto;aspect-ratio:1;border-radius:0}
.arc-memory-card.matched{border-color:#86b699;background:#eef9f1;opacity:1}
.arc-card-back{color:#c14c84;font-size:32px;font-weight:800}
.arc-bop-grid{inset:15% 6% 20%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.arc-bop-hole{pointer-events:auto;display:grid;place-items:center;padding:4px;min-width:0;border:2px solid #efd0df;border-radius:22px;background:#fffafd;touch-action:manipulation}
.arc-bop-hole .arc-art{width:100%;height:100%}
.arc-bop-hole.active{border-color:#d980ab;background:#fff0f7}
.arc-bop-cloud{font-size:32px;color:#a45480}
.arc-game-overlay{z-index:2}
html[data-theme="night"] .arc-status.ready{background:#593d29;color:#ffe5af;border-color:#846446}
@media(max-height:700px){.arc-panel-art{width:42px;height:42px}.arc-session-meta{margin-bottom:4px}.arc-controls{margin-top:8px;gap:8px}.arc-control{padding:6px 12px}}

/* Scenic Arcade boards let the illustrated world show through. */
.arc-memory-card{background:linear-gradient(145deg,#fffdfbea,#ffe9f2de);border-color:#fff8f4;box-shadow:0 3px 10px #70314c22,inset 0 0 0 1px #e8a0bd;transition:transform .15s ease,border-color .15s ease}
.arc-card-back{display:grid;place-items:center;width:86%;height:86%;border-radius:9px;background:linear-gradient(135deg,#fce3ec,#f3b3cf);border:1px solid #fff8f4;box-shadow:inset 0 0 0 3px #ffffff52;color:#ac4475;font-size:30px;text-shadow:0 1px #fff}
.arc-memory-card.matched{background:#eff9efec;border-color:#86b699}
.arc-bop-hole{background:linear-gradient(145deg,#fffaf3de,#ffe9f5c9);border-color:#fff8f3;box-shadow:0 4px 14px #7d3b6327,inset 0 -5px 0 #eebed555;border-radius:40%}
.arc-bop-hole.active{background:linear-gradient(145deg,#fff8dcee,#ffe4f3f0);border-color:#efca85;box-shadow:0 0 20px #fff3c3a0,inset 0 -5px 0 #e9a8cc55}
.arc-memory-card:not(:disabled):active,.arc-bop-hole:active{transform:scale(.95)}
@media(prefers-reduced-motion:reduce){.arc-memory-card,.arc-bop-hole{transition:none}}

/* Touch-only games: a large, permanent gesture cue beside the play area. */
.arc-touch-help{margin:0 0 12px;padding:12px 16px;background:#fff9fc;border:2px solid #e7aac5;border-radius:18px;color:#4a2538;text-align:center}
.arc-touch-help strong{display:block;font-size:22px;line-height:1.2;font-weight:800}
.arc-touch-help p{margin:5px 0 0;font-size:18px;line-height:1.3;font-weight:600;color:#63364b}
.arc-game-touch .arc-stage{width:min(100%,calc((100dvh - 330px - var(--safeb)) * .6923))}
.arc-game-touch .arc-panel-art{display:none}
.arc-game-touch .arc-game-panel p{font-size:18px;line-height:1.4;font-weight:600;color:#542d40}
.arc-game-touch .arc-game-panel h2{font-size:24px}
.arc-game-touch .arc-game-panel .btn{font-size:20px;min-height:48px}
html[data-theme="night"] .arc-touch-help{background:#40202f;border-color:#bd789c;color:#fff3f8}
html[data-theme="night"] .arc-touch-help p{color:#ffe2ef}

/* Simple direction arrows: no numbers or unused keys. */
.arc-dpad-hint{margin:12px 0 8px;text-align:center;font-size:22px;line-height:1.25;font-weight:800;color:var(--ink)}
.arc-dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,48px);gap:5px;width:max-content;margin:0 auto;position:relative}
.arc-dpad .arc-control{width:64px;min-width:64px;height:48px;padding:0;font-size:32px;line-height:1;background:var(--card);border-width:2px;border-color:var(--accent-ink);border-radius:14px}
.arc-dpad [data-direction="up"]{grid-area:1/2}.arc-dpad [data-direction="left"]{grid-area:2/1}
.arc-dpad [data-direction="right"]{grid-area:2/3}.arc-dpad [data-direction="down"]{grid-area:3/2}
.arc-game:has(.arc-dpad) .arc-stage{aspect-ratio:1;width:min(100%,calc(100dvh - 365px - var(--safeb)))}
.arc-game:has(.arc-dpad) .arc-game-tip{font-size:18px;line-height:1.35;font-weight:600;color:var(--ink)}
.arc-game:has(.arc-dpad) .arc-game-panel p{font-size:18px;line-height:1.4;font-weight:600;color:#542d40}
.arc-game:has(.arc-dpad) .arc-panel-art{display:none}
.arc-session-meta:has(#arcLife:empty):has(#arcTime:empty){display:none}

/* One vector arrow, rotated: identical size and weight in every direction. */
.arc-dpad .arc-control{display:grid;place-items:center}
.arc-dpad .arc-control svg{display:block;width:30px;height:30px;pointer-events:none}
.arc-dpad [data-direction="left"] svg{transform:rotate(-90deg)}
.arc-dpad [data-direction="right"] svg{transform:rotate(90deg)}
.arc-dpad [data-direction="down"] svg{transform:rotate(180deg)}