:root{--paper:#faf7f0;--ink:#293f37;--muted:#737e70;--accent:#b75236;--line:#deded0}
html,body{background:var(--paper);color:var(--ink);overflow:auto;min-width:280px;user-select:auto}
body{padding:0 20px 28px}
#stage{position:relative;inset:auto;overflow:visible;width:min(1120px,100%);margin:auto}
.toybar{height:80px;display:flex;align-items:center;gap:18px;position:relative}
.plaza{display:inline-flex;align-items:center;white-space:nowrap;position:static;flex:none;color:var(--ink);background:none;border:0;border-radius:0;border-right:1px solid var(--line);height:36px;padding:0 18px 0 0;letter-spacing:0;font-size:12px}
.plaza::before{content:'← ';white-space:pre}
.toybrand{font-size:11px;letter-spacing:.13em;display:flex;gap:12px;align-items:center}
.toybrand>span{width:35px;height:35px;display:grid;place-items:center;background:var(--accent);border-radius:11px;transform:rotate(-8deg);color:#fff5d7;font-size:24px}
.toyactions{margin-left:auto;display:flex;gap:8px}
.corner,#quitBtn,#mute{position:static;inset:auto;width:auto;min-width:44px;height:44px;border:1px solid var(--line);background:#fffdf8;color:var(--ink);box-shadow:0 2px 0 #dedbce;border-radius:15px;font-size:12px}
#mute{font-size:19px}.corner.off{color:#818b7e}
#playBoard{position:relative;border-radius:26px;overflow:hidden;border:1px solid #d0c9b4;box-shadow:0 8px 28px #66573712;background:#f2ead8}
body:not([data-screen="play"]) #playBoard{display:none}
#cv{display:block;width:100%;touch-action:none;height:700px;outline-offset:-5px}
#hud{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:8px}
.stat{border:1px solid #deded0;background:#fffdf8ee;border-radius:14px;padding:8px 15px;min-width:82px;box-shadow:0 3px 9px #4d533608}
.stat .lbl{color:#737b6b;font-size:10px;letter-spacing:0}.stat .val{color:var(--ink);font-size:23px;font-weight:800}.stat:first-child .val{color:var(--accent)}
.screen{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;padding:0;overflow:visible;text-align:left;background:none;animation:toy-in .25s ease}
.screen-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px 8px 30px 48px;gap:12px}
.toyhero{min-height:570px;position:relative;background:#e9eddf;overflow:hidden;border:1px solid #dfe2d6;border-radius:32px}
.toyhero img{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.toyhero::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#fbf5e8df)}
.hero-note{z-index:1;position:absolute;bottom:55px;left:28px;font-size:clamp(20px,2.3vw,30px);font-weight:800;line-height:1.65;letter-spacing:.06em;color:#294239;text-shadow:0 2px 9px #fff;max-width:calc(100% - 56px)}
.hero-number{z-index:1;position:absolute;bottom:25px;left:28px;font-size:9px;letter-spacing:.16em;color:#41584b}
.sub{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:800}
.ttl{font-size:clamp(32px,3.7vw,49px);line-height:1.25;margin:0;color:var(--ink);background:none;-webkit-text-fill-color:var(--ink);filter:none;letter-spacing:-.05em}
.rules{background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;max-width:none;font-size:13px;line-height:1.85;padding:16px 0;color:#647165;margin:7px 0}
.rules li{padding-left:18px}.rules li::before{content:'✦';left:0;top:0;color:#b79b66;font-size:11px}.rules b{color:var(--ink)}
.btn{border-radius:16px;padding:16px 25px;min-height:54px;width:100%;font-size:17px;letter-spacing:.08em;background:var(--accent);color:#fffdf5;box-shadow:0 4px 0 #8d422d;margin:5px 0 0}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #8d422d}
.btn.ghost{border:1px solid var(--line);background:transparent;color:var(--ink);box-shadow:none;font-size:14px;padding:13px 20px;min-height:47px}
.beststat{font-size:11px;color:var(--muted);align-self:center;margin-top:5px;text-align:center}
#result .screen-copy{gap:16px}
.result-art{background:#f5f1e6;border-radius:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;min-height:540px}
.result-art img{width:100%;height:auto;max-height:500px;object-fit:contain}
.result-art p{font-size:10px;letter-spacing:.18em;color:#9a8a69;margin:0 20px 35px}
.rttl,.rttl.win,.rttl.lose{font-size:clamp(24px,3vw,38px);color:var(--ink);margin:0;font-weight:800}
.rbig{font-size:clamp(48px,6vw,84px);line-height:1.1;color:var(--accent);text-shadow:none;margin:0;font-variant-numeric:tabular-nums}
.rcm{font-size:14px;line-height:1.8;color:var(--muted)}
.rstats{display:flex;gap:0;width:100%;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;border-radius:0;margin:0}
.rstats>div{flex:1;text-align:center;background:none;border:0;border-radius:0;padding:0;border-right:1px solid var(--line)}.rstats>div:last-child{border:0}.rstats b{display:block;color:var(--ink);font-size:26px}.rstats span{font-size:11px;color:var(--muted)}
.lvwrap{width:100%;margin:0}.lvlabel{color:var(--muted);font-size:11px}.lvbtns{display:flex;gap:8px}.lvbtn{flex:1;border-radius:12px;border:1px solid var(--line);background:#fffdf8;color:var(--ink);min-height:44px}.lvbtn.on{background:#547b69;border-color:#547b69;color:#fff}.lvnote{color:var(--muted);font-size:11px}
.rw-back{background:#3c705d!important;color:#fff!important;box-shadow:none!important;border-radius:15px!important;max-width:100%;white-space:normal;line-height:1.6}
#oj-gate{background:var(--paper)!important;color:var(--ink)!important}#oj-gate>div>div{color:var(--ink)!important}#oj-gate a{background:var(--accent)!important;color:white!important}
:focus-visible{outline:3px solid #3b7c67;outline-offset:4px}
@keyframes toy-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:720px){body{padding:0 12px 22px}.toybar{height:68px;gap:12px}.toybrand{font-size:9px;letter-spacing:.08em;gap:8px}.toybrand>span{width:28px;height:28px;font-size:20px}.plaza{padding-right:12px;font-size:11px}.corner,#quitBtn,#mute{min-width:40px;height:40px;padding:0 10px}.screen{grid-template-columns:1fr}.toyhero{min-height:0;height:260px;border-radius:24px}.toyhero img{object-position:center 40%}.hero-note{left:22px;bottom:38px;font-size:21px}.hero-number{left:22px;bottom:17px;font-size:8px}.screen-copy{padding:24px 5px 10px;gap:10px}.ttl{font-size:37px}.sub{font-size:9px}.rules{font-size:12px;margin:3px 0;padding:13px 0}.result-art{min-height:0;height:225px;border-radius:24px}.result-art img{height:195px;width:auto;max-width:100%}.result-art p{margin:0 10px 12px;font-size:8px}#result .screen-copy{align-items:center;padding-top:22px;gap:13px}.rttl{font-size:27px}.rbig{font-size:65px}.rcm{text-align:center;font-size:13px}#playBoard{border-radius:20px}.stat{padding:8px 12px;min-width:0;flex:1}.stat .val{font-size:21px}#hud{gap:6px;left:10px;right:10px}}
@media(max-width:350px){.toybrand{font-size:8px;gap:5px}.toyactions{gap:5px}.toybar{gap:8px}.toybrand>span{display:none}.ttl{font-size:32px}.toyhero{height:230px}}
@media(prefers-reduced-motion:reduce){.screen{animation:none}.btn{transition:none}}

/* Keep the original full-viewport play area; the Toybox artwork stays in the canvas. */
html:has(body[data-screen="play"]), body[data-screen="play"] { overflow:hidden; overscroll-behavior:none; }
body[data-screen="play"] #stage { position:fixed; inset:0; width:100%; height:100%; margin:0; overflow:hidden; }
body[data-screen="play"] #stage #playBoard { position:absolute; inset:0; width:100%; height:100%; max-width:none; margin:0; padding:0; border:0; border-radius:0; }
body[data-screen="play"] #stage #cv { width:100%; height:100%; border-radius:0; }
body[data-screen="play"] #stage .play-heading,
body[data-screen="play"] #stage .board-note,
body[data-screen="play"] #stage .app-footer,
body[data-screen="play"] #stage .toybrand,
body[data-screen="play"] #stage .plaza { display:none; }
body[data-screen="play"] #stage .toybar { position:absolute; z-index:20; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); height:auto; min-height:0; padding:0; }
body[data-screen="play"] #stage .toyactions { flex-wrap:nowrap; gap:4px; }
body[data-screen="play"] #stage .corner { min-height:40px; padding:8px; border-radius:12px; font-size:11px; }
body[data-screen="play"] #stage #mute { min-width:40px; font-size:17px; }
body[data-screen="play"] #stage #hud { position:absolute; z-index:5; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); right:112px; max-width:460px; gap:4px; margin:0; }
body[data-screen="play"] #stage .stat { padding:5px 4px; border-radius:10px; }
body[data-screen="play"] #stage .stat .lbl { font-size:8px; letter-spacing:0; margin-bottom:2px; white-space:nowrap; }
body[data-screen="play"] #stage .stat .val { font-size:16px; line-height:1.25; }
body[data-screen="play"] #stage #colBtn,
body[data-screen="play"] #stage #zukanBtn { position:absolute; right:0; top:48px; }
body[data-screen="play"] #stage #card,
body[data-screen="play"] #stage #col,
body[data-screen="play"] #stage #zukan,
body[data-screen="play"] #stage #demo { inset:60px 8px max(8px,env(safe-area-inset-bottom)); min-height:0; overflow:auto; }
body[data-screen="play"] #stage .practice-slot { position:absolute; z-index:6; bottom:max(20px,env(safe-area-inset-bottom)); left:0; right:0; min-height:0; pointer-events:none; }
body[data-screen="play"] #stage .checkbtn { pointer-events:auto; }