/* Orbite : un seul univers sombre, assumé (ciel nocturne). Aucune ressource externe. */
:root{
  --bg:#17122e; --bg2:#221a44; --fg:#f4f1ff; --muted:#a49cce; --line:#3a2f69;
  --gold:#ffc857; --red:#ff5d73; --cyan:#7ee8fa;
  --font:ui-rounded,"SF Pro Rounded","Segoe UI Rounded","Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

#hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none}
.hscore{display:flex;flex-direction:column;line-height:1}
.hscore b{font-size:clamp(28px,7vmin,44px);font-weight:800;font-variant-numeric:tabular-nums}
.hscore small{color:var(--muted);font-size:14px;margin-top:4px;font-weight:700}
.round{pointer-events:auto;width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:rgba(23,18,46,.7);font-weight:800;font-size:15px;letter-spacing:1px}

.layer{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.layer.dim{background:rgba(23,18,46,.72)}
.panel{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin:auto}
.logo{font-size:clamp(44px,13vmin,76px);font-weight:800;letter-spacing:-.03em;line-height:1}
.tag,.sub,.hint{margin:0;color:var(--muted);max-width:30ch;line-height:1.4}
.hint{font-size:14px}
h2{margin:0;font-size:28px;font-weight:800}
.kick{margin:0;color:var(--muted);font-weight:700}
.big{font-size:clamp(56px,16vmin,88px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stats{display:flex;gap:12px;width:100%;justify-content:center}
.stats div{flex:1;max-width:150px;border:2px solid var(--line);border-radius:16px;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.stats b{font-size:26px;font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:13px;font-weight:700}
#mGold{color:var(--gold)}
.btns{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:6px}
.btns button{min-height:52px;padding:12px 18px;border-radius:16px;border:2px solid var(--line);background:var(--bg2);font-weight:800;font-size:17px}
.btns button.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btns button small{display:block;font-weight:600;font-size:13px;opacity:.75;margin-top:2px}
.unlock{width:100%;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px;font-weight:700}
.ubar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.ubar i{display:block;height:100%;width:0;background:var(--gold);border-radius:5px}
.skins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.skin{aspect-ratio:1;border-radius:16px;border:2px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;font-size:11px;font-weight:700;color:var(--muted)}
.skin i{width:42%;aspect-ratio:1;border-radius:50%}
.skin.on{border-color:var(--fg);color:var(--fg)}
.skin.lock i{opacity:.25}
.skin:disabled{cursor:default}
.spin{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--cyan);margin-top:18px;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:3s}}
@media (max-height:430px){.tag,.hint{display:none}.stats b{font-size:20px}.stats div{padding:6px}.big{font-size:52px}}
@media (max-height:520px){.logo{font-size:44px}.btns button{min-height:44px;padding:8px 14px}.panel{gap:6px}}