@import url('hud.css');
/* =====================================================================================
   INKSTORM — UI (menus + HUD). Everything is namespaced .isk-*.
   Sizing unit --u = 1/100 of a 16:9 frame fitted to the viewport (16px at 1600x900).
   ===================================================================================== */
@font-face { font-family: 'Titan One'; src: url('../assets/fonts/TitanOne-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: block; }

#ui-root { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none; }

.isk-ui, .isk-hud, .isk-hud-over {
  --u: min(1vw, 1.7778vh);
  --k: #15121c; --k2: #1f1a2c; --k3: #2c2540;
  --muted: #c3bdd6;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring2: cubic-bezier(.26, 1.9, .5, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --in: cubic-bezier(.6, 0, .8, .25);
  --fs-xs: max(11px, calc(var(--u) * .8));
  --fs-s: max(12px, calc(var(--u) * .95));
  --fs-m: max(13.5px, calc(var(--u) * 1.1));
  --fs-l: max(16px, calc(var(--u) * 1.4));
  --a: #ff8a14; --a-rgb: 255,138,20; --a-dark: #b8620f; --a-deep: #6a3a12; --a-light: #ffc48a; --a-ink: #15121c;
  --b: #2f5bff; --b-rgb: 47,91,255; --b-dark: #2442b4; --b-deep: #1d2766; --b-light: #98b0ff; --b-ink: #ffffff;
  position: absolute; inset: 0;
  font-family: 'Rubik', system-ui, sans-serif; font-weight: 500;
  color: #fff; line-height: 1.2;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.isk-ui *, .isk-hud *, .isk-hud-over * { box-sizing: border-box; }
.isk-ui svg, .isk-hud svg, .isk-hud-over svg { display: block; overflow: visible; }

/* team / accent ink fills used inside inline SVG */
.isk-fa { fill: var(--a); } .isk-fb { fill: var(--b); } .isk-fta { fill: var(--tw); }
.isk-fself { fill: var(--self); } .isk-fenemy { fill: var(--enemy); } .isk-fby { fill: var(--by); } .isk-fwin { fill: var(--jw); }
.isk-fdanger { fill: #ff3d5e; }

/* chunky display type: thick outline painted under the fill */
.isk-display {
  font-family: 'Titan One', 'Rubik', sans-serif; font-weight: 400; letter-spacing: .015em;
  -webkit-text-stroke: .17em var(--k); paint-order: stroke fill;
  text-shadow: 0 .085em 0 var(--k), 0 .16em .12em rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------------ layers */
.isk-ui { z-index: 20; pointer-events: none; }
.isk-ui.is-active { pointer-events: auto; }
.isk-ui__layer { position: absolute; inset: 0; }
.isk-screen { position: absolute; inset: 0; overflow: hidden; }
.isk-hud { z-index: 10; pointer-events: none; transition: opacity .35s var(--out), visibility 0s linear 0s; }
.isk-hud.is-hidden { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.isk-hud-over { z-index: 30; pointer-events: none; }

/* ------------------------------------------------------------------ entrance / exit motion
   Entrances animate the individual `translate` / `scale` properties so they compose with each element's own
   `transform` (tilts, focus lifts) instead of fighting it. */
.isk-in { animation: isk-in-up .6s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 38ms + 40ms); }
.isk-in--up { animation-name: isk-in-up; }
.isk-in--down { animation-name: isk-in-down; }
.isk-in--left { animation-name: isk-in-left; }
.isk-in--right { animation-name: isk-in-right; }
.isk-in--pop { animation-name: isk-in-pop; }
.isk-in--logo { animation: isk-in-logo .9s var(--spring2) backwards .05s; }
.isk-screen.is-back .isk-in--left { animation-name: isk-in-right-soft; }
@keyframes isk-in-up { from { opacity: 0; translate: 0 calc(var(--u) * 3.2); scale: .94; } }
@keyframes isk-in-down { from { opacity: 0; translate: 0 calc(var(--u) * -2.6); } }
@keyframes isk-in-left { from { opacity: 0; translate: calc(var(--u) * -7) 0; scale: .9; } }
@keyframes isk-in-right { from { opacity: 0; translate: calc(var(--u) * 7) 0; scale: .92; } }
@keyframes isk-in-right-soft { from { opacity: 0; translate: calc(var(--u) * 4) 0; } }
@keyframes isk-in-pop { from { opacity: 0; scale: .55; } 50% { opacity: 1; } }
@keyframes isk-in-logo { from { opacity: 0; scale: .25; rotate: -14deg; } 45% { opacity: 1; } }

.isk-screen.is-leaving { animation: isk-leave .28s var(--in) forwards; pointer-events: none; }
.isk-screen.is-leaving.is-back { animation-name: isk-leave-back; }
@keyframes isk-leave { to { opacity: 0; translate: calc(var(--u) * -4) 0; scale: .985; } }
@keyframes isk-leave-back { to { opacity: 0; translate: calc(var(--u) * 4) 0; scale: .985; } }

@keyframes isk-fade { from { opacity: 0; } }
@keyframes isk-pop { from { opacity: 0; scale: .7; } 55% { opacity: 1; } }

/* feedback micro-animations (scale / translate properties only) */
.is-press { animation: isk-press .32s var(--spring); }
@keyframes isk-press { 0% { scale: .93; translate: 0 calc(var(--u) * .25); } }
.is-bump-h { animation: isk-bump-h .32s var(--out); }
.is-bump-v { animation: isk-bump-v .32s var(--out); }
@keyframes isk-bump-h { 30% { translate: calc(var(--u) * .5) 0; } 60% { translate: calc(var(--u) * -.3) 0; } }
@keyframes isk-bump-v { 30% { translate: 0 calc(var(--u) * .45); } 60% { translate: 0 calc(var(--u) * -.25); } }

/* ------------------------------------------------------------------ backgrounds / scrims */
.isk-scrim-left { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 9, 22, .74) 0%, rgba(12, 9, 22, .5) 36%, rgba(12, 9, 22, .08) 60%, rgba(12, 9, 22, 0) 70%),
              linear-gradient(0deg, rgba(12, 9, 22, .45), rgba(12, 9, 22, 0) 22%);
  animation: isk-fade .4s both; }
.isk-scrim-full { position: absolute; inset: 0; pointer-events: none; background: rgba(12, 9, 22, .55); backdrop-filter: blur(4px) saturate(1.1); animation: isk-fade .35s both; }
.isk-dimbg { position: absolute; inset: 0; background: rgba(8, 6, 14, .6); backdrop-filter: blur(8px) saturate(.8); }

/* ------------------------------------------------------------------ glass ink panel */
.isk-panel {
  position: relative;
  background: linear-gradient(170deg, rgba(38, 31, 58, .9), rgba(18, 14, 30, .92));
  border-radius: calc(var(--u) * 1.5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 2px 0 rgba(255, 255, 255, .06),
              0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .38), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px) saturate(1.3);
}
.isk-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .07) 1.1px, transparent 1.5px) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%); mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
}

/* ------------------------------------------------------------------ focus cursor (springs between items) */
.isk-cursor { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .18s; will-change: transform; }
.isk-cursor.is-on { opacity: 1; }
.isk-cursor__ring { position: absolute; inset: 0; border-radius: inherit; border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--k), 0 0 0 6px rgba(var(--a-rgb), .6), 0 0 calc(var(--u) * 1.8) rgba(var(--a-rgb), .55);
  animation: isk-cursor-pulse 1.3s ease-in-out infinite; }
.isk-cursor__glow { position: absolute; inset: -3px; border-radius: inherit; background:
  linear-gradient(90deg, #fff 0 14px, transparent 14px) top left / 50% 3px no-repeat,
  linear-gradient(270deg, #fff 0 14px, transparent 14px) bottom right / 50% 3px no-repeat; opacity: 0; }
@keyframes isk-cursor-pulse {
  50% { box-shadow: 0 0 0 3px var(--k), 0 0 0 9px rgba(var(--a-rgb), .28), 0 0 calc(var(--u) * 2.4) rgba(var(--a-rgb), .7); }
}

/* ------------------------------------------------------------------ chunky buttons */
.isk-btn {
  --bg: rgba(20, 16, 32, .9); --fill: var(--a); --fill-ink: var(--a-ink);
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.6); border: 0; border-radius: calc(var(--u) * 1.2);
  background: var(--bg); color: #fff; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
  font: 400 calc(var(--u) * 1.7) / 1 'Titan One', sans-serif; letter-spacing: .02em;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 3px 0 rgba(255, 255, 255, .06), 0 calc(var(--u) * .42) 0 rgba(0, 0, 0, .45);
  transition: transform .42s var(--spring), box-shadow .25s, color .12s .04s;
  pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
}
.isk-btn__blob { position: absolute; z-index: -1; left: var(--mx, 0%); top: var(--my, 50%); width: 260%; aspect-ratio: 1; background: var(--fill);
  border-radius: 43% 57% 51% 49% / 47% 42% 58% 53%;
  transform: translate(-50%, -50%) scale(0) rotate(-40deg); transition: transform .55s var(--out); }
.isk-btn__blob::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .28), transparent 40%); }
.isk-btn__icon { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; transition: transform .45s var(--spring); }
.isk-btn__icon svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.isk-btn__text { display: flex; flex-direction: column; min-width: 0; }
.isk-btn__label { white-space: nowrap; }
.isk-btn__sub { display: block; margin-top: .38em; font: 700 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .03em; opacity: .82; white-space: nowrap; }
.isk-btn.is-focus { color: var(--fill-ink); transform: rotate(0deg) translateX(calc(var(--u) * .7)) scale(1.045);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15), 0 calc(var(--u) * .5) 0 var(--k), 0 calc(var(--u) * 1) calc(var(--u) * 1.5) rgba(0, 0, 0, .3); }
.isk-btn.is-focus .isk-btn__blob { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.isk-btn.is-down { scale: .955; transition: scale .08s; }
.isk-btn.is-focus .isk-btn__icon { transform: rotate(-8deg) scale(1.12); }
.isk-btn:active { scale: .97; }

.isk-btn--menu { width: 100%; height: calc(var(--u) * 4.5); font-size: calc(var(--u) * 2.05); }
.isk-btn--xl { height: calc(var(--u) * 7.6); font-size: calc(var(--u) * 3.6); padding-left: calc(var(--u) * 1.8); }
.isk-btn--xl .isk-btn__sub { font-size: var(--fs-m); }
.isk-btn--primary { --bg: var(--a); --fill: #fff; --fill-ink: var(--k); color: var(--a-ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .15), 0 calc(var(--u) * .42) 0 var(--a-deep); }
.isk-btn--primary::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; opacity: .35;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .35) 0 10px, transparent 10px 24px); background-size: 200% 100%;
  animation: isk-stripes 3s linear infinite; }
.isk-btn--danger { --fill: #ff3d5e; --fill-ink: #fff; }
.isk-btn--ghost { --bg: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.isk-btn--small { font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .06em; padding: calc(var(--u) * .7) calc(var(--u) * 1.1); gap: .6em; }
.isk-btn--small .isk-btn__icon { width: 1.5em; height: 1.5em; }
.isk-btn--small.is-armed { --bg: #ff3d5e; --fill: #fff; --fill-ink: #c01233; animation: isk-shake .35s; }
.isk-btn--wide { height: calc(var(--u) * 5); font-size: calc(var(--u) * 2); padding: 0 calc(var(--u) * 2.2); }
.isk-btn--modal { font-size: calc(var(--u) * 1.6); padding: calc(var(--u) * 1) calc(var(--u) * 2); }
@keyframes isk-stripes { to { background-position: -48px 0; } }

/* ------------------------------------------------------------------ input glyphs */
.isk-key {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 2.15em; height: 2.15em; padding: 0 .45em; margin: 0 .12em .22em;
  font: 800 .82em / 1 'Rubik', sans-serif; letter-spacing: .02em; color: var(--k);
  background: linear-gradient(#fff, #ebe8f3); border-radius: .5em;
  box-shadow: 0 0 0 2px var(--k), 0 .2em 0 2px var(--k), inset 0 -.18em 0 #c9c4d8;
  translate: 0 -.08em; vertical-align: middle;
}
.isk-key--wide { padding: 0 .7em; }
.isk-pad { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 2.1em; height: 2.1em; margin: 0 .12em;
  font: 900 .8em / 1 'Rubik', sans-serif; vertical-align: middle; }
.isk-pad--face { border-radius: 50%; background: var(--pc); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 2px var(--k), 0 .16em 0 2px var(--k), inset 0 .2em 0 rgba(255, 255, 255, .35); }
.isk-pad--bumper { padding: 0 .55em; border-radius: .75em .75em .35em .35em; background: #fff; color: var(--k); box-shadow: 0 0 0 2px var(--k), 0 .16em 0 2px var(--k); }
.isk-pad--trigger { padding: 0 .5em; height: 2.35em; border-radius: 1em 1em .35em .35em; background: #fff; color: var(--k); box-shadow: 0 0 0 2px var(--k), 0 .16em 0 2px var(--k); }
.isk-pad--stick { border-radius: 50%; color: var(--k); background: radial-gradient(circle at 50% 42%, #fff 0 46%, #d6d1e4 48%); box-shadow: 0 0 0 2px var(--k), 0 .16em 0 2px var(--k); }
.isk-pad--sys { border-radius: 50%; background: #fff; color: var(--k); box-shadow: 0 0 0 2px var(--k), 0 .16em 0 2px var(--k); }
.isk-pad--sys svg { width: 62%; height: 62%; }
.isk-mouse { display: inline-block; width: 2.1em; height: 2.4em; margin: 0 .1em; vertical-align: middle; translate: 0 -.1em; }
.isk-mouse svg { width: 100%; height: 100%; }

.isk-hint { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.isk-hint .isk-kbm, .isk-hint .isk-padg { display: inline-flex; align-items: center; }
.isk-ui:not(.is-pad) .isk-padg { display: none !important; }
.isk-ui.is-pad .isk-kbm { display: none !important; }
.isk-hint__label { font-weight: 700; }

/* ------------------------------------------------------------------ prompts bar, header, corners */
.isk-prompts {
  position: absolute; right: calc(var(--u) * 2.6); bottom: calc(var(--u) * 1.9);
  display: flex; align-items: center; gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.2) calc(var(--u) * .55); border-radius: 999px;
  background: rgba(14, 11, 22, .8); backdrop-filter: blur(8px);
  font: 700 var(--fs-s) / 1 'Rubik', sans-serif;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .3);
}
.isk-head { position: absolute; left: calc(var(--u) * 3.4); top: calc(var(--u) * 2.2); display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.isk-backbtn {
  pointer-events: auto; display: flex; align-items: center; gap: .55em; height: calc(var(--u) * 3.4);
  padding: 0 calc(var(--u) * .9) 0 calc(var(--u) * .55); border: 0; border-radius: 999px;
  background: rgba(14, 11, 22, .82); color: #fff; font: 800 var(--fs-s) / 1 'Rubik', sans-serif; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 0, 0, .35);
  transition: transform .35s var(--spring), background .2s; }
.isk-backbtn:hover { transform: translateX(-3px) scale(1.06); background: var(--k); }
.isk-backbtn__arrow { display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; background: #fff; color: var(--k); }
.isk-backbtn__arrow svg { width: 62%; height: 62%; }
.isk-head__titles { display: flex; flex-direction: column; }
.isk-head__title { position: relative; isolation: isolate; font-size: calc(var(--u) * 3.7); line-height: 1; }
.isk-head__blob { position: absolute; z-index: -1; left: -.55em; top: 50%; width: 2.3em; transform: translateY(-50%) rotate(-12deg); }
.isk-head__sub { margin-top: .45em; font: 600 var(--fs-m) / 1.2 'Rubik', sans-serif; color: rgba(255, 255, 255, .88); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.isk-corner { position: absolute; bottom: calc(var(--u) * 2); font: 600 var(--fs-xs) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); letter-spacing: .04em; }
.isk-corner--bl { left: calc(var(--u) * 3.4); }
.isk-corner--br { right: calc(var(--u) * 3.4); }
.isk-seclabel { display: flex; align-items: center; gap: .55em; font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.isk-seclabel i { display: block; width: 1.5em; height: 1.5em; color: var(--a); }
.isk-seclabel i svg { width: 100%; height: 100%; }
.isk-chip { display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em .35em .4em; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; white-space: nowrap; }
.isk-chip i { display: block; width: 1.7em; height: 1.7em; color: var(--a); }
.isk-chip i svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ logo */
.isk-logo { position: relative; display: inline-flex; flex-direction: column; align-items: center; isolation: isolate; }
.isk-logo--xl { font-size: calc(var(--u) * 11.5); }
.isk-logo--md { font-size: calc(var(--u) * 6.2); }
.isk-logo--sm { font-size: calc(var(--u) * 3.4); }
.isk-logo__splat { position: absolute; z-index: -1; left: 50%; top: 50%; width: 5.4em; transform: translate(-50%, -52%) rotate(-3deg); }
.isk-logo__word { display: flex; font-family: 'Titan One', sans-serif; line-height: 1; }
.isk-logo__l {
  display: inline-block; color: #fff; padding: 0 .005em;
  -webkit-text-stroke: .14em var(--k); paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--k), 0 .1em 0 var(--k), 0 .16em .12em rgba(0, 0, 0, .3);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  animation: isk-letter 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.27s);
}
.isk-logo__l:nth-child(1) { --r: -7deg; --y: .02em; }
.isk-logo__l:nth-child(2) { --r: 4deg; --y: -.04em; }
.isk-logo__l:nth-child(3) { --r: -3deg; --y: .03em; }
.isk-logo__l:nth-child(4) { --r: 6deg; --y: -.02em; color: var(--a-light); }
.isk-logo__l:nth-child(5) { --r: -5deg; --y: .04em; }
.isk-logo__l:nth-child(6) { --r: 3deg; --y: -.03em; }
.isk-logo__l:nth-child(7) { --r: -6deg; --y: .02em; }
.isk-logo__l:nth-child(4) { color: #fff; }
@keyframes isk-letter { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -.045em; rotate: 2.5deg; } }
.isk-drip path { transform-box: fill-box; transform-origin: 50% 0; animation: isk-drip 3.8s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(var(--d) * -.95s); }
.isk-drip__drop { animation: isk-drop 3.8s cubic-bezier(.55, 0, 1, .6) infinite; animation-delay: calc(var(--d) * -.95s); }
@keyframes isk-drip { 0% { transform: scaleY(.25); } 62% { transform: scaleY(1); } 70% { transform: scaleY(.7); } 100% { transform: scaleY(.25); } }
@keyframes isk-drop { 0%, 60% { transform: translateY(-20px) scale(.2); opacity: 0; } 64% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(140px) scale(.7); opacity: 0; } }

/* ------------------------------------------------------------------ LOADING */
.isk-loading { background: radial-gradient(120% 90% at 50% 40%, #2b2050 0%, #161029 58%, #0b0814 100%); }
.isk-loading::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .06) 1.2px, transparent 1.6px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 90%); mask-image: radial-gradient(ellipse at center, transparent 30%, #000 90%); }
.isk-loading__bg { position: absolute; inset: 0; overflow: hidden; }
.isk-bgblob { position: absolute; border-radius: 50%; filter: blur(calc(var(--u) * 5)); opacity: .5; animation: isk-float 14s ease-in-out infinite alternate; }
.isk-bgblob--0 { width: 42vw; height: 42vw; left: -12vw; top: -14vw; background: var(--a); }
.isk-bgblob--1 { width: 46vw; height: 46vw; right: -14vw; bottom: -20vw; background: var(--b); animation-delay: -4s; }
.isk-bgblob--2 { width: 18vw; height: 18vw; right: 12vw; top: 6vh; background: var(--a); opacity: .3; animation-delay: -7s; }
.isk-bgblob--3 { width: 22vw; height: 22vw; left: 10vw; bottom: 2vh; background: var(--b); opacity: .28; animation-delay: -2s; }
.isk-bgblob--4 { width: 10vw; height: 10vw; left: 44vw; top: 4vh; background: var(--b); opacity: .22; animation-delay: -9s; }
.isk-bgblob--5 { width: 12vw; height: 12vw; left: 60vw; bottom: 8vh; background: var(--a); opacity: .22; animation-delay: -5s; }
@keyframes isk-float { to { translate: 4vw 3vh; scale: 1.12; } }
.isk-loading__center { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.6); }
.isk-progress { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.4); }
.isk-progress__track { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 2.3); border-radius: 999px; background: #0d0a18; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--k), 0 calc(var(--u) * .45) 0 6px rgba(0, 0, 0, .4), inset 0 3px 6px rgba(0, 0, 0, .5); }
.isk-progress__fill { position: absolute; inset: 0; border-radius: 999px; transform: translateX(-100%); will-change: transform;
  background: linear-gradient(180deg, var(--a-light) 0%, var(--a) 40%, var(--a-dark) 100%); }
.isk-progress__wave { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 22px); animation: isk-stripes .7s linear infinite; }
.isk-progress__edge { position: absolute; left: calc(var(--u) * .8); right: calc(var(--u) * .8); top: 18%; height: 20%; border-radius: 999px; background: rgba(255, 255, 255, .45); }
.isk-progress__pct { min-width: 4ch; font: 400 calc(var(--u) * 1.9) / 1 'Titan One', sans-serif; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.isk-loading__label { font: 700 var(--fs-m) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .8); text-transform: uppercase; }
.isk-loading__label.is-in { animation: isk-fade .3s; }
.isk-tip { position: absolute; left: 50%; bottom: calc(var(--u) * 5.2); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  width: min(calc(var(--u) * 62), 90vw); padding: calc(var(--u) * .9) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.4);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.isk-tip__tag { flex: none; padding: .35em .7em; border-radius: .5em; background: var(--b); color: var(--b-ink); font: 400 var(--fs-m) / 1 'Titan One', sans-serif; letter-spacing: .06em; transform: rotate(-4deg); box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px var(--k); }
.isk-tip__text { font: 600 var(--fs-m) / 1.4 'Rubik', sans-serif; color: #eeeaf8; }
.isk-tip__text.is-in { animation: isk-tip-in .5s var(--spring); }
@keyframes isk-tip-in { from { opacity: 0; translate: calc(var(--u) * 2) 0; } }

/* ------------------------------------------------------------------ TITLE */
.isk-title { cursor: pointer; }
.isk-title__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 48% at 50% 40%, rgba(12, 9, 22, .3), rgba(12, 9, 22, 0) 70%),
              linear-gradient(180deg, rgba(12, 9, 22, .38) 0%, rgba(12, 9, 22, 0) 26%, rgba(12, 9, 22, 0) 58%, rgba(12, 9, 22, .7) 100%); }
.isk-title__logo { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.isk-title__press { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .7); }
.isk-title__presstext { font: 400 calc(var(--u) * 2.5) / 1 'Titan One', sans-serif; letter-spacing: .08em;
  -webkit-text-stroke: .2em var(--k); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--k);
  animation: isk-press-pulse 1.5s ease-in-out infinite; }
.isk-title__presssub { font: 700 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
@keyframes isk-press-pulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.07; opacity: .72; } }
.isk-title.is-go .isk-title__presstext { animation: isk-go-flash .3s steps(2) 2, isk-press-pulse 1.5s ease-in-out infinite; color: var(--a); }
@keyframes isk-go-flash { 50% { opacity: .2; } }
.isk-title .isk-corner--bl b { font-family: 'Titan One', sans-serif; font-weight: 400; letter-spacing: .06em; }

/* ------------------------------------------------------------------ MAIN */
.isk-main__logo { position: absolute; left: calc(var(--u) * 3.4); top: calc(var(--u) * 2.6); }
.isk-main__menu { position: absolute; left: calc(var(--u) * 3.8); top: 52%; transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(var(--u) * 1.15); width: calc(var(--u) * 30); }
.isk-main__menu .isk-btn--xl { margin-bottom: calc(var(--u) * .5); }
.isk-main__side { position: absolute; right: calc(var(--u) * 3.2); top: calc(var(--u) * 2.6); bottom: calc(var(--u) * 6.6); width: calc(var(--u) * 27); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; }
.isk-profile { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1) calc(var(--u) * 1.2); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5) calc(var(--u) * 1.4); }
.isk-profile__avatar { position: relative; width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.isk-profile__avblob { position: absolute; inset: -12%; }
.isk-profile__avblob svg { width: 100%; height: 100%; }
.isk-profile__squid { position: absolute; inset: 14%; color: #fff; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.isk-profile__squid svg { width: 100%; height: 100%; }
.isk-profile__info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.isk-profile__name { font: 400 calc(var(--u) * 2) / 1.05 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-profile__rank { --rk: #9fe8ff; display: flex; align-items: center; gap: .45em; margin-top: .35em; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--rk); }
.isk-profile__rank.is-t1 { --rk: #7dffb0; } .isk-profile__rank.is-t2 { --rk: #ffd54a; } .isk-profile__rank.is-t3 { --rk: #ff8ad0; } .isk-profile__rank.is-t4 { --rk: #ffb14a; }
.isk-profile__xp { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * .8); }
.isk-profile__xpnum { font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; opacity: .72; white-space: nowrap; }
.isk-profile__stats { grid-column: 1 / -1; display: flex; gap: calc(var(--u) * .7); }
.isk-profile__stats div { flex: 1; display: flex; align-items: baseline; gap: .45em; padding: calc(var(--u) * .55) calc(var(--u) * .9); border-radius: calc(var(--u) * .8); background: rgba(255, 255, 255, .06); }
.isk-profile__stats b { font: 400 calc(var(--u) * 1.6) / 1 'Titan One', sans-serif; }
.isk-profile__stats span { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; opacity: .7; }
.isk-lvl { display: inline-flex; align-items: baseline; gap: .12em; padding: .28em .5em .24em; border-radius: .5em; background: #fff; color: var(--k);
  font: 400 calc(var(--u) * 1.25) / 1 'Titan One', sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); white-space: nowrap; }
.isk-lvl small { font: 900 .55em / 1 'Rubik', sans-serif; letter-spacing: .06em; }
.isk-xpbar { position: relative; display: block; flex: 1; height: calc(var(--u) * .95); border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.isk-xpbar i { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, var(--a-light), var(--a) 55%, var(--a-dark));
  clip-path: inset(0 calc((1 - var(--t, 0)) * 100%) 0 0 round 999px); }
.isk-kitcard { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5) calc(var(--u) * 1.3); }
.isk-kitcard__label { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; opacity: .7; }
.isk-kitcard__main { display: flex; align-items: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * .7) 0 calc(var(--u) * .9); }
.isk-kitcard__icon { width: calc(var(--u) * 6); height: calc(var(--u) * 4.4); color: var(--a); }
.isk-kitcard__icon svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.isk-kitcard__name { font: 400 calc(var(--u) * 1.8) / 1 'Titan One', sans-serif; }
.isk-kitcard__kind { margin-top: .3em; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.isk-kitcard__chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }

/* ------------------------------------------------------------------ SETUP */
.isk-setup__body { position: absolute; left: calc(var(--u) * 3.6); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 60), 62vw); display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.isk-setup__maps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.2); }
.isk-setup__maps .isk-mapcard__art { aspect-ratio: 1.75 / 1; }
.isk-setup__maps .isk-mapcard__name { font-size: calc(var(--u) * 1.35); }
.isk-setup__maps .isk-mapcard__blurb { font-size: calc(var(--u) * 0.82); }
.isk-mapcard {
  position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: calc(var(--u) * 1.5);
  background: var(--k2); color: #fff; text-align: left; cursor: pointer; overflow: hidden; pointer-events: auto; font: inherit;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 calc(var(--u) * .5) 0 rgba(0, 0, 0, .45);
  transition: transform .42s var(--spring), box-shadow .25s; }
.isk-mapcard__art { display: block; aspect-ratio: 2.15 / 1; overflow: hidden; }
.isk-mapcard__art svg { width: 100%; height: 100%; transition: transform .6s var(--out); }
.isk-mapcard.is-focus .isk-mapcard__art svg { transform: scale(1.07); }
.isk-mapcard__info { display: flex; flex-direction: column; gap: calc(var(--u) * .35); padding: calc(var(--u) * .85) calc(var(--u) * 1.2) calc(var(--u) * 1); }
.isk-mapcard__name { font: 400 calc(var(--u) * 1.65) / 1 'Titan One', sans-serif; }
.isk-mapcard__blurb { font: 500 var(--fs-s) / 1.3 'Rubik', sans-serif; color: var(--muted); }
.isk-mapcard__chip { position: absolute; top: calc(var(--u) * .8); left: calc(var(--u) * .8); display: flex; align-items: center; gap: .4em; padding: .35em .7em .35em .45em; border-radius: 999px;
  background: rgba(14, 11, 22, .82); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; }
.isk-mapcard__chip i { display: block; width: 1.4em; height: 1.4em; color: #ffd45a; }
.isk-mapcard__chip i svg { width: 100%; height: 100%; }
.isk-mapcard__check { position: absolute; top: calc(var(--u) * .7); right: calc(var(--u) * .7); display: grid; place-items: center; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%;
  background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 3px var(--k), 0 3px 0 3px rgba(0, 0, 0, .3); transform: scale(0) rotate(-40deg); transition: transform .4s var(--spring2); }
.isk-mapcard__check svg { width: 62%; height: 62%; }
.isk-mapcard.is-sel { box-shadow: 0 0 0 4px var(--a), 0 calc(var(--u) * .5) 0 var(--a-deep); }
.isk-mapcard.is-sel .isk-mapcard__check { transform: scale(1) rotate(0deg); }
.isk-mapcard.is-focus { transform: rotate(0deg) translateY(calc(var(--u) * -.5)) scale(1.025); }
.isk-mapcard.is-pick, .isk-wcard.is-pick { animation: isk-pick .5s var(--spring); }
@keyframes isk-pick { 0% { scale: .92; } 45% { scale: 1.06; } }
.isk-setup__opts { display: flex; flex-direction: column; gap: calc(var(--u) * .5); padding: calc(var(--u) * .9); }
.isk-setrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 3.9); padding: calc(var(--u) * .35) calc(var(--u) * .45) calc(var(--u) * .35) calc(var(--u) * .9); border-radius: calc(var(--u) * 1); cursor: default; transition: background .2s; }
.isk-setrow.is-focus { background: rgba(var(--a-rgb), .14); }
.isk-setrow__label { display: flex; align-items: center; gap: .6em; font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .14em; }
.isk-setrow__label i { display: block; width: 1.6em; height: 1.6em; color: var(--a); }
.isk-setrow__label i svg { width: 100%; height: 100%; }
.isk-setrow .isk-seg { min-width: calc(var(--u) * 32); }
.isk-setup__desc { padding: 0 calc(var(--u) * .9) calc(var(--u) * .3); margin-top: calc(var(--u) * -.2); font: 500 var(--fs-s) / 1.3 'Rubik', sans-serif; color: var(--muted); }
.isk-setup__desc.is-in { animation: isk-tip-in .4s var(--spring); }
.isk-diffopt { display: inline-flex; align-items: center; gap: .55em; }
.isk-pips { display: inline-flex; gap: 3px; }
.isk-pips i { width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .25; }
.isk-pips i.on { opacity: 1; }
.isk-setup__foot { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.isk-wchip { display: flex; align-items: center; gap: calc(var(--u) * 1); flex: 1; height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * .9); border: 0; border-radius: calc(var(--u) * 1.3);
  background: rgba(20, 16, 32, .9); color: #fff; cursor: pointer; pointer-events: auto; font: inherit; text-align: left;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 calc(var(--u) * .42) 0 rgba(0, 0, 0, .45); transition: transform .4s var(--spring), background .2s; }
.isk-wchip__icon { width: calc(var(--u) * 5.4); height: calc(var(--u) * 4.4); color: var(--a); }
.isk-wchip__icon svg { width: 100%; height: 100%; }
.isk-wchip__text { display: flex; flex-direction: column; gap: .35em; flex: 1; }
.isk-wchip__text small { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; opacity: .65; }
.isk-wchip__text b { font: 400 calc(var(--u) * 1.6) / 1 'Titan One', sans-serif; }
.isk-wchip__edit { display: flex; align-items: center; gap: .4em; padding: .45em .8em; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; transition: background .2s, color .2s; }
.isk-wchip__edit i { display: block; width: 1.3em; height: 1.3em; }
.isk-wchip.is-focus { transform: translateY(calc(var(--u) * -.3)); background: rgba(34, 27, 52, .95); }
.isk-wchip.is-focus .isk-wchip__edit { background: var(--a); color: var(--a-ink); }
.isk-btn--start { flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 6); font-size: calc(var(--u) * 2.9); --tilt: -1.5deg; }
.isk-btn--start .isk-btn__sub { font-size: var(--fs-xs); max-width: calc(var(--u) * 19); overflow: hidden; text-overflow: ellipsis; }
.isk-btn--start .isk-btn__icon { animation: isk-nudge-r 1.1s ease-in-out infinite; }
@keyframes isk-nudge-r { 50% { translate: calc(var(--u) * .35) 0; } }
.isk-setup.is-launch .isk-btn--start { animation: isk-launch .4s var(--spring) forwards; }
@keyframes isk-launch { 40% { scale: 1.12; } 100% { scale: 1.02; } }

/* ------------------------------------------------------------------ segmented / slider / toggle / tabs / rows */
.isk-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: calc(var(--u) * .3); border-radius: 999px;
  background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 3px 6px rgba(0, 0, 0, .35); }
.isk-seg__hl { position: absolute; top: calc(var(--u) * .3); bottom: calc(var(--u) * .3); left: calc(var(--u) * .3); width: calc((100% - var(--u) * .6) / var(--n)); border-radius: 999px;
  background: linear-gradient(180deg, var(--a-light) -40%, var(--a) 45%); box-shadow: 0 3px 0 var(--a-deep), inset 0 -2px 0 rgba(0, 0, 0, .15);
  transform: translateX(calc(var(--idx) * 100%)); transition: transform .45s var(--spring); }
.isk-seg__opt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * .62) calc(var(--u) * .9);
  font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .72); cursor: pointer; transition: color .2s; }
.isk-seg__opt:hover { color: #fff; }
.isk-seg__opt.is-sel { color: var(--a-ink); }
.isk-seg.is-change .isk-seg__hl { animation: isk-hl-squish .45s var(--spring); }
@keyframes isk-hl-squish { 30% { scale: 1.08 .82; } }
.is-edge-l { animation: isk-nudge-l .3s var(--out); }
.is-edge-r { animation: isk-nudge-rr .3s var(--out); }
.is-edge { animation: isk-shake .3s; }
@keyframes isk-nudge-l { 35% { translate: calc(var(--u) * -.5) 0; } }
@keyframes isk-nudge-rr { 35% { translate: calc(var(--u) * .5) 0; } }
@keyframes isk-shake { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

.isk-slider { display: flex; align-items: center; gap: calc(var(--u) * 1.3); width: calc(var(--u) * 25); }
.isk-slider__track { position: relative; flex: 1; height: calc(var(--u) * 1.1); border-radius: 999px; background: rgba(0, 0, 0, .5); cursor: pointer; pointer-events: auto; touch-action: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 2px 4px rgba(0, 0, 0, .4); }
.isk-slider__track::before { content: ''; position: absolute; inset: calc(var(--u) * -1.1) calc(var(--u) * -.6); }
.isk-slider__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--t) * 100%); border-radius: 999px;
  background: linear-gradient(180deg, var(--a-light) -30%, var(--a) 50%, var(--a-dark)); transition: width .2s var(--out); }
.isk-slider__knob { position: absolute; top: 50%; left: calc(var(--t) * 100%); width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); margin: calc(var(--u) * -1.15) 0 0 calc(var(--u) * -1.15);
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 40%, #e5e1ef 100%);
  box-shadow: 0 0 0 3px var(--k), 0 3px 0 3px rgba(0, 0, 0, .3); transition: left .2s var(--out), scale .3s var(--spring), box-shadow .2s; }
.isk-slider.is-drag .isk-slider__fill, .isk-slider.is-drag .isk-slider__knob { transition: scale .3s var(--spring); }
.isk-slider.is-drag .isk-slider__knob { scale: 1.2; }
.isk-slider__knob.is-bump { animation: isk-knob .3s var(--spring); }
@keyframes isk-knob { 0% { scale: 1.35 .85; } }
.isk-slider__val { width: 4.2em; text-align: right; font: 400 calc(var(--u) * 1.5) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; }

