/* Toybox edition: all panels belong to the app, with document scrolling on small screens. */
:root{color-scheme:light;--paper:#faf7f0;--surface:#fffdf8;--ink:#263e36;--muted:#667267;--green:#285b4c;--coral:#b74935;--line:#e3dfd1;--accent:#287b8c}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button,a,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.hidden{display:none!important}
#stage{position:relative;width:min(1100px,calc(100% - 40px));margin:0 auto}.app-bar{display:flex;gap:16px;align-items:center;min-height:80px}.plaza{font-size:12px;font-weight:800;white-space:nowrap}.brand{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:850;letter-spacing:.12em}.brand:before{content:'✦';display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:#fff4dd;border-radius:9px;transform:rotate(-8deg);font-size:20px}.controls{display:flex;gap:7px;margin-left:auto}.corner{border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--green);padding:10px 13px;min-height:42px;font-size:12px;font-weight:800}#mute{min-width:42px;font-size:18px}.corner.off{color:#777b70}.nslash{position:relative;display:inline-block}.nslash:after{content:'';position:absolute;left:50%;top:50%;width:1.2em;height:2px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg)}
.screen{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:28px;background:var(--surface);overflow:hidden;box-shadow:0 18px 50px #73614308}.hero-art{position:relative;min-height:570px;background:#eadac0;overflow:hidden}.hero-art>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.hero-art:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#2b3e324d)}.art-badge{position:absolute;z-index:1;top:24px;left:24px;border:1px solid #ffffffb3;background:#fff9ebed;border-radius:30px;padding:9px 14px;font-size:11px;font-weight:800}.art-caption{position:absolute;z-index:1;left:26px;right:26px;bottom:27px;color:#fffdf5;text-shadow:0 2px 14px #1f302966}.art-caption strong{font-size:23px;line-height:1.6}.art-caption small{display:block;margin-top:7px;font-size:9px;font-weight:750;letter-spacing:.16em}.screen-copy{padding:34px 34px 32px;align-self:center}.eyebrow{font-size:9px;letter-spacing:.17em;font-weight:850;color:var(--accent);margin:0 0 15px}.sub{font-size:11px;color:var(--muted);font-weight:750;letter-spacing:.08em;line-height:1.7;margin-bottom:12px}.ttl{font-size:clamp(31px,3.8vw,46px);line-height:1.22;letter-spacing:-.05em;color:var(--accent);font-weight:900;margin:0 0 20px}.rules{list-style:none;margin:0 0 20px;padding:15px 17px;border-radius:16px;background:#f5f1e5;color:#526153;font-size:12px;line-height:1.85}.rules li{position:relative;padding-left:15px;margin:3px 0}.rules li:before{content:'•';position:absolute;left:0;color:var(--accent)}.rules b{color:var(--green)}.btn{appearance:none;width:100%;min-height:52px;border:0;border-radius:28px;padding:14px 20px;background:var(--accent);color:white;font-size:16px;font-weight:850;box-shadow:0 5px 0 #253e362e;transition:transform .12s;margin-top:12px}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #253e362e}.btn.ghost{background:transparent;border:1px solid #d5d9ca;box-shadow:none;color:var(--green);font-size:13px;min-height:46px}.beststat{font-size:11px;font-weight:750;color:var(--muted);text-align:center;margin-top:17px;line-height:1.8}.app-footer{text-align:center;font-size:10px;color:var(--muted);line-height:1.8;padding:23px 12px}
.play-area{max-width:900px;margin:0 auto}#stage:not([data-view="play"]) .play-area{display:none}.play-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.play-heading strong{font-size:14px}.play-heading span{font-size:10px;color:var(--muted)}#hud{display:flex;gap:8px;margin-bottom:13px;pointer-events:none}.stat{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 15px}.stat .lbl{font-size:10px;font-weight:750;color:var(--muted);margin-bottom:4px}.stat .val{font-size:25px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}.board-frame{padding:7px;background:#eadcc3;border:1px solid #d8c19b;border-radius:23px;box-shadow:0 10px 24px #5f513614;overflow:hidden}#cv{display:block;width:100%;height:640px;border-radius:16px;touch-action:none;background:#f1e8d4;user-select:none;-webkit-user-select:none}.board-note{font-size:11px;text-align:center;line-height:1.8;color:var(--muted);margin:13px 8px}.rttl{font-size:31px;line-height:1.3;font-weight:900;margin:0 0 15px;color:var(--green)}.rttl.win{color:var(--accent)}.rttl.lose{color:#647b92}.rttl:focus{outline:none}.result-art{min-height:500px}.result-art img{filter:saturate(.92)}.result-copy{text-align:center}.rrank,.rbig{font-size:72px;line-height:1.2;letter-spacing:-.045em;font-weight:900;color:var(--accent);margin:10px 0}.rcm{font-size:13px;font-weight:750;line-height:1.9;color:var(--green);margin:10px 0 20px}.rstats{display:flex;gap:8px;margin:16px 0}.rstats>div{flex:1;min-width:0;background:#f4f0e5;border-radius:13px;padding:14px 7px}.rstats b{display:block;font-size:23px;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums}.rstats span{font-size:10px;color:var(--muted)}
#card,#col,#zukan{position:absolute;inset:76px 0 40px;z-index:30;border-radius:25px;background:#f6f1e8f7;padding:32px 22px;overflow:auto;min-height:430px}#card{display:flex;align-items:flex-start;justify-content:center;background:#284b417a}.cardbox{max-width:370px;width:100%;border:1px solid #ded5be;border-radius:25px;background:var(--surface);box-shadow:0 20px 70px #1d3a3c35;padding:28px;text-align:center}.cardnew{display:inline-block;border-radius:20px;padding:6px 13px;background:#f0c260;color:#61421c;font-size:11px;font-weight:850;letter-spacing:.12em}.cardemo{display:grid;place-items:center;min-height:150px;font-size:86px;margin:18px 0;border-radius:22px;background:radial-gradient(ellipse at 50% 38%,#fffef8,#f5e7c8);filter:drop-shadow(0 7px 4px #52613d15)}.cardname{font-size:23px;font-weight:900;color:var(--green);line-height:1.5}.cardstars{color:#996415;font-size:17px;letter-spacing:.18em;margin:6px 0}.cardcm{font-size:13px;line-height:1.9;color:var(--muted);margin:12px 0}.zttl{font-size:25px;font-weight:900;text-align:center;color:var(--green)}.zsub{font-size:12px;font-weight:750;text-align:center;color:var(--muted);margin:10px 0 20px}.zgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;max-width:790px;margin:0 auto}.zitem{padding:16px 8px;border-radius:16px;border:1px solid #e0d8c6;background:#fffdf8;text-align:center;box-shadow:0 4px 0 #e9e3d4}.ze{font-size:36px;filter:drop-shadow(0 4px 2px #42634420);margin-bottom:9px}.zn{font-size:11px;font-weight:800;line-height:1.55;color:var(--green)}.zc{font-size:10px;color:#996415;margin-top:5px}.unknown{background:#ebe8dd}.unknown .ze{filter:grayscale(1);opacity:.45}.unknown .zn{color:#738174}.zclose{display:block;max-width:300px;margin:24px auto 0}
.rw-back{display:block!important;border:1px solid #d5d9c9!important;background:#f8f1de!important;color:var(--green)!important;font-size:13px!important;line-height:1.6!important;letter-spacing:0!important;padding:13px 20px!important;border-radius:28px!important}.screen>.rw-back,.screen>[data-rw-note]{grid-column:1/-1;justify-self:center;margin:12px 20px 22px!important}.screen>[data-rw-note]{color:var(--green)!important;text-align:center;font-size:14px!important}#rw-lock{position:absolute!important;inset:76px 0 0!important;align-items:start!important;background:#294b417a!important;border-radius:25px;padding-top:35px!important}#rw-lock>div{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}#rw-lock>div>div{color:var(--ink)!important}#rw-lock a{background:#f1e6cf!important;color:var(--green)!important;border-color:var(--line)!important}#rw-lock a:first-of-type{background:var(--accent)!important;color:white!important}#rw-lock button{color:var(--muted)!important}#oj-gate{background:var(--paper)!important;color:var(--ink)!important}#oj-gate>div>div{color:var(--ink)!important}
@media(max-width:780px){#stage{width:calc(100% - 28px)}.screen-copy{padding:27px 23px}.hero-art{min-height:570px}.brand{font-size:8px;letter-spacing:.07em}.app-bar{gap:12px}.corner{padding:9px 10px}}
@media(max-width:620px){#stage{width:calc(100% - 24px)}.app-bar{min-height:68px;flex-wrap:wrap;gap:8px;padding:12px 0}.brand{font-size:8px}.brand:before{width:26px;height:26px;font-size:17px}.plaza{font-size:10px}.controls{gap:5px}.corner{font-size:11px;padding:8px 10px;min-height:37px}#mute{min-width:37px;font-size:17px}.screen{grid-template-columns:1fr;border-radius:22px}.hero-art{height:215px;min-height:0}.hero-art img{object-position:center 47%}.art-badge{top:15px;left:16px;font-size:9px;padding:7px 11px}.art-caption{left:20px;right:20px;bottom:18px}.art-caption strong{font-size:19px}.art-caption small{font-size:8px}.screen-copy{padding:27px 23px}.ttl{font-size:36px}.sub{font-size:10px}.rules{font-size:12px;padding:13px 14px}.btn{font-size:15px}.play-heading strong{font-size:12px}.play-heading span{font-size:9px}.stat{padding:10px 9px;border-radius:12px}.stat .val{font-size:22px}.stat .lbl{font-size:9px}#hud{gap:6px}.board-frame{padding:5px;border-radius:19px}#cv{height:610px;border-radius:13px}.board-note{font-size:10px}.result-art{height:180px}.rttl{font-size:27px}.rrank,.rbig{font-size:65px}.rstats b{font-size:21px}.rstats span{font-size:9px}#card,#col,#zukan{inset:68px 0 40px;padding:23px 14px}.zgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.zitem{padding:12px 5px}.ze{font-size:30px}.zn{font-size:10px}.zc{font-size:9px}.cardbox{padding:24px 20px}.cardname{font-size:21px}.brand{max-width:130px}#colBtn{font-size:10px}}
@media(max-width:360px){.brand{max-width:110px;font-size:7px;gap:6px}.controls{gap:4px}.corner{padding:8px 8px}.screen-copy{padding:25px 19px}.ttl{font-size:32px}.rstats b{font-size:19px}.rules{font-size:11px}.rstats{gap:5px}.play-heading span{max-width:45%;text-align:right}#cv{height:600px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

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