
:root{--font:"Klee One","KaiTi","DFKai-SB",cursive;--serif:var(--font)}
body{line-height:1.65}button,input,select{font:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
#screenTitle{background-color:var(--bg);background-image:var(--motif-art);background-size:600px;align-items:safe center;padding:32px}
.title-wrap{max-width:1280px;width:100%;grid-template-columns:1fr 1.2fr .65fr;gap:24px;align-items:start}
.landing-mast{grid-column:1/-1;display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding:0 0 14px;font-size:11px;letter-spacing:2px;font-family:monospace}
.landing-intro{padding-top:46px}.chapter-label{display:inline-block;font-size:13px;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:8px}
.landing-intro h2{font-size:clamp(30px,3.6vw,48px);line-height:1.5;margin:20px 0;font-weight:600;letter-spacing:-1px}.landing-intro h2 span{color:var(--accent);display:inline-block;margin-left:8px}.landing-intro p{font-size:15px;color:var(--ink2)}
.landing-stats{display:flex;gap:32px;margin:35px 0}.landing-stats b{font:36px Georgia,serif}.landing-stats small{display:block;font:12px var(--font);color:var(--ink2);margin-top:5px}.journey-strip{border-top:1px solid var(--line);padding-top:20px;font-size:13px;color:var(--accent)}
.title-card,.title-preview{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 25px #172f2820}.title-card{padding:24px}.brand-logo{width:40px;height:40px;border-radius:12px;font-size:23px;background:var(--accent)}.brand h1{font-size:22px;font-weight:600}.brand small{font-size:9px;letter-spacing:2px}.brand .sub{font-size:12px}.steps{margin:15px 0}.field{margin-bottom:14px}.field>span{font-size:13px}.theme-controls{display:flex;gap:8px;flex-wrap:wrap}.theme-controls select{min-width:0;flex:1;width:100%;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:9px}.theme-controls .btn{font-size:12px}.title-switches{display:flex;flex-wrap:wrap;gap:8px}.title-switches .check{font-size:12px}.title-preview{margin-top:40px;padding:24px 12px;background:var(--panel2);transform:rotate(2deg);background-image:var(--motif-art);background-size:320px}.title-preview canvas{width:150px;max-width:100%}.field-stamp{font-size:12px;letter-spacing:2px;border:1px solid var(--accent);color:var(--accent);padding:12px;margin-bottom:18px;transform:rotate(-5deg)}.preview-name{font-size:21px}.mini-list{font-size:12px}.title-preview>p{font-size:12px}.fineprint{font-size:12px;line-height:1.8}.screen{color:var(--ink)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin-top:20px;max-height:55vh;overflow:auto;padding:5px}.theme-tile{padding:8px;background:var(--tile-bg);color:var(--tile-ink);border:2px solid transparent;border-radius:var(--tile-radius);cursor:pointer;text-align:left}.theme-tile.selected{border-color:var(--accent);outline:2px solid var(--gold)}.theme-tile b{font-size:12px}.theme-sample{height:85px;border-radius:var(--tile-radius);background-size:cover;padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.theme-sample span{color:var(--tile-accent);font-size:26px;grid-row:span 2}.theme-sample i{display:block;height:14px;border-radius:var(--tile-radius);background:var(--tile-accent);opacity:.6}.sample-1 i{border:2px solid var(--tile-ink);height:22px}.sample-2{grid-template-columns:1fr}.sample-2 span{grid-row:auto;height:25px}.sample-2 i{height:6px}.sample-3{display:flex;align-items:end;border-bottom:2px solid var(--tile-accent)}.sample-3 i{width:20%;height:40px}
[data-layout="1"] .title-card,[data-layout="1"] .w2d-obj,[data-layout="1"] .modal{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--line)}
[data-layout="2"] .title-wrap{grid-template-columns:1fr 1fr}[data-layout="2"] .landing-intro{grid-column:1/-1;padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}[data-layout="2"] .landing-intro h2{grid-row:span 2;margin:8px 0}[data-layout="2"] .chapter-label{grid-column:1/-1}[data-layout="2"] .landing-stats{margin:10px 0}[data-layout="2"] .title-preview{margin:0;transform:none}[data-layout="2"] .w2d-grid{grid-template-columns:repeat(3,1fr)}
[data-layout="3"] .title-card,[data-layout="3"] .title-preview{box-shadow:none;border:0;border-top:2px solid var(--accent)}[data-layout="3"] .title-preview{transform:none;background-image:none}[data-layout="3"] .w2d-obj{border-width:0 0 2px;border-radius:0;box-shadow:none}
.w2d-obj,.w2d-obj.card.done,.w2d-obj.monster.done{background:var(--panel);color:var(--ink);border-radius:var(--radius)}.w2d-obj.card{background:color-mix(in srgb,var(--gold) 10%,var(--panel))}.w2d-obj.monster{background:color-mix(in srgb,#b66b86 13%,var(--panel))}.w2d-obj.podium,.final-row{background:var(--panel2)}
[data-tone="dark"] .chip,[data-tone="dark"] .choice,[data-tone="dark"] .option,[data-tone="dark"] .mode{background:var(--panel2);color:var(--ink)}
html.mode-2d #stage2d{background-color:var(--bg);background-image:var(--motif-art);background-size:600px}.w2d-room{background:var(--panel);border-radius:var(--radius)}
.sound-float{position:fixed;bottom:15px;right:15px;z-index:25;min-height:44px;border:1px solid var(--line);border-radius:30px;background:var(--panel);color:var(--ink);padding:8px 15px;box-shadow:var(--shadow-sm)}.sound-float[hidden]{display:none}.backend-status{font-size:11px;color:var(--ink2);margin-top:6px}
@media(max-width:1050px){.title-wrap{grid-template-columns:1fr 1.4fr}.title-preview{display:none}.landing-intro{padding-top:35px}}
@media(max-width:700px){#screenTitle{padding:20px 16px}.title-wrap,[data-layout="2"] .title-wrap{grid-template-columns:1fr;gap:18px}.landing-mast{font-size:9px;letter-spacing:1px}.landing-intro,[data-layout="2"] .landing-intro{display:block;grid-column:auto;padding:0}.landing-intro h2{font-size:32px;margin:10px 0}.landing-intro p{font-size:13px}.landing-stats{margin:16px 0;gap:28px}.landing-stats b{font-size:29px}.journey-strip{padding-top:10px}.title-card{padding:20px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-tile b{font-size:11px}.brand h1{font-size:20px}.set-grid{display:block}.set-grid section{margin-bottom:12px}.sound-float{bottom:max(10px,env(safe-area-inset-bottom));font-size:12px}.w2d-grid,[data-layout="2"] .w2d-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.w2d-obj{padding:12px;min-width:0}.w2d-obj b{font-size:14px}.w2d-head h2{font-size:22px}.theme-controls{display:block}.theme-controls .btn{margin-top:6px}.modal{max-height:90dvh}.quiz{max-height:94dvh}.hud-tr{gap:3px}.fineprint{overflow-wrap:anywhere}}
#modalRoot{z-index:65}.sound-float{z-index:55}
html.panel-open .sound-float{display:none}
[data-tone="dark"]{--ok-bg:#173b30;--bad-bg:#472732;--warn-bg:#44391f;--ok:#72d6aa;--bad:#ffadb2;--gold-ink:#362500}
[data-tone="dark"] .opt,[data-tone="dark"] .expl-list li,[data-tone="dark"] .fb-more,[data-tone="dark"] .rv-item{background:var(--panel2);color:var(--ink)}
[data-tone="dark"] .opt:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
[data-tone="dark"] .opt.right,[data-tone="dark"] .opt.picked-ok{background:var(--ok-bg)}
[data-tone="dark"] .opt.wrong,[data-tone="dark"] .opt.picked-bad{background:var(--bad-bg)}
[data-tone="dark"] .hint-box,[data-tone="dark"] .chip.zone,[data-tone="dark"] .review{background:var(--panel2)}
[data-tone="dark"] .chip.self{background:#44391f;color:#ffe4a0}
@media print{.sound-float{display:none!important}}