.isk-toggle { position: relative; flex: none; width: calc(var(--u) * 7.6); height: calc(var(--u) * 3.1); border-radius: 999px; background: rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), inset 0 3px 6px rgba(0, 0, 0, .35); transition: background .25s, box-shadow .25s; cursor: pointer; }
.isk-toggle.is-on { background: linear-gradient(180deg, var(--a-light) -40%, var(--a) 50%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), 0 3px 0 var(--a-deep); }
.isk-toggle__knob { position: absolute; top: calc(var(--u) * .4); left: calc(var(--u) * .4); width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 40%, #e5e1ef 100%); box-shadow: 0 0 0 2.5px var(--k), 0 2px 0 2.5px rgba(0, 0, 0, .3); transition: transform .45s var(--spring2); }
.isk-toggle.is-on .isk-toggle__knob { transform: translateX(calc(var(--u) * 4.5)); }
.isk-toggle__txt { position: absolute; top: 50%; transform: translateY(-50%); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; transition: opacity .2s; }
.isk-toggle__off { right: calc(var(--u) * 1); opacity: .6; }
.isk-toggle__on { left: calc(var(--u) * 1.1); opacity: 0; color: var(--a-ink); }
.isk-toggle.is-on .isk-toggle__off { opacity: 0; }
.isk-toggle.is-on .isk-toggle__on { opacity: 1; }

.isk-tabs { position: relative; display: flex; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .4); border-radius: calc(var(--u) * 1.3); background: rgba(0, 0, 0, .38); margin-bottom: calc(var(--u) * 1.3); }
.isk-tabs__hl { position: absolute; left: 0; top: calc(var(--u) * .4); bottom: calc(var(--u) * .4); width: 0; border-radius: calc(var(--u) * .95); pointer-events: none;
  background: linear-gradient(180deg, var(--a-light) -40%, var(--a) 50%); box-shadow: 0 3px 0 var(--a-deep), inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .45s var(--spring), width .45s var(--spring); }
.isk-tabs__hl.is-instant { transition: none; }
.isk-tabs__hl.is-move { animation: isk-pill-squish .45s var(--spring); }
@keyframes isk-pill-squish { 35% { scale: 1.06 .8; } }
.isk-tab { position: relative; z-index: 1; }
.isk-tabs__hint { flex: none; padding: 0 calc(var(--u) * .4); font-size: var(--fs-s); opacity: .85; }
.isk-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em; height: calc(var(--u) * 3.7); border: 0; border-radius: calc(var(--u) * .95);
  background: transparent; color: rgba(255, 255, 255, .72); font: 800 var(--fs-m) / 1 'Rubik', sans-serif; letter-spacing: .03em; cursor: pointer; pointer-events: auto; transition: color .2s, background .2s; }
.isk-tab i { display: block; width: 1.35em; height: 1.35em; }
.isk-tab i svg { width: 100%; height: 100%; }
.isk-tab:hover { color: #fff; }
.isk-tab.is-sel { color: var(--a-ink); animation: isk-tab-pop .4s var(--spring); }
@keyframes isk-tab-pop { 0% { scale: .85; } }

.isk-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 4.3);
  padding: calc(var(--u) * .45) calc(var(--u) * .9) calc(var(--u) * .45) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .035);
  cursor: pointer; transition: background .2s, transform .35s var(--spring); }
.isk-row + .isk-row { margin-top: calc(var(--u) * .45); }
.isk-row.is-focus { background: rgba(var(--a-rgb), .15); transform: translateX(calc(var(--u) * .35)); }
.isk-row__label { font: 700 var(--fs-m) / 1.1 'Rubik', sans-serif; }
.isk-row__ctrl { display: flex; align-items: center; }
.isk-row__ctrl .isk-seg { min-width: calc(var(--u) * 25); }
.isk-row.is-focus .isk-slider__knob { scale: 1.12; box-shadow: 0 0 0 3px var(--k), 0 0 0 7px rgba(var(--a-rgb), .45); }
.isk-rowin { animation: isk-row-in .5s var(--spring) backwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes isk-row-in { from { opacity: 0; translate: calc(var(--dir, 1) * var(--u) * 4) 0; } }
.isk-row.is-flash { animation: isk-row-flash .6s; }
@keyframes isk-row-flash { 20% { background: rgba(var(--a-rgb), .4); } }

/* ------------------------------------------------------------------ SETTINGS */
.isk-settings__panel { position: absolute; left: calc(var(--u) * 3.6); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 58), 64vw); padding: calc(var(--u) * 1.2); }
.isk-rows { min-height: calc(var(--u) * 14); }
.isk-row--link .isk-row__ctrl { gap: .5em; font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .08em; opacity: .85; }
.isk-row--link .isk-row__ctrl i { display: block; width: 1.5em; height: 1.5em; }
.isk-row--link.is-focus .isk-row__ctrl { color: var(--a); opacity: 1; }
.isk-settings__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.2); padding: calc(var(--u) * .9) calc(var(--u) * .3) 0; border-top: 2px solid rgba(255, 255, 255, .07); }
.isk-settings__help { flex: 1; min-height: 2.6em; font: 500 var(--fs-s) / 1.3 'Rubik', sans-serif; color: var(--muted); }
.isk-settings__help.is-in { animation: isk-tip-in .35s var(--spring); }

/* ------------------------------------------------------------------ LOADOUT */
.isk-loadout__body { position: absolute; left: calc(var(--u) * 3.6); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 52), 54vw); display: flex; flex-direction: column; gap: calc(var(--u) * 1.05); }
.isk-loadout__body .isk-seclabel { margin: calc(var(--u) * .3) 0 calc(var(--u) * .2); }
.isk-name { display: flex; align-items: center; gap: calc(var(--u) * 1.2); width: 100%; padding: calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.2);
  background: rgba(20, 16, 32, .9); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 calc(var(--u) * .42) 0 rgba(0, 0, 0, .4); cursor: text; transition: box-shadow .2s; }
.isk-name__label { flex: none; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .15em; opacity: .75; }
.isk-name__field { position: relative; flex: 1; display: flex; align-items: center; }
.isk-name__input { width: 100%; height: calc(var(--u) * 3.1); padding: 0 calc(var(--u) * 2.8) 0 calc(var(--u) * .9); border: 0; outline: 0; border-radius: calc(var(--u) * .75);
  background: rgba(255, 255, 255, .07); color: #fff; font: 400 calc(var(--u) * 1.6) / 1 'Titan One', sans-serif; letter-spacing: .02em; caret-color: var(--a); pointer-events: auto;
  user-select: text; -webkit-user-select: text; transition: background .2s, color .2s, box-shadow .2s; }
.isk-name__pen { position: absolute; right: calc(var(--u) * .8); width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); color: var(--a); pointer-events: none; }
.isk-name__pen svg { width: 100%; height: 100%; }
.isk-name.is-editing .isk-name__input { background: #fff; color: var(--k); box-shadow: 0 0 0 3px var(--a); }
.isk-name.is-shake { animation: isk-shake .4s; }
.isk-name.is-saved { animation: isk-saved .5s var(--spring); }
@keyframes isk-saved { 30% { scale: 1.03; box-shadow: inset 0 0 0 2px var(--a), 0 0 0 4px rgba(var(--a-rgb), .4); } }
.isk-wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); }
.isk-wcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .35); height: calc(var(--u) * 10.6); padding: calc(var(--u) * .7) calc(var(--u) * .5) calc(var(--u) * .85);
  border: 0; border-radius: calc(var(--u) * 1.3); background: rgba(20, 16, 32, .9); color: #fff; cursor: pointer; overflow: hidden; isolation: isolate; pointer-events: auto; font: inherit;
  transform: rotate(var(--tilt, 0deg)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .45);
  transition: transform .42s var(--spring), box-shadow .25s; }
.isk-wcard__blob { position: absolute; z-index: -1; left: 50%; top: 36%; width: calc(var(--u) * 11.5); transform: translate(-50%, -50%) scale(0) rotate(-30deg); transition: transform .5s var(--spring2); }
.isk-wcard.is-equipped .isk-wcard__blob { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.isk-wcard__icon { flex: 1; display: grid; place-items: center; width: 82%; min-height: 0; color: #fff; transition: transform .45s var(--spring); }
.isk-wcard__icon svg { width: 100%; height: calc(var(--u) * 5.6); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.isk-wcard__name { font: 400 calc(var(--u) * 1.3) / 1.05 'Titan One', sans-serif; text-align: center; -webkit-text-stroke: .18em var(--k); paint-order: stroke fill; }
.isk-wcard__kind { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.isk-wcard__eq { position: absolute; top: calc(var(--u) * .55); right: calc(var(--u) * .55); display: grid; place-items: center; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%;
  background: #fff; color: var(--k); box-shadow: 0 0 0 2.5px var(--k); transform: scale(0) rotate(-40deg); transition: transform .4s var(--spring2); }
.isk-wcard__eq svg { width: 64%; height: 64%; }
.isk-wcard.is-equipped .isk-wcard__eq { transform: scale(1) rotate(0deg); }
.isk-wcard.is-equipped { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 calc(var(--u) * .45) 0 var(--a-deep); }
.isk-wcard.is-focus { transform: rotate(0deg) translateY(calc(var(--u) * -.35)) scale(1.04); }
.isk-wcard.is-focus .isk-wcard__icon { transform: rotate(-6deg) scale(1.08); }
.isk-wd { display: grid; grid-template-columns: 1.08fr 1fr; align-items: start; gap: calc(var(--u) * .8) calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.7) calc(var(--u) * 1.5); }
.isk-wd__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.isk-wd__kind { display: block; margin-bottom: .45em; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .18em; color: var(--a); }
.isk-wd__name { display: block; font-size: calc(var(--u) * 2.7); line-height: 1; }
.isk-wd.is-swap .isk-wd__name, .isk-wd.is-swap .isk-wd__blurb { animation: isk-tip-in .4s var(--spring); }
.isk-wd__eq { display: none; align-items: center; gap: .4em; padding: .4em .8em .4em .5em; border-radius: 999px; background: var(--a); color: var(--a-ink); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; box-shadow: 0 3px 0 var(--a-deep); }
.isk-wd__eq i { display: block; width: 1.3em; height: 1.3em; }
.isk-wd.is-equipped .isk-wd__eq { display: inline-flex; animation: isk-pop .4s var(--spring); }
.isk-wd__blurb { grid-column: 1 / -1; margin: 0; font: 500 var(--fs-m) / 1.35 'Rubik', sans-serif; color: #ddd8ea; }
.isk-wd__stats { align-self: stretch; display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(var(--u) * .62); }
.isk-stat { display: grid; grid-template-columns: calc(var(--u) * 8.2) 1fr calc(var(--u) * 2.4); align-items: center; gap: calc(var(--u) * .7); }
.isk-stat__label { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.isk-stat__bar { position: relative; height: calc(var(--u) * 1.1); border-radius: 999px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
.isk-stat__ghost, .isk-stat__fill { position: absolute; inset: 0; border-radius: inherit; transition: clip-path .6s var(--spring); }
.isk-stat__ghost { background: rgba(255, 255, 255, .38); clip-path: inset(0 calc((1 - var(--g, 0)) * 100%) 0 0 round 999px); }
.isk-stat__fill { background: linear-gradient(180deg, var(--a-light) -30%, var(--a) 50%, var(--a-dark)); clip-path: inset(0 calc((1 - var(--v, 0)) * 100%) 0 0 round 999px); }
.isk-stat__bar.is-up .isk-stat__fill { background: linear-gradient(180deg, #b6ffcf -30%, #3ddc84 50%, #1e9e58); }
.isk-stat__ticks { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(10, 8, 18, .45) calc(10% - 2px) 10%); }
.isk-wd__kits { display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.isk-kit { display: flex; gap: calc(var(--u) * .9); align-items: flex-start; padding: calc(var(--u) * .7) calc(var(--u) * .9); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .05); }
.isk-kit__icon { flex: none; display: grid; place-items: center; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border-radius: calc(var(--u) * .8); background: rgba(0, 0, 0, .38); color: var(--a); }
.isk-kit__icon svg { width: 80%; height: 80%; }
.isk-kit small { display: block; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; opacity: .6; }
.isk-kit b { display: block; margin: .25em 0 .25em; font: 400 calc(var(--u) * 1.3) / 1 'Titan One', sans-serif; }
.isk-kit span { display: block; font: 500 var(--fs-xs) / 1.3 'Rubik', sans-serif; color: #d0cadf; }

/* ------------------------------------------------------------------ HOW TO PLAY */
.isk-howto__body { position: absolute; left: calc(var(--u) * 3.6); right: calc(var(--u) * 3.6); top: calc(var(--u) * 10.4); display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(var(--u) * 2.2); align-items: start; }
.isk-howto__rules { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.5); }
.isk-rule { position: relative; padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.5); background: rgba(22, 18, 34, .92);
  transform: rotate(var(--tilt, 0deg)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .09), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .45); }
.isk-rule__art { height: calc(var(--u) * 9.8); margin-bottom: calc(var(--u) * .9); border-radius: calc(var(--u) * 1); overflow: hidden;
  background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .5), transparent 40%), linear-gradient(180deg, #86dcf7, #4fb2e6); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
.isk-rule__art svg { width: 100%; height: 100%; }
.isk-rule__num { position: absolute; top: calc(var(--u) * -.9); left: calc(var(--u) * -.7); display: grid; place-items: center; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); border-radius: 50%;
  background: var(--a); color: var(--a-ink); font: 400 calc(var(--u) * 1.5) / 1 'Titan One', sans-serif; box-shadow: 0 0 0 3px var(--k), 0 3px 0 3px rgba(0, 0, 0, .3); }
.isk-rule__title { padding: 0 calc(var(--u) * .4); font: 400 calc(var(--u) * 1.6) / 1.1 'Titan One', sans-serif; }
.isk-rule__text { margin: calc(var(--u) * .4) 0 0; padding: 0 calc(var(--u) * .4); font: 500 var(--fs-s) / 1.38 'Rubik', sans-serif; color: #d9d3e7; }
.isk-howto__ctl { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.2); }
.isk-ctl-switch { display: flex; margin: calc(var(--u) * 1) 0 calc(var(--u) * .8); border-radius: 999px; }
.isk-ctl-switch .isk-seg { width: 100%; }
.isk-segico { display: inline-flex; align-items: center; gap: .55em; }
.isk-segico i { display: block; width: 1.45em; height: 1.45em; }
.isk-segico i svg { width: 100%; height: 100%; }
.isk-ctl-wrap.is-in .isk-ctl__row { animation: isk-tip-in .4s var(--spring) backwards; }
.isk-ctl-wrap.is-in .isk-ctl__row:nth-child(2) { animation-delay: 25ms; } .isk-ctl-wrap.is-in .isk-ctl__row:nth-child(3) { animation-delay: 50ms; }
.isk-ctl-wrap.is-in .isk-ctl__row:nth-child(4) { animation-delay: 75ms; } .isk-ctl-wrap.is-in .isk-ctl__row:nth-child(5) { animation-delay: 100ms; }
.isk-ctl-wrap.is-in .isk-ctl__row:nth-child(6) { animation-delay: 125ms; } .isk-ctl-wrap.is-in .isk-ctl__row:nth-child(7) { animation-delay: 150ms; }
.isk-ctl-wrap.is-in .isk-ctl__row:nth-child(8) { animation-delay: 175ms; } .isk-ctl-wrap.is-in .isk-ctl__row:nth-child(9) { animation-delay: 200ms; }
.isk-ctl__row { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: calc(var(--u) * 2.85); padding: calc(var(--u) * .2) calc(var(--u) * .3); border-bottom: 1.5px solid rgba(255, 255, 255, .07); }
.isk-ctl__row:last-child { border-bottom: 0; }
.isk-ctl__act { font: 700 var(--fs-m) / 1.15 'Rubik', sans-serif; }
.isk-ctl__act em { margin-left: .55em; padding: .15em .45em; border-radius: .4em; background: rgba(255, 255, 255, .12); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .85; vertical-align: .1em; }
.isk-ctl__keys { display: flex; align-items: center; flex: none; font-size: var(--fs-m); }
.isk-ctl__keys em { margin: 0 .35em; font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; font-style: normal; opacity: .6; }
.isk-ctl--compact .isk-ctl__row { min-height: calc(var(--u) * 2.6); }

/* ------------------------------------------------------------------ CREDITS */
.isk-cred__view { position: absolute; left: 50%; top: 0; bottom: 0; width: min(calc(var(--u) * 58), 92vw); transform: translateX(-50%); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 20%, #000 80%, transparent 100%); }
.isk-cred__roll { position: absolute; left: 0; right: 0; top: 0; text-align: center; will-change: transform; }
.isk-cred__logo { margin-bottom: calc(var(--u) * 5); }
.isk-cred__lead { margin: 0 0 calc(var(--u) * 7); font: 600 var(--fs-l) / 1.3 'Rubik', sans-serif; color: #e6e1f2; }
.isk-cred__sec { margin: 0 0 calc(var(--u) * 6.5); }
.isk-cred__sec h3 { margin: 0 0 calc(var(--u) * 1.1); font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--a); }
.isk-cred__sec p { margin: calc(var(--u) * .45) 0; font: 400 calc(var(--u) * 2) / 1.25 'Titan One', sans-serif; }
.isk-cred__sec p.dim { font: 500 var(--fs-m) / 1.3 'Rubik', sans-serif; opacity: .7; }
.isk-cred__cast { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1) calc(var(--u) * 1.2); margin-top: calc(var(--u) * 1.4); }
.isk-cred__cast span { display: flex; align-items: center; justify-content: center; gap: .45em; font: 700 var(--fs-m) / 1 'Rubik', sans-serif; }
.isk-cred__cast i { display: block; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); color: var(--c); }
.isk-cred__cast i svg { width: 100%; height: 100%; }
.isk-cred__end { position: relative; display: grid; place-items: center; height: calc(var(--u) * 22); margin-top: calc(var(--u) * 5); isolation: isolate; }
.isk-cred__endsplat { position: absolute; z-index: -1; width: calc(var(--u) * 28); animation: isk-spin 40s linear infinite; }
.isk-cred__end .isk-display { font-size: calc(var(--u) * 4.8); }
@keyframes isk-spin { to { rotate: 360deg; } }

/* ------------------------------------------------------------------ PAUSE */
.isk-pause__dim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 14, .84), rgba(8, 6, 14, .5)); backdrop-filter: blur(7px) saturate(.8); animation: isk-fade .25s both; }
.isk-pause__col { position: absolute; left: calc(var(--u) * 3.8); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 30); display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }
.isk-pause__title { position: relative; isolation: isolate; font-size: calc(var(--u) * 5); line-height: 1; padding-left: calc(var(--u) * .5); }
.isk-pause__blob { position: absolute; z-index: -1; left: calc(var(--u) * -1.8); top: 50%; width: calc(var(--u) * 10); transform: translateY(-50%) rotate(-10deg); }
.isk-pause__menu { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.isk-pause__ref { position: absolute; right: calc(var(--u) * 3.8); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 34); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.7) calc(var(--u) * 1.2); }
.isk-pause__ref .isk-seclabel { margin-bottom: calc(var(--u) * .7); }

/* ------------------------------------------------------------------ MODAL */
.isk-modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8, 6, 14, .62); backdrop-filter: blur(5px); animation: isk-fade .2s both; }
.isk-modal.is-leaving { animation: isk-fade-out .2s forwards; pointer-events: none; }
@keyframes isk-fade-out { to { opacity: 0; } }
.isk-modal__card { position: relative; width: min(calc(var(--u) * 46), 90vw); padding: calc(var(--u) * 3.4) calc(var(--u) * 3) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 2); text-align: center; background: var(--k2);
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--k), 0 calc(var(--u) * .8) 0 7px rgba(0, 0, 0, .35); animation: isk-pop .5s var(--spring) both; }
.isk-modal__splat { position: absolute; left: 50%; top: calc(var(--u) * -5.5); width: calc(var(--u) * 11); transform: translateX(-50%) rotate(-8deg); }
.isk-modal__title { font-size: calc(var(--u) * 3.3); }
.isk-modal__text { margin: calc(var(--u) * 1) auto calc(var(--u) * 2.2); max-width: 34em; font: 500 var(--fs-m) / 1.4 'Rubik', sans-serif; color: var(--muted); }
.isk-modal__btns { display: flex; justify-content: center; gap: calc(var(--u) * 1.3); }

/* ------------------------------------------------------------------ RESULTS */
.isk-res__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 18, .42) 0%, rgba(10, 8, 18, 0) 17%, rgba(10, 8, 18, 0) 34%, rgba(10, 8, 18, .74) 50%, rgba(10, 8, 18, .9) 100%); animation: isk-fade .6s both; }
.isk-res__head { position: absolute; left: calc(var(--u) * 3.8); top: calc(var(--u) * 2.6); isolation: isolate; }
.isk-res__splat { position: absolute; z-index: -1; left: calc(var(--u) * -3.4); top: 44%; width: calc(var(--u) * 27); transform: translateY(-50%) rotate(-6deg); }
.isk-res__splat svg { animation: isk-spin 60s linear infinite; }
.isk-res__title { font-size: calc(var(--u) * 6.6); line-height: 1; }
.isk-res__head.is-lose .isk-res__title { color: #ece8f6; rotate: 2deg; }
.isk-res__head.is-lose .isk-res__splat { filter: saturate(.55) brightness(.72); }
.isk-res__meta { display: inline-flex; align-items: center; gap: .5em; margin-top: calc(var(--u) * .9); padding: .4em .85em .4em .55em; border-radius: 999px; background: rgba(14, 11, 22, .85); font: 700 var(--fs-s) / 1 'Rubik', sans-serif; }
.isk-res__meta i { display: block; width: 1.4em; height: 1.4em; color: var(--ta); }
.isk-res__body { position: absolute; left: calc(var(--u) * 3.8); right: calc(var(--u) * 3.8); top: 42%; bottom: calc(var(--u) * 6.2); display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.isk-cover__names { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: calc(var(--u) * .6); font: 400 calc(var(--u) * 1.7) / 1 'Titan One', sans-serif; -webkit-text-stroke: .2em var(--k); paint-order: stroke fill; }
.isk-cover__names span { display: flex; align-items: center; gap: .4em; }
.isk-cover__names .ta { color: var(--ta); }
.isk-cover__names .tb { color: var(--tb); }
.isk-cover__names b { color: #fff; font-weight: 400; margin: 0 .2em; }
.isk-cover__names i { display: block; width: 1.3em; height: 1.3em; color: #ffd54a; filter: drop-shadow(0 2px 0 var(--k)); }
.isk-cover__names i svg { width: 100%; height: 100%; }
.isk-cover { position: relative; height: calc(var(--u) * 2.2); border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--k), 0 calc(var(--u) * .4) 0 6px rgba(0, 0, 0, .3); }
.isk-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 45%); pointer-events: none; }
.isk-cover__a, .isk-cover__b { position: absolute; top: 0; bottom: 0; }
.isk-cover__a { left: 0; width: calc(var(--pa) * var(--ga, 1) * 100%); background: linear-gradient(180deg, var(--ta-light) -30%, var(--ta) 45%, var(--ta-dark)); overflow: hidden; }
.isk-cover__b { right: 0; width: calc(var(--pb) * var(--ga, 1) * 100%); background: linear-gradient(180deg, var(--tb-light) -30%, var(--tb) 45%, var(--tb-dark)); overflow: hidden; }
.isk-cover__num { display: none; }
@keyframes isk-grow-l { from { clip-path: inset(0 100% 0 0); } }
@keyframes isk-grow-r { from { clip-path: inset(0 0 0 100%); } }
.isk-res__teams { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.6); }
.isk-ttable--a { --tc: var(--ta); --tc-rgb: var(--ta-rgb); }
.isk-ttable--b { --tc: var(--tb); --tc-rgb: var(--tb-rgb); }
.isk-ttable__head, .isk-prow { display: grid; grid-template-columns: calc(var(--u) * 2.7) 1fr calc(var(--u) * 8) calc(var(--u) * 3.3) calc(var(--u) * 3.3); align-items: center; gap: calc(var(--u) * .6); }
.isk-ttable__head { padding: 0 calc(var(--u) * 1) calc(var(--u) * .35) calc(var(--u) * .5); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .85; }
.isk-ttable__team { grid-column: 1 / 3; display: flex; align-items: center; gap: .6em; text-transform: uppercase; }
.isk-ttable__dot { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px var(--k), 0 0 0 3.5px rgba(255, 255, 255, .6); }
.isk-ttable__col { display: flex; align-items: center; justify-content: center; gap: .35em; }
.isk-ttable__col:nth-child(2) { justify-content: flex-end; }
.isk-ttable__col i { display: block; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); color: var(--tc); }
.isk-ttable__col i svg { width: 100%; height: 100%; }
.isk-prow { height: calc(var(--u) * 2.65); margin-top: calc(var(--u) * .32); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * .5); border-radius: calc(var(--u) * .9); background: rgba(255, 255, 255, .06); font: 700 var(--fs-m) / 1 'Rubik', sans-serif; }
.isk-prow__w { height: calc(var(--u) * 2.3); color: var(--tc); }
.isk-prow__w svg { width: 100%; height: 100%; }
.isk-prow__name { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-prow__name em { flex: none; margin-left: .55em; padding: .2em .45em; border-radius: .4em; background: #fff; color: var(--k); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .08em; }
.isk-prow__turf { position: relative; display: flex; align-items: baseline; justify-content: flex-end; gap: .12em; font: 400 calc(var(--u) * 1.35) / 1 'Titan One', sans-serif; }
.isk-prow__turf small { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; opacity: .7; }
.isk-prow__turfbar { position: absolute; right: 0; bottom: calc(var(--u) * -.45); width: 100%; height: calc(var(--u) * .28); border-radius: 999px; background: var(--tc); transform-origin: right; transform: scaleX(var(--t)); opacity: .75; }
.isk-prow__n { text-align: center; font: 400 calc(var(--u) * 1.35) / 1 'Titan One', sans-serif; }
.isk-prow.is-self { background: rgba(var(--tc-rgb), .3); box-shadow: inset 0 0 0 2px var(--tc), 0 3px 0 rgba(0, 0, 0, .3); }
.isk-res__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: auto; }
.isk-xp { display: flex; align-items: center; gap: calc(var(--u) * 1.4); width: min(calc(var(--u) * 50), 48vw); padding: calc(var(--u) * .85) calc(var(--u) * 1.5); }
.isk-lvl--big { position: relative; isolation: isolate; font-size: calc(var(--u) * 2.1); padding: .3em .55em .26em; }
.isk-lvl--big.is-pop { animation: isk-lvl-pop .6s var(--spring2); }
@keyframes isk-lvl-pop { 0% { scale: 1.6; rotate: -10deg; } }
.isk-lvl__burst { position: absolute; z-index: -1; left: 50%; top: 50%; width: 260%; height: 260%; translate: -50% -50%; color: var(--ta); opacity: 0; pointer-events: none; }
.isk-lvl__burst svg { width: 100%; height: 100%; }
.isk-xp.is-levelup .isk-lvl__burst { animation: isk-burst 1s var(--out); }
@keyframes isk-burst { 0% { opacity: 1; scale: .2; rotate: -30deg; } 60% { opacity: 1; } 100% { opacity: 0; scale: 1.2; rotate: 20deg; } }
.isk-xp__mid { flex: 1; min-width: 0; }
.isk-xp__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: calc(var(--u) * .55); }
.isk-xp__gain { font: 400 calc(var(--u) * 1.75) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; }
.isk-xp__next { font: 600 var(--fs-s) / 1 'Rubik', sans-serif; opacity: .75; white-space: nowrap; }
.isk-xpbar--big { height: calc(var(--u) * 1.4); }
.isk-results .isk-xpbar i { background: linear-gradient(180deg, var(--ta-light) -30%, var(--ta) 50%, var(--ta-dark)); }
.isk-xp__lvup { display: inline-block; margin-left: .6em; padding: .22em .55em .26em; border-radius: .4em; background: var(--ta); color: var(--ta-ink); font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; letter-spacing: .04em;
  box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px var(--k); vertical-align: .15em; opacity: 0; scale: .3; rotate: -8deg; }
.isk-xp.is-levelup .isk-xp__lvup, .isk-xp.is-done.is-levelup .isk-xp__lvup { animation: isk-lvup .7s var(--spring2) forwards; }
@keyframes isk-lvup { 0% { opacity: 0; scale: .3; rotate: -20deg; } 40% { opacity: 1; scale: 1.35; rotate: -2deg; } 100% { opacity: 1; scale: 1; rotate: -5deg; } }
.isk-res__btns { display: flex; gap: calc(var(--u) * 1.2); }
.isk-results .isk-btn--primary { --bg: var(--ta); color: var(--ta-ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .15), 0 calc(var(--u) * .42) 0 var(--ta-deep); }
.isk-results .isk-btn:not(.isk-btn--primary) { --fill: var(--ta); --fill-ink: var(--ta-ink); }
.isk-results .isk-btn--primary.is-focus, .isk-btn--primary.is-focus { color: var(--fill-ink); }

/* ------------------------------------------------------------------ WIPE */
.isk-wipe { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; visibility: hidden; }
.isk-wipe.is-run { visibility: visible; }
.isk-wipe__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.isk-wipe__mark { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: calc(var(--u) * -5.5) 0 0 calc(var(--u) * -5.5); color: #fff; opacity: 0; pointer-events: none; }
.isk-wipe__squid { position: absolute; inset: 0; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.isk-wipe__squid svg { width: 100%; height: 100%; }
.isk-wipe__ring { position: absolute; inset: -18%; border-radius: 50%; border: calc(var(--u) * .5) solid rgba(255, 255, 255, .85); opacity: 0; }
.isk-wipe__mark.is-on { animation: isk-wipe-mark 1s linear forwards; }
.isk-wipe__mark.is-on .isk-wipe__ring { animation: isk-wipe-ring 1s var(--out) forwards; }
@keyframes isk-wipe-mark { 0%, 30% { opacity: 0; scale: .4; rotate: -30deg; } 40% { opacity: 1; scale: 1.12; rotate: 6deg; } 48% { opacity: 1; scale: 1; rotate: 0deg; } 56% { opacity: 1; scale: 1; } 64%, 100% { opacity: 0; scale: .85; translate: 0 calc(var(--u) * 2); } }
@keyframes isk-wipe-ring { 0%, 36% { opacity: 0; scale: .5; } 42% { opacity: .9; } 62%, 100% { opacity: 0; scale: 1.6; border-width: 1px; } }


/* =====================================================================================
   MENUS v2 — micro-interactions, live previews, pause match panel, results awards (menus.js + menu-art.js)
   ===================================================================================== */
/* award / emblem icon cut-outs take a light metal colour */
.isk-ico-cut { stroke: var(--cut, #fff); }
circle.isk-ico-cut { fill: var(--cut, #fff); }

/* DOM ink burst (inkBurst in menu-art.js) */
.isk-burst { position: absolute; width: 0; height: 0; z-index: 45; pointer-events: none; color: var(--c); }
.isk-burst__splat { position: absolute; left: calc(var(--u) * -3.2 * var(--s)); top: calc(var(--u) * -3.2 * var(--s)); width: calc(var(--u) * 6.4 * var(--s)); height: calc(var(--u) * 6.4 * var(--s)); animation: isk-burst-splat .75s var(--out) forwards; }
.isk-burst__splat svg { width: 100%; height: 100%; filter: drop-shadow(0 0 0 var(--k)); }
@keyframes isk-burst-splat { 0% { opacity: 1; scale: .15; rotate: -40deg; } 30% { opacity: .95; scale: 1.08; } 100% { opacity: 0; scale: 1.25; rotate: 10deg; } }
.isk-burst__ring { position: absolute; left: calc(var(--u) * -4 * var(--s)); top: calc(var(--u) * -4 * var(--s)); width: calc(var(--u) * 8 * var(--s)); height: calc(var(--u) * 8 * var(--s)); border-radius: 50%;
  border: calc(var(--u) * .45) solid currentColor; box-shadow: 0 0 0 2px var(--k), inset 0 0 0 2px var(--k); animation: isk-burst-ring .6s var(--out) forwards; }
@keyframes isk-burst-ring { 0% { opacity: 1; scale: .2; } 100% { opacity: 0; scale: 1.5; border-width: 1px; } }
.isk-burst__drop { position: absolute; left: 0; top: 0; width: calc(var(--u) * 1 * var(--r)); height: calc(var(--u) * 1 * var(--r)); margin: calc(var(--u) * -.5 * var(--r)) 0 0 calc(var(--u) * -.5 * var(--r));
  border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--k); animation: isk-burst-drop var(--t) cubic-bezier(.2, .75, .35, 1) forwards; }
@keyframes isk-burst-drop { 0% { opacity: 1; transform: translate(0, 0) scale(1.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + var(--u) * 1.6)) scale(.35); } }

/* buttons: ink floods in from the pointer / arrival side (see .isk-btn__blob), press squash */
.isk-btn.is-hover:not(.is-focus) .isk-btn__blob { transform: translate(-50%, -50%) scale(.08) rotate(-20deg); }

/* ------------------------------------------------------------------ title */
.isk-title__logoin { position: relative; }
.isk-title__shock { position: absolute; left: 50%; top: 46%; width: calc(var(--u) * 44); height: calc(var(--u) * 44); margin: calc(var(--u) * -22) 0 0 calc(var(--u) * -22); border-radius: 50%;
  border: calc(var(--u) * .7) solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 3px rgba(21, 18, 28, .5); opacity: 0; pointer-events: none; }
.isk-title.is-go .isk-title__shock { animation: isk-title-shock .65s var(--out) forwards; }
.isk-title.is-go .isk-title__logoin { animation: isk-title-go .45s var(--spring); }
@keyframes isk-title-shock { 0% { opacity: 1; scale: .25; } 100% { opacity: 0; scale: 1.25; border-width: 1px; } }
@keyframes isk-title-go { 0% { scale: 1; } 30% { scale: 1.09 .9; } 62% { scale: .97 1.05; } 100% { scale: 1; } }

/* ------------------------------------------------------------------ main */
.isk-main__desc { position: absolute; left: calc(var(--u) * 4.3); top: calc(52% + var(--u) * 16.9); display: flex; align-items: center; gap: .6em; max-width: calc(var(--u) * 30);
  font: 600 var(--fs-m) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 8px rgba(0, 0, 0, .35); }
.isk-main__descdot { flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 2px var(--k); animation: isk-descdot 1.6s ease-in-out infinite; }
@keyframes isk-descdot { 50% { scale: 1.35; box-shadow: 0 0 0 2px var(--k), 0 0 10px var(--a); } }
.isk-main__desc.is-swap .isk-main__desctext { animation: isk-tip-in .35s var(--spring); }
.isk-profile__emblem { display: block; flex: none; width: 1.75em; height: 1.75em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.isk-profile__emblem svg { width: 100%; height: 100%; }
.isk-profile__stats .isk-profile__next { flex: 1.15; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3em; background: rgba(var(--a-rgb), .14); box-shadow: inset 0 0 0 1.5px rgba(var(--a-rgb), .35); }
.isk-profile__next span { font: 900 calc(var(--u) * .6) / 1 'Rubik', sans-serif; letter-spacing: .14em; opacity: .75; }
.isk-profile__next b { font: 400 calc(var(--u) * 1.2) / 1 'Titan One', sans-serif; color: var(--a-light); }
.isk-xpbar--shine { overflow: hidden; }
.isk-xpbar__glint { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; clip-path: inset(0 calc((1 - var(--t, 0)) * 100%) 0 0 round 999px);
  background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, .75) 50%, transparent 60% 100%) 0 0 / 300% 100% no-repeat; animation: isk-glint 3.2s ease-in-out infinite 1s; }
@keyframes isk-glint { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

/* ------------------------------------------------------------------ setup: map cards (3D tilt, pan, glare, own focus ring) */
.isk-mapcard { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg)); }
.isk-mapcard.is-hover { transition: transform .2s var(--out), box-shadow .25s; }
.isk-mapcard.is-focus { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--u) * -.5)) scale(1.03);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--k), 0 0 0 9px rgba(var(--a-rgb), .5), 0 calc(var(--u) * .9) calc(var(--u) * 1.8) rgba(0, 0, 0, .35); }
.isk-mapcard.is-sel.is-focus { box-shadow: 0 0 0 4px var(--a), 0 0 0 7px #fff, 0 0 0 10px var(--k), 0 calc(var(--u) * .9) calc(var(--u) * 1.8) rgba(0, 0, 0, .35); }
.isk-mapcard.is-down { scale: .97; }
.isk-mapcard__art { position: relative; }
.isk-mapcard__art svg, .isk-mapcard.is-focus .isk-mapcard__art svg { transform: none; }
.isk-mapcard__pan { position: absolute; inset: -7%; display: block; transition: transform .5s var(--out);
  transform: translate(calc(var(--px, 0) * -6%), calc(var(--py, 0) * -6%)); }
.isk-mapcard.is-focus .isk-mapcard__pan, .isk-mapcard.is-hover .isk-mapcard__pan { transform: translate(calc(var(--px, 0) * -6%), calc(var(--py, 0) * -6%)) scale(1.07); }
.isk-mapcard__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 9, 22, 0) 58%, rgba(12, 9, 22, .38)); }
.isk-mapcard__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 42%); }
.isk-mapcard.is-hover .isk-mapcard__glare, .isk-mapcard.is-focus .isk-mapcard__glare { opacity: 1; }
.isk-mapcard__sel { position: absolute; top: calc(var(--u) * 1.15); right: calc(var(--u) * 4); padding: .3em .65em; border-radius: 999px; background: var(--a); color: var(--a-ink);
  font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; box-shadow: 0 0 0 2px var(--k); opacity: 0; scale: .4; transform-origin: right center; transition: opacity .2s, scale .4s var(--spring2); }
