/*
 * Vortex's page. The canvas fills it; words float over the light in Orbitron
 * (numbers, names) and pal's type (the small print). Cards are dark glass with
 * a hairline in the stage's colour (--accent, set from the stage's look), so
 * the menus take the colour of what is playing behind them. Sized for pal's
 * 720 by 390 panel and fine larger.
 */
@font-face { font-family: "Orbitron"; src: url("./font/orbitron.woff2") format("woff2"); font-weight: 400 900; }
:root {
  --accent: #3fe8ff; --accent2: #7ff3ff; --gold: #ffd25e;
  --ink: #f4f7ff; --dim: rgba(230, 236, 255, 0.62); --faint: rgba(230, 236, 255, 0.36);
  --ui: var(--pal-font-ui, -apple-system, system-ui, sans-serif);
  --disp: "Orbitron", var(--ui);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font: 12px/1.35 var(--ui); color: var(--ink); user-select: none; -webkit-user-select: none; cursor: default; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 2px; border-radius: 5px; text-align: center;
  font: 600 10px/17px var(--ui); color: var(--ink); background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 0 rgba(0, 0, 0, 0.4);
}
.keys { font-size: 10.5px; color: var(--dim); letter-spacing: 0.02em; text-shadow: 0 1px 3px #000; }
.keys s { opacity: 0.45; }
.poly { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.poly circle { fill: currentColor; stroke: none; }
.gold { color: var(--gold); }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 14px; pointer-events: none; }
.tl { display: grid; gap: 5px; }
.rankline { display: flex; align-items: center; gap: 7px; font: 700 11px/1 var(--disp); letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent2); text-shadow: 0 0 10px var(--accent), 0 1px 2px #000; }
.rankline .poly { filter: drop-shadow(0 0 4px var(--accent)); }
#hud .bar { width: 132px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#hud .bar i { display: block; height: 100%; width: 0; background: var(--accent2); box-shadow: 0 0 10px var(--accent); }
#best { font: 600 9.5px/1 var(--disp); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
#time { font: 800 34px/0.9 var(--disp); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-align: right; color: #fff; text-shadow: 0 0 18px var(--accent), 0 0 4px var(--accent), 0 2px 3px #000; }
#time small { font-size: 0.5em; opacity: 0.8; letter-spacing: 0.04em; }
#hud.record #time { color: #fff4cf; text-shadow: 0 0 20px var(--gold), 0 0 4px var(--gold), 0 2px 3px #000; }
#hud.record #best { color: var(--gold); }

/* ---- banners ---- */
#banners { position: fixed; left: 0; right: 0; top: 30%; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.banner { text-align: center; animation: banner 2.2s cubic-bezier(.16, 1, .3, 1) forwards; }
.banner b { display: block; font: 900 40px/1 var(--disp); letter-spacing: 0.32em; padding-left: 0.32em; color: #fff; text-shadow: 0 0 26px var(--accent), 0 0 8px var(--accent), 0 0 2px #fff; }
.banner span { display: block; margin-top: 6px; font: 700 10px/1 var(--disp); letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent2); }
.banner.gold b { font-size: 18px; letter-spacing: 0.4em; color: #fff4cf; text-shadow: 0 0 18px var(--gold), 0 0 3px var(--gold); }
.banner.clear b { color: #fff4cf; text-shadow: 0 0 30px var(--gold), 0 0 10px var(--gold); }
.banner.clear span { color: var(--gold); }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.6); filter: blur(10px); letter-spacing: 0.8em; }
  12% { opacity: 1; transform: scale(1); filter: blur(0); }
  70% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px) scale(0.96); filter: blur(3px); }
}

