@import url("v3.css?v=vw7-base-1");

:root{--violet:#b69bd2;--thrust:#78d1df}
.scan{display:none}
#game{background:#061016}
.hidden{display:none!important}

/* HUD: three intentionally separated bands. */
.hud{position:absolute;z-index:15;inset:0;pointer-events:none}
.hud-stats{position:absolute;left:7px;top:56px;width:250px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(132,166,176,.16);border-radius:4px;background:rgba(4,9,12,.78);backdrop-filter:blur(5px);overflow:hidden}
.hud-stats>div{padding:7px 6px;border-left:1px solid rgba(132,166,176,.10)}
.hud-stats>div:first-child{border-left:0}
.hud-stats span,.hud-meters span{display:block;color:#748990;font:800 6px/1 ui-monospace,monospace;letter-spacing:.07em}
.hud-stats b{display:inline-block;margin-top:4px;font:900 13px/1 ui-monospace,monospace}
.hud-stats small{margin-left:2px;color:#52666d;font:700 5px/1 ui-monospace,monospace}

.hud-meters{position:absolute;right:7px;top:56px;width:166px;padding:7px;border:1px solid rgba(132,166,176,.16);border-radius:4px;background:rgba(4,9,12,.78);backdrop-filter:blur(5px)}
.hud-meters .meter+.meter{margin-top:5px}.hud-meters .meter span{display:flex;justify-content:space-between}
.hud-meters .meter i{display:block;height:3px;margin-top:3px;background:#101b20;overflow:hidden}
.hud-meters .meter em{display:block;height:100%;width:0;background:#7fc9d5}
.hud-meters .meter:nth-child(2) em{background:#9bcf9e}.hud-meters .meter:nth-child(3) em{background:#73a8b3}.hud-meters .meter:nth-child(4) em{background:#b099d2}.hud-meters .meter:nth-child(5) em{background:#d7b56a}

.phase-strip{position:absolute;left:50%;top:56px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;max-width:calc(100vw - 450px);padding:6px 8px;border:1px solid rgba(132,166,176,.14);border-radius:4px;background:rgba(4,9,12,.70);color:#84979d;font:800 6px/1 ui-monospace,monospace;white-space:nowrap;overflow:hidden}
.phase-strip i{width:1px;height:8px;background:#304148}.phase-strip b{color:#e0e8e9}
.objective{position:absolute;left:50%;top:88px;transform:translateX(-50%);width:min(350px,calc(100vw - 465px));min-width:210px;padding:5px 8px;border:1px solid rgba(132,166,176,.13);border-radius:4px;background:rgba(4,9,12,.68);text-align:center}
.objective span{color:#62777e;font:800 5.5px/1 ui-monospace,monospace}.objective b{display:block;margin-top:3px;font:800 6.5px/1.2 ui-monospace,monospace}
.objective i{display:block;height:2px;margin-top:4px;background:#101b20}.objective em{display:block;height:100%;width:0;background:#7fc9d5}
.objective.compact{width:auto;min-width:0;opacity:.48}.objective.compact span,.objective.compact i{display:none}.objective.compact b{margin:0;white-space:nowrap}
.score-strip{position:absolute;left:7px;bottom:7px;display:flex;border:1px solid rgba(132,166,176,.16);border-radius:4px;overflow:hidden;background:rgba(4,9,12,.82);font:800 6px/1 ui-monospace,monospace}
.score-strip span{padding:6px 8px;border-left:1px solid rgba(132,166,176,.10)}.score-strip span:first-child{border-left:0}
.status{bottom:138px}

/* Controls */
.controls{position:absolute;z-index:18;inset:0;pointer-events:none;touch-action:none;overscroll-behavior:none}
.trim-surface{position:absolute;left:0;right:0;top:50px;bottom:0;z-index:1;pointer-events:auto;touch-action:none}
.controls button{pointer-events:auto;touch-action:none}
.thrust-control,.jump-control,.boost-control,.glide-control{position:absolute;z-index:5;background:rgba(7,14,18,.92);font-family:ui-monospace,monospace}
.thrust-control{right:12px;bottom:12px;width:88px;height:58px;border:1px solid #3f6972;border-radius:8px;color:#aee6ee}
.thrust-control.active{background:rgba(10,35,42,.96);box-shadow:0 0 18px rgba(120,209,223,.18)}
.jump-control{left:50%;bottom:10px;transform:translateX(-50%);width:68px;height:68px;border:1px solid #49616a;border-radius:50%;color:#dbe7e9}
.glide-control{left:50%;bottom:86px;transform:translateX(-50%);width:64px;height:42px;border:1px solid #66557a;border-radius:6px;color:#b9a4d2}
.glide-control.ready{border-color:#b099d2;box-shadow:0 0 12px rgba(176,153,210,.16)}.glide-control.active{background:rgba(28,17,38,.96);color:#e3d3ef;border-color:#d3b9e9}
.boost-control{right:14px;bottom:82px;width:74px;height:40px;border:1px solid #6b5c34;border-radius:6px;color:#d7b56a;background:rgba(18,15,9,.92)}
.thrust-control b,.jump-control b,.boost-control b,.glide-control b{display:block;font:900 8px/1 ui-monospace,monospace}
.thrust-control span,.jump-control span,.boost-control span,.glide-control span{display:block;margin-top:4px;color:#778b91;font:700 6px/1 ui-monospace,monospace}
.touch-indicator,.control-help{pointer-events:none;z-index:7}.control-help{display:none}

/* Shop and progression */
.pips{grid-template-columns:repeat(15,1fr);row-gap:3px}.card-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:5px;margin-top:7px}.card-actions .buy{margin-top:0}.buy.sell{border-color:#4a3735;color:#b98d87;background:#120d0e}.buy.sell:not(:disabled){border-color:#6a4742;color:#d6aaa3}

/* Mobile: stats, meters, objective, phase each occupy unique vertical bands. */
@media(max-width:780px){
 .hud-stats{top:54px;left:6px;width:calc(58% - 9px);grid-template-columns:repeat(2,1fr)}
 .hud-stats>div{padding:6px;border-bottom:1px solid rgba(132,166,176,.09)}
 .hud-stats>div:nth-child(odd){border-left:0}.hud-stats>div:nth-last-child(-n+2){border-bottom:0}
 .hud-meters{top:54px;right:6px;width:calc(42% - 9px);padding:6px}
 .phase-strip{top:148px;max-width:94vw;font-size:5.5px}
 .objective{top:176px;width:min(88vw,360px);min-width:0}
 .objective.compact{top:176px}
 .control-help{display:none}
 .status{bottom:124px}
 .home-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:470px){
 .brand small{display:none}
 .hud-stats{top:52px;width:55%}
 .hud-meters{top:52px;width:42%;padding:5px}
 .hud-meters .meter+.meter{margin-top:4px}
 .phase-strip{top:146px;max-width:96vw;font-size:5px;gap:4px;padding:5px 6px}
 .objective{top:172px;max-width:90vw;padding:4px 6px}.objective b{font-size:6px}
 .score-strip{bottom:5px;left:5px}
 .thrust-control{right:8px;bottom:8px;width:78px;height:53px}
 .jump-control{width:60px;height:60px;bottom:7px}
 .glide-control{bottom:73px;width:58px;height:38px}
 .boost-control{right:9px;bottom:68px;width:66px;height:36px}
 .card-actions{grid-template-columns:1fr}
}