.isk-mapcard.is-sel .isk-mapcard__sel { opacity: 1; scale: 1; }
/* START: charge-up bar, ready chip, running chevrons */
.isk-btn--start .isk-btn__sub { max-width: calc(var(--u) * 17.5); }
.isk-btn--start .isk-btn__text { min-width: 0; }
.isk-start__charge { position: absolute; left: calc(var(--u) * 1.3); right: calc(var(--u) * 1.3); bottom: calc(var(--u) * .5); height: calc(var(--u) * .42); border-radius: 999px; background: rgba(0, 0, 0, .22); overflow: hidden; }
.isk-start__charge i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, .55), #fff); transform-origin: left center; animation: isk-charge-up 1.1s cubic-bezier(.35, .1, .2, 1) .45s backwards; }
.isk-btn--start.is-recharge .isk-start__charge i { animation: isk-charge-up .65s cubic-bezier(.35, .1, .2, 1) backwards; }
@keyframes isk-charge-up { from { transform: scaleX(0); } }
.isk-btn--start:not(.is-focus) .isk-start__charge i { background: linear-gradient(90deg, rgba(var(--a-rgb), .6), var(--a)); }
.isk-start__ready { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * .7); display: flex; align-items: center; gap: .3em; padding: .25em .55em .25em .35em; border-radius: 999px;
  background: var(--k); color: #7dffb0; font: 900 calc(var(--u) * .68) / 1 'Rubik', sans-serif; letter-spacing: .12em; animation: isk-pop .45s var(--spring2) backwards 1.55s; }
.isk-start__ready i { display: block; width: 1.25em; height: 1.25em; }
.isk-btn--start.is-recharge .isk-start__ready { animation: isk-pop .45s var(--spring2) backwards .6s; }
.isk-start__chev { position: absolute; right: calc(var(--u) * 1.4); top: 58%; translate: 0 -50%; display: flex; }
.isk-start__chev i { display: block; width: calc(var(--u) * .95); height: calc(var(--u) * .95); margin-left: calc(var(--u) * -.1); border-top: calc(var(--u) * .34) solid currentColor; border-right: calc(var(--u) * .34) solid currentColor;
  border-radius: 2px; rotate: 45deg; opacity: .25; animation: isk-chev 1.1s ease-in-out infinite; }
.isk-start__chev i:nth-child(2) { animation-delay: .14s; } .isk-start__chev i:nth-child(3) { animation-delay: .28s; }
@keyframes isk-chev { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ------------------------------------------------------------------ loadout: weapon cards + detail */
.isk-wcard { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg)); }
.isk-wcard.is-hover { transition: transform .18s var(--out), box-shadow .25s; }
.isk-wcard.is-focus { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--u) * -.4)) scale(1.05);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 0 0 3px #fff, 0 0 0 6px var(--k), 0 0 0 9px rgba(var(--a-rgb), .5), 0 calc(var(--u) * .8) calc(var(--u) * 1.5) rgba(0, 0, 0, .35); }
.isk-wcard.is-down { scale: .95; }
.isk-wcard__icon { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 7px); }
.isk-wcard__ink { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--a-rgb), .5), rgba(var(--a-rgb), 0) 62%); }
.isk-wcard.is-hover .isk-wcard__ink, .isk-wcard.is-focus .isk-wcard__ink { opacity: 1; }
.isk-wcard__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(calc(var(--px, 0) * 70%)); }
.isk-wcard.is-hover .isk-wcard__glare, .isk-wcard.is-focus .isk-wcard__glare { opacity: 1; }
.isk-wd__badges { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.isk-wd__cmp { display: none; align-items: baseline; gap: .35em; padding: .4em .8em; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.isk-wd__cmp b { color: #fff; font-weight: 900; }
.isk-wd.is-compare .isk-wd__cmp { display: inline-flex; animation: isk-pop .35s var(--spring); }
.isk-stat__num { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.isk-stat__num.is-up { color: #7dffb0; }
.isk-stat__num.is-down { color: #ff8a9a; }
.isk-stat__bar.is-down .isk-stat__fill { background: linear-gradient(180deg, #ffc2cb -30%, #ff5a74 50%, #c22a44); }
.isk-wd.is-enter .isk-stat { animation: isk-tip-in .45s var(--spring) backwards; animation-delay: calc(var(--i) * 60ms + 200ms); }

/* ------------------------------------------------------------------ settings: rows, controls, saved chip */
.isk-row__pip { display: inline-block; width: .5em; height: .5em; margin-right: .65em; border-radius: 50%; background: rgba(255, 255, 255, .25); vertical-align: .08em; transition: background .2s, scale .3s var(--spring), box-shadow .2s; }
.isk-row.is-focus .isk-row__pip { background: var(--a); scale: 1.45; box-shadow: 0 0 8px rgba(var(--a-rgb), .9); }
.isk-slider__def { position: absolute; z-index: 1; top: calc(var(--u) * -.38); bottom: calc(var(--u) * -.38); left: calc(var(--d) * 100%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .5); pointer-events: none; }
.isk-slider__knob { z-index: 2; }
.isk-toggle__ink { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.isk-toggle__ink::before { content: ''; position: absolute; left: calc(var(--u) * 5.5); top: 50%; width: calc(var(--u) * 13); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 62%); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.isk-toggle.is-flip.is-on .isk-toggle__ink::before { animation: isk-toggle-ink .55s var(--out); }
.isk-toggle.is-flip .isk-toggle__knob { animation: isk-knob-squash .45s var(--spring); }
@keyframes isk-toggle-ink { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes isk-knob-squash { 30% { scale: 1.3 .8; } }
.isk-saved { display: flex; align-items: center; gap: .5em; font: 700 var(--fs-s) / 1.2 'Rubik', sans-serif; color: var(--muted); }
.isk-saved i { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; padding: .22em; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #7dffb0; transition: background .2s, color .2s; }
.isk-saved i svg { width: 100%; height: 100%; }
.isk-saved.is-on { color: #fff; animation: isk-saved-pop .6s var(--spring); }
.isk-saved.is-on i { background: #3ddc84; color: var(--k); }
@keyframes isk-saved-pop { 0% { scale: .9; } 40% { scale: 1.06; } }

/* ------------------------------------------------------------------ settings: live preview card */
.isk-prev { position: absolute; left: calc(var(--u) * 5.6 + min(var(--u) * 58, 64vw)); top: calc(var(--u) * 10.4); width: calc(var(--u) * 30.5); padding: calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 1.5); background: linear-gradient(170deg, rgba(38, 31, 58, .9), rgba(18, 14, 30, .92)); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 2px 0 rgba(255, 255, 255, .06), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .38), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .28); }
.isk-prev__head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); margin-bottom: calc(var(--u) * .9); min-height: calc(var(--u) * 2.4); }
.isk-prev__label { font: 400 calc(var(--u) * 1.45) / 1.05 'Titan One', sans-serif; }
.isk-prev__val { flex: none; padding: .38em .8em; border-radius: 999px; background: var(--a); color: var(--a-ink); font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .06em; box-shadow: 0 3px 0 var(--a-deep); white-space: nowrap; }
.isk-prev__val.is-empty { display: none; }
.isk-prev__stage { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--u) * 1.1); overflow: hidden; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); }
.isk-prev__help { margin: calc(var(--u) * .9) 0 0; min-height: 2.7em; font: 500 var(--fs-s) / 1.35 'Rubik', sans-serif; color: var(--muted); }
.isk-prev.is-swap .isk-prev__label, .isk-prev.is-swap .isk-prev__help { animation: isk-tip-in .35s var(--spring); }
.isk-pv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .55); padding: calc(var(--u) * .8); animation: isk-pv-in .4s var(--spring) backwards; }
.isk-pv.is-out { animation: isk-pv-out .25s var(--in) forwards; }
@keyframes isk-pv-in { from { opacity: 0; scale: .9; translate: 0 calc(var(--u) * 1); } }
@keyframes isk-pv-out { to { opacity: 0; scale: 1.04; } }
.isk-pvsvg { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
.isk-pv-cap { flex: none; max-width: 100%; font: 600 calc(var(--u) * .78) / 1.25 'Rubik', sans-serif; color: rgba(255, 255, 255, .88); text-align: center; }
.isk-pv-cap b { color: var(--a-light); font-weight: 900; }
.isk-pv-row { flex: none; display: flex; align-items: center; gap: calc(var(--u) * .8); width: 100%; }
/* look speed */
.isk-pv-screen { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; border-radius: calc(var(--u) * .8); overflow: hidden; box-shadow: inset 0 0 0 3px #15121c; }
.isk-pv-pano { position: absolute; left: 0; top: 0; width: 300%; height: 100%; transform: translateX(-33.333%); will-change: transform; }
.isk-pv-xhair { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); margin: calc(var(--u) * -.75); border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px var(--k), inset 0 0 0 1.5px var(--k); }
.isk-pv-xhair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--k); }
.isk-pv-input { flex: none; font-size: calc(var(--u) * 1.1); will-change: transform; }
.isk-pv-stat { flex: 1; font: 600 calc(var(--u) * .78) / 1.25 'Rubik', sans-serif; color: rgba(255, 255, 255, .88); }
.isk-pv-stat b { color: var(--a-light); font-weight: 900; }
/* invert */
.isk-pv--invert { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: 1fr auto; align-items: center; justify-items: center; column-gap: calc(var(--u) * .9); }
.isk-pv--invert .isk-pv-cap { grid-column: 1 / -1; }
.isk-pv-inv__in { position: relative; font-size: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 1.8); }
.isk-pv-inv__arrow { position: absolute; left: 50%; top: 0; width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); margin-left: calc(var(--u) * -.8); rotate: -90deg; color: var(--a); animation: isk-inv-arrow 2s ease-in-out infinite; }
.isk-pv-inv__arrow svg { width: 100%; height: 100%; }
@keyframes isk-inv-arrow { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--u) * .5) 0; } }
.isk-pv-inv__eq { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); color: rgba(255, 255, 255, .55); }
.isk-pv-inv__eq svg { width: 100%; height: 100%; }
.isk-pv-inv__screen { width: 100%; max-height: 100%; }
.isk-pv-inv__view { animation: isk-inv-view 2s ease-in-out infinite; }
.isk-pv--invert.is-on .isk-pv-inv__view { animation-name: isk-inv-view-r; }
@keyframes isk-inv-view { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }
@keyframes isk-inv-view-r { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
/* field of view */
.isk-pv-fov__ghost { fill: none; stroke: rgba(21, 18, 28, .38); stroke-width: 2; stroke-dasharray: 5 5; }
.isk-pv-fov__wedge { fill: rgba(var(--a-rgb), .28); stroke: var(--a); stroke-width: 2.5; stroke-linejoin: round; }
.isk-pv-fov__halo { fill: #fff; opacity: 0; transition: opacity .2s; }
.isk-pv-fov__t { opacity: .4; transition: opacity .2s; }
.isk-pv-fov__t.is-in { opacity: 1; }
.isk-pv-fov__t.is-in .isk-pv-fov__halo { opacity: .85; }
/* quality ladder + chips */
.isk-pv--quality { flex-direction: row; align-items: stretch; gap: calc(var(--u) * 1); }
.isk-pv-ladder { flex: 0 0 38%; display: flex; align-items: flex-end; gap: calc(var(--u) * .45); padding: calc(var(--u) * .5) calc(var(--u) * .3) 0; }
.isk-pv-ladder__col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--u) * .4); }
.isk-pv-ladder__col i { display: block; width: 100%; height: calc(var(--h) * 78%); border-radius: calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * .2) calc(var(--u) * .2); background: rgba(255, 255, 255, .14); transition: background .25s, box-shadow .25s; }
.isk-pv-ladder__col b { font: 900 calc(var(--u) * .66) / 1 'Rubik', sans-serif; letter-spacing: .08em; opacity: .55; }
.isk-pv-ladder__col.is-on i { background: linear-gradient(var(--a-light), var(--a)); box-shadow: 0 0 0 2px var(--k), 0 0 14px rgba(var(--a-rgb), .5); animation: isk-ladder .45s var(--spring); transform-origin: bottom; }
.isk-pv-ladder__col.is-on b { opacity: 1; color: var(--a-light); }
@keyframes isk-ladder { 0% { scale: 1 .6; } }
.isk-pv-chips { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .4); align-content: center; }
.isk-pv-chip { display: flex; flex-direction: column; gap: .25em; padding: calc(var(--u) * .4) calc(var(--u) * .55); border-radius: calc(var(--u) * .6); background: rgba(255, 255, 255, .07); animation: isk-tip-in .35s var(--spring) backwards; animation-delay: calc(var(--i) * 35ms); }
.isk-pv-chip small { font: 800 calc(var(--u) * .56) / 1 'Rubik', sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .65; white-space: nowrap; }
.isk-pv-chip b { font: 400 calc(var(--u) * .95) / 1 'Titan One', sans-serif; white-space: nowrap; }
.isk-pv-chip.is-off b { opacity: .45; }
/* shadows / bloom / fps / minimap / shake */
.isk-pv-shadow { transition: opacity .3s; }
.isk-pv--shadow:not(.is-on) .isk-pv-shadow { opacity: 0; }
.isk-pv-bloom__glow { opacity: 0; transition: opacity .35s; }
.isk-pv--bloom.is-on .isk-pv-bloom__glow { opacity: .9; animation: isk-bloom 2.2s ease-in-out infinite; }
@keyframes isk-bloom { 50% { opacity: .55; } }
.isk-pv-pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .2s, transform .45s var(--spring2); }
.isk-pv.is-on .isk-pv-pop { opacity: 1; transform: none; }
.isk-pv-shake__frame { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; }
.isk-pv-boom { opacity: 0; transform-box: fill-box; transform-origin: center; }
/* audio meter */
.isk-pv-audio__box { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 1); padding: 0 calc(var(--u) * .6); }
.isk-pv-audio__icon { flex: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); color: #fff; transition: opacity .25s; }
.isk-pv-audio__icon svg { width: 100%; height: 100%; }
.isk-pv-meter { flex: 1; height: 72%; display: flex; align-items: center; gap: calc(var(--u) * .28); }
.isk-pv-meter i { flex: 1; height: 100%; border-radius: 999px; background: linear-gradient(0deg, var(--a), var(--a-light) 62%, #fff); transform: scaleY(.05); will-change: transform; }
.isk-pv--audio.is-mute .isk-pv-meter i { background: rgba(255, 255, 255, .22); }
.isk-pv--audio.is-mute .isk-pv-audio__icon { opacity: .35; }
/* colorblind palettes */
.isk-pv--cb { gap: calc(var(--u) * .6); }
.isk-pv-pal { position: relative; width: 100%; padding: calc(var(--u) * .6) calc(var(--u) * 3) calc(var(--u) * .6) calc(var(--u) * .8); border-radius: calc(var(--u) * .8); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); transition: opacity .25s, box-shadow .25s, background .25s; }
.isk-pv-pal small { display: block; font: 900 calc(var(--u) * .6) / 1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .75; }
.isk-pv-pal__row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * .45); margin-top: calc(var(--u) * .45); }
.isk-pv-pair { display: inline-flex; }
.isk-pv-pair i { width: calc(var(--u) * 1.45); height: calc(var(--u) * 1.45); border-radius: 50%; box-shadow: 0 0 0 2px var(--k); }
.isk-pv-pair i + i { margin-left: calc(var(--u) * -.45); }
.isk-pv-pal__name { margin-left: calc(var(--u) * .4); font: 400 calc(var(--u) * 1) / 1 'Titan One', sans-serif; }
.isk-pv-pal__check { position: absolute; right: calc(var(--u) * .7); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); padding: calc(var(--u) * .3); border-radius: 50%;
  background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 2px var(--k); opacity: 0; scale: .4; transition: opacity .2s, scale .4s var(--spring2); }
.isk-pv-pal__check svg { width: 100%; height: 100%; }
.isk-pv--cb:not(.is-on) .isk-pv-pal--std, .isk-pv--cb.is-on .isk-pv-pal--cb { background: rgba(var(--a-rgb), .16); box-shadow: inset 0 0 0 2px var(--a); }
.isk-pv--cb:not(.is-on) .isk-pv-pal--std .isk-pv-pal__check, .isk-pv--cb.is-on .isk-pv-pal--cb .isk-pv-pal__check { opacity: 1; scale: 1; }
.isk-pv--cb:not(.is-on) .isk-pv-pal--cb, .isk-pv--cb.is-on .isk-pv-pal--std { opacity: .45; }
/* bot difficulty */
.isk-pv-bots { display: flex; gap: calc(var(--u) * .55); width: 100%; }
.isk-pv-bot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .35); padding: calc(var(--u) * .7) calc(var(--u) * .3); border-radius: calc(var(--u) * .9); background: rgba(255, 255, 255, .06); opacity: .5; transition: opacity .25s, background .25s, box-shadow .25s; }
.isk-pv-bot > i { display: block; width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); color: #fff; }
.isk-pv-bot > i svg { width: 100%; height: 100%; }
.isk-pv-bot b { font: 400 calc(var(--u) * 1) / 1 'Titan One', sans-serif; }
.isk-pv-bot.is-on { opacity: 1; background: rgba(var(--a-rgb), .2); box-shadow: inset 0 0 0 2px var(--a); animation: isk-bot-hop .5s var(--spring2); }
.isk-pv-bot.is-on > i { color: var(--a); }
@keyframes isk-bot-hop { 30% { translate: 0 calc(var(--u) * -.5); } }
/* match length */
.isk-pv-len__box { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: 1; display: grid; place-items: center; }
.isk-pv-watch { position: absolute; inset: 0; width: 100%; height: 100%; }
.isk-pv-watch__arc { transition: stroke-dasharray .5s var(--spring); }
.isk-pv-len__num { position: relative; font-size: calc(var(--u) * 2); translate: 0 calc(var(--u) * .45); }
.isk-pv-len__num.is-pop { animation: isk-pop .4s var(--spring2); }
/* link / tab / reset */
.isk-pv-link__art { display: flex; gap: calc(var(--u) * 1.4); }
.isk-pv-link__art i { display: block; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); color: #fff; animation: isk-link-bob 2.4s ease-in-out infinite; }
.isk-pv-link__art i:nth-child(2) { color: var(--a); animation-delay: -1.2s; }
.isk-pv-link__art i svg { width: 100%; height: 100%; }
@keyframes isk-link-bob { 50% { translate: 0 calc(var(--u) * -.4); rotate: -4deg; } }
.isk-pv-link__keys { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; font-size: calc(var(--u) * .95); }
.isk-pv-link__keys em { margin: 0 .35em; font-style: normal; opacity: .6; }
.isk-pv-tab__icon { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); color: var(--a); animation: isk-link-bob 2.8s ease-in-out infinite; }
.isk-pv-tab__icon svg { width: 100%; height: 100%; }
.isk-pv-tab__icon--reset { color: #ff7a8c; animation: isk-spin 6s linear infinite reverse; }
.isk-pv-tab__list { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .35); }
.isk-pv-tab__list span { padding: .3em .7em; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 700 var(--fs-xs) / 1.1 'Rubik', sans-serif; }

/* ------------------------------------------------------------------ pause: live match panel */
.isk-panel--flat { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .38); }
.isk-pmatch { position: absolute; right: calc(var(--u) * 3.8); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 47); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5) calc(var(--u) * 1.2);
  display: flex; flex-direction: column; gap: calc(var(--u) * .95); }
.isk-pmatch__top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); }
.isk-pmatch__info { display: flex; flex-direction: column; gap: calc(var(--u) * .65); min-width: 0; }
.isk-pmatch__mode { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.isk-pmatch__tag { padding: .32em .75em .3em; border-radius: .45em; background: var(--self); color: var(--self-ink); font: 400 calc(var(--u) * 1.05) / 1 'Titan One', sans-serif; letter-spacing: .04em; rotate: -2deg;
  box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px var(--k); }
.isk-pmatch__diff { display: flex; align-items: center; gap: .4em; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.isk-pmatch__diff i { display: block; width: 1.35em; height: 1.35em; color: var(--self); }
.isk-pmatch__diff i svg, .isk-pmatch__map i svg { width: 100%; height: 100%; }
.isk-pmatch__map { display: flex; align-items: center; gap: .45em; font: 400 calc(var(--u) * 1.55) / 1.05 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-pmatch__map i { display: block; flex: none; width: 1.1em; height: 1.1em; color: var(--self); }
.isk-pclock { --clk: var(--self); position: relative; flex: none; width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); }
.isk-pclock.is-low { --clk: #ff4d6a; }
.isk-pclock__ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .1);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); mask: radial-gradient(circle, transparent 57%, #000 59%); }
.isk-pclock__arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--clk) 0 calc(var(--f, 1) * 360deg), transparent 0); transition: --f .3s; }
.isk-pclock__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; }
.isk-pclock__num { font: 400 calc(var(--u) * 1.6) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; }
.isk-pclock__txt small { font: 900 calc(var(--u) * .56) / 1 'Rubik', sans-serif; letter-spacing: .16em; opacity: .7; }
.isk-pclock.is-low .isk-pclock__num { color: #ff8a9a; }
.isk-pyou { display: flex; align-items: center; gap: calc(var(--u) * .9); padding: calc(var(--u) * .7) calc(var(--u) * .9); border-radius: calc(var(--u) * 1.1); background: rgba(var(--self-rgb), .16); box-shadow: inset 0 0 0 2px rgba(var(--self-rgb), .5); }
.isk-pyou__av { flex: none; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); color: var(--self); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.isk-pyou__av svg { width: 100%; height: 100%; }
.isk-pyou__id { display: flex; flex-direction: column; gap: .3em; min-width: 0; flex: 1; }
.isk-pyou__id small { font: 900 calc(var(--u) * .6) / 1 'Rubik', sans-serif; letter-spacing: .16em; opacity: .75; }
.isk-pyou__id b { font: 400 calc(var(--u) * 1.4) / 1 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-pyou__stats { display: flex; gap: calc(var(--u) * .45); }
.isk-pstat { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; min-width: calc(var(--u) * 4.6); padding: calc(var(--u) * .35) calc(var(--u) * .4) calc(var(--u) * .45); border-radius: calc(var(--u) * .7); background: rgba(0, 0, 0, .3); overflow: hidden; }
.isk-pstat > i { display: block; width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); color: var(--self); }
.isk-pstat > i svg { width: 100%; height: 100%; }
.isk-pstat > b { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.isk-pstat > b small { font: 900 .55em / 1 'Rubik', sans-serif; opacity: .7; margin-left: .1em; }
.isk-pstat > small { font: 900 calc(var(--u) * .5) / 1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .65; }
.isk-pstat--sp::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--sp, 0) * 100%); background: var(--self); }
.isk-pstat--sp.is-ready { background: var(--self); color: var(--self-ink); animation: isk-sp-ready 1s ease-in-out infinite; }
.isk-pstat--sp.is-ready > i { color: var(--self-ink); }
@keyframes isk-sp-ready { 50% { box-shadow: 0 0 12px var(--self); } }
.isk-pteams { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); }
.isk-roster--a { --tc: var(--ta); --tc-rgb: var(--ta-rgb); }
.isk-roster--b { --tc: var(--tb); --tc-rgb: var(--tb-rgb); }
.isk-roster__head { display: flex; align-items: center; gap: .5em; margin-bottom: calc(var(--u) * .3); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.isk-roster__head em { margin-left: auto; padding: .25em .5em; border-radius: .4em; background: rgba(255, 255, 255, .1); font-style: normal; font-size: .82em; opacity: .85; }
.isk-roster__dot { flex: none; width: 1em; height: 1em; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px var(--k), 0 0 0 3.5px rgba(255, 255, 255, .6); }
.isk-rrow { display: grid; grid-template-columns: calc(var(--u) * 2.4) 1fr auto; align-items: center; gap: calc(var(--u) * .5); height: calc(var(--u) * 2.35); padding: 0 calc(var(--u) * .6) 0 calc(var(--u) * .4); margin-top: calc(var(--u) * .28);
  border-radius: calc(var(--u) * .7); background: rgba(255, 255, 255, .05); font: 700 var(--fs-s) / 1 'Rubik', sans-serif; transition: opacity .3s, background .3s, box-shadow .3s; }
.isk-rrow__w { height: calc(var(--u) * 1.9); color: var(--tc); }
.isk-rrow__w svg { width: 100%; height: 100%; }
.isk-rrow__name { display: flex; align-items: center; gap: .45em; min-width: 0; white-space: nowrap; overflow: hidden; }
.isk-rrow__name em { flex: none; padding: .2em .4em; border-radius: .35em; background: #fff; color: var(--k); font: 900 calc(var(--u) * .56) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .08em; }
.isk-rrow.is-self { background: rgba(var(--tc-rgb), .24); box-shadow: inset 0 0 0 2px var(--tc); }
.isk-rrow.is-dead { opacity: .55; }
.isk-rrow.is-dead .isk-rrow__w { filter: grayscale(1); }
.isk-rrow.is-sp { box-shadow: inset 0 0 0 2px var(--tc), 0 0 12px rgba(var(--tc-rgb), .45); }
.isk-st { display: inline-flex; align-items: center; gap: .35em; font: 900 calc(var(--u) * .66) / 1 'Rubik', sans-serif; letter-spacing: .08em; }
.isk-st i { display: block; width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
.isk-st i svg { width: 100%; height: 100%; }
.isk-st--alive i { color: var(--tc); }
.isk-st--dead { color: #ff9aa9; }
.isk-st--dead i { color: #b7b0c9; }
.isk-st--sp { color: var(--tc); animation: isk-st-sp 1s ease-in-out infinite; }
.isk-st--sp i { color: var(--tc); }
@keyframes isk-st-sp { 50% { opacity: .55; } }
.isk-pctl .isk-seclabel { margin-bottom: calc(var(--u) * .35); }
.isk-pctl .isk-ctl { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 1.6); }
.isk-pctl .isk-ctl__row { min-height: calc(var(--u) * 2.35); }
.isk-pctl .isk-ctl__row:nth-last-child(2) { border-bottom: 0; }
.isk-pctl .isk-ctl__act { font-size: var(--fs-s); }
.isk-pctl .isk-ctl__keys { font-size: var(--fs-s); }

/* ------------------------------------------------------------------ results: head, tags, medals */
.isk-res__head { right: calc(var(--u) * 3.8); }
.isk-res__title { display: inline-block; }
.isk-res__metarow { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .9); }
.isk-res__metarow .isk-res__meta { margin-top: 0; }
.isk-res__tag { --cut: rgba(255, 255, 255, .75); display: inline-flex; align-items: center; gap: .45em; padding: .34em .8em .34em .45em; border-radius: 999px; background: #ffd54a; color: var(--k);
  font: 400 calc(var(--u) * 1.02) / 1 'Titan One', sans-serif; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px var(--k); rotate: -2deg; animation: isk-pop .5s var(--spring2) backwards 1.2s; }
.isk-res__tag i { display: block; flex: none; width: 1.45em; height: 1.45em; color: var(--k); }
.isk-res__tag i svg { width: 100%; height: 100%; }
.isk-res__tag small { font: 900 .72em / 1 'Rubik', sans-serif; opacity: .75; }
.isk-res__tag--landslide { background: var(--tw); color: var(--tw-ink); }
.isk-res__tag--landslide i { color: var(--tw-ink); }
.isk-res__medals { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .7); }
.isk-res__medalcap { padding: .4em .85em; border-radius: 999px; background: rgba(14, 11, 22, .82); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .18em; animation: isk-pop .4s var(--spring) backwards 2s; }
.isk-res__medallist { display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: calc(var(--u) * .5) calc(var(--u) * .6); }
.isk-res__medallist .isk-medal:only-child { grid-column: 2; }
.isk-medal { --m1: #fff2a8; --m2: #f2b22e; --m3: #9a5c08; --cut: #fff4c4; position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--u) * 8.2); padding-top: calc(var(--u) * .9); isolation: isolate; opacity: 0; }
.isk-medal.is-silver { --m1: #ffffff; --m2: #b9c3d8; --m3: #5d6780; --cut: #ffffff; }
.isk-medal.is-bronze { --m1: #ffd3b0; --m2: #d9824a; --m3: #7a3e18; --cut: #ffe6d4; }
.isk-medal.is-in { animation: isk-medal-stamp .7s var(--spring2) forwards; }
.isk-medal.is-shown { opacity: 1; }
@keyframes isk-medal-stamp { 0% { opacity: 0; scale: 2.3; rotate: -18deg; } 42% { opacity: 1; scale: .86; rotate: 4deg; } 68% { scale: 1.06; rotate: -1deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
.isk-medal__burst { position: absolute; z-index: -2; left: 50%; top: calc(var(--u) * 3.5); width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); translate: -50% -50%; opacity: .95; }
.isk-medal__burst svg { width: 100%; height: 100%; }
.isk-medal.is-in .isk-medal__burst { animation: isk-medal-burst .8s var(--out); }
@keyframes isk-medal-burst { 0% { scale: .2; rotate: -60deg; } 55% { scale: 1.12; } 100% { scale: 1; rotate: 0deg; } }
.isk-medal__ribbon { position: absolute; z-index: -1; left: 50%; top: 0; width: calc(var(--u) * 3.8); height: calc(var(--u) * 3); translate: -50% 0; }
.isk-medal__ribbon i { position: absolute; top: 0; width: calc(var(--u) * 1.6); height: calc(var(--u) * 3.1); background: linear-gradient(90deg, var(--self), var(--self-light) 50%, var(--self)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.isk-medal__ribbon i:first-child { left: calc(var(--u) * .15); rotate: 16deg; }
.isk-medal__ribbon i:last-child { right: calc(var(--u) * .15); rotate: -16deg; filter: brightness(.82); }
.isk-medal__disc { position: relative; display: grid; place-items: center; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 28%, var(--m1), var(--m2) 55%, var(--m3) 100%);
  box-shadow: 0 0 0 3px var(--k), inset 0 0 0 calc(var(--u) * .34) rgba(255, 255, 255, .35), inset 0 calc(var(--u) * -.45) 0 rgba(0, 0, 0, .16), 0 calc(var(--u) * .35) 0 3px rgba(0, 0, 0, .35); }
.isk-medal__face { display: block; width: 58%; height: 58%; color: var(--m3); }
.isk-medal__face svg { width: 100%; height: 100%; filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .45)); }
.isk-medal__shine { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .8) 48%, rgba(255, 255, 255, 0) 60%); transform: translateX(-130%); }
.isk-medal.is-in .isk-medal__shine, .isk-medal.is-shown .isk-medal__shine { animation: isk-medal-shine 3.4s ease-in-out infinite .7s; }
@keyframes isk-medal-shine { 0% { transform: translateX(-130%); } 32%, 100% { transform: translateX(130%); } }
.isk-medal__label { margin-top: calc(var(--u) * .55); padding: .28em .55em .24em; border-radius: .4em; background: var(--k); color: #fff; font: 400 calc(var(--u) * .9) / 1 'Titan One', sans-serif; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28); }
.isk-medal__val { margin-top: calc(var(--u) * .3); font: 800 calc(var(--u) * .68) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .6); white-space: nowrap; }
/* coverage */
.isk-cover__names b { font-variant-numeric: tabular-nums; }
.isk-cover__crown { opacity: 0; scale: .3; }
.isk-res__cover.is-landed .isk-cover__crown { animation: isk-crown-in .6s var(--spring2) forwards; }
@keyframes isk-crown-in { 0% { opacity: 0; scale: .3; rotate: -30deg; } 60% { opacity: 1; scale: 1.3; } 100% { opacity: 1; scale: 1; rotate: -8deg; } }
.isk-res__cover.is-landed .isk-cover { animation: isk-cover-land .45s var(--spring); }
@keyframes isk-cover-land { 30% { scale: 1.012 1.25; } }
.isk-cover__mid { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1.5px rgba(21, 18, 28, .6); }
.isk-cover__shine { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0) 60%); transform: translateX(-110%); }
.isk-res__cover.is-landed .isk-cover__shine { animation: isk-cover-shine 1.1s var(--out) .1s; }
@keyframes isk-cover-shine { to { transform: translateX(110%); } }
/* tables */
.isk-ttable__win { display: inline-flex; align-items: center; gap: .3em; margin-left: .6em; padding: .22em .5em .2em .35em; border-radius: .4em; background: #ffd54a; color: var(--k); font: 900 .92em / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .08em; rotate: -3deg; box-shadow: 0 0 0 2px var(--k); }
.isk-ttable__win i { display: block; width: 1.25em; height: 1.25em; }
.isk-ttable__win i svg { width: 100%; height: 100%; }
.isk-prow__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.isk-prow__name em { flex: none; }
.isk-prow__aw { display: inline-flex; flex: none; gap: .25em; margin-left: .45em; }
.isk-aw { --m1: #fff2a8; --m2: #f2b22e; --m3: #9a5c08; --cut: #fff4c4; display: grid; place-items: center; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 60%, var(--m3)); color: var(--m3); box-shadow: 0 0 0 2px var(--k); animation: isk-aw-in .45s var(--spring2) backwards; }
.isk-aw.is-silver { --m1: #ffffff; --m2: #b9c3d8; --m3: #5d6780; --cut: #ffffff; }
.isk-aw.is-bronze { --m1: #ffd3b0; --m2: #d9824a; --m3: #7a3e18; --cut: #ffe6d4; }
.isk-aw svg { width: 68%; height: 68%; }
@keyframes isk-aw-in { from { opacity: 0; scale: .2; rotate: -40deg; } }
.isk-prow.is-mvp { box-shadow: inset 0 0 0 2px #ffd54a, 0 0 14px rgba(255, 213, 74, .3); }
.isk-prow.is-self.is-mvp { box-shadow: inset 0 0 0 2px var(--tc), 0 0 0 2px #ffd54a, 0 3px 0 rgba(0, 0, 0, .3); }
.isk-prow__n { transition: opacity .25s, scale .35s var(--spring2); }
.isk-prow__n.is-wait { opacity: 0; scale: .4; }
.isk-prow.is-counted .isk-prow__turf b { animation: isk-count-pop .35s var(--spring2); }
@keyframes isk-count-pop { 0% { scale: 1.35; } }
.isk-prow__turfbar { transition: none; }
/* xp breakdown */
.isk-xp.has-bd { padding-top: calc(var(--u) * .7); padding-bottom: calc(var(--u) * .7); }
.isk-xp__bd { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5) calc(var(--u) * 1.1); margin-top: calc(var(--u) * .55); }
.isk-xpb { display: inline-flex; align-items: baseline; gap: .4em; opacity: 0; translate: 0 calc(var(--u) * .4); transition: opacity .25s, translate .35s var(--spring); }
.isk-xpb.is-in { opacity: 1; translate: 0 0; }
.isk-xpb small { font: 900 calc(var(--u) * .6) / 1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .7; }
.isk-xpb b { font: 400 calc(var(--u) * 1) / 1 'Titan One', sans-serif; color: var(--ta-light); }


/* ------------------------------------------------------------------ reduced motion (light touch) */
@media (prefers-reduced-motion: reduce) {
  .isk-logo__l, .isk-drip path, .isk-drip__drop, .isk-bgblob, .isk-cursor__ring, .isk-btn--primary::before, .isk-res__splat svg, .isk-cred__endsplat, .isk-title__presstext { animation: none !important; }
  .isk-in, .isk-rowin { animation-duration: .2s !important; animation-delay: 0s !important; }
  .isk-wipe__mark { display: none; }
}

/* lab/debug: freeze or slow every animation (set by tools/ui-lab.js) */
.isk-lab-freeze *, .isk-lab-freeze *::before, .isk-lab-freeze *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ settings previews: aim assist, vibration */
.isk-pv-aim__trail { stroke: rgba(var(--a-rgb), .9); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.isk-pv-aimm__row { display: flex; gap: calc(var(--u) * 1.4); }
.isk-pv-aimm__dev { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .06); font-size: calc(var(--u) * 1.3); transition: opacity .25s, background .25s, box-shadow .25s; }
.isk-pv-aimm__dev svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); color: #fff; }
.isk-pv-aimm__dev .isk-mouse { width: calc(var(--u) * 2.9); height: calc(var(--u) * 3.3); }
.isk-pv-aimm__dev b { font: 900 calc(var(--u) * .62) / 1 'Rubik', sans-serif; letter-spacing: .14em; padding: .3em .55em; border-radius: 999px; background: var(--a); color: var(--a-ink); }
.isk-pv-aimm__dev.is-pad { background: rgba(var(--a-rgb), .18); box-shadow: inset 0 0 0 2px var(--a); }
.isk-pv--aimm:not(.is-on) .isk-pv-aimm__dev.is-mouse { opacity: .4; }
.isk-pv--aimm:not(.is-on) .isk-pv-aimm__dev.is-mouse b { background: rgba(255, 255, 255, .2); color: #fff; }
.isk-pv--aimm.is-on .isk-pv-aimm__dev.is-mouse { background: rgba(var(--a-rgb), .12); box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .6); }
.isk-pv-rumble__pad { position: relative; width: calc(var(--u) * 7); height: calc(var(--u) * 7); color: #fff; }
.isk-pv-rumble__pad svg { width: 100%; height: 100%; }
.isk-pv-rumble__pad i { position: absolute; top: 50%; width: calc(var(--u) * 1.6); height: calc(var(--u) * 3.2); margin-top: calc(var(--u) * -1.6); border: 3px solid var(--a); border-radius: 50%; opacity: 0; }
.isk-pv-rumble__pad i.l { left: calc(var(--u) * -2); border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.isk-pv-rumble__pad i.r { right: calc(var(--u) * -2); border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.isk-pv--rumble.is-buzz .isk-pv-rumble__pad i { animation: isk-rumble-wave .5s var(--out); }
@keyframes isk-rumble-wave { 0% { opacity: 1; scale: .6; } 100% { opacity: 0; scale: 1.5; } }
.isk-pv--rumble.is-off .isk-pv-rumble__pad { opacity: .4; }
/* loadout opened on top of a paused match: keep the right side (3D dripling) crisp and bright */
.isk-loadout .isk-dimbg { backdrop-filter: none; background: linear-gradient(90deg, rgba(8, 6, 14, .72) 0%, rgba(8, 6, 14, .45) 45%, rgba(8, 6, 14, 0) 62%); }

/* ------------------------------------------------------------------ results: podium moment first, then the scoreboard slides up */
.isk-results .isk-res__body { top: 46%; bottom: calc(var(--u) * 5.6); transition: translate .75s var(--spring), opacity .35s var(--out); }
.isk-results.is-intro .isk-res__body { translate: 0 calc(var(--u) * 34); opacity: 0; pointer-events: none; transition: none; }
.isk-results.is-intro .isk-res__medals { opacity: 0; }
.isk-results .isk-res__medals { transition: opacity .3s; }
.isk-results .isk-prow { height: calc(var(--u) * 2.42); margin-top: calc(var(--u) * .26); }
.isk-results .isk-xp { padding-top: calc(var(--u) * .6); padding-bottom: calc(var(--u) * .6); }
.isk-results .isk-btn--wide { height: calc(var(--u) * 4.6); }
.isk-results .isk-res__scrim { background: linear-gradient(180deg, rgba(10, 8, 18, .38) 0%, rgba(10, 8, 18, 0) 16%, rgba(10, 8, 18, 0) 40%, rgba(10, 8, 18, .72) 54%, rgba(10, 8, 18, .9) 100%); transition: opacity .6s; }
.isk-results.is-intro .isk-res__scrim { opacity: .35; }

/* =====================================================================================
   STAGE SELECT (setup) — ticket-stub stage tickets, big hero render with a DAY / DUSK switch
   ===================================================================================== */
.isk-ui { --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
.isk-head { left: calc(var(--u) * 3.4 + var(--sal)); top: calc(var(--u) * 2.2 + var(--sat)); }
.isk-prompts { right: calc(var(--u) * 2.6 + var(--sar)); bottom: calc(var(--u) * 1.9 + var(--sab)); }
.isk-corner--bl { left: calc(var(--u) * 3.4 + var(--sal)); } .isk-corner--br { right: calc(var(--u) * 3.4 + var(--sar)); }

/* background: the selected stage, blurred + graded, over the live arena */
.isk-ss__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.isk-ss__bgimg { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; object-fit: cover; opacity: 0;
  filter: blur(calc(var(--u) * 2.4)) saturate(1.45) brightness(.62); transition: opacity .8s var(--out); animation: isk-ss-drift 26s ease-in-out infinite alternate; }
.isk-ss__bgimg.is-on { opacity: .94; }
@keyframes isk-ss-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, 1.5%); } }
.isk-ss__scrim { position: absolute; inset: 0; pointer-events: none; animation: isk-fade .4s both;
  background:
    radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.7px) 0 0 / 11px 11px,
    linear-gradient(90deg, rgba(10, 8, 20, .82) 0%, rgba(10, 8, 20, .5) 30%, rgba(10, 8, 20, .22) 60%, rgba(10, 8, 20, .34) 100%),
    linear-gradient(0deg, rgba(10, 8, 20, .7), rgba(10, 8, 20, 0) 26%); }
.isk-ss__scrim::after { content: ''; position: absolute; inset: 0; opacity: .5; transition: opacity .8s;
  background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .035) 0 calc(var(--u) * 1.1), transparent calc(var(--u) * 1.1) calc(var(--u) * 2.6));
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 45%); mask-image: linear-gradient(120deg, #000 0%, transparent 45%); }
.isk-ss[data-time="dusk"] .isk-ss__scrim { background:
    radial-gradient(rgba(255, 220, 200, .07) 1.2px, transparent 1.7px) 0 0 / 11px 11px,
    linear-gradient(90deg, rgba(18, 8, 26, .84) 0%, rgba(22, 8, 30, .52) 30%, rgba(40, 10, 40, .2) 60%, rgba(30, 8, 34, .34) 100%),
    linear-gradient(0deg, rgba(14, 6, 22, .72), rgba(14, 6, 22, 0) 26%); }

/* ---- left column: stage tickets + match options */
.isk-ss__left { position: absolute; left: calc(var(--u) * 3.6 + var(--sal)); top: calc(var(--u) * 10.4); width: calc(var(--u) * 25.5); display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
.isk-ss__list { display: flex; flex-direction: column; gap: calc(var(--u) * 1.15); max-height: calc(var(--u) * 26); padding: calc(var(--u) * .4) calc(var(--u) * .9) calc(var(--u) * .6) 0; margin-right: calc(var(--u) * -.9); overflow: visible; }
.isk-ticket { position: relative; display: block; flex: none; width: 100%; height: calc(var(--u) * 7.1); padding: 0; border: 0; border-radius: calc(var(--u) * 1.3);
  background: var(--k2); color: #fff; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; outline: none;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  box-shadow: 0 0 0 calc(var(--u) * .2) rgba(255, 255, 255, .22), 0 0 0 calc(var(--u) * .38) var(--k), 0 calc(var(--u) * .55) 0 calc(var(--u) * .38) rgba(0, 0, 0, .45);
  transition: transform .42s var(--spring), box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.isk-ticket.is-hover { transition: transform .2s var(--out), box-shadow .25s; }
.isk-ticket__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #20325a; }
.isk-ticket__fallback { position: absolute; inset: 0; display: block; }
.isk-ticket__fallback svg { width: 100%; height: 100%; }
.isk-ticket__img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: translate(calc(var(--px, 0) * -4%), calc(var(--py, 0) * -4%)); transition: transform .5s var(--out); }
.isk-ticket__img.is-dusk { clip-path: inset(0 0 0 100%); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), transform .5s var(--out); }
.isk-ticket.is-dusk .isk-ticket__img.is-dusk { clip-path: inset(0 0 0 0); }
.isk-ticket__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 22, .86) 0%, rgba(12, 9, 22, .6) 42%, rgba(12, 9, 22, .05) 78%), linear-gradient(0deg, rgba(12, 9, 22, .35), transparent 50%); transition: opacity .3s; }
.isk-ticket.is-focus .isk-ticket__shade, .isk-ticket.is-sel .isk-ticket__shade { opacity: .88; }
.isk-ticket__ink { position: absolute; z-index: -1; left: calc(var(--u) * -2.7); top: 50%; width: calc(var(--u) * 8.4); aspect-ratio: 1; translate: 0 -50%; transform: scale(0) rotate(-50deg); transition: transform .5s var(--spring2); pointer-events: none; }
.isk-ticket__ink svg { width: 100%; height: 100%; }
.isk-ticket.is-sel .isk-ticket__ink { transform: scale(1) rotate(0deg); }
.isk-ticket__num { position: absolute; left: calc(var(--u) * .95); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--k); font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; box-shadow: 0 0 0 calc(var(--u) * .18) var(--k), 0 calc(var(--u) * .2) 0 calc(var(--u) * .18) rgba(0, 0, 0, .35);
  transition: background .25s, color .25s, scale .4s var(--spring2); }
