:root{color-scheme:dark;--ink:#f8fbff;--navy:#082337;--cyan:#65d9e8;--gold:#ffd34d;--berry:#d84266}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 0,#1b5b75,#061a2b 68%);font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#gameShell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-width:1180px;margin:auto;padding:10px;gap:9px}
.hud{height:50px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,64px);background:#06243ddd;border:2px solid #ffffff22;border-radius:17px;padding:5px 14px;box-shadow:0 8px 25px #0005}
.hud div{display:grid;text-align:center;line-height:1}.hud strong{font-size:20px}.label{font-size:9px;letter-spacing:.16em;color:#91dbea;margin-bottom:4px}.mini{border:0;border-radius:12px;background:#ffffff18;color:#fff;font-weight:800;padding:10px 14px;white-space:nowrap;touch-action:manipulation}.mini.address{margin-left:auto}.mini+.mini{margin-left:4px}
.hud .mission{min-width:190px}.hud .mission strong{font-size:14px;color:#ffe482;white-space:nowrap}
#stage{position:relative;min-height:0;overflow:hidden;border-radius:21px;border:3px solid #ffffff44;background:#bcecf2;box-shadow:0 15px 45px #0008}
canvas{display:block;width:100%;height:100%;object-fit:contain;background:#bcecf2}
.overlay{position:absolute;inset:0;display:none;place-items:center;padding:12px;background:linear-gradient(#062038a8,#071a2aee);backdrop-filter:blur(3px);z-index:5;overflow:auto}.overlay.visible{display:grid}
.card{width:min(630px,96%);background:linear-gradient(145deg,#fff,#eaf8f8);color:#123047;border-radius:24px;padding:clamp(15px,3vw,26px);text-align:center;box-shadow:0 18px 55px #001a;outline:4px solid #ffffff55}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.2em;color:#147f8e;margin:0 0 7px}.card h1{font-size:clamp(26px,6vh,48px);line-height:.95;margin:0 0 12px;color:#a92f4d;text-shadow:0 2px #fff}.card p{margin:8px auto;max-width:520px}.heroes{display:flex;justify-content:center;gap:12px;margin:15px 0}.hero-choice{width:44%;height:128px;display:flex;align-items:center;justify-content:center;gap:8px;border:3px solid transparent;border-radius:18px;background:#d6eef0;color:#123047;font-weight:900;padding:7px}.hero-choice.selected{border-color:#e6a91e;background:#fff3b6;transform:translateY(-2px);box-shadow:0 7px 0 #c68a17}.hero-choice img{height:105px;max-width:58%;object-fit:contain}.hero-choice span{max-width:42%}.primary{border:0;border-radius:15px;padding:14px 28px;background:linear-gradient(#f25b75,#c72d53);color:white;font:900 19px inherit;box-shadow:0 7px 0 #8d1d3c;min-width:230px}.primary:active,.control.active{transform:translateY(4px);box-shadow:0 2px 0 #071829}.tip{font-size:12px;color:#55707a}.controls{display:flex;justify-content:space-between;align-items:center;padding:0 max(3px,env(safe-area-inset-left));min-height:82px;touch-action:none}.direction-group{display:flex;gap:12px}.control{width:82px;height:72px;border:2px solid #ffffff66;border-radius:22px;background:linear-gradient(#1c6787,#0b3d5d);color:#fff;font:900 30px inherit;box-shadow:0 7px 0 #041521,0 10px 25px #0006;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}.control.jump{width:116px;border-color:#ffe59d;background:linear-gradient(#ef5b74,#b71f49);box-shadow:0 7px 0 #6b1230,0 10px 25px #0006}.control span{display:block;font-size:8px;letter-spacing:.09em;pointer-events:none}.control .arrow{font-size:30px;line-height:1.05}
.address-panel{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#031522d9;backdrop-filter:blur(5px)}.address-panel[hidden]{display:none}.address-card{position:relative;width:min(520px,94vw);padding:27px;background:#f4ffff;color:#123047;border-radius:24px;text-align:center;box-shadow:0 20px 70px #000b}.address-card h2{margin:5px 0 12px}.game-url{padding:12px;border-radius:12px;background:#d9f0f2;font-weight:800;user-select:text;-webkit-user-select:text}.close-address{position:absolute;right:12px;top:9px;border:0;background:transparent;color:#123047;font-size:32px}.address-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.address-actions .primary{min-width:180px}.open-browser{display:inline-block;padding:13px 18px;color:#164e70;font-weight:900}
#toast{position:absolute;top:14px;left:50%;transform:translate(-50%,-20px);opacity:0;background:#082337e8;color:#fff;border:2px solid #fff5;border-radius:999px;padding:9px 18px;font-weight:900;pointer-events:none;transition:.25s;z-index:4;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
@media (orientation:landscape) and (max-height:560px){#gameShell{grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:43px minmax(0,1fr);padding:5px;gap:5px}.hud{grid-column:1;height:43px}.controls{grid-column:2;grid-row:1/3;flex-direction:column-reverse;justify-content:center;gap:18px}.direction-group{flex-direction:column}.control{width:68px;height:56px}.control.jump{width:78px;height:64px}.card{transform:scale(.82)}.heroes{margin:8px 0}.hero-choice{height:105px}.hero-choice img{height:88px}}
@media (max-width:700px){.hud{gap:8px;padding-inline:8px}.hud strong{font-size:15px}.hud .mission{min-width:100px}.hud .mission strong{font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis}.mini{padding:9px}.mini.address{font-size:0}.mini.address::first-letter{font-size:15px}.hero-choice{height:112px;font-size:11px}.hero-choice img{height:88px}.control{width:74px}}