:root{--brass:#d9a441;--brass-hi:#ffd77a;--copper:#c8703f;--ink:#2a1a0e;--paper:#f6ecd2;--green:#6fe39a;--red:#ff6b5b;color:var(--paper);-webkit-tap-highlight-color:transparent;background:#1b120c;font-family:Trebuchet MS,Avenir Next,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0}#game-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}[hidden]{display:none!important}button{font:inherit;color:var(--ink);cursor:pointer;background:linear-gradient(#ffe39b, var(--brass) 60%, #a8742a);border:2px solid #5b3a12;border-radius:12px;min-height:44px;padding:10px 16px;font-weight:700;transition:transform 80ms;box-shadow:0 3px #5b3a12,0 6px 14px #00000059}button:active{transform:translateY(2px);box-shadow:0 1px #5b3a12}button:disabled{opacity:.45;cursor:default}button.big{padding:12px 24px;font-size:1.2rem}h1,h2,h3{margin:0;font-family:Georgia,Times New Roman,serif}#labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.chip{color:var(--ink);white-space:nowrap;background:#fff0c8eb;border:1.5px solid #5b3a12;border-radius:9px;padding:1px 6px;font-size:12px;font-weight:800;position:absolute;top:0;left:0}.chip.preset{background:#f3c7a6}.chip[data-layer="1"]{box-shadow:0 0 0 2px #7cc8ff}.tlabel{text-align:center;border:2px solid var(--brass);background:#1e1208e0;border-radius:12px;flex-direction:column;min-width:120px;padding:4px 10px;line-height:1.15;display:flex;position:absolute;top:0;left:0}.tlabel b{color:var(--brass-hi);text-transform:uppercase;letter-spacing:.05em;font-size:12px}.tlabel span{font-size:15px}.tlabel strong{color:#fff;font-size:22px}.tlabel em{opacity:.8;font-size:13px;font-style:normal}.tlabel.ok{border-color:var(--green);box-shadow:0 0 18px #6fe39a99}.tlabel.ok em{color:var(--green);opacity:1}.motor-tag{background:var(--copper);color:#fff;white-space:nowrap;border:1.5px solid #5b2a12;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:800;position:absolute;top:0;left:0}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}#status{top:max(10px, env(safe-area-inset-top));align-items:center;gap:10px;display:flex;position:absolute;left:10px}.icon-btn{width:44px;padding:0}#status .lv{background:#1e1208cc;border:1.5px solid #6b4a22;border-radius:10px;flex-direction:column;padding:3px 10px;display:flex}#status .lv b{color:var(--brass-hi);font-size:13px}#status .lv span{font-size:14px;font-weight:700}.pill{background:#1e1208cc;border:1.5px solid #6b4a22;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}#objective{top:max(10px, env(safe-area-inset-top));text-align:center;pointer-events:none;width:min(620px,100% - 420px);min-width:320px;position:absolute;left:50%;transform:translate(-50%)}#targets{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.target{border:2.5px solid var(--brass);background:linear-gradient(#2d1c0cf2,#190f06f2);border-radius:14px;flex-direction:column;align-items:center;min-width:140px;padding:4px 14px 6px;transition:border-color .3s,box-shadow .3s;display:flex}.target .t-label{text-transform:uppercase;letter-spacing:.08em;color:var(--brass-hi);font-size:12px;font-weight:800}.target .t-want{font-size:18px}.target .t-want b{color:#fff;font-size:34px;line-height:1}.target .t-now{opacity:.85;font-size:13px}.target.ok{border-color:var(--green);box-shadow:0 0 22px #6fe39a8c}.target.ok .t-now{color:var(--green);opacity:1;font-weight:800}.target.sandbox{flex-direction:row;gap:6px;font-size:18px}#goal{background:#1e1208bf;border-radius:10px;max-width:560px;margin:6px auto 0;padding:5px 10px;font-size:14px;line-height:1.3}#toast{opacity:0;color:var(--ink);pointer-events:none;text-align:center;background:#fff3cf;border:2px solid #5b3a12;border-radius:12px;max-width:90vw;padding:8px 14px;font-weight:700;transition:all .25s;position:absolute;top:175px;left:50%;transform:translate(-50%,-8px)}#toast.show{opacity:1;transform:translate(-50%)}#jam-banner{border:2px solid var(--red);background:#78140aeb;border-radius:14px;align-items:center;gap:10px;padding:10px 14px;font-weight:800;animation:.4s shake;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes shake{0%,to{transform:translate(-50%,-50%)}25%{transform:translate(-52%,-50%)}75%{transform:translate(-48%,-50%)}}#bolt-wrap{pointer-events:none;align-items:flex-end;gap:6px;display:flex;position:absolute;bottom:120px;left:10px}#bolt{object-fit:cover;border:3px solid var(--brass);background:#3a2410;border-radius:50%;width:78px;height:78px}#bolt.hop{animation:.5s hop}@keyframes hop{30%{transform:translateY(-12px)rotate(-6deg)}60%{transform:translateY(0)rotate(4deg)}}#bolt-bubble{max-width:300px;color:var(--ink);opacity:0;transform-origin:0 100%;background:#fff7df;border:2px solid #5b3a12;border-radius:14px 14px 14px 2px;margin-bottom:40px;padding:8px 12px;font-size:14px;font-weight:600;transition:all .2s;transform:scale(.9)}#bolt-bubble.show{opacity:1;transform:none}#tray{left:50%;bottom:max(8px, env(safe-area-inset-bottom));border:2px solid var(--brass);background:linear-gradient(#4a2f18,#2b1a0c);border-radius:18px;align-items:center;gap:10px;max-width:calc(100vw - 16px);padding:8px 10px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 10px 30px #00000080}#tray-items{gap:6px;display:flex;overflow-x:auto}.tray-gear{min-width:62px;height:84px;color:var(--paper);touch-action:none;box-shadow:none;background:radial-gradient(#5a3a1c,#3a2410);border:2px solid #8a6a32;flex-direction:column;justify-content:center;align-items:center;padding:4px;display:flex}.tray-gear b{font-size:16px}.tray-gear.sel{border-color:var(--green);box-shadow:0 0 14px #6fe39ab3}#tray-actions{align-items:center;gap:6px;display:flex}#tray-actions button{padding:8px 10px;font-size:14px}#sandbox-ctl{align-items:center;gap:4px;font-weight:700;display:flex}#sandbox-ctl button{min-width:44px;color:var(--paper);background:#6b4a22;padding:6px}#sandbox-ctl button.on{background:var(--brass);color:var(--ink)}#gear-menu{border:2px solid var(--brass);z-index:5;background:#1e1208f2;border-radius:14px;flex-direction:column;gap:6px;width:160px;padding:8px;display:flex;position:absolute}#menu-info{text-align:center;color:var(--brass-hi);font-size:13px;font-weight:700}.screen{z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.screen.dim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0f080399}.card{border:3px solid var(--brass);text-align:center;background:linear-gradient(#3b2512,#24160a);border-radius:22px;flex-direction:column;align-items:stretch;gap:10px;max-width:min(520px,92vw);padding:24px 28px;display:flex;box-shadow:0 20px 60px #0009,inset 0 0 0 2px #5b3a12}.card .row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}#loading{background:#1b120c}.load-card{text-align:center}.load-gear{color:var(--brass);font-size:70px;animation:2.5s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.bar{border:1.5px solid var(--brass);background:#3a2410;border-radius:6px;width:240px;height:12px;margin:12px auto;overflow:hidden}#loading-bar{background:var(--brass);width:0;height:100%;transition:width .2s}#title{justify-content:flex-start}.title-art{background:url(/art/title.webp) 50%/cover;animation:30s ease-in-out infinite alternate kb;position:absolute;inset:0}.title-art:after{content:"";background:linear-gradient(90deg,#140a04eb 0%,#140a0499 40%,#140a0400 70%);position:absolute;inset:0}.title-card{flex-direction:column;gap:10px;max-width:470px;margin-left:max(24px,6vw);display:flex;position:relative}.kicker{text-transform:uppercase;letter-spacing:.3em;color:var(--brass-hi);margin:0;font-weight:800}#title h1{color:var(--brass);text-shadow:0 3px #5b3a12,0 8px 24px #000000b3;font-size:clamp(54px,9vw,104px);line-height:.95}.tag{margin:0;font-size:18px;line-height:1.4}.title-buttons{flex-wrap:wrap;gap:10px;margin-top:6px;display:flex}.tiny{opacity:.8;font-size:13px}.home{top:max(14px, env(safe-area-inset-top));z-index:2;color:var(--paper);border:1.5px solid var(--brass);background:#140a0499;border-radius:999px;padding:8px 14px;font-weight:800;text-decoration:none;position:absolute;left:16px}.home:hover{background:#3c230acc}#select{touch-action:pan-y;background:radial-gradient(at top,#3a2412,#140b05);flex-direction:column;justify-content:flex-start;padding-bottom:30px;overflow-y:auto}.select-head{z-index:1;background:#140a04d9;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:14px 18px;display:flex;position:sticky;top:0}.select-head h2{color:var(--brass);font-size:28px}.select-head div{gap:8px;display:flex}#chapters{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;width:100%;max-width:1200px;padding:0 18px;display:grid}.chapter{border:2.5px solid var(--brass);background:var(--art) center/cover;border-radius:18px;flex-direction:column;justify-content:flex-end;min-height:250px;display:flex;position:relative;overflow:hidden}.chapter:before{content:"";background:linear-gradient(#140a040d,#140a04eb 62%);position:absolute;inset:0}.chapter>*{position:relative}.chapter header{padding:10px 14px 6px}.ch-num{color:var(--brass-hi);text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800}.chapter h3{font-size:22px}.ch-district{opacity:.85;font-size:13px}.lv-row{grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 10px 12px;display:grid}.lv-row .lv{flex-direction:column;min-height:70px;padding:6px 4px;font-size:11px;line-height:1.15;display:flex}.lv-row .lv b{font-size:16px}.lv-row .lv i{color:#7a4a10;letter-spacing:1px;font-style:normal}.ch-story{min-height:36px;padding:6px 10px;font-size:13px;position:absolute;top:10px;right:10px}#story{z-index:20;cursor:pointer;background:#000;position:absolute;inset:0;overflow:hidden}.story-bg{background:50%/cover;position:absolute;inset:-4%}.story-bg.kb{animation:22s ease-out forwards kb}@keyframes kb{0%{transform:scale(1)translate(0)}to{transform:scale(1.12)translate(-2%,-1%)}}.story-title{top:max(16px, env(safe-area-inset-top));color:var(--brass-hi);border:2px solid var(--brass);opacity:0;white-space:nowrap;background:#140a04b3;border-radius:999px;padding:6px 18px;font-family:Georgia,serif;font-size:clamp(18px,3vw,30px);position:absolute;left:50%;transform:translate(-50%)}.story-title.show{animation:1s .2s forwards fadein}@keyframes fadein{to{opacity:1}}.story-skip{top:max(14px, env(safe-area-inset-top));z-index:2;position:absolute;right:14px}.story-box{left:50%;bottom:max(18px, env(safe-area-inset-bottom));align-items:flex-end;gap:14px;width:min(900px,94vw);display:flex;position:absolute;transform:translate(-50%)}.story-portrait{aspect-ratio:1;object-fit:cover;border:4px solid var(--brass);background:#3a2410;border-radius:50%;flex:none;width:clamp(110px,18vw,190px);animation:2.6s ease-in-out infinite bob;box-shadow:0 10px 30px #0009}.story-portrait.in{animation:.45s ease-out slidein,2.6s ease-in-out .45s infinite bob}@keyframes slidein{0%{opacity:0;transform:translate(-40px)scale(.85)}}@keyframes bob{50%{transform:translateY(-6px)rotate(-1.5deg)}}.story-words{color:var(--ink);background:linear-gradient(#fff7df,#f0deb0);border:3px solid #5b3a12;border-radius:18px;flex:1;min-height:120px;padding:12px 18px 22px;position:relative;box-shadow:0 12px 40px #0000008c}.story-name{color:#8a4a10;margin-bottom:2px;font-family:Georgia,serif;font-size:18px;font-weight:800}#story[data-who=bolt] .story-name{color:#1f6f63}#story[data-who=crow] .story-name{color:#403a6a}#story[data-who=narrator] .story-words{color:var(--paper);border-color:var(--brass);background:linear-gradient(#2b1a0c,#1b1006);font-style:italic}.story-beep{color:#1f6f63;letter-spacing:.03em;font-size:24px;font-weight:900}.story-text{margin:4px 0 0;font-size:clamp(16px,2.2vw,21px);line-height:1.4}.story-more{opacity:.6;font-size:13px;animation:1.2s infinite blink;position:absolute;bottom:4px;right:14px}@keyframes blink{50%{opacity:.15}}.win-card h2{color:var(--brass-hi);font-size:34px}#win-stars{letter-spacing:8px;font-size:64px;line-height:1}#win-stars span{color:#5b4128;display:inline-block}#win-stars span.on{color:#ffd23f;text-shadow:0 0 20px #ffd23fcc;animation:.5s backwards starpop}@keyframes starpop{0%{transform:scale(0)rotate(-90deg)}70%{transform:scale(1.3)}}#win-lesson{text-align:left;margin:0;padding-left:18px;font-size:15px;line-height:1.4}#win-tip{color:var(--brass-hi);margin:0;font-size:14px}#end{background:#000}.end-art{opacity:.75;background:url(/art/ch6.webp) 50%/cover;animation:30s ease-out forwards kb;position:absolute;inset:0}.end-card{position:relative}.end-card h2{color:var(--brass-hi);font-size:36px}.end-stars{color:#ffd23f;margin:0;font-size:30px}@media (width<=760px){#objective{width:calc(100% - 16px);min-width:0;top:calc(max(10px, env(safe-area-inset-top)) + 52px)}#goal{font-size:13px}.target{min-width:104px;padding:3px 10px 4px}.target .t-want b{font-size:28px}#toast{top:250px}#tray{flex-direction:column;gap:6px;width:calc(100vw - 12px);padding:6px}#tray-items{width:100%}.tray-gear{min-width:56px;height:70px}#tray-actions{justify-content:center;width:100%}#bolt-wrap{bottom:190px}#bolt{width:54px;height:54px}#bolt-bubble{max-width:230px;margin-bottom:26px;font-size:13px}.title-art:after{background:linear-gradient(#140a041a 20%,#140a04b3 50%,#140a04f2 100%)}#title{align-items:flex-end}.title-card{margin:0 18px 30px}.tag{font-size:15px}.story-box{flex-direction:column;align-items:flex-start;gap:0}.story-portrait{z-index:1;width:96px;margin-bottom:-16px;margin-left:10px}.tlabel{min-width:90px;padding:2px 6px}.tlabel strong{font-size:17px}#chapters{grid-template-columns:1fr}.story-title{white-space:normal;max-width:calc(100vw - 170px);font-size:18px;left:12px;transform:none}}@media (height<=480px) and (orientation:landscape){#tray{gap:6px;max-width:calc(100vw - 12px);padding:4px 6px;bottom:4px}#tray-items{flex:auto;min-width:0}.tray-gear{min-width:46px;height:52px;padding:2px}.tray-gear b{font-size:13px}.tray-gear svg,.tray-gear canvas,.tray-gear img{width:26px;height:26px}#tray-actions{flex:none;gap:4px;flex-direction:row!important}#tray-actions button{white-space:nowrap;padding:3px 8px;font-size:12px}}