.isk-ticket.is-sel .isk-ticket__num { background: var(--a); color: var(--a-ink); scale: 1.1; }
.isk-ticket__name { position: absolute; left: calc(var(--u) * 4.5); right: calc(var(--u) * 4.2); top: 50%; translate: 0 -50%; font: 400 calc(var(--u) * 1.55) / 1.02 'Titan One', sans-serif; letter-spacing: .01em;
  -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--k); }
.isk-ticket__time { position: absolute; right: calc(var(--u) * .7); top: calc(var(--u) * .65); display: grid; place-items: center; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%;
  background: rgba(14, 11, 22, .72); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); cursor: pointer; overflow: hidden; transition: background .3s, transform .35s var(--spring); }
.isk-ticket__time:hover { transform: scale(1.12) rotate(-8deg); }
.isk-ticket__time i { position: absolute; width: 62%; height: 62%; transition: transform .5s var(--spring2), opacity .25s; }
.isk-ticket__time svg { width: 100%; height: 100%; }
.isk-ticket__sun { color: #ffd45a; }
.isk-ticket__moon { color: #ffe8b8; opacity: 0; transform: translateY(120%) rotate(60deg); }
.isk-ticket.is-dusk .isk-ticket__time { background: rgba(60, 24, 80, .82); }
.isk-ticket.is-dusk .isk-ticket__sun { opacity: 0; transform: translateY(120%) rotate(-60deg); }
.isk-ticket.is-dusk .isk-ticket__moon { opacity: 1; transform: none; }
.isk-ticket__check { position: absolute; right: calc(var(--u) * -.75); bottom: calc(var(--u) * -.75); display: grid; place-items: center; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%;
  background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 calc(var(--u) * .2) var(--k), 0 calc(var(--u) * .2) 0 calc(var(--u) * .2) rgba(0, 0, 0, .3); transform: scale(0) rotate(-40deg); transition: transform .4s var(--spring2); }
.isk-ticket__check svg { width: 62%; height: 62%; }
.isk-ticket.is-sel { box-shadow: 0 0 0 calc(var(--u) * .22) var(--a), 0 0 0 calc(var(--u) * .4) var(--k), 0 calc(var(--u) * .55) 0 calc(var(--u) * .4) var(--a-deep); }
.isk-ticket.is-focus { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateX(calc(var(--u) * .9)) scale(1.04);
  box-shadow: 0 0 0 calc(var(--u) * .22) #fff, 0 0 0 calc(var(--u) * .44) var(--k), 0 0 0 calc(var(--u) * .7) rgba(var(--a-rgb), .55), 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .4); }
.isk-ticket.is-focus.is-sel { box-shadow: 0 0 0 calc(var(--u) * .22) var(--a), 0 0 0 calc(var(--u) * .44) #fff, 0 0 0 calc(var(--u) * .66) var(--k), 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .4); }
.isk-ticket.is-down { scale: .97; }
.isk-ticket.is-pick { animation: isk-ticket-pick .5s var(--spring); }
@keyframes isk-ticket-pick { 0% { scale: .94; } 45% { scale: 1.05; } }
.isk-ticket.is-timeflip .isk-ticket__time { animation: isk-ticket-tflip .55s var(--spring2); }
@keyframes isk-ticket-tflip { 0% { scale: .6; rotate: -90deg; } }
.isk-ticket.is-noart .isk-ticket__img { display: none; }
.isk-ticket__check { display: none; }
.isk-ticket:not(.is-sel) .isk-ticket__art { filter: saturate(.55) brightness(.78); transition: filter .35s; }
.isk-ticket:not(.is-sel).is-focus .isk-ticket__art, .isk-ticket:not(.is-sel).is-hover .isk-ticket__art { filter: none; }
.isk-ticket.is-sel { translate: calc(var(--u) * .8) 0; transition: transform .42s var(--spring), box-shadow .25s, translate .45s var(--spring); }
.isk-ticket { transition: transform .42s var(--spring), box-shadow .25s, translate .45s var(--spring); }
.isk-ticket.is-sel::after { content: ''; position: absolute; right: calc(var(--u) * -1.25); top: 50%; width: 0; height: 0; margin-top: calc(var(--u) * -.8);
  border-left: calc(var(--u) * .9) solid var(--a); border-top: calc(var(--u) * .8) solid transparent; border-bottom: calc(var(--u) * .8) solid transparent; filter: drop-shadow(2px 0 0 var(--k)); animation: isk-nudge-r 1.1s ease-in-out infinite; }

.isk-ss__match { display: flex; flex-direction: column; gap: calc(var(--u) * .45); margin-top: calc(var(--u) * .5); padding: calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * .9); }
.isk-setrow--stack { flex-direction: column; align-items: stretch; gap: calc(var(--u) * .55); padding: calc(var(--u) * .55) calc(var(--u) * .6) calc(var(--u) * .6); }
.isk-setrow--stack .isk-seg { min-width: 0; width: 100%; }
.isk-setrow--stack .isk-seg__opt { padding: calc(var(--u) * .55) calc(var(--u) * .3); font-size: var(--fs-xs); }
.isk-ss__match .isk-setup__desc { padding: 0 calc(var(--u) * .6) calc(var(--u) * .2); margin-top: calc(var(--u) * -.15); font-size: var(--fs-xs); min-height: 2.6em; }

/* ---- hero */
.isk-ss__hero { position: absolute; left: calc(var(--u) * 32); right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 10.6); height: calc(var(--u) * 30.4); }
.isk-ss__splat { position: absolute; z-index: 0; left: calc(var(--u) * -4.2); top: calc(var(--u) * -4.4); width: calc(var(--u) * 15); pointer-events: none; animation: isk-ss-splat 30s linear infinite; }
.isk-ss__splat.is-b { left: auto; top: auto; right: calc(var(--u) * -3.6); bottom: calc(var(--u) * -5.4); width: calc(var(--u) * 12); animation-direction: reverse; animation-duration: 38s; }
.isk-ss__splat svg { width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .3)); }
@keyframes isk-ss-splat { to { rotate: 360deg; } }
.isk-ss__frame { position: absolute; inset: 0; z-index: 1; border-radius: calc(var(--u) * 1.9); overflow: hidden; isolation: isolate; background: #1b2748;
  transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-.7deg);
  box-shadow: 0 0 0 calc(var(--u) * .34) #fff, 0 0 0 calc(var(--u) * .66) var(--k), 0 calc(var(--u) * .75) 0 calc(var(--u) * .66) rgba(0, 0, 0, .5), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .4);
  transition: transform .5s var(--out); pointer-events: auto; }
.isk-ss__frame.is-hover { transition: transform .25s var(--out); }
.isk-ss__frame.is-hit { animation: isk-ss-hit .55s var(--spring); }
.isk-ss__frame.is-flip { animation: isk-ss-flip .6s var(--spring); }
@keyframes isk-ss-hit { 0% { scale: .975; } 40% { scale: 1.012; } }
@keyframes isk-ss-flip { 0% { scale: .99; } 50% { scale: 1.006; } }
.isk-ss__art { position: absolute; inset: 0; transform: translate(calc(var(--px, 0) * -1.6%), calc(var(--py, 0) * -1.6%)); transition: transform .8s var(--out); }
.isk-ss__layer, .isk-ss__ink { position: absolute; inset: -3%; will-change: clip-path; }
.isk-ss__layer { animation: isk-ss-kb 22s ease-in-out infinite alternate; }
.isk-ss__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes isk-ss-kb { from { transform: scale(1.02); } to { transform: scale(1.085) translate(-1.2%, .6%); } }
.isk-ss__layer.is-fade { animation: isk-fade .3s both, isk-ss-kb 22s ease-in-out infinite alternate; }
.isk-ss__fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #7fe3f5, #1e76cf); }
.isk-ss__fallback svg { width: 100%; height: 100%; }
.isk-ss__layer[data-time="dusk"] .isk-ss__fallback svg { filter: sepia(.4) hue-rotate(-28deg) saturate(1.4) brightness(.8); }
.isk-ss__ink { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 32%), var(--a); }
.isk-ss__ink.is-b { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .4), transparent 32%), var(--b); }
.isk-ss__ink.is-time.is-dusk { background: linear-gradient(160deg, #ffd29a 0%, #ff8c5a 30%, #c84a9a 62%, #4a2a8a 100%); }
.isk-ss__ink.is-time.is-day { background: linear-gradient(160deg, #fffbe0 0%, #9fe6ff 38%, #3aa4ec 75%, #2468c8 100%); }
/* atmosphere over the render */
.isk-ss__sun { position: absolute; right: -8%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .55; transition: opacity .8s, background .8s;
  background: radial-gradient(circle, rgba(255, 244, 214, .75) 0%, rgba(255, 226, 160, .25) 32%, transparent 62%); animation: isk-ss-sun 7s ease-in-out infinite alternate; }
.isk-ss__hero[data-time="dusk"] .isk-ss__sun { opacity: .5; left: -12%; right: auto; top: 18%; background: radial-gradient(circle, rgba(255, 150, 110, .6) 0%, rgba(255, 110, 150, .2) 34%, transparent 62%); }
@keyframes isk-ss-sun { to { scale: 1.12; opacity: .7; } }
.isk-ss__stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s .15s; }
.isk-ss__hero[data-time="dusk"] .isk-ss__stars { opacity: 1; }
.isk-ss__stars i { position: absolute; width: calc(var(--u) * .9 * var(--s)); aspect-ratio: 1; margin: calc(var(--u) * -.45 * var(--s)) 0 0 calc(var(--u) * -.45 * var(--s));
  background: #fff6e0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: isk-ss-twinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--d) * -1); filter: drop-shadow(0 0 4px #ffe6b0); }
@keyframes isk-ss-twinkle { 0%, 100% { opacity: .15; scale: .6; } 50% { opacity: .95; scale: 1; } }
.isk-ss__glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .12) 52%, transparent 60%); background-size: 300% 100%; background-position: 130% 0;
  animation: isk-ss-glare 7.5s var(--out) infinite 1.4s; }
@keyframes isk-ss-glare { 0% { background-position: 130% 0; } 22%, 100% { background-position: -40% 0; } }
.isk-ss__vig { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 calc(var(--u) * 4) rgba(8, 6, 16, .4);
  background: linear-gradient(0deg, rgba(10, 8, 20, .82) 0%, rgba(10, 8, 20, .35) 22%, rgba(10, 8, 20, 0) 42%), linear-gradient(180deg, rgba(10, 8, 20, .35), rgba(10, 8, 20, 0) 18%); }
.isk-ss__count { position: absolute; left: calc(var(--u) * 1.4); top: calc(var(--u) * 1.2); display: flex; align-items: baseline; gap: .4em; padding: .45em .8em .42em; border-radius: calc(var(--u) * .7);
  background: var(--k); color: #fff; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; transform: rotate(-2.5deg); box-shadow: 0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .35); }
.isk-ss__count b { font: 400 calc(var(--u) * 1.35) / 1 'Titan One', sans-serif; letter-spacing: .02em; color: var(--a); }
.isk-ss__count em { font-style: normal; opacity: .6; }
.isk-ss__count.is-in { animation: isk-pop .45s var(--spring2); }
.isk-ss__layout { position: absolute; right: calc(var(--u) * 1.3); bottom: calc(var(--u) * 1.3); width: calc(var(--u) * 13.5); padding: calc(var(--u) * .35); border-radius: calc(var(--u) * .9);
  background: #fff; transform: rotate(2.2deg); box-shadow: 0 0 0 calc(var(--u) * .18) var(--k), 0 calc(var(--u) * .35) 0 calc(var(--u) * .18) rgba(0, 0, 0, .4); transition: transform .45s var(--spring); }
.isk-ss__layout.is-in { animation: isk-ss-sticker .55s var(--spring2); }
@keyframes isk-ss-sticker { 0% { scale: .6; rotate: -12deg; opacity: 0; } 60% { opacity: 1; } }
.isk-ss__layoutmap { display: block; aspect-ratio: 2.15 / 1; border-radius: calc(var(--u) * .6); overflow: hidden; }
.isk-ss__layoutmap svg { width: 100%; height: 100%; }
.isk-ss__hero[data-time="dusk"] .isk-ss__layoutmap svg { filter: sepia(.35) hue-rotate(-25deg) saturate(1.3) brightness(.86); transition: filter .6s; }
.isk-ss__layoutlbl { position: absolute; left: calc(var(--u) * .9); top: calc(var(--u) * -.85); display: flex; align-items: center; gap: .35em; padding: .3em .6em; border-radius: 999px;
  background: var(--k); color: #fff; font: 900 calc(var(--u) * .62) / 1 'Rubik', sans-serif; letter-spacing: .14em; }
.isk-ss__layoutlbl i { display: block; width: 1.3em; height: 1.3em; color: var(--a); }
.isk-ss__layoutlbl i svg { width: 100%; height: 100%; }
/* caption: stage name on black tape + blurb */
.isk-ss__caption { position: absolute; z-index: 2; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.5); right: calc(var(--u) * 17); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .7); pointer-events: none; }
.isk-ss__tape { position: relative; padding: calc(var(--u) * .55) calc(var(--u) * 1.3) calc(var(--u) * .7); background: var(--k); transform: rotate(-2.2deg); border-radius: calc(var(--u) * .35);
  box-shadow: calc(var(--u) * .35) calc(var(--u) * .35) 0 var(--a); clip-path: polygon(1.2% 6%, 99% 0, 100% 90%, 0 100%); }
.isk-ss__name { font: 400 calc(var(--u) * 3.6) / 1 'Titan One', sans-serif; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.isk-ss__word { display: inline-block; white-space: nowrap; }
.isk-ss__name span span { display: inline-block; }
.isk-ss__caption.is-in .isk-ss__name span span { animation: isk-ss-letter .5s var(--spring2) backwards; animation-delay: calc(var(--i) * 24ms); }
@keyframes isk-ss-letter { 0% { opacity: 0; translate: 0 .5em; scale: .4; rotate: -12deg; } 60% { opacity: 1; } }
.isk-ss__caption.is-in .isk-ss__tape { animation: isk-ss-tape .45s var(--spring); }
@keyframes isk-ss-tape { 0% { clip-path: polygon(1.2% 6%, 1.2% 0, 0 100%, 0 100%); } }
.isk-ss__blurb { max-width: calc(var(--u) * 38); padding: 0 calc(var(--u) * .3); font: 600 var(--fs-m) / 1.3 'Rubik', sans-serif; color: #f2eefb; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .5); }
.isk-ss__caption.is-in .isk-ss__blurb { animation: isk-tip-in .5s var(--spring) .12s backwards; }
/* drips off the frame's bottom edge */
.isk-ss__drips { position: absolute; z-index: 0; left: 6%; right: 34%; bottom: calc(var(--u) * -2.6); height: calc(var(--u) * 2.9); pointer-events: none; }
.isk-ss__drips svg { width: 100%; height: 100%; overflow: visible; }
.isk-ss__drip path { transform-box: fill-box; transform-origin: 50% 0; animation: isk-drip 4.6s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(var(--d) * -.77s); }

/* DAY / DUSK switch */
.isk-ss__time { position: absolute; z-index: 2; right: calc(var(--u) * 1.3); top: calc(var(--u) * 1.2); display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * .55);
  padding: calc(var(--u) * .7) calc(var(--u) * .8) calc(var(--u) * .75); border-radius: calc(var(--u) * 1.2); background: rgba(14, 11, 24, .74); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .35); transform: rotate(1.2deg); pointer-events: auto; }
.isk-ss__timehead { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: var(--fs-xs); }
.isk-ss__timehead small { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; opacity: .8; }
.isk-ss__timehead .isk-hint { font-size: .85em; opacity: .9; }
.isk-ss__timetext { font: 600 var(--fs-xs) / 1.2 'Rubik', sans-serif; color: var(--muted); padding: 0 calc(var(--u) * .2); }
.isk-ss__timetext.is-in { animation: isk-tip-in .4s var(--spring); }
.isk-daytgl { position: relative; display: block; width: calc(var(--u) * 17.5); height: calc(var(--u) * 4.1); padding: 0; border: 0; border-radius: 999px; overflow: hidden; isolation: isolate; cursor: pointer; pointer-events: auto;
  font: inherit; color: #fff; outline: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 calc(var(--u) * .22) #fff, 0 0 0 calc(var(--u) * .42) var(--k), 0 calc(var(--u) * .35) 0 calc(var(--u) * .42) rgba(0, 0, 0, .35); transition: transform .35s var(--spring); }
.isk-daytgl.is-focus { transform: scale(1.04); box-shadow: 0 0 0 calc(var(--u) * .22) #fff, 0 0 0 calc(var(--u) * .42) var(--k), 0 0 0 calc(var(--u) * .7) rgba(var(--a-rgb), .6), 0 calc(var(--u) * .35) 0 calc(var(--u) * .42) rgba(0, 0, 0, .35); }
.isk-daytgl__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #7fdcff 0%, #36a6ef 100%); }
.isk-daytgl__sky::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--out);
  background: linear-gradient(180deg, #2a1f66 0%, #8a3f9a 55%, #ff8f5c 100%); }
.isk-daytgl[data-time="dusk"] .isk-daytgl__sky::after { opacity: 1; }
.isk-daytgl__cloud { position: absolute; z-index: 1; left: 58%; top: 68%; width: 14%; height: 22%; border-radius: 999px; background: rgba(255, 255, 255, .85); transition: opacity .4s, translate .6s var(--out); animation: isk-daytgl-cloud 6s ease-in-out infinite alternate; }
.isk-daytgl__cloud::before { content: ''; position: absolute; left: 22%; bottom: 40%; width: 48%; height: 110%; border-radius: 50%; background: inherit; }
.isk-daytgl__cloud.is-2 { left: 84%; top: 12%; width: 10%; height: 18%; opacity: .6; animation-delay: -3s; }
.isk-daytgl[data-time="dusk"] .isk-daytgl__cloud { opacity: 0; translate: 40% 0; }
@keyframes isk-daytgl-cloud { to { translate: -12% 0; } }
.isk-daytgl__star { position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: #fff6d6; opacity: 0; transition: opacity .4s;
  left: calc(8% + var(--i) * 7%); top: calc(20% + (var(--i) * 37 % 60) * 1%); }
.isk-daytgl[data-time="dusk"] .isk-daytgl__star { opacity: .9; animation: isk-ss-twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.isk-daytgl__thumb { position: absolute; z-index: 2; top: calc(var(--u) * .38); bottom: calc(var(--u) * .38); left: calc(var(--u) * .38); width: calc(50% - var(--u) * .38); border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff 0 45%, #eef0f8 100%); box-shadow: 0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .25), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transition: transform .5s var(--spring2); }
.isk-daytgl[data-time="dusk"] .isk-daytgl__thumb { transform: translateX(100%); }
.isk-daytgl.is-flip .isk-daytgl__thumb { animation: isk-daytgl-squish .5s var(--spring); }
@keyframes isk-daytgl-squish { 25% { scale: 1.12 .78; } }
.isk-daytgl__thumb i { position: absolute; left: calc(var(--u) * .45); top: 50%; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); margin-top: calc(var(--u) * -1.15); transition: transform .55s var(--spring2), opacity .3s; }
.isk-daytgl__thumb i svg { width: 100%; height: 100%; }
.isk-daytgl__sunico { color: #ffb21a; filter: drop-shadow(0 1px 0 rgba(150, 80, 0, .45)); animation: isk-spin 12s linear infinite; }
.isk-daytgl__moonico { color: #6a4ad6; opacity: 0; transform: translateY(80%) rotate(-70deg) scale(.5); }
.isk-daytgl[data-time="dusk"] .isk-daytgl__sunico { opacity: 0; transform: translateY(90%) rotate(90deg) scale(.4); }
.isk-daytgl[data-time="dusk"] .isk-daytgl__moonico { opacity: 1; transform: none; }
.isk-daytgl__opt { position: absolute; z-index: 3; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; justify-content: center; padding-left: calc(var(--u) * 2.2);
  font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .14em; color: #fff; -webkit-text-stroke: .22em rgba(16, 24, 60, .55); paint-order: stroke fill; transition: color .3s; }
.isk-daytgl__opt.is-day { left: 0; }
.isk-daytgl__opt.is-dusk { right: 0; }
.isk-daytgl__opt.is-on { color: var(--k); -webkit-text-stroke: 0 transparent; }
.isk-daytgl.is-edge-l, .isk-daytgl.is-edge-r { animation: isk-shake .3s; }

/* ---- footer: weapon · look · start */
.isk-ss__foot { position: absolute; left: calc(var(--u) * 32); right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 44); display: flex; align-items: center; gap: calc(var(--u) * 1.1); }
.isk-ss__foot .isk-wchip { flex: 1 1 0; min-width: 0; height: calc(var(--u) * 5.8); }
.isk-ss__foot .isk-wchip__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-ss__foot .isk-wchip__edit { padding: .5em; }
.isk-ss__foot .isk-btn--start { height: calc(var(--u) * 5.8); width: calc(var(--u) * 25); }
.isk-lchip__av { position: relative; flex: none; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.isk-lchip__blob { position: absolute; inset: -10%; }
.isk-lchip__blob svg { width: 100%; height: 100%; }
.isk-lchip__squid { position: absolute; inset: 14%; color: #fff; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); transition: opacity .3s; }
.isk-lchip__squid svg { width: 100%; height: 100%; }
.isk-lchip__av.has-portrait .isk-lchip__squid { opacity: 0; }
.isk-portrait { position: absolute; inset: -8%; display: block; animation: isk-pop .45s var(--spring2); }
.isk-portrait canvas { width: 100%; height: 100%; display: block; }
.isk-lchip.is-focus .isk-portrait { animation: isk-ss-bob 1.2s ease-in-out infinite; }
@keyframes isk-ss-bob { 50% { translate: 0 calc(var(--u) * -.25); rotate: -3deg; } }

/* launch */
.isk-ss.is-launch .isk-ss__frame { animation: isk-ss-launch .7s var(--spring) forwards; }
@keyframes isk-ss-launch { 30% { scale: 1.035; filter: brightness(1.15); } 100% { scale: 1.02; } }
.isk-ss.is-launch .isk-ticket.is-sel { animation: isk-ticket-pick .5s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  .isk-ss__bgimg, .isk-ss__layer, .isk-ss__splat, .isk-ss__glare, .isk-ss__sun, .isk-ss__drip path, .isk-ss__stars i, .isk-daytgl__cloud, .isk-daytgl__sunico, .isk-daytgl__star { animation: none !important; }
  .isk-ss__caption.is-in .isk-ss__name span span, .isk-ss__caption.is-in .isk-ss__tape { animation: none !important; }
}

/* =====================================================================================
   LOCKER — choose + customise your dripling (live 3D kid on the pedestal to the right)
   ===================================================================================== */
.isk-locker__body { position: absolute; left: calc(var(--u) * 3.6 + var(--sal)); top: calc(var(--u) * 10.4); width: min(calc(var(--u) * 57), 58vw); display: flex; flex-direction: column; gap: calc(var(--u) * .9); }
.isk-ltabs { margin-bottom: 0; }
.isk-ltabs .isk-tab { font-size: var(--fs-s); letter-spacing: .08em; }
.isk-lpanel { display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1) calc(var(--u) * 1.1) calc(var(--u) * .95); }
.isk-lgrids { height: calc(var(--u) * 23.2); display: flex; flex-direction: column; gap: calc(var(--u) * .85); }
.isk-lsec { display: flex; flex-direction: column; gap: calc(var(--u) * .75); animation: isk-row-in .45s var(--spring) backwards; }
.isk-lsec + .isk-lsec { animation-delay: 60ms; } .isk-lsec + .isk-lsec + .isk-lsec { animation-delay: 120ms; }
.isk-lsec__title { display: flex; align-items: baseline; justify-content: space-between; padding: 0 calc(var(--u) * .2); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .9); }
.isk-lsec__title small { font: 800 calc(var(--u) * .62) / 1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .5; }
.isk-lgrid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(var(--u) * .7); }
.isk-lgrid--swatch { gap: calc(var(--u) * .6); }
.isk-ltile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: calc(var(--u) * 1.1); background: rgba(20, 16, 32, .92); color: #fff;
  cursor: pointer; pointer-events: auto; overflow: hidden; isolation: isolate; font: inherit; outline: none; -webkit-tap-highlight-color: transparent;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .45); transition: transform .4s var(--spring), box-shadow .25s; }
.isk-ltile.is-hover { transition: transform .18s var(--out), box-shadow .25s; }
.isk-ltile::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .1), transparent 62%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 7px 7px; }
.isk-ltile--body { aspect-ratio: .86; }
.isk-ltile--bust { aspect-ratio: 1; }
.isk-ltile--iris, .isk-ltile--skin { border-radius: 50%; }
.isk-ltile__blob { position: absolute; z-index: -1; left: 50%; top: 50%; width: 132%; aspect-ratio: 1; translate: -50% -50%; transform: scale(0) rotate(-40deg); transition: transform .45s var(--spring2); pointer-events: none; }
.isk-ltile__blob svg { width: 100%; height: 100%; }
.isk-ltile.is-on .isk-ltile__blob { transform: scale(1) rotate(0deg); }
.isk-ltile__art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transform: translate(calc(var(--px, 0) * 6%), calc(var(--py, 0) * 5%)); transition: transform .45s var(--out); }
.isk-ltile__art > svg { width: 80%; height: 80%; filter: drop-shadow(0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .35)); }
.isk-ltile--iris .isk-ltile__art > svg, .isk-ltile--skin .isk-ltile__art > svg { width: 84%; height: 84%; }
.isk-ltile__squid { display: block; width: 52%; color: rgba(255, 255, 255, .22); }
.isk-ltile__squid svg { width: 100%; height: 100%; }
.isk-ltile.has-pic .isk-ltile__art > svg, .isk-ltile.has-pic .isk-ltile__squid { opacity: 0; }
.isk-ltile__pic { position: absolute; inset: 0; display: block; animation: isk-ltile-pic .35s var(--out) both; }
.isk-ltile__pic.is-swap { animation-name: isk-fade; animation-duration: .25s; }
.isk-ltile__pic canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes isk-ltile-pic { from { opacity: 0; scale: .86; translate: 0 8%; } }
.isk-ltile--bust .isk-ltile__pic canvas, .isk-ltile--body .isk-ltile__pic canvas { object-fit: cover; }
.isk-ltile__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1em .35em .5em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  font: 400 calc(var(--u) * .92) / 1 'Titan One', sans-serif; letter-spacing: .02em; -webkit-text-stroke: .22em var(--k); paint-order: stroke fill;
  background: linear-gradient(0deg, rgba(12, 9, 22, .78), rgba(12, 9, 22, 0)); }
.isk-ltile--bust .isk-ltile__name { font-size: calc(var(--u) * 1.15); }
.isk-ltile--head .isk-ltile__name, .isk-ltile--face .isk-ltile__name { font-size: calc(var(--u) * .8); padding-bottom: .55em; }
.isk-ltile__eq { position: absolute; top: calc(var(--u) * .4); right: calc(var(--u) * .4); display: grid; place-items: center; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%;
  background: #fff; color: var(--k); box-shadow: 0 0 0 2px var(--k); transform: scale(0) rotate(-40deg); transition: transform .4s var(--spring2); pointer-events: none; }
.isk-ltile__eq svg { width: 64%; height: 64%; }
.isk-ltile--iris .isk-ltile__eq, .isk-ltile--skin .isk-ltile__eq { top: auto; right: -2%; bottom: -2%; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.isk-ltile.is-on .isk-ltile__eq { transform: scale(1) rotate(0deg); }
.isk-ltile.is-on { box-shadow: inset 0 0 0 calc(var(--u) * .2) var(--a), 0 calc(var(--u) * .35) 0 var(--a-deep); }
.isk-ltile.is-focus { z-index: 2; transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--u) * -.2)) scale(1.05);
  box-shadow: 0 0 0 calc(var(--u) * .2) #fff, 0 0 0 calc(var(--u) * .4) var(--k), 0 0 0 calc(var(--u) * .66) rgba(var(--a-rgb), .55), 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(0, 0, 0, .4); }
