:root{color-scheme:dark;--pine:#153a2f;--ink:#102a24;--cream:#f1e9d6;--muted:#a6b8a2;--gold:#edc786;--border:#c1d3b52b}*{box-sizing:border-box}body{margin:0;background:#122d25;color:var(--cream);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{opacity:.42;cursor:default}button{border:1px solid var(--border);background:#234b3c;border-radius:12px;padding:12px 16px;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#35614b}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}#game,#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none}#world{outline:none;background:radial-gradient(ellipse at 50% 42%,#42674f,#1d4133 65%,#153328)}#hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;gap:14px;pointer-events:none;z-index:3}#hud>*{pointer-events:auto}.owner{display:flex;align-items:center;gap:10px;text-align:left;background:#14382edf;border:1px solid #b3c29935;padding:4px 16px 4px 4px;box-shadow:0 5px 25px #0d25172b}.owner canvas{background:#b9c3a02b;border-radius:8px}.owner b{font-size:10px;letter-spacing:1.8px;display:block;margin-bottom:4px}.owner small{font-size:12px;color:#dedfc5}.xp{height:3px;width:90px;display:block;background:#d8e2b82b;margin-top:7px}.xp i{display:block;height:3px;background:#dabf80;width:0}.currencies{display:flex;align-items:center;gap:25px;margin-left:auto;background:#14382edf;border:1px solid var(--border);border-radius:12px;padding:12px 22px}.currencies small{font-size:8px;letter-spacing:1.4px;color:var(--muted);display:block;margin-bottom:4px}.currencies b{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}.currencies .gem b{color:#c8b2df}.round{border-radius:50%;width:42px;height:42px;padding:0;font-size:23px;background:#15392ee8}#location{position:absolute;left:30px;top:112px;pointer-events:none;z-index:2;text-shadow:0 2px 10px #143829}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:700;color:#d1c798}#location h1{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:7px 0 6px}#location p{font-size:11px;color:#b9c8af;margin:0}#objective{position:absolute;left:28px;top:230px;max-width:255px;padding:13px 10px 13px 13px;display:flex;align-items:center;gap:10px;background:#12362bcc;border:1px solid #b4c29530;border-radius:12px;z-index:2}.task-dot{width:7px;height:7px;border:1px solid var(--gold);border-radius:50%;flex-shrink:0}#objective small{font-size:8px;letter-spacing:1.5px;color:#d1c594;display:block;margin-bottom:5px}#objective b{font-size:11px;font-weight:400;line-height:1.5;display:block}#objective button{padding:4px 8px;border:0;background:none;color:var(--gold);font-size:20px}#toolbar{position:absolute;right:24px;top:132px;display:flex;flex-direction:column;gap:9px;z-index:3}#toolbar button{width:65px;height:64px;padding:9px 5px;background:#153b2edb;border:1px solid #bbcca337;box-shadow:0 5px 10px #12312430}#toolbar svg{width:22px;height:22px;stroke:#d7dbba;stroke-width:1.5;fill:none;display:block;margin:auto auto 6px}#toolbar span{font-size:9px;letter-spacing:.4px}#joystick{position:absolute;left:35px;bottom:54px;width:116px;height:116px;border-radius:50%;border:1px solid #d8dfb536;background:#d7dbb80b;touch-action:none;user-select:none;z-index:3}.joystick-ring{position:absolute;inset:15px;border:1px solid #d3dabb25;border-radius:50%}#stick{position:absolute;left:37px;top:37px;width:42px;height:42px;border:1px solid #d3dabb63;border-radius:50%;background:radial-gradient(circle at 30% 30%,#a1b39180,#66877480);box-shadow:0 4px 8px #0a271a30}#joystick small{position:absolute;top:129px;width:100%;text-align:center;font-size:8px;letter-spacing:2px;color:#aabca0}#action-wrap{position:absolute;bottom:55px;right:30px;width:165px;text-align:center;z-index:3}#target-label{font-size:10px;line-height:1.5;display:block;margin-bottom:9px;color:#dde2be;text-shadow:0 2px 4px #173527}#action{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:63px;border-radius:18px;background:#e5c48a;color:#283f2c;border:1px solid #f4dfb2;box-shadow:0 4px 0 #8f8155,0 8px 24px #102c2377}#action:hover{background:#f3d79f}#action b{font-size:11px;letter-spacing:1px}#action-icon{font-size:25px}kbd{font-size:9px;padding:3px 5px;border:1px solid #69724f50;border-radius:4px}#cycle{border:0;background:transparent;font-size:9px;color:#adbd9e;padding:12px 6px}#status{position:absolute;left:50%;transform:translateX(-50%);bottom:17px;display:flex;align-items:center;gap:7px;font-size:9px;color:#9aaf92;white-space:nowrap}.live-dot{width:4px;height:4px;border-radius:50%;background:#a5c589}.desktop-hint{margin-left:13px;font-size:8px;letter-spacing:.8px;color:#789b7e}#toast{position:absolute;left:50%;top:95px;transform:translate(-50%,-20px);max-width:80vw;padding:13px 24px;border-radius:12px;background:#f0dcaf;color:#263d2d;box-shadow:0 5px 30px #12372677;font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:20;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#title{position:absolute;inset:0;z-index:10;background:#0a2b20}.title-art{position:absolute;inset:0;background:url('./assets/title.webp') 65% center/cover}.title-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#082b23dd 0,#0a2c2277 34%,transparent 65%)}.title-copy{position:absolute;left:9%;top:12%;width:400px}.brand-mark{display:flex;align-items:center;gap:12px;color:#d5d7af;margin-bottom:50px}.brand-mark svg{width:49px;height:34px}.brand-mark span{font-size:9px;letter-spacing:2px}.title-copy>.eyebrow{color:#c8c692;font-size:9px;margin-bottom:22px}.title-copy h1{font:400 clamp(65px,7.5vw,110px)/.88 Georgia,serif;letter-spacing:-4px;margin:0;color:#f5e9c9}.title-copy em{font-weight:400;color:#c0c99a}.title-desc{font-size:16px;line-height:1.6;color:#d0d7bc;margin:26px 0 27px}.primary{background:#ead09d;color:#1b3d2d;border:1px solid #f6e2b8;font-weight:600;padding:16px 22px}.primary:hover:not(:disabled){background:#f4ddae;color:#153424}.title-copy .primary{width:265px;text-align:left;border-radius:8px;font-size:13px}.primary span{float:right;font-size:20px}.title-note{font-size:8px;letter-spacing:1.7px;color:#a6b58d;margin-top:22px}.title-footer{position:absolute;bottom:24px;left:30px;right:30px;font-size:8px;letter-spacing:1.5px;color:#b4bb9a}.title-footer span{float:right;letter-spacing:.3px}#scrim{position:absolute;inset:0;background:#08251966;backdrop-filter:blur(3px);z-index:7}#panel{position:absolute;z-index:8;right:18px;top:18px;bottom:18px;width:min(450px,calc(100vw - 36px));border:1px solid #b7c3a24d;border-radius:20px;background:#173b30f5;box-shadow:0 16px 80px #0a211bb3;display:flex;flex-direction:column;overflow:hidden}#panel>header{padding:25px 24px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}#panel-kicker{font-size:8px;letter-spacing:2px;color:#c8c59b}#panel h2{font:400 28px Georgia,serif;margin:6px 0 0}#panel-body{overflow-y:auto;overscroll-behavior:contain;padding:22px;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#77947a #214333}#panel h3{font-size:11px;letter-spacing:1px;color:#d2c799;margin:24px 0 13px}#panel p{font-size:12px;line-height:1.7;color:#bac9ae}.card{padding:14px;border:1px solid var(--border);border-radius:12px;margin:10px 0;background:#b2c29908}.card-head{display:flex;align-items:center;gap:12px}.card b{font-size:13px;display:block;color:#ece7ce}.card small{display:block;font-size:10px;line-height:1.6;color:#adc2a3;margin:5px 0}.card button{margin-top:10px;font-size:11px;padding:10px 13px;width:100%}.card.locked{opacity:.6}.badge{display:inline-block!important;width:auto;font-size:8px!important;letter-spacing:1px;border:1px solid #c4cca242;border-radius:20px;padding:3px 8px;color:#d7ceac!important}.progress{height:4px;border-radius:3px;background:#a7b99520;overflow:hidden;margin:9px 0}.progress i{display:block;background:#d1bf85;height:100%}.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.grid .card{margin:0}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.tabs button{font-size:10px;padding:8px 12px;border-radius:20px}.tabs button.active{background:#d1c294;color:#234530}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat-grid>div{padding:14px 8px;background:#93b18712;border:1px solid var(--border);border-radius:10px;text-align:center}.stat-grid strong{font-size:20px;font-weight:400;color:#e9d5a9}.stat-grid small{display:block;font-size:9px;margin-top:5px;color:#b4c4a8}.muted{color:#a1b899}.row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:16px 0;font-size:12px}input[type=range]{width:160px;accent-color:#d5bd86}select,textarea{width:100%;border:1px solid #b4c39b40;border-radius:8px;background:#103328;color:#e3e7cb;padding:10px;font-size:12px}textarea{height:110px;resize:vertical;font-family:monospace;font-size:10px}.danger{border-color:#c3977955;color:#e8b79a}.room-thumb{height:70px;background:linear-gradient(155deg,#ffffff16,transparent);display:flex;align-items:center;justify-content:center;border-radius:7px;margin-bottom:8px;color:var(--room,#abbb94)}.room-thumb svg{height:58px;width:80px}.panel-portrait{width:84px;height:84px;display:block;margin:0 auto 12px;background:#b8c69d18;border-radius:50%}.package-icon{width:42px;height:51px;flex-shrink:0}.staff-icon{width:45px;height:64px;flex-shrink:0}.notice{border-left:2px solid #c8b77c;padding:0 14px}.controls-guide{font-size:12px;line-height:1.9;color:#c1cfb5}.import-error{color:#edbb9a!important}.test-link{font-size:10px;color:#adb899}a{color:#e2d4a7}
@media(max-width:700px){#hud{left:12px;right:12px;top:max(10px,env(safe-area-inset-top));gap:7px}.owner{padding-right:8px;gap:5px}.owner canvas{width:42px;height:42px}.owner b{font-size:8px;letter-spacing:.7px}.owner small{font-size:10px}.xp{width:66px}.currencies{gap:12px;padding:9px 12px}.currencies b{font-size:16px}.currencies small{font-size:6px;letter-spacing:.7px}.gem{display:none}.round{width:34px;height:34px;font-size:21px}#location{left:18px;top:88px}#location h1{font-size:25px;margin-top:4px}#location .eyebrow{font-size:7px}#location p{font-size:9px}#objective{left:16px;top:175px;max-width:218px;padding:8px 10px}#objective b{font-size:10px}#objective small{font-size:7px}#toolbar{right:12px;top:107px;gap:7px}#toolbar button{width:48px;height:51px;padding:6px}#toolbar svg{width:19px;height:19px;margin-bottom:3px}#toolbar span{font-size:8px}#joystick{left:22px;bottom:72px;width:104px;height:104px}#stick{left:31px;top:31px}#joystick small{top:116px}#action-wrap{right:18px;bottom:51px;width:136px}#action{height:60px;border-radius:16px}#action b{font-size:10px}#action kbd{display:none}#target-label{font-size:9px}#cycle{font-size:8px}#status{bottom:max(16px,env(safe-area-inset-bottom));font-size:8px}.desktop-hint{display:none}#toast{top:75px;width:82vw;padding:12px 16px;font-size:11px}.title-art{background-position:63% center}.title-art:after{background:linear-gradient(0deg,#082b23f5 0,#0a2c2299 50%,#0a2c2244 100%)}.title-copy{left:8%;top:auto;bottom:10%;width:86%}.brand-mark{margin-bottom:25px}.title-copy h1{font-size:80px}.title-copy>.eyebrow{font-size:7px}.title-desc{font-size:14px;margin:19px 0}.title-note{font-size:7px}.title-footer{bottom:18px;left:8%;font-size:6px}.title-footer span{display:none}#panel{top:10px;bottom:10px;right:10px;width:calc(100vw - 20px)}#panel>header{padding:19px}#panel-body{padding:18px}#panel h2{font-size:26px}}
@media(max-height:560px){#location{top:90px}#location p{display:none}#objective{top:160px}#toolbar{top:90px;flex-direction:row}#toolbar button{width:47px;height:45px}#toolbar svg{height:16px;margin-bottom:1px}#joystick{bottom:37px;width:90px;height:90px}#stick{left:24px;top:24px}#joystick small{display:none}#action-wrap{bottom:26px}.title-copy{top:7%;bottom:auto}.brand-mark{margin-bottom:15px}.title-copy h1{font-size:65px}.title-copy>.eyebrow{margin-bottom:12px}.title-desc{margin:14px 0}.title-note{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Recovery pass: richer game-first HUD and denser mobile presentation. */
#game:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,#09181130 0,transparent 22%,transparent 72%,#071b1455 100%);}
#hud{background:linear-gradient(180deg,#0a1713cc,#102c23bf);border:1px solid #d8c98b38;border-radius:14px;padding:7px 9px;backdrop-filter:blur(8px);box-shadow:0 8px 28px #071b1455}
.owner{background:#0a171300!important;border:0!important;box-shadow:none!important}.owner canvas{filter:drop-shadow(0 3px 5px #0007)}
.currencies{background:#0917138f;border:1px solid #d8c98b2f;border-radius:11px}.currencies b{font-variant-numeric:tabular-nums}
#location{background:#0a1713a3;border:1px solid #e3c77f38;border-radius:12px;padding:8px 13px;backdrop-filter:blur(5px);text-shadow:0 2px 8px #07150f}
#location h1{color:#f6e8c6}.eyebrow{color:#e9c871!important}
#objective{box-shadow:0 10px 24px #06171055;border-color:#e3cf9440;background:linear-gradient(135deg,#0c271fdd,#163a2ddd)}
#toolbar button{background:linear-gradient(145deg,#10281fee,#163e30ee);border-color:#dfd29b2c;box-shadow:0 7px 15px #06191166;color:#f3e4c2}
#toolbar button:active{transform:translateY(1px);background:#1f4c39}
#action{background:linear-gradient(180deg,#f1d18f,#d9ad5d);border-color:#ffe5af;box-shadow:0 4px 0 #8f673b,0 12px 28px #06140d88;color:#1d3028}
#action b{font-weight:900;letter-spacing:1.6px}.round{background:#0c211bd9!important;border:1px solid #dcca9238!important}
#target-label{display:inline-block;background:#0b1d18d6;border:1px solid #e6cf8c36;border-radius:7px;padding:4px 8px;color:#f1e6c8}
#joystick{background:radial-gradient(circle,#d5dbbd12 0,#0a171328 62%,#07151055);border:1px solid #f1dfab42;box-shadow:inset 0 0 30px #06120e88,0 8px 22px #06130e44}
#stick{background:radial-gradient(circle at 30% 25%,#dce0c1a8,#4e665e99 65%,#182d2899);border-color:#f1e6c084}
#toast{border:1px solid #fff0c470}

@media(max-width:700px){
 #hud{left:8px;right:8px;padding:5px 7px;border-radius:11px;gap:5px}
 .owner{min-width:0;padding:0!important}.owner canvas{width:38px;height:38px}.owner small{font-size:8px}.owner b{font-size:7px}
 .currencies{padding:7px 9px;gap:8px}.currencies b{font-size:14px}.currencies small{font-size:5px}.round{width:31px;height:31px}
 #location{left:12px;top:72px;padding:6px 10px;max-width:175px}#location h1{font-size:20px;margin:2px 0}#location p{display:none}
 #objective{left:12px;top:132px;max-width:190px;padding:7px 8px}#objective small{font-size:6px}#objective b{font-size:9px;line-height:1.35}#objective button{font-size:15px}
 #toolbar{right:8px;top:78px;gap:6px}#toolbar button{width:43px;height:44px;padding:4px}#toolbar svg{width:17px;height:17px;margin-bottom:1px}#toolbar span{font-size:7px}
 #joystick{left:17px;bottom:48px;width:98px;height:98px}#stick{left:29px;top:29px;width:40px;height:40px}#joystick small{top:108px}
 #action-wrap{right:13px;bottom:41px;width:132px}#action{height:57px;border-radius:15px}#target-label{font-size:8px;margin-bottom:6px}#cycle{padding:7px 4px}
 #status{bottom:8px;font-size:7px}
}

@media(orientation:landscape) and (max-height:700px){
 #hud{left:14px;right:14px;top:10px;width:auto;max-width:none}
 #location{left:18px;top:76px}.owner canvas{width:40px;height:40px}
 #objective{left:18px;top:135px;max-width:215px}
 #toolbar{left:14px;right:auto;top:210px;flex-direction:column}
 #toolbar button{width:48px;height:48px}
 #joystick{left:28px;bottom:32px;width:102px;height:102px}
 #action-wrap{right:24px;bottom:28px;width:145px}
}
