@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
}

:root {
  --ink: #0b0a1a;
  --panel: rgba(14, 11, 34, 0.94);
  --panel-edge: #4f4596;
  --btn: rgba(26, 20, 52, 0.92);
  --btn-hover: rgba(40, 30, 78, 0.96);
  --text: #eeeaff;
  --dim: #a19dcc;
  --gold: #ffc75a;
  --cyan: #73f2ff;
  --danger: #ff5a7a;
  --violet: #b78bff;
  --blast: #6fe7ff; --blast-deep: #2a8fd6; /* cyan accent: prisms, focus rings */
  /* one motion language: every UI transition uses these */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.3, 1.4, .5, 1);
  --t-fast: 0.18s;
  --t-med: 0.35s;
  /* one type scale and one set of shapes for every screen */
  --fs-xs: 11px; --fs-s: 13px; --fs-m: 16px; --fs-l: 20px;
  --sc-track: 0.18em; /* small caps tracking */
  --r-s: 8px; --r-m: 14px; --r-l: 20px;
  --line: rgba(140, 125, 230, 0.32);
  --line-hi: rgba(255, 199, 90, 0.7);
  --s: 1; /* stage scale, set by JS */
  --k: 1; /* small-text boost on small screens */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #060510; color: var(--text); /* the stage's own margin ink: no seam where it meets the letterbox */
  font-family: 'Inter', system-ui, sans-serif; font-weight: 520;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
kbd { font: inherit; font-size: 0.75em; padding: 1px 7px; border: 1px solid currentColor; border-radius: 6px; opacity: 0.7; margin-left: 8px; }

/* ------------------------------------------------------------ stage (1280x720 logical, scaled by JS) */
#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* the stage is 1280x720, or 720x1280 upright */
/* The reticle is a real OS cursor, so it never lags behind the mouse. Gold: a dash is ready; lilac: no flame. */
body.playing #stage { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-14 -14 28 28'%3E%3Cg fill='none' stroke='%2305030d' stroke-width='3.6' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M9.4 3.4A10 10 0 0 1 3.4 9.4M-3.4 9.4A10 10 0 0 1-9.4 3.4M-9.4-3.4A10 10 0 0 1-3.4-9.4M3.4-9.4A10 10 0 0 1 9.4-3.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffd27a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9.4 3.4A10 10 0 0 1 3.4 9.4M-3.4 9.4A10 10 0 0 1-9.4 3.4M-9.4-3.4A10 10 0 0 1-3.4-9.4M3.4-9.4A10 10 0 0 1 9.4-3.4'/%3E%3C/g%3E%3Ccircle r='2.2' fill='%23ffd27a' stroke='%2305030d' stroke-width='.8'/%3E%3C/svg%3E") 14 14, crosshair; }
body.playing.no-flame #stage { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-14 -14 28 28'%3E%3Cg fill='none' stroke='%2305030d' stroke-width='3.6' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M9.4 3.4A10 10 0 0 1 3.4 9.4M-3.4 9.4A10 10 0 0 1-9.4 3.4M-9.4-3.4A10 10 0 0 1-3.4-9.4M3.4-9.4A10 10 0 0 1 9.4-3.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a99ad6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9.4 3.4A10 10 0 0 1 3.4 9.4M-3.4 9.4A10 10 0 0 1-9.4 3.4M-9.4-3.4A10 10 0 0 1-3.4-9.4M3.4-9.4A10 10 0 0 1 9.4-3.4'/%3E%3C/g%3E%3Ccircle r='2.2' fill='%23a99ad6' stroke='%2305030d' stroke-width='.8'/%3E%3C/svg%3E") 14 14, crosshair; }

