/* Space Police Rangers — layers on top of /styles.css. */
@font-face{font-family:"Kenney Future";src:url(/games/rainbow-dash/assets/fonts/KenneyFuture.ttf) format("truetype");font-display:swap}
body::after{display:none}
html,body{overflow:hidden;touch-action:none;overscroll-behavior:none;background:#0b0a1e}
#game{position:fixed;inset:0;display:block;width:100%;height:100%;background:#0b0a1e}

.speed{position:fixed;right:max(14px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;z-index:3}
.speed .speed-track{margin-right:18px}
/* vertical meter: bottom = full reverse, the 0 mark just above it, Boost at the top */
.speed-track{position:relative;height:min(44vh,300px);width:16px;border-radius:9px;background:rgba(16,26,61,.75);border:2px solid var(--ice)}
.speed-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--sky);border-radius:6px;transition:background .2s}
.speed-fill[data-band=boost],.speed-fill[data-band=overheat]{background:var(--sun)}
.speed-fill[data-band=reverse]{background:var(--peach)}
.speed-fill[data-band=spin]{background:#5dff8f;box-shadow:0 0 10px #5dff8f;transition:none}
.speed-fill[data-band=jump]{background:#5dff8f;animation:drive-glow .5s ease-in-out infinite alternate}
@keyframes drive-glow{from{box-shadow:0 0 6px #5dff8f}to{box-shadow:0 0 18px #b8ffd0;filter:brightness(1.2)}}
/* main.js sizes the reverse zone and places the marks from SPEED in sim/flight.js */
.rev-zone{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 4px,transparent 4px 8px)}
/* boost heat: a red layer over the Cruise-to-Boost section; flashes red/white when overheated */
.heat-fill{position:absolute;left:0;right:0;height:0;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b}
.heat-fill.overheated{animation:overheat .3s steps(2,jump-none) infinite}
@keyframes overheat{from{background:#ff3b3b}to{background:#fff}}
.mark{position:absolute;left:-3px;right:-3px;height:2px;margin-bottom:-1px;background:var(--cream)}
.mark.zero{height:4px;margin-bottom:-2px;background:#fff;box-shadow:0 0 0 1px var(--navy)}
.mark.zero::after{content:"0";position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:4px;color:var(--cream);font:700 .75rem/1 system-ui,sans-serif}
.mark.cruise::after{content:"C";position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:4px;color:var(--cream);font:700 .7rem/1 system-ui,sans-serif;opacity:.8}
.speed-readout{color:var(--cream);font:.75rem "Kenney Future","Baloo 2",system-ui,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.5);white-space:nowrap;opacity:.9}
.speed-readout b{font-size:1rem;color:#9fdcff}
.speed-label{color:var(--cream);font:.8rem "Kenney Future","Baloo 2",system-ui,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.5);white-space:nowrap}

.fps{position:fixed;top:max(8px,env(safe-area-inset-top));left:8px;z-index:4;pointer-events:none;padding:.15em .5em;border-radius:8px;
  background:rgba(0,0,0,.55);color:var(--grass);font:600 .85rem/1.3 ui-monospace,Consolas,monospace}
.fps.error{color:#ffb0b0;max-width:min(70vw,520px);white-space:normal;font-size:.75rem;background:rgba(60,10,20,.8)}
.gems{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 1.9rem);left:8px;z-index:4;pointer-events:none;padding:.1em .6em;border-radius:14px;
  background:var(--cream);color:var(--navy);font:1.1rem "Kenney Future","Baloo 2",system-ui,sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.credits{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 4.1rem);left:8px;z-index:4;pointer-events:none;padding:.1em .6em;border-radius:14px;
  background:var(--sun);color:var(--navy);font:1.1rem "Kenney Future","Baloo 2",system-ui,sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.35);transform-origin:left center}
.credits.pop{animation:credit-pop .18s ease-out}
/* Space Ranger faction points, then passengers aboard: one seat per dot (sim/rangerDock.js);
   on a planet's surface the space-only HUD steps aside */
.faction,.passengers{position:fixed;left:8px;z-index:4;pointer-events:none;padding:.1em .6em;border-radius:14px;
  font:1.1rem "Kenney Future","Baloo 2",system-ui,sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.35);transform-origin:left center}
.faction{top:calc(max(8px,env(safe-area-inset-top)) + 9.3rem);   /* under the credits pill, which /styles.css's .credits margin pushes down 44px */
  display:flex;align-items:center;gap:.3em;background:var(--navy);color:#8fc2ff;border:2px solid #3d8bff}
.faction[hidden]{display:none}
.faction canvas{width:1.4em;height:1.4em}
.passengers{top:calc(max(8px,env(safe-area-inset-top)) + 11.8rem);background:var(--sky);color:var(--navy)}
.passengers .seats{display:inline-flex;gap:4px;vertical-align:middle}
.passengers .seats i{width:.7em;height:.7em;border-radius:50%;border:2px solid var(--navy);box-sizing:border-box}
.passengers .seats i.on{background:var(--navy)}
.passengers.full .seats i{animation:seats-full .5s steps(2,jump-none) infinite}
@keyframes seats-full{from{border-color:#ff5a5a;background:#ff5a5a}to{border-color:var(--navy)}}
.faction.pop,.passengers.pop{animation:credit-pop .3s ease-out}
.on-surface .speed,.on-surface .hint{display:none}
.on-surface .radar{visibility:hidden}   /* hidden, not display:none: radar.js sizes itself from its box */
@keyframes credit-pop{50%{transform:scale(1.25)}}
.corner-btns{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;display:flex;gap:10px;z-index:7}
.btn.tiny{display:grid;place-items:center;width:1.7em;font-size:clamp(1.2rem,3.5vw,1.7rem);padding:.2em 0;line-height:1;border-radius:20px;text-decoration:none}

.hint{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;
  max-width:calc(100vw - 32px);padding:.4em 1em;border-radius:20px;background:rgba(16,26,61,.8);color:var(--cream);
  text-align:center;font-weight:700;pointer-events:none;transition:opacity 1s;z-index:3}
.hint b{color:var(--sun)}
.hint.gone{opacity:0}
.sound-hint{position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 3.2rem);right:10px;margin:0;padding:.3em .8em;border-radius:14px;
  background:rgba(16,26,61,.8);color:var(--cream);font-weight:700;font-size:.9rem;pointer-events:none;z-index:3}

[hidden]{display:none !important}
.btn.big{font-size:1.2rem}
.btn.green{background:var(--grass)}
.btn.sun{background:var(--sun)}
.btn[disabled]{opacity:.45;pointer-events:none}
.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;background:rgba(11,10,30,.55);z-index:6}
.overlay.solid{background:linear-gradient(180deg,rgba(16,26,61,.94),rgba(11,16,36,.96));z-index:8}
.card-panel{max-width:720px;width:100%;text-align:center;color:var(--navy);background:var(--cream);border-radius:30px;
  padding:clamp(14px,3vw,26px);box-shadow:0 10px 0 rgba(16,26,61,.18),0 18px 36px rgba(0,0,0,.45)}
.card-panel h2{margin:.1em 0 .4em;font-size:clamp(1.6rem,5vw,2.4rem)}
.card-panel .sub{margin:0 0 .8em}
.over-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:.6em 0 0}
.how{margin:0 auto .4em;border-collapse:collapse;font-size:clamp(.8rem,2.4vw,1rem);text-align:left}
.how td{padding:.08em .55em}
.how td:first-child{font-weight:800}
.remap-pick{display:grid;gap:10px;justify-content:center;margin:.6em 0}
.remap-progress{margin:.2em 0 0;font-weight:800;opacity:.65;font-size:.95rem}
.remap-prompt{margin:.1em 0 .2em;font-weight:800;font-size:clamp(1.1rem,3.4vw,1.5rem)}
.remap-captured{margin:0 0 .4em;min-height:1.4em;font-weight:800;color:#3c7a12}
.remap-list{list-style:none;margin:.2em auto .6em;padding:0;max-width:28em;text-align:left}
.remap-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:var(--ice);border-radius:16px;padding:.25em .8em;margin-bottom:5px;border:3px solid transparent}
.remap-row.current{background:var(--sun);border-color:var(--navy)}
.remap-foot{margin:.6em 0 0;font-size:.85rem;opacity:.7}

/* radar: a circle at the bottom centre that slides between three states */
.radar{--d:min(34vh,280px);position:fixed;left:50%;bottom:0;width:var(--d);height:var(--d);z-index:3;
  transform:translate(-50%,-10px);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
/* half: a little past halfway, so the ship icon at the centre (16px) is fully visible */
.radar[data-state=half]{transform:translate(-50%,calc(50% - 16px))}
.radar[data-state=closed]{transform:translate(-50%,100%)}
.radar canvas{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 10px rgba(109,255,158,.25))}
.radar-tab{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:2px;padding:.15em .8em;border:0;border-radius:12px 12px 0 0;
  background:rgba(8,30,28,.85);color:#8cffb0;font:700 .75rem "Kenney Future",system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.radar[data-state=full] .radar-tab{opacity:.55}

/* hold: count / size, a little fill bar, flashes red when full */
.gems .gem-bar{display:block;height:4px;margin:2px 0 1px;border-radius:2px;background:rgba(16,26,61,.18);overflow:hidden}
.gems .gem-bar>i{display:block;height:100%;width:0;background:var(--sky);transition:width .2s}
.gems.full{animation:hold-full .5s steps(2,jump-none) infinite}
.gems.full .gem-bar>i{background:#ff5a5a}
@keyframes hold-full{from{background:var(--cream)}to{background:#ffb3b3}}

/* ship status screen (Select / Tab): one card per upgrade, no pause */
.status-screen{position:fixed;inset:0;display:grid;place-items:center;padding:16px;z-index:6;pointer-events:none}
.status-panel{position:relative;pointer-events:auto;max-width:900px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:18px;border-radius:24px;
  background:rgba(10,20,34,.88);border:2px solid rgba(57,240,200,.55);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.status-close{position:absolute;top:10px;right:10px}
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.status-card{display:flex;gap:10px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.08);opacity:.6}
.status-card.owned{opacity:1;border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.status-card canvas{width:64px;height:64px;flex:none}
.status-body{min-width:0;flex:1}
.status-name{display:block;color:var(--cream);font:1rem "Kenney Future","Baloo 2",system-ui,sans-serif}
.status-pips{display:flex;gap:5px;margin:5px 0;min-height:16px;align-items:center}
.status-pips i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(16,26,61,.8)}
.status-pips i.on{background:var(--c)}
.status-pips .star{color:#ffe066;font-size:1.2rem;line-height:1}
.status-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.status-bar i{display:block;height:100%;width:0;background:var(--c)}
.status-what{margin:6px 0 0;color:#cfe0f7;font-size:.85rem;line-height:1.25}
/* the ship itself, above the upgrade cards: its tier's art, size pips, faction points, seats */
.status-ship{display:flex;gap:14px;align-items:center;margin:0 44px 12px 0;padding:10px 14px;border-radius:16px;background:rgba(61,139,255,.12);border:2px solid rgba(61,139,255,.55)}
.status-shipart{width:96px;height:96px;flex:none;display:grid;place-items:center}
.status-shipart img{max-width:none;transform-origin:center}
.status-tier{display:flex;gap:6px;margin:6px 0}
.status-tier i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(16,26,61,.8)}
.status-tier i.on{background:#3d8bff}
.status-rangers{display:flex;align-items:center;gap:8px;margin:0;color:#8fc2ff;font:1.2rem "Kenney Future","Baloo 2",system-ui,sans-serif}
.status-rangers canvas{width:30px;height:30px}
.status-seats{margin-left:12px;display:inline-flex;align-items:center;gap:4px}
.status-seats i{width:12px;height:12px;border-radius:50%;border:2px solid #8fc2ff;box-sizing:border-box}
.status-seats i.on{background:#58b4ff}