/* ---- cards ---- */
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .card, #ui .arrow, #ui .name { pointer-events: auto; }
.card {
  background: linear-gradient(180deg, rgba(8, 10, 22, 0.62), rgba(4, 5, 12, 0.78));
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 40px -10px var(--accent), 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* the title */
#ui.title .logo { position: absolute; left: 22px; top: 16px; }
.logo b {
  display: block; font: 900 30px/1 var(--disp); letter-spacing: 0.42em;
  background: linear-gradient(180deg, #fff 20%, var(--accent2) 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px var(--accent)) drop-shadow(0 0 2px var(--accent));
  animation: logo 3.6s ease-in-out infinite;
}
.logo span { display: block; margin-top: 7px; font: 600 9px/1 var(--disp); letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); }
@keyframes logo { 50% { filter: drop-shadow(0 0 20px var(--accent)) drop-shadow(0 0 3px var(--accent)); } }
#ui.title .card { position: absolute; right: 18px; bottom: 34px; width: 300px; padding: 14px 16px 12px; text-align: center; animation: rise 0.35s cubic-bezier(.16, 1, .3, 1); }
#ui.title .keys { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.nav { display: flex; align-items: center; justify-content: space-between; }
.arrow { font: 400 26px/1 var(--ui); color: var(--accent2); opacity: 0.75; padding: 0 4px; cursor: pointer; }
.arrow:hover { opacity: 1; }
.name { font: 800 23px/1.1 var(--disp); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; text-shadow: 0 0 16px var(--accent); }
.name em { display: block; font: 700 9px/1 var(--disp); font-style: normal; letter-spacing: 0.6em; padding-left: 0.6em; margin-top: 4px; color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.blurb { margin-top: 5px; color: var(--dim); font-size: 11.5px; }
.stats { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; margin-top: 12px; }
.stats small { display: block; font: 600 8.5px/1 var(--disp); letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.stats b { font: 700 17px/1 var(--disp); font-variant-numeric: tabular-nums; }
.stats .rk { display: grid; justify-items: center; gap: 4px; color: var(--accent2); font: 700 8.5px/1 var(--disp); letter-spacing: 0.24em; text-transform: uppercase; }
.stats .rk .poly { width: 22px; height: 22px; filter: drop-shadow(0 0 5px var(--accent)); }
.lock { margin: 14px 0 6px; font: 600 10px/1.4 var(--disp); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.card.is-locked .name { opacity: 0.45; text-shadow: none; }
.card.is-hyper { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 0 44px -10px var(--accent), 0 12px 40px rgba(0, 0, 0, 0.5); }
.dots { display: flex; justify-content: center; gap: 7px; margin-top: 13px; }
.dots i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.18); transition: transform 0.2s, background 0.2s; }
.dots i.clear { background: var(--accent2); }
.dots i.hclear { background: var(--gold); }
.dots i.locked { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.dots i.on { transform: rotate(45deg) scale(1.55); box-shadow: 0 0 0 1px #fff, 0 0 10px var(--accent); }
.dots i.day { border-radius: 50%; margin-left: 6px; }

/* a death */
#ui.over .card { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); min-width: 330px; padding: 14px 20px 14px; text-align: center; animation: overIn 0.45s cubic-bezier(.16, 1, .3, 1); }
@keyframes overIn { from { opacity: 0; transform: translate(-50%, 14px) scale(0.97); } }
#ui.over .keys { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; animation: overIn2 0.6s ease; }
@keyframes overIn2 { from { opacity: 0; } }
.over .time { font: 900 46px/1 var(--disp); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-shadow: 0 0 22px var(--accent), 0 0 4px var(--accent); }
.over .time small { font-size: 0.5em; opacity: 0.8; }
.over .line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--dim); }
.over .line b { font: 800 11px/1 var(--disp); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent2); }
.over .line .poly { color: var(--accent2); filter: drop-shadow(0 0 5px var(--accent)); }
.over .line span { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.over .next { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; font-size: 10.5px; color: var(--faint); }
.over .next .bar { width: 110px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.over .next .bar i { display: block; height: 100%; background: var(--accent2); box-shadow: 0 0 8px var(--accent); }
.over .board { margin-top: 10px; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.over .board a { color: var(--accent2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.opened { margin-top: 9px; font: 700 10px/1 var(--disp); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 12px var(--gold); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.6; } }

/* paused, no GL */
#ui.paused, #ui.nogl { display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); }
#ui.paused .card, #ui.nogl .card { padding: 16px 26px; text-align: center; display: grid; gap: 10px; }
#ui.paused b, #ui.nogl b { font: 800 18px/1 var(--disp); letter-spacing: 0.3em; text-transform: uppercase; }

/* medals, practice, endless */
.medals { display: flex; justify-content: center; gap: 10px; margin-top: 10px; font: 700 8px/1 var(--disp); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.medals span { display: inline-flex; align-items: center; gap: 4px; }
.medals i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.medals .won { color: var(--gold); }
.medals .won i { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.practice { margin-top: 9px; font-size: 10.5px; color: var(--dim); }
.practice b { color: var(--accent2); font-weight: 600; }
.dots i.loop { border-radius: 50%; margin-left: 6px; }

/* the look */
#ui.look { display: grid; place-items: center; }
#ui.look .card { width: min(560px, 92vw); padding: 14px 18px 12px; display: grid; gap: 6px; animation: rise 0.35s cubic-bezier(.16, 1, .3, 1); }
#ui.look .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
#ui.look .head b { font: 800 16px/1 var(--disp); letter-spacing: 0.24em; text-transform: uppercase; }
#ui.look .head span { font-size: 11px; color: var(--gold); }
#ui.look small { font: 700 8.5px/1 var(--disp); letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt { flex: 1; min-width: 80px; padding: 7px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; transition: box-shadow 0.15s, background 0.15s; }
.opt b { display: block; font: 700 11px/1.2 var(--disp); letter-spacing: 0.1em; text-transform: uppercase; }
.opt span { font-size: 10px; color: var(--faint); }
.opt.cur { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.opt.cur span { color: var(--accent2); }
.opt.sel { box-shadow: inset 0 0 0 1.5px #fff, 0 0 14px -2px var(--accent); }
.opt.locked b { opacity: 0.4; }
#ui.look .keys { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; }