#hud { position: absolute; inset: 0; pointer-events: none; font-weight: 700; --hy: 40px; }
/* The HUD sits on the arena's ink band (y 0..80), aligned to the arena's edges (x 40 and 1240); the centre stays clear. */
#hud > div { position: absolute; top: 0; height: 80px; display: flex; align-items: center; text-shadow: 0 1px 2px #05030d; }
.sc, .hud-wave-top, #best, #comboLabel, #waveMod, #practice { text-transform: uppercase; letter-spacing: var(--sc-track); font-weight: 700; }
.hud-left { left: 40px; gap: 18px; }
.glyphs { display: flex; align-items: center; gap: 4px; filter: drop-shadow(0 1px 1.5px rgba(3, 2, 10, 0.9)); }
/* Icon glyphs are vector masks, filled by CSS, so lives and flames share one crisp style. */
.life, .pip i { display: block; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.life { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M1 12C7 9.4 12 6.6 16.5 5.2A7.2 7.2 0 1 1 16.5 18.8C12 17.4 7 14.6 1 12Z'/%3E%3C/svg%3E");
  width: 30px; height: 22px; background: radial-gradient(circle at 70% 46%, #fffaf0 0 14%, #ffd27a 32%, #f29a3c 70%);
  transition: background 0.3s, opacity 0.3s; }
.life.lost { background: #3b3466; opacity: 0.9; }
.life.last { animation: lastlife 1s ease-in-out infinite; }
@keyframes lastlife { 50% { background: radial-gradient(circle at 70% 46%, #fff 0 14%, #ff9f8a 34%, #ff5a7a 70%); } }
.hud-dash { gap: 0; }
.hud-dash.shake { animation: shake 0.35s linear; }
.hud-dash.shake .pip:not(.full) i { background: linear-gradient(to top, var(--danger) calc(var(--f, 0) * 100%), #6b2a44 0); }
@keyframes shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.pip { position: relative; width: 18px; height: 24px; }
.pip i { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M9 1C12.5 6 16.5 9.5 16.5 15A7.5 7.5 0 0 1 1.5 15C1.5 11.5 3.5 9 5.5 7.5C5.8 9.6 6.8 10.6 8 11C7.4 7.5 7.8 4 9 1Z'/%3E%3C/svg%3E");
  position: absolute; inset: 0; background: linear-gradient(to top, #ffb85c calc(var(--f, 0) * 100%), #3b3466 0); }
.pip.full i { background: linear-gradient(to top, #ff9b3d, #ffd27a 55%, #fff4d6); }
.pip.pop::after { content: ''; position: absolute; left: 50%; top: 58%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 1.5px solid #ffe3a0; animation: pop 0.45s ease-out forwards; }
@keyframes pop { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.hud-wave { left: 480px; width: 320px; flex-direction: column; align-items: stretch !important; justify-content: center; }
.hud-wave-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-s); color: #d8d3f5; margin-bottom: 7px; white-space: nowrap; }
#waveCount { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#waveCount { color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 6px; }
#waveCount::before { content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.boss #waveCount { color: var(--violet); }
.boss #waveCount::before { display: none; }
.bar { height: 4px; border-radius: 2px; background: rgba(90, 80, 150, 0.45); overflow: hidden; }
.bar-fill { height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(90deg, #4fd8ff, var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); }
.boss .bar-fill { background: linear-gradient(90deg, #9a6bff, var(--violet)); }
#waveMod, #practice { position: absolute; top: 62px; left: 0; right: 0; text-align: center; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* never wider than the wave bar (the phone Pause button sits beside it) */
#waveMod { color: #b9c8ff; }
#waveMod:empty { display: none; }
#practice { color: var(--violet); opacity: 0.85; }
#waveMod:not(:empty) + #practice { display: none; }
.hud-combo { right: 196px; gap: 10px; opacity: 0; transition: opacity 0.2s; }
.hud-combo.on { opacity: 1; }
#mult { font-size: 30px; font-weight: 800; display: inline-block; min-width: 44px; text-align: right; transform-origin: 70% 55%; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.combo-side { display: flex; flex-direction: column; gap: 6px; width: 84px; }
#comboLabel { font-size: var(--fs-xs); white-space: nowrap; }
.bar.small { height: 3px; }
.hud-score { right: 40px; flex-direction: column; align-items: flex-end !important; justify-content: center; }
#score { font-size: 28px; font-weight: 800; color: #ffe2a6; transform-origin: 100% 50%; display: inline-block; font-variant-numeric: tabular-nums; line-height: 1.05; }
#best { font-size: var(--fs-xs); color: var(--dim); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Wave banners: one at a time, short, in the upper third (clear of the wisp's spawn), on a soft dark wash. */
#banner { position: absolute; left: 0; right: 0; top: 128px; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; text-align: center; }
#banner::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 190px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(4, 3, 12, 0.62), rgba(4, 3, 12, 0.3) 60%, transparent); z-index: -1; }
#bannerTitle { font-size: 50px; font-weight: 800; color: var(--gold); letter-spacing: 0.14em; margin-right: -0.14em; line-height: 1.1;
  text-shadow: 0 0 22px rgba(255, 160, 50, 0.4), 0 2px 0 #2a1704; }
#bannerTitle::after { content: ''; display: block; width: 220px; height: 1px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: 0.6; }
#bannerSub { font-size: calc(20px * var(--k)); font-weight: 600; color: #e6e1ff; margin-top: 10px; max-width: 900px; letter-spacing: 0.03em; text-shadow: 0 0 6px #05030d, 0 0 2px #05030d; }
#banner.boss #bannerTitle { color: #d9b4ff; text-shadow: 0 0 26px rgba(170, 90, 255, 0.6), 0 2px 0 #1a0830; }
#banner.show { animation: banner 1.75s var(--ease-out) forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translateY(8px); letter-spacing: 0.02em; }
  14% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}
#banner.boss.show { animation-duration: 2.3s; }
#banner.low { top: 470px; }
#hint { position: absolute; left: 50%; bottom: 36px; max-width: 760px; padding: 7px 16px; border-radius: 999px; background: rgba(9, 7, 22, 0.78); border: 1px solid var(--line);
  font-size: calc(var(--fs-m) * var(--k)); font-weight: 600; color: #e9e5ff; white-space: nowrap; text-align: center; opacity: 0; transform: translate(-50%, 6px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); pointer-events: none; }
#hint.show { opacity: 1; transform: translate(-50%, 0); }
#toast { position: absolute; left: 0; right: 0; top: 84px; display: flex; justify-content: center; align-items: center; gap: 10px; font-weight: 800; color: var(--gold); font-size: calc(22px * var(--k)); opacity: 0; pointer-events: none; text-shadow: 0 0 6px #05030d; }
#toast img { width: 44px; height: 44px; }
#toast.show { animation: toast 2.3s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-14px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------ screens (real pixels, responsive) */
#screens { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; animation: fadein var(--t-med) var(--ease-out) both; }
.dim-bg { background: rgba(5, 3, 15, 0.72); backdrop-filter: blur(2px); }
@keyframes fadein { from { opacity: 0; } }
.panel { position: relative; background: linear-gradient(180deg, rgba(24, 19, 52, 0.95), rgba(11, 9, 28, 0.96)); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(16px, 3vh, 30px) clamp(18px, 3vw, 34px); width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(110, 80, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); animation: popin 0.4s var(--ease-out) both; max-height: 100%; overflow-y: auto; margin: auto 0; }
.panel.wide { width: min(640px, 100%); }
@keyframes popin { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
.panel::before { content: ''; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 210, 140, 0.75), transparent); pointer-events: none; }
h2 { margin: 0 0 4px; font-size: clamp(26px, 5vh, 40px); font-weight: 850; letter-spacing: 0.04em; }
p { margin: 4px 0; }
.dim { color: var(--dim); }
.cyan { color: var(--cyan); }
.gold { color: var(--gold); }
.small { font-size: clamp(13px, 2.2vh, 16px); }
.big { font-size: clamp(30px, 6.5vh, 46px); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row .btn { flex: 1 1 0; min-width: 140px; white-space: nowrap; }

.btn { min-height: 50px; padding: 10px 24px; border-radius: 999px; background: linear-gradient(180deg, rgba(38, 30, 76, 0.92), rgba(22, 17, 48, 0.92));
  border: 1px solid rgba(130, 115, 220, 0.42); font-size: clamp(16px, 2.8vh, 19px); font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 rgba(0, 0, 0, 0.3);
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease-out), filter 0.18s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; touch-action: manipulation; }
.btn:hover:not(:disabled) { border-color: rgba(255, 199, 90, 0.65); color: #ffe3a8; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 199, 90, 0.08); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); transition-duration: 0.06s; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { color: #ffe6b0; font-weight: 650; letter-spacing: 0.06em; background: linear-gradient(180deg, rgba(255, 199, 90, 0.24), rgba(255, 170, 70, 0.1));
  border-color: rgba(255, 205, 120, 0.65); box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.18), 0 6px 24px rgba(0, 0, 0, 0.3); }
.btn.primary:hover:not(:disabled), .btn.primary:focus-visible { color: #fff6e0; border-color: #ffd889; background: linear-gradient(180deg, rgba(255, 199, 90, 0.34), rgba(255, 170, 70, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.3), 0 0 0 4px rgba(255, 199, 90, 0.12), 0 8px 28px rgba(255, 160, 60, 0.22); }
.btn.primary:active:not(:disabled) { background: rgba(255, 190, 90, 0.36); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.btn.ghost { background: none; border-color: transparent; box-shadow: none; color: var(--dim); min-height: 46px; }
.btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); border-color: rgba(130, 115, 220, 0.35); color: var(--text); box-shadow: none; }
.btn.danger-btn { border-color: rgba(255, 90, 122, 0.35); }
.btn.danger-btn.armed { border-color: var(--danger); color: var(--danger); }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(255, 214, 140, 0.85); outline-offset: 3px; }
.btn:focus-visible { color: #ffe3a8; border-color: rgba(255, 199, 90, 0.65); }
.btn.primary:focus-visible { outline-color: #ffe3a8; }

/* title */
#title { gap: clamp(4px, 1.2vh, 10px); }

/* boons */
#boons { gap: 6px; }
#cards { display: flex; gap: clamp(10px, 2vw, 24px); margin-top: 10px; justify-content: center; width: 100%; max-width: 980px; }
.card { position: relative; flex: 1 1 0; max-width: 290px; min-height: 48px; padding: clamp(10px, 2vh, 18px) 16px; border-radius: var(--r-l);
  background: linear-gradient(180deg, rgba(34, 27, 70, 0.96), rgba(14, 11, 32, 0.96)); border: 1px solid rgba(125, 110, 210, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 1vh, 8px); cursor: pointer; text-align: center;
  animation: cardin 0.55s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms);
  transition: transform 0.22s var(--ease-out), border-color 0.22s, box-shadow 0.22s, opacity 0.22s, filter 0.22s; }
.card:focus-visible { outline: none; }
/* the one selected card (hover moves the focus, so there is never a second highlight) */
.card.sel { transform: translateY(-8px); border-color: rgba(255, 199, 90, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.25), 0 0 0 1px rgba(255, 199, 90, 0.35), 0 18px 44px rgba(255, 160, 60, 0.22); }
.card.sel img { transform: scale(1.06); }
.card:disabled { cursor: default; }
.card img { width: clamp(64px, 17vh, 116px); height: clamp(64px, 17vh, 116px); padding: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 110, 0.16), rgba(255, 196, 110, 0.04) 55%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 150, 0.14); transition: transform 0.3s var(--ease-back); }
.card .key { font-size: var(--fs-xs); color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; }
.card .name { font-size: clamp(18px, 3.6vh, 24px); font-weight: 700; color: #ffd889; letter-spacing: 0.01em; }
.card .lvl { font-size: var(--fs-xs); color: var(--cyan); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.card .desc { font-size: clamp(14px, 2.5vh, 17px); line-height: 1.35; font-weight: 500; color: #e4dfff; }
.card.chosen { animation: chosen 0.34s var(--ease-out) forwards; border-color: var(--gold); }
.card.chosen::after { content: ''; position: absolute; inset: -2px; border-radius: 20px; border: 2px solid #ffe3a8; animation: chosenring 0.34s ease-out forwards; pointer-events: none; }
@keyframes chosen { 0% { transform: translateY(-8px); } 40% { transform: translateY(-10px) scale(1.06); filter: brightness(1.35); box-shadow: 0 0 60px rgba(255, 190, 80, 0.55); } 100% { transform: translateY(-14px) scale(1.04); opacity: 0; } }
@keyframes chosenring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
.card.gone { animation: none; opacity: 0; transform: translateY(12px) scale(0.96); }
@keyframes cardin { from { opacity: 0; transform: translateY(26px) scale(0.94); } }

/* pause / results build icons */
.build { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.build figure { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--dim); }
.build img { width: 46px; height: 46px; }

/* settings */
.sliders { display: grid; gap: 6px; }
.sliders label { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: clamp(15px, 2.8vh, 19px); min-height: 44px; text-align: left; }
.sliders b { color: var(--gold); font-weight: 700; }
input[type=range] { -webkit-appearance: none; appearance: none; width: min(240px, 46%); height: 44px; background: transparent; cursor: pointer; touch-action: pan-x; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: #2a2350; box-shadow: inset 0 0 0 1px #5a4f9a; }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: #2a2350; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(255, 170, 60, 0.7); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--gold); }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 14px; border-radius: var(--r-m); background: var(--btn); border: 1px solid var(--line); cursor: pointer; font-size: clamp(14px, 2.6vh, 18px); text-align: left; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span::after { content: ''; float: right; }
.toggle::after { content: ''; flex: none; width: 40px; height: 22px; border-radius: 11px; background: #2a2350; box-shadow: inset 0 0 0 1px #5a4f9a; transition: background 0.15s; background-image: radial-gradient(circle at 11px 50%, #8a84b8 8px, transparent 8.5px); }
.toggle:has(input:checked)::after { background-color: rgba(255, 199, 90, 0.35); background-image: radial-gradient(circle at 29px 50%, var(--gold) 8px, transparent 8.5px); }
.toggle:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.toggle:hover { border-color: var(--line-hi); }

/* results */
.res-score { font-size: clamp(44px, 11vh, 76px); font-weight: 750; color: var(--gold); line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255, 170, 60, 0.35); }
#resBest { font-size: clamp(15px, 2.8vh, 20px); color: var(--dim); }
#resBest.new { color: var(--cyan); font-weight: 800; animation: glowtext 1.2s ease-in-out infinite; }
@keyframes glowtext { 50% { opacity: 0.55; } }
#resStats { display: grid; grid-template-columns: repeat(2, auto auto); gap: 4px 22px; margin: 6px auto; text-align: left; font-size: clamp(14px, 2.6vh, 18px); }
#resStats dt { color: var(--dim); animation: fadein 0.3s both; animation-delay: var(--d); }
#resStats dd { margin: 0; text-align: right; font-weight: 800; animation: fadein 0.3s both; animation-delay: var(--d); }
#resUnlocks p { color: var(--gold); font-weight: 800; animation: popin 0.5s 0.9s both; }
#againBtn { min-height: 58px; font-size: clamp(19px, 3.6vh, 24px); }

/* touch + overlays */
#touchPause { position: fixed; z-index: 5; min-height: 44px; min-width: 48px; padding: 0 12px; font-weight: 800; color: var(--dim); border-radius: 50%; background: rgba(14, 11, 32, 0.55); border-color: rgba(140, 125, 230, 0.3); box-shadow: none; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 30%, #ff5a4e); }
#veil { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: rgba(5, 3, 15, 0.72); }
#veil.out { animation: veilout 0.3s var(--ease-out); }
@keyframes veilout { from { opacity: 1; } to { opacity: 0; } }
#flash.on { animation: flash 0.35s ease-out; }
@keyframes flash { from { opacity: 0.4; } to { opacity: 0; } }
#rotate { position: fixed; inset: 0; z-index: 20; background: rgba(8, 5, 20, 0.97); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--gold); font-size: clamp(22px, 7vw, 40px); font-weight: 850; text-align: center; padding: 30px; }
#rotate img { width: 96px; animation: spin90 2.4s ease-in-out infinite; }
@keyframes spin90 { 40%, 60% { transform: rotate(90deg); } }
body.portrait #rotate { display: flex; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: var(--dim); font-size: 18px; letter-spacing: 0.05em; z-index: 30; transition: opacity 0.6s, transform 0.6s var(--ease-out);
  background: radial-gradient(ellipse at 50% 45%, #15113a 0%, #07061a 55%, #03020a 100%); }
#loading.done { opacity: 0; transform: scale(1.06); pointer-events: none; }
/* A wisp racing round a ring, its tail fading behind it, around a breathing core. */
.ld-orb { position: relative; width: 84px; height: 84px; border-radius: 50%; animation: ldspin 1.05s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 170, 70, 0.08) 62%, rgba(255, 199, 90, 0.9) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%); mask: radial-gradient(closest-side, transparent 84%, #000 86%); }
.ld-orb::after { content: ''; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -2px 0 0 -6px; border-radius: 50%; background: #fff6dc; }
.ld-spin { position: relative; width: 84px; height: 84px; }
.ld-spin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 170, 0.95) 0 6px, rgba(255, 180, 80, 0.45) 9px, rgba(255, 160, 60, 0) 34px); animation: ldbreathe 1.6s ease-in-out infinite; }
.ld-name { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: 0.6em; margin-right: -0.6em; color: #d9d2ff; animation: ldglow 2.4s ease-in-out infinite; }
.ld-bar { width: 180px; height: 2px; border-radius: 2px; background: rgba(120, 110, 200, 0.25); overflow: hidden; }
.ld-bar span { display: block; height: 100%; transform: scaleX(0.04); transform-origin: left; transition: transform 0.25s var(--ease-out); background: linear-gradient(90deg, #73f2ff, #ffc75a); box-shadow: 0 0 8px #ffc75a; }
@keyframes ldspin { to { transform: rotate(1turn); } }
@keyframes ldbreathe { 50% { transform: scale(1.25); opacity: 0.75; } }
@keyframes ldglow { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .ld-orb { animation-duration: 3s; } .ld-spin::before, .ld-name { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  #rotate img { animation: none; }
}
@media (max-height: 480px) {
  #cards .card .desc { font-size: 13px; }
  .card .key { display: none; }
  .panel { gap: 6px; }
  .btn { min-height: 48px; }
}

@media (max-height: 520px) and (min-width: 600px) {
  #settings .panel.wide { width: min(860px, 100%); }
  .sliders { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .sliders label { min-height: 44px; }
  .toggles { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .toggle { min-height: 46px; padding: 4px 8px; font-size: 13px; line-height: 1.15; }
  .toggle::after { width: 34px; height: 20px; background-image: radial-gradient(circle at 10px 50%, #8a84b8 7px, transparent 7.5px); }
  .toggle:has(input:checked)::after { background-image: radial-gradient(circle at 24px 50%, var(--gold) 7px, transparent 7.5px); }
  h2 { font-size: 24px; }
}

/* ------------------------------------------------------------ title (calm, left-aligned, art-forward) */
#title { align-items: flex-start !important; justify-content: center !important; padding-left: clamp(28px, 8vw, 120px);
  background: linear-gradient(90deg, rgba(4, 3, 14, 0.66) 0%, rgba(4, 3, 14, 0.3) 36%, transparent 60%); }
.t-col { display: flex; flex-direction: column; align-items: flex-start; }
.t-col > * { opacity: 0; animation: rise 0.5s var(--ease-out) forwards; }
.t-col > :nth-child(2) { animation-delay: 0.08s; }
.t-col > :nth-child(3) { animation-delay: 0.16s; }
.t-col > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wordmark { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.wm-top { font-size: clamp(54px, 12vh, 96px); font-weight: 300; letter-spacing: 0.34em; margin-right: -0.34em;
  background: linear-gradient(180deg, #fff3d2 0%, #ffd27a 55%, #e9a24a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 190, 90, 0.3));
  /* a band of white light sweeps through the letters while the glow breathes */
  background-image: linear-gradient(100deg, #e9a24a 0%, #ffd27a 38%, #fffaf0 50%, #ffd27a 62%, #e9a24a 100%); background-size: 260% 100%;
  animation: rise 0.5s var(--ease-out) both, wmshine 5.5s ease-in-out 0.6s infinite, wmglow 3.2s ease-in-out infinite; }
@keyframes wmshine { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
@keyframes wmglow { 50% { filter: drop-shadow(0 0 30px rgba(255, 190, 90, 0.6)); } }
.wm-bot { animation: wmspace 6s ease-in-out infinite; }
@keyframes wmspace { 50% { letter-spacing: 1.25em; margin-right: -1.25em; text-shadow: 0 0 14px rgba(115, 242, 255, 0.6); } }
@media (prefers-reduced-motion: reduce) { .wm-top, .wm-bot { animation: none; } }
.wm-line { display: block; width: clamp(160px, 30vh, 260px); height: 1px; margin: clamp(10px, 2vh, 16px) 0;
  background: linear-gradient(90deg, rgba(255, 210, 130, 0.9), rgba(115, 242, 255, 0.5), transparent); position: relative; overflow: hidden; }
.wm-line::after { content: ''; position: absolute; top: -1px; width: 60px; height: 3px; left: -60px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), transparent); animation: sweep 6s ease-in-out infinite 0.8s; }
@keyframes sweep { 0% { left: -60px; } 35%, 100% { left: 110%; } }
.wm-bot { font-size: clamp(16px, 3.2vh, 24px); font-weight: 600; letter-spacing: 1.1em; color: #cfe9ff; opacity: 0.85; margin-right: -1.1em; }
.pitch { margin: clamp(14px, 3vh, 22px) 0 0; font-size: clamp(14px, 2.5vh, 17px); font-weight: 450; color: rgba(222, 218, 255, 0.72); letter-spacing: 0.02em; }
.t-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: clamp(22px, 5vh, 40px); }
.tlink { position: relative; display: inline-flex; align-items: baseline; gap: 10px; background: none; border: 0; cursor: pointer;
  padding: 6px 14px 6px 22px; margin-left: -22px; min-height: 40px; font-size: clamp(16px, 2.8vh, 19px); font-weight: 500;
  color: rgba(238, 234, 255, 0.74); letter-spacing: 0.03em; border-radius: var(--r-s);
  transition: color var(--t-fast), transform var(--t-med) var(--ease-out); }
.tlink::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px 2px rgba(255, 180, 80, 0.6); transform: scale(0); transition: transform var(--t-fast) var(--ease-out); }
.tlink:hover, .tlink:focus-visible { color: #fff; transform: translateX(4px); }
.tlink:hover::before, .tlink:focus-visible::before { transform: scale(1); }
.tlink:focus-visible { outline: 2px solid rgba(255, 199, 90, 0.8); outline-offset: 0; }
.tlink:active { transform: translateX(4px) scale(0.98); transition-duration: 0.06s; }
/* progress reads as a quiet small-caps suffix, never a chip */
.tlink .sfx { font-size: var(--fs-xs); font-weight: 650; letter-spacing: var(--sc-track); text-transform: uppercase; color: rgba(185, 180, 230, 0.6); font-variant-numeric: tabular-nums; }
#trailName { color: var(--sw, inherit); opacity: 0.85; }
/* Play: the one primary action */
.tlink.play { margin: 0 0 10px; padding: 0 calc(30px - 0.22em) 0 30px; min-height: 50px; align-items: center; border-radius: 999px; font-size: clamp(18px, 3vh, 21px); font-weight: 650;
  letter-spacing: 0.22em; text-transform: uppercase; color: #ffe6b0; background: linear-gradient(180deg, rgba(255, 199, 90, 0.2), rgba(255, 170, 70, 0.1));
  border: 1px solid rgba(255, 205, 120, 0.6); box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.18), 0 6px 24px rgba(0, 0, 0, 0.3);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.tlink.play::before { display: none; }
.tlink.play:hover, .tlink.play:focus-visible { color: #fff6e0; transform: translateY(-1px); background: linear-gradient(180deg, rgba(255, 199, 90, 0.32), rgba(255, 170, 70, 0.16));
  border-color: #ffd889; box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.3), 0 0 0 4px rgba(255, 199, 90, 0.12), 0 8px 28px rgba(255, 160, 60, 0.22); }
.tlink.play:focus-visible { outline: 1.5px solid rgba(255, 227, 168, 0.7); outline-offset: 4px; }
.tlink.play:active { transform: translateY(1px) scale(0.98); background: rgba(255, 190, 90, 0.36); }
#bestLine { margin: clamp(16px, 3vh, 26px) 0 0; font-size: var(--fs-s); font-weight: 600; color: rgba(190, 186, 230, 0.66); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; display: flex; align-items: center; }
#bestLine:empty { display: none; }
#bestLine .rec-medal img { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .t-col > * { animation: none; opacity: 1; } .wm-line::after { animation: none; } }
@media (max-height: 480px) { .t-menu { margin-top: 14px; } .tlink { min-height: 36px; } .tlink.play { min-height: 44px; margin-bottom: 6px; } .pitch { margin-top: 10px; } }

/* ------------------------------------------------------------ boon synergy and going without */
.card .syn { font-size: clamp(12px, 2.2vh, 15px); color: var(--cyan); line-height: 1.25; padding-top: 4px; border-top: 1px solid rgba(115, 242, 255, 0.25); }
.card.synergy { border-color: rgba(115, 242, 255, 0.6); }
.pass { margin-top: clamp(6px, 2vh, 16px); background: none; border: 0; color: var(--dim); font-size: clamp(14px, 2.4vh, 17px); letter-spacing: 0.04em;
  padding: 10px 18px; min-height: 44px; cursor: pointer; opacity: 0.8; transition: color var(--t-fast), opacity var(--t-fast); animation: fadein 0.5s 0.4s both; }
.pass:hover:not(:disabled), .pass:focus-visible { color: var(--text); opacity: 1; outline: none; text-decoration: underline; text-underline-offset: 5px; }
.pass:disabled { cursor: default; }

/* ------------------------------------------------------------ HUD reactions (brief, one-shot) */
.hud-lives.hit #lives { animation: hudhit 0.45s var(--ease-out); }
.hud-lives.gain #lives, .hud-wave.gain #waveLabel { animation: hudgain 0.45s var(--ease-back); }
@keyframes hudhit { 25% { transform: translateX(-4px); filter: drop-shadow(0 0 8px var(--danger)); } 50% { transform: translateX(3px); } }
@keyframes hudgain { 40% { transform: scale(1.12); filter: brightness(1.5); } }
.hud-combo.up #mult { animation: multup 0.5s var(--ease-back); }
@keyframes multup { 0% { filter: brightness(2.2) drop-shadow(0 0 14px currentColor); } 100% { filter: none; } }

#banner.mod #bannerTitle { color: #d6e6ff; text-shadow: 0 0 24px rgba(140, 180, 255, 0.5), 0 2px 0 #0d1530; }

/* achievement toast: a small pill under the score, out of the play area's way */
#achToast { position: absolute; right: 18px; top: 72px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(12, 9, 30, 0.82); border: 1px solid rgba(255, 199, 90, 0.55); box-shadow: 0 0 22px rgba(255, 170, 60, 0.18);
  font-weight: 700; opacity: 0; pointer-events: none; }
#achToast .k { font-size: 12px; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
#achToast .n { font-size: 18px; color: var(--gold); }
#achToast i, #resUnlocks .ach i, #recList li i { width: 10px; height: 10px; flex: none; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 10px rgba(255, 180, 80, 0.9); display: inline-block; }
#achToast.show { animation: achin 2.7s var(--ease-out) forwards; }
@keyframes achin { 0% { opacity: 0; transform: translateX(24px); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px); } }

/* ------------------------------------------------------------ results: achievements and next goals */
#resUnlocks p { margin: 2px 0; }
#resUnlocks .ach { display: flex; align-items: center; justify-content: center; gap: 10px; }
#resUnlocks .ach i { margin-right: 2px; }
#resNext { display: flex; flex-direction: column; gap: 6px; margin: 4px auto 6px; width: min(440px, 100%); animation: fadein 0.5s 1s both; }
#resNext .goal-h { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
#resNext .goal { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; text-align: left; font-size: clamp(13px, 2.2vh, 15px); color: var(--dim); }
#resNext .goal b { color: var(--text); font-weight: 700; margin-right: 6px; }
#resNext .goal em { font-style: normal; color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
.gbar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(110, 100, 170, 0.35); overflow: hidden; margin-top: 4px; }
.gbar > span { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(var(--f)); animation: grow 0.9s 1.1s var(--ease-out) both; }
@keyframes grow { from { transform: scaleX(0); } }

/* ------------------------------------------------------------ records */
#recList { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; text-align: left; }
#recList li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'i n p' '. d d' '. b b'; align-items: center; column-gap: 10px; padding: 8px 12px; border-radius: var(--r-m);
  background: rgba(26, 20, 52, 0.6); border: 1px solid rgba(74, 63, 138, 0.6); animation: fadein 0.4s var(--ease-out) both; animation-delay: var(--d); }
#recList li i { grid-area: i; background: #3a3266; box-shadow: none; }
#recList li.done { border-color: rgba(255, 199, 90, 0.45); }
#recList li.done i { background: var(--gold); box-shadow: 0 0 10px rgba(255, 180, 80, 0.9); }
#recList .rn { grid-area: n; font-weight: 700; font-size: clamp(14px, 2.4vh, 17px); }
#recList li.done .rn { color: var(--gold); }
#recList .rp { grid-area: p; font-size: 13px; color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
#recList li.done .rp { color: var(--gold); }
#recList .rd { grid-area: d; font-size: clamp(12px, 2vh, 14px); color: var(--dim); }
#recList .gbar { grid-area: b; }
#recList .gbar > span { animation-delay: calc(var(--d) + 0.2s); }
#recList li.done .gbar { display: none; }
#records .panel.wide { width: min(760px, 100%); }
@media (max-height: 520px) {
  #recList { gap: 4px 10px; }
  #recList li { padding: 5px 10px; }
  #recList .rd { font-size: 12px; }
}
@media (max-width: 560px) { #recList { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #achToast.show { animation-duration: 2.7s; } .hud-combo.up #mult, .hud-lives.hit #lives { animation: none; } }

/* short landscape screens (phones): records in three columns, results in two, so nothing needs scrolling */
@media (max-height: 520px) and (min-width: 700px) {
  #records .panel.wide { width: min(900px, 100%); }
  #recList { grid-template-columns: repeat(3, 1fr); }
  #records .panel { gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  #records h2 { font-size: 22px; margin: 0; }
  #recBest { margin: 0; }
  #recList li { padding: 4px 8px; column-gap: 8px; }
  #recList .rn { font-size: 13px; }
  #recList .rd { font-size: 11px; line-height: 1.2; }
}

/* ------------------------------------------------------------ results: medal, header */
h2.eyebrow { font-size: clamp(13px, 2.2vh, 15px); font-weight: 650; letter-spacing: 0.42em; margin: 0 -0.42em 2px 0; text-transform: uppercase; color: #c9b8ff; }
.res-head { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 26px); }
.medal { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.medal .m-art { position: relative; width: 84px; height: 84px; display: block; }
.medal img { position: relative; width: 84px; height: 84px; display: block; animation: medalin 0.7s 0.55s var(--ease-back) backwards; }
.medal.m-ember img { filter: drop-shadow(0 0 14px rgba(255, 130, 60, 0.45)); }
.medal.m-moon img { filter: drop-shadow(0 0 14px rgba(170, 190, 255, 0.5)); }
.medal.m-lumen img { filter: drop-shadow(0 0 18px rgba(255, 200, 90, 0.6)); }
@keyframes medalin { from { opacity: 0; transform: scale(0.4) rotate(-25deg); } }
/* light motes gather into the medal, then a glint crosses it */
.medal i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff0c8;
  box-shadow: 0 0 8px 2px rgba(255, 210, 130, 0.8); opacity: 0; animation: gather 0.6s calc(0.1s + var(--d)) ease-in both; }
.medal.m-moon i { background: #eef2ff; box-shadow: 0 0 8px 2px rgba(190, 200, 255, 0.8); }
@keyframes gather { 0% { opacity: 0; transform: rotate(var(--a)) translateX(64px); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(4px); } }
.medal .m-glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
  background-size: 300% 100%; background-position: 120% 0; -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  animation: glint 0.9s 1.15s ease-in-out both; mix-blend-mode: screen; }
.medal.m-ember { --mk: url('assets/art/medal_ember.png'); }
.medal.m-moon { --mk: url('assets/art/medal_moon.png'); }
.medal.m-lumen { --mk: url('assets/art/medal_lumen.png'); }
@keyframes glint { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.medal .m-text { display: flex; flex-direction: column; align-items: center; animation: fadein 0.4s 1s both; }
.medal .m-text b { font-size: 14px; color: var(--gold); letter-spacing: 0.06em; }
.medal.m-moon .m-text b { color: #d6ddff; }
.medal .m-text span { font-size: 11px; color: var(--dim); white-space: nowrap; }
.rec-medal { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; vertical-align: middle; color: var(--dim); }
.rec-medal img { width: 30px; height: 30px; }
.rec-medal b { color: var(--gold); }

/* ------------------------------------------------------------ achievement toast: a small sparkle on unlock */
#achToast { overflow: hidden; }
#achToast.show i { animation: achgem 0.9s 0.15s var(--ease-back) both; }
@keyframes achgem { 0% { transform: rotate(45deg) scale(0); } 50% { transform: rotate(225deg) scale(1.5); box-shadow: 0 0 18px 4px rgba(255, 220, 150, 0.95); } 100% { transform: rotate(405deg) scale(1); } }
#achToast::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 236, 190, 0.28) 50%, transparent 65%);
  background-size: 300% 100%; background-position: 130% 0; pointer-events: none; }
#achToast.show::after { animation: glint 1s 0.3s ease-in-out both; }

/* ------------------------------------------------------------ title links: a tactile press */
.tlink:active { transform: translateX(10px) scale(0.98); transition-duration: 0.06s; }

/* ------------------------------------------------------------ reduced motion (setting, defaulting to the OS preference) */
body.reduced #banner.show { animation-name: bannerfade; }
@keyframes bannerfade { 0% { opacity: 0; } 14%, 78% { opacity: 1; } 100% { opacity: 0; } }
body.reduced .card, body.reduced .panel, body.reduced .medal img, body.reduced .medal .m-text { animation-name: fadein; }
/* the title items start at opacity 0 (their rise ends at 1), so their reduced-motion fade must end at 1 too */
body.reduced .t-col > * { animation-name: fadefull; }
@keyframes fadefull { from { opacity: 0; } to { opacity: 1; } }
body.reduced .card.chosen, body.reduced .card.chosen::after { animation: none; opacity: 0; }
body.reduced .card.sel { transform: none; }
body.reduced .medal i, body.reduced .medal .m-glint, body.reduced #achToast.show i, body.reduced #achToast.show::after,
body.reduced .wm-top, body.reduced .wm-bot, body.reduced .wm-line::after, body.reduced #lives img.last, body.reduced #resBest.new { animation: none; }
body.reduced .tlink:hover, body.reduced .tlink:focus-visible, body.reduced .btn:hover:not(:disabled) { transform: none; }
/* a hint never shows through a menu (it carries on when play resumes) */
body:has(.screen.dim-bg:not([hidden])) #hint { opacity: 0; }

/* The in-game "Reduced motion" setting (not just the OS preference) also stills the HUD reactions. */
body.reduced .hud-combo.up #mult, body.reduced .hud-lives.hit #lives, body.reduced .hud-lives.gain #lives,
body.reduced .hud-wave.gain #waveLabel, body.reduced .hud-dash.shake, body.reduced .pip.pop::after { animation: none; }
body.reduced #achToast.show { animation-name: fadein; }
#waveLabel { display: inline-block; transform-origin: 0 60%; }

/* small screens (phones): the HUD grows from each block's anchor so it stays legible; --k is 1 on desktop */
.hud-left { transform: scale(calc(var(--k) * var(--hud-scale, 1))); transform-origin: 0 50%; }
.hud-wave { transform: scale(calc(var(--k) * var(--hud-scale, 1))); transform-origin: 50% 40%; }
.hud-combo { transform: scale(calc(var(--k) * var(--hud-scale, 1))); transform-origin: 100% 50%; }
.hud-score { transform: scale(calc(var(--k) * var(--hud-scale, 1))); transform-origin: 100% 50%; }
.pass kbd { margin-left: 10px; }
@media (max-height: 520px) { .hud-wave { left: 500px; width: 280px; } }
#touchPause { font-size: 15px; letter-spacing: 0.08em; }
}

/* ------------------------------------------------------------ boon cards: always alive */
/* icons float (out of step with each other) and a light runs round each icon's ring, faster on the picked card */
.card img { animation: cardfloat 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.card.sel img { animation-duration: 1.8s; }
@keyframes cardfloat { 50% { translate: 0 -6px; } }
.card::before { content: ''; position: absolute; left: 50%; top: calc(clamp(10px, 2vh, 18px) + var(--fs-xs) * 1.4 + clamp(2px, 1vh, 8px));
  width: clamp(64px, 17vh, 116px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--ca, 0deg), transparent 0 70%, rgba(255, 214, 150, 0.85) 92%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 96%, #000 97%); mask: radial-gradient(closest-side, transparent 96%, #000 97%);
  animation: ringrun 4s linear infinite; animation-delay: calc(var(--i) * -1.3s); opacity: 0.55; }
.card.sel::before { opacity: 1; animation-duration: 1.6s; }
@property --ca { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ringrun { to { --ca: 360deg; } }
body.reduced .card img, body.reduced .card::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .card img, .card::before { animation: none; } }

/* Settings: touch-only options stay out of the way on a mouse-and-keyboard computer; a soft rounded focus ring on sliders */
body:not(.mobile) .touch-only, body:not(.mobile) #touchControls { display: none !important; }
input[type=range]:focus-visible { outline: 2px solid rgba(255, 199, 90, 0.75); outline-offset: 2px; border-radius: 999px; }

/* Surge banner: smaller than a wave banner (it interrupts play), rose, with a quick double pulse as a warning */
#banner.surge #bannerTitle { font-size: 38px; color: #ffb3cf; text-shadow: 0 0 24px rgba(255, 80, 140, 0.55), 0 2px 0 #2a0716; }
#banner.surge #bannerTitle::after { background: linear-gradient(90deg, transparent, rgba(255, 120, 170, 0.9), transparent); }
#banner.surge.show #bannerTitle { animation: surgepulse 0.5s ease-out 2; }
@keyframes surgepulse { 40% { transform: scale(1.06); filter: brightness(1.35); } }
body.reduced #banner.surge.show #bannerTitle { animation: none; }

/* Results: score and stats on the left, the best moment, build, goals and Play again on the right. Each column centres
   itself, so a quiet run (no medal, no boons) never leaves a half-empty side. Sizes are stage px, never vh. */
.res-main, .res-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
#resMoment { margin: 0; padding: 10px 14px; border-radius: var(--r-m); background: linear-gradient(180deg, rgba(255, 199, 90, 0.14), rgba(255, 199, 90, 0.05));
  border: 1px solid rgba(255, 199, 90, 0.4); color: #ffe2a6; font-size: 17px; font-weight: 700; animation: popin 0.5s 0.6s var(--ease-back) both; }
#resMoment span { display: block; font-size: 11px; letter-spacing: var(--sc-track); text-transform: uppercase; color: var(--gold); opacity: 0.8; margin-bottom: 2px; }
@media (min-width: 700px) {
  #results .panel.wide { width: min(940px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 6px; align-items: center; padding: 26px 34px; }
  #results h2 { grid-column: 1 / -1; margin: 0 0 4px; }
  .res-main, .res-side { justify-content: center; }
  #results .res-head { gap: 18px; }
  #resScore { font-size: 64px; }
  .medal .m-art, .medal img { width: 72px; height: 72px; }
  #resBest { font-size: 16px; margin: 0; }
  #resStats { font-size: 15px; width: 100%; margin: 4px 0 0; padding: 14px 18px; border-radius: var(--r-m); background: rgba(26, 20, 52, 0.5); border: 1px solid var(--line); gap: 6px 16px; white-space: nowrap; }
  #resUnlocks { font-size: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #resUnlocks:empty, #resNext:empty { display: none; }
  #resUnlocks .ach { margin: 0; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255, 199, 90, 0.1); border: 1px solid rgba(255, 199, 90, 0.35); gap: 7px; font-size: 13px; }
  #resUnlocks .ach i { width: 7px; height: 7px; }
  #resUnlocks p:not(.ach) { flex-basis: 100%; font-size: 13px; }
  #resNext { margin: 0; }
  #againBtn { min-height: 52px; font-size: 21px; }
  #resTitle { min-height: 42px; }
}
@media (max-height: 520px) and (min-width: 700px) { /* phones held sideways: the results still fit without scrolling */
  #results .panel.wide { padding: 12px 24px; row-gap: 2px; }
  .res-main, .res-side { gap: 6px; }
  #resScore { font-size: 46px; }
  .medal .m-art, .medal img { width: 52px; height: 52px; }
  #resMoment { padding: 6px 12px; font-size: 15px; }
  #resStats { padding: 8px 14px; font-size: 13px; gap: 3px 14px; }
  #againBtn { min-height: 44px; font-size: 18px; }
  #resTitle { min-height: 36px; }
}

/* the surge marker on the HUD wave bar: a small rose notch, so the mid-wave peak is never a surprise */
.bar { position: relative; }
#waveTick { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #ff8fb8; box-shadow: 0 0 6px rgba(255, 90, 150, 0.9); }
/* an odd last record spans the row, so the grid never ends on a lone half-card */
#recList li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-height: 520px) and (min-width: 700px) { #recList li:last-child:nth-child(odd) { grid-column: auto; } }

/* results: one line on how to beat what ended the run */
#resTip { margin: 0; padding: 8px 12px 8px 30px; position: relative; border-radius: var(--r-m); background: rgba(115, 242, 255, 0.06); border: 1px solid rgba(115, 242, 255, 0.22);
  color: #cfeff5; font-size: 14px; font-weight: 550; text-align: left; line-height: 1.35; animation: fadein 0.5s 0.9s both; }
#resTip::before { content: ''; position: absolute; left: 12px; top: 14px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--cyan); box-shadow: 0 0 8px rgba(115, 242, 255, 0.8); }
@media (max-height: 520px) and (min-width: 700px) { #resTip { font-size: 12px; padding: 5px 10px 5px 26px; } #resTip::before { top: 10px; left: 10px; } }

/* the boon screen's "Your build" row: small and quiet, under the cards */
.build.mini { align-items: center; gap: 8px; margin-top: 14px; opacity: 0.85; animation: fadein 0.4s 0.35s both; }
.build.mini .sc { font-size: 11px; color: var(--dim); margin-right: 4px; }
.build.mini img { width: 30px; height: 30px; }
.build.mini figcaption { font-size: 11px; }
@media (max-height: 480px) { .build.mini { margin-top: 0; gap: 6px; } .build.mini img { width: 22px; height: 22px; } .build.mini figcaption { display: none; } }

/* ------------------------------------------------------------ phone controls (DOM, outside the stage) */
/* Light glass: a thin ring and a soft knob, quiet at rest so the arena stays the focus, brighter under the thumb. */
:root { --tcs: 1; --tca: 0.72; --dcs: 1.05; --dlift: 0; }
#touchControls { position: fixed; inset: 0; z-index: 4; pointer-events: none; animation: tcin 0.35s var(--ease-out) both; }
@keyframes tcin { from { opacity: 0; } }
/* the stick zone is the whole lower-left of the screen: touch anywhere there and the stick comes to your thumb */
#stickZone { position: absolute; left: 0; bottom: 0; width: 46%; height: 72%; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
#stickBase { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 18px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  width: calc(112px * var(--tcs)); height: calc(112px * var(--tcs)); border-radius: 50%; opacity: calc(var(--tca) * 0.75);
  background: radial-gradient(circle, rgba(70, 60, 150, 0.16) 0%, rgba(30, 24, 70, 0.22) 72%);
  box-shadow: inset 0 0 0 1.5px rgba(200, 190, 255, 0.42), inset 0 0 18px rgba(140, 125, 240, 0.12);
  transition: opacity 0.18s; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; margin: -19% 0 0 -19%; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, rgba(255, 244, 214, 0.95), rgba(255, 199, 90, 0.75) 60%, rgba(229, 154, 60, 0.55));
  box-shadow: 0 0 14px rgba(255, 190, 90, 0.45); }
#stickZone.active #stickBase { opacity: var(--tca); }
#stickZone:not(.active) #stickKnob { transition: transform 0.12s var(--ease-out); } /* springs home on release */
#dashBtn { position: absolute; right: calc(env(safe-area-inset-right, 0px) + 20px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--dlift) * 30vh);
  width: calc(96px * var(--dcs)); height: calc(96px * var(--dcs)); border-radius: 50%; border: 0; padding: 0; pointer-events: auto; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; opacity: calc(var(--tca) * 0.85); color: #fff1d0; font-weight: 750; letter-spacing: 0.14em;
  font-size: calc(13px * var(--dcs)); background: radial-gradient(circle at 50% 40%, rgba(255, 199, 90, 0.18), rgba(40, 26, 30, 0.28) 72%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, 0.35); transition: transform 0.08s, filter 0.15s, opacity 0.15s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
#dashBtn::before { content: ''; position: absolute; inset: -26px; border-radius: 50%; } /* a generous hit area beyond the drawn button */
#dashBtn .dash-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; /* the next flame filling, around the edge */
  background: conic-gradient(rgba(255, 210, 122, 0.95) calc(var(--fill, 1) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 91%, #000 93%); mask: radial-gradient(closest-side, transparent 91%, #000 93%); filter: drop-shadow(0 0 4px rgba(255, 190, 90, 0.7)); }
#dashBtn .dash-pips { display: flex; gap: 4px; }
#dashBtn .dash-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 230, 190, 0.22); }
#dashBtn .dash-pips i.on { background: #ffe6b0; box-shadow: 0 0 5px rgba(255, 200, 110, 0.9); }
#dashBtn.down { transform: scale(0.92); opacity: var(--tca); filter: brightness(1.3); }
#dashBtn.empty { filter: saturate(0.3) brightness(0.8); } /* no flame: clearly unavailable */
#dashBtn.empty .dash-text { opacity: 0.5; }
/* first-run labels under each control */
.tc-label { position: absolute; display: none; font-size: 12px; font-weight: 750; letter-spacing: 0.18em; text-transform: uppercase; color: #e8e2ff; text-shadow: 0 1px 3px #05030d;
  padding: 3px 8px; border-radius: 999px; background: rgba(14, 11, 34, 0.7); white-space: nowrap; pointer-events: none; }
#touchControls.learn .tc-label { display: block; animation: glowtext 1.6s ease-in-out infinite; }
.tc-move { left: calc(env(safe-area-inset-left, 0px) + 18px + 56px * var(--tcs)); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px + 112px * var(--tcs)); transform: translateX(-50%); }
/* left-handed: mirror both controls */
body.lefty #stickZone { left: auto; right: 0; }
body.lefty #stickBase { left: auto; right: calc(env(safe-area-inset-right, 0px) + 18px); }
body.lefty .tc-move { left: auto; right: calc(env(safe-area-inset-right, 0px) + 18px + 56px * var(--tcs)); transform: translateX(50%); }
body.lefty #dashBtn { right: auto; left: calc(env(safe-area-inset-left, 0px) + 20px); }
body.reduced #touchControls, body.reduced #touchControls.learn .tc-label { animation: none; }
/* the settings' touch group heading */
.set-h { margin: 6px 0 0; font-size: 12px; letter-spacing: var(--sc-track); text-transform: uppercase; color: var(--dim); text-align: left; }
.set-h span { text-transform: none; letter-spacing: 0; margin-left: 8px; opacity: 0.75; }
/* menus can scroll by touch even though the game surface blocks browser gestures */
.screen, .panel { touch-action: pan-y; }

/* ------------------------------------------------------------ a phone held upright: the tall stage (720x1280) */
/* HUD in two rows above the arena (which starts at y 140): lives + flames | score, then wave bar | combo */
body.tall #hud > div { height: 64px; }
body.tall #hud > .hud-left { left: 24px; top: 4px; }
body.tall #hud > .hud-score { right: 24px; top: 4px; }
body.tall #hud > .hud-wave { left: 24px; top: 62px; width: 260px; transform-origin: 0 40%; }
body.tall #hud > .hud-combo { right: 24px; top: 70px; }
body.tall #waveMod, body.tall #practice { top: 44px; text-align: left; }
body.tall #banner { top: 230px; }
body.tall #bannerTitle { font-size: 36px; letter-spacing: 0.1em; margin-right: -0.1em; }
body.tall #banner.surge #bannerTitle { font-size: 30px; }
body.tall #bannerSub { font-size: calc(18px * var(--k)); max-width: 640px; padding: 0 20px; }
body.tall #banner::before { width: 720px; }
body.tall #hint { top: 1016px; bottom: auto; max-width: 660px; white-space: normal; text-align: center; } /* just under the arena (y 1000), above the thumbs */
body.tall #toast { top: 150px; }
body.tall #achToast { top: 150px; }
/* the title, reflowed for a tall screen: one centred column, sized to the width */
body.tall #title { align-items: center !important; padding: 0 24px; }
body.tall .t-col { align-items: center; text-align: center; }
body.tall .wordmark { align-items: center; }
body.tall .wm-top { font-size: min(15vw, 84px); letter-spacing: 0.28em; margin-right: -0.28em; }
body.tall .wm-line { margin-left: auto; margin-right: auto; width: min(60vw, 260px); }
body.tall .wm-bot { font-size: min(5.2vw, 22px); }
body.tall .pitch { font-size: min(4.2vw, 17px); }
body.tall .t-menu { align-items: center; margin-top: 7vh; }
body.tall .tlink.play { min-height: 58px; padding: 0 44px; font-size: 21px; }
body.tall .tlink { min-height: 46px; }
body.tall #bestLine { justify-content: center; }
/* boon cards: stacked, compact rows (icon beside the text) so three fit a phone's height */
body.tall #cards { flex-direction: column; align-items: stretch; padding: 0 14px; gap: 10px; }
body.tall .card { max-width: none; flex: none; display: grid; grid-template-columns: 64px 1fr; grid-template-areas: 'img name' 'img lvl' 'img desc' 'img syn'; column-gap: 14px; row-gap: 2px; text-align: left; align-items: center; padding: 12px 14px; }
body.tall .card img { grid-area: img; width: 60px; height: 60px; }
body.tall .card::before { display: none; }
body.tall .card .key { display: none; }
body.tall .card .name { grid-area: name; font-size: 19px; }
body.tall .card .lvl { grid-area: lvl; }
body.tall .card .desc { grid-area: desc; font-size: 14px; }
body.tall .card.sel { transform: translateX(4px); }
body.tall .card .syn { grid-area: syn; font-size: 13px; }
/* results, upright: medal beside a score sized to the width; stats in two tidy columns; everything fits the height */
body.tall #results .panel.wide { padding: 18px 16px; gap: 10px; }
body.tall #results .res-head { gap: 12px; }
body.tall #resScore { font-size: min(13vw, 54px); }
body.tall .medal .m-art, body.tall .medal img { width: 52px; height: 52px; }
body.tall .medal .m-text b { font-size: 12px; white-space: nowrap; }
body.tall .medal .m-text span { font-size: 11px; }
body.tall #resBest { font-size: 14px; margin: 0; }
body.tall #resStats { font-size: 13px; gap: 3px 10px; white-space: nowrap; padding: 10px 12px; border-radius: var(--r-m); background: rgba(26, 20, 52, 0.5); border: 1px solid var(--line); margin: 0; }
body.tall #resMoment { font-size: 15px; padding: 8px 12px; }
body.tall #resTip { font-size: 13px; padding: 7px 10px 7px 26px; }
body.tall #resTip::before { top: 12px; left: 10px; }
body.tall #resUnlocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 13px; }
body.tall #resUnlocks .ach { margin: 0; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(255, 199, 90, 0.1); border: 1px solid rgba(255, 199, 90, 0.35); gap: 6px; }
body.tall #resUnlocks .ach i { width: 7px; height: 7px; }
body.tall #resNext .goal { font-size: 13px; }
body.tall #againBtn { min-height: 54px; font-size: 20px; }
body.tall #resTitle { min-height: 44px; }
/* settings, upright: compact rows, one toggle per row */
body.tall #settings .panel.wide { padding: 16px; gap: 8px; }
body.tall .sliders label { font-size: 15px; min-height: 40px; }
body.tall .toggles { grid-template-columns: 1fr; gap: 6px; }
body.tall .toggle { min-height: 44px; font-size: 15px; }
body.tall .set-h span { display: block; margin: 2px 0 0; }
/* the touch group's heading spans the row; short landscape phones get tighter rows so menus fit */
.set-h { grid-column: 1 / -1; }
@media (max-height: 480px) {
  .sliders label { min-height: 34px; }
  #settings .panel.wide { padding-top: 10px; padding-bottom: 10px; gap: 4px; }
  .toggle { min-height: 40px; }
  #results .panel.wide { padding-top: 8px; padding-bottom: 8px; }
  .res-main, .res-side { gap: 4px; }
}

/* phones only: one quiet line on the title about the two thumb controls (mirrored for left-handed play) */
.t-howto { margin: 14px 0 0; font-size: 13px; font-weight: 550; letter-spacing: 0.04em; color: rgba(200, 195, 240, 0.6); }
body.lefty .t-howto { font-size: 0; }
body.lefty .t-howto::after { content: 'Right thumb steers · left thumb dashes'; font-size: 13px; }

/* a short upright phone (e.g. iPhone SE): no room under the arena, so the hint sits at the arena's top edge instead */
body.tall:not(.roomy) #hint { top: 150px; }


/* ---- shared panels and headings: one accent bar, one heading style */
.panel { border-top: 3px solid rgba(111, 231, 255, 0.55); }
h2.eyebrow { color: var(--blast); letter-spacing: 0.32em; }
.set-h { color: #b9c6ff; font-weight: 750; }

/* ---- Style screen */
.style-panel { width: min(820px, 100%) !important; gap: 10px; }
.prism-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 8px; font-size: 16px; color: #dfe8ff; }
.prism-line b { font-size: 22px; color: var(--blast); }
.prism-how { flex-basis: 100%; font-size: 12px; color: var(--dim); }
i.prism { display: inline-block; width: 14px; height: 14px; transform: rotate(45deg); background: linear-gradient(135deg, #e9fdff, var(--blast) 55%, var(--blast-deep)); box-shadow: 0 0 10px rgba(111, 231, 255, 0.8); }
.style-prev { position: relative; height: 120px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); background-size: cover; background-position: center; }
.style-prev::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; background: var(--tint, #6d70a2); }
.style-prev .sp-trail { position: absolute; z-index: 1; left: 6%; top: 52%; width: 70%; height: 12px; border-radius: 12px; transform: rotate(-8deg); transform-origin: right;
  background: linear-gradient(90deg, transparent, var(--sw)); box-shadow: 0 0 18px var(--sw); animation: sptrail 2.6s ease-in-out infinite; }
.style-prev.rainbow .sp-trail { background: linear-gradient(90deg, transparent, #ff6b6b, #ffd36b, #7dff9e, #6bd8ff, #b78bff, #ff6bd0); box-shadow: 0 0 18px #b78bff; }
.style-prev .sp-wisp { position: absolute; z-index: 1; left: 74%; top: 34%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff, #ffd27a 60%, #ff9f3a); box-shadow: 0 0 22px #ffd27a; animation: spwisp 2.6s ease-in-out infinite; }
@keyframes sptrail { 50% { transform: rotate(-8deg) scaleX(0.86); } }
@keyframes spwisp { 50% { translate: -6px 4px; } }
.style-prev span { position: absolute; z-index: 1; left: 12px; bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #e8ecff; text-shadow: 0 1px 3px #05030d; }
body.reduced .style-prev .sp-trail, body.reduced .style-prev .sp-wisp { animation: none; }
/* background art for previews and cards: the arena floor under a glow in each background's own colour */
.bg-auto, .bg-garden { background-image: radial-gradient(ellipse at 70% 30%, rgba(140, 150, 255, 0.45), transparent 60%), url('assets/art/arena_floor.png'); --tint: #8a8fd8; }
.bg-ember { background-image: radial-gradient(ellipse at 30% 80%, rgba(255, 130, 70, 0.5), transparent 60%), url('assets/art/arena_floor_ember.png'); --tint: #e0907a; }
.bg-orbit { background-image: radial-gradient(ellipse at 60% 40%, rgba(150, 120, 255, 0.5), transparent 55%), url('assets/art/arena_floor_astral.png'); --tint: #9f8cff; }
.bg-nebula { background-image: radial-gradient(ellipse at 35% 45%, rgba(255, 110, 180, 0.6), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(190, 90, 255, 0.4), transparent 50%), url('assets/art/arena_floor_astral.png'); --tint: #ff8ec4; }
.bg-aurora { background-image: linear-gradient(170deg, transparent 20%, rgba(80, 255, 190, 0.45) 40%, rgba(80, 200, 255, 0.3) 55%, transparent 75%), url('assets/art/arena_floor.png'); --tint: #6fe0c8; }
.style-prev::after, .sty .bgthumb::after { mix-blend-mode: screen !important; opacity: 0.22; }
.sty.trail { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; }
.sty.trail .tg { grid-column: 2; margin: 0; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sty { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border-radius: 12px; text-align: left; cursor: pointer;
  background: var(--btn); border: 1.5px solid rgba(140, 125, 230, 0.35); color: var(--text); transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.sty.bg { flex-direction: column; align-items: stretch; gap: 4px; }
.sty .nm { font-weight: 700; font-size: 14px; }
.sty .tg { margin-left: auto; font-size: 11px; font-weight: 750; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; }
.sty.bg .tg { margin-left: 0; }
.sty .bgthumb { display: block; height: 52px; border-radius: 8px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.sty .bgthumb::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; background: var(--tint); }
.sty .bgthumb.bg-auto::before { content: 'AUTO'; position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: #fff; text-shadow: 0 1px 3px #000; }
.sty:hover, .sty:focus-visible { border-color: rgba(111, 231, 255, 0.7); background: var(--btn-hover); outline: none; }
.sty:focus-visible { box-shadow: 0 0 0 2px var(--blast); }
.sty:active { transform: scale(0.97); }
.sty.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 16px rgba(255, 199, 90, 0.25); }
.sty.sel .tg { color: var(--gold); }
.sty.sel .tg::before { content: '✓ '; }
.sty.locked .nm { opacity: 0.8; }
.sty.locked .tg { color: var(--blast); }
.sty.locked:not(.armed) .tg:not(:empty)::before { content: ''; }
.sty.locked .sw, .sty.locked .bgthumb { filter: saturate(0.5) brightness(0.8); }
.sty.armed { border-color: var(--blast); background: rgba(111, 231, 255, 0.12); animation: armpulse 1s ease-in-out infinite; }
.sty.armed .tg { color: #fff; }
@keyframes armpulse { 50% { box-shadow: 0 0 0 3px rgba(111, 231, 255, 0.35); } }
body.reduced .sty.armed { animation: none; }
.style-msg { min-height: 20px; margin: 0; font-size: 14px; font-weight: 650; color: #ffe2a6; text-align: center; }
/* the rainbow swatch */
.sty .sw[style*="conic-gradient"] { box-shadow: 0 0 10px #b78bff; }

/* ---- HUD presets segmented control */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; grid-column: 1 / -1; }
.seg button { min-height: 44px; border-radius: 12px; border: 1.5px solid rgba(140, 125, 230, 0.35); background: var(--btn); color: var(--text); font-weight: 700; cursor: pointer; }
.seg button:hover, .seg button:focus-visible { border-color: rgba(111, 231, 255, 0.7); outline: none; }
.seg button:focus-visible { box-shadow: 0 0 0 2px var(--blast); }
.seg button.on { border-color: var(--gold); color: #ffe2a6; box-shadow: inset 0 0 0 1px var(--gold); }

/* ---- HUD presets: Classic (default), Compact (tighter, no best line), Minimal (the essentials only) */
#hud { opacity: var(--hud-alpha, 1); }
body.hud-compact #best, body.hud-minimal #best { display: none; }
body.hud-compact #score { font-size: 24px; }
body.hud-compact .hud-left { gap: 10px; }
body.hud-compact .life { width: 24px; height: 18px; }
body.hud-compact .pip { width: 15px; height: 20px; }
body.hud-minimal #comboLabel, body.hud-minimal .combo-side .bar, body.hud-minimal #waveMod, body.hud-minimal #practice { display: none; }
body.hud-minimal .combo-side { width: auto; }
body.hud-minimal .life { width: 22px; height: 16px; }
body.hud-minimal .pip { width: 14px; height: 19px; }
body.hud-minimal #score { font-size: 22px; }
body.hud-minimal .hud-wave-top #waveLabel { opacity: 0.7; }
.style-panel > * { flex-shrink: 0; } /* the panel scrolls on small screens: keep the preview at full height */
.style-panel #styleBack { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 18px var(--bg, #0d0a1c); }

/* ================================================================ Phase 1: Multiplayer, Local Party, profile, Local Records
   Same language as the rest: dark panels, one accent bar, gold = selected, cyan = info. Every player has a colour, a shape
   and a number (P1 ● amber, P2 ▲ azure, P3 ■ rose, P4 ◆ mint), so identity never rests on colour alone. */
.st-p1 { --pc: #ffc75a; } .st-p2 { --pc: #73e6ff; } .st-p3 { --pc: #ff86b0; } .st-p4 { --pc: #6ef2a8; }
.shp { display: inline-block; width: 11px; height: 11px; background: var(--pc); flex: none; }
.shp-circle { border-radius: 50%; }
.shp-triangle { clip-path: polygon(50% 0, 100% 90%, 0 90%); }
.shp-square { border-radius: 2px; transform: scale(0.85); }
.shp-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.lb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1.5px solid var(--pc); color: var(--pc); font-weight: 850; font-size: 13px; letter-spacing: 0.04em; background: rgba(9, 7, 22, 0.6); white-space: nowrap; }

/* ---- title: the Multiplayer entry and the profile chip (top-right) */
.mp-ico { position: relative; width: 22px; height: 14px; flex: none; }
.mp-ico b { position: absolute; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--blast); box-shadow: 0 0 8px rgba(111, 231, 255, 0.7); }
.mp-ico b + b { left: 9px; background: #ff86b0; box-shadow: 0 0 8px rgba(255, 134, 176, 0.7); }
.profile-chip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 2; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 16px 6px 7px; border-radius: 999px; background: rgba(18, 14, 40, 0.82); border: 1px solid var(--line); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color 0.15s, transform 0.12s, background 0.15s; animation: fadein 0.5s var(--ease-out) 0.2s both; }
.profile-chip:hover, .profile-chip:focus-visible { border-color: rgba(111, 231, 255, 0.7); background: rgba(28, 22, 60, 0.9); outline: none; }
.profile-chip:focus-visible { box-shadow: 0 0 0 2px var(--blast); }
.profile-chip:active { transform: scale(0.97); }
.pc-av { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #fff6dc, #ffc75a 55%, #b8661c); box-shadow: 0 0 12px rgba(255, 199, 90, 0.45); flex: none; }
.pc-txt { display: flex; flex-direction: column; line-height: 1.15; }
.pc-txt b { font-size: 14px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-txt span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

/* ---- mode select */
.modes-panel { width: min(860px, 100%) !important; }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mode-card { position: relative; display: grid; grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left;
  min-height: 112px; padding: 14px 16px; border-radius: 16px; background: var(--btn); border: 1.5px solid rgba(140, 125, 230, 0.35); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s; }
.mode-card b { grid-column: 2; font-size: 18px; font-weight: 800; }
.mode-card .mc-n { grid-column: 2; font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blast); }
.mode-card .mc-d { grid-column: 1 / -1; font-size: 13px; color: var(--dim); margin-top: 6px; line-height: 1.35; }
.mode-card .mc-go { grid-column: 3; grid-row: 1 / 3; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1404; background: linear-gradient(180deg, #ffe6a6, #ffb24a); }
.mode-card .mc-soon { grid-column: 3; grid-row: 1 / 3; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); border: 1px dashed rgba(161, 157, 204, 0.5); text-align: center; }
.mc-ico { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 14px; position: relative; background: rgba(9, 7, 22, 0.6); border: 1px solid var(--line); }
.mc-ico::before, .mc-ico::after { content: ''; position: absolute; border-radius: 50%; }
.mc-solo::before { inset: 13px; background: radial-gradient(circle at 40% 36%, #fff6dc, #ffc75a 60%, #b8661c); }
.mc-party::before { left: 8px; top: 9px; width: 14px; height: 14px; background: #ffc75a; box-shadow: 16px 0 0 #73e6ff, 0 15px 0 #ff86b0, 16px 15px 0 #6ef2a8; }
.mc-friends::before { left: 10px; top: 14px; width: 16px; height: 16px; border: 3px solid #8e86c4; }
.mc-friends::after { left: 21px; top: 14px; width: 16px; height: 16px; border: 3px solid #8e86c4; }
.mc-ranked::before { left: 12px; top: 9px; width: 22px; height: 26px; border-radius: 4px 4px 11px 11px; border: 3px solid #8e86c4; }
button.mode-card:hover, button.mode-card:focus-visible { border-color: rgba(111, 231, 255, 0.75); background: var(--btn-hover); outline: none; transform: translateY(-2px); }
button.mode-card:focus-visible { box-shadow: 0 0 0 2px var(--blast); }
button.mode-card:active { transform: scale(0.98); }
.mode-card.hot { border-color: rgba(255, 199, 90, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 199, 90, 0.25), 0 0 24px rgba(255, 170, 70, 0.12); }
.mode-card.soon { cursor: default; opacity: 0.62; border-style: dashed; }
.mode-net { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; font-size: 13px; color: var(--dim); }
.mode-net i { width: 8px; height: 8px; border-radius: 50%; background: #6ef2a8; box-shadow: 0 0 8px #6ef2a8; flex: none; }

/* ---- Local Party lobby */
.lobby-panel { width: min(720px, 100%) !important; }
.lobby-sub { margin: -4px 0 2px; }
.lobby-count { grid-template-columns: repeat(3, 1fr); }
.lobby-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: grid; grid-template-columns: auto 1fr minmax(150px, auto) 44px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--btn); border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); text-align: left; }
.lb-row.joined { animation: joinin 0.45s var(--ease-out) both; }
@keyframes joinin { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.lb-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-own { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.lb-name input, .pf-name input { width: 100%; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(9, 7, 22, 0.7); color: var(--text); font: inherit; font-weight: 650; font-size: 15px; }
.lb-name input:focus, .pf-name input:focus { outline: none; border-color: var(--blast); box-shadow: 0 0 0 2px rgba(111, 231, 255, 0.35); }
.lb-ctrl { min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(9, 7, 22, 0.55); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lb-ctrl::after { content: '  ⇄'; color: var(--dim); }
.lb-ctrl em { font-style: normal; color: #ffb2a6; font-weight: 650; }
.lb-ctrl:hover, .lb-ctrl:focus-visible { border-color: var(--pc); outline: none; }
.lb-ctrl:focus-visible { box-shadow: 0 0 0 2px var(--pc); }
.lb-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--dim); font-size: 15px; cursor: pointer; }
.lb-x:hover, .lb-x:focus-visible { color: #ffb2a6; border-color: #ff8f7a; outline: none; }
.lobby-row { display: flex; justify-content: center; }
.small-btn { min-height: 44px; padding: 6px 20px; font-size: 14px; }
.lobby-note { min-height: 20px; margin: 0; font-size: 13px; color: var(--dim); }
.lobby-note.bad { color: #ffb2a6; font-weight: 650; }
.seg button { font: inherit; }

/* ---- profile */
.profile-panel { width: min(640px, 100%) !important; }
.pf-name { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; font-weight: 700; color: var(--dim); }
.pf-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; padding: 2px; }
.profile-panel > *, .lobby-panel > *, .modes-panel > * { flex-shrink: 0; } /* these panels scroll as a whole on small screens */
.pf-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 12px; border-radius: 12px; text-align: left; cursor: pointer;
  background: var(--btn); border: 1.5px solid rgba(140, 125, 230, 0.35); color: var(--text); font: inherit; }
.pf-t b { font-size: 14px; }
.pf-t span { font-size: 11px; color: var(--dim); line-height: 1.3; }
.pf-t.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pf-t.on span { color: var(--gold); font-weight: 700; }
.pf-t.locked b { opacity: 0.6; }
.pf-t:hover, .pf-t:focus-visible { border-color: rgba(111, 231, 255, 0.7); outline: none; }
.pf-t:focus-visible { box-shadow: 0 0 0 2px var(--blast); }

/* ---- Local Records board */
.rec-local { margin: -4px 0 0; }
.rec-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; text-align: left; }
.rb-cat { padding: 8px 12px; border-radius: 12px; background: rgba(9, 7, 22, 0.45); border: 1px solid var(--line); }
.rb-cat h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blast); }
.rb-cat h3 span { color: var(--dim); font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.rb-cat ol { list-style: none; margin: 0; padding: 0; }
.rb-cat li { display: grid; grid-template-columns: 18px auto auto 1fr; gap: 8px; align-items: baseline; font-size: 13px; padding: 2px 0; }
.rb-i { color: var(--dim); font-weight: 800; } .rb-s { font-weight: 800; color: #ffe2a6; font-variant-numeric: tabular-nums; } .rb-w { color: var(--dim); font-size: 12px; }
.rb-n { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.rb-empty { display: block !important; color: var(--dim); font-size: 12px; }

/* ---- results: the team tally */
.res-team { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(9, 7, 22, 0.45); border: 1px solid var(--line); text-align: left; }
.rt-h { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blast); }
.rt-row { display: grid; grid-template-columns: auto 1fr repeat(4, auto); gap: 8px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.rt-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-key { margin: 2px 0 0; font-size: 11px; color: var(--dim); }

/* ---- in-play: co-op HUD chips and the boss bar's phase marks */
.team-hud { display: flex; gap: 8px; }
.tm { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(9, 7, 22, 0.6); border: 1.5px solid var(--pc); }
.tm b { font-size: 12px; color: var(--pc); letter-spacing: 0.04em; }
.tm-f { display: flex; gap: 3px; }
.tm-f i { width: 6px; height: 11px; border-radius: 3px; background: rgba(255, 230, 190, 0.18); }
.tm-f i.on { background: var(--pc); box-shadow: 0 0 6px var(--pc); }
.tm.hurt { animation: tmhurt 0.5s ease-in-out 3; }
@keyframes tmhurt { 50% { border-color: #ff8f7a; background: rgba(255, 90, 90, 0.25); } }
body.reduced .tm.hurt { animation: none; border-color: #ff8f7a; }
.boss .bar { position: relative; overflow: visible; height: 6px; }
.boss .bar::before, .boss .bar::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 2px; background: #ffe6f4; border-radius: 1px; left: var(--n1, -9%); opacity: 0.85; z-index: 1; }
.boss .bar::after { left: var(--n2, -9%); }

/* ---- Local Party touch stations: each player's stick + Dash button in their own corner or edge band */
#partyControls { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.station { position: absolute; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; --sz: calc(84px * var(--tcs, 1)); }
.station .st-zone { position: relative; width: calc(var(--sz) + 24px); height: calc(var(--sz) + 24px); display: grid; place-items: center; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.st-base { width: var(--sz); height: var(--sz); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(9, 7, 22, 0.35), rgba(9, 7, 22, 0.7)); border: 2px solid color-mix(in srgb, var(--pc) 70%, transparent); opacity: var(--tca, 0.8); }
.st-knob { width: 44%; height: 44%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--pc) 70%); box-shadow: 0 0 12px var(--pc); }
.st-zone.active .st-base { opacity: 1; }
.st-zone:not(.active) .st-knob { transition: transform 0.12s var(--ease-out); }
.st-dash { position: relative; width: calc(var(--sz) * 0.78); height: calc(var(--sz) * 0.78); border-radius: 50%; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 2px solid var(--pc); background: rgba(9, 7, 22, 0.72); color: var(--pc); font: inherit; opacity: var(--tca, 0.85); }
.st-dash::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
.st-dash .st-ring { position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(var(--pc) calc(var(--fill, 1) * 360deg), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); opacity: 0.8; }
.st-dash .st-tag { font-size: 12px; font-weight: 850; letter-spacing: 0.06em; }
.st-pips { display: flex; gap: 3px; } .st-pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .st-pips i.on { background: var(--pc); }
.st-dash.down { transform: scale(0.9); filter: brightness(1.35); opacity: 1; }
.st-dash.empty { filter: saturate(0.35) brightness(0.8); }
.station.flip { transform: rotate(180deg); } /* across the table: the station faces its player */
/* sideways: corners, in the columns beside the arena */
.seat-bl, .seat-tl { left: max(6px, env(safe-area-inset-left)); width: calc(var(--col-l) - max(6px, env(safe-area-inset-left))); flex-direction: column-reverse; }
.seat-br, .seat-tr { right: max(6px, env(safe-area-inset-right)); width: calc(var(--col-r) - max(6px, env(safe-area-inset-right))); flex-direction: column-reverse; }
.seat-bl, .seat-br { bottom: max(6px, env(safe-area-inset-bottom)); height: 50%; justify-content: flex-start; }
.seat-tl, .seat-tr { top: max(6px, env(safe-area-inset-top)); height: 50%; justify-content: flex-start; }
/* upright, two players: one at each end */
.seat-bottom { left: 0; right: 0; bottom: max(4px, env(safe-area-inset-bottom)); height: var(--band-b); justify-content: space-between; padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); }
.seat-top { left: 0; right: 0; top: max(4px, env(safe-area-inset-top)); height: var(--band-t); justify-content: space-between; padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right)); }
body.reduced .lb-row.joined { animation: none; }
/* Local Party on touch: the HUD steps inside the corners (sideways) or below the top player's band (upright) */
body.party-touch:not(.tall) #hud > .hud-left { left: 210px; gap: 10px; }
body.party-touch:not(.tall) #hud > .hud-score { right: 210px; }
body.party-touch:not(.tall) #hud > .hud-combo { right: 330px; }
body.party-touch:not(.tall) #hud > .hud-wave { left: 500px; width: 280px; }
body.party-touch.tall #hud { transform: translateY(var(--hud-y, 0px)); }
body.need-land #rotate { display: flex; }
body.coop .hud-left .team-hud { margin-left: 4px; }
@media (max-width: 640px) {
  .mode-grid, .rec-board { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: auto 1fr 44px; }
  .lb-row .lb-ctrl { grid-column: 1 / -1; }
  .lb-row .lb-x, .lb-row .lb-x-gap { grid-column: 3; grid-row: 1; }
  .profile-chip { padding-right: 12px; }
  .pc-txt b { max-width: 110px; }
}
/* Local Party: the team's lives row is smaller (up to six), and on touch each Dash button already shows its player's flames */
body.coop .life { width: 24px; height: 18px; }
body.party-touch #teamHud { display: none !important; }
body.party-touch:not(.tall) #hud > .hud-wave { left: 480px; width: 300px; }



/* ---- menus over play: a calmer, blurred backdrop; the in-play banner and hint step out of the way */
.dim-bg { background: radial-gradient(ellipse at 50% 40%, rgba(16, 12, 40, 0.72), rgba(4, 3, 12, 0.9)); backdrop-filter: blur(7px) saturate(0.85); -webkit-backdrop-filter: blur(7px) saturate(0.85); }
body:has(.screen.dim-bg:not([hidden])) #banner, body:has(.screen.dim-bg:not([hidden])) #toast { opacity: 0 !important; transition: opacity 0.15s; }



/* ================================================================ Phase 2: Friends Party (online)
   Same family as the Local Party screens: dark panels, P1–P4 colours with shapes, gold = selected / host, mint = ready
   and online, rose = reconnecting / problems. Motion: members pop in, ready ticks bounce, the countdown pulses. */
.mc-net { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 750; color: var(--dim); }
.mc-net i, .net-status i { width: 8px; height: 8px; border-radius: 50%; background: #8e86c4; flex: none; }
.net-online i { background: #6ef2a8; box-shadow: 0 0 8px #6ef2a8; } .net-online { color: #a8f5cc; }
.net-offline i, .net-unconfigured i { background: #ff9a8a; } .net-offline, .net-unconfigured { color: #ffc4b8; }
.net-checking i { animation: pulsedot 1s ease-in-out infinite; }
@keyframes pulsedot { 50% { opacity: 0.3; } }
.friends-panel { width: min(720px, 100%) !important; }
.friends-panel > *, .plobby-panel > *, .pjoin-panel > * { flex-shrink: 0; }
.fp-sub { margin: -4px 0 0; }
.net-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 650; min-height: 22px; }
.fp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-big { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 176px; padding: 18px 14px; border-radius: 18px;
  background: var(--btn); border: 1.5px solid rgba(140, 125, 230, 0.35); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: border-color 0.15s, transform 0.12s, background 0.15s; }
button.fp-big:hover:not(:disabled), button.fp-big:focus-visible { border-color: rgba(255, 199, 90, 0.75); transform: translateY(-2px); outline: none; background: var(--btn-hover); }
button.fp-big:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.fp-big:disabled, .net-down .fp-join { opacity: 0.5; cursor: default; }
.fp-big b { font-size: 18px; }
.fp-big > span:not(.fp-ico) { font-size: 13px; color: var(--dim); }
.fp-join { cursor: default; }
.fp-ico { width: 44px; height: 44px; border-radius: 14px; position: relative; background: rgba(9, 7, 22, 0.6); border: 1px solid var(--line); }
.fp-create::before { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: var(--gold); }
.fp-joinic::before { content: ''; position: absolute; left: 11px; top: 13px; width: 20px; height: 16px; border: 3px solid var(--blast); border-radius: 4px; }
.fp-codein { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.fp-codein input { min-height: 46px; text-align: center; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: 0.18em; color: #fff; text-transform: uppercase;
  background: rgba(9, 7, 22, 0.75); border: 1.5px solid var(--line); border-radius: 12px; padding: 4px 8px; }
.fp-codein input:focus { outline: none; border-color: var(--blast); box-shadow: 0 0 0 2px rgba(111, 231, 255, 0.35); }
.fp-codein input::placeholder { color: rgba(161, 157, 204, 0.4); }
.style-msg.bad { color: #ffc4b8; }
.pjoin-panel { width: min(460px, 100%) !important; }
.pj-host { margin: 0; font-size: 20px; } .pj-host b { color: var(--gold); }
.pj-code { margin: 0; font-size: 30px; font-weight: 850; letter-spacing: 0.16em; color: #fff; }
.pj-info { margin: 0; color: var(--blast); font-weight: 700; font-size: 14px; }

.plobby-panel { width: min(760px, 100%) !important; }
.pl-head { display: flex; align-items: center; justify-content: center; position: relative; }
.pl-conn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 750; color: var(--dim); }
.pl-conn::before { content: '●  '; }
.pl-conn.good::before { color: #6ef2a8; } .pl-conn.fair::before { color: #ffd166; } .pl-conn.poor::before { color: #ff8f7a; }
.pl-invite { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 16px; background: rgba(9, 7, 22, 0.5); border: 1px solid var(--line); text-align: left; }
.pl-qr { width: 112px; height: 112px; border-radius: 10px; background: #fff; padding: 4px; flex: none; animation: popin 0.4s var(--ease-back) both; }
.pl-codebox { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.pl-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pl-code { font-size: clamp(26px, 5vw, 38px); font-weight: 850; letter-spacing: 0.14em; color: #fff; line-height: 1; user-select: all; -webkit-user-select: all; }
.pl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-warn { font-size: 11.5px; color: var(--dim); line-height: 1.35; }
.pl-members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-m { display: grid; grid-template-columns: auto 1fr auto 40px; grid-template-areas: 'badge name state rep' 'badge tags tags rep'; align-items: center; column-gap: 8px; row-gap: 2px;
  min-height: 58px; padding: 6px 8px 6px 10px; border-radius: 14px; background: var(--btn); border: 1.5px solid color-mix(in srgb, var(--pc, #8e86c4) 45%, transparent); text-align: left; transition: border-color 0.2s, background 0.2s; }
.pl-m .lb-badge { grid-area: badge; }
.pl-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.pl-m > .pl-tag { grid-row: 2; }
.pl-m > .pl-tag.host { grid-area: tags; justify-self: start; }
.pl-m > .pl-tag.you { grid-area: tags; justify-self: start; }
.pl-m > .pl-tag.host + .pl-tag.you { margin-left: 64px; }
.pl-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; }
.pl-tag.host { color: #2a1404; background: linear-gradient(180deg, #ffe6a6, #ffb24a); }
.pl-tag.you { color: var(--blast); border: 1px solid rgba(111, 231, 255, 0.5); }
.pl-state { grid-area: state; font-size: 12px; font-weight: 750; color: var(--dim); white-space: nowrap; }
.pl-state.ok { color: #6ef2a8; animation: readypop 0.35s var(--ease-back); } .pl-state.away { color: #ffb2a6; }
@keyframes readypop { from { transform: scale(0.6); opacity: 0; } }
.pl-m.ready { background: color-mix(in srgb, #6ef2a8 7%, var(--btn)); }
.pl-m.away { opacity: 0.7; border-style: dashed; }
.pl-m.joined { animation: joinin 0.45s var(--ease-out) both; }
.pl-m.empty { grid-template-columns: auto 1fr; grid-template-areas: none; opacity: 0.55; border-style: dashed; }
.pl-wait { font-size: 13px; color: var(--dim); }
.pl-report { grid-area: rep; width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--dim); cursor: pointer; font-size: 15px; }
.pl-report:hover, .pl-report:focus-visible { border-color: #ff8f7a; color: #ffb2a6; outline: none; }
.pl-mode { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pl-modes { grid-template-columns: 1fr 1fr; }
.pl-modes button { display: flex; flex-direction: column; line-height: 1.2; padding: 6px; }
.pl-modes small { font-size: 11px; color: var(--dim); font-weight: 600; }
.pl-modes button:disabled { opacity: 0.45; cursor: default; }
.pl-count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(5, 3, 15, 0.82); z-index: 3; }
.pl-count b { font-size: 120px; font-weight: 900; color: var(--gold); text-shadow: 0 0 40px rgba(255, 190, 90, 0.6); animation: countpulse 1s ease-in-out infinite; }
.pl-count span { font-size: 15px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
@keyframes countpulse { 0% { transform: scale(1.25); opacity: 0.4; } 30% { transform: scale(1); opacity: 1; } }
body.reduced .pl-count b, body.reduced .pl-m.joined, body.reduced .pl-state.ok, body.reduced .net-checking i { animation: none; }
.net-chip { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 6; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 750; color: var(--dim);
  background: rgba(9, 7, 22, 0.7); border: 1px solid var(--line); pointer-events: none; }
.net-chip.good { color: #a8f5cc; } .net-chip.fair { color: #ffe2a6; } .net-chip.poor { color: #ffb2a6; }
.net-lost { position: fixed; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; background: rgba(5, 3, 15, 0.7); backdrop-filter: blur(4px); padding: 16px; }
.net-lost[hidden] { display: none; }
.net-lost .panel { width: min(420px, 100%); }
.ld-spin.small { transform: scale(0.6); margin: -10px auto; }
body.online #pause [data-act=restart] { display: none; }
body.online #pause [data-act=title]::after { content: ' (leave party)'; font-weight: 500; color: var(--dim); }
body.online #pause .panel::after { content: 'The party keeps playing while you are paused.'; font-size: 12px; color: var(--dim); }
.rb-online { grid-column: 1 / -1; border-color: rgba(111, 231, 255, 0.35); }
@media (max-width: 640px) {
  .fp-actions, .pl-members { grid-template-columns: 1fr; }
  .fp-big { min-height: 130px; }
  .pl-invite { flex-direction: column; text-align: center; }
  .pl-codebox { align-items: center; }
  .pl-qr { width: 96px; height: 96px; }
}
/* co-op on a computer: the team's lives on top, each player's flames below, so four players fit beside the wave panel */
body.coop:not(.party-touch) #hud > .hud-left { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 3px; }
body.coop:not(.party-touch) #hud > .hud-left .team-hud { margin-left: 0; gap: 5px; }
body.coop:not(.party-touch) .tm { padding: 1px 6px 1px 5px; }
body.coop:not(.party-touch) .life { width: 20px; height: 15px; }
/* the smallest phones (360 px): the party cards and the code box shrink to fit instead of nudging the panel sideways */
.fp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-codein input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .fp-actions { grid-template-columns: minmax(0, 1fr); } .fp-big { padding: 14px 10px; } }
/* phones held sideways (solo): the wave panel steps right so the round Pause button has its own gap in the HUD band */
body.mobile:not(.tall):not(.party-touch) #hud > .hud-wave { left: 542px; width: 255px; }
/* the smallest phones held sideways: the combo keeps its big ×N but drops its label and bar, so the HUD band fits */
body.tight #hud > .hud-combo .combo-side { display: none; }
body.tight:not(.party-touch) #hud > .hud-wave { left: 552px; }

/* ================================================================ the Lumen title, with the DASH BLAST name
   One large, airy gold word, a fine rule with a travelling glint, the second word in wide pale caps. */
.wm-top { font-size: clamp(58px, 13vh, 112px); }
.wm-bot { font-size: clamp(22px, 4.6vh, 38px); font-weight: 500; letter-spacing: 0.62em; margin-right: -0.62em; color: #d6ecff;
  text-shadow: 0 0 18px rgba(120, 200, 255, 0.35); opacity: 0.92; }
.wordmark { animation: fadein 1.1s var(--ease-out) both; }
.wm-top { animation: wmglow 6s ease-in-out infinite; }
@keyframes wmglow { 50% { filter: drop-shadow(0 0 26px rgba(255, 190, 90, 0.45)); } }
body.reduced .wm-top, body.reduced .wordmark { animation: none; }
body.tall .wordmark { align-items: center; } body.tall .wm-top { font-size: min(19vw, 96px); } body.tall .wm-bot { font-size: min(7.5vw, 32px); }
.tlink .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; background: var(--sw, #ffc75a); box-shadow: 0 0 8px var(--sw, #ffc75a); }
.mp-ico { align-self: center; }



/* ================================================================ refurbish pass: every screen, one finish */
/* title wordmark: rises in, then a band of light sweeps the gold letters (it was stuck invisible) */
.wordmark { animation: rise 0.9s var(--ease-out) forwards; }
.wm-top { animation: wmshine 6s ease-in-out 1.2s infinite, wmglow 6s ease-in-out infinite; }
body.reduced .wordmark { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wordmark { animation: none; opacity: 1; } }

/* ---------------------------------------------------------------- loading: the night sky, the name, a comet */
#loading { background: radial-gradient(120% 85% at 50% 118%, #2b1e58 0%, #120d31 42%, #06050f 78%); overflow: hidden; gap: 0; transform: none !important; }
#loading.done { opacity: 0; transition: opacity 0.7s ease 0.2s; }
#loading.done .ld-core { opacity: 0; transform: scale(1.06); filter: blur(5px); transition: opacity 0.55s, transform 0.7s var(--ease-out), filter 0.55s; }
.ld-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0.75;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent), radial-gradient(1px 1px at 140px 80px, #dfe9ff 50%, transparent),
    radial-gradient(1.3px 1.3px at 90px 170px, #ffe9c4 50%, transparent), radial-gradient(1px 1px at 210px 220px, #cfd8ff 50%, transparent),
    radial-gradient(1.7px 1.7px at 250px 40px, #fff 50%, transparent), radial-gradient(1px 1px at 60px 240px, #fff 50%, transparent);
  background-size: 280px 260px; animation: ldDrift 50s linear infinite, ldTw 3.4s ease-in-out infinite; }
.ld-stars.far { background-size: 160px 150px; opacity: 0.35; animation: ldDrift2 90s linear infinite, ldTw 4.6s ease-in-out 1s infinite; }
@keyframes ldDrift { to { background-position: -280px 260px; } }
@keyframes ldDrift2 { to { background-position: -160px 150px; } }
@keyframes ldTw { 50% { opacity: 0.45; } }
.ld-comet { position: absolute; top: 16%; left: -260px; width: 240px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 140, 0.95)); filter: drop-shadow(0 0 6px #ffc75a);
  transform: rotate(16deg); animation: ldComet 3.4s cubic-bezier(.45, 0, .25, 1) 0.4s infinite; }
.ld-comet::after { content: ''; position: absolute; right: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 28%, rgba(255, 199, 90, 0.6) 55%, transparent 72%); }
@keyframes ldComet { 0% { transform: translate(0, 0) rotate(16deg); opacity: 0; } 8% { opacity: 1; } 55%, 100% { transform: translate(calc(100vw + 520px), 150px) rotate(16deg); opacity: 0; } }
.ld-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ld-word { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ld-top { font-size: clamp(56px, 13vh, 112px); font-weight: 300; letter-spacing: 0.34em; margin-right: -0.34em;
  background-image: linear-gradient(100deg, #e9a24a 0%, #ffd27a 38%, #fffaf0 50%, #ffd27a 62%, #e9a24a 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 190, 90, 0.4));
  animation: ldIn 0.9s var(--ease-out) both, wmshine 2.8s ease-in-out 0.5s infinite; }
.ld-rule { width: clamp(160px, 30vh, 260px); height: 1px; margin: clamp(10px, 2vh, 16px) 0; transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 130, 0.95), rgba(115, 242, 255, 0.55), transparent); animation: ldRule 1.1s var(--ease-out) 0.2s both; }
.ld-bot { font-size: clamp(20px, 4.2vh, 34px); font-weight: 500; letter-spacing: 0.62em; margin-right: -0.62em; color: #d6ecff;
  text-shadow: 0 0 18px rgba(120, 200, 255, 0.35); animation: ldIn 0.9s var(--ease-out) 0.25s both; }
@keyframes ldIn { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes ldRule { from { transform: scaleX(0); opacity: 0; } }
.ld-track { position: relative; width: 220px; height: 3px; border-radius: 3px; background: rgba(140, 125, 230, 0.2); overflow: hidden; animation: ldIn 0.9s var(--ease-out) 0.4s both; }
.ld-track::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent) -80px 0 / 80px 100% no-repeat; animation: ldGlint 1.4s linear infinite; }
@keyframes ldGlint { to { background-position: 300px 0; } }
#ldBar { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0.04); border-radius: 3px;
  background: linear-gradient(90deg, rgba(115, 242, 255, 0.7), #ffc75a); box-shadow: 0 0 10px rgba(255, 199, 90, 0.8); transition: transform 0.3s var(--ease-out); }
.ld-tip { margin: -12px 0 0; min-height: 1.2em; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(205, 198, 245, 0.6); animation: ldIn 0.9s var(--ease-out) 0.5s both; }
@media (prefers-reduced-motion: reduce) { .ld-stars, .ld-top, .ld-track::after { animation: none !important; } .ld-comet { display: none; } }

/* ---------------------------------------------------------------- panels: a crest on every heading, softly staged entrances */
.panel > h2.eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; animation: rise 0.45s var(--ease-out) 0.05s both; }
.panel > h2.eyebrow::before, .panel > h2.eyebrow::after { content: ''; flex: none; width: clamp(24px, 6vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 210, 140, 0.75)); }
.panel > h2.eyebrow::after { transform: scaleX(-1); margin-right: 0.42em; }
.panel > .row:last-child { animation: rise 0.45s var(--ease-out) 0.14s both; }
.panel { border-top-color: rgba(255, 210, 140, 0.28); }
body.reduced .panel > h2.eyebrow, body.reduced .panel > .row:last-child { animation: none; }
/* buttons: a glint crosses on hover, a soft gold bloom when pressed */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 210, 0.16) 48%, transparent 66%) -160% 0 / 200% 100% no-repeat; transition: background-position 0s; }
.btn:hover:not(:disabled)::after, .btn:focus-visible::after { background-position: 160% 0; transition: background-position 0.7s var(--ease-out); }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.18), 0 0 22px rgba(255, 190, 90, 0.14); }
body.reduced .btn::after { display: none; }

/* ---------------------------------------------------------------- settings: four tabs, values beside every slider */
#settings .panel.set-panel { width: min(680px, 100%); max-height: min(680px, 100%); overflow: hidden; gap: 14px; }
.set-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(6, 4, 18, 0.55); border: 1px solid var(--line); }
.set-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  color: var(--dim); font-size: 15px; font-weight: 600; cursor: pointer; transition: color 0.2s, background 0.3s var(--ease-out), box-shadow 0.3s; }
.set-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.set-tabs button[aria-selected=true] { color: #ffe6b0; background: linear-gradient(180deg, rgba(255, 199, 90, 0.26), rgba(255, 170, 70, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 210, 130, 0.55), 0 0 18px rgba(255, 190, 90, 0.18); }
.set-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ti { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ti-sound { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ti-display { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='12' rx='2' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 20h8M12 16v4' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ti-controls { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8h10a4 4 0 0 1 3.9 4.9l-1 4.3a2.2 2.2 0 0 1-3.8 1L14 16h-4l-2.1 2.2a2.2 2.2 0 0 1-3.8-1l-1-4.3A4 4 0 0 1 7 8z' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11v3M6.5 12.5h3' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E"); }
.ti-comfort { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.set-body { flex: 1 1 auto; min-height: min(330px, 46vh); overflow-y: auto; overscroll-behavior: contain; padding: 2px; text-align: left; touch-action: pan-y; }
.set-page { display: flex; flex-direction: column; gap: 12px; animation: pagein 0.35s var(--ease-out) both; }
@keyframes pagein { from { opacity: 0; transform: translateX(12px); } }
body.reduced .set-page { animation: none; }
.set-page .set-h { margin: 2px 0 -4px; }
.set-page .sliders { grid-template-columns: 1fr; gap: 8px; }
.set-page .sliders label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 250px) 50px; align-items: center; gap: 14px; min-height: 54px; padding: 4px 16px;
  border-radius: var(--r-m); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(140, 125, 230, 0.18); font-size: clamp(15px, 2.6vh, 17px); transition: border-color 0.2s, background 0.2s; }
.set-page .sliders label:hover, .set-page .sliders label:focus-within { border-color: rgba(255, 210, 140, 0.4); background: rgba(255, 210, 140, 0.04); }
.set-page input[type=range] { width: 100%; }
.sliders output { font-variant-numeric: tabular-nums; text-align: right; color: var(--gold); font-weight: 700; font-size: 15px; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(110, 95, 200, 0.55);
  background: linear-gradient(90deg, #f0a548, #ffd889) 0 0 / calc(var(--v, 0) * 100%) 100% no-repeat, #1f1942; }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f0a548, #ffd889); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: #1f1942; }
input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; transition: transform 0.15s var(--ease-back), box-shadow 0.2s;
  background: radial-gradient(circle at 38% 32%, #fffaf0 0 14%, #ffd27a 45%, #e59a3c); box-shadow: 0 0 0 4px rgba(255, 199, 90, 0.16), 0 0 12px rgba(255, 170, 60, 0.7); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fffaf0 0 14%, #ffd27a 45%, #e59a3c); box-shadow: 0 0 12px rgba(255, 170, 60, 0.7); }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 199, 90, 0.2), 0 0 16px rgba(255, 170, 60, 0.85); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }
/* switches: the knob slides across with a little overshoot */
.set-page .toggles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin: 0; }
.toggle { padding: 8px 14px; min-height: 54px; font-size: clamp(15px, 2.6vh, 17px); transition: border-color 0.2s, background 0.2s; }
.toggle span small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--dim); }
.toggle::after { width: 44px; height: 24px; border-radius: 12px; background: #1f1942; background-image: none; box-shadow: inset 0 0 0 1px #5a4f9a; transition: background-color 0.25s, box-shadow 0.25s; }
.toggle::before { content: ''; position: absolute; right: 37px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: #8a84b8; transition: transform 0.32s var(--ease-back), background 0.25s, box-shadow 0.25s; }
.toggle:has(input:checked)::after { background-color: rgba(255, 199, 90, 0.3); background-image: none; box-shadow: inset 0 0 0 1px rgba(255, 210, 130, 0.7), 0 0 12px rgba(255, 190, 90, 0.25); }
.toggle:has(input:checked)::before { transform: translateX(20px); background: radial-gradient(circle at 38% 32%, #fffaf0 0 14%, #ffd27a 50%, #e59a3c); box-shadow: 0 0 8px rgba(255, 190, 90, 0.8); }
.toggle:has(input:checked) { border-color: rgba(255, 210, 140, 0.35); background: linear-gradient(180deg, rgba(255, 199, 90, 0.07), rgba(26, 20, 52, 0.92)); }
body.reduced .toggle::before { transition: none; }
@media (max-height: 520px) and (min-width: 600px) {
  .toggle::after { width: 44px; height: 24px; background-image: none; }
  .toggle:has(input:checked)::after { background-image: none; }
}
/* the keyboard reference: real keycaps */
.keys { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.keys > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 14px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(140, 125, 230, 0.18); }
.keys dt { font-weight: 650; }
.keys dd { margin: 0; color: var(--dim); font-size: 13px; text-align: right; }
.keys kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin: 0 2px; padding: 0 7px; border-radius: 7px; opacity: 1; font-size: 12px; font-weight: 700; color: var(--text);
  border: 1px solid rgba(200, 190, 255, 0.35); border-bottom-width: 3px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); }
body.mobile .desk-only { display: none !important; }
.set-note { margin: 0; font-size: 13px; color: var(--dim); }
.set-foot { padding-top: 12px; border-top: 1px solid rgba(140, 125, 230, 0.18); }
body.tall .set-tabs button { flex-direction: column; gap: 3px; font-size: 12px; min-height: 54px; padding: 0 4px; }
body.tall .set-page .sliders label { grid-template-columns: minmax(0, 1fr) 50px; grid-template-areas: 't o' 'r r'; row-gap: 0; padding: 8px 14px 4px; }
body.tall .set-page .sliders label > span { grid-area: t; } body.tall .set-page .sliders label > input { grid-area: r; } body.tall .set-page .sliders label > output { grid-area: o; }
@media (max-width: 560px) {
  .set-tabs button { flex-direction: column; gap: 3px; font-size: 12px; min-height: 54px; padding: 0 4px; }
  .set-page .sliders label { grid-template-columns: minmax(0, 1fr) 50px; grid-template-areas: 't o' 'r r'; row-gap: 0; padding: 8px 14px 4px; }
  .set-page .sliders label > span { grid-area: t; } .set-page .sliders label > input { grid-area: r; } .set-page .sliders label > output { grid-area: o; }
}

/* ---------------------------------------------------------------- touch controls: a glass stick with a glowing orb, a jewel Dash button */
#stickBase { background: radial-gradient(circle, rgba(18, 14, 44, 0.42) 0 60%, rgba(140, 125, 240, 0.12) 61% 64%, rgba(14, 11, 34, 0.38) 65%);
  box-shadow: inset 0 0 0 1.5px rgba(210, 200, 255, 0.4), inset 0 0 24px rgba(140, 125, 240, 0.18), 0 6px 20px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#stickBase::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none; opacity: 0.7; /* four direction notches */
  background: repeating-conic-gradient(from -5deg, rgba(225, 215, 255, 0.75) 0 10deg, transparent 10deg 90deg);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88% 96%, transparent 98%); mask: radial-gradient(closest-side, transparent 86%, #000 88% 96%, transparent 98%); }
#stickBase::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.2s;
  box-shadow: 0 0 0 1.5px rgba(255, 210, 140, 0.6), 0 0 24px rgba(255, 190, 90, 0.35); }
#stickZone.active #stickBase::after { opacity: 1; }
#stickKnob { width: 42%; height: 42%; margin: -21% 0 0 -21%;
  background: radial-gradient(circle at 36% 30%, #fffaf0 0 9%, #ffe2a0 24%, #ffc75a 52%, #d98a34 88%);
  box-shadow: 0 0 0 2px rgba(255, 240, 210, 0.3), 0 5px 12px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 190, 90, 0.55); }
#stickZone.active #stickKnob { box-shadow: 0 0 0 3px rgba(255, 240, 210, 0.45), 0 5px 12px rgba(0, 0, 0, 0.45), 0 0 34px rgba(255, 190, 90, 0.85); }
#dashBtn { background: radial-gradient(circle at 50% 36%, rgba(255, 214, 140, 0.34), rgba(120, 70, 40, 0.3) 58%, rgba(30, 18, 30, 0.45) 78%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, 0.5), inset 0 -6px 14px rgba(0, 0, 0, 0.3), inset 0 4px 10px rgba(255, 240, 210, 0.12), 0 6px 20px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-shadow: 0 0 10px rgba(255, 190, 90, 0.9); }
#dashBtn:not(.empty) { animation: dashready 2.2s ease-in-out infinite; }
@keyframes dashready { 50% { box-shadow: inset 0 0 0 1.5px rgba(255, 224, 160, 0.75), inset 0 -6px 14px rgba(0, 0, 0, 0.3), inset 0 4px 10px rgba(255, 240, 210, 0.18), 0 0 26px rgba(255, 190, 90, 0.4); } }
#dashBtn.down { animation: none; box-shadow: inset 0 0 0 2px #ffe6b0, inset 0 0 26px rgba(255, 210, 140, 0.55), 0 0 34px rgba(255, 190, 90, 0.7); }
#dashBtn .dash-text { font-size: 1.05em; }
#dashBtn .dash-pips i.on { background: radial-gradient(circle at 40% 35%, #fff, #ffd27a); }
body.reduced #dashBtn { animation: none; }
#touchPause { width: 48px; height: 48px; min-width: 0; padding: 0; color: #e8e2ff; font-size: 0; background: rgba(14, 11, 32, 0.55); border-color: rgba(200, 190, 255, 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#touchPause::before { content: ''; width: 14px; height: 16px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); border-radius: 2px; }
#touchPause:active { border-color: var(--gold); color: var(--gold); }
/* party sticks (one per player) share the same finish in each player's colour */
.st-base { box-shadow: inset 0 0 24px color-mix(in srgb, var(--pc) 22%, transparent), 0 6px 18px rgba(0, 0, 0, 0.35); }
.st-knob { background: radial-gradient(circle at 36% 30%, #fff 0 10%, color-mix(in srgb, var(--pc) 55%, #fff) 30%, var(--pc) 70%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 5px 12px rgba(0, 0, 0, 0.45), 0 0 18px var(--pc); }
/* upright phones: the name up top, the wisp glowing in the open middle, the menu below on dark water */
body.tall .t-col { height: 100%; justify-content: flex-start; padding: max(8vh, calc(env(safe-area-inset-top) + 64px)) 0 max(4vh, env(safe-area-inset-bottom)); }
body.tall .t-menu { margin-top: auto; }
body.tall .wm-top { font-size: min(17vw, 92px); }
/* the Dash button glows like the wisp it fires; the HUD layout picker matches the tabs */
#dashBtn { background: radial-gradient(circle at 50% 34%, rgba(255, 226, 160, 0.5) 0%, rgba(255, 170, 70, 0.3) 45%, rgba(70, 36, 24, 0.5) 80%); color: #fff6e0; }
#dashBtn.empty { background: radial-gradient(circle at 50% 34%, rgba(170, 160, 220, 0.18), rgba(30, 24, 60, 0.5) 80%); filter: none; }
#stickKnob { background: radial-gradient(circle at 36% 30%, #fffaf0 0 9%, #ffe6ad 26%, #ffc75a 55%, #e8963c 90%); }
.set-page .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-m); background: rgba(6, 4, 18, 0.55); border: 1px solid var(--line); }
.set-page .seg button { min-height: 42px; border: 0; border-radius: 10px; background: none; color: var(--dim); font-weight: 600; cursor: pointer; transition: color 0.2s, background 0.3s, box-shadow 0.3s; }
.set-page .seg button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.set-page .seg button[aria-checked=true] { color: #ffe6b0; background: linear-gradient(180deg, rgba(255, 199, 90, 0.26), rgba(255, 170, 70, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 210, 130, 0.55); }
body.tall .set-page .sliders label, .set-page .sliders label { min-height: 0; }
@media (max-width: 560px) { .set-page .sliders label { padding: 8px 14px 2px; } .set-page input[type=range] { height: 36px; } }
body.tall .set-page input[type=range] { height: 36px; }
h2.eyebrow { color: #f1eaff; }
/* the press ripple */
.ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(255, 236, 196, 0.55), rgba(255, 199, 90, 0.18) 60%, transparent 70%); animation: ripple 0.6s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(18); opacity: 0; } }
.set-tabs button, .seg button, .pf-t { position: relative; }
/* phones held sideways: the title column, settings rows and footer buttons all fit without crowding */
@media (max-height: 500px) and (orientation: landscape) {
  .wm-top { font-size: 48px; }
  .wm-line { margin: 6px 0; }
  .wm-bot { font-size: 18px; }
  .pitch { margin-top: 8px; font-size: 13px; }
  .t-menu { margin-top: 10px; gap: 0; }
  #bestLine { margin-top: 4px; }
  .set-tabs button { min-height: 40px; }
  .set-page { gap: 8px; }
  .set-page .sliders label, .toggle, .keys > div { min-height: 46px; padding-top: 2px; padding-bottom: 2px; }
  .set-page input[type=range] { height: 40px; }
  .set-body { min-height: 0; }
  #settings .panel.set-panel { gap: 10px; padding-top: 14px; padding-bottom: 12px; }
  .set-foot { padding-top: 8px; }
}
/* upright phones: buttons in a row share the width, so their text steps down to fit */
body.tall .row .btn, body.tall .set-foot .btn { font-size: 17px; padding-left: 12px; padding-right: 12px; min-width: 0; }
/* the loading name never runs off a narrow screen */
.ld-top { font-size: min(13vh, 17vw, 112px); }
.ld-bot { font-size: min(4.2vh, 6.5vw, 34px); }
/* a flame refilling: the Dash button flashes and a ring of light leaves it */
#dashBtn.refill::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px #ffe6b0, 0 0 24px rgba(255, 200, 110, 0.9); animation: refill 0.5s var(--ease-out) forwards; }
@keyframes refill { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
body.reduced #dashBtn.refill::after { animation: none; opacity: 0; }
/* touch screens have no keyboard: hide the key hints */
body.mobile kbd { display: none; }
/* phones held sideways: settings sliders sit two to a row */
@media (max-height: 500px) and (orientation: landscape) {
  .set-page .sliders { grid-template-columns: 1fr 1fr; }
  .set-page .sliders label { grid-template-columns: minmax(0, 1fr) 50px; grid-template-areas: 't o' 'r r'; row-gap: 0; padding: 6px 14px 0; }
  .set-page .sliders label > span { grid-area: t; } .set-page .sliders label > input { grid-area: r; } .set-page .sliders label > output { grid-area: o; }
  .set-page input[type=range] { height: 34px; }
}
/* short upright phones (SE-sized): the name stays full size; a tighter menu leaves open sky for the wisp */
@media (orientation: portrait) and (max-height: 760px) {
  body.tall .t-col { padding-top: max(6vh, calc(env(safe-area-inset-top) + 76px)); }
  body.tall .tlink { min-height: 42px; }
  body.tall .tlink.play { min-height: 52px; }
  body.tall #bestLine { margin-top: 8px; }
}
/* phones held sideways: the four mode cards and Back fit on one screen */
@media (max-height: 500px) and (orientation: landscape) {
  .modes-panel { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .mode-grid { gap: 8px; }
  .mode-card { min-height: 0; padding: 8px 12px; row-gap: 0; grid-template-columns: 42px 1fr auto; }
  .mc-ico { width: 40px; height: 40px; transform: scale(0.87); transform-origin: left center; }
  .mode-card .mc-d { margin-top: 3px; font-size: 12px; line-height: 1.3; }
  .mode-card .mc-net { margin-top: 3px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .modes-panel .mode-net { font-size: 11px; margin: 0; }
  #modesBack { min-height: 44px; }
  .mode-card .mc-d { font-size: 11.5px; }
}
@media (max-height: 500px) and (orientation: landscape) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 400px) and (orientation: landscape) {
  .mode-card b { font-size: 16px; }
  .mode-card .mc-n { font-size: 10.5px; letter-spacing: 0.04em; }
  .mode-card .mc-go { padding: 6px 12px; font-size: 12px; }
  .mode-card .mc-soon { padding: 4px 8px; font-size: 11px; }
  .modes-panel .mode-net { display: none; } /* the cards already say what works offline */
}
.tm.away { opacity: 0.38; filter: saturate(0.3); }
.tm.away .tm-f { visibility: hidden; }

/* ================================================================ Ranked Duel */
.ranked-panel { width: min(680px, 100%); max-height: min(700px, 100%); overflow: hidden; gap: 12px; }
.rk-body { flex: 1 1 auto; min-height: min(300px, 44vh); overflow-y: auto; overscroll-behavior: contain; text-align: left; touch-action: pan-y; padding: 2px; }
.rk-tabs { grid-template-columns: repeat(3, 1fr); }
.rk-page { display: flex; flex-direction: column; gap: 10px; animation: pagein 0.35s var(--ease-out) both; }
body.reduced .rk-page { animation: none; }
.rk-note { margin: 0; text-align: center; }
.rk-empty { margin: 0; padding: 14px; text-align: center; color: var(--dim); font-size: 14px; list-style: none; }
.rk-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); min-height: 96px; }
.rk-card .rk-empty { text-align: left; padding: 0; }
.rk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-main p { margin: 0; }
.rk-tier { font-size: 22px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rk-tier span { font-size: 13px; font-weight: 700; color: var(--blast); letter-spacing: 0.04em; }
.rk-rating { color: var(--dim); font-size: 14px; } .rk-rating b { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
.rk-next { color: var(--dim); font-size: 12px; }
.rk-bar { height: 8px; border-radius: 4px; background: #1f1942; box-shadow: inset 0 0 0 1px rgba(110, 95, 200, 0.55); overflow: hidden; }
.rk-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f0a548, #ffd889); transition: width 0.6s var(--ease-out); }
/* tier badges: a gem in the tier's colour (the tier is always written beside it, never colour alone) */
.rk-badge { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc, #c98a55) 30%, transparent), rgba(9, 7, 22, 0.6) 75%); border: 1.5px solid color-mix(in srgb, var(--tc, #c98a55) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tc, #c98a55) 30%, transparent); }
.rk-badge i { width: 26px; height: 26px; transform: rotate(45deg); border-radius: 5px; background: linear-gradient(135deg, #fff, var(--tc) 55%, color-mix(in srgb, var(--tc) 60%, #000)); box-shadow: 0 0 12px var(--tc); }
.tier-bronze { --tc: #d08a52; } .tier-silver { --tc: #cdd6ea; } .tier-gold { --tc: #ffc75a; } .tier-platinum { --tc: #7fe8d6; }
.tier-diamond { --tc: #73c8ff; } .tier-master { --tc: #b78bff; } .tier-grandmaster { --tc: #ff6fae; } .tier-champion { --tc: #fff1b8; }
.rk-pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--tc, #c98a55); border: 1px solid color-mix(in srgb, var(--tc, #c98a55) 60%, transparent); white-space: nowrap; }
.rk-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rk-row { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'a b c d' 'e e e e'; align-items: center; column-gap: 12px; row-gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(140, 125, 230, 0.18); font-size: 14px; }
.rk-row > :nth-child(1) { grid-area: a; } .rk-row > :nth-child(2) { grid-area: b; } .rk-row > :nth-child(3) { grid-area: c; } .rk-row > :nth-child(4) { grid-area: d; } .rk-row > :nth-child(5) { grid-area: e; }
.rk-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .rk-who small { color: var(--dim); font-weight: 600; }
.rk-sc { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.rk-why { color: var(--dim); font-size: 12px; }
.rk-res { width: 44px; } .rk-row.win .rk-res, .rk-row.win .rk-d { color: #8ff0b8; } .rk-row.loss .rk-res, .rk-row.loss .rk-d { color: #ff9aa8; } .rk-row.draw .rk-res { color: var(--dim); }
.rk-d { font-weight: 800; font-variant-numeric: tabular-nums; }
.rk-rank { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 36px; }
.rk-board .rk-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.rk-row.me { border-color: rgba(255, 210, 140, 0.55); background: rgba(255, 199, 90, 0.06); }
.rk-rules p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #d8d3f5; } .rk-rules b { color: var(--text); }
.rk-queue { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid rgba(115, 242, 255, 0.35); background: rgba(115, 242, 255, 0.05); font-size: 14px; }
.rk-queue small { color: var(--dim); }
.rk-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(115, 242, 255, 0.25); border-top-color: var(--blast); animation: ldspin 0.9s linear infinite; }
.rk-spin.found { border-color: var(--gold); animation: none; box-shadow: 0 0 12px rgba(255, 199, 90, 0.7); }
body.reduced .rk-spin { animation-duration: 2.4s; }
/* the result on the results screen */
.rk-result { padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); text-align: center; }
.rk-result p { margin: 2px 0; }
.rk-result .rk-big { font-size: 24px; font-weight: 850; letter-spacing: 0.04em; } .rk-result .rk-big span { font-variant-numeric: tabular-nums; }
.rk-result.win { border-color: rgba(143, 240, 184, 0.5); } .rk-result.win .rk-big { color: #b9f7d2; }
.rk-result.loss { border-color: rgba(255, 154, 168, 0.45); } .rk-result.loss .rk-big { color: #ffc0c8; }
.rk-tierchg { color: var(--gold); font-weight: 800; }
/* during a duel: the rival's live score, top centre */
.rival-chip { position: fixed; top: calc(max(8px, env(safe-area-inset-top)) + 26px); left: 50%; transform: translateX(-50%); z-index: 6; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 750; color: #ffd9a0;
  background: rgba(9, 7, 22, 0.72); border: 1px solid rgba(255, 199, 90, 0.4); pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rival-chip.done { color: var(--dim); border-color: var(--line); }
@media (max-height: 500px) and (orientation: landscape) {
  .rk-card { min-height: 0; padding: 10px 12px; } .rk-badge { width: 48px; height: 48px; } .rk-badge i { width: 20px; height: 20px; }
  .rk-tier { font-size: 18px; } .rk-body { min-height: 0; }
}
body.online.ranked #pause [data-act=title]::after { content: ' (forfeit the duel)'; }
body.online.ranked #pause .panel::after { content: 'The duel keeps going while you are paused.'; }

/* ================================================================ welcome, help, profile rank */
.ti-help { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.4' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='17' r='1.2' fill='black'/%3E%3C/svg%3E"); }
.set-tabs:not(.rk-tabs) { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 700px) { .set-tabs:not(.rk-tabs) button { flex-direction: column; gap: 3px; font-size: 12px; min-height: 54px; padding: 0 2px; } }
.welcome-panel { width: min(460px, 100%); gap: 14px; }
.wl-lead { margin: 0; font-size: clamp(20px, 3.4vh, 26px); font-weight: 800; }
#wlForm { display: flex; flex-direction: column; gap: 10px; }
.wl-input { font: inherit; font-size: 20px; font-weight: 700; text-align: center; padding: 12px 16px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: rgba(9, 7, 22, 0.75); color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.wl-input:focus { border-color: rgba(255, 210, 140, 0.8); box-shadow: 0 0 0 3px rgba(255, 199, 90, 0.18); }
.name-msg { margin: 0; min-height: 1.3em; font-size: 13px; color: var(--dim); } .name-msg.bad { color: #ffb2a6; }
.wl-how { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(140, 125, 230, 0.2); text-align: left; font-size: 14px; color: #d8d3f5; }
.wl-how p { margin: 0; } .wl-how b { display: inline-block; min-width: 46px; color: var(--gold); }
.wl-how kbd, .help-controls kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0 1px; padding: 0 5px; border-radius: 6px; opacity: 1; font-size: 11px; font-weight: 700; color: var(--text); border: 1px solid rgba(200, 190, 255, 0.35); border-bottom-width: 2px; background: rgba(255, 255, 255, 0.06); }
.wl-play { min-height: 54px; font-size: 19px; }
.wl-note { margin: 0; }
.help-controls { margin: 0; padding: 10px 14px; border-radius: var(--r-m); background: rgba(255, 199, 90, 0.06); border: 1px solid rgba(255, 210, 140, 0.3); font-size: 14px; line-height: 1.7; }
.help-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.help-list > div { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(140, 125, 230, 0.18); }
.help-list dt { font-weight: 750; font-size: 14px; color: var(--text); } .help-list dd { margin: 2px 0 0; font-size: 13px; color: var(--dim); line-height: 1.4; }
body.mobile .help-controls kbd { display: inline-grid; }
.help-actions .btn { font-size: 15px; }
.pf-rank { font-size: 14px; color: #d8d3f5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 22px; }
.pf-rank .dim { color: var(--dim); }
.rk-intro { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: #d8d3f5; text-align: left; } .rk-intro b { color: var(--text); font-size: 14.5px; }
/* narrow screens: Reset and Erase share a row, Back gets its own full-width row (nothing clipped) */
@media (max-width: 560px) { .set-foot { flex-wrap: wrap; } .set-foot .btn { flex: 1 1 40%; font-size: 15px; } .set-foot #settingsBack { flex-basis: 100%; } }
body.tall .set-foot { flex-wrap: wrap; } body.tall .set-foot .btn { flex: 1 1 40%; font-size: 15px; } body.tall .set-foot #settingsBack { flex-basis: 100%; }
/* phones held sideways: the welcome fits without scrolling */
@media (max-height: 500px) and (orientation: landscape) {
  .welcome-panel { gap: 6px; padding-top: 12px; padding-bottom: 10px; }
  .wl-lead { font-size: 18px; } #wlForm { gap: 6px; }
  .wl-input { font-size: 17px; padding: 7px 12px; } .wl-how { padding: 6px 12px; font-size: 13px; gap: 2px; }
  .wl-play { min-height: 44px; font-size: 17px; } .name-msg { font-size: 12px; }
}

/* ============================================================ the boon draft: clock, families, recommended, lanes */
.draft-top { display: flex; align-items: center; justify-content: center; gap: 14px; }
.draft-clock { position: relative; width: 46px; height: 46px; display: grid; place-items: center; --f: 1; }
.draft-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.draft-clock circle { fill: rgba(11, 9, 28, 0.7); stroke: rgba(140, 125, 230, 0.35); stroke-width: 3; }
.draft-clock circle.run { fill: none; stroke: var(--cyan); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: calc(106.8 * (1 - var(--f))); transition: stroke-dashoffset 1s linear, stroke 0.3s; }
.draft-clock span { position: relative; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.draft-clock.low circle.run { stroke: var(--gold); }
.draft-clock.low span { color: var(--gold); }
.draft-clock.last span { color: #ff9a7a; animation: clocktick 1s ease-out infinite; }
.draft-clock.last circle.run { stroke: #ff9a7a; }
@keyframes clocktick { 0% { transform: scale(1.18); } 40% { transform: scale(1); } }
body.reduced .draft-clock.last span { animation: none; }
.card .fam { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc); border: 1px solid color-mix(in srgb, var(--fc) 55%, transparent);
  border-radius: 999px; padding: 1px 9px; background: color-mix(in srgb, var(--fc) 10%, transparent); }
.card .recb { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(180deg, #ffe39a, #ffc75a); border-radius: 999px; padding: 3px 10px; white-space: nowrap; box-shadow: 0 2px 10px rgba(255, 199, 90, 0.35); }
.card.rec { border-color: rgba(255, 199, 90, 0.55); }
.card.dimmed { opacity: 0.28; transform: scale(0.97); transition: opacity 0.3s, transform 0.3s; }
.card.chosen { opacity: 1; }
.draft-wait { margin: 6px 0 0; color: var(--cyan); font-weight: 700; letter-spacing: 0.02em; animation: waitglow 2.2s ease-in-out infinite; }
@keyframes waitglow { 50% { opacity: 0.6; } }
body.reduced .draft-wait { animation: none; }
.draft-team { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.draft-team .dt { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); background: rgba(11, 9, 28, 0.75); font-size: 13px; }
.draft-team .dt b { color: var(--pc); }
.draft-team .dt i { font-style: normal; color: var(--dim); }
.draft-team .dt.done i { color: var(--text); }
.draft-team .dt.away { opacity: 0.55; }
/* Local Party: one lane per player */
#cards.lanes { align-items: stretch; max-width: 1180px; gap: 10px; }
.lane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-m); border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); background: rgba(11, 9, 28, 0.55); }
.lane.done { border-color: color-mix(in srgb, var(--pc) 80%, transparent); }
.lane-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.lane-head b { color: var(--pc); font-weight: 800; }
.lane-head span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-head i { margin-left: auto; font-style: normal; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.lane.done .lane-head i { color: var(--pc); }
.lanes .card { max-width: none; flex: none; display: grid; grid-template-columns: 44px 1fr; grid-template-areas: 'img name' 'img fam' 'img desc'; column-gap: 10px; row-gap: 2px; text-align: left; padding: 10px; min-height: 0; }
.lanes .card img { grid-area: img; width: 44px; height: 44px; padding: 3px; animation: none; }
.lanes .card .name { grid-area: name; font-size: 15px; }
.lanes .card .fam { grid-area: fam; justify-self: start; }
.lanes .card .desc { grid-area: desc; font-size: 12px; }
.lanes .card .lvl, .lanes .card .syn, .lanes .card::before, .lanes .card .key { display: none; }
.lanes .card .recb { top: 4px; left: auto; right: 6px; transform: none; font-size: 9px; padding: 2px 7px; }
.lanes .card.sel { transform: none; box-shadow: 0 0 0 2px var(--pc); }
.lanes .pass { margin-top: 2px; font-size: 13px; }
.lanes .pass.sel { color: var(--text); text-decoration: underline; }
body.tall #cards.lanes { flex-direction: row; padding: 0 8px; }
body.tall .lanes .card { grid-template-columns: 34px 1fr; grid-template-areas: 'img name' 'desc desc'; }
body.tall .lanes .card img { width: 34px; height: 34px; }
body.tall .lanes .card .fam { display: none; }

/* ============================================================ in-run: your boons, synergies lit */
.hud-build { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; margin-top: 4px; }
.hud-build .hb { position: relative; width: 24px; height: 24px; border-radius: 7px; background: rgba(11, 9, 28, 0.7); border: 1.5px solid color-mix(in srgb, var(--fc) 60%, transparent); display: grid; place-items: center; transition: opacity 0.2s; }
.hud-build .hb img { width: 20px; height: 20px; }
.hud-build .hb b { position: absolute; right: -3px; bottom: -4px; font-size: 8px; color: #fff; background: #120e2a; border-radius: 4px; padding: 0 2px; }
.hud-build .hb.syn { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 199, 90, 0.55); }
.hud-build .hb.cd { opacity: 0.4; }
body.coop .hud-build { display: none; }
body.online.coop .hud-build { display: flex; }

/* ============================================================ Collection */
#collection .panel.wide { width: min(980px, 100%); }
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.col-total { margin: 0; color: var(--gold); font-weight: 750; font-variant-numeric: tabular-nums; }
.col-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.col-tabs button { flex: 1 1 auto; min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--btn); color: var(--dim); font: inherit; font-weight: 750; cursor: pointer; }
.col-tabs button span { color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; font-size: 12px; }
.col-tabs button.on { color: var(--text); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.col-tabs button:hover, .col-tabs button:focus-visible { border-color: var(--blast); outline: none; color: var(--text); }
.col-body { display: grid; grid-template-columns: 1fr minmax(240px, 300px); gap: 12px; min-height: 0; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; max-height: min(56vh, 520px); overflow-y: auto; padding: 2px; }
.col-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; min-height: 120px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--btn); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s; }
.col-card:hover, .col-card:focus-visible { border-color: var(--blast); background: var(--btn-hover); outline: none; }
.col-card:active { transform: scale(0.97); }
.col-card.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.col-card.done .st { color: var(--cyan); }
.col-card .nm { font-weight: 750; font-size: 13px; text-align: center; }
.col-card .st { font-size: 11px; color: var(--dim); text-align: center; }
.col-card.mystery .nm { color: var(--dim); letter-spacing: 0.2em; }
.col-art { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(110, 90, 220, 0.22), transparent 70%); }
.col-art canvas { width: 64px; height: 64px; }
.col-art img { width: 52px; height: 52px; }
.col-art.dark img { filter: brightness(0.15) saturate(0); opacity: 0.8; }
.col-art .sw { width: 40px; height: 40px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 16px color-mix(in srgb, #fff 20%, transparent); }
.col-art.big { width: 120px; height: 120px; margin: 0 auto; }
.col-art.big canvas { width: 120px; height: 120px; }
.col-art.big img { width: 96px; height: 96px; }
.col-art.big .sw { width: 70px; height: 70px; }
.col-detail { text-align: left; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: rgba(11, 9, 28, 0.6); max-height: min(56vh, 520px); overflow-y: auto; }
.col-detail h3 { margin: 6px 0 8px; text-align: center; font-size: 19px; color: var(--gold); }
.col-detail p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #e4dfff; }
.col-detail p b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.col-detail .btn.small { min-height: 44px; width: 100%; margin-top: 4px; }
.col-note { margin: 0; font-size: 12px; color: var(--dim); }
.col-ico { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; border: 2px solid currentColor; opacity: 0.85;
  background: linear-gradient(currentColor, currentColor) center / 6px 6px no-repeat; }
@media (max-width: 720px), (max-height: 520px) {
  .col-body { grid-template-columns: 1fr; }
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 34vh; }
  .col-card { min-height: 104px; }
  .col-art, .col-art canvas { width: 52px; height: 52px; }
  .col-detail { max-height: 30vh; }
  .col-art.big { width: 84px; height: 84px; } .col-art.big canvas { width: 84px; height: 84px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .col-body { grid-template-columns: 1fr minmax(200px, 260px); }
  .col-grid, .col-detail { max-height: 46vh; }
}

/* ============================================================ earned cosmetics: aura, victory effect, badge */
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sty.cos { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.sty.cos .tg { grid-column: 2; margin: 0; white-space: normal; }
.cos-ico { display: inline-block; width: 28px; height: 28px; border-radius: 50%; position: relative; grid-row: span 2;
  background: radial-gradient(circle, #fff1cf 0 18%, #ffc75a 30%, transparent 62%); }
.cos-ico.aura-halo { box-shadow: inset 0 0 0 2px #ffd27a; }
.cos-ico.aura-corona { background: radial-gradient(circle, #fff1cf 0 18%, #ffc75a 30%, transparent 50%), repeating-conic-gradient(#ffd27a 0 6deg, transparent 6deg 45deg); }
.cos-ico.aura-prismatic { background: radial-gradient(circle, #fff1cf 0 18%, #ffc75a 30%, #0b0918 42% 58%, transparent 60%), conic-gradient(#ff8fa8, #ffd27a, #8fffb0, #8fe8ff, #c79bff, #ff8fa8); }
.cos-ico.victory-classic { background: radial-gradient(circle, transparent 42%, #9ff6ff 44% 52%, transparent 54%); }
.cos-ico.victory-starburst { background: repeating-conic-gradient(#ffd27a 0 10deg, transparent 10deg 45deg); border-radius: 30%; }
.cos-ico.victory-aurora { background: radial-gradient(circle, transparent 30%, #6fe0c8 32% 38%, transparent 40% 52%, #73e6ff 54% 60%, transparent 62% 74%, #c08cff 76% 82%, transparent 84%); }
.cos-ico[class*='badge-'], .nbadge { background: color-mix(in srgb, var(--bc, #ffd27a) 22%, #0b0918); border: 2px solid var(--bc, #ffd27a); transform: rotate(45deg) scale(0.78); border-radius: 5px; box-shadow: 0 0 10px color-mix(in srgb, var(--bc, #ffd27a) 50%, transparent); }
.nbadge { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: 0; }
.nbadge[hidden] { display: none; }
.set-note { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.75; }
#achToast.reward { border-color: var(--gold); box-shadow: 0 0 30px rgba(255, 199, 90, 0.35); }
#achToast.reward .k { color: var(--gold); }
.help-g { margin: 14px 0 4px; font-size: 12px; letter-spacing: var(--sc-track); text-transform: uppercase; color: var(--gold); text-align: left; }
/* lanes: the Recommended mark sits in the corner without covering the name */
.lanes .card .name { padding-right: 64px; }
.lanes .card .recb { font-size: 8px; padding: 2px 6px; letter-spacing: 0.08em; }
/* a party on a short screen (a phone held sideways): every lane, the clock and the title fit without scrolling */
@media (max-height: 520px) {
  #boons:has(#cards.lanes) { justify-content: flex-start; padding-top: 6px; gap: 2px; }
  #boons:has(#cards.lanes) #boonSub { display: none; }
  #boons:has(#cards.lanes) .eyebrow { font-size: 12px; }
  #boons:has(#cards.lanes) .draft-clock { width: 34px; height: 34px; }
  #boons:has(#cards.lanes) .draft-clock span { font-size: 13px; }
  .lanes { margin-top: 4px; }
  .lane { padding: 5px; gap: 4px; }
  .lane-head { font-size: 11px; }
  .lanes .card { grid-template-columns: 28px 1fr; grid-template-areas: 'img name' 'desc desc'; padding: 6px 7px; row-gap: 1px; }
  .lanes .card img { width: 28px; height: 28px; padding: 1px; }
  .lanes .card .name { font-size: 13px; align-self: center; padding-right: 0; }
  .lanes .card .fam { display: none; }
  .lanes .card .desc { font-size: 11px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lanes .card .recb { top: 3px; right: 4px; font-size: 0; padding: 0; width: 16px; height: 16px; border-radius: 50%; }
  .lanes .card .recb::before { content: '★'; font-size: 11px; line-height: 16px; display: block; text-align: center; }
  .lanes .pass { font-size: 11px; margin: 0; min-height: 40px; }
}

/* ============================================================ Boss Practice */
#bossPractice .panel.wide { width: min(820px, 100%); }
.bp-bosses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bp-boss { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; min-height: 44px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--btn); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.bp-boss canvas { width: 64px; height: 64px; }
.bp-boss .nm { font-size: 12px; font-weight: 750; }
.bp-boss.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 18px rgba(255, 199, 90, 0.2); }
.bp-boss.locked { opacity: 0.6; }
.bp-boss.locked .nm { color: var(--dim); }
.bp-boss:hover, .bp-boss:focus-visible { border-color: var(--blast); outline: none; }
.bp-boss:active { transform: scale(0.97); }
.bp-info { text-align: left; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: rgba(11, 9, 28, 0.6); }
.bp-info h3 { margin: 0; color: var(--gold); font-size: 19px; }
.bp-info p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #e4dfff; }
.bp-info .bp-title { color: var(--dim); font-size: 13px; }
.bp-info .bp-phases { color: var(--cyan); font-size: 13px; font-weight: 700; }
.bp-lock { color: var(--dim) !important; }
.bp-opts { display: grid; gap: 6px; text-align: left; }
.bp-opts[hidden] { display: none; }
.bp-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.bp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--btn); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bp-opt b { font-size: 14px; } .bp-opt span { font-size: 11px; color: var(--dim); }
.bp-opt.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.bp-opt:hover, .bp-opt:focus-visible { border-color: var(--blast); outline: none; }
.bp-boons { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-boon { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--btn); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.bp-boon img { width: 30px; height: 30px; }
.bp-boon.on { border-color: var(--gold); background: rgba(255, 199, 90, 0.12); }
.bp-boon:hover, .bp-boon:focus-visible { border-color: var(--blast); outline: none; }
.bp-note { margin: 0; font-size: 12px; color: var(--dim); }
.pe-title { margin: 4px 0; font-size: 24px; }
.pe-title.won { color: var(--gold); } .pe-title.lost { color: #ffb2a6; }
.pe-stats { margin: 0 0 6px; color: #e4dfff; line-height: 1.45; }
.mc-practice::before { inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #ffd27a 0 16%, transparent 18%), radial-gradient(circle, transparent 38%, #ffbe6a 40% 46%, transparent 48%), radial-gradient(circle, transparent 60%, rgba(255, 190, 106, 0.5) 62% 66%, transparent 68%); }
@media (max-width: 560px) {
  .bp-bosses { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .bp-boss canvas { width: 44px; height: 44px; }
  .bp-boss .nm { font-size: 11px; }
}
@media (max-height: 520px) {
  #bossPractice .panel { gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .bp-boss canvas { width: 40px; height: 40px; }
  .bp-info p.bp-tip { font-size: 12px; }
}
.diag { position: absolute; left: 8px; bottom: 6px; z-index: 30; pointer-events: none; font: 600 11px/1.3 Inter, system-ui, sans-serif; color: rgba(220, 215, 255, 0.75); background: rgba(6, 5, 16, 0.55); padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
@media (max-height: 520px) { /* a phone held sideways: the setup scrolls, Back and Start stay in reach */
  .bp-panel > .row { position: sticky; bottom: -10px; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, rgba(11, 9, 28, 0.97) 30%); z-index: 1; }
}
#collectionBtn.fresh::after { content: attr(data-fresh); margin-left: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #1a1206; background: linear-gradient(180deg, #ffe39a, #ffc75a); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; animation: freshpop 1.8s var(--ease-back) infinite; }
@keyframes freshpop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } }
body.reduced #collectionBtn.fresh::after { animation: none; }

/* ============================================================ account card (Profile) */
.pf-account { text-align: left; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: rgba(11, 9, 28, 0.55); display: grid; gap: 6px; }
.pa-h { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pa-h b { color: var(--gold); } .pa-h span { color: var(--dim); font-size: 12px; }
.pa-msg { margin: 0; font-size: 13px; line-height: 1.4; color: #e4dfff; }
.pa-msg.warn { color: #ffe39a; } .pa-msg.bad { color: #ffb2a6; } .pa-msg:empty { display: none; }
.pa-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; }
.pa-google { min-height: 44px; display: flex; align-items: center; }
.pf-account .btn.small { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.pf-account .row { gap: 8px; flex-wrap: wrap; }
.pf-account .btn.danger { border-color: rgba(255, 120, 120, 0.45); color: #ffc2b8; }
.pf-account .btn.danger.armed { background: rgba(255, 90, 90, 0.18); border-color: #ff8a7a; color: #fff; }
.pa-link { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(255, 199, 90, 0.06); border: 1px solid rgba(255, 199, 90, 0.3); }
.rk-titles { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rk-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255, 199, 90, 0.45); border-radius: 999px; padding: 1px 7px; }
.bp-desc { margin: -2px 0 2px; font-size: 12px; color: var(--cyan); }
@media (max-width: 560px) { /* an upright phone: the setup scrolls, Back and Start stay in reach */
  .bp-panel > .row { position: sticky; bottom: -10px; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, rgba(11, 9, 28, 0.97) 30%); z-index: 1; }
}

/* Settings: desktop key bindings */
.key-binds { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 6px 0 2px; }
.kb-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid rgba(200, 190, 255, 0.22); background: rgba(20, 16, 40, 0.55); color: inherit; font: inherit; cursor: pointer; }
.kb-btn:hover, .kb-btn:focus-visible { border-color: rgba(255, 214, 140, 0.7); }
.kb-btn:active { transform: scale(0.97); }
.kb-btn kbd { min-width: 2.2em; text-align: center; }
.kb-btn.wait { border-color: #ffd27a; box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.35); }
.kb-btn.wait kbd { color: #ffd27a; font-style: italic; }
#ctrlReset { margin: 10px 0 4px; }

/* ---------------------------------------------------------------- Boss Gauntlet, Rift Challenge, Run Recap */
.cx-panel { text-align: left; }
.cx-panel > .eyebrow { text-align: center; }
.cx-lead { margin: 0; font-size: 14px; line-height: 1.45; color: #e4dfff; text-align: center; }
.cx-record { margin: 0; font-size: 13px; color: var(--gold); text-align: center; }
.gx-order { list-style: none; margin: 2px 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; counter-reset: none; }
.gx-boss { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(11, 9, 28, 0.6); text-align: center; min-width: 0; }
.gx-boss canvas { width: 54px; height: 54px; }
.gx-boss b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gx-boss small { font-size: 11px; color: var(--dim); line-height: 1.2; }
.gx-boss .n { position: absolute; top: 4px; left: 6px; font-size: 11px; font-weight: 800; color: var(--gold); }
.gx-boss.hard { border-color: rgba(255, 120, 150, 0.55); }
.gx-boss.hard small { color: #ff9ab5; }
.gx-boss + .gx-boss::before { content: '›'; position: absolute; left: -7px; top: 26px; color: var(--dim); font-size: 14px; }
.cx-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.cx-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 7px 12px 7px 34px; position: relative; border-radius: 12px; border: 1.5px solid var(--line); background: var(--btn); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cx-mod::before { content: ''; position: absolute; left: 11px; top: 11px; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--dim); }
.cx-mod.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cx-mod.on::before { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 2px #1a1430; }
.cx-mod b { font-size: 14px; } .cx-mod span { font-size: 12px; color: var(--dim); line-height: 1.35; }
.cx-mod:hover, .cx-mod:focus-visible { border-color: var(--blast); outline: none; }
.cx-mod:active, .bp-opt:active, .rx-past:active, .rc-chip.col:active { transform: scale(0.97); }
.rx-code label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.rx-field { display: flex; gap: 6px; }
.rx-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(9, 7, 22, 0.8); color: var(--text);
  font: 800 20px/1 Inter, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.rx-field input:focus { outline: none; border-color: var(--blast); }
.rx-field .btn { min-height: 46px; white-space: nowrap; }
.rx-msg { margin: 4px 0 0; min-height: 1.2em; font-size: 12px; color: var(--cyan); }
.rx-msg.bad { color: var(--danger); }
.rx-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: rgba(11, 9, 28, 0.6); font-size: 13px; color: var(--dim); }
.rx-big { font-size: 22px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold); }
.rx-share { justify-content: flex-start; }
.rx-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rx-recent .set-h { width: 100%; margin: 4px 0 0; }
.rx-past { display: flex; flex-direction: column; align-items: flex-start; min-height: 44px; padding: 5px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--btn); color: var(--text); font: inherit; cursor: pointer; }
.rx-past b { letter-spacing: 0.08em; font-size: 14px; } .rx-past span { font-size: 11px; color: var(--dim); }
.rx-past:hover, .rx-past:focus-visible { border-color: var(--blast); outline: none; }
.linkish { background: none; border: 0; padding: 4px 2px; min-height: 32px; color: var(--blast); font: inherit; text-decoration: underline; cursor: pointer; }
.bp-desc .bad { color: var(--danger); }
.mc-gauntlet::before { left: 7px; top: 15px; width: 9px; height: 9px; background: #c08cff; box-shadow: 11px -4px 0 #ffbe6a, 22px 0 0 #bcd8ff, 11px 9px 0 #8fe08a, 0 0 0 0 transparent; }
.mc-gauntlet::after { right: 6px; top: 13px; width: 13px; height: 13px; background: #9fb4ff; box-shadow: 0 0 8px rgba(159, 180, 255, 0.8); }
.mc-rift::before { inset: 9px 14px; border-radius: 50%; border: 3px solid #73f2ff; transform: rotate(28deg); box-shadow: 0 0 10px rgba(115, 242, 255, 0.5); }
.mc-rift::after { left: 20px; top: 20px; width: 6px; height: 6px; background: #ffd27a; box-shadow: 0 0 8px #ffd27a; }
/* Run Recap (results) */
.recap { display: grid; gap: 6px; margin-top: 8px; text-align: left; }
.recap[hidden] { display: none; }
.rc-row { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: start; animation: rise 0.4s var(--ease-out) both; }
.rc-row h4 { margin: 4px 0 0; font-size: 11px; letter-spacing: var(--sc-track); text-transform: uppercase; color: var(--dim); font-weight: 700; }
.rc-body { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(11, 9, 28, 0.6); font-size: 12px; color: #e4dfff; }
.rc-chip b { color: var(--gold); }
.rc-chip img { width: 18px; height: 18px; }
.rc-chip i { color: var(--dim); font-style: normal; }
.rc-chip.won { border-color: rgba(143, 224, 138, 0.55); } .rc-chip.lost { border-color: rgba(255, 90, 122, 0.45); color: var(--dim); }
.rc-chip.syn { border-color: rgba(255, 199, 90, 0.6); color: var(--gold); }
.rc-chip.col { min-height: 32px; cursor: pointer; font: inherit; font-size: 12px; border-color: rgba(115, 242, 255, 0.5); color: var(--cyan); }
.rc-chip.col:hover, .rc-chip.col:focus-visible { border-color: var(--blast); outline: none; }
.rc-arrow { color: var(--dim); font-size: 12px; }
.rc-note { margin: 2px 0 0; font-size: 11px; color: var(--dim); }
.res-share { display: flex; gap: 6px; flex-wrap: wrap; }
.res-share .btn { flex: 1; min-height: 44px; }
.res-share .btn[hidden] { display: none; }
@media (max-width: 560px) {
  .gx-order { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .gx-boss canvas { width: 40px; height: 40px; }
  .gx-boss small { display: none; }
  .rc-row { grid-template-columns: 1fr; gap: 2px; }
  .rx-field { flex-wrap: wrap; }
  .rx-field input { flex-basis: 100%; }
  .rx-field .btn { flex: 1; }
  .cx-panel > .row { position: sticky; bottom: -10px; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, rgba(11, 9, 28, 0.97) 30%); z-index: 1; }
}
@media (max-height: 520px) { /* phones held sideways: Back and Start stay in reach while the setup scrolls */
  .cx-panel > .row { position: sticky; bottom: -10px; padding: 8px 0 2px; background: linear-gradient(180deg, transparent, rgba(11, 9, 28, 0.97) 30%); z-index: 1; }
  .cx-panel { gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .gx-boss canvas { width: 38px; height: 38px; }
}
/* Rift: a fresh code lands with a small reveal; the ghost toggle; ahead/behind notes */
.rx-summary.reveal { animation: rxreveal 0.42s var(--ease-out) both; }
.rx-summary.reveal .rx-big { animation: rxglow 0.9s ease-out both; }
@keyframes rxreveal { from { opacity: 0.2; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes rxglow { 0% { text-shadow: 0 0 0 rgba(255, 210, 122, 0); letter-spacing: 0.02em; } 40% { text-shadow: 0 0 18px rgba(255, 210, 122, 0.9); } 100% { text-shadow: 0 0 0 rgba(255, 210, 122, 0); letter-spacing: 0.1em; } }
.rx-big.old { color: var(--dim); text-decoration: line-through rgba(255, 90, 122, 0.6); }
.rx-past.older { opacity: 0.7; }
.rx-ghost .cx-mod { width: 100%; }
.ghost-note { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 118px); transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 5px 14px; border-radius: 999px; font: 700 13px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0.02em; white-space: nowrap;
  background: rgba(10, 8, 26, 0.72); border: 1px solid rgba(207, 227, 255, 0.35); color: #dce9ff; }
.ghost-note.ahead { border-color: rgba(143, 240, 190, 0.7); color: #a6f5cf; }
.ghost-note.new { border-color: rgba(255, 210, 122, 0.8); color: #ffe2a0; box-shadow: 0 0 18px rgba(255, 199, 90, 0.35); }
.ghost-note.in { animation: gnote 2.6s ease both; }
@keyframes gnote { 0% { opacity: 0; transform: translate(-50%, -6px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
body.reduced .ghost-note.in { animation: none; }
body.reduced .rx-summary.reveal, body.reduced .rx-summary.reveal .rx-big { animation: none; }

/* ---------------------------------------------------------------- Title menu: one icon column, so every row lines up */
.t-menu .tlink:not(.play) { display: grid; grid-template-columns: 30px auto auto auto auto; align-items: center; justify-content: start; column-gap: 10px; padding-left: 4px; min-height: 42px; }
.t-menu .tlink:not(.play)::before { display: none; }
.ti-i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(160, 150, 240, 0.18);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.ti-i > * { margin: 0 !important; }
.ti-i .sw { width: 12px; height: 12px; }
.ti-i .mp-ico { transform: scale(0.85); }
.ti-i img { width: 26px; height: 26px; object-fit: contain; }
.tlink:hover .ti-i, .tlink:focus-visible .ti-i { background: rgba(255, 199, 90, 0.14); border-color: rgba(255, 199, 90, 0.55); box-shadow: 0 0 14px rgba(255, 199, 90, 0.35); transform: rotate(-6deg) scale(1.06); }
.rec-ico { width: 13px; height: 12px; border: 2px solid #ffd27a; border-top: 0; border-radius: 0 0 7px 7px; position: relative; }
.rec-ico::after { content: ''; position: absolute; left: 2px; bottom: -6px; width: 5px; height: 4px; background: #ffd27a; border-radius: 1px; }
.how-ico { font: 800 15px/1 Inter, system-ui, sans-serif; color: #73f2ff; font-style: normal; text-shadow: 0 0 8px rgba(115, 242, 255, 0.6); }
.set-ico { width: 14px; height: 14px; border-radius: 50%; border: 3px dotted #bdb6f0; box-shadow: inset 0 0 0 2px rgba(189, 182, 240, 0.5); }
.tlink:hover .set-ico { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.t-menu > * { opacity: 0; animation: tin 0.5s var(--ease-out) forwards; }
.t-menu > :nth-child(1) { animation-delay: 0.25s; } .t-menu > :nth-child(2) { animation-delay: 0.32s; } .t-menu > :nth-child(3) { animation-delay: 0.38s; }
.t-menu > :nth-child(4) { animation-delay: 0.44s; } .t-menu > :nth-child(5) { animation-delay: 0.5s; } .t-menu > :nth-child(6) { animation-delay: 0.56s; } .t-menu > :nth-child(7) { animation-delay: 0.62s; }
@keyframes tin { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.tlink.play { position: relative; overflow: hidden; }
.tlink.play::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.28), transparent); animation: playsheen 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes playsheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
body.tall .t-menu .tlink:not(.play) { justify-content: center; }
body.reduced .t-menu > *, body.reduced .tlink.play::after, body.reduced .tlink:hover .set-ico { animation: none; opacity: 1; }
body.reduced .tlink:hover .ti-i { transform: none; }
@media (prefers-reduced-motion: reduce) { .t-menu > * { animation: none; opacity: 1; } .tlink.play::after { animation: none; } }
@media (max-height: 520px) { .t-menu .tlink:not(.play) { min-height: 36px; } .ti-i { width: 26px; height: 26px; } }

/* ---------------------------------------------------------------- How to play: four little looping scenes */
.howto-panel { width: min(520px, 100%); }
.ht-stage { position: relative; height: clamp(120px, 26vh, 190px); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 60%, rgba(80, 70, 170, 0.35), rgba(9, 7, 22, 0.9) 70%); }
.ht-scene { position: absolute; inset: 0; }
.ht-scene i { position: absolute; display: block; font-style: normal; }
.ht-wisp { width: 26px; height: 26px; border-radius: 50%; left: 20%; top: 50%; margin: -13px 0 0 -13px;
  background: radial-gradient(circle at 60% 45%, #fffdf6 0 22%, #ffd27a 50%, rgba(255, 170, 70, 0.0) 72%); box-shadow: 0 0 22px rgba(255, 199, 90, 0.75); }
.ht-wisp::after { content: ''; position: absolute; right: 60%; top: 50%; width: 46px; height: 10px; margin-top: -5px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 199, 90, 0), rgba(255, 210, 122, 0.75)); }
.ht-move .ht-wisp { animation: htmove 3.2s ease-in-out infinite; }
@keyframes htmove { 0% { left: 18%; top: 62%; } 25% { left: 45%; top: 35%; } 50% { left: 78%; top: 52%; } 75% { left: 50%; top: 70%; } 100% { left: 18%; top: 62%; } }
.ht-path { left: 15%; right: 15%; top: 50%; height: 0; border-top: 2px dotted rgba(207, 227, 255, 0.25); }
.ht-shade { width: 34px; height: 34px; border-radius: 50%; left: 50%; top: 50%; margin: -17px 0 0 -17px; background: radial-gradient(circle at 50% 45%, #3a1630, #1a0a18 70%);
  box-shadow: 0 0 0 2px #ff5c9d, 0 0 14px rgba(255, 92, 157, 0.6); animation: htshade 2.4s ease-in infinite; }
.ht-shade::before, .ht-shade::after { content: ''; position: absolute; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: #ffd0e3; }
.ht-shade::before { left: 9px; } .ht-shade::after { right: 9px; }
.ht-shade.b { left: 72%; top: 34%; animation-delay: 0.25s; }
@keyframes htshade { 0%, 38% { transform: scale(1); opacity: 1; } 46% { transform: scale(1.5); opacity: 0.6; box-shadow: 0 0 0 3px #fff, 0 0 30px #ff5c9d; } 54%, 85% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ht-dash .ht-wisp { animation: htdash 2.4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes htdash { 0%, 25% { left: 18%; top: 62%; } 50% { left: 85%; top: 28%; } 75%, 100% { left: 85%; top: 28%; opacity: 0; } }
.ht-spark { width: 16px; height: 22px; top: 58%; background: linear-gradient(180deg, #c8fbff, #39c6ff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 6px #73f2ff); animation: htspark 3s ease infinite; }
.ht-spark.a { left: 36%; } .ht-spark.b { left: 56%; top: 40%; animation-delay: 0.6s; } .ht-spark.c { left: 76%; animation-delay: 1.2s; }
@keyframes htspark { 0%, 20% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.8); opacity: 0; } 90% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ht-spark .ht-wisp, .ht-spark-wisp {}
.ht-spark-scene, .ht-scene.ht-spark .ht-wisp { animation: htcollect 3s ease-in-out infinite; }
@keyframes htcollect { 0% { left: 18%; top: 58%; } 25% { left: 36%; top: 58%; } 45% { left: 56%; top: 40%; } 65% { left: 76%; top: 58%; } 100% { left: 18%; top: 58%; } }
.ht-bar { left: 20%; right: 20%; top: 14%; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ht-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, #39c6ff, #c8fbff); animation: htbar 3s steps(3, end) infinite; }
@keyframes htbar { from { width: 0; } to { width: 100%; } }
.ht-boss { width: 64px; height: 64px; left: 62%; top: 50%; margin: -32px 0 0 -32px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #4b2a78, #1d0f33 70%);
  box-shadow: 0 0 0 3px #c08cff, 0 0 26px rgba(192, 140, 255, 0.6); animation: htboss 3.4s ease-in-out infinite; }
.ht-ring { inset: -12px; border-radius: 50%; border: 4px solid #ffd166; opacity: 0; animation: htring 3.4s ease-in-out infinite; }
@keyframes htring { 0%, 35% { opacity: 0; transform: scale(1.3); } 45%, 70% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes htboss { 0%, 66% { transform: none; } 70% { transform: scale(0.85); filter: brightness(2); } 80%, 100% { transform: none; filter: none; } }
.ht-boss ~ .ht-wisp { animation: htstrike 3.4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes htstrike { 0%, 52% { left: 18%; top: 50%; } 70% { left: 88%; top: 50%; } 90%, 100% { left: 88%; top: 50%; opacity: 0; } }
.ht-title { margin: 6px 0 0; font-size: 20px; color: var(--gold); }
.ht-text { margin: 0; font-size: 16px; line-height: 1.45; color: #e9e5ff; min-height: 3em; }
.ht-dots { display: flex; gap: 8px; justify-content: center; }
.ht-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background var(--t-fast), transform var(--t-fast); }
.ht-dots i.on { background: var(--gold); transform: scale(1.25); box-shadow: 0 0 8px rgba(255, 199, 90, 0.7); }
#htSkip { align-self: center; }
body.reduced .ht-scene *, body.reduced .ht-scene *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
@media (max-height: 520px) { .howto-panel { gap: 6px; padding-top: 10px; padding-bottom: 10px; } .ht-stage { height: 110px; } .ht-text { font-size: 14px; min-height: 0; } }

/* ---------------------------------------------------------------- Modes: three simple sections; columns never wider than the panel */
.modes-panel { width: min(900px, 100%) !important; }
.mode-h { margin: 6px 0 -2px; text-align: left; font-size: 12px; font-weight: 800; letter-spacing: var(--sc-track); text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.mode-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 199, 90, 0.4), transparent); }
.mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; }
.mode-grid.one { grid-template-columns: minmax(0, 1fr) !important; }
.mode-card { min-width: 0; grid-template-columns: 56px minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto; row-gap: 3px; padding: 12px 14px; overflow-wrap: anywhere;
  animation: mcin 0.45s var(--ease-out) both; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.mode-grid > .mode-card:nth-child(2) { animation-delay: 0.05s; } .mode-grid > .mode-card:nth-child(3) { animation-delay: 0.1s; }
@keyframes mcin { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.mode-card .mc-ico { grid-column: 1; grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 15px; overflow: hidden; display: grid; place-items: center; }
.mode-card .mc-ico img { width: 48px; height: 48px; object-fit: contain; position: relative; z-index: 1; transition: transform 0.3s var(--ease-back); }
.mode-card .mc-ico:has(img[src]:not([data-missing]))::before, .mode-card .mc-ico:has(img[src]:not([data-missing]))::after { display: none; }
.mode-card b { grid-column: 2; grid-row: 1; align-self: end; }
.mode-card .mc-tag { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: 0.02em;
  background: rgba(110, 242, 168, 0.12); color: #9ff6c8; border: 1px solid rgba(110, 242, 168, 0.3); }
.mode-card .mc-tag.on { background: rgba(111, 231, 255, 0.12); color: #a8f3ff; border-color: rgba(111, 231, 255, 0.35); }
.mode-card .mc-d { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; font-size: 14px; color: #cfcaf2; }
.mode-card .mc-net { grid-row: 4; }
.mode-card .mc-go { grid-column: 1 / -1; grid-row: 5; justify-self: stretch; text-align: center; margin-top: 8px; padding: 9px 16px; }
.mode-grid.one .mode-card { grid-template-columns: 56px minmax(0, 1fr) auto !important; }
.mode-grid.one .mode-card .mc-d { grid-column: 2; grid-row: 3; margin-top: 2px; }
.mode-grid.one .mode-card .mc-go { grid-column: 3; grid-row: 1 / 4; align-self: center; margin: 0; padding: 12px 26px; font-size: 15px; }
button.mode-card:hover .mc-ico img, button.mode-card:focus-visible .mc-ico img { transform: scale(1.12) rotate(-4deg); }
button.mode-card:hover, button.mode-card:focus-visible { box-shadow: 0 8px 26px rgba(80, 200, 255, 0.16); }
button.mode-card:active .mc-go { filter: brightness(0.9); transform: scale(0.97); }
body.reduced .mode-card { animation: none; } body.reduced button.mode-card:hover .mc-ico img { transform: none; }
@media (max-width: 760px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) {
  .mode-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .mode-card { grid-template-columns: 48px minmax(0, 1fr) auto !important; padding: 10px 12px; }
  .mode-card .mc-ico { width: 46px; height: 46px; } .mode-card .mc-ico img { width: 42px; height: 42px; }
  .mode-card .mc-d { grid-column: 2; grid-row: 3; margin-top: 2px; font-size: 13px; }
  .mode-card .mc-go { grid-column: 3; grid-row: 1 / 4; align-self: center; margin: 0; padding: 8px 14px; }
  .mode-card .mc-net { grid-column: 2; }
}
@media (max-height: 520px) and (min-width: 481px) { /* phones held sideways: compact cards, the whole panel scrolls */
  .mode-card { padding: 8px 10px; row-gap: 1px; } .mode-card .mc-d { font-size: 12px; margin-top: 2px; }
  .mode-card .mc-go { margin-top: 5px; padding: 6px 12px; } .mode-h { margin-top: 2px; }
  .mode-card .mc-ico { width: 42px; height: 42px; } .mode-card .mc-ico img { width: 38px; height: 38px; }
}
.mode-card .mc-ico { transform: none !important; }

/* ---------------------------------------------------------------- HUD polish: a soft backing for legibility, living bars, a gold score */
#hud::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 92px; background: linear-gradient(180deg, rgba(5, 3, 13, 0.5), rgba(5, 3, 13, 0)); pointer-events: none; }
.hud-wave .bar { position: relative; overflow: hidden; }
.hud-wave .bar-fill { position: relative; background: linear-gradient(90deg, #3fb8ff, #73f2ff 70%, #e8fdff); box-shadow: 0 0 10px rgba(115, 242, 255, 0.55); }
.hud-wave .bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) no-repeat; background-size: 28% 100%; animation: barshine 2.8s linear infinite; }
@keyframes barshine { from { background-position: -40% 0; } to { background-position: 140% 0; } }
#hud.boss .hud-wave .bar-fill, .boss .hud-wave .bar-fill { background: linear-gradient(90deg, #8a5bff, #c79bff 70%, #f1e3ff); box-shadow: 0 0 12px rgba(183, 139, 255, 0.7); }
#score { background: linear-gradient(180deg, #fff6dc, #ffc75a 75%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #05030d) drop-shadow(0 0 8px rgba(255, 190, 90, 0.3)); }
#mult { text-shadow: 0 0 12px rgba(255, 140, 200, 0.45); }
body.reduced .hud-wave .bar-fill::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .hud-wave .bar-fill::after { animation: none; display: none; } }
/* upright phones: the menu is one left-aligned column, centred as a block (icons line up) */
body.tall .t-menu { align-items: stretch; width: min(340px, 92vw); margin-left: auto; margin-right: auto; }
body.tall .t-menu .tlink:not(.play) { justify-content: start; }
body.tall .t-menu .tlink.play { align-self: center; }
.tlink .sfx { white-space: nowrap; }
@media (max-width: 480px) { #multiBtn .sfx { display: none; } }

/* ---------------------------------------------------------------- Smoothness: only transform/opacity animate (no layout or repaint per frame) */
.ht-stage { container-type: size; }
.ht-scene .ht-wisp { left: 0; top: 0; margin: -13px 0 0 -13px; will-change: transform; }
.ht-move .ht-wisp { animation: htmove2 3.2s ease-in-out infinite; }
@keyframes htmove2 { 0%, 100% { transform: translate(18cqw, 62cqh); } 25% { transform: translate(45cqw, 35cqh); } 50% { transform: translate(78cqw, 52cqh); } 75% { transform: translate(50cqw, 70cqh); } }
.ht-dash .ht-wisp { animation: htdash2 2.4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes htdash2 { 0%, 25% { transform: translate(18cqw, 62cqh); opacity: 1; } 50% { transform: translate(85cqw, 28cqh); opacity: 1; } 75%, 100% { transform: translate(85cqw, 28cqh); opacity: 0; } }
.ht-scene.ht-spark .ht-wisp { animation: htcollect2 3s ease-in-out infinite; }
@keyframes htcollect2 { 0%, 100% { transform: translate(18cqw, 58cqh); } 25% { transform: translate(36cqw, 58cqh); } 45% { transform: translate(56cqw, 40cqh); } 65% { transform: translate(76cqw, 58cqh); } }
.ht-boss ~ .ht-wisp { animation: htstrike2 3.4s cubic-bezier(.6, 0, .2, 1) infinite !important; }
@keyframes htstrike2 { 0%, 52% { transform: translate(18cqw, 50cqh); opacity: 1; } 70% { transform: translate(88cqw, 50cqh); opacity: 1; } 90%, 100% { transform: translate(88cqw, 50cqh); opacity: 0; } }
.ht-bar b { width: 100%; transform-origin: 0 50%; animation: htbar2 3s steps(3, end) infinite; }
@keyframes htbar2 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hud-wave .bar-fill::after { background: none; inset: 0 auto 0 0; width: 26%; transform: translateX(-120%);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: barshine2 2.8s linear infinite; will-change: transform; }
@keyframes barshine2 { from { transform: translateX(-120%); } to { transform: translateX(420%); } }
#score { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffe2a6; filter: none;
  text-shadow: 0 1px 2px #05030d, 0 0 14px rgba(255, 190, 90, 0.35); }
/* one easing and one speed family for every hover and press, so the menus feel consistent */
.tlink, .btn, .mode-card, .cx-mod, .bp-opt, .rx-past, .kb-btn, .ti-i { transition-timing-function: var(--ease-out); }
.mc-ranked img { transform: scale(0.84); } .mc-rift img { transform: scale(1.12); } /* even out the pictures' apparent sizes */
button.mode-card:hover .mc-ranked img { transform: scale(0.94) rotate(-4deg); } button.mode-card:hover .mc-rift img { transform: scale(1.24) rotate(-4deg); }

/* ---------------------------------------------------------------- Sizes: no tap target under 40 px, no text under 11 px, no clipped buttons */
@media (max-height: 520px) { .t-menu .tlink:not(.play) { min-height: 40px; } }
.mode-card .mc-ico { overflow: visible; }
.cx-panel > .row .btn, .bp-panel > .row .btn { white-space: normal; line-height: 1.15; min-height: 48px; padding-left: 12px; padding-right: 12px; }
.help-actions { flex-wrap: wrap; }
.help-actions .btn { flex: 1 1 150px; white-space: normal; line-height: 1.15; }
body.tall .t-menu { width: min(320px, 100%); }
body.tall .t-col { padding-left: 16px; padding-right: 16px; box-sizing: border-box; max-width: 100%; }

/* ---------------------------------------------------------------- Icons (src/icons.js): hand-built line art, two colours */
.gi { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  --a: #ffc75a; --b: #73f2ff; filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--a) 55%, transparent)); }
.gi .a { stroke: var(--a); } .gi .b { stroke: var(--b); } .gi .fa { fill: var(--a); stroke: none; } .gi .fb { fill: var(--b); stroke: none; }
.gi .s { opacity: 0.45; } .gi .w { stroke-width: 3.4; } .gi .t { stroke-width: 1.8; }
[data-fam="dash"] .gi, .gi[data-fam="dash"] { --a: #ffc75a; --b: #fff1c4; }
[data-fam="spark"] .gi, .gi[data-fam="spark"] { --a: #73e6ff; --b: #e8fdff; }
[data-fam="guard"] .gi, .gi[data-fam="guard"] { --a: #8ff0c0; --b: #e6fff2; }
[data-fam="prism"] .gi, .gi[data-fam="prism"] { --a: #c9a2ff; --b: #f2e8ff; }
[data-fam="filler"] .gi { --a: #ffd27a; --b: #ffffff; }
/* boon icons as SVG images: a soft glow in their family colour */
img.ico-svg { filter: drop-shadow(0 0 3px rgba(255, 199, 90, 0.45)); }
img.ico-svg.fam-spark { filter: drop-shadow(0 0 3px rgba(115, 230, 255, 0.5)); }
img.ico-svg.fam-guard { filter: drop-shadow(0 0 3px rgba(143, 240, 192, 0.45)); }
img.ico-svg.fam-prism { filter: drop-shadow(0 0 3px rgba(201, 162, 255, 0.5)); }

/* ---------------------------------------------------------------- Line-art icons in place */
.mc-ico::before, .mc-ico::after { display: none !important; }
.mode-card .mc-ico { background: radial-gradient(circle at 50% 40%, rgba(255, 199, 90, 0.12), rgba(9, 7, 22, 0.7) 70%); }
.mode-card .mc-ico .ico { width: 40px; height: 40px; display: block; transition: transform 0.3s var(--ease-back); }
button.mode-card:hover .mc-ico .ico, button.mode-card:focus-visible .mc-ico .ico { transform: scale(1.12) rotate(-4deg); }
.ti-i .gi { width: 22px; height: 22px; }
.ti-style .gi { --a: var(--sw, #ffc75a); }
.fp-ico { display: grid; place-items: center; }
.fp-ico .gi { width: 30px; height: 30px; }
.fp-create::before, .fp-joinic::before { display: none; }
.rx-ghost .cx-mod { padding-left: 52px; }
.rx-ghost .cx-mod::before { left: auto; right: 14px; top: 50%; margin-top: -7px; } /* the checkbox moves right; the ghost icon leads */
.rx-gi { position: absolute; left: 12px; top: 50%; width: 28px; height: 28px; margin-top: -14px; }
.rk-badge2 { flex: none; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.07), rgba(9, 7, 22, 0.6) 72%); border: 1px solid var(--line); }
.rk-badge2 .gi { width: 56px; height: 56px; }
.rk-badge2.unplaced .gi { opacity: 0.35; filter: grayscale(1); }
.rk-mini { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.rk-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 10px; }
.rk-step { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: rgba(11, 9, 28, 0.55); border: 1px solid var(--line); }
.rk-step i { width: 40px; height: 40px; }
.rk-step b { font-size: 12px; } .rk-step small { font-size: 11px; color: var(--dim); }
@media (max-width: 420px) { .rk-step i { width: 32px; height: 32px; } .rk-step b { font-size: 11px; } }
@media (max-width: 480px) { .mode-card .mc-ico .ico { width: 34px; height: 34px; } }
.set-foot .btn, .row .btn { white-space: normal; line-height: 1.15; }
.lobby-list:not(.has-x) .lb-row { grid-template-columns: auto 1fr minmax(150px, auto); }
.lobby-list:not(.has-x) .lb-x-gap { display: none; }

/* ---------------------------------------------------------------- Footers: the panel's action row stays at its bottom edge on a solid backing */
.panel > .row:last-child, .panel > .panel-foot:last-child { position: sticky; bottom: calc(-1 * clamp(16px, 3vh, 30px)); z-index: 3; margin-top: 2px;
  padding-top: 12px; padding-bottom: clamp(16px, 3vh, 30px); margin-bottom: calc(-1 * clamp(16px, 3vh, 30px));
  background: linear-gradient(180deg, rgba(12, 10, 30, 0), rgba(12, 10, 30, 0.97) 14px); }
.panel-foot .btn { flex: 1; }
/* Style: each trail shows its colour as a small glowing wisp */
.sty.trail .sw { grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 62% 38%, #fff 0 16%, var(--sw) 42%, color-mix(in srgb, var(--sw) 20%, transparent) 72%); box-shadow: 0 0 10px color-mix(in srgb, var(--sw) 70%, transparent); }
.sty.trail .sw::after { content: ''; position: absolute; right: 60%; top: 50%; width: 16px; height: 5px; margin-top: -2.5px; border-radius: 5px; background: linear-gradient(90deg, transparent, var(--sw)); opacity: 0.8; }
.sty.trail.locked .sw { filter: grayscale(0.7) brightness(0.7); }
.sty.trail .sw[style*="conic-gradient"] { background: var(--sw); box-shadow: 0 0 10px #b78bff; }
.sty.trail .sw[style*="conic-gradient"]::after { background: linear-gradient(90deg, transparent, #ff6bd0); }
.panel > .row:last-child, .panel > .panel-foot:last-child { background: linear-gradient(180deg, rgba(12, 10, 30, 0), rgb(12, 10, 30) 12px); }
/* icon shading: gradient stops follow the icon's two colours (inline icons) */
.gi .sa { stop-color: var(--a); } .gi .sb { stop-color: var(--b); } .gi .sd { stop-color: color-mix(in srgb, var(--a) 55%, #140c2a); }
.gi { filter: none; } /* each icon carries its own light bloom */
img.ico-svg { filter: none !important; }
/* drawn pictures in icon spots */
[data-ico] > img.pic { display: block; width: 100%; height: 100%; object-fit: contain; }
.ti-i > img.pic { width: 24px; height: 24px; }
.fp-ico > img.pic { width: 34px; height: 34px; }
.mode-card .mc-ico .ico { width: 46px; height: 46px; }
@media (max-width: 480px) { .mode-card .mc-ico .ico { width: 40px; height: 40px; } }
/* press feedback: a small ring of light where you pressed */
.press-fx { position: fixed; z-index: 60; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 226, 160, 0.9); box-shadow: 0 0 12px rgba(255, 199, 90, 0.7), inset 0 0 8px rgba(255, 240, 200, 0.6); animation: pressfx 0.45s var(--ease-out) forwards; }
@keyframes pressfx { from { transform: scale(0.6); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
body.reduced .press-fx { animation-name: pressfade; } @keyframes pressfade { from { opacity: 0.9; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .press-fx { animation-name: pressfade; } }
.style-arenas { margin: 0; font-size: 13px; color: var(--dim); text-align: left; }
/* hints wrap onto two lines instead of running off the bubble */
#hint { white-space: normal; text-align: center; width: max-content; max-width: min(760px, 86%); border-radius: 18px; line-height: 1.35; }
/* living pictures: mode icons float, menu icons pop on hover (calm under Reduced motion) */
.mode-card .mc-ico .ico { animation: icofloat 3.4s ease-in-out infinite; }
.mode-grid > .mode-card:nth-child(2) .mc-ico .ico { animation-delay: -1.1s; } .mode-grid > .mode-card:nth-child(3) .mc-ico .ico { animation-delay: -2.2s; }
@keyframes icofloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
button.mode-card:hover .mc-ico .ico { animation-duration: 1.2s; }
.ti-i > img.pic { transition: transform 0.3s var(--ease-back); }
.tlink:hover .ti-i > img.pic, .tlink:focus-visible .ti-i > img.pic { transform: scale(1.18) rotate(-8deg); }
.fp-big:hover .fp-ico > img.pic { transform: scale(1.12); transition: transform 0.3s var(--ease-back); }
body.reduced .mode-card .mc-ico .ico, body.reduced .tlink:hover .ti-i > img.pic { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .mode-card .mc-ico .ico { animation: none; } }
.mc-party [data-ico] > img.pic, .mc-ico.mc-party img.pic { transform: scale(1.3); } /* a wide row of four reads small at the same box size */

/* Results: where the points came from (one bar split by source, then labelled chips) */
.rc-split { display: flex; width: 100%; height: 10px; border-radius: 6px; overflow: hidden; margin: 2px 0 6px; background: rgba(255, 255, 255, .06); }
.rc-split i { display: block; width: var(--w); background: var(--c); transform-origin: left; animation: rcGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
.rc-split i + i { box-shadow: -1px 0 0 rgba(10, 8, 24, .8); }
.rc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.rc-chip small { opacity: .65; font-weight: 600; margin-left: 2px; }
@keyframes rcGrow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .rc-split i { animation: none; } }

/* Title: Play is the one solid, bright button: the obvious first action. A slow breathing glow, nothing that moves it. */
.tlink.play { color: #2a1606; font-weight: 800; background: linear-gradient(180deg, #ffe08a, #ffb347); border: 1px solid #fff0c4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(160, 80, 10, 0.35), 0 8px 26px rgba(255, 160, 60, 0.35); animation: tin 0.5s var(--ease-out) var(--d, 0s) forwards, playbreathe 2.8s ease-in-out 1s infinite; }
.tlink.play:hover, .tlink.play:focus-visible { color: #1c0e02; background: linear-gradient(180deg, #fff0b0, #ffc25e); border-color: #fff6d8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 5px rgba(255, 199, 90, 0.2), 0 10px 32px rgba(255, 170, 70, 0.45); }
.tlink.play:active { background: linear-gradient(180deg, #ffd06a, #f0a03a); }
@keyframes playbreathe { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(160, 80, 10, 0.35), 0 8px 36px rgba(255, 170, 70, 0.6); } }
body.reduced .tlink.play { animation: none; }
@media (prefers-reduced-motion: reduce) { .tlink.play { animation: none; } }

/* Story: a list of chapters (done, open, next, locked) and a short talk card before a chapter */
.st-panel { max-width: 760px; }
.st-list { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 10px; }
.st-ch-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(190, 180, 255, 0.14); animation: rise 0.4s var(--ease-out) both; }
.st-ch-card:nth-child(2) { animation-delay: 0.05s; } .st-ch-card:nth-child(3) { animation-delay: 0.1s; } .st-ch-card:nth-child(4) { animation-delay: 0.15s; } .st-ch-card:nth-child(5) { animation-delay: 0.2s; }
.st-ch-card.next { border-color: rgba(255, 205, 120, 0.7); background: linear-gradient(90deg, rgba(255, 199, 90, 0.1), rgba(255, 255, 255, 0.03)); }
.st-ch-card.locked { opacity: 0.55; }
.st-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #ffe6b0; border: 2px solid rgba(255, 205, 120, 0.6); }
.st-ch-card.done .st-num { background: #8ff0c0; color: #102018; border-color: #8ff0c0; }
.st-ch-card.locked .st-num { color: rgba(220, 215, 255, 0.6); border-color: rgba(220, 215, 255, 0.3); }
.st-body b { display: block; font-size: 16px; color: #f4efff; }
.st-pre { margin: 3px 0 4px; font-size: 14px; color: rgba(225, 220, 255, 0.82); line-height: 1.35; }
.st-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: rgba(200, 195, 240, 0.75); }
.st-rew { color: #ffd27a; }
.st-ch-card.done .st-rew { color: #8ff0c0; }
.st-go { min-width: 96px; }
.st-talk { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 4, 16, 0.72); padding: 16px; z-index: 5; }
.st-talk[hidden] { display: none; }
.st-talk-box { width: min(520px, 100%); padding: 22px 24px; border-radius: 18px; background: #161029; border: 1px solid rgba(255, 205, 120, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: rise 0.35s var(--ease-out) both; }
.st-ch { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #ffd27a; }
.st-talk-box h3 { margin: 2px 0 14px; font-size: 22px; color: #fff4dc; }
.st-who { margin: 0; font-size: 13px; font-weight: 700; color: #8ff3ff; }
.st-line { margin: 4px 0 14px; font-size: 18px; line-height: 1.45; color: #f4efff; min-height: 2.9em; }
.st-goal { margin: 0 0 16px; font-size: 14px; color: rgba(225, 220, 255, 0.8); }
@media (max-width: 560px) { .st-ch-card { grid-template-columns: 34px minmax(0, 1fr); } .st-go { grid-column: 1 / -1; } .st-num { width: 32px; height: 32px; font-size: 15px; } }
body.reduced .st-ch-card, body.reduced .st-talk-box { animation: none; }
@media (prefers-reduced-motion: reduce) { .st-ch-card, .st-talk-box { animation: none; } }
.st-body { text-align: left; }

/* Draft cards: no second frame round the hex icon; a soft glow in the card's family colour from behind the icon, and
   the icon lifts toward you when the card is hovered or selected. */
.card img { padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.card { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--fc, #7d6ed2) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(34, 27, 70, 0.96), rgba(14, 11, 32, 0.96)); }
.card:hover img, .card.sel img { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--fc, #ffc75a) 45%, transparent)); }
.card.sel { border-color: color-mix(in srgb, var(--fc, #ffc75a) 85%, white); }
body.reduced .card:hover img, body.reduced .card.sel img { transform: none; }
.card::before { display: none; } /* the old round-frame sweep: the hex icons have their own frame */

/* Big screens: menus were sized for phones and looked small on a laptop or monitor. Scale the panels up as a whole
   (type, spacing and controls together), only where there is room for them. */
@media (min-width: 1100px) and (min-height: 760px) { .screen > .panel { zoom: 1.15; } }
@media (min-width: 1500px) and (min-height: 920px) { .screen > .panel { zoom: 1.3; } }

/* Records: an achievements summary (count and bar) with filters */
.ach-head { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 12px; margin: 8px 0 2px; text-align: left; }
.ach-head b { font-size: 15px; color: #ffe6b0; white-space: nowrap; }
.ach-head .gbar { position: relative; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ach-head .gbar > span { position: absolute; inset: 0; width: calc(var(--f, 0) * 100%); background: linear-gradient(90deg, #ffb347, #ffe08a); border-radius: 4px; }
.ach-filter { display: flex; gap: 4px; }
.ach-filter button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(190, 180, 255, 0.25); background: transparent; color: rgba(225, 220, 255, 0.8); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ach-filter button.on { background: rgba(255, 199, 90, 0.16); border-color: rgba(255, 205, 120, 0.7); color: #ffe6b0; }
.ach-filter button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
#recList li.hide { display: none; }
@media (max-width: 560px) { .ach-head { grid-template-columns: 1fr; } }

/* One primary style everywhere (like the title's Play): a solid, bright gold button with dark text, so the main
   action on every screen is obvious. Disabled stays visibly off. */
.btn.primary { color: #2a1606; font-weight: 800; letter-spacing: 0.04em; background: linear-gradient(180deg, #ffe08a, #ffb347); border-color: #fff0c4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(160, 80, 10, 0.35), 0 8px 24px rgba(255, 160, 60, 0.28); text-shadow: none; }
.btn.primary:hover:not(:disabled), .btn.primary:focus-visible { color: #1c0e02; background: linear-gradient(180deg, #fff0b0, #ffc25e); border-color: #fff6d8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 4px rgba(255, 199, 90, 0.2), 0 10px 30px rgba(255, 170, 70, 0.4); }
.btn.primary:active:not(:disabled) { background: linear-gradient(180deg, #ffd06a, #f0a03a); box-shadow: inset 0 2px 6px rgba(120, 60, 0, 0.35); }
.btn.primary:disabled { background: rgba(255, 199, 90, 0.12); color: rgba(255, 230, 176, 0.5); border-color: rgba(255, 205, 120, 0.25); box-shadow: none; }
.btn.primary kbd { background: rgba(42, 22, 6, 0.14); border-color: rgba(42, 22, 6, 0.35); color: #2a1606; }

/* The wordmark: a heavy, forward-leaning DASH (speed), a spaced cyan BLAST, and a light streak along the line. */
.wm-top { font-weight: 800; font-style: italic; letter-spacing: 0.06em; margin-right: -0.06em; transform: skewX(-6deg); font-size: clamp(60px, 13vh, 108px); }
.wm-bot { font-weight: 800; letter-spacing: 0.72em; margin-right: -0.72em; color: #9ff6ff; opacity: 0.95; }
@keyframes wmspace { 50% { letter-spacing: 0.8em; margin-right: -0.8em; text-shadow: 0 0 14px rgba(115, 242, 255, 0.6); } }
body.tall .wm-top { letter-spacing: 0.05em; margin-right: -0.05em; }
.wm-top { padding: 0 0.14em 0.04em 0.02em; margin-right: -0.2em; } /* room for the italic overhang: the gradient only paints inside the box */

/* Collection: trails as a flowing ribbon of light (not flat dots); foes and bosses animate in their cards */
.trail-art { width: 100%; max-width: 120px; height: auto; overflow: visible; }
.col-art.big .trail-art { max-width: 200px; }
.trail-art path { fill: none; stroke-linecap: round; }
.trail-art .tr-glow { stroke-width: 12; opacity: 0.35; filter: blur(3px); }
.trail-art .tr-core { stroke-width: 5; stroke-dasharray: 10 6; animation: trflow 1.2s linear infinite; }
.trail-art .tr-head { filter: drop-shadow(0 0 6px currentColor); animation: trbob 2.4s ease-in-out infinite; }
@keyframes trflow { to { stroke-dashoffset: -32; } }
@keyframes trbob { 50% { transform: translateY(-2px); } }
.locked .trail-art, .col-card:not(.done) .trail-art { filter: saturate(0.4) brightness(0.75); }
body.reduced .trail-art .tr-core, body.reduced .trail-art .tr-head { animation: none; }
@media (prefers-reduced-motion: reduce) { .trail-art .tr-core, .trail-art .tr-head { animation: none; } }
/* Style trail swatches: a plain colour each (a gradient inside a gradient drew nothing: Lampwick, Starless); Rainbow keeps its full spectrum */
.sty.trail .sw[style*="conic-gradient"] { background: var(--swfull); }
/* Style preview: a darker night floor so the trail stands out, and the wisp's glow in the trail's own colour */
.style-prev::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 70% 40%, rgba(10, 8, 26, 0.15), rgba(6, 4, 16, 0.7)); }
.style-prev .sp-wisp { background: radial-gradient(circle at 40% 38%, #fff, color-mix(in srgb, var(--sh, #ffd27a) 70%, #fff) 55%, var(--sh, #ff9f3a)); box-shadow: 0 0 22px var(--sh, #ffd27a), 0 0 50px color-mix(in srgb, var(--sh, #ffd27a) 50%, transparent); }
.style-prev .sp-trail { height: 10px; filter: drop-shadow(0 0 10px var(--sh, #ffd27a)); }

/* Mode cards: the whole card is the button. Its colour says what kind of mode it is; the action is a quiet label
   ("Play ›") that lights up on hover, not a gold slab on every card. */
.mode-card { --ac: #ffc75a; background: radial-gradient(140% 90% at 0% 0%, color-mix(in srgb, var(--ac) 14%, transparent), transparent 55%), linear-gradient(180deg, rgba(30, 24, 62, 0.95), rgba(14, 11, 32, 0.95));
  border: 1px solid color-mix(in srgb, var(--ac) 28%, rgba(125, 110, 210, 0.3)); transition: transform 0.18s var(--ease-out), border-color 0.18s, box-shadow 0.18s; }
.mode-card[data-mode="story"] { --ac: #ffb35c; } .mode-card[data-mode="solo"] { --ac: #ffd27a; }
.mode-card[data-mode="party"] { --ac: #8ff0c0; } .mode-card[data-mode="friends"] { --ac: #73e6ff; } .mode-card[data-mode="ranked"] { --ac: #c9a2ff; }
.mode-card[data-mode="gauntlet"] { --ac: #ffd27a; } .mode-card[data-mode="rift"] { --ac: #73e6ff; } .mode-card[data-mode="practice"] { --ac: #ff8a9a; }
.mode-card:hover, .mode-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ac) 75%, white); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 26px color-mix(in srgb, var(--ac) 22%, transparent); }
.mode-card:active { transform: translateY(0) scale(0.99); }
.mode-card .mc-go { background: none !important; color: var(--ac) !important; box-shadow: none !important; border: 0 !important; padding: 4px 0 !important; width: auto !important;
  justify-self: end; align-self: end; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mode-card:hover .mc-go, .mode-card:focus-visible .mc-go { text-decoration: underline; text-underline-offset: 4px; }
.mode-card .mc-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent), 0 0 18px color-mix(in srgb, var(--ac) 14%, transparent); }
.mode-card .mc-d { color: rgba(225, 220, 255, 0.82); }
body.reduced .mode-card:hover { transform: none; }

/* Profile chip: an orb in your wisp's colour with your initial, your badge emblem on its corner, then name and title */
.profile-chip { --pc: #ffc75a; padding: 6px 18px 6px 6px; gap: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 14%, rgba(18, 14, 40, 0.9)), rgba(18, 14, 40, 0.88) 60%);
  border-color: color-mix(in srgb, var(--pc) 40%, rgba(125, 110, 210, 0.35)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.profile-chip:hover, .profile-chip:focus-visible { border-color: color-mix(in srgb, var(--pc) 85%, white); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, rgba(28, 22, 60, 0.95)), rgba(28, 22, 60, 0.92) 60%); }
.pc-av { position: relative; width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #1a1006;
  background: radial-gradient(circle at 38% 32%, #fff, color-mix(in srgb, var(--pc) 75%, #fff) 45%, var(--pc) 75%, color-mix(in srgb, var(--pc) 60%, #000));
  box-shadow: 0 0 0 2px rgba(10, 8, 24, 0.9), 0 0 0 3.5px color-mix(in srgb, var(--pc) 70%, transparent), 0 0 18px color-mix(in srgb, var(--pc) 55%, transparent); }
.pc-av img { position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.profile-chip #pcName { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; }
.profile-chip #pcTitle { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc); opacity: 0.95; }
.profile-chip #pcBadge { display: none; } /* the emblem now sits on the avatar */

/* Title menu: each entry has its own accent; the icon sits in a softly tinted tile that lights up in that colour on
   hover or focus, and the label nudges right. */
.t-menu .tlink { --ac: #c9a2ff; }
#storyBtn { --ac: #ffb35c; } #multiBtn { --ac: #73e6ff; } #trailBtn { --ac: #ff8ad8; } #collectionBtn { --ac: #c9a2ff; }
#recordsBtn { --ac: #ffd27a; } #howBtn { --ac: #73e6ff; } #titleSettings { --ac: #9fb4ff; }
.ti-i { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 20%, rgba(255, 255, 255, 0.03)), rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.16s var(--ease-out), box-shadow 0.16s, border-color 0.16s, background 0.16s; }
.ti-i img { width: 28px; height: 28px; }
.tlink:hover .ti-i, .tlink:focus-visible .ti-i { background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 34%, transparent), color-mix(in srgb, var(--ac) 10%, transparent));
  border-color: color-mix(in srgb, var(--ac) 80%, white); box-shadow: 0 0 16px color-mix(in srgb, var(--ac) 45%, transparent); transform: translateY(-1px) scale(1.06); }
.t-menu .tlink .tl { transition: transform 0.16s var(--ease-out), color 0.16s; }
.t-menu .tlink:hover .tl, .t-menu .tlink:focus-visible .tl { transform: translateX(3px); color: #fff; }
body.reduced .t-menu .tlink:hover .tl { transform: none; }
@media (max-height: 520px) { .ti-i { width: 30px; height: 30px; } .ti-i img { width: 24px; height: 24px; } }

/* Logo, refined: DASH in a warm vertical gradient with a crisp edge, a tapered speed slash under it, and BLAST set
   larger and tighter in a cyan-to-white gradient so the two words line up as one mark. */
.wm-top { background-image: linear-gradient(180deg, #fff7dc 0%, #ffd987 38%, #ffb347 72%, #e8892c 100%), linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60% 100%);
  background-size: 100% 100%, 260% 100%; background-blend-mode: screen; -webkit-text-stroke: 1px rgba(90, 40, 0, 0.35);
  filter: drop-shadow(0 2px 0 rgba(60, 25, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 170, 70, 0.35)); }
@keyframes wmshine { 0% { background-position: 0 0, 100% 0; } 45%, 100% { background-position: 0 0, 0 0; } }
@keyframes wmglow { 50% { filter: drop-shadow(0 2px 0 rgba(60, 25, 0, 0.55)) drop-shadow(0 0 32px rgba(255, 180, 80, 0.55)); } }
.wm-line { height: 3px; width: clamp(180px, 34vh, 300px); border-radius: 3px; transform: skewX(-30deg);
  background: linear-gradient(90deg, rgba(255, 199, 90, 0), #ffd27a 30%, #fff6d8 55%, #73e6ff 80%, rgba(115, 230, 255, 0)); box-shadow: 0 0 12px rgba(255, 199, 90, 0.45); }
.wm-bot { font-size: clamp(20px, 4vh, 30px); letter-spacing: 0.5em; margin-right: -0.5em; padding-left: 0.12em;
  background: linear-gradient(180deg, #ffffff, #9ff6ff 60%, #4fd6ee); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(115, 230, 255, 0.45)); text-shadow: none; }
@keyframes wmspace { 50% { letter-spacing: 0.56em; margin-right: -0.56em; } }
.wm-top { -webkit-text-stroke: 0; } /* a stroke shows the variable font's overlapping contours inside D and A */

/* Collection cards: what each foe does, under its name; met foes sit on a soft glow in a night "window" */
.col-card .sub { font-size: 12px; font-weight: 650; color: rgba(200, 195, 240, 0.75); line-height: 1.2; }
.col-card .col-art { border-radius: 12px; background: radial-gradient(60% 60% at 50% 55%, rgba(140, 110, 255, 0.16), transparent 70%); }
.col-card.done .col-art { background: radial-gradient(60% 60% at 50% 55%, rgba(115, 230, 255, 0.16), transparent 70%); }
.col-card .col-art canvas { width: 88px; height: 88px; }
.col-card:hover .col-art canvas, .col-card.on .col-art canvas { transform: scale(1.06); transition: transform 0.18s var(--ease-out); }
body.reduced .col-card:hover .col-art canvas { transform: none; }

/* Style (shop): each trail card shows its trail as a little flowing ribbon instead of a dot */
.sty.trail .sw { width: 54px; height: 32px; border-radius: 0; background: none !important; box-shadow: none !important; }
.sty.trail .sw::after { display: none; }
.sty.trail .sw .trail-art { width: 54px; height: 32px; }
.sty.trail.locked .sw { filter: grayscale(0.6) brightness(0.8); }
.sty.trail.armed { border-color: #ffd27a; box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.35); }
/* room for the trail ribbons and the bigger animated portraits (no text spilling into the next card) */
#trailGrid.swatches { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.sty.trail { grid-template-columns: 54px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.sty.trail .nm, .sty.trail .tg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.col-card .col-art { width: 92px; height: 84px; flex: none; }
.col-card .col-art canvas { width: 84px; height: 84px; }
.col-card { min-height: 168px; justify-content: flex-start; }
.col-card .nm, .col-card .sub, .col-card .st { max-width: 100%; }
.col-art .trail-art { width: 88px; height: 52px; } /* a set width: in the card's centring grid 100% resolved to nothing */
.col-art.big .trail-art { width: 180px; height: 105px; }
.col-card .col-art .cos-ico { transform: scale(1.7); }
.col-art.big .cos-ico { transform: scale(2.4); }
/* Badges: the drawn emblem art */
.badge-img { width: 40px; height: 40px; object-fit: contain; grid-row: span 2; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }
.sty.locked .badge-img, .col-card:not(.done) .badge-img { filter: grayscale(0.7) brightness(0.65); }
.col-card .col-art .badge-img { width: 64px; height: 64px; }
.col-art.big .badge-img { width: 110px; height: 110px; }
/* Cosmetic icons that show what they do: auras breathe, the starburst turns, rings ripple out */
.cos-ico[class*="aura-"] { animation: cosbreathe 2.6s ease-in-out infinite; }
.cos-ico.victory-starburst { animation: cosspin 8s linear infinite; }
.cos-ico.victory-classic, .cos-ico.victory-aurora { animation: cosripple 2.2s ease-out infinite; }
@keyframes cosbreathe { 50% { filter: brightness(1.25) drop-shadow(0 0 8px rgba(255, 210, 122, 0.7)); transform: scale(1.06); } }
@keyframes cosspin { to { rotate: 360deg; } }
@keyframes cosripple { 0% { box-shadow: 0 0 0 0 rgba(143, 243, 255, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(143, 243, 255, 0); } }
.col-card .col-art .cos-ico[class*="aura-"] { animation-name: cosbreathe2; }
@keyframes cosbreathe2 { 50% { filter: brightness(1.25) drop-shadow(0 0 8px rgba(255, 210, 122, 0.7)); } }
body.reduced .cos-ico { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .cos-ico { animation: none !important; } }
.col-art .cos-ico[class*="aura-"] { animation-name: cosbreathe2; } /* the Collection scales these up: the breath must not reset that */

/* =====================================================================================================================
   Hand-made pass: calmer and more deliberate. Headings sit left like a title, not a spaced-out banner; panels are flat
   with a crisp edge (no purple haze); controls are softly squared instead of pills; small labels read as labels; glow
   is kept for the game's light (sparks, the wisp, rewards), not for every box. A drawn lock replaces the emoji.
   ===================================================================================================================== */
:root { --edge: rgba(150, 140, 220, 0.22); --edge-hi: rgba(190, 180, 255, 0.42); --surf: #151029; --surf-2: #1b1536; --r-card: 12px; }

/* Panels: flat, crisp edge, a quiet shadow */
.panel { background: var(--surf); border: 1px solid var(--edge); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.panel::before { display: none; }

/* Screen titles: left, sentence case, with a short gold mark under them */
.panel > h2.eyebrow { display: block; text-align: left; font-size: clamp(20px, 3.2vh, 26px); font-weight: 800; letter-spacing: -0.01em; text-transform: none;
  color: #fff3dc; margin: 0 0 4px; padding-bottom: 10px; position: relative; }
.panel > h2.eyebrow::before { display: none; }
.panel > h2.eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: #ffc75a; transform: none; margin: 0; }
.panel > .cx-lead, .panel > p.cx-lead { text-align: left; }

/* Section labels: small and clear, not shouted */
.set-h, .mode-h { letter-spacing: 0.08em !important; font-size: 12px !important; }
.mode-h::after { opacity: 0.5; }

/* Buttons: softly squared */
.btn, .btn.primary { border-radius: 12px; }
.btn { background: var(--surf-2); border-color: var(--edge-hi); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; }
.btn:hover:not(:disabled) { background: #221b44; }
.btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -2px 0 rgba(160, 80, 10, 0.3) inset; }
.btn.primary:hover:not(:disabled), .btn.primary:focus-visible { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 0 0 3px rgba(255, 199, 90, 0.25); }
.tlink.play { border-radius: 14px; }

/* Cards: flat surfaces; colour comes from one accent edge instead of a glow wash */
.mode-card { background: var(--surf-2) !important; border: 1px solid var(--edge) !important; border-left: 3px solid var(--ac) !important; border-radius: var(--r-card) !important; }
.mode-card:hover, .mode-card:focus-visible { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important; border-color: var(--edge-hi) !important; border-left-color: var(--ac) !important; }
.mode-card .mc-ico { box-shadow: none; background: rgba(255, 255, 255, 0.04); }
.card { border-radius: 14px; }
.col-card, .sty, .pf-t, .st-ch-card { border-radius: var(--r-card); background: var(--surf-2); border-color: var(--edge); }
.col-card .col-art, .col-card.done .col-art { background: rgba(255, 255, 255, 0.03); }
.st-ch-card.next { background: var(--surf-2); border-color: var(--edge); border-left: 3px solid #ffc75a; }

/* Drawn lock: replaces the emoji on locked trails, cosmetics and titles */
.sty.locked .tg::before, .pf-t.locked span::before { content: ''; display: inline-block; width: 9px; height: 11px; margin-right: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 5V3.4a2.5 2.5 0 0 1 5 0V5h.6c.5 0 .9.4.9.9v4.2c0 .5-.4.9-.9.9H1.4a.9.9 0 0 1-.9-.9V5.9c0-.5.4-.9.9-.9zm1.3 0h2.4V3.4a1.2 1.2 0 0 0-2.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 5V3.4a2.5 2.5 0 0 1 5 0V5h.6c.5 0 .9.4.9.9v4.2c0 .5-.4.9-.9.9H1.4a.9.9 0 0 1-.9-.9V5.9c0-.5.4-.9.9-.9zm1.3 0h2.4V3.4a1.2 1.2 0 0 0-2.4 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sty.locked .tg, .pf-t.locked span { color: rgba(200, 195, 235, 0.7); }

/* Tabs and filters: a plain segmented look rather than glowing pills */
[data-ctab], .ach-filter button { border-radius: 10px !important; }
[data-ctab].on { box-shadow: none !important; }
/* the Collection's title (inside its header row) matches the other screens */
.col-head h2.eyebrow { font-size: clamp(20px, 3.2vh, 26px); font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: #fff3dc; margin: 0; padding-bottom: 10px; position: relative; }
.col-head h2.eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: #ffc75a; }
/* text under a left title reads left too (short notices in centred dialogs stay centred) */
#profile .panel > p, #records .panel > p, #story .panel > p, #gauntlet .panel > p, #rift .panel > p, #bossPractice .panel > p, #style .panel > p, #modes .panel > p { text-align: left; }
#profile .pf-rank, #profile [id*="Rank"] { text-align: left; justify-content: flex-start; }
.diag { white-space: pre-line; max-width: calc(100vw - 16px); } /* the ?debug=1 readout runs over three lines */

/* =====================================================================================================================
   Phones held sideways (short screens): the title column was taller than the screen (the logo's top and Settings were
   cut off). Here the logo is smaller, the tagline steps aside, and the menu sits in two columns beside nothing else
   but the Play button. Menus use three narrow columns and shorter cards so a screenful shows more than one row.
   ===================================================================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .t-col { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); max-height: 100%; justify-content: center; }
  .wm-top { font-size: clamp(34px, 11vh, 52px); }
  .wm-line { margin: 4px 0; width: clamp(120px, 26vh, 180px); }
  .wm-bot { font-size: clamp(14px, 4.2vh, 18px); }
  .pitch, .t-howto, #bestLine { display: none; }
  .t-menu { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 18px; row-gap: 0; margin-top: 8px; align-items: center; }
  .t-menu .tlink.play { grid-column: 1 / -1; min-height: 40px; margin: 0 0 4px; justify-self: start; padding-inline: 26px; }
  .t-menu .tlink:not(.play) { min-height: 36px; }
  .t-menu .tlink .sfx { display: none; } /* counts live on the screens themselves; here every row stays one line */
  .ti-i { width: 28px; height: 28px; } .ti-i img { width: 22px; height: 22px; }
  .t-menu .tlink .tl { font-size: 15px; }
  .profile-chip { min-height: 40px; padding: 4px 14px 4px 4px; }
  .pc-av { width: 32px; height: 32px; font-size: 15px; }

  /* menus: a little less padding; mode cards three across with their text kept short */
  .panel { padding: 12px 16px; gap: 8px; border-radius: 14px; }
  .panel > h2.eyebrow, .col-head h2.eyebrow { font-size: 18px; padding-bottom: 7px; }
  .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .mode-card { padding: 10px 12px; row-gap: 0; }
  .mode-card b { font-size: 15px; }
  .mode-card .mc-d { font-size: 12px; line-height: 1.3; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mode-card .mc-ico { width: 40px; height: 40px; }
  .mode-card .mc-go { font-size: 12px; padding: 2px 0 !important; }
  .mode-h { margin: 4px 0 2px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .style-prev { height: 64px; } /* the trail list, not the preview, gets the short screen */
  .prism-line .prism-how { display: none; }
  .col-grid { max-height: none; }
}
/* short phones held upright (e.g. 360×640, iPhone SE): a tighter title so Settings stays on screen */
@media (orientation: portrait) and (max-height: 700px) {
  body.tall .t-col { padding-top: max(56px, calc(env(safe-area-inset-top) + 50px)); }
  body.tall .wm-top { font-size: min(13vw, 64px); }
  body.tall .wm-line { margin: 6px auto; }
  body.tall .pitch { display: none; }
  body.tall .t-menu { margin-top: 3vh; }
  body.tall .tlink.play { min-height: 48px; margin-bottom: 6px; }
  body.tall .t-menu .tlink:not(.play) { min-height: 38px; }
  body.tall .t-howto { display: none; }
}
.tlink .sfx, #colCount + .sfx, .tlink [class*="new"] { white-space: nowrap; }
#collectionBtn[data-fresh]::after { white-space: nowrap; } /* "+12 new" on one line */
@media (orientation: portrait) and (max-height: 700px) { body.tall .t-col { padding-top: max(68px, calc(env(safe-area-inset-top) + 60px)); } } /* clear of the profile chip */
@media (orientation: portrait) and (max-width: 380px) { .profile-chip { top: max(10px, env(safe-area-inset-top)); } .profile-chip #pcName { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
#collectionBtn.fresh::after { white-space: nowrap; flex: none; }
/* tablets held upright (iPad, Android tablets): the title and menus grow to use the screen instead of sitting small */
@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) { body.tall .t-col { zoom: 1.4; } .screen > .panel { zoom: 1.2; } }
.t-menu .tlink .tl { white-space: nowrap; }

/* Results on short screens: Play again stays in view at the bottom while the recap scrolls under it */
#results #againBtn { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; box-shadow: 0 -12px 20px 6px #0e0b22; }