:root{--cq-ink:#3b2a1a;--cq-ink-soft:#6b5438;--cq-parchment:#f3e4c3;--cq-parchment-2:#e9d4a8;--cq-parchment-edge:#b58a4e;--cq-wood:#8a5a2b;--cq-wood-dark:#5c391a;--cq-wood-light:#b37a3f;--cq-iron:#4a4f57;--cq-iron-light:#8b929c;--cq-gold:#e8b534;--cq-gold-dark:#a8781a;--cq-red:#d64545;--cq-night:#0f1420;--cq-cream:#fff4dc;--cq-world:radial-gradient(ellipse at 50% 0%, #2a2118 0%, var(--cq-night) 70%);--cq-parchment-bg:linear-gradient(180deg, var(--cq-parchment), var(--cq-parchment-2));--cq-wood-bg:linear-gradient(180deg, var(--cq-wood-light), var(--cq-wood) 55%, var(--cq-wood-dark));--cq-gold-bg:linear-gradient(180deg, #ffd96b, var(--cq-gold) 55%, var(--cq-gold-dark));--cq-inset:#ffffff73;--cq-inset-edge:#b58a4e8c}.app{position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.app canvas.stage{width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.app canvas.stage.off{visibility:hidden}.screen{display:none;position:absolute;top:0;bottom:0;left:0;right:0}.screen.on{display:block}.fader{opacity:0;pointer-events:none;z-index:50;background:#000;transition:opacity .45s;position:absolute;top:0;bottom:0;left:0;right:0}.fader.on{opacity:1}.logo{text-align:center;background:linear-gradient(#fff3a0 0%,#ffd84a 45%,#ff9a1f 100%);-webkit-text-fill-color:transparent;-webkit-text-stroke:5px var(--cq-wood-dark);paint-order:stroke fill;filter:drop-shadow(0 5px #2a1708);-webkit-background-clip:text;background-clip:text;font-weight:700;line-height:.95}.loading{background:var(--cq-world);z-index:40;text-align:center;color:var(--cq-cream);place-content:center;gap:18px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.loading .logo{font-size:44px}.loading .bar{border:3px solid var(--cq-iron);background:#2a1d12;border-radius:10px;width:min(70vw,360px);height:14px;margin:0 auto;overflow:hidden}.loading .bar i{background:var(--cq-gold-bg);width:0;height:100%;transition:width .2s;display:block}.story-card{border:3px solid var(--cq-parchment-edge);background:var(--cq-parchment-bg);color:var(--cq-ink);text-align:left;border-radius:12px;padding:0;overflow:hidden;box-shadow:0 4px #00000059}.story-card.sel{border-color:var(--cq-gold);box-shadow:0 0 0 3px var(--cq-gold), 0 4px 0 #00000059;transform:translateY(-3px)}.story-card img{aspect-ratio:4/3;object-fit:cover;background:#d9c49a;width:100%;display:block}.story-card div{padding:7px 8px 9px;font-size:13px;font-weight:700;line-height:1.15}.story-card .pill{background:var(--green);margin-top:5px;font-size:11px}.toggle{color:var(--cq-cream);align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.toggle input{width:22px;height:22px;accent-color:var(--cq-gold)}.foot{color:#fff4dcb3;text-align:center;margin-top:10px;font-size:12px}.reader{background:var(--cq-world);color:var(--cq-ink);-webkit-overflow-scrolling:touch;overflow-y:auto}.reader .top{z-index:2;padding:max(10px, env(safe-area-inset-top)) 14px 10px;background:var(--cq-wood-bg);border-bottom:3px solid var(--cq-wood-dark);color:var(--cq-cream);text-shadow:0 2px #00000073;align-items:center;gap:10px;display:flex;position:sticky;top:0;box-shadow:0 4px 12px #0006}.reader .top h1{flex:1;margin:0;font-size:20px;line-height:1.1}.reader .top .pill{background:var(--cq-gold-bg);color:var(--cq-ink);text-shadow:none}.reader .top .btn.ghost{color:var(--cq-cream);background:#0003;border:2px solid #fff4dc80}.reader .page{max-width:640px;margin:12px auto calc(28px + var(--safe-b));border:3px solid var(--cq-parchment-edge);background:var(--cq-parchment-bg);border-radius:14px;padding:16px 16px 24px;position:relative;box-shadow:0 6px #00000040,0 10px 24px #00000059,inset 0 0 0 2px #ffffff59}@media (max-width:660px){.reader .page{margin:10px 8px calc(24px + var(--safe-b))}}.reader .hint{border:2px dashed var(--cq-inset-edge);background:var(--cq-inset);border-radius:10px;margin:4px 0 14px;padding:10px 12px;font-size:15px}.para{margin-bottom:22px}.para img{border:3px solid var(--cq-parchment-edge);border-radius:12px;width:100%;margin-bottom:12px;display:block;box-shadow:0 4px #00000026}.para p{margin:0;font-size:22px;font-weight:500;line-height:1.55}.para .th{border:1px solid var(--cq-inset-edge);background:var(--cq-inset);color:var(--cq-ink-soft);border-radius:10px;margin-top:8px;padding:10px 12px;font-size:18px;line-height:1.6}.para .tools{gap:8px;margin-top:8px;display:flex}.para .tools button{border:2px solid var(--cq-parchment-edge);background:var(--cq-inset);color:var(--cq-wood-dark);border-radius:99px;padding:5px 12px;font-size:14px;font-weight:700}.sent{border-radius:6px;transition:background .15s}.sent.on{background:#fff1a8;box-shadow:0 0 0 3px #fff1a8}.listen-all{border:3px solid var(--cq-wood-dark);background:var(--cq-wood-bg);color:var(--cq-cream);text-shadow:0 2px #00000073;border-radius:10px;margin-bottom:16px;padding:9px 16px;font-size:16px;font-weight:800;box-shadow:0 4px #0000004d}.listen-all.playing,.para .tools button.playing{border-color:var(--cq-gold-dark);background:var(--cq-gold-bg);color:var(--cq-ink);text-shadow:none}.para.flash{animation:1.2s flash}@keyframes flash{0%,to{background:0 0}30%{background:#fff1a8}}.vocab{font-weight:700;font-size:inherit;line-height:inherit;background:#ffe28a;border:0;border-radius:6px;padding:0 3px}.gloss{left:50%;bottom:calc(18px + var(--safe-b));z-index:30;border:3px solid var(--cq-parchment-edge);background:var(--cq-parchment-bg);width:min(92vw,460px);color:var(--cq-ink);border-radius:14px;padding:14px 16px;display:none;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #00000073}.gloss.on{display:block}.gloss .w{font-size:26px;font-weight:700}.gloss .ph{color:var(--cq-ink-soft);font-size:15px}.gloss .thm{color:var(--cq-wood);margin:6px 0 2px;font-size:22px;font-weight:700}.gloss .def{font-size:16px}.gloss .close{color:var(--cq-ink-soft);background:0 0;border:0;font-size:22px;position:absolute;top:8px;right:10px}.reader .end{text-align:center;padding:10px 0 20px}.reader .end p{font-size:17px}.panel-screen{padding:max(20px, env(safe-area-inset-top)) 16px calc(24px + var(--safe-b));background:linear-gradient(#0c111833,#0c1118e6 40%);display:none;position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto}.panel-screen.on{display:block}.panel{border:3px solid var(--cq-parchment-edge);background:var(--cq-parchment-bg);max-width:560px;color:var(--cq-ink);border-radius:14px;margin:0 auto;padding:18px;position:relative;box-shadow:0 6px #00000040,0 10px 24px #00000059,inset 0 0 0 2px #ffffff59}.panel:before{content:"";pointer-events:none;border:1px dashed #6b543859;border-radius:9px;position:absolute;top:6px;bottom:6px;left:6px;right:6px}.panel h2{border:3px solid var(--cq-wood-dark);text-align:center;color:var(--cq-cream);background:var(--cq-wood-bg);text-shadow:0 2px #00000073;border-radius:8px;margin:0 0 8px;padding:8px 14px;font-size:28px;position:relative;box-shadow:0 4px #0000004d}.stars{text-align:center;letter-spacing:6px;color:#6b54384d;font-size:48px}.stars .lit{color:var(--gold);-webkit-text-stroke:2px #b8841a}.panel .xp{text-align:center;font-size:18px;font-weight:700}.panel .xp small{color:var(--cq-ink-soft);font-size:12px;font-weight:500;display:block}.panel h3{margin:16px 0 6px;font-size:18px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--cq-parchment-edge);background:var(--cq-inset);border-radius:99px;padding:5px 10px;font-size:14px;font-weight:700}.chip.ok{background:#dcebc4}.reward{border:2px solid var(--cq-gold-dark);text-align:center;background:#ffd96b73;border-radius:10px;margin-top:14px;padding:12px;font-weight:700}.presets{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}.presets button{border:3px solid var(--cq-parchment-edge);background:var(--cq-inset);color:var(--cq-ink);border-radius:10px;padding:6px 12px;font-weight:700}.presets button.sel{border-color:var(--cq-gold-dark);background:var(--cq-gold-bg)}.panel .actions{gap:10px;margin-top:16px;display:flex}.panel .actions .btn{flex:1}.bossbar{border:3px solid var(--cq-iron);background:#2a1d12;border-radius:14px;height:28px;margin:10px 0 6px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #000000b3,0 2px #0006}.bossbar i{background:linear-gradient(180deg, #ff7a59, var(--cq-red) 55%, #8f2424);transition:width 1.6s;position:absolute;top:0;bottom:0;left:0;box-shadow:inset 0 -3px #00000040,inset 0 2px #ffffff59}.bossbar em{color:var(--cq-cream);text-shadow:0 1px #0009;place-content:center;font-size:14px;font-style:normal;font-weight:700;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.helpers{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.helpers span{border:1px solid var(--cq-parchment-edge);background:var(--cq-inset);border-radius:99px;padding:5px 10px;font-size:14px;font-weight:700}.helpers span.you{border-color:var(--cq-gold-dark);background:var(--cq-gold-bg)}.note{color:var(--cq-ink-soft);text-align:center;margin-top:10px;font-size:13px}.game-layer{display:none;position:absolute;top:0;bottom:0;left:0;right:0}.game-layer.on{display:block}.screen.selector.on{display:flex}.selector{padding:max(14px, env(safe-area-inset-top)) 0 0;background:linear-gradient(#0c111880 0%,#0c111800 22%);flex-direction:column;justify-content:space-between;overflow-y:auto}.selector .brand .logo{font-size:clamp(38px,11vw,64px)}.selector .brand .tag{color:var(--cq-cream);text-align:center;text-shadow:0 2px 6px #0009;margin-top:6px;font-size:16px;font-weight:600}.selector .sheet{width:min(100%,620px);padding:14px 16px calc(14px + var(--safe-b));border:3px solid var(--cq-wood-dark);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--cq-parchment);background:linear-gradient(#2a2117f0,#1c1510f5);border-bottom:0;border-radius:16px 16px 0 0;margin:12px auto 0;box-shadow:0 -10px 30px #00000073}.selector h2{color:var(--cq-cream);text-shadow:0 2px #0000008c;margin:12px 0 8px;font-size:17px}.levels{align-items:center;gap:8px;display:flex}.levels .label,.heroes .label{color:#fff4dcbf;margin-right:2px;font-size:14px;font-weight:700}.lvl{border:3px solid var(--cq-wood-dark);white-space:nowrap;background:var(--cq-wood-bg);min-width:58px;min-height:40px;color:var(--cq-cream);text-shadow:0 2px #00000073;border-radius:10px;padding:4px 10px;font-size:18px;font-weight:700;line-height:1;box-shadow:0 3px #00000059}.lvl.on{border-color:var(--cq-gold-dark);background:var(--cq-gold-bg);color:var(--cq-ink);text-shadow:none}.lvl:disabled{opacity:.55;cursor:default}.lvl small{margin-top:2px;font-size:10px;font-weight:600;display:block}.strip{scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;padding:2px 2px 8px;display:flex;overflow-x:auto}.strip::-webkit-scrollbar{display:none}.strip>*{scroll-snap-align:start;flex:none}.stories .story-card{width:132px}.plain-cover{aspect-ratio:4/3;background:linear-gradient(160deg,#f6e7c1,#d9b77a);justify-content:center;align-items:center;gap:4px;font-size:26px;display:flex}.plain-cover b{color:#6b4a1a;font-size:34px}.game-card{border:3px solid var(--cq-parchment-edge);background:var(--cq-parchment-bg);width:128px;color:var(--cq-ink);text-align:left;border-radius:12px;padding:8px 8px 10px;box-shadow:0 4px #00000059}.game-card.sel{border-color:var(--cq-gold);box-shadow:0 0 0 3px var(--cq-gold), 0 4px 0 #00000059;transform:translateY(-3px)}.game-card .tile{border:2px solid #3b2a1a73;border-radius:8px;justify-content:center;align-items:center;height:58px;font-size:32px;display:flex;box-shadow:inset 0 -4px #0003}.game-card b{margin-top:6px;font-size:14px;line-height:1.1;display:block}.game-card small{color:var(--cq-ink-soft);margin-top:3px;font-size:11px;line-height:1.2;display:block}.game-card.soon{opacity:.6;filter:saturate(.4);cursor:default}.selector .row{flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:6px 0 10px;display:flex}.btn.wide{width:100%;display:block}.selector .empty{color:var(--cq-cream);margin:6px 0;font-size:14px}@media (orientation:landscape) and (min-width:700px){.selector{justify-content:center;align-items:flex-end;padding:16px}.selector .brand{position:absolute;top:24px;left:25%;transform:translate(-50%)}.selector .sheet{border-bottom:3px solid var(--cq-wood-dark);border-radius:16px;width:min(620px,50vw - 24px);max-height:calc(100vh - 32px);margin:0;overflow-y:auto}}@media (pointer:fine){.strip{flex-wrap:wrap;overflow-x:visible}}.heroes{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hero-chip{border:3px solid var(--cq-wood-dark);background:var(--cq-wood-bg);min-height:40px;color:var(--cq-cream);text-shadow:0 2px #00000073;border-radius:10px;align-items:center;gap:4px;padding:4px 12px;font-size:15px;font-weight:700;display:flex;box-shadow:0 3px #00000059}.hero-chip.on{border-color:var(--cq-gold-dark);background:var(--cq-gold-bg);color:var(--cq-ink);text-shadow:none}.looks{color:#fff4dcb3;flex-wrap:wrap;align-items:center;gap:6px;min-height:28px;margin-top:6px;font-size:12px;display:flex}.look{background:var(--cq-iron);color:var(--cq-cream);border:2px solid #2d3138;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600}.look.on{border-color:var(--cq-gold-dark);background:var(--cq-gold-bg);color:var(--cq-ink)}.look.locked{opacity:.45;cursor:default}.panel.briefing .eyebrow{text-align:center;color:var(--cq-ink-soft);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;font-size:13px;font-weight:700}.panel.briefing h2 .icon{font-size:26px}.panel.briefing .subtitle{text-align:center;color:var(--cq-ink-soft);font-size:14px}.panel.briefing .goal{border:2px solid var(--cq-inset-edge);background:var(--cq-inset);border-radius:10px;margin:12px 0 4px;padding:10px 12px;font-size:16px;line-height:1.35}.steps{counter-reset:step;margin:10px 0 0;padding:0;list-style:none}.steps li{counter-increment:step;padding:6px 0 6px 40px;font-size:15px;line-height:1.3;position:relative}.steps li:before{content:counter(step);background:var(--cq-wood);width:28px;height:28px;color:var(--cq-cream);text-align:center;border-radius:50%;font-weight:700;line-height:28px;position:absolute;top:5px;left:0}.steps b{display:block}.controls{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.control{border:1px solid var(--cq-parchment-edge);background:var(--cq-inset);border-radius:99px;padding:5px 10px;font-size:13px}.panel .tip{border:2px dashed var(--cq-inset-edge);background:#fff4d099;border-radius:10px;margin-top:10px;padding:10px 12px;font-size:15px}.panel .center{text-align:center;margin:4px 0}.panel .strong{font-weight:700}.panel .dmg{color:var(--red)}.panel .hero-name{margin-top:8px}.panel.gate{text-align:center}.gate-icon{font-size:54px}.panel.gate .reason{color:var(--cq-ink-soft);font-size:14px}.reader.over-game{z-index:20}:-webkit-any(.selector,.reader,.panel) .btn{border:3px solid var(--cq-wood-dark);min-height:48px;color:var(--cq-cream);background:var(--cq-wood-bg);text-shadow:0 2px #0006;border-radius:12px;box-shadow:0 4px #00000059}:is(.selector,.reader,.panel) .btn{border:3px solid var(--cq-wood-dark);min-height:48px;color:var(--cq-cream);background:var(--cq-wood-bg);text-shadow:0 2px #0006;border-radius:12px;box-shadow:0 4px #00000059}:-webkit-any(.selector,.reader,.panel) .btn.gold{color:var(--cq-ink);border-color:var(--cq-gold-dark);background:var(--cq-gold-bg);text-shadow:none;box-shadow:0 4px 0 var(--cq-gold-dark)}:is(.selector,.reader,.panel) .btn.gold{color:var(--cq-ink);border-color:var(--cq-gold-dark);background:var(--cq-gold-bg);text-shadow:none;box-shadow:0 4px 0 var(--cq-gold-dark)}:-webkit-any(.selector,.reader,.panel) .btn.soft{color:var(--cq-cream);background:var(--cq-iron);border-color:#2d3138;box-shadow:0 4px #2d3138}:is(.selector,.reader,.panel) .btn.soft{color:var(--cq-cream);background:var(--cq-iron);border-color:#2d3138;box-shadow:0 4px #2d3138}:-webkit-any(.selector,.reader,.panel) .btn:active{transform:translateY(3px);box-shadow:0 1px #00000059}:is(.selector,.reader,.panel) .btn:active{transform:translateY(3px);box-shadow:0 1px #00000059}.reader .top .btn.ghost{min-height:0;box-shadow:none}