/* Squeek Orbit
   Layout: full-screen 3D solar system hub; each planet opens a full-screen screen tinted with its colour.
   Palette: deep space, WHEELY9000 gold, sensor blue; each planet adds its own accent (--pc). */
:root {
  --bg: #0a0912;
  --panel: #14131d;
  --panel-2: #1b1a27;
  --line: #2b2939;
  --ink: #f3efe6;
  --muted: #a19cb2;
  --gold: #f2b33d;
  --blue: #4f8cff;
  --ok: #67d68f;
  --bad: #ff6b6b;
  --pc: var(--gold);
  --display: 'Bungee', 'Impact', system-ui, sans-serif;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); overflow: hidden; }
a { color: var(--pc); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.sky {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 600px at 70% 10%, #2a1d5233, transparent 60%),
    radial-gradient(900px 500px at 10% 90%, #0f3a5a33, transparent 60%),
    radial-gradient(circle at 1px 1px, #ffffff10 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(#07060d, #0d0b1a 60%, #120f24);
}

/* ---------------------------------------------------------------- hub */
.hub { position: fixed; inset: 0; }
.hub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.planet-label {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 999px;
  background: #0a0912c4; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); backdrop-filter: blur(6px);
  transition: opacity .2s, border-color .2s, background .2s; white-space: nowrap;
}
.planet-label:hover, .planet-label:focus-visible { background: color-mix(in srgb, var(--pc) 22%, #0a0912); border-color: var(--pc); }
.pl-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: #0a0912; font: 600 11px var(--mono); }
.pl-text { display: grid; line-height: 1.15; text-align: left; }
.pl-text b { font: 400 12px var(--display); letter-spacing: .02em; }
.pl-text small { font-size: 10.5px; color: var(--muted); }

.topbar { position: absolute; z-index: 4; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; flex-wrap: wrap; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand b { display: block; font: 400 20px/1 var(--display); color: var(--gold); letter-spacing: .02em; }
.brand small { font: 11px var(--mono); color: var(--muted); }
.brand-mark { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--gold); position: relative; box-shadow: 0 0 18px #f2b33d55; }
.brand-mark::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe6a8, var(--gold) 60%, #a8681a); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #14131dcc; border: 1px solid var(--line); font: 12px var(--mono); backdrop-filter: blur(6px); }
.chip .k { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.chip.on { border-color: #f2b33d88; color: var(--gold); }
.chip .clock { padding: 1px 6px; border-radius: 6px; background: #ffffff12; font-variant-numeric: tabular-nums; }
.feed i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.feed[data-state="live"] i { background: var(--ok); box-shadow: 0 0 0 4px #67d68f22; animation: pulse 1.6s infinite; }
.feed[data-state="demo"] { color: var(--gold); border-color: #f2b33d66; }
.feed[data-state="demo"] i { background: var(--gold); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px #67d68f00; } }

.intro { position: absolute; left: 18px; bottom: 60px; width: min(380px, calc(100% - 36px)); display: grid; gap: 10px; pointer-events: none; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #0a0912e6, #0a0912b8); border: 1px solid #ffffff14; backdrop-filter: blur(8px); z-index: 3; }
.intro > * { pointer-events: auto; }
.eyebrow { font: 600 11px var(--mono); color: var(--gold); text-transform: uppercase; letter-spacing: .12em; }
.intro h1 { font: 400 clamp(30px, 4vw, 46px)/1 var(--display); text-wrap: balance; }
.intro .lead { color: #d6d1c6; font-size: 14px; max-width: 46ch; }
.planet-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 40vh; overflow: auto; padding-right: 2px; }
.planet-list button { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 7px 9px; border-radius: 10px; background: #14131dd9; border: 1px solid var(--line); }
.planet-list button:hover, .planet-list button:focus-visible { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, #14131d); }
.planet-list .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fffa, var(--pc) 60%); }
.planet-list .pl-body { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.planet-list b { font: 400 11.5px var(--display); }
.planet-list small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planet-list .go { color: var(--muted); }

.ticker { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 9px 18px; background: #0a0912d9; border-top: 1px solid var(--line); font: 12px var(--mono); }
.ticker-k { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; flex: none; }
.ticker-track { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-items { display: inline-flex; gap: 28px; white-space: nowrap; animation: tick 50s linear infinite; color: var(--muted); }
.ticker-items b { color: var(--ink); text-transform: capitalize; }
@keyframes tick { to { transform: translateX(-50%); } }

.no-webgl .hub-canvas, .no-webgl .labels { display: none; }

/* ---------------------------------------------------------------- planet screen */
.planet { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-rows: auto 1fr; background: radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%), #0a0912f2; animation: rise .35s ease-out; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.planet-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.back { border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; border-radius: 10px; font: 600 13px var(--mono); }
.back:hover { border-color: var(--pc); }
.planet-glyph { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 22px color-mix(in srgb, var(--pc) 60%, transparent); }
.planet-title small { display: block; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.planet-title h2 { font: 400 22px/1.1 var(--display); color: var(--pc); }
.planet-live { margin-left: auto; display: flex; gap: 8px; }
.planet-body { overflow: auto; position: relative; }
.in-planet .hub { visibility: hidden; }

/* shared planet components */
.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 18px 40px; display: grid; gap: 16px; }
.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.card h3 { font: 600 16px var(--body); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card h3 .tag { font: 600 10.5px var(--mono); color: var(--pc); text-transform: uppercase; letter-spacing: .06em; }
.card p { color: #d6d1c6; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.stat .k { font: 600 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font: 400 20px/1.15 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .s { font: 11.5px var(--mono); color: var(--pc); }
.bar { height: 10px; border-radius: 999px; background: #ffffff12; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); border-radius: inherit; transition: width .6s; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 600; }
.btn:hover { border-color: var(--pc); }
.btn.primary { background: var(--pc); color: #0a0912; border-color: var(--pc); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0d0c15; font-family: var(--mono); font-size: 13px; }
.input:focus { outline: none; border-color: var(--pc); }
.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.choice { text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #0d0c15; display: grid; gap: 2px; }
.choice b { font: 400 13px var(--display); }
.choice small { font: 11px var(--mono); color: var(--muted); }
.choice:hover { border-color: #5b5670; }
.choice[aria-pressed="true"] { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, #0d0c15); }
.choice[aria-pressed="true"] b { color: var(--pc); }
.choice:disabled { cursor: default; opacity: .55; }
.choice[aria-pressed="true"]:disabled { opacity: 1; }
.list { list-style: none; display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.list li.empty { display: block; background: none; color: var(--muted); padding: 2px 0; }
.pill { font: 600 10.5px var(--mono); padding: 2px 8px; border-radius: 999px; background: #ffffff14; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pill.ok { background: #67d68f22; color: var(--ok); }
.pill.bad { background: #ff6b6b22; color: var(--bad); }
.pill.hot { background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); }
.empty { color: var(--muted); padding: 30px; text-align: center; }
.note { font-size: 12px; color: var(--muted); border-left: 2px solid var(--pc); padding-left: 10px; }
pre.raw { font: 11px/1.5 var(--mono); color: #c9c4d6; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; background: #0d0c15; border-radius: 10px; padding: 10px; }
details summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font: 600 12.5px var(--body); }
.tabs button[aria-selected="true"] { background: var(--pc); color: #0a0912; border-color: var(--pc); }

/* ---------------------------------------------------------------- Rallyon (game) */
.rally { position: absolute; inset: 0; }
.rally canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.r-hud { position: absolute; inset: 12px 12px auto 12px; display: flex; gap: 10px; align-items: flex-start; pointer-events: none; }
.r-box { background: #0a0912c4; border: 1px solid #ffffff1c; border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(6px); display: grid; }
.r-box .k { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.r-box .v { font: 400 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.r-box .s { font: 11px var(--mono); color: var(--gold); }
.r-power { flex: 1; max-width: 320px; margin: 0 auto; }
.r-power .bar { height: 8px; margin-top: 5px; }
.r-power.night .bar > i { background: linear-gradient(90deg, #8fb1ff, var(--blue)); }
.r-right { display: flex; gap: 8px; align-items: flex-start; }
.lives { display: flex; gap: 4px; padding-top: 4px; }
.lives i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, var(--gold) 60%); box-shadow: 0 0 10px #f2b33d66; }
.lives i.lost { background: #ffffff1a; box-shadow: none; }
.r-pause { pointer-events: auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid #ffffff2a; background: #0a0912c4; font-size: 16px; }
.r-bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.r-pick { font: 600 12px var(--mono); padding: 6px 12px; border-radius: 999px; background: #0a0912c4; border: 1px solid #ffffff1c; }
.r-pick b { color: var(--gold); }
.r-touch { position: absolute; left: 12px; right: 12px; bottom: 56px; display: none; justify-content: space-between; pointer-events: none; }
.r-touch button { pointer-events: auto; width: 68px; height: 68px; border-radius: 50%; border: 1px solid #ffffff2a; background: #0a091299; font-size: 22px; user-select: none; -webkit-user-select: none; touch-action: none; }
.r-touch .jump { width: 92px; border-radius: 34px; font: 400 14px var(--display); color: var(--gold); }
@media (hover: none) { .r-touch { display: flex; } }
.r-notice { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: #0a0912e0; border: 1px solid var(--gold); font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 90%; text-align: center; }
.r-notice.show { opacity: 1; }
.r-menu { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #0a091266, #0a0912d9); overflow: auto; }
.r-menu .panel { width: min(560px, 100%); background: #14131df2; border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 30px 80px #0008; }
.r-menu h3 { font: 400 30px/1 var(--display); color: var(--gold); }
.r-menu .sub { color: var(--muted); font-size: 14px; }
.r-menu .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-menu .menu-grid .btn { justify-content: flex-start; padding: 12px 14px; }
.r-menu .play { font: 400 20px var(--display); padding: 16px; }
.r-menu .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skin { text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #0d0c15; display: flex; gap: 10px; align-items: center; }
.skin .ball { width: 38px; height: 38px; border-radius: 50%; flex: none; border: 3px solid var(--sk); background: radial-gradient(circle at 35% 30%, #ffffffb0, color-mix(in srgb, var(--sk) 45%, transparent) 60%); }
.skin[aria-pressed="true"] { border-color: var(--gold); }
.skin:disabled { opacity: .55; cursor: not-allowed; }
.skin small { display: block; color: var(--muted); font-size: 11.5px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.how { display: grid; gap: 8px; font-size: 14px; }
.how li { margin-left: 18px; }
kbd { font: 12px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.big-score { font: 400 44px/1 var(--display); color: var(--gold); }

/* ---------------------------------------------------------------- planet specific */
.boss { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 10px; }
.boss canvas { width: min(280px, 70vw); height: auto; aspect-ratio: 1; }
.boss .bar { width: 100%; height: 16px; }
.boss .bar > i { background: linear-gradient(90deg, #ff9a7a, var(--bad)); }
.saga { list-style: none; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.saga li { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border-left: 3px solid var(--pc); font-size: 14px; }
.saga li small { display: block; font: 11px var(--mono); color: var(--muted); }
.paint { width: 100%; aspect-ratio: 1; border-radius: 14px; background: #0d0c15; display: block; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; }
.versus .who { font: 400 30px var(--display); }
.preview-frame { border-radius: 14px; border: 1px dashed var(--line); background: repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 22px 22px; padding: 16px; min-height: 160px; display: grid; place-items: center; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sq { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 6px; }
.sq .art { aspect-ratio: 1; border-radius: 10px; background: #0d0c15; display: grid; place-items: center; overflow: hidden; }
.sq .art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sq b { font-size: 13px; }
.creature { width: 100%; aspect-ratio: 1; display: block; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #2a2050, #0d0c15 70%); }

/* ---------------------------------------------------------------- stream overlay mode */
.is-overlay { background: transparent; }
.is-overlay .sky, .is-overlay .toast { display: none; }
.overlay-mode { position: fixed; inset: 0; padding: 16px; }
.ov { display: inline-grid; gap: 8px; background: #0a0912d9; border: 1px solid #ffffff22; border-radius: 18px; padding: 14px 16px; min-width: 300px; color: var(--ink); }
.ov-row { display: flex; align-items: center; gap: 12px; }
.ov-wheel { width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--gold); position: relative; flex: none; }
.ov-wheel::before, .ov-wheel::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; background: var(--gold); border-radius: 2px; }
.ov-wheel::after { transform: rotate(90deg); }
.ov-wheel.spin { animation: spin var(--spd, 2s) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ov b { font: 400 18px var(--display); }
.ov .k { font: 600 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ov .v { font: 600 15px var(--mono); }

.toast { position: fixed; left: 50%; bottom: 60px; transform: translate(-50%, 16px); z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; font-weight: 600; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.win { border-color: var(--ok); color: var(--ok); }
.toast.lose { border-color: var(--bad); color: #ffb3b3; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .cols { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .hide-sm { display: none !important; }
  .topbar { padding: 10px 12px; }
  .intro { left: 10px; right: 10px; width: auto; bottom: 46px; padding: 12px; }
  .intro .lead { display: none; }
  .intro h1 { font-size: 26px; }
  .planet-list { max-height: 34vh; }
  .labels { display: none; }
  .grid3 { grid-template-columns: 1fr; }
  .choices { grid-template-columns: 1fr 1fr; }
  .planet-live { display: none; }
  .r-box .v { font-size: 18px; }
  .r-hud { flex-wrap: wrap; }
  .r-power { order: 3; flex-basis: 100%; max-width: none; }
  .r-menu .menu-grid { grid-template-columns: 1fr; }
  .skins { grid-template-columns: 1fr; }
  .versus .who { font-size: 22px; }
  .r-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- shared server, wallet desk, audience poll */
.list li .k { color: var(--muted); font-size: 11px; }
.list li > span { min-width: 0; overflow-wrap: anywhere; }
.list li input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pc); }
.poll { display: grid; gap: 6px; margin: 8px 0; }
.poll-row { display: grid; grid-template-columns: 74px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; }
.poll-row b { text-align: right; font-family: var(--mono); }
.poll.big .poll-row { font-size: 15px; }
.poll.big .bar { height: 12px; }
body.is-vote { background: var(--bg); }
.vote { max-width: 460px; margin: 0 auto; padding: 28px 18px; display: grid; gap: 14px; text-align: center; }
.vote h2 { font: 400 20px/1.3 Bungee, sans-serif; color: var(--gold); }
.vote-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote-btns .btn { font-size: 18px; padding: 18px 10px; }
.srv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; }
.srv-dot.ok { background: var(--ok); } .srv-dot.down { background: var(--bad); }
.board-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
body.is-overlay.is-vote .toast { display: block; }
body.is-vote .overlay-mode { overflow: auto; }