.isk-ltile.is-on.is-focus { box-shadow: 0 0 0 calc(var(--u) * .2) var(--a), 0 0 0 calc(var(--u) * .4) #fff, 0 0 0 calc(var(--u) * .6) var(--k), 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(0, 0, 0, .4); }
.isk-ltile.is-down { scale: .94; }
.isk-ltile.is-pick { animation: isk-ticket-pick .5s var(--spring); }

.isk-linfo { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .3); min-height: calc(var(--u) * 4.4); padding: calc(var(--u) * .6) calc(var(--u) * 1); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .05); }
.isk-linfo__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.isk-linfo__names { display: flex; align-items: baseline; gap: .7em; min-width: 0; }
.isk-linfo__names small { flex: none; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; color: var(--a); }
.isk-linfo__names b { font: 400 calc(var(--u) * 1.55) / 1 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-linfo__text { font: 500 var(--fs-s) / 1.25 'Rubik', sans-serif; color: var(--muted); }
.isk-linfo__eq { display: none; flex: none; align-items: center; gap: .35em; padding: .38em .75em .38em .45em; border-radius: 999px; background: var(--a); color: var(--a-ink); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .1em; box-shadow: 0 3px 0 var(--a-deep); }
.isk-linfo__eq i { display: block; width: 1.25em; height: 1.25em; }
.isk-linfo__eq i svg { width: 100%; height: 100%; }
.isk-linfo.is-on .isk-linfo__eq { display: inline-flex; animation: isk-pop .4s var(--spring); }
.isk-linfo.is-swap .isk-linfo__names b, .isk-linfo.is-swap .isk-linfo__text { animation: isk-tip-in .35s var(--spring); }

.isk-lfoot { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.isk-lbtn { height: calc(var(--u) * 3.9); padding: 0 calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.4); }
.isk-lbtn .isk-btn__icon { width: 1.5em; height: 1.5em; }
.isk-lbtn--dice.is-roll .isk-btn__icon { animation: isk-dice-roll .7s var(--spring); }
@keyframes isk-dice-roll { 0% { rotate: 0deg; scale: .7; } 60% { rotate: 400deg; scale: 1.25; } 100% { rotate: 360deg; scale: 1; } }
.isk-lbtn__key { margin-left: .35em; font-size: calc(var(--u) * .78); opacity: .9; }
.isk-lsaved { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45em; font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .05em; color: rgba(255, 255, 255, .6); }
.isk-lsaved i { display: block; width: 1.3em; height: 1.3em; color: #3ddc84; }
.isk-lsaved i svg { width: 100%; height: 100%; }
.isk-lsaved.is-on { animation: isk-lsaved .9s var(--out); }
@keyframes isk-lsaved { 15% { color: #fff; scale: 1.08; } }

/* name tag + current look, top right above the kid */
.isk-ltag { position: absolute; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 2.4 + var(--sat)); width: min(calc(var(--u) * 29), 34vw); display: flex; flex-direction: column; gap: calc(var(--u) * .6); isolation: isolate; }
.isk-ltag__blob { position: absolute; z-index: -1; left: calc(var(--u) * -2.6); top: calc(var(--u) * -1.6); width: calc(var(--u) * 7.5); pointer-events: none; animation: isk-ss-splat 40s linear infinite; }
.isk-ltag__blob svg { width: 100%; height: 100%; }
.isk-ltag .isk-name { transform: rotate(1.2deg); }
.isk-ltag .isk-name__label { color: var(--a); opacity: 1; }
.isk-lsheet { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * .35); }
.isk-lsheet__row { display: inline-flex; align-items: center; gap: .4em; padding: .32em .6em .32em .5em; border-radius: 999px; background: rgba(14, 11, 22, .72); backdrop-filter: blur(6px);
  font: 700 calc(var(--u) * .72) / 1 'Rubik', sans-serif; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.isk-lsheet__row small { font: 900 calc(var(--u) * .56) / 1 'Rubik', sans-serif; letter-spacing: .14em; opacity: .55; }
.isk-lsheet__row b { font-weight: 800; }
.isk-lsheet__dot { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--k), 0 0 0 2.5px rgba(255, 255, 255, .5); }
.isk-lspin { position: absolute; left: calc(var(--u) * 62); right: calc(var(--u) * 3.4 + var(--sar)); bottom: calc(var(--u) * 6.8 + var(--sab)); display: flex; align-items: center; justify-content: center; gap: .5em; pointer-events: none;
  font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.isk-lspin > i { display: block; width: 1.9em; height: 1.9em; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); animation: isk-lspin 3.2s ease-in-out infinite; }
.isk-lspin > i svg { width: 100%; height: 100%; }
.isk-lspin .isk-padg { align-items: center; gap: .4em; }
@keyframes isk-lspin { 0%, 100% { rotate: -25deg; } 50% { rotate: 25deg; } }
@media (prefers-reduced-motion: reduce) { .isk-ltag__blob, .isk-lspin > i { animation: none !important; } }

/* =====================================================================================
   LOADOUT v2 — grid scales to 9+ weapons; stats with icons + deltas; sub/special with cost; dripling chip
   ===================================================================================== */
.isk-loadout__body { left: calc(var(--u) * 3.6 + var(--sal)); width: min(calc(var(--u) * 54), 56vw); gap: calc(var(--u) * .95); }
.isk-seclabel__count { margin-left: auto; padding: .3em .65em; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; opacity: .8; }
.isk-wgrid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: calc(var(--u) * .9); }
.isk-wgrid.is-compact .isk-wcard { height: calc(var(--u) * 8.4); gap: calc(var(--u) * .2); padding: calc(var(--u) * .55) calc(var(--u) * .4) calc(var(--u) * .65); }
.isk-wgrid.is-compact .isk-wcard__icon svg { height: calc(var(--u) * 4.3); }
.isk-wgrid.is-compact .isk-wcard__name { font-size: calc(var(--u) * 1.02); letter-spacing: 0; }
.isk-wgrid.is-compact .isk-wcard__blob { width: calc(var(--u) * 9.5); }
.isk-wcard__name { max-width: 100%; padding: 0 .2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-wcard__new { position: absolute; top: calc(var(--u) * .45); left: calc(var(--u) * .45); padding: .3em .5em .28em; border-radius: calc(var(--u) * .4); background: #ffd54a; color: var(--k);
  font: 400 calc(var(--u) * .78) / 1 'Titan One', sans-serif; letter-spacing: .04em; transform: rotate(-8deg); box-shadow: 0 0 0 2px var(--k), 0 2px 0 2px var(--k); animation: isk-new 1.6s ease-in-out infinite; }
@keyframes isk-new { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
.isk-wcard.was-new .isk-wcard__new { animation: isk-new-out .35s var(--in) forwards; }
@keyframes isk-new-out { to { opacity: 0; scale: .3; rotate: 30deg; } }
.isk-wd { grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * .7) calc(var(--u) * 1.8); padding: calc(var(--u) * 1.25) calc(var(--u) * 1.6) calc(var(--u) * 1.35); }
.isk-wd__title { min-width: 0; }
.isk-wd__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--u) * 2.5); padding: .05em .1em .12em 0; }
.isk-wd__cmp { display: none; align-items: center; gap: .35em; padding: .4em .8em .4em .55em; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .08em; white-space: nowrap; }
.isk-wd__cmp b { font-weight: 900; }
.isk-wd__cmpdot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }
.isk-wd.is-compare .isk-wd__cmp { display: inline-flex; animation: isk-pop .35s var(--spring); }
.isk-wd__blurb { font-size: var(--fs-s); line-height: 1.35; }
.isk-wd__stats { gap: calc(var(--u) * .5); }
.isk-stat { grid-template-columns: calc(var(--u) * 8.8) 1fr calc(var(--u) * 2.3) calc(var(--u) * 2.2); gap: calc(var(--u) * .55); }
.isk-stat__label { display: flex; align-items: center; gap: .45em; }
.isk-stat__label i { flex: none; display: block; width: 1.35em; height: 1.35em; color: var(--a); }
.isk-stat__label i svg { width: 100%; height: 100%; }
.isk-stat__num { text-align: right; font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; }
.isk-stat__num.is-up { color: #6dffa8; } .isk-stat__num.is-down { color: #ff8a9a; }
.isk-stat__bar.is-down .isk-stat__fill { background: linear-gradient(180deg, #ffc1c9 -30%, #ff5a70 50%, #b8283d); }
.isk-stat__delta { font: 900 calc(var(--u) * .72) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .02em; opacity: 0; translate: -.4em 0; transition: opacity .2s, translate .3s var(--spring); }
.isk-stat__delta.is-up { color: #6dffa8; opacity: 1; translate: 0 0; } .isk-stat__delta.is-down { color: #ff8a9a; opacity: 1; translate: 0 0; }
.isk-wd.is-swap .isk-stat__fill { transition-duration: .5s; }
.isk-kit { padding: calc(var(--u) * .65) calc(var(--u) * .85); }
.isk-kit__row { display: flex; align-items: baseline; gap: .6em; }
.isk-kit__cost { padding: .25em .5em; border-radius: 999px; background: rgba(var(--a-rgb), .2); color: var(--a-light); font: 900 calc(var(--u) * .66) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .06em; white-space: nowrap; }
.isk-kit__cost:empty { display: none; }
.isk-kit__icon.is-sp { background: radial-gradient(circle at 50% 40%, rgba(var(--a-rgb), .35), rgba(0, 0, 0, .38) 70%); }
.isk-wd.is-swap .isk-kit { animation: isk-tip-in .4s var(--spring) backwards; }
.isk-wd.is-swap .isk-kit + .isk-kit { animation-delay: 50ms; }
.isk-lchip--sm { flex: none; height: calc(var(--u) * 4.8); }
.isk-lchip--sm .isk-lchip__av { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
.isk-lchip--sm .isk-wchip__text b { font-size: calc(var(--u) * 1.35); }
.isk-loadout__look { position: absolute; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 2.6 + var(--sat)); width: min(calc(var(--u) * 26), 30vw); display: flex; }
.isk-loadout__look .isk-wchip { width: 100%; transform: rotate(1.2deg); }
.isk-loadout__look .isk-wchip.is-focus { transform: rotate(0deg) translateY(calc(var(--u) * .2)); }
/* main menu: six entries (LOCKER joined) — slightly slimmer rows, description below the stack */
.isk-main__menu { gap: calc(var(--u) * .95); }
.isk-main__menu .isk-btn--menu:not(.isk-btn--xl) { height: calc(var(--u) * 4.15); font-size: calc(var(--u) * 1.95); }
.isk-main__desc { top: calc(52% + var(--u) * 17.6); }
/* stage select: keep the header subtitle clear of the hero's corner splat; tickets never touch the hero */
.isk-ss__splat:not(.is-b) { left: auto; right: calc(var(--u) * 16); top: calc(var(--u) * -3.2); width: calc(var(--u) * 9); }
.isk-ss__left { width: calc(var(--u) * 24.6); }

/* =====================================================================================
   ONLINE — main-menu entry, toasts, hub (create / join with a code), lobby (room code, settings, line-up plates,
   ready / start, emotes, loadout drawer, launch countdown)
   ===================================================================================== */
/* ---- main menu: ONLINE, the headline second entry */
.isk-main__menu { top: 53.5%; gap: calc(var(--u) * .78); }
.isk-main__menu .isk-btn--menu:not(.isk-btn--xl):not(.isk-btn--online) { height: calc(var(--u) * 3.85); font-size: calc(var(--u) * 1.85); }
.isk-main__desc { top: calc(53.5% + var(--u) * 19.4); }
.isk-btn--online { --bg: var(--b); --fill: #fff; --fill-ink: var(--k); height: calc(var(--u) * 5.3); font-size: calc(var(--u) * 2.55); color: var(--b-ink); margin-bottom: calc(var(--u) * .35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .18), 0 calc(var(--u) * .42) 0 var(--b-deep); }
.isk-btn--online::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; opacity: .5;
  background: radial-gradient(rgba(255, 255, 255, .28) 1.4px, transparent 1.9px) 0 0 / 11px 11px; animation: isk-dots-drift 6s linear infinite; }
@keyframes isk-dots-drift { to { background-position: 44px -22px; } }
.isk-btn--online .isk-btn__icon { width: 1.5em; height: 1.5em; }
.isk-btn--online .isk-btn__sub { font-size: var(--fs-s); }
.isk-btn--online.is-focus .isk-btn__icon svg { animation: isk-online-ping 1.4s ease-in-out infinite; }
@keyframes isk-online-ping { 50% { translate: 0 -2px; } }
.isk-btn__live { position: absolute; right: calc(var(--u) * 1.1); top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: .45em; padding: .42em .7em .4em .55em; border-radius: 999px;
  background: var(--k); color: #fff; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); rotate: 3deg; }
.isk-btn__live i { width: .7em; height: .7em; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 0 0 rgba(255, 77, 106, .7); animation: isk-live 1.6s ease-out infinite; }
@keyframes isk-live { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 106, .75); } 70%, 100% { box-shadow: 0 0 0 .55em rgba(255, 77, 106, 0); } }


/* =====================================================================================
   ONLINE (hub + lobby) — sticker kit. Nothing is a plain glass box: every surface is an opaque, slightly
   rotated sticker (white die-cut ring → thick ink outline → hard offset shadow), with texture (stripes, halftone,
   squid school), torn black tape for labels, splats + drips for ink. Team inks dominate, black is structure, the
   high-vis lime (--hv) marks what you can act on (READY / START / JOIN / focus). Keeps the house type: Titan One
   with the ink stroke, Rubik 900 caps only on tape.
   ===================================================================================== */
.isk-ui {
  --hv: #e3ff2e; --hv-deep: #5c6b00; --hv-dark: #aac800;
  --ol: calc(var(--u) * .26); --ol2: calc(var(--u) * .16); --olx: calc(var(--u) * .42);
  --stk: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k), calc(var(--u) * .42) calc(var(--u) * .52) 0 var(--olx) var(--sh, var(--k));
  --stk-k: 0 0 0 var(--ol) var(--k), calc(var(--u) * .36) calc(var(--u) * .44) 0 var(--ol) var(--sh, var(--k));
  --tex-dots: radial-gradient(rgba(255, 255, 255, .11) 1.3px, transparent 1.8px) 0 0 / 10px 10px;
  --tex-squids: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Cpath transform='translate(4 3) rotate(-22 16 16) scale(.5)' d='M32 3 C40 10 49 19 50 29 L44 31.5 L44 41 C44 44.5 42 46.5 39.5 46.5 L39.5 58 L35.5 53 L32 60 L28.5 53 L24.5 58 L24.5 46.5 C22 46.5 20 44.5 20 41 L20 31.5 L14 29 C15 19 24 10 32 3 Z'/%3E%3Cpath transform='translate(40 38) rotate(28 16 16) scale(.5)' d='M32 3 C40 10 49 19 50 29 L44 31.5 L44 41 C44 44.5 42 46.5 39.5 46.5 L39.5 58 L35.5 53 L32 60 L28.5 53 L24.5 58 L24.5 46.5 C22 46.5 20 44.5 20 41 L20 31.5 L14 29 C15 19 24 10 32 3 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--u) * 5.4) calc(var(--u) * 5.4);
  --tex-squids-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23000' fill-opacity='.11'%3E%3Cpath transform='translate(4 3) rotate(-22 16 16) scale(.5)' d='M32 3 C40 10 49 19 50 29 L44 31.5 L44 41 C44 44.5 42 46.5 39.5 46.5 L39.5 58 L35.5 53 L32 60 L28.5 53 L24.5 58 L24.5 46.5 C22 46.5 20 44.5 20 41 L20 31.5 L14 29 C15 19 24 10 32 3 Z'/%3E%3Cpath transform='translate(40 38) rotate(28 16 16) scale(.5)' d='M32 3 C40 10 49 19 50 29 L44 31.5 L44 41 C44 44.5 42 46.5 39.5 46.5 L39.5 58 L35.5 53 L32 60 L28.5 53 L24.5 58 L24.5 46.5 C22 46.5 20 44.5 20 41 L20 31.5 L14 29 C15 19 24 10 32 3 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--u) * 5.4) calc(var(--u) * 5.4);
  /* print grain: one 140px tile of fractal noise, white at a few % alpha (rasterised once, then just tiled) */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .2 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 140px;
  --tex-stripes: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .13) 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2.4));
  --drips-hv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='0 0 40 26'%3E%3Cpath d='M-2 -2 H42 V2 C37 2 35.5 3.5 35.5 8 C35.5 12.5 33.8 14 32 14 C30.2 14 28.5 12.5 28.5 8 C28.5 3.5 27 2 24 2 H18 C15.5 2 14.5 3.5 14.5 12 C14.5 20.5 12.8 23 11 23 C9.2 23 7.5 20.5 7.5 12 C7.5 3.5 6.5 2 4 2 H-2 Z' fill='%23e3ff2e' stroke='%2315121c' stroke-width='2.4'/%3E%3C/svg%3E");
}
.isk-fhv { fill: var(--hv); }
/* player tag art inks (menu-art.js tagArt) */
.isk-tf0 { fill: var(--tc); } .isk-tf1 { fill: var(--tc-dark); } .isk-tf2 { fill: var(--tc-light); } .isk-tf3 { fill: var(--tc-deep); }

/* ---- tape: black strip with torn ends; a strip of ink peeks out underneath (text sits on top) */
.isk-tape { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em .52em .9em; color: #fff; white-space: nowrap;
  font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; rotate: -2deg; }
.isk-tape::before, .isk-tape::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--k);
  clip-path: polygon(1.6% 0, 98.4% 3%, 100% 26%, 98.9% 50%, 100% 76%, 98.2% 100%, 1.4% 96%, 0 72%, 1.1% 48%, 0 22%); }
.isk-tape::after { z-index: -2; background: var(--tape, var(--a)); translate: calc(var(--u) * .3) calc(var(--u) * .32); }
.isk-tape > i { flex: none; display: block; width: 1.4em; height: 1.4em; color: var(--tape, var(--a)); }
.isk-tape > i svg { width: 100%; height: 100%; }

/* ---- drips hanging off a sticker (menu-art.js dripsSVG) */
.isk-sdrip path { stroke: var(--k); stroke-width: 3; paint-order: stroke; vector-effect: non-scaling-stroke; }
.isk-sdrip { transform-box: fill-box; transform-origin: 50% 0; animation: isk-drip 4.6s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(var(--d) * -.83s); }

/* ---- focus on the online screens: a chunky lime ring with ink dripping off it, and a squishy landing */
.isk-ui[data-screen="online"] .isk-cursor__ring, .isk-ui[data-screen="lobby"] .isk-cursor__ring {
  border: calc(var(--u) * .26) solid var(--hv);
  box-shadow: 0 0 0 calc(var(--u) * .2) var(--k), inset 0 0 0 calc(var(--u) * .16) var(--k), calc(var(--u) * .3) calc(var(--u) * .38) 0 calc(var(--u) * .2) var(--k);
  animation: isk-hv-ring 1.2s ease-in-out infinite; }
@keyframes isk-hv-ring { 50% { border-color: #f4ff9a; } }
.isk-ui[data-screen="online"] .isk-cursor__glow, .isk-ui[data-screen="lobby"] .isk-cursor__glow {
  inset: auto; left: 12%; right: 46%; top: calc(100% - var(--u) * .1); height: calc(var(--u) * 1.25); border-radius: 0; opacity: 1;
  background: var(--drips-hv) 0 0 / calc(var(--u) * 3.1) 100% repeat-x; transform-origin: 50% 0; animation: isk-hv-drip 2.4s ease-in-out infinite; }
.isk-cursor.is-nodrip .isk-cursor__glow { opacity: 0 !important; }
@keyframes isk-hv-drip { 0%, 100% { transform: scaleY(.55); } 55% { transform: scaleY(1); } }
@keyframes isk-squish { 0% { scale: .92 1.08; } 35% { scale: 1.07 .94; } 65% { scale: .98 1.02; } 100% { scale: 1; } }
@keyframes isk-wobble { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

/* ---- shared chrome on both screens: back/leave pill, header, prompt legend */
.isk-online .isk-backbtn, .isk-lobby .isk-backbtn { height: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * .5); background: var(--k); rotate: -2deg;
  box-shadow: var(--stk); font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .12em; }
.isk-online .isk-backbtn__arrow, .isk-lobby .isk-backbtn__arrow { background: var(--hv); box-shadow: 0 0 0 2px var(--k); }
.isk-online .isk-backbtn:hover, .isk-lobby .isk-backbtn:hover { background: #2a2140; transform: translateX(-3px) scale(1.06); }
.isk-online .isk-head__title { rotate: -3deg; font-size: calc(var(--u) * 4.2); }
.isk-online .isk-head__blob svg path, .isk-online .isk-head__blob svg circle { stroke: var(--k); stroke-width: 5; paint-order: stroke; }
.isk-online .isk-head__sub { position: relative; isolation: isolate; align-self: flex-start; margin-top: .55em; padding: .45em .9em .5em; rotate: -1deg; font: 800 var(--fs-s) / 1 'Rubik', sans-serif; color: #fff; text-shadow: none; }
.isk-online .isk-head__sub::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--k); clip-path: polygon(1% 0, 99% 4%, 100% 50%, 98.8% 100%, .6% 94%, 0 50%); }
.isk-online .isk-prompts, .isk-lobby .isk-prompts { bottom: calc(var(--u) * 1.3 + var(--sab)); background: var(--k); backdrop-filter: none; rotate: -1deg; border-radius: calc(var(--u) * 1.2) calc(var(--u) * .8) calc(var(--u) * 1.3) calc(var(--u) * .9);
  box-shadow: 0 0 0 var(--ol2) rgba(255, 255, 255, .9), 0 0 0 var(--olx) var(--k), calc(var(--u) * .3) calc(var(--u) * .4) 0 var(--olx) var(--k); }

/* ---- toasts: black stickers, the icon in an ink blob (online only uses them; top right, survive screen swaps) */
.isk-toasts { position: absolute; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 11.4 + var(--sat)); z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .9); pointer-events: none; }
.isk-toast { --tc: var(--hv); display: flex; align-items: center; gap: .7em; max-width: calc(var(--u) * 34); padding: .55em 1.1em .6em .55em; border-radius: calc(var(--u) * 1.1) calc(var(--u) * .7) calc(var(--u) * 1.2) calc(var(--u) * .8);
  background: var(--k) var(--tex-squids); font: 800 var(--fs-s) / 1.25 'Rubik', sans-serif; color: #fff; rotate: -1.4deg;
  box-shadow: var(--stk); animation: isk-toast-in .55s var(--spring2) both; }
.isk-toast:nth-child(even) { rotate: 1.2deg; }
.isk-toast.is-out { animation: isk-toast-out .38s var(--in) forwards; }
@keyframes isk-toast-in { from { opacity: 0; translate: calc(var(--u) * 4) 0; scale: .7; } }
@keyframes isk-toast-out { to { opacity: 0; translate: calc(var(--u) * 3) 0; scale: .9; } }
.isk-toast__icon { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; padding: .45em; border-radius: 44% 56% 50% 50% / 52% 44% 56% 48%; background: var(--tc); color: var(--tc-ink, var(--k)); box-shadow: 0 0 0 2.5px var(--k); rotate: -8deg; }
.isk-toast__icon svg { width: 100%; height: 100%; }
.isk-toast.is-error { background-color: #3a0d1a; }
.isk-toast.is-error .isk-toast__icon { background: #ff3d5e; color: #fff; }
.isk-toast.is-good .isk-toast__icon { background: #3ddc84; color: var(--k); }
.isk-toast.is-leave .isk-toast__icon { background: #5a5170; color: #fff; }
/* a joining player's mini player tag leads the toast */
.isk-toast.has-tag { padding-left: calc(var(--u) * 1.5); }
.isk-toast__tag.isk-stag { flex: none; height: calc(var(--u) * 2.9); min-width: calc(var(--u) * 7.5); max-width: calc(var(--u) * 10); padding: 0 calc(var(--u) * .7) 0 calc(var(--u) * 2.2); rotate: -3deg;
  box-shadow: 0 0 0 calc(var(--u) * .12) #fff, 0 0 0 calc(var(--u) * .28) var(--k); }
.isk-toast__tag .isk-stag__w { left: calc(var(--u) * -.9); width: calc(var(--u) * 2.7); margin-top: calc(var(--u) * -1.35); box-shadow: 0 0 0 calc(var(--u) * .12) #fff, 0 0 0 calc(var(--u) * .28) var(--k); }
.isk-toast__tag .isk-stag__title { font-size: calc(var(--u) * .46); }
.isk-toast__tag b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 calc(var(--u) * .95) / 1.1 'Titan One', sans-serif; color: #fff; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }

/* ---- small shared bits: fat pills */
.isk-minibtn { display: inline-flex; align-items: center; gap: .45em; height: calc(var(--u) * 3.3); padding: 0 1.05em; border: 0; border-radius: 999px; background: #fff; color: var(--k); cursor: pointer; pointer-events: auto;
  font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; letter-spacing: .04em; box-shadow: var(--stk-k); transition: background .2s, color .2s, transform .35s var(--spring); }
.isk-minibtn i { display: block; width: 1.3em; height: 1.3em; }
.isk-minibtn i svg { width: 100%; height: 100%; }
.isk-minibtn:hover { transform: translateY(-2px) scale(1.06) rotate(-2deg); }
.isk-minibtn.is-go.is-ready { background: var(--hv); color: var(--k); animation: isk-squish .5s var(--spring2), isk-wobble 1.1s ease-in-out .5s infinite; }
.isk-minibtn.is-cancel { background: #ff3d5e; color: #fff; }
.isk-minibtn.is-cancel i { display: none; }
.isk-dash { margin: 0 .2em; font-style: normal; opacity: .7; }

/* =====================================================================================
   ONLINE HUB — create / join (left), your player tag + weapon + look (right)
   ===================================================================================== */
.isk-hub__body { position: absolute; left: calc(var(--u) * 3.9 + var(--sal)); top: calc(var(--u) * 11.6); width: min(calc(var(--u) * 50), 54vw); display: flex; flex-direction: column; gap: calc(var(--u) * 1.9); }
.isk-hubcard { position: relative; display: block; width: 100%; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.7); border: 0; color: #fff; font: inherit; text-align: left;
  border-radius: calc(var(--u) * 1.7) calc(var(--u) * 1) calc(var(--u) * 1.9) calc(var(--u) * 1.2) / calc(var(--u) * 1.4) calc(var(--u) * 1.8) calc(var(--u) * 1.1) calc(var(--u) * 1.7);
  background: none; isolation: isolate; cursor: pointer; pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg)); box-shadow: var(--stk);
  transition: transform .45s var(--spring), box-shadow .2s; }
.isk-hubcard__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: #251c3c; }
.isk-hubcard__bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--tex-grain); }
.isk-hubcard__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--tex-dots);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 45%); mask-image: linear-gradient(200deg, #000 0%, transparent 45%); }
.isk-hubcard.is-hover { transition: transform .2s var(--out), box-shadow .2s; }
.isk-hubcard.is-focus { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(0deg) translateX(calc(var(--u) * .8)) scale(1.025);
  box-shadow: 0 0 0 var(--ol2) var(--hv), 0 0 0 var(--olx) var(--k), calc(var(--u) * .55) calc(var(--u) * .7) 0 var(--olx) var(--k); animation: isk-squish .5s var(--spring2); }
.isk-hubcard.is-down { scale: .975; }
.isk-hubcard__ink { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 20%) var(--my, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); }
.isk-hubcard.is-hover .isk-hubcard__ink, .isk-hubcard.is-focus .isk-hubcard__ink { opacity: 1; }
.isk-hubcard__kicker { --tape: var(--hv); align-self: flex-start; font-size: var(--fs-xs); }
.isk-hubcard__title { display: block; margin-top: .42em; font: 400 calc(var(--u) * 3.05) / 1 'Titan One', sans-serif; letter-spacing: .01em; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--k); rotate: -1deg; transform-origin: 0 50%; }
.isk-hubcard__sub { display: block; margin-top: .5em; font: 700 var(--fs-m) / 1.3 'Rubik', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.isk-hubcard__text { display: flex; flex-direction: column; min-width: 0; }
.isk-hubcard.is-shake { animation: isk-shake .4s; }
.isk-hubcard__drips { position: absolute; left: 8%; right: 34%; top: calc(100% + var(--olx) - 2px); height: calc(var(--u) * 2.6); pointer-events: none; transform-origin: 50% 0; scale: 1 0; transition: scale .45s var(--spring2); }
.isk-hubcard__drips svg { width: 100%; height: 100%; overflow: visible; }
.isk-hubcard.is-focus .isk-hubcard__drips { scale: 1 1; }
/* create: striped sticker in the ONLINE ink */
.isk-hubcard--create { display: grid; grid-template-columns: calc(var(--u) * 7.2) 1fr auto; align-items: center; gap: calc(var(--u) * 1.6); min-height: calc(var(--u) * 11.4); color: var(--b-ink); }
.isk-hubcard--create .isk-hubcard__bg { background: var(--tex-stripes), var(--tex-squids-k), linear-gradient(165deg, var(--b-light) -40%, var(--b) 42%, var(--b-dark) 110%);
  animation: isk-hub-stripes 2.6s linear infinite; }
.isk-hubcard--create .isk-hubcard__title { color: #fff; }
@keyframes isk-hub-stripes { to { background-position: calc(var(--u) * 3.394) 0, 0 0, 0 0; } }
.isk-hubcard__icon { position: relative; display: grid; place-items: center; width: calc(var(--u) * 7.2); height: calc(var(--u) * 7.2); color: #fff; }
.isk-hubcard__icon > i { position: relative; z-index: 1; width: 56%; height: 56%; transition: transform .45s var(--spring), opacity .25s; }
.isk-hubcard__icon > i svg, .isk-hubcard__spin svg { width: 100%; height: 100%; }
.isk-hubcard__icon > i svg path { stroke: var(--k); stroke-width: 7; paint-order: stroke; }
.isk-hubcard__blob { position: absolute; left: calc(var(--u) * -1.6); top: 50%; width: calc(var(--u) * 12.5); translate: 0 -50%; z-index: 0; pointer-events: none; transition: transform .6s var(--spring2); }
.isk-hubcard__blob svg { width: 100%; height: 100%; animation: isk-spin 40s linear infinite; }
.isk-hubcard__blob svg path, .isk-hubcard__blob svg circle { stroke: var(--k); stroke-width: 5.5; paint-order: stroke; }
.isk-hubcard--create.is-focus .isk-hubcard__blob { transform: scale(1.1) rotate(-14deg); }
.isk-hubcard--create.is-focus .isk-hubcard__icon > i { transform: rotate(-12deg) scale(1.15); }
.isk-hubcard__spin { position: absolute; z-index: 2; inset: 18%; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--spring2); }
.isk-hubcard--create.is-busy .isk-hubcard__icon > i { opacity: 0; transform: scale(.4); }
.isk-hubcard--create.is-busy .isk-hubcard__spin { opacity: 1; transform: none; animation: isk-squid-swim .9s ease-in-out infinite; }
@keyframes isk-squid-swim { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 0 -8%; rotate: 8deg; } }
.isk-hubcard__go { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .45); padding: calc(var(--u) * .7) calc(var(--u) * .9) calc(var(--u) * .6); border-radius: calc(var(--u) * 1.3);
  background: var(--k); color: #fff; rotate: 4deg; box-shadow: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k); transition: background .2s, color .2s, transform .45s var(--spring); }
.isk-hubcard__go b { font: 400 calc(var(--u) * 1.9) / 1 'Titan One', sans-serif; }
.isk-hubcard__go .isk-hint { font-size: calc(var(--u) * .8); }
.isk-hubcard--create.is-focus .isk-hubcard__go { background: var(--hv); color: var(--k); transform: scale(1.12); animation: isk-wobble 1s ease-in-out infinite; }
.isk-hubcard__status { display: block; align-self: flex-start; margin-top: .55em; padding: .35em .7em .38em; border-radius: calc(var(--u) * .4); background: var(--k); color: #fff; font: 800 var(--fs-s) / 1.3 'Rubik', sans-serif; rotate: -1deg; }
.isk-hubcard__status:empty { display: none; }
.isk-hubcard--create.is-busy .isk-hubcard__status::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: isk-ellipsis 1s steps(4) infinite; }
@keyframes isk-ellipsis { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.isk-hubcard.is-err .isk-hubcard__status { background: #ff3d5e; color: #fff; box-shadow: 0 0 0 2.5px var(--k); }
/* join: ink-dark sticker with a squid school; the code is five chunky tiles */
.isk-hubcard--join { cursor: default; padding-bottom: calc(var(--u) * 1.3); }
.isk-hubcard--join .isk-hubcard__bg { background: var(--tex-squids), linear-gradient(170deg, #2e2449, #1c1530); }
.isk-join__head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 1); }
.isk-join__btns { display: flex; gap: calc(var(--u) * .9); padding: 0 calc(var(--u) * .3) calc(var(--u) * .3) 0; }
.isk-code { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 1.1); margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.2); }
.isk-code__box { position: relative; display: grid; place-items: center; height: calc(var(--u) * 7.6); border-radius: calc(var(--u) * 1.2) calc(var(--u) * .8) calc(var(--u) * 1.3) calc(var(--u) * .9); cursor: text;
  background: #120e1c; transform: rotate(calc(var(--tilt) * .4)); box-shadow: inset 0 0 0 calc(var(--u) * .16) rgba(255, 255, 255, .16), inset 0 calc(var(--u) * .5) 0 rgba(0, 0, 0, .5);
  transition: background .2s, box-shadow .2s, transform .4s var(--spring); }
.isk-code__ch, .isk-code__ghost { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(var(--u) * 4.6) / 1 'Titan One', sans-serif; letter-spacing: 0; }
.isk-code__ghost { color: rgba(255, 255, 255, .32); }
.isk-code__box:not(.is-filled)::before { content: ''; position: absolute; inset: calc(var(--u) * .5); border-radius: calc(var(--u) * .7); border: 2px dashed rgba(255, 255, 255, .16); pointer-events: none; }
.isk-code__caret { position: absolute; left: 24%; right: 24%; bottom: 14%; height: calc(var(--u) * .5); border-radius: 999px; background: rgba(255, 255, 255, .2); transition: background .2s; }
.isk-code__box.is-filled { background: #fff; color: var(--k); transform: rotate(var(--tilt)); box-shadow: 0 0 0 var(--ol) var(--k), calc(var(--u) * .3) calc(var(--u) * .42) 0 var(--ol) var(--k), inset 0 calc(var(--u) * -.4) 0 #ddd8ea; }
.isk-code__box.is-filled .isk-code__caret { opacity: 0; }
.isk-hubcard--join:not(.is-entry) .isk-code__box:not(.is-filled) .isk-code__caret { animation: isk-caret-idle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes isk-caret-idle { 50% { background: rgba(255, 255, 255, .5); } }
.isk-code__box.is-caret { background: #1e1830; box-shadow: 0 0 0 var(--ol) var(--hv), 0 0 0 calc(var(--ol) * 2) var(--k); transform: rotate(0deg) translateY(calc(var(--u) * -.4)) scale(1.04); }
.isk-code__box.is-caret.is-filled { background: #fff; box-shadow: 0 0 0 var(--ol) var(--hv), 0 0 0 calc(var(--ol) * 2) var(--k), calc(var(--u) * .3) calc(var(--u) * .5) 0 calc(var(--ol) * 2) var(--k); transform: rotate(0deg) translateY(calc(var(--u) * -.4)) scale(1.07); }
.isk-code__box.is-caret:not(.is-filled) .isk-code__caret { background: var(--hv); animation: isk-caret-blink 1s steps(2) infinite; }
@keyframes isk-caret-blink { 50% { opacity: .15; } }
.isk-code__box.is-pop { animation: isk-code-pop .42s var(--spring2); }
@keyframes isk-code-pop { 0% { scale: .6; rotate: -12deg; } 50% { scale: 1.15; } }
.isk-code__box.is-shake, .isk-code.is-shake { animation: isk-shake .4s; }
.isk-code__box.is-roll-up .isk-code__ch { animation: isk-roll-up .22s var(--out); }
.isk-code__box.is-roll-dn .isk-code__ch { animation: isk-roll-dn .22s var(--out); }
@keyframes isk-roll-up { from { translate: 0 45%; opacity: 0; } }
@keyframes isk-roll-dn { from { translate: 0 -45%; opacity: 0; } }
.isk-code__arr { position: absolute; left: 50%; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); margin-left: calc(var(--u) * -.9); color: var(--hv); opacity: 0; pointer-events: none; transition: opacity .2s; filter: drop-shadow(0 2px 0 var(--k)); }
.isk-code__arr svg { width: 100%; height: 100%; }
.isk-code__arr.is-up { top: calc(var(--u) * -1.55); rotate: -90deg; }
.isk-code__arr.is-dn { bottom: calc(var(--u) * -1.55); rotate: 90deg; }
.isk-ui.is-pad .isk-code__box.is-caret .isk-code__arr { opacity: 1; animation: isk-arr-bob 1s ease-in-out infinite; }
@keyframes isk-arr-bob { 50% { translate: 0 -2px; } }
.isk-code.is-wake .isk-code__box { animation: isk-code-wake .45s var(--spring) backwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes isk-code-wake { 0% { translate: 0 calc(var(--u) * .5); } 40% { translate: 0 calc(var(--u) * -.45); } }
.isk-hubcard--join[data-mode="connecting"] .isk-code__box { animation: isk-code-wave .9s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes isk-code-wave { 0%, 100% { translate: 0 0; } 40% { translate: 0 calc(var(--u) * -.9); } }
.isk-hubcard--join.is-err .isk-code__box.is-filled { background: #ffd2da; color: #8c0a22; box-shadow: 0 0 0 var(--ol) #c01233, calc(var(--u) * .3) calc(var(--u) * .42) 0 var(--ol) var(--k); }
.isk-code.is-yay .isk-code__box { animation: isk-code-pop .5s var(--spring2) backwards; animation-delay: calc(var(--i) * 45ms); }
.isk-join__foot { position: relative; min-height: calc(var(--u) * 2.4); }
.isk-join__hint { display: inline-block; padding: .35em .75em .38em; border-radius: calc(var(--u) * .4); background: var(--k); font: 800 var(--fs-s) / 1.3 'Rubik', sans-serif; color: #fff; rotate: -.8deg; transition: opacity .2s; }
.isk-hubcard--join[data-mode="connecting"] .isk-join__hint { background: var(--hv); color: var(--k); }
.isk-hubcard--join[data-mode="connecting"] .isk-join__hint::after { content: ''; animation: isk-ellipsis 1s steps(4) infinite; }
.isk-jstat { position: relative; isolation: isolate; display: none; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .8) calc(var(--u) * 1.2) calc(var(--u) * .85) calc(var(--u) * .8);
  border-radius: calc(var(--u) * 1) calc(var(--u) * .6) calc(var(--u) * 1.1) calc(var(--u) * .7); background: #ff3d5e var(--tex-squids-k); rotate: -1deg; box-shadow: var(--stk); }
.isk-jstat.is-on { display: flex; }
.isk-jstat.is-on ~ .isk-join__hint, .isk-hubcard--join.is-err .isk-join__hint { display: none; }
.isk-jstat.is-in { animation: isk-jstat-in .5s var(--spring2); }
@keyframes isk-jstat-in { from { opacity: 0; scale: 1.5; rotate: 8deg; } 45% { opacity: 1; } }
.isk-jstat__splat { position: absolute; z-index: -1; left: calc(var(--u) * -1.4); top: 50%; width: calc(var(--u) * 7); translate: 0 -50%; pointer-events: none; }
.isk-jstat__splat svg { width: 100%; height: 100%; }
.isk-jstat__splat svg path, .isk-jstat__splat svg circle { stroke: var(--k); stroke-width: 6; paint-order: stroke; }
.isk-jstat__icon { flex: none; display: grid; place-items: center; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); padding: calc(var(--u) * .6); border-radius: 50%; background: var(--k); color: #fff; box-shadow: 0 0 0 2.5px #fff; rotate: -8deg; }
.isk-jstat__icon svg { width: 100%; height: 100%; }
.isk-jstat__txt { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.isk-jstat__txt b { font: 400 calc(var(--u) * 1.55) / 1 'Titan One', sans-serif; color: #fff; letter-spacing: .02em; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); }
.isk-jstat__txt span { font: 700 var(--fs-s) / 1.3 'Rubik', sans-serif; color: #fff; }
.isk-hubcard--join.is-entry { box-shadow: 0 0 0 var(--ol2) var(--hv), 0 0 0 var(--olx) var(--k), calc(var(--u) * .55) calc(var(--u) * .7) 0 var(--olx) var(--k); transform: rotate(0deg); }
.isk-hubcard--join.is-err.is-entry { box-shadow: 0 0 0 var(--ol2) #ff3d5e, 0 0 0 var(--olx) var(--k), calc(var(--u) * .55) calc(var(--u) * .7) 0 var(--olx) var(--k); }
/* how it works: three little stickers joined by arrows */
.isk-hub__steps { display: flex; gap: calc(var(--u) * 1.7); padding: 0 calc(var(--u) * .4); }
.isk-hubstep { position: relative; flex: 1; display: flex; align-items: center; gap: .5em; padding: .55em .8em .55em .5em; border-radius: calc(var(--u) * .9) calc(var(--u) * .5) calc(var(--u) * 1) calc(var(--u) * .6);
  background: #fff; color: var(--k); font: 800 var(--fs-xs) / 1.15 'Rubik', sans-serif; letter-spacing: .02em; rotate: var(--tilt); box-shadow: var(--stk-k); }
.isk-hubstep > b { position: relative; flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; margin: -.5em 0 -.5em -.3em; }
.isk-hubstep > b svg { position: absolute; inset: -12%; width: 124%; height: 124%; }
.isk-hubstep > b svg path, .isk-hubstep > b svg circle { stroke: var(--k); stroke-width: 7; paint-order: stroke; }
.isk-hubstep > b span { position: relative; font: 400 1.25em / 1 'Titan One', sans-serif; color: var(--a-ink); }
.isk-hubstep > i { flex: none; display: block; width: 1.5em; height: 1.5em; color: var(--k); }
.isk-hubstep > i svg { width: 100%; height: 100%; }
.isk-hubstep:not(:last-child)::after { content: ''; position: absolute; right: calc(var(--u) * -1.45); top: 50%; width: 0; height: 0; margin-top: calc(var(--u) * -.6);
  border-left: calc(var(--u) * .9) solid var(--hv); border-top: calc(var(--u) * .6) solid transparent; border-bottom: calc(var(--u) * .6) solid transparent; filter: drop-shadow(2px 0 0 var(--k)) drop-shadow(0 2px 0 var(--k)); }
/* you (right): player tag with your editable name, then weapon + look tickets under the kid */
.isk-hub__me { position: absolute; inset: 0; pointer-events: none; }
.isk-hub__metag { position: absolute; right: calc(var(--u) * 3.6 + var(--sar)); top: calc(var(--u) * 2.6 + var(--sat)); width: min(calc(var(--u) * 30), 34vw); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .5); pointer-events: auto; }
.isk-hub__metaglbl { --tape: var(--a); margin: 0 calc(var(--u) * 1.6) calc(var(--u) * -.5) 0; z-index: 1; rotate: 2deg; }
.isk-hub__chips { position: absolute; right: calc(var(--u) * 3.6 + var(--sar)); bottom: calc(var(--u) * 6.8 + var(--sab)); display: flex; gap: calc(var(--u) * 1.4); width: min(calc(var(--u) * 40), 44vw); pointer-events: auto; }
.isk-hub__chips .isk-wchip { flex: 1 1 0; min-width: 0; height: calc(var(--u) * 5.6); }
.isk-hub__chips .isk-wchip__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-hub__chips .isk-wchip:first-child { rotate: -1.5deg; }
.isk-hub__chips .isk-wchip:last-child { rotate: 1.5deg; }
.isk-online .isk-prompts.is-entry, .isk-online .isk-prompts.is-busy { display: none; }
.isk-online.is-entry .isk-prompts:not(.is-entry) { display: none; }
.isk-online.is-entry .isk-prompts.is-entry { display: flex; animation: isk-fade .25s; }
.isk-online.is-connecting .isk-prompts:not(.is-busy) { display: none !important; }
.isk-online.is-connecting .isk-prompts.is-busy { display: flex; animation: isk-fade .25s; }

/* ---- weapon / look tickets (hub + lobby bar) */
.isk-online .isk-wchip, .isk-lobby .isk-wchip { position: relative; isolation: isolate; background: var(--tex-grain), #2a2144 var(--tex-squids); border-radius: calc(var(--u) * 1.3) calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * .9);
  box-shadow: var(--stk); transition: transform .4s var(--spring), background .2s; }
.isk-online .isk-wchip__icon, .isk-lobby .isk-wchip__icon { filter: drop-shadow(0 2px 0 var(--k)); }
.isk-online .isk-wchip__text small, .isk-lobby .isk-wchip__text small { align-self: flex-start; padding: .3em .55em .32em; background: var(--k); border-radius: .3em; opacity: 1; font-size: calc(var(--u) * .62); rotate: -2deg; }
.isk-online .isk-wchip__text b, .isk-lobby .isk-wchip__text b { -webkit-text-stroke: .15em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); }
.isk-online .isk-wchip__edit, .isk-lobby .isk-wchip__edit { background: #fff; color: var(--k); box-shadow: 0 0 0 2.5px var(--k); border-radius: 50%; }
.isk-online .isk-wchip.is-focus, .isk-lobby .isk-wchip.is-focus { transform: translateY(calc(var(--u) * -.35)) rotate(0deg) scale(1.04); background-color: #3a2d5c; animation: isk-squish .5s var(--spring2); }
.isk-online .isk-wchip.is-focus .isk-wchip__edit, .isk-lobby .isk-wchip.is-focus .isk-wchip__edit { background: var(--hv); color: var(--k); }
.isk-online .isk-lchip__blob svg path, .isk-lobby .isk-lchip__blob svg path { stroke: var(--k); stroke-width: 5; paint-order: stroke; }

/* ---- player tag: banner art in the owner's ink, title line over a big name, weapon badge on the left end */
.isk-stag { --tc: var(--a); position: relative; isolation: isolate; display: flex; align-items: center; color: #fff;
  border-radius: calc(var(--u) * .9) calc(var(--u) * .6) calc(var(--u) * 1) calc(var(--u) * .7); box-shadow: var(--stk); }
.isk-stag__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--tc); }
.isk-stag__art svg { width: 100%; height: 100%; }
.isk-stag__art::after { content: ''; position: absolute; inset: 0; background: var(--tex-dots), linear-gradient(90deg, rgba(10, 8, 20, .28), rgba(10, 8, 20, 0) 40%); }
.isk-stag__txt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-width: 0; }
.isk-stag__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(var(--u) * .78) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: #fff;
  -webkit-text-stroke: .28em var(--k); paint-order: stroke fill; }
.isk-stag__w { position: absolute; left: calc(var(--u) * -1.3); top: 50%; display: grid; place-items: center; width: calc(var(--u) * 6.2); aspect-ratio: 1; margin-top: calc(var(--u) * -3.1); border-radius: 50%;
  background: var(--k); color: var(--tc); rotate: -10deg; box-shadow: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k); }
.isk-stag__w svg { width: 74%; height: 74%; }
.isk-stag__num { position: absolute; left: calc(var(--u) * 5.6); bottom: calc(var(--u) * .45); font: 900 calc(var(--u) * .66) / 1 'Rubik', sans-serif; letter-spacing: .08em; color: #fff; -webkit-text-stroke: .3em var(--k); paint-order: stroke fill; }
.isk-stag__lv { position: absolute; right: calc(var(--u) * -.9); bottom: calc(var(--u) * -1.1); display: flex; align-items: baseline; gap: .15em; padding: .38em .55em .34em; border-radius: calc(var(--u) * .5);
  background: var(--hv); color: var(--k); font: 400 calc(var(--u) * 1.25) / 1 'Titan One', sans-serif; rotate: 8deg; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.isk-stag__lv small { font: 900 .5em / 1 'Rubik', sans-serif; letter-spacing: .1em; }
.isk-stag.is-pick { animation: isk-squish .5s var(--spring2); }
.isk-stag--big { width: 100%; height: calc(var(--u) * 7.6); padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * 5.6); rotate: -1.5deg; }
.isk-stag--big .isk-stag__title { font-size: calc(var(--u) * .95); }
/* the editable name on your player tag (reuses _nameRow) */
.isk-stag .isk-name { position: relative; width: 100%; padding: 0; gap: 0; background: none; box-shadow: none; border-radius: calc(var(--u) * .6); }
.isk-stag .isk-name__label { display: none; }
.isk-stag .isk-name__input { height: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 2.6); text-align: center; background: transparent; color: #fff;
  font: 400 calc(var(--u) * 2.7) / 1 'Titan One', sans-serif; -webkit-text-stroke: .15em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); caret-color: var(--k); }
.isk-stag .isk-name__pen { right: 0; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); padding: calc(var(--u) * .42); border-radius: 50%; background: #fff; color: var(--k); box-shadow: 0 0 0 2.5px var(--k); }
.isk-stag .isk-name.is-focus .isk-name__pen { background: var(--hv); }
.isk-stag .isk-name.is-editing .isk-name__input { background: #fff; color: var(--k); -webkit-text-stroke: 0 transparent; text-shadow: none; box-shadow: 0 0 0 3px var(--k); }
.isk-stag .isk-name.is-saved { animation: isk-squish .5s var(--spring2); }

/* =====================================================================================
   LOBBY — room code ticket (top left), head-count (top right), host settings (left rail), player tags over the kids,
   your controls on the ink band (bottom)
   ===================================================================================== */
.isk-lob__scrim { position: absolute; inset: 0; pointer-events: none; animation: isk-fade .5s both;
  background: linear-gradient(90deg, rgba(10, 8, 20, .55) 0%, rgba(10, 8, 20, .2) 26%, rgba(10, 8, 20, 0) 36%),
              linear-gradient(180deg, rgba(10, 8, 20, .45) 0%, rgba(10, 8, 20, 0) 20%); }
/* the ink band everything at the bottom stands on */
.isk-lob__band { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 13 + var(--sab)); pointer-events: none; }
.isk-lob__band svg { width: 100%; height: 100%; }
.isk-lob__band path { fill: var(--k); stroke: var(--a); stroke-width: calc(var(--u) * .3); vector-effect: non-scaling-stroke; }
.isk-lob__band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 30%; background: var(--tex-grain), var(--tex-squids); pointer-events: none; }
/* top-left: leave + room code */
.isk-lob__top { position: absolute; left: calc(var(--u) * 3.2 + var(--sal)); top: calc(var(--u) * 2.2 + var(--sat)); display: flex; align-items: flex-start; gap: calc(var(--u) * 1.6); }
.isk-lob__leave { margin-top: calc(var(--u) * 2.2); }
.isk-lob__leavetxt { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; }
.isk-rc { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .9); }
.isk-rc__ticket { position: relative; isolation: isolate; padding: calc(var(--u) * 1.7) calc(var(--u) * 1.4) calc(var(--u) * 1.1) calc(var(--u) * 1.6); rotate: -1.5deg; }
/* notched ticket: the notches are a mask on the fill, the outline + hard shadow follow it via drop-shadows */
.isk-rc__back { position: absolute; inset: 0; z-index: -1;
  filter: drop-shadow(var(--ol) 0 0 var(--k)) drop-shadow(calc(var(--ol) * -1) 0 0 var(--k)) drop-shadow(0 var(--ol) 0 var(--k)) drop-shadow(0 calc(var(--ol) * -1) 0 var(--k)) drop-shadow(calc(var(--u) * .45) calc(var(--u) * .55) 0 var(--k)); }
.isk-rc__back i { position: absolute; inset: 0; border-radius: calc(var(--u) * 1.2);
  background: var(--tex-stripes), var(--tex-squids-k), linear-gradient(170deg, var(--a-light) -40%, var(--a) 45%, var(--a-dark) 120%); animation: isk-hub-stripes 3.2s linear infinite;
  -webkit-mask: radial-gradient(circle at 0 62%, transparent calc(var(--u) * .95), #000 calc(var(--u) * 1)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, transparent calc(var(--u) * .95), #000 calc(var(--u) * 1)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 62%, transparent calc(var(--u) * .95), #000 calc(var(--u) * 1)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, transparent calc(var(--u) * .95), #000 calc(var(--u) * 1)) right / 51% 100% no-repeat; }
.isk-rc__label { --tape: #fff; position: absolute; left: calc(var(--u) * 1.2); top: calc(var(--u) * -1.1); font-size: var(--fs-xs); rotate: -4deg; }
.isk-rc__label > i { color: var(--a); }
.isk-rc__row { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.3); }
.isk-rc__tiles { display: flex; gap: calc(var(--u) * .6); }
.isk-rc__tile { display: grid; place-items: center; width: calc(var(--u) * 4); height: calc(var(--u) * 4.8); border-radius: calc(var(--u) * .9) calc(var(--u) * .6) calc(var(--u) * 1) calc(var(--u) * .7); background: #fff; color: var(--k);
  font: 400 calc(var(--u) * 3.3) / 1 'Titan One', sans-serif; transform: rotate(var(--tilt));
  box-shadow: 0 0 0 var(--ol) var(--k), calc(var(--u) * .25) calc(var(--u) * .38) 0 var(--ol) var(--k), inset 0 calc(var(--u) * -.4) 0 #ddd8ea;
  animation: isk-tile-in .6s var(--spring2) backwards; animation-delay: calc(.25s + var(--i) * 60ms); }
@keyframes isk-tile-in { from { opacity: 0; scale: .3; rotate: -30deg; } }
.isk-rc__tile.is-wave { animation: isk-tile-wave .6s var(--spring) backwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes isk-tile-wave { 0% { translate: 0 0; } 35% { translate: 0 calc(var(--u) * -1.1); scale: 1.1; } }
.isk-rc__copy { position: relative; display: inline-flex; align-items: center; gap: .5em; height: calc(var(--u) * 3.8); padding: 0 .6em 0 .85em; border: 0; border-radius: 999px; background: #fff; color: var(--k); cursor: pointer; pointer-events: auto;
  font: 400 calc(var(--u) * 1.3) / 1 'Titan One', sans-serif; letter-spacing: .04em; rotate: 3deg; box-shadow: var(--stk-k); transition: background .2s, color .2s, transform .35s var(--spring); }
.isk-rc__copy > i { display: block; width: 1.3em; height: 1.3em; }
.isk-rc__copy > i svg { width: 100%; height: 100%; }
.isk-rc__copy .isk-hint { font-size: calc(var(--u) * .8); }
.isk-rc__copy.is-focus, .isk-rc__copy.is-hover { background: var(--hv); transform: translateY(-2px) scale(1.08); }
.isk-rc__copy.is-focus { animation: isk-squish .5s var(--spring2); }
.isk-rc__copied { position: absolute; left: 100%; top: -30%; margin-left: calc(var(--u) * .2); display: inline-flex; align-items: center; gap: .35em; padding: .4em .75em; border-radius: calc(var(--u) * .5);
  background: #3ddc84; color: var(--k); font: 400 calc(var(--u) * 1.2) / 1 'Titan One', sans-serif; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 0 0 2.5px var(--k), 3px 4px 0 2.5px var(--k); opacity: 0; rotate: 8deg; pointer-events: none; }
.isk-rc__copied i { display: block; width: 1.1em; height: 1.1em; }
.isk-rc__copied.is-on { animation: isk-copied 2.1s var(--spring2) forwards; }
@keyframes isk-copied { 0% { opacity: 0; scale: 2; rotate: -20deg; } 12% { opacity: 1; scale: .9; rotate: 10deg; } 22% { scale: 1; rotate: 8deg; } 85% { opacity: 1; } 100% { opacity: 0; translate: 0 -6px; } }
.isk-rc__share { position: relative; isolation: isolate; margin-left: calc(var(--u) * 1.4); padding: .45em .9em .5em; font: 700 var(--fs-xs) / 1.2 'Rubik', sans-serif; color: #fff; rotate: 1deg; }
.isk-rc__share::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--k); clip-path: polygon(1.2% 0, 98.8% 6%, 100% 50%, 98.5% 100%, .8% 92%, 0 48%); }
.isk-rc__share b { font-weight: 900; letter-spacing: .06em; color: var(--hv); }
/* top-right: head count + both teams as squid pips */
.isk-lob__status { position: absolute; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 2.4 + var(--sat)); display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.2) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.3) calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * 1);
  background: var(--tex-grain), var(--tex-squids), var(--k); rotate: 1.4deg; box-shadow: var(--stk); }
.isk-lob__count { display: flex; align-items: baseline; justify-content: flex-end; gap: .3em; }
.isk-lob__count b { font: 400 calc(var(--u) * 3) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; color: var(--hv); -webkit-text-stroke: .1em var(--k); paint-order: stroke fill; }
.isk-lob__count small { font: 400 calc(var(--u) * 1.4) / 1 'Titan One', sans-serif; opacity: .75; }
.isk-lob__count .isk-lob__countlbl { margin-right: auto; align-self: center; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .16em; opacity: 1; }
.isk-lob__teams { display: flex; align-items: center; gap: calc(var(--u) * .4); }
.isk-lob__tline { display: flex; flex-direction: column; gap: calc(var(--u) * .3); }
.isk-lob__tline.is-b { align-items: flex-end; }
.isk-lob__tl { align-self: flex-start; padding: .3em .55em .28em; border-radius: .3em; font: 900 calc(var(--u) * .66) / 1 'Rubik', sans-serif; letter-spacing: .14em; rotate: -3deg; box-shadow: 0 0 0 2px var(--k); }
.isk-lob__tl.is-a { background: var(--ta); color: var(--ta-ink); } .isk-lob__tl.is-b { align-self: flex-end; background: var(--tb); color: var(--tb-ink); rotate: 3deg; }
.isk-lob__vs { position: relative; display: grid; place-items: center; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); margin-top: calc(var(--u) * 1); font-style: normal; }
.isk-lob__vs svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.isk-lob__vs svg path, .isk-lob__vs svg circle { stroke: #fff; stroke-width: 6; paint-order: stroke; }
.isk-lob__vs b { position: relative; font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; color: var(--hv); rotate: -8deg; }
.isk-lob__pips { display: flex; gap: calc(var(--u) * .12); }
.isk-lob__pips i { position: relative; display: block; width: calc(var(--u) * 2.45); height: calc(var(--u) * 2.45); color: #3a3350; transition: color .3s; }
.isk-lob__pips i svg { width: 100%; height: 100%; }
.isk-lob__pips i:nth-child(odd) { rotate: -8deg; } .isk-lob__pips i:nth-child(even) { rotate: 7deg; }
.isk-lob__pips.is-a i.is-on { color: var(--ta); } .isk-lob__pips.is-b i.is-on { color: var(--tb); }
.isk-lob__pips i.is-bot { color: #5d5672; }
.isk-lob__pips i.is-bot::after { content: 'BOT'; position: absolute; left: 50%; bottom: -8%; translate: -50% 0; padding: .1em .2em; border-radius: .25em; background: var(--k); font: 900 calc(var(--u) * .42) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: #cfc8e0; }
.isk-lob__pips i.is-ready::after { content: ''; position: absolute; right: -2%; bottom: 0; width: 30%; height: 30%; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 1.5px var(--k); }
.isk-lob__pips i.is-pop { animation: isk-code-pop .45s var(--spring2); }
.isk-lob__statustxt { align-self: stretch; max-width: calc(var(--u) * 24); padding: .4em .7em .42em; border-radius: calc(var(--u) * .45); background: #2a2144; font: 800 var(--fs-xs) / 1.25 'Rubik', sans-serif; color: #fff; text-align: center; }
.isk-lob__status.is-allready .isk-lob__statustxt { background: var(--hv); color: var(--k); animation: isk-squish .5s var(--spring2); }

/* left: match settings (the host edits, guests read) */
.isk-lob__side { position: absolute; left: calc(var(--u) * 3.4 + var(--sal)); top: calc(var(--u) * 12.9 + var(--sat)); width: calc(var(--u) * 25.2); display: flex; flex-direction: column; }
.isk-lob__sidehead { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: calc(var(--u) * -1.35); padding: 0 calc(var(--u) * .3) 0 calc(var(--u) * .1); }
.isk-lob__mode { flex: none; white-space: nowrap; position: relative; isolation: isolate; display: flex; align-items: center; gap: calc(var(--u) * .45); padding: calc(var(--u) * .2) calc(var(--u) * 1) calc(var(--u) * .25) calc(var(--u) * .3); font-size: calc(var(--u) * 2.05); rotate: -3deg; }
.isk-lob__mode::before { content: ''; position: absolute; z-index: -1; left: calc(var(--u) * 1.4); right: 0; top: 12%; bottom: 8%; background: var(--k);
  clip-path: polygon(0 6%, 97% 0, 100% 30%, 98.5% 60%, 100% 100%, 2% 94%); }
.isk-lob__mode > i { position: relative; display: grid; place-items: center; width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.isk-lob__mode > i svg { position: absolute; inset: -20%; width: 140%; height: 140%; }
.isk-lob__mode > i svg path, .isk-lob__mode > i svg circle { stroke: var(--k); stroke-width: 7; paint-order: stroke; }
.isk-lob__mode > i b { position: relative; width: 58%; height: 58%; color: #fff; }
.isk-lob__mode > i b svg { position: static; width: 100%; height: 100%; }
.isk-lob__mode > i b svg path { stroke: var(--k); stroke-width: 6; }
.isk-lock { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .35em; max-width: 58%; padding: .45em .7em .45em .5em; border-radius: calc(var(--u) * .5); background: var(--k); color: #fff;
  font: 900 calc(var(--u) * .62) / 1 'Rubik', sans-serif; letter-spacing: .1em; white-space: nowrap; overflow: hidden; rotate: 3deg; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4.5px var(--k), 3px 4px 0 4.5px var(--k); }
.isk-lock b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; color: var(--hv); }
.isk-lock i { flex: none; display: block; width: 1.35em; height: 1.35em; color: #fff; }
.isk-lock i svg { width: 100%; height: 100%; }
.isk-lock.is-host { background: #ffd54a; color: var(--k); rotate: 4deg; box-shadow: 0 0 0 2.5px var(--k), 3px 4px 0 2.5px var(--k); animation: isk-medal-stamp .6s var(--spring2) .4s backwards; }
.isk-lock.is-host i { color: var(--k); }
.isk-lobby:not(.is-host) .isk-lock.is-host, .isk-lobby.is-host .isk-lock:not(.is-host) { display: none; }
.isk-lset__panel { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: calc(var(--u) * .34); padding: calc(var(--u) * 1.75) calc(var(--u) * .75) calc(var(--u) * .75);
  border-radius: calc(var(--u) * 1.4) calc(var(--u) * .9) calc(var(--u) * 1.6) calc(var(--u) * 1) / calc(var(--u) * 1) calc(var(--u) * 1.5) calc(var(--u) * 1) calc(var(--u) * 1.4);
  background: var(--tex-grain), var(--tex-squids), linear-gradient(175deg, #2d2349, #1b1430); rotate: -.8deg; box-shadow: var(--stk); }
.isk-lset__drips { position: absolute; z-index: -1; left: 6%; right: 10%; top: calc(100% + var(--olx) - 2px); height: calc(var(--u) * 2.4); pointer-events: none; }
.isk-lset__drips svg { width: 100%; height: 100%; overflow: visible; }
.isk-lset { display: flex; flex-direction: column; gap: calc(var(--u) * .32); padding: calc(var(--u) * .26) calc(var(--u) * .45) calc(var(--u) * .34); border-radius: calc(var(--u) * .9); transition: background .2s, transform .35s var(--spring), opacity .25s; }
.isk-lset__label { display: flex; align-items: center; gap: .45em; font: 400 calc(var(--u) * .98) / 1 'Titan One', sans-serif; letter-spacing: .03em; color: #fff; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.isk-lset__label > i { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; padding: .22em; border-radius: 50%; background: var(--a); color: var(--k); box-shadow: 0 0 0 2px var(--k); }
.isk-lset__label > i svg { width: 100%; height: 100%; }
.isk-lset__note { margin-left: auto; padding: .3em .5em; border-radius: .35em; background: var(--k); font: 800 calc(var(--u) * .62) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 0; }
.isk-lset .isk-seg { width: 100%; }
.isk-lset.is-focus { background: rgba(227, 255, 46, .1); transform: translateX(calc(var(--u) * .3)); animation: isk-squish .45s var(--spring2); }
.isk-lset.is-off { opacity: .45; }
.isk-lset.is-flash { animation: isk-lset-flash .9s; }
@keyframes isk-lset-flash { 15% { background: rgba(227, 255, 46, .35); scale: 1.03; } }
.isk-lobby:not(.is-host) .isk-lset { pointer-events: none; }
.isk-lobby:not(.is-host) .isk-lset .isk-seg__opt:not(.is-sel) { opacity: .4; }
.isk-lobby:not(.is-host) .isk-lstage__arrows { display: none; }
.isk-lobby:not(.is-host) .isk-lset__panel { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 calc(var(--u) * .8), transparent calc(var(--u) * .8) calc(var(--u) * 1.6)), var(--tex-squids), linear-gradient(175deg, #2a2240, #19132b); }
/* chunky segmented toggles: ink track, a fat outlined pill slides between options */
.isk-online .isk-seg, .isk-lobby .isk-seg { padding: calc(var(--u) * .32); background: var(--k); box-shadow: 0 0 0 calc(var(--u) * .14) rgba(255, 255, 255, .22), inset 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .5); }
.isk-lobby .isk-seg__hl { top: calc(var(--u) * .32); bottom: calc(var(--u) * .32); left: calc(var(--u) * .32); width: calc((100% - var(--u) * .64) / var(--n));
  background: var(--tex-stripes), linear-gradient(180deg, var(--a-light) -40%, var(--a) 50%); box-shadow: 0 0 0 calc(var(--u) * .16) var(--k), inset 0 calc(var(--u) * -.25) 0 rgba(0, 0, 0, .18); }
.isk-lobby .isk-seg__opt { padding: calc(var(--u) * .46) calc(var(--u) * .25); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: #fff; }
.isk-lobby .isk-seg__opt.is-sel { color: var(--a-ink); }
.isk-lset__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .45); }
.isk-lset__pair .isk-lset .isk-seg__opt { padding: calc(var(--u) * .46) calc(var(--u) * .12); letter-spacing: .02em; }
.isk-lset__pair .isk-segico { gap: .3em; }
.isk-lset__pair .isk-segico i { width: 1.2em; height: 1.2em; }
/* ink palette: pairs of ink drops */
.isk-palopt { display: inline-flex; align-items: center; }
.isk-palopt i { display: block; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: 0 0 0 2px var(--k); }
.isk-palopt i + i { margin-left: calc(var(--u) * -.3); rotate: -45deg; translate: 0 calc(var(--u) * .2); }
.isk-lset--pal .isk-seg__opt { padding: calc(var(--u) * .4) 0; }
.isk-lset--pal .isk-seg__hl { background: #fff; }
.isk-lset--pal .isk-lset__note { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isk-lset--pal .isk-lset__label { flex-wrap: nowrap; }
/* FILL WITH BOTS: a fat switch with an outlined knob */
.isk-lset--bots { flex-direction: row; align-items: center; justify-content: space-between; }
.isk-lset--bots .isk-lset__label { flex: 1; flex-wrap: wrap; row-gap: .35em; }
.isk-lobby .isk-toggle { width: calc(var(--u) * 6.8); height: calc(var(--u) * 2.7); background: var(--k); box-shadow: 0 0 0 calc(var(--u) * .14) rgba(255, 255, 255, .22), inset 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .5); }
.isk-lobby .isk-toggle.is-on { background: var(--tex-stripes), linear-gradient(180deg, var(--a-light) -40%, var(--a) 50%); box-shadow: 0 0 0 calc(var(--u) * .16) var(--k), 0 0 0 calc(var(--u) * .3) rgba(255, 255, 255, .8); }
.isk-lobby .isk-toggle__knob { top: calc(var(--u) * .3); left: calc(var(--u) * .35); width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); box-shadow: 0 0 0 calc(var(--u) * .2) var(--k), 0 calc(var(--u) * .2) 0 calc(var(--u) * .2) var(--k); }
.isk-lobby .isk-toggle.is-on .isk-toggle__knob { transform: translateX(calc(var(--u) * 4)); }
.isk-lobby .isk-toggle__txt { font: 400 calc(var(--u) * .95) / 1 'Titan One', sans-serif; letter-spacing: .04em; }
.isk-lobby .isk-toggle__on { color: var(--a-ink); }
.isk-lobby .isk-toggle.is-flip .isk-toggle__knob { animation: isk-knob .35s var(--spring); }
/* stage ticket */
.isk-lstage { position: relative; display: block; height: calc(var(--u) * 5); border-radius: calc(var(--u) * 1) calc(var(--u) * .6) calc(var(--u) * 1.1) calc(var(--u) * .7); overflow: hidden; isolation: isolate; background: #20325a;
  box-shadow: 0 0 0 calc(var(--u) * .18) #fff, 0 0 0 calc(var(--u) * .4) var(--k); }
.isk-lstage__imgs { position: absolute; inset: 0; }
.isk-lstage__img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; display: block; animation: isk-ss-kb 18s ease-in-out infinite alternate; }
.isk-lstage__fb svg { width: 100%; height: 100%; }
.isk-lstage__img.is-slide { animation: isk-lstage-slide .5s var(--out) both, isk-ss-kb 18s ease-in-out infinite alternate; }
@keyframes isk-lstage-slide { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.isk-lstage__img.is-slide[style*="--dir: -1"] { animation-name: isk-lstage-slide-l, isk-ss-kb; }
@keyframes isk-lstage-slide-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.isk-lstage__img.is-fade { animation: isk-fade .45s both, isk-ss-kb 18s ease-in-out infinite alternate; }
.isk-lstage__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 9, 22, .7) 0%, rgba(12, 9, 22, 0) 55%); }
.isk-lstage__num { position: absolute; left: calc(var(--u) * .6); top: calc(var(--u) * .55); display: flex; align-items: baseline; gap: .35em; padding: .4em .6em .36em; border-radius: calc(var(--u) * .4);
  background: var(--k); font: 900 calc(var(--u) * .58) / 1 'Rubik', sans-serif; letter-spacing: .14em; rotate: -3deg; }
.isk-lstage__num b { font: 400 calc(var(--u) * .95) / 1 'Titan One', sans-serif; color: var(--hv); letter-spacing: .02em; }
.isk-lstage__num em { font-style: normal; opacity: .6; }
.isk-lstage__tape { position: absolute; left: calc(var(--u) * .6); bottom: calc(var(--u) * .65); right: calc(var(--u) * 3.6); }
.isk-lstage__name { display: inline-block; max-width: 100%; padding: .32em .6em .38em; background: var(--k); border-radius: calc(var(--u) * .25); transform: rotate(-2deg);
  box-shadow: calc(var(--u) * .25) calc(var(--u) * .25) 0 var(--a); font: 400 calc(var(--u) * 1.35) / 1 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-lstage__name.is-in { animation: isk-ss-tape .45s var(--spring); }
.isk-lstage__time { position: absolute; right: calc(var(--u) * .55); bottom: calc(var(--u) * .5); display: grid; place-items: center; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%; overflow: hidden;
  background: var(--k); box-shadow: 0 0 0 2px #fff; transition: background .3s; }
.isk-lstage__time i { position: absolute; width: 62%; height: 62%; transition: transform .5s var(--spring2), opacity .25s; }
.isk-lstage__time i svg { width: 100%; height: 100%; }
.isk-lstage__time .is-sun { color: #ffd45a; }
.isk-lstage__time .is-moon { color: #ffe8b8; opacity: 0; transform: translateY(120%) rotate(60deg); }
.isk-lstage[data-time="dusk"] .isk-lstage__time { background: #3c1850; }
.isk-lstage[data-time="dusk"] .isk-lstage__time .is-sun { opacity: 0; transform: translateY(120%) rotate(-60deg); }
.isk-lstage[data-time="dusk"] .isk-lstage__time .is-moon { opacity: 1; transform: none; }
.isk-lstage__arrows { position: absolute; right: calc(var(--u) * .5); top: calc(var(--u) * .5); display: flex; gap: calc(var(--u) * .35); }
.isk-lstage__arrows i { display: grid; place-items: center; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); padding: calc(var(--u) * .45); border-radius: 50%; background: #fff; color: var(--k); cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 2.5px var(--k), 1px 3px 0 2.5px var(--k); transition: background .2s, transform .3s var(--spring); }
.isk-lstage__arrows i svg { width: 100%; height: 100%; }
.isk-lstage__arrows i:hover { background: var(--hv); transform: scale(1.15); }
.isk-lset--stage.is-focus .isk-lstage__arrows i { background: var(--hv); }
.isk-lstage.is-hit { animation: isk-ss-hit .5s var(--spring); }
/* stage rules sticker (ONLINE ONLY · NO BOTS — config onlineOnly / noBots): slapped across the ticket's top edge */
.isk-lset--stage .isk-lset__label { position: relative; z-index: 2; }
.isk-lstage__rules { display: none; align-items: center; gap: .4em; margin-left: auto; padding: .42em .65em .38em .5em; border-radius: .45em; background: #ffd54a; color: var(--k);
  font: 900 calc(var(--u) * .58) / 1 'Rubik', sans-serif; letter-spacing: .09em; white-space: nowrap; -webkit-text-stroke: 0; rotate: 3deg; translate: 0 calc(var(--u) * .55);
  box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.isk-lstage__rules i { flex: none; display: block; width: 1.3em; height: 1.3em; }
.isk-lstage__rules i svg { width: 100%; height: 100%; }
.isk-lstage__rules b { font-weight: 900; }
.isk-lset--stage.has-rules .isk-lstage__rules { display: inline-flex; animation: isk-medal-stamp .6s var(--spring2); }
/* humans-only stage: FILL WITH BOTS is locked off (the note says why) */
.isk-lset--bots.is-locked .isk-toggle { opacity: .4; filter: grayscale(1); pointer-events: none; }
.isk-lset--bots.is-locked .isk-lset__note { background: #ffd54a; color: var(--k); rotate: -2deg; box-shadow: 0 0 0 2px var(--k); }
.isk-lset.is-shake { animation: isk-shake .4s; }

/* bottom: your controls, standing on the ink band */
.isk-lob__bar { position: absolute; left: calc(var(--u) * 3.4 + var(--sal)); right: calc(var(--u) * 3.4 + var(--sar)); bottom: calc(var(--u) * 5.9 + var(--sab)); display: flex; align-items: center; gap: calc(var(--u) * 1.4); --sh: #3a2d5c; }
.isk-lob__you { display: flex; gap: calc(var(--u) * 1); min-width: 0; }
.isk-lob__bar .isk-wchip { flex: none; height: calc(var(--u) * 5); gap: calc(var(--u) * .7); padding: 0 calc(var(--u) * .9) 0 calc(var(--u) * .7); }
.isk-lob__wchip { width: calc(var(--u) * 17.5); rotate: -1.5deg; }
.isk-lob__bar .isk-wchip__icon { width: calc(var(--u) * 4.6); height: calc(var(--u) * 3.6); }
.isk-lob__bar .isk-lchip__av { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
.isk-lob__bar .isk-wchip__text { min-width: 0; }
.isk-lob__bar .isk-wchip__text b { font-size: calc(var(--u) * 1.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isk-lob__bar .isk-wchip__edit { padding: .45em; }
.isk-lob__bar .isk-wchip.is-pick { animation: isk-pick .5s var(--spring); }
.isk-lob__bar .isk-lob__lchip { position: relative; width: calc(var(--u) * 5.6); padding: 0; justify-content: center; rotate: 2deg; }
.isk-lob__bar .isk-lob__lchip .isk-lchip__av { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); margin-top: calc(var(--u) * -.6); }
.isk-lob__lbadge { position: absolute; right: calc(var(--u) * -.5); top: calc(var(--u) * -.6); display: grid; place-items: center; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); padding: calc(var(--u) * .3); border-radius: 50%;
  background: #fff; color: var(--k); box-shadow: 0 0 0 2.5px var(--k); transition: background .2s, color .2s; }
.isk-lob__lbadge svg { width: 100%; height: 100%; }
.isk-lob__llbl { position: absolute; left: 50%; bottom: calc(var(--u) * -.55); translate: -50% 0; padding: .25em .45em; border-radius: .3em; background: var(--k); font: 900 calc(var(--u) * .55) / 1 'Rubik', sans-serif; letter-spacing: .14em; }
.isk-lob__lchip.is-focus .isk-lob__lbadge, .isk-lob__lchip.is-hover .isk-lob__lbadge { background: var(--hv); }
.isk-lob__team { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * .4); padding: calc(var(--u) * .35) calc(var(--u) * .5); border-radius: calc(var(--u) * 1); transition: background .2s; }
.isk-lob__team.is-focus { animation: isk-squish .45s var(--spring2); }
.isk-lob__team.is-shake { animation: isk-shake .4s; }
.isk-lob__barlbl { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 calc(var(--u) * .3); font: 400 calc(var(--u) * 1) / 1 'Titan One', sans-serif; letter-spacing: .04em; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.isk-lob__barlbl .isk-hint { font-size: calc(var(--u) * .78); -webkit-text-stroke: 0; }
.isk-lob__team .isk-seg { width: calc(var(--u) * 22.5); }
.isk-lob__team .isk-seg__opt { padding: calc(var(--u) * .55) calc(var(--u) * .2); }
.isk-teamopt { display: inline-flex; align-items: center; gap: .45em; }
.isk-teamopt i { display: block; width: 1em; height: 1em; border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: 0 0 0 2px var(--k); }
.isk-teamopt i svg { width: 100%; height: 100%; rotate: 45deg; }
.isk-teamopt.is-a i { background: var(--ta); } .isk-teamopt.is-b i { background: var(--tb); }
.isk-teamopt:not(.is-a):not(.is-b) i { box-shadow: none; border-radius: 0; rotate: 0deg; }
.isk-teamopt:not(.is-a):not(.is-b) i svg { rotate: 0deg; }
.isk-lob__team .isk-seg__hl { background: #fff; }
.isk-lob__team .isk-seg__opt.is-sel { color: var(--k); }
.isk-lob__team[data-pick="0"] .isk-seg__hl { background: var(--tex-stripes), linear-gradient(180deg, var(--ta-light) -40%, var(--ta) 50%); }
.isk-lob__team[data-pick="1"] .isk-seg__hl { background: var(--tex-stripes), linear-gradient(180deg, var(--tb-light) -40%, var(--tb) 50%); }
.isk-lob__team[data-pick="0"] .isk-seg__opt.is-sel { color: var(--ta-ink); }
.isk-lob__team[data-pick="1"] .isk-seg__opt.is-sel { color: var(--tb-ink); }
.isk-lob__team[data-pick="0"] .isk-seg__opt.is-sel .isk-teamopt i, .isk-lob__team[data-pick="1"] .isk-seg__opt.is-sel .isk-teamopt i { box-shadow: 0 0 0 2px #fff; }
.isk-lob__emote { position: relative; display: flex; align-items: center; gap: .55em; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * .7); border: 0; border-radius: 999px; overflow: visible; isolation: isolate;
  background: #2a2144 var(--tex-squids); color: #fff; cursor: pointer; pointer-events: auto; font: 400 calc(var(--u) * 1.45) / 1 'Titan One', sans-serif; letter-spacing: .02em; rotate: -2deg;
  box-shadow: var(--stk); transition: transform .4s var(--spring), background .2s, color .2s; }
.isk-lob__emoteico { display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 3); color: #ffd54a; transition: transform .45s var(--spring); }
.isk-lob__emoteico svg { width: 100%; height: 100%; }
.isk-lob__emoteico svg circle:first-child { stroke: var(--k); stroke-width: 4; }
.isk-lob__emotekeys { font-size: calc(var(--u) * .8); }
.isk-lob__emotekeys em { font-style: normal; margin: 0 .15em; opacity: .7; }
.isk-lob__emote.is-focus, .isk-lob__emote.is-hover { background: #ffd54a; color: var(--k); transform: translateY(calc(var(--u) * -.3)) scale(1.04); }
.isk-lob__emote.is-focus { animation: isk-squish .5s var(--spring2); }
.isk-lob__emote.is-focus .isk-lob__emoteico, .isk-lob__emote.is-hover .isk-lob__emoteico { color: #fff; transform: rotate(-16deg) scale(1.18); }
.isk-lob__emote.is-shake { animation: isk-shake .35s; }
.isk-lob__cd { position: absolute; left: 12%; bottom: calc(var(--u) * -.2); height: calc(var(--u) * .35); border-radius: 999px; width: calc(var(--cd, 0) * 76%); background: #ffd54a; box-shadow: 0 0 0 2px var(--k); z-index: 1; }
.isk-lob__grow { flex: 1; min-width: 0; }
/* READY? / START! — the loud one: high-vis lime, scrolling stripes, wobbles when focused */
.isk-btn__key { position: absolute; right: calc(var(--u) * .9); top: calc(var(--u) * .6); font-size: calc(var(--u) * .8); }
.isk-btn--ready, .isk-btn--lobstart { flex: none; width: calc(var(--u) * 23); height: calc(var(--u) * 5.2); font-size: calc(var(--u) * 2.55); overflow: hidden;
  border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.1) calc(var(--u) * 2) calc(var(--u) * 1.3) / calc(var(--u) * 1.5) calc(var(--u) * 1.9) calc(var(--u) * 1.3) calc(var(--u) * 1.8);
  --bg: var(--hv); --fill: #f7ffb0; --fill-ink: var(--k); color: var(--k); --tilt: -2deg;
  box-shadow: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k), calc(var(--u) * .45) calc(var(--u) * .55) 0 var(--olx) var(--hv-deep); }
.isk-btn--ready::before, .isk-btn--lobstart::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--tex-stripes); background-size: calc(var(--u) * 3.394) 100%;
  animation: isk-btn-stripes 1.6s linear infinite; }
@keyframes isk-btn-stripes { to { background-position: calc(var(--u) * 3.394) 0; } }
.isk-btn--ready .isk-btn__label, .isk-btn--lobstart .isk-btn__label { letter-spacing: .03em; }
.isk-btn--ready .isk-btn__icon svg, .isk-btn--lobstart .isk-btn__icon svg { filter: none; }
.isk-btn--ready .isk-btn__sub, .isk-btn--lobstart .isk-btn__sub { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; opacity: 1; max-width: calc(var(--u) * 16); overflow: hidden; text-overflow: ellipsis; }
.isk-btn--ready.is-focus, .isk-btn--lobstart.is-focus { transform: rotate(var(--tilt)) scale(1.06); animation: isk-squish .5s var(--spring2), isk-wobble 1.3s ease-in-out .5s infinite; }
.isk-btn--ready:not(.is-on):not(.is-focus) { animation: isk-ready-breathe 1.8s ease-in-out infinite; }
@keyframes isk-ready-breathe { 50% { scale: 1.035; } }
.isk-btn--ready.is-on { --bg: #3ddc84; --fill: #fff; --fill-ink: #0b3d20; color: #0b3d20; box-shadow: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k), calc(var(--u) * .45) calc(var(--u) * .55) 0 var(--olx) #0f6b37; }
.isk-btn--ready.is-on::before { animation: none; opacity: .5; }
.isk-ready__stamp { position: absolute; right: calc(var(--u) * 1.3); bottom: calc(var(--u) * .5); width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); padding: calc(var(--u) * .5); border-radius: 50%; background: #fff; color: #169c52;
  box-shadow: 0 0 0 calc(var(--u) * .2) var(--k); opacity: 0; scale: 2.2; rotate: -40deg; transition: opacity .15s, scale .45s var(--spring2), rotate .45s var(--spring2); }
.isk-ready__stamp svg { width: 100%; height: 100%; }
.isk-btn--ready.is-on .isk-ready__stamp { opacity: 1; scale: 1; rotate: -12deg; }
.isk-btn--ready.is-on .isk-btn__key { opacity: 0; }
.isk-lobby.is-host .isk-btn--ready, .isk-lobby:not(.is-host) .isk-btn--lobstart { display: none; }
.isk-btn--lobstart .isk-start__chev { top: 64%; }
.isk-btn--lobstart.is-blocked { --bg: #3b3352; --fill: #fff; --fill-ink: var(--k); color: #fff; box-shadow: 0 0 0 var(--ol2) rgba(255, 255, 255, .7), 0 0 0 var(--olx) var(--k), calc(var(--u) * .45) calc(var(--u) * .55) 0 var(--olx) #1c1530; }
.isk-btn--lobstart.is-blocked::before { animation: none; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2.4)); }
.isk-btn--lobstart.is-blocked .isk-start__chev { display: none; }
.isk-btn--lobstart.is-blocked .isk-btn__label { -webkit-text-stroke: .14em var(--k); paint-order: stroke fill; }
.isk-btn--lobstart.is-blocked .isk-btn__icon { animation: none; opacity: .6; }
.isk-btn--lobstart.is-blocked.is-focus { color: var(--k); }
.isk-btn--lobstart.is-blocked.is-focus .isk-btn__label { -webkit-text-stroke: 0 transparent; }
.isk-btn--lobstart.is-blocked.is-focus .isk-btn__icon { opacity: .8; }
.isk-btn.is-shake { animation: isk-shake .4s; }

/* nameplates over the line-up: compact player tags */
.isk-lob__plates { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }   /* plate z-order stays inside (modals, wheel, drawer above) */
.isk-plate { --tc: var(--a); position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.isk-plate__stack { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .55); translate: -50% 0; transform-origin: 50% 100%;
  opacity: 0; scale: .3; transition: opacity .18s, scale .5s var(--spring2); }
.isk-plate.is-on .isk-plate__stack { opacity: 1; scale: 1; }
.isk-plate__tag.isk-stag { height: calc(var(--u) * 3); min-width: calc(var(--u) * 7.2); max-width: calc(var(--u) * 10.6); padding: 0 calc(var(--u) * .7) 0 calc(var(--u) * 2.35); white-space: nowrap; rotate: -2.5deg;
  box-shadow: 0 0 0 calc(var(--u) * .13) #fff, 0 0 0 calc(var(--u) * .32) var(--k), calc(var(--u) * .28) calc(var(--u) * .36) 0 calc(var(--u) * .32) var(--k); }
.isk-plate:nth-child(even) .isk-plate__tag { rotate: 2deg; }
.isk-plate__tag .isk-stag__title { display: none; }
.isk-plate__tag .isk-stag__art::after { background: var(--tex-dots); }
.isk-plate__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 400 calc(var(--u) * 1.3) / 1.12 'Titan One', sans-serif; letter-spacing: .01em; color: #fff; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.isk-plate.is-long .isk-plate__name { font-size: calc(var(--u) * .98); }
.isk-plate.is-xlong .isk-plate__name { font-size: calc(var(--u) * .84); }
.isk-plate__w { position: absolute; left: calc(var(--u) * -.75); top: 50%; display: grid; place-items: center; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); margin-top: calc(var(--u) * -1.45); border-radius: 50%;
  background: var(--k); color: var(--tc); rotate: -10deg; box-shadow: 0 0 0 calc(var(--u) * .13) #fff, 0 0 0 calc(var(--u) * .32) var(--k); }
.isk-plate__w svg { width: 76%; height: 76%; }
.isk-plate__w.is-pop { animation: isk-code-pop .45s var(--spring2); }
.isk-plate__crown { display: none; position: absolute; left: calc(var(--u) * -1); top: calc(var(--u) * -1.9); width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); color: #ffd54a; rotate: -20deg; }
.isk-plate__crown svg { width: 100%; height: 100%; }
.isk-plate__crown svg path { stroke: var(--k); stroke-width: 9; paint-order: stroke; }
.isk-plate.is-host .isk-plate__crown { display: block; }
.isk-plate__crown.is-stamp { animation: isk-medal-stamp .6s var(--spring2); }
.isk-plate__you { display: none; position: absolute; right: calc(var(--u) * -.6); top: calc(var(--u) * -1.1); padding: .3em .45em .26em; border-radius: .35em; background: var(--hv); color: var(--k); font: 400 calc(var(--u) * .8) / 1 'Titan One', sans-serif; letter-spacing: .04em;
  rotate: 10deg; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.isk-plate.is-you .isk-plate__you { display: block; }
.isk-plate.is-you .isk-plate__tag.isk-stag { height: calc(var(--u) * 3.3); min-width: calc(var(--u) * 8); max-width: calc(var(--u) * 10.6);
  box-shadow: 0 0 0 calc(var(--u) * .16) var(--hv), 0 0 0 calc(var(--u) * .36) var(--k), calc(var(--u) * .3) calc(var(--u) * .4) 0 calc(var(--u) * .36) var(--k); }
.isk-plate.is-you .isk-plate__name { font-size: calc(var(--u) * 1.42); }
.isk-plate.is-you .isk-plate__ping { display: none; }
.isk-plate.is-you.is-long .isk-plate__name { font-size: calc(var(--u) * 1.1); }
.isk-plate.is-you.is-xlong .isk-plate__name { font-size: calc(var(--u) * .9); }
.isk-plate.is-you .isk-plate__stack::after { content: ''; order: 9; width: 0; height: 0; margin-top: calc(var(--u) * -.1); border-left: calc(var(--u) * .75) solid transparent; border-right: calc(var(--u) * .75) solid transparent; border-top: calc(var(--u) * .9) solid var(--hv);
  filter: drop-shadow(0 2.5px 0 var(--k)) drop-shadow(2px 0 0 var(--k)) drop-shadow(-2px 0 0 var(--k)); animation: isk-you-bob 1.1s ease-in-out infinite; }
@keyframes isk-you-bob { 50% { translate: 0 calc(var(--u) * .35); } }
.isk-plate__ping { position: absolute; right: calc(var(--u) * .3); top: calc(var(--u) * .3); display: flex; align-items: flex-end; gap: 1.5px; height: calc(var(--u) * .8); padding: 2px 3px; border-radius: 3px; background: var(--k); box-sizing: content-box; }
.isk-plate__ping i { display: block; width: calc(var(--u) * .24); border-radius: 1px; background: rgba(255, 255, 255, .22); }
.isk-plate__ping i:nth-child(1) { height: 40%; } .isk-plate__ping i:nth-child(2) { height: 70%; } .isk-plate__ping i:nth-child(3) { height: 100%; }
.isk-plate__ping[data-q="0"] { display: none; }
.isk-plate__ping[data-q="3"] i { background: #6dffa8; }
.isk-plate__ping[data-q="2"] i:nth-child(-n+2) { background: #ffd54a; }
.isk-plate__ping[data-q="1"] i:nth-child(1) { background: #ff6a80; }
.isk-plate__ready { display: none; position: absolute; right: calc(var(--u) * -.8); bottom: calc(var(--u) * -1.05); align-items: center; gap: .25em; padding: .32em .5em .3em .35em; border-radius: calc(var(--u) * .45);
  background: #3ddc84; color: var(--k); font: 400 calc(var(--u) * .68) / 1 'Titan One', sans-serif; letter-spacing: .03em; rotate: -9deg; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.isk-plate__ready i { display: block; width: 1.15em; height: 1.15em; }
.isk-plate__ready i svg { width: 100%; height: 100%; }
.isk-plate.is-ready:not(.is-hostready) .isk-plate__ready { display: inline-flex; }
.isk-plate__ready.is-stamp { animation: isk-medal-stamp .55s var(--spring2); }
.isk-plate__bubble { order: -1; position: relative; display: flex; align-items: center; gap: .35em; padding: .38em .7em .42em .5em; border-radius: calc(var(--u) * .9) calc(var(--u) * .7) calc(var(--u) * 1) calc(var(--u) * .6); background: #fff; color: var(--k); white-space: nowrap;
  font: 400 calc(var(--u) * 1.2) / 1 'Titan One', sans-serif; box-shadow: 0 0 0 3px var(--k), 3px 4px 0 3px var(--k); opacity: 0; scale: 0; rotate: -6deg; transform-origin: 50% 120%; }
.isk-plate__bubble i { display: block; width: 1.35em; height: 1.35em; color: var(--tc-dark, var(--k)); }
.isk-plate__bubble i svg { width: 100%; height: 100%; }
.isk-plate__bubble::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--u) * -.55); width: calc(var(--u) * .85); height: calc(var(--u) * .85); margin-left: calc(var(--u) * -.42); background: #fff; rotate: 45deg; box-shadow: 3px 3px 0 var(--k); }
.isk-plate__bubble.is-on { animation: isk-bubble 1.9s var(--spring2) forwards; }
@keyframes isk-bubble { 0% { opacity: 0; scale: .2; rotate: -24deg; } 14% { opacity: 1; scale: 1.15; rotate: 4deg; } 24% { scale: 1; rotate: -5deg; } 86% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .8; translate: 0 -8px; } }
/* open slots: dashed ghost tags */
.isk-plate__ghost { position: relative; display: flex; align-items: center; gap: .35em; padding: .4em .8em .42em .5em; border-radius: calc(var(--u) * .6); background: #1c1630; color: rgba(255, 255, 255, .72);
  font: 900 calc(var(--u) * .8) / 1 'Rubik', sans-serif; letter-spacing: .12em; rotate: -2deg; box-shadow: 0 0 0 2.5px var(--k); }
.isk-plate__ghost::before { content: ''; position: absolute; inset: 3px; border-radius: inherit; border: 2px dashed rgba(255, 255, 255, .35); }
.isk-plate__plus { display: block; width: 1.3em; height: 1.3em; }
.isk-plate__plus svg { width: 100%; height: 100%; }
.isk-plate.is-open.is-on .isk-plate__stack { opacity: .92; animation: isk-open-bob 3s ease-in-out infinite; }
@keyframes isk-open-bob { 50% { translate: -50% calc(var(--u) * -.25); } }
.isk-plate.is-open.is-bot .isk-plate__ghost { color: rgba(255, 255, 255, .55); }

/* emote wheel */
.isk-emowheel { position: absolute; inset: 0; z-index: 42; animation: isk-fade .15s both; }
.isk-emowheel.is-leaving { animation: isk-fade-out .18s forwards; pointer-events: none; }
.isk-emowheel__card { position: absolute; width: calc(var(--u) * 25); height: calc(var(--u) * 19.5); translate: -50% calc(-100% - var(--u) * 1.3); }
.isk-emowheel__card::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); translate: -50% -50%; border-radius: 47% 53% 44% 56% / 52% 45% 55% 48%;
  background: var(--tex-squids), var(--k); box-shadow: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k); animation: isk-pop .35s var(--spring) both; }
.isk-emowheel__hub { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); translate: -50% -50%; color: #ffd54a; animation: isk-pop .4s var(--spring2) both; }
.isk-emowheel__hub svg { width: 100%; height: 100%; }
.isk-emo { position: absolute; display: flex; align-items: center; gap: .5em; height: calc(var(--u) * 4.3); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * .7); border: 0; border-radius: 999px; background: #fff; color: var(--k); cursor: pointer; pointer-events: auto;
  font: 400 calc(var(--u) * 1.4) / 1 'Titan One', sans-serif; white-space: nowrap; box-shadow: var(--stk-k);
  translate: -50% -50%; animation: isk-emo-in .45s var(--spring2) backwards; transition: transform .35s var(--spring), background .2s; }
.isk-emo > i { display: block; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); color: var(--a-dark); }
.isk-emo > i svg { width: 100%; height: 100%; }
.isk-emo__key { font-size: calc(var(--u) * .78); }
.isk-emo--up { left: 50%; top: 11%; animation-delay: 0ms; rotate: -3deg; }
.isk-emo--right { left: 88%; top: 50%; animation-delay: 40ms; rotate: 3deg; }
.isk-emo--down { left: 50%; top: 89%; animation-delay: 80ms; rotate: 2deg; }
.isk-emo--left { left: 12%; top: 50%; animation-delay: 120ms; rotate: -2deg; }
@keyframes isk-emo-in { from { opacity: 0; scale: .3; } }
.isk-emo.is-focus, .isk-emo.is-hover { background: var(--hv); transform: scale(1.12); }
.isk-dpad { width: 1.9em; height: 1.9em; }
.isk-dpad svg { width: 70%; height: 70%; }
.isk-dpad--up svg { rotate: -90deg; } .isk-dpad--down svg { rotate: 90deg; } .isk-dpad--left svg { rotate: 180deg; }

/* loadout drawer */
.isk-ldr { position: absolute; inset: 0; z-index: 40; background: linear-gradient(90deg, rgba(8, 6, 14, .72) 0%, rgba(8, 6, 14, .5) 45%, rgba(8, 6, 14, .08) 70%); animation: isk-fade .22s both; }
.isk-ldr.is-leaving { animation: isk-fade-out .22s forwards; pointer-events: none; }
.isk-ldr__card { position: absolute; left: calc(var(--u) * 3.4 + var(--sal)); bottom: calc(var(--u) * 13.4 + var(--sab)); width: min(calc(var(--u) * 54), 58vw); display: flex; flex-direction: column; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1) calc(var(--u) * 1.8) calc(var(--u) * 1.2);
  background: var(--tex-squids), linear-gradient(175deg, #2d2349, #1b1430); rotate: -.6deg; box-shadow: var(--stk); animation: isk-ldr-in .5s var(--spring) both; transform-origin: 20% 100%; }
.isk-ldr.is-leaving .isk-ldr__card { animation: isk-ldr-out .22s var(--in) forwards; }
@keyframes isk-ldr-in { from { opacity: 0; translate: 0 calc(var(--u) * 4); scale: .94; } }
@keyframes isk-ldr-out { to { opacity: 0; translate: 0 calc(var(--u) * 2); scale: .97; } }
.isk-ldr__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.isk-ldr__head .isk-seclabel { font: 400 calc(var(--u) * 1.5) / 1 'Titan One', sans-serif; letter-spacing: .02em; -webkit-text-stroke: .15em var(--k); paint-order: stroke fill; rotate: -1.5deg; }
.isk-ldr__hint { display: flex; gap: calc(var(--u) * 1.2); font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; }
.isk-ldr__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(var(--u) * .8); }
.isk-ldr__grid .isk-wcard { height: calc(var(--u) * 8); gap: calc(var(--u) * .2); padding: calc(var(--u) * .5) calc(var(--u) * .4) calc(var(--u) * .6); }
.isk-ldr__grid .isk-wcard__icon svg { height: calc(var(--u) * 4); }
.isk-ldr__grid .isk-wcard__name { font-size: calc(var(--u) * 1.05); }
.isk-ldr__grid .isk-wcard__blob { width: calc(var(--u) * 9); }
.isk-ldr__detail { display: grid; grid-template-columns: 1fr 1.15fr; gap: calc(var(--u) * .5) calc(var(--u) * 1.6); align-items: start; padding: calc(var(--u) * .9) calc(var(--u) * 1) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.1); background: var(--k); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.isk-ldr__detail .isk-wd__title { grid-column: 1; }
.isk-ldr__detail .isk-wd__name { font-size: calc(var(--u) * 2.1); }
.isk-ldr__detail .isk-wd__blurb { grid-column: 1; font-size: var(--fs-xs); line-height: 1.35; margin: 0; }
.isk-ldr__detail .isk-wd__stats { grid-column: 2; grid-row: 1 / span 3; gap: calc(var(--u) * .45); }
.isk-ldr__detail .isk-stat { grid-template-columns: calc(var(--u) * 8.4) 1fr; }
.isk-ldr__detail .isk-stat__fill { transition: clip-path .45s var(--spring); }
.isk-ldr__detail.is-swap .isk-wd__name, .isk-ldr__detail.is-swap .isk-wd__blurb { animation: isk-tip-in .35s var(--spring); }
.isk-ldr__kits { grid-column: 1; display: flex; flex-wrap: wrap; gap: calc(var(--u) * .45); }

/* leave confirm (and any modal over the online screens): no blur — a halftone dim and a stamped sticker */
.isk-online .isk-modal, .isk-lobby .isk-modal { backdrop-filter: none; background: radial-gradient(rgba(0, 0, 0, .35) 1.5px, transparent 2px) 0 0 / 8px 8px, rgba(8, 6, 14, .7); }
.isk-online .isk-modal__card, .isk-lobby .isk-modal__card { rotate: -1.2deg; background: var(--tex-squids), linear-gradient(175deg, #2d2349, #1b1430);
  border-radius: calc(var(--u) * 2) calc(var(--u) * 1.3) calc(var(--u) * 2.2) calc(var(--u) * 1.5); box-shadow: var(--stk); animation: isk-modal-stamp .5s var(--spring2) both; }
@keyframes isk-modal-stamp { 0% { opacity: 0; scale: 1.35; rotate: 6deg; } 50% { opacity: 1; } }
.isk-online .isk-modal__splat svg path, .isk-online .isk-modal__splat svg circle, .isk-lobby .isk-modal__splat svg path, .isk-lobby .isk-modal__splat svg circle { stroke: var(--k); stroke-width: 5; paint-order: stroke; }
.isk-online .isk-modal__text, .isk-lobby .isk-modal__text { color: #fff; font-weight: 600; }
.isk-online .isk-modal__splat, .isk-lobby .isk-modal__splat { top: calc(var(--u) * -7.4); }
.isk-online .isk-btn--modal, .isk-lobby .isk-btn--modal { --bg: #fff; --fill: var(--hv); --fill-ink: var(--k); color: var(--k); border-radius: 999px; box-shadow: var(--stk-k); }
.isk-online .isk-btn--modal.isk-btn--danger, .isk-lobby .isk-btn--modal.isk-btn--danger { --bg: #ff3d5e; --fill: #fff; --fill-ink: #c01233; color: #fff; }

/* launch: countdown on the rail the settings vacate; everything else clears for the super-jumps */
.isk-lcd { position: absolute; left: calc(var(--u) * 17 + var(--sal)); top: 47%; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.isk-lcd.is-on { opacity: 1; }
.isk-lcd__rays { position: absolute; width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; opacity: .9;
  background: repeating-conic-gradient(var(--self-dark, #333) 0 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%); animation: isk-spin 16s linear infinite; }
.isk-lcd__splat { position: absolute; width: calc(var(--u) * 22); height: calc(var(--u) * 22); animation: isk-spin 14s linear infinite; }
.isk-lcd__splat svg { width: 100%; height: 100%; }
.isk-lcd__splat svg path, .isk-lcd__splat svg circle { stroke: var(--k); stroke-width: 5; paint-order: stroke; }
.isk-lcd__num { position: relative; font: 400 calc(var(--u) * 12.5) / 1 'Titan One', sans-serif; color: #fff; -webkit-text-stroke: .1em var(--k); paint-order: stroke fill; text-shadow: .05em .07em 0 var(--k); }
.isk-lcd__sub { position: absolute; top: calc(100% + var(--u) * 5.4); padding: .5em 1em .55em; background: var(--k); font: 900 var(--fs-m) / 1 'Rubik', sans-serif; letter-spacing: .3em; color: #fff; white-space: nowrap; rotate: -3deg;
  box-shadow: calc(var(--u) * .3) calc(var(--u) * .3) 0 var(--hv); }
.isk-lcd__sub:empty { display: none; }
.isk-lcd.is-beat .isk-lcd__num { animation: isk-lcd-beat .55s var(--spring2); }
.isk-lcd.is-beat .isk-lcd__splat { animation: isk-lcd-splat .6s var(--spring2), isk-spin 14s linear infinite; }
@keyframes isk-lcd-beat { 0% { scale: 2.2; opacity: 0; rotate: -14deg; } 45% { opacity: 1; } 100% { scale: 1; rotate: 0deg; } }
@keyframes isk-lcd-splat { 0% { scale: .3; } 60% { scale: 1.12; } }
.isk-lcd.is-go .isk-lcd__num { font-size: calc(var(--u) * 14); color: var(--hv); rotate: -6deg; }
.isk-lobby.is-starting .isk-lob__side { animation: isk-lob-out-l .5s var(--in) forwards; }
.isk-lobby.is-starting .isk-lob__bar, .isk-lobby.is-starting .isk-prompts, .isk-lobby.is-starting .isk-lob__band { animation: isk-lob-out-d .5s var(--in) forwards; }
.isk-lobby.is-starting .isk-lob__top, .isk-lobby.is-starting .isk-lob__status { animation: isk-lob-out-u .5s var(--in) .08s forwards; }
.isk-lobby.is-starting .isk-lob__plates { opacity: 0; transition: opacity .4s 2.6s; }
.isk-lobby.is-starting .isk-plate.is-open { opacity: 0; transition: opacity .3s; }
@keyframes isk-lob-out-l { to { opacity: 0; translate: calc(var(--u) * -8) 0; } }
@keyframes isk-lob-out-d { to { opacity: 0; translate: 0 calc(var(--u) * 6); } }
@keyframes isk-lob-out-u { to { opacity: 0; translate: 0 calc(var(--u) * -5); } }
.isk-lobby.is-starting .isk-lob__scrim { opacity: .5; transition: opacity .6s; }

/* lobby: toasts ride in the free band between the room code and the room status */
.isk-ui[data-screen="lobby"] .isk-toasts { right: auto; left: calc(var(--u) * 61 + var(--sal)); top: calc(var(--u) * 2.8 + var(--sat)); align-items: center; translate: -50% 0; }
.isk-ui[data-screen="lobby"] .isk-toast { max-width: calc(var(--u) * 16); padding: .45em .9em .5em .45em; font-size: var(--fs-xs); animation-name: isk-toast-in-d; }
.isk-ui[data-screen="lobby"] .isk-toast.is-out { animation-name: isk-toast-out-u; }
.isk-ui[data-screen="lobby"] .isk-toast__icon { width: 2.1em; height: 2.1em; }
@keyframes isk-toast-in-d { from { opacity: 0; translate: 0 calc(var(--u) * -2.5); scale: .6; rotate: -12deg; } }
@keyframes isk-toast-out-u { to { opacity: 0; translate: 0 calc(var(--u) * -1.5); scale: .9; } }
/* alone in the room: the code nudges you to share it */
.isk-lobby.is-alone .isk-rc__copy:not(.is-focus) { animation: isk-copy-nudge 2.4s ease-in-out infinite 1.5s; }
@keyframes isk-copy-nudge { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.12; rotate: -3deg; background: var(--hv); } }

/* online results: back-to-the-room countdown sticker; the host's TO THE ROOM goes high-vis */
.isk-res__lobby { display: flex; align-items: center; gap: calc(var(--u) * .9); height: calc(var(--u) * 4.8); padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * .8);
  border-radius: calc(var(--u) * 1.3) calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * .9); background: var(--tex-stripes), var(--ta); color: var(--ta-ink); rotate: -1.5deg; box-shadow: var(--stk); }
.isk-res__lobbyring { position: relative; flex: none; width: calc(var(--u) * 3.3); height: calc(var(--u) * 3.3); border-radius: 50%; background: conic-gradient(var(--k) 0 calc(var(--f, 1) * 360deg), rgba(0, 0, 0, .2) 0);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 53%); mask: radial-gradient(circle, transparent 50%, #000 53%); }
.isk-res__lobbytxt { display: flex; flex-direction: column; gap: .2em; }
.isk-res__lobbytxt small { font: 900 calc(var(--u) * .66) / 1 'Rubik', sans-serif; letter-spacing: .14em; }
.isk-res__lobbytxt b { font: 400 calc(var(--u) * 2.1) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; }
.isk-res__lobbytxt b.is-tick { animation: isk-code-pop .4s var(--spring2); }
.isk-res__lobby.is-due .isk-res__lobbyring { animation: isk-spin 1s linear infinite; background: conic-gradient(var(--k) 0 90deg, rgba(0, 0, 0, .2) 0); }
.isk-btn--toroom { --bg: var(--hv); --fill: #fff; --fill-ink: var(--k); color: var(--k); box-shadow: 0 0 0 var(--ol2) #fff, 0 0 0 var(--olx) var(--k), calc(var(--u) * .45) calc(var(--u) * .55) 0 var(--olx) var(--hv-deep); }
.isk-btn--toroom .isk-btn__sub { font-size: var(--fs-xs); }
/* online pause: the match is still running */
.isk-pause__live { display: inline-flex; align-items: center; gap: .5em; margin-left: calc(var(--u) * 1); padding: .5em .85em .48em .65em; border-radius: calc(var(--u) * .45); vertical-align: middle; translate: 0 -.4em;
  background: var(--k); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; -webkit-text-stroke: 0; text-shadow: none; rotate: -4deg; box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--k), 3px 4px 0 4.5px var(--k); }
.isk-pause__live i { width: .75em; height: .75em; border-radius: 50%; background: #ff4d6a; animation: isk-live 1.6s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .isk-btn__live i, .isk-btn--online::before, .isk-hubcard__blob svg, .isk-hubcard__bg, .isk-rc__back i, .isk-code__box, .isk-code__caret, .isk-code__arr, .isk-plate.is-you .isk-plate__stack::after, .isk-plate.is-open.is-on .isk-plate__stack,
  .isk-btn--ready, .isk-btn--lobstart, .isk-btn--ready::before, .isk-btn--lobstart::before, .isk-lcd__splat, .isk-lcd__rays, .isk-lstage__img, .isk-minibtn.is-go.is-ready, .isk-sdrip, .isk-lobby.is-alone .isk-rc__copy, .isk-rc__tile,
  .isk-hubcard.is-focus, .isk-wchip.is-focus, .isk-lset.is-focus, .isk-lob__emote.is-focus, .isk-hubcard.is-focus .isk-hubcard__go,
  .isk-ui[data-screen="online"] .isk-cursor__ring, .isk-ui[data-screen="lobby"] .isk-cursor__ring, .isk-ui[data-screen="online"] .isk-cursor__glow, .isk-ui[data-screen="lobby"] .isk-cursor__glow { animation: none !important; }
  .isk-plate__stack { transition-duration: .15s; }
}

/* =====================================================================================
   BOSS MODE — Play › mode select (Paint War | Boss Battle), stage select boss variant, lobby MODE, boss results
   ===================================================================================== */
/* ------------------------------------------------------------------ mode select: two big sticker cards */
.isk-modesel__row { position: absolute; left: 50%; top: calc(var(--u) * 12.2); display: flex; gap: calc(var(--u) * 4.2); translate: -50% 0; }
.isk-mode { --mc: var(--a); --mc-rgb: var(--a-rgb); --mc-l: var(--a-light); --mc-d: var(--a-dark); --mc-ink: var(--a-ink);
  position: relative; display: flex; flex-direction: column; width: calc(var(--u) * 37); height: calc(var(--u) * 34.5); padding: 0; border: 0; border-radius: calc(var(--u) * 2.1);
  background: linear-gradient(170deg, #2a2340, #17121f); color: #fff; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; outline: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  box-shadow: 0 0 0 calc(var(--u) * .3) #fff, 0 0 0 calc(var(--u) * .6) var(--k), 0 calc(var(--u) * .8) 0 calc(var(--u) * .6) rgba(0, 0, 0, .45);
  transition: transform .42s var(--spring), box-shadow .25s, translate .45s var(--spring), scale .45s var(--spring); -webkit-tap-highlight-color: transparent; }
.isk-mode--boss { --mc: var(--b); --mc-rgb: var(--b-rgb); --mc-l: var(--b-light); --mc-d: var(--b-dark); --mc-ink: var(--b-ink); }
.isk-mode.is-hover { transition: transform .2s var(--out), box-shadow .25s, translate .45s var(--spring), scale .45s var(--spring); }
.isk-mode.is-focus { translate: 0 calc(var(--u) * -1); scale: 1.035;
  box-shadow: 0 0 0 calc(var(--u) * .3) #fff, 0 0 0 calc(var(--u) * .6) var(--k), 0 0 0 calc(var(--u) * 1.05) var(--mc), 0 calc(var(--u) * 1.5) 0 calc(var(--u) * .6) rgba(0, 0, 0, .42), 0 0 calc(var(--u) * 5) rgba(var(--mc-rgb), .45); }
.isk-mode.is-down { scale: .98; }
.isk-mode.is-pick { animation: isk-mode-pick .5s var(--spring2); }
@keyframes isk-mode-pick { 0% { scale: .94; } 45% { scale: 1.09; } }
.isk-mode__art { position: relative; flex: none; height: 61%; overflow: hidden; border-radius: calc(var(--u) * 2.1) calc(var(--u) * 2.1) calc(var(--u) * .4) calc(var(--u) * .4); background: var(--mc-d); }
.isk-mode__img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: translate(calc(var(--px, 0) * -4%), calc(var(--py, 0) * -4%)) scale(1.02); transition: transform .5s var(--out), filter .4s; }
.isk-mode--boss .isk-mode__img { filter: brightness(.62) saturate(.85) hue-rotate(-8deg); }
.isk-mode:not(.is-focus) .isk-mode__img { filter: brightness(.7) saturate(.75); }
.isk-mode--boss:not(.is-focus) .isk-mode__img { filter: brightness(.45) saturate(.65); }
.isk-mode__tint { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 88%, rgba(var(--mc-rgb), .55), transparent 70%), linear-gradient(0deg, rgba(12, 9, 22, .75), transparent 42%); }
.isk-mode__splat { position: absolute; left: 50%; top: 60%; width: calc(var(--u) * 27); height: calc(var(--u) * 27); translate: -50% -50%; opacity: .95; animation: isk-spin 60s linear infinite; }
.isk-mode__splat svg { width: 100%; height: 100%; }
.isk-mode__hero { position: absolute; left: 50%; bottom: calc(var(--u) * -.4); translate: calc(-50% + var(--px, 0) * 2%) calc(var(--py, 0) * 2%); transition: translate .5s var(--out), scale .45s var(--spring); }
.isk-mode__hero.is-boss { width: calc(var(--u) * 33.5); filter: drop-shadow(0 calc(var(--u) * .5) 0 rgba(0, 0, 0, .35)); }
.isk-mode__hero.is-boss svg { width: 100%; height: auto; }
.isk-mode.is-focus .isk-mode__hero.is-boss { animation: isk-mode-stomp 1.6s ease-in-out infinite; }
@keyframes isk-mode-stomp { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.5deg; translate: -50% calc(var(--u) * -.35); } 50% { rotate: 0deg; } 75% { rotate: 1.2deg; translate: -50% calc(var(--u) * -.2); } }
.isk-mode__hero.is-turf { display: flex; align-items: center; gap: calc(var(--u) * .6); bottom: calc(var(--u) * 1.6); }
.isk-mode__squid { display: block; width: calc(var(--u) * 11); height: calc(var(--u) * 11); filter: drop-shadow(0 calc(var(--u) * .4) 0 var(--k)); }
.isk-mode__squid svg { width: 100%; height: 100%; }
.isk-mode__squid.is-a { color: var(--a); rotate: -10deg; }
.isk-mode__squid.is-b { color: var(--b); rotate: 10deg; transform: scaleX(-1); }
.isk-mode.is-focus .isk-mode__squid.is-a { animation: isk-mode-bob 1s ease-in-out infinite; }
.isk-mode.is-focus .isk-mode__squid.is-b { animation: isk-mode-bob 1s ease-in-out infinite .5s; }
@keyframes isk-mode-bob { 50% { translate: 0 calc(var(--u) * -.8); } }
.isk-mode__vs { font-size: calc(var(--u) * 4); color: #fff; rotate: -8deg; }
.isk-mode__glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 58%); translate: calc(var(--px, 0) * 30%) 0; opacity: 0; transition: opacity .3s; }
.isk-mode.is-hover .isk-mode__glare, .isk-mode.is-focus .isk-mode__glare { opacity: 1; }
.isk-mode__kicker { position: absolute; left: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); padding: .45em .8em .4em; border-radius: .45em; background: var(--k); color: #fff; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .22em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); rotate: -3deg; }
.isk-mode__tape { position: absolute; left: calc(var(--u) * 1.1); top: calc(61% - var(--u) * 2.9); padding: calc(var(--u) * .35) calc(var(--u) * 1.5) calc(var(--u) * .55) calc(var(--u) * 1.2); background: var(--mc);
  clip-path: polygon(0 10%, 100% 0, 97% 100%, 2% 92%); rotate: -3deg; transition: rotate .4s var(--spring), scale .4s var(--spring); }
.isk-mode__tape .isk-display { font-size: calc(var(--u) * 3.5); color: #fff; }
.isk-mode.is-focus .isk-mode__tape { rotate: -4.5deg; scale: 1.05; }
.isk-mode__blurb { margin: calc(var(--u) * 2.9) calc(var(--u) * 1.8) 0; font: 600 var(--fs-s) / 1.4 'Rubik', sans-serif; color: rgba(255, 255, 255, .86); }
.isk-mode__chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); margin: auto calc(var(--u) * 1.6) calc(var(--u) * 1.5); }
.isk-mode .isk-chip { background: rgba(255, 255, 255, .1); }
.isk-mode .isk-chip i { color: var(--mc-l); }
.isk-mode__new { position: absolute; right: calc(var(--u) * -1.2); top: calc(var(--u) * -1.2); padding: .38em .7em .34em; border-radius: 999px; background: #ffd23f; color: var(--k);
  font: 400 calc(var(--u) * 1.5) / 1 'Titan One', sans-serif; letter-spacing: .03em; box-shadow: 0 0 0 3px var(--k), 0 4px 0 3px var(--k); rotate: 12deg; animation: isk-mode-new 1.4s ease-in-out infinite; }
@keyframes isk-mode-new { 50% { scale: 1.1; rotate: 6deg; } }
.isk-mode__go { position: absolute; right: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1.4); display: flex; align-items: center; gap: .4em; padding: .55em 1em .55em .7em; border-radius: 999px;
  background: var(--mc); color: var(--mc-ink); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; box-shadow: 0 0 0 2.5px var(--k), 0 3px 0 2.5px var(--k);
  opacity: 0; scale: .5; transition: opacity .2s, scale .4s var(--spring2); }
.isk-mode__go i { display: block; width: 1.3em; height: 1.3em; }
.isk-mode__go i svg { width: 100%; height: 100%; }
.isk-mode.is-focus .isk-mode__go { opacity: 1; scale: 1; }
.isk-mode.is-focus .isk-mode__chips { padding-right: calc(var(--u) * 8); }
.isk-modesel[data-mode="boss"] .isk-head__blob .isk-fa { fill: var(--b); }
.isk-modesel[data-mode="boss"] .isk-ss__scrim::after { opacity: .85; }

/* ------------------------------------------------------------------ stage select: boss variant */
.isk-setup.is-boss .isk-head__blob .isk-fa { fill: var(--b); }
.isk-ss__bosstag { position: absolute; left: calc(var(--u) * 1.3); top: calc(var(--u) * 4.4); display: flex; align-items: center; gap: calc(var(--u) * .5); padding: calc(var(--u) * .3) calc(var(--u) * 1.1) calc(var(--u) * .3) calc(var(--u) * .3);
  border-radius: 999px; background: rgba(21, 18, 28, .92); box-shadow: 0 0 0 2.5px var(--b), 0 0 0 5px var(--k); rotate: -2.5deg; animation: isk-pop .5s var(--spring2) backwards .35s; }
.isk-ss__bossemb { display: block; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #3a3150, #15121c 72%); box-shadow: 0 0 0 2px #fff; }
.isk-ss__bossemb svg { width: 100%; height: 100%; scale: 1.06; translate: 0 5%; }
.isk-ss__bosstxt { display: flex; flex-direction: column; gap: .15em; }
.isk-ss__bosstxt small { font: 900 calc(var(--fs-xs) * .9) / 1 'Rubik', sans-serif; letter-spacing: .2em; color: var(--b-light); }
.isk-ss__bosstxt b { font-size: calc(var(--u) * 1.35); color: #fff; letter-spacing: .04em; -webkit-text-stroke: .14em var(--k); }

/* ------------------------------------------------------------------ lobby: MODE switch (panel headline), locked SQUAD picker, squad-vs-boss status */
.isk-lset--mode { position: relative; flex: none; flex-direction: row; align-items: center; gap: 0; padding: 0; background: none; }
.isk-lset--mode.is-focus { background: none; transform: none; animation: none; }
.isk-lset--mode.is-focus .isk-lob__mode { scale: 1.07; }
.isk-lset--mode.is-hit .isk-lob__mode, .isk-lset--mode.is-swap .isk-lob__mode { animation: isk-squish .45s var(--spring2); }
.isk-lset--mode.is-flash { animation: none; }
.isk-lset--mode.is-flash .isk-lob__mode { animation: isk-squish .5s var(--spring2); }
.isk-lob__mode { transition: scale .3s var(--spring); }
.isk-lobby.is-bossmode .isk-lob__mode { font-size: calc(var(--u) * 1.62); }
.isk-lobby.is-bossmode .isk-lob__mode > i svg path, .isk-lobby.is-bossmode .isk-lob__mode > i svg circle { fill: var(--tb); }
.isk-lob__mode > i b .isk-ico { overflow: visible; }
.isk-lob__modelbl { position: absolute; z-index: 3; left: calc(var(--u) * 3.3); top: calc(var(--u) * -.95); padding: .28em .55em .25em; border-radius: .3em; background: var(--hv); color: var(--k);
  font: 900 calc(var(--u) * .55) / 1 'Rubik', sans-serif; letter-spacing: .18em; rotate: -4deg; box-shadow: 0 0 0 2px var(--k); }
.isk-lobby:not(.is-host) .isk-lob__modelbl { background: #fff; }
.isk-lob__modearrows { display: flex; gap: calc(var(--u) * .22); margin-left: calc(var(--u) * .3); }
.isk-lob__modearrows i { display: grid; place-items: center; width: calc(var(--u) * 1.45); height: calc(var(--u) * 1.45); border-radius: 50%; background: var(--hv); color: var(--k); box-shadow: 0 0 0 2px var(--k); cursor: pointer; pointer-events: auto; }
.isk-lob__modearrows i svg { width: 64%; height: 64%; }
.isk-lobby:not(.is-host) .isk-lob__modearrows { display: none; }
.isk-lobby.is-bossmode .isk-lock { max-width: 42%; }

.isk-lob__squadlock { display: none; align-items: center; gap: .55em; width: calc(var(--u) * 22.5); height: calc(var(--u) * 2.75); padding: 0 calc(var(--u) * .9) 0 calc(var(--u) * .6); border-radius: 999px; background: var(--k);
  box-shadow: 0 0 0 calc(var(--u) * .14) rgba(255, 255, 255, .22), inset 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .5); }
.isk-lob__squadlock i { flex: none; display: block; width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); color: var(--ta); }
.isk-lob__squadlock i svg { width: 100%; height: 100%; }
.isk-lob__squadlock b { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; letter-spacing: .05em; color: var(--ta); }
.isk-lob__squadlock small { margin-left: auto; font: 800 calc(var(--u) * .62) / 1 'Rubik', sans-serif; letter-spacing: .05em; color: #cfc8e0; white-space: nowrap; }
.isk-lob__team.is-locked .isk-seg { display: none; }
.isk-lob__team.is-locked .isk-lob__squadlock { display: flex; }
.isk-lob__team.is-locked .isk-lob__barlbl .isk-hint { opacity: .3; }
.isk-lobby.is-bossmode .isk-lob__teamprompt { display: none; }

.isk-lob__bossvs { display: none; align-items: center; gap: calc(var(--u) * .4); }
.isk-lob__status.is-boss .isk-lob__teams { display: none; }
.isk-lob__status.is-boss .isk-lob__bossvs { display: flex; }
.isk-lob__status.is-swap { animation: isk-squish .45s var(--spring2); }
.isk-lob__pips.is-squad { display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--u) * .05) calc(var(--u) * .1); }
.isk-lob__pips.is-squad i { width: calc(var(--u) * 2.15); height: calc(var(--u) * 2.15); }
.isk-lob__pips.is-squad i.is-on { color: var(--ta); }
.isk-lob__bossside { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .3); padding-left: calc(var(--u) * .3); }
.isk-lob__bossemb { display: block; width: calc(var(--u) * 4.7); height: calc(var(--u) * 4.7); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #3a3150, #15121c 72%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 calc(var(--u) * .35) var(--tb), 0 0 0 calc(var(--u) * .5) var(--k); rotate: 5deg; }
.isk-lob__bossemb svg { width: 100%; height: 100%; scale: 1.06; translate: 0 5%; }
.isk-lob__status.is-boss .isk-lob__bossemb { animation: isk-lob-bossbob 2.4s ease-in-out infinite; }
@keyframes isk-lob-bossbob { 50% { rotate: -4deg; translate: 0 calc(var(--u) * -.2); } }
.isk-lob__bossname { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.isk-lob__bossname small { font: 900 calc(var(--u) * .5) / 1 'Rubik', sans-serif; letter-spacing: .2em; color: #cfc8e0; }
.isk-lob__bossname b { font: 400 calc(var(--u) * .9) / 1 'Titan One', sans-serif; letter-spacing: .03em; color: var(--tb); -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
@media (prefers-reduced-motion: reduce) { .isk-lob__status.is-boss .isk-lob__bossemb, .isk-mode.is-focus .isk-mode__hero.is-boss, .isk-mode__new, .isk-mode__splat, .isk-mode.is-focus .isk-mode__squid { animation: none !important; } }

/* ------------------------------------------------------------------ results: Boss Battle (HP panel, squad ranked by damage, MVP stamp) */
.isk-res__boss { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.2); height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * 7.2);
  border-radius: calc(var(--u) * 1.2); background: rgba(14, 11, 22, .82); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .3); }
.isk-rb__emb { position: absolute; left: calc(var(--u) * -.6); top: 50%; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); translate: 0 -50%; border-radius: 50%; overflow: hidden; rotate: -6deg;
  background: radial-gradient(circle at 50% 38%, #3a3150, #15121c 72%); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--k), 0 0 0 calc(var(--u) * .55) var(--tb); }
.isk-rb__emb svg { width: 100%; height: 100%; scale: 1.06; translate: 0 5%; }
.isk-res__boss.is-win.is-landed .isk-rb__emb { animation: isk-rb-sink .9s var(--in) forwards; }
@keyframes isk-rb-sink { 40% { rotate: 20deg; } 100% { rotate: 172deg; filter: grayscale(.35) brightness(.92); } }
.isk-rb__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .45); }
.isk-rb__row { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.isk-rb__name { font-size: calc(var(--u) * 1.55); color: #fff; letter-spacing: .05em; }
.isk-rb__phase { display: flex; align-items: center; gap: calc(var(--u) * .28); margin-left: auto; }
.isk-rb__phase small, .isk-rb__hp small { font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .6); margin-right: .2em; }
.isk-rb__pip { width: calc(var(--u) * .85); height: calc(var(--u) * .85); rotate: 45deg; border-radius: 2px; background: rgba(255, 255, 255, .15); box-shadow: 0 0 0 2px var(--k); }
.isk-rb__pip.is-on { background: var(--tb-light); }
.isk-rb__hp { display: flex; align-items: baseline; }
.isk-rb__hp b { font: 400 calc(var(--u) * 1.35) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.isk-rb__bar { position: relative; height: calc(var(--u) * 1.35); border-radius: 999px; background: #0b0910; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.isk-rb__fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(var(--tb-light) -30%, var(--tb) 45%, var(--tb-dark)); }
.isk-rb__fill::after { content: ''; position: absolute; left: 0; right: 0; top: 12%; height: 30%; margin: 0 calc(var(--u) * .3); border-radius: 99px; background: rgba(255, 255, 255, .45); }
.isk-rb__notch { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--k); }
.isk-rb__time { flex: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .45em; align-items: center; padding: calc(var(--u) * .45) calc(var(--u) * .9); border-radius: calc(var(--u) * .7); background: rgba(255, 255, 255, .07); }
.isk-rb__time i { grid-row: 1 / 3; display: block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); color: #ffd54a; }
.isk-rb__time i svg { width: 100%; height: 100%; }
.isk-rb__time small { font: 900 calc(var(--u) * .6) / 1 'Rubik', sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.isk-rb__time b { font: 400 calc(var(--u) * 1.5) / 1 'Titan One', sans-serif; font-variant-numeric: tabular-nums; }
.isk-rb__stamp { position: absolute; left: 50%; top: 56%; translate: -50% -50%; padding: .08em .45em .12em; border: calc(var(--u) * .3) solid currentColor; border-radius: calc(var(--u) * .7);
  font-size: calc(var(--u) * 2.6); color: #ffd54a; background: rgba(21, 18, 28, .55); rotate: -9deg; opacity: 0; scale: 2.4; pointer-events: none; -webkit-text-stroke: .1em var(--k); }
.isk-res__boss.is-lose .isk-rb__stamp { color: var(--tb-light); }
.isk-res__boss.is-landed .isk-rb__stamp { animation: isk-rb-stamp .45s var(--spring2) forwards; }
@keyframes isk-rb-stamp { 0% { opacity: 0; scale: 2.4; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
.isk-res__boss.is-landed { animation: isk-cover-land .45s var(--spring); }
.isk-res__tag--escaped { background: var(--tb); color: var(--tb-ink); }
.isk-res__tag--escaped i { color: var(--tb-ink); }

.isk-res__teams.is-boss { gap: calc(var(--u) * 2); }
.isk-ttable--boss .isk-ttable__head, .isk-ttable--boss .isk-prow { grid-template-columns: calc(var(--u) * 2.5) 1fr calc(var(--u) * 6.4) calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 4.3); gap: calc(var(--u) * .5); }
.isk-ttable--boss .isk-ttable__col:nth-child(2) { justify-content: flex-end; }
.isk-ttable--boss .isk-ttable__col:last-child { justify-content: flex-end; }
.isk-ttable--boss .isk-prow { position: relative; }
.isk-prow__rank { flex: none; display: grid; place-items: center; width: 1.55em; height: 1.55em; margin-right: .5em; border-radius: 50%; background: rgba(255, 255, 255, .12); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; }
.isk-prow.is-mvp .isk-prow__rank { background: #ffd54a; color: var(--k); }
.isk-prow__sm { display: flex; align-items: baseline; justify-content: flex-end; gap: .1em; font-size: calc(var(--u) * 1.1); }
.isk-prow__sm small { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; opacity: .7; }
.isk-prow__stamp { position: absolute; left: calc(var(--u) * -1.5); top: calc(var(--u) * -.55); padding: .12em .4em .14em; border-radius: .35em; background: #ffd54a; color: var(--k); font-size: calc(var(--u) * 1.05);
  -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); rotate: -14deg; opacity: 0; scale: 2; pointer-events: none; }
.isk-prow.has-stamp .isk-prow__stamp { opacity: 1; scale: 1; }
.isk-prow.is-stamping .isk-prow__stamp { animation: isk-rb-stamp .5s var(--spring2) backwards; }

/* =====================================================================================
   PUBLIC BETA badge (boss mode card, lobby MODE switch, boss title card, boss results)
   ===================================================================================== */
.isk-beta { display: inline-flex; align-items: center; gap: .45em; padding: .34em .6em .32em .38em; border-radius: .38em; background: #fff; color: var(--k);
  font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .14em; white-space: nowrap; rotate: -3deg; box-shadow: 0 0 0 2px var(--k), 2px 3px 0 2px var(--k);
  -webkit-text-stroke: 0; text-shadow: none; }
.isk-beta::before { content: ''; flex: none; width: 1.25em; height: 1.05em; border-radius: .2em;
  background: repeating-linear-gradient(-45deg, #ffd23f 0 .22em, var(--k) .22em .44em); box-shadow: 0 0 0 1.5px var(--k); }
.isk-beta--sm { font-size: max(9px, calc(var(--u) * .56)); letter-spacing: .12em; padding: .3em .5em .28em .32em; }
.isk-mode__beta { position: absolute; left: calc(var(--u) * 7.4); top: calc(var(--u) * 1.45); rotate: 2deg; }
.isk-lob__beta { position: absolute; z-index: 5; right: calc(var(--u) * .5); top: calc(100% + var(--u) * 1.15); display: none; rotate: 3deg; }
.isk-lobby.is-bossmode .isk-lob__beta { display: inline-flex; animation: isk-pop .4s var(--spring2); }
.isk-res__beta { rotate: 2deg; }

/* =====================================================================================
   WHAT'S NEW (src/ui/news.js) — splat-wiped sticker cards, shown once per update on the first main menu
   ===================================================================================== */
.isk-news { --nu: var(--u); position: absolute; inset: 0; z-index: 60; pointer-events: auto; overflow: hidden; }
.isk-news__dim { position: absolute; inset: 0; background: rgba(8, 6, 14, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: isk-fade .25s both; }
.isk-news.is-leaving .isk-news__dim { animation: isk-fade-out .45s .05s forwards; }
.isk-news.is-leaving { pointer-events: none; }
.isk-news__inks { position: absolute; inset: 0; }
.isk-news__ink { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(var(--c-rgb), .9), rgba(var(--c-rgb), .72) 55%, color-mix(in srgb, var(--c-dark) 55%, #0c0916) 100%); }
.isk-news__ink.is-a { --c: var(--a); --c-rgb: var(--a-rgb); --c-dark: var(--a-dark); }
.isk-news__ink.is-b { --c: var(--b); --c-rgb: var(--b-rgb); --c-dark: var(--b-dark); }
.isk-news__ink.is-fade { animation: isk-fade .3s both; }
.isk-news.is-reduced.is-leaving .isk-news__ink { animation: isk-fade-out .25s forwards; }
.isk-news__halftone { position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background: radial-gradient(rgba(10, 6, 20, .5) 22%, transparent 26%) 0 0 / calc(var(--nu) * 1.3) calc(var(--nu) * 1.3);
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 45%, transparent 60%, #000 100%); mask-image: linear-gradient(160deg, #000 0%, transparent 45%, transparent 60%, #000 100%); }

.isk-news__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--nu) * 3); }
.isk-news__card { position: relative; display: grid; grid-template-columns: 1.18fr 1fr; align-items: center; gap: calc(var(--nu) * 3.2);
  width: min(calc(var(--nu) * 88), 100%); padding: calc(var(--nu) * 2.6) calc(var(--nu) * 3) calc(var(--nu) * 2.4) calc(var(--nu) * 2.6); border-radius: calc(var(--nu) * 2.4);
  background: var(--tex-grain, none), linear-gradient(170deg, #2b2342, #17121f); rotate: -1.2deg;
  box-shadow: 0 0 0 calc(var(--nu) * .35) #fff, 0 0 0 calc(var(--nu) * .7) var(--k), 0 calc(var(--nu) * 1) 0 calc(var(--nu) * .7) rgba(0, 0, 0, .45); }
.isk-news__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .06) 1.1px, transparent 1.5px) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%); mask-image: linear-gradient(135deg, #000 0%, transparent 55%); }
.isk-news__card.is-in { animation: isk-news-in .7s var(--spring2) .28s backwards; }
.isk-news__card.is-swap { animation: isk-news-in .55s var(--spring2) backwards; }
.isk-news__card.is-out { animation: isk-news-out .28s var(--in) forwards; }
@keyframes isk-news-in { 0% { opacity: 0; scale: .55; rotate: -9deg; } 55% { opacity: 1; } }
@keyframes isk-news-out { to { opacity: 0; scale: .8; rotate: 5deg; } }

/* hero: the render as a taped ticket */
.isk-news__hero { position: relative; aspect-ratio: 16 / 9; rotate: 2.2deg; }
.isk-news__herosplat { position: absolute; left: -9%; top: -16%; width: 44%; aspect-ratio: 1; z-index: 0; animation: isk-spin 40s linear infinite; }
.isk-news__herosplat svg { width: 100%; height: 100%; }
.isk-news__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: calc(var(--nu) * 1.3); background: #1b1530;
  box-shadow: 0 0 0 calc(var(--nu) * .5) #fff, 0 0 0 calc(var(--nu) * .85) var(--k), 0 calc(var(--nu) * .9) 0 calc(var(--nu) * .85) rgba(0, 0, 0, .4); }
.isk-news__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.08; transition: opacity .35s, scale 1.4s var(--out); }
.isk-news__frame.is-loaded .isk-news__img { opacity: 1; scale: 1; }
.isk-news__glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 42%, transparent 54%); translate: -100% 0; }
.isk-news__card.is-in .isk-news__glare, .isk-news__card.is-swap .isk-news__glare { animation: isk-news-glare 1.1s var(--out) .75s both; }
@keyframes isk-news-glare { to { translate: 100% 0; } }
.isk-news__fb { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(var(--nc-rgb), .5), #1b1530 70%); }
.isk-news__fb svg { width: 88%; height: auto; }
.isk-news__fbsquid { display: block; width: 36%; color: var(--nc); }
.isk-news__tapebit { position: absolute; z-index: 2; width: 17%; height: 11%; background: rgba(255, 244, 214, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  clip-path: polygon(3% 8%, 97% 0, 100% 92%, 0 100%); }
.isk-news__tapebit.is-tl { left: -5%; top: -3%; rotate: -33deg; }
.isk-news__tapebit.is-br { right: -5%; bottom: -3%; rotate: -33deg; }
.isk-news__stamp { position: absolute; z-index: 3; right: -4%; top: -9%; padding: .3em .55em .28em; border-radius: 999px; background: #ffd23f; color: var(--k);
  font: 400 calc(var(--nu) * 2) / 1 'Titan One', sans-serif; letter-spacing: .03em; rotate: 12deg; box-shadow: 0 0 0 3px var(--k), 0 4px 0 3px var(--k);
  animation: isk-news-stamp .55s var(--spring2) .75s backwards, isk-mode-new 1.4s ease-in-out 1.4s infinite; }
@keyframes isk-news-stamp { from { opacity: 0; scale: 2.4; rotate: -10deg; } }
.isk-news__tape { position: absolute; z-index: 3; left: -6%; bottom: 9%; padding: calc(var(--nu) * .45) calc(var(--nu) * 1.4) calc(var(--nu) * .45) calc(var(--nu) * 1.2); rotate: -6deg;
  background: repeating-linear-gradient(-45deg, #ffd23f 0 calc(var(--nu) * .9), #15121c calc(var(--nu) * .9) calc(var(--nu) * 1.8));
  box-shadow: 0 0 0 2.5px var(--k), 0 calc(var(--nu) * .35) 0 2.5px rgba(0, 0, 0, .45); animation: isk-news-tape .5s var(--spring) .7s backwards; }
.isk-news__tape span { display: block; padding: .35em .7em .32em; background: #fff; color: var(--k); font: 900 calc(var(--nu) * 1.12) / 1 'Rubik', sans-serif; letter-spacing: .14em; white-space: nowrap; box-shadow: 0 0 0 2px var(--k); }
@keyframes isk-news-tape { from { opacity: 0; translate: calc(var(--nu) * -8) 0; } }

/* body */
.isk-news__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.isk-news__kicker { display: inline-flex; align-items: center; gap: .45em; padding: .42em .8em .4em .55em; border-radius: .4em; background: var(--nc); color: var(--nc-ink);
  font: 900 max(11px, calc(var(--nu) * .95)) / 1 'Rubik', sans-serif; letter-spacing: .24em; rotate: -3deg; box-shadow: 0 0 0 2.5px var(--k);
  animation: isk-news-pop .45s var(--spring2) .45s backwards; }
.isk-news__kicker i { display: block; width: 1.2em; height: 1.2em; }
.isk-news__kicker i svg { width: 100%; height: 100%; }
.isk-news__title { margin: calc(var(--nu) * .8) 0 calc(var(--nu) * .7); font-size: calc(var(--nu) * 3.6); line-height: 1.02; color: #fff; rotate: -2deg; transform-origin: left center; }
.isk-news__title span { display: block; animation: isk-news-word .5s var(--spring2) backwards; animation-delay: calc(.52s + var(--i) * 90ms); }
.isk-news__title span:nth-child(2) { color: var(--nc-light); }
.isk-news__title.is-one { font-size: calc(var(--nu) * 4.7); }
.isk-news__title.is-one span { color: #fff; }
.isk-news[data-page="boss"] .isk-news__title.is-one span { color: var(--nc-light); }
@keyframes isk-news-word { from { opacity: 0; scale: 1.8; translate: 0 -.2em; } }
@keyframes isk-news-pop { from { opacity: 0; scale: .3; } }
.isk-news__lede { margin: 0 0 calc(var(--nu) * 1.1); max-width: 30em; font: 700 max(13px, calc(var(--nu) * 1.12)) / 1.35 'Rubik', sans-serif; color: rgba(255, 255, 255, .88); animation: isk-news-pop .4s var(--out) .65s backwards; }
.isk-news__list { display: flex; flex-direction: column; gap: calc(var(--nu) * .6); margin: 0 0 calc(var(--nu) * 1.7); padding: 0; list-style: none; width: 100%; }
.isk-news__list li { position: relative; display: flex; align-items: center; gap: calc(var(--nu) * .8); padding: calc(var(--nu) * .5) calc(var(--nu) * .8) calc(var(--nu) * .5) calc(var(--nu) * .5); border-radius: calc(var(--nu) * .9);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); font: 600 max(12.5px, calc(var(--nu) * 1.02)) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .86);
  animation: isk-news-li .45s var(--spring) backwards; animation-delay: calc(.72s + var(--i) * 90ms); }
.isk-news__list b { color: #fff; font-weight: 900; }
@keyframes isk-news-li { from { opacity: 0; translate: calc(var(--nu) * 3) 0; } }
.isk-news__bico { flex: none; display: grid; place-items: center; width: calc(var(--nu) * 2.5); height: calc(var(--nu) * 2.5); border-radius: 50%; background: var(--k); color: var(--nc); box-shadow: 0 0 0 2px var(--nc), 0 0 0 3.5px var(--k); rotate: -6deg; }
.isk-news__bico svg { width: 62%; height: 62%; }
.isk-news__thumb { flex: none; margin-left: auto; width: calc(var(--nu) * 5.2); aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--nu) * .4); rotate: 4deg; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--k); }
.isk-news__btns { display: flex; align-items: center; gap: calc(var(--nu) * 1.2); flex-wrap: wrap; animation: isk-news-pop .45s var(--spring2) .95s backwards; }
.isk-news__btns .isk-btn--wide { height: calc(var(--nu) * 4.6); font-size: calc(var(--nu) * 1.9); padding: 0 calc(var(--nu) * 2); }
.isk-news__go { --bg: var(--nc); color: var(--nc-ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .15), 0 calc(var(--nu) * .42) 0 color-mix(in srgb, var(--nc-dark) 60%, #000); }
.isk-news__go.is-focus { color: var(--k); }
.isk-news__chev { display: block; width: 1.05em; height: 1.05em; margin-left: .15em; }
.isk-news__chev svg { width: 100%; height: 100%; }
.isk-news__go.is-focus .isk-news__chev { animation: isk-nudge-r 1s ease-in-out infinite; }
.isk-news__key { position: absolute; right: calc(var(--nu) * .9); top: 50%; translate: 0 -50%; font-size: calc(var(--nu) * .78); opacity: .95; }
.isk-news__go { padding-right: calc(var(--nu) * 4.6) !important; }
.isk-news__later.is-focus, .isk-news__skip.is-focus { color: var(--k); }
.isk-news__later { --fill: #fff; --fill-ink: var(--k); }
.isk-news__skip { --fill: #fff; --fill-ink: var(--k); gap: .7em; }
.isk-news__skipkey { font-size: .85em; opacity: .9; }
.isk-news__foot { display: flex; align-items: center; gap: calc(var(--nu) * .7); margin-top: calc(var(--nu) * 1.4); }
.isk-news__dots { display: flex; gap: calc(var(--nu) * .4); }
.isk-news__dots i { width: calc(var(--nu) * .8); height: calc(var(--nu) * .8); border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 2px var(--k); transition: width .3s var(--spring), background .3s; }
.isk-news__dots i.is-on { width: calc(var(--nu) * 2.2); border-radius: 99px; background: var(--nc); }
.isk-news__count { font: 900 max(10px, calc(var(--nu) * .75)) / 1 'Rubik', sans-serif; letter-spacing: .18em; color: rgba(255, 255, 255, .55); }

/* confetti */
.isk-news__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.isk-news__confetti i { position: absolute; top: -4%; width: calc(var(--nu) * .8 * var(--w)); height: calc(var(--nu) * 1.5 * var(--w)); border-radius: calc(var(--k) * 50%); background: var(--c); opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(21, 18, 28, .55); }
.isk-news__confetti.is-on i { animation: isk-news-conf var(--t) cubic-bezier(.25, .6, .5, 1) var(--d) forwards; }
@keyframes isk-news-conf { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), 108vh) rotate(var(--r)); } }

/* narrow / portrait screens: stack the hero over the text */
@media (max-aspect-ratio: 5 / 4) {
  .isk-news { --nu: min(2.1vw, 1.25vh); }
  .isk-news__card { grid-template-columns: 1fr; gap: calc(var(--nu) * 2.2); width: min(calc(var(--nu) * 64), 100%); padding: calc(var(--nu) * 2.4) calc(var(--nu) * 2.4) calc(var(--nu) * 2.2); rotate: -.8deg; }
  .isk-news__stage { padding: calc(var(--nu) * 2.2); overflow-y: auto; }
  .isk-news__title { font-size: calc(var(--nu) * 4.2); }
  .isk-news__title.is-one { font-size: calc(var(--nu) * 5.4); }
}
@media (prefers-reduced-motion: reduce) {
  .isk-news__card, .isk-news__card *, .isk-news__herosplat, .isk-news__stamp { animation: none !important; }
  .isk-news__confetti { display: none; }
  .isk-news__img { transition: opacity .2s; scale: 1; }
}
.isk-news.is-reduced .isk-news__confetti { display: none; }
.isk-news.is-reduced .isk-news__card.is-out { animation: isk-fade-out .2s forwards !important; }