@import url('hud.css');
@import url('touch.css');
/* =====================================================================================
   INKWAVE — UI (menus + HUD). Everything is namespaced .iw-*.
   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; }

.iw-ui, .iw-hud, .iw-hud-over, .iw-touch {
  --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, 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-weight: 500;
  color: #fff; line-height: 1.2;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.iw-ui *, .iw-hud *, .iw-hud-over * { box-sizing: border-box; }
.iw-ui svg, .iw-hud svg, .iw-hud-over svg { display: block; overflow: visible; }

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

/* chunky display type: thick outline painted under the fill */
.iw-display {
  font-family: 'Titan One', 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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 */
.iw-ui { z-index: 20; pointer-events: none; }
.iw-ui.is-active { pointer-events: auto; }
.iw-ui__layer { position: absolute; inset: 0; }
.iw-screen { position: absolute; inset: 0; overflow: hidden; }
.iw-hud { z-index: 10; pointer-events: none; transition: opacity .35s var(--out), visibility 0s linear 0s; }
.iw-hud.is-hidden { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.iw-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. */
.iw-in { animation: iw-in-up .6s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 38ms + 40ms); }
.iw-in--up { animation-name: iw-in-up; }
.iw-in--down { animation-name: iw-in-down; }
.iw-in--left { animation-name: iw-in-left; }
.iw-in--right { animation-name: iw-in-right; }
.iw-in--pop { animation-name: iw-in-pop; }
.iw-in--logo { animation: iw-in-logo .9s var(--spring2) backwards .05s; }
.iw-screen.is-back .iw-in--left { animation-name: iw-in-right-soft; }
@keyframes iw-in-up { from { opacity: 0; translate: 0 calc(var(--u) * 3.2); scale: .94; } }
@keyframes iw-in-down { from { opacity: 0; translate: 0 calc(var(--u) * -2.6); } }
@keyframes iw-in-left { from { opacity: 0; translate: calc(var(--u) * -7) 0; scale: .9; } }
@keyframes iw-in-right { from { opacity: 0; translate: calc(var(--u) * 7) 0; scale: .92; } }
@keyframes iw-in-right-soft { from { opacity: 0; translate: calc(var(--u) * 4) 0; } }
@keyframes iw-in-pop { from { opacity: 0; scale: .55; } 50% { opacity: 1; } }
@keyframes iw-in-logo { from { opacity: 0; scale: .25; rotate: -14deg; } 45% { opacity: 1; } }

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

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

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

/* ------------------------------------------------------------------ backgrounds / scrims */
.iw-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: iw-fade .4s both; }
.iw-scrim-full { position: absolute; inset: 0; pointer-events: none; background: rgba(12, 9, 22, .55); backdrop-filter: blur(4px) saturate(1.1); animation: iw-fade .35s both; }
.iw-dimbg { position: absolute; inset: 0; background: rgba(8, 6, 14, .6); backdrop-filter: blur(8px) saturate(.8); }

/* ------------------------------------------------------------------ glass ink panel */
.iw-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);
}
.iw-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) */
.iw-cursor { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .18s; will-change: transform; }
.iw-cursor.is-on { opacity: 1; }
.iw-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: iw-cursor-pulse 1.3s ease-in-out infinite; }
.iw-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 iw-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 */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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;
}
.iw-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); }
.iw-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%); }
.iw-btn__icon { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; transition: transform .45s var(--spring); }
.iw-btn__icon svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.iw-btn__text { display: flex; flex-direction: column; min-width: 0; }
.iw-btn__label { white-space: nowrap; }
.iw-btn__sub { display: block; margin-top: .38em; font: 700 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; opacity: .82; white-space: nowrap; }
.iw-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); }
.iw-btn.is-focus .iw-btn__blob { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.iw-btn.is-down { scale: .955; transition: scale .08s; }
.iw-btn.is-focus .iw-btn__icon { transform: rotate(-8deg) scale(1.12); }
.iw-btn:active { scale: .97; }

.iw-btn--menu { width: 100%; height: calc(var(--u) * 4.5); font-size: calc(var(--u) * 2.05); }
.iw-btn--xl { height: calc(var(--u) * 7.6); font-size: calc(var(--u) * 3.6); padding-left: calc(var(--u) * 1.8); }
.iw-btn--xl .iw-btn__sub { font-size: var(--fs-m); }
.iw-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); }
.iw-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: iw-stripes 3s linear infinite; }
.iw-btn--danger { --fill: #ff3d5e; --fill-ink: #fff; }
.iw-btn--ghost { --bg: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.iw-btn--small { font: 800 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; padding: calc(var(--u) * .7) calc(var(--u) * 1.1); gap: .6em; }
.iw-btn--small .iw-btn__icon { width: 1.5em; height: 1.5em; }
.iw-btn--small.is-armed { --bg: #ff3d5e; --fill: #fff; --fill-ink: #c01233; animation: iw-shake .35s; }
.iw-btn--wide { height: calc(var(--u) * 5); font-size: calc(var(--u) * 2); padding: 0 calc(var(--u) * 2.2); }
.iw-btn--modal { font-size: calc(var(--u) * 1.6); padding: calc(var(--u) * 1) calc(var(--u) * 2); }
@keyframes iw-stripes { to { background-position: -48px 0; } }

/* ------------------------------------------------------------------ input glyphs */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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;
}
.iw-key--wide { padding: 0 .7em; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; vertical-align: middle; }
.iw-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); }
.iw-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); }
.iw-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); }
.iw-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); }
.iw-pad--sys { border-radius: 50%; background: #fff; color: var(--k); box-shadow: 0 0 0 2px var(--k), 0 .16em 0 2px var(--k); }
.iw-pad--sys svg { width: 62%; height: 62%; }
.iw-mouse { display: inline-block; width: 2.1em; height: 2.4em; margin: 0 .1em; vertical-align: middle; translate: 0 -.1em; }
.iw-mouse svg { width: 100%; height: 100%; }

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

/* ------------------------------------------------------------------ prompts bar, header, corners */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .3);
}
.iw-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); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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; }
.iw-backbtn:hover { transform: translateX(-3px) scale(1.06); background: var(--k); }
.iw-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); }
.iw-backbtn__arrow svg { width: 62%; height: 62%; }
.iw-head__titles { display: flex; flex-direction: column; }
.iw-head__title { position: relative; isolation: isolate; font-size: calc(var(--u) * 3.7); line-height: 1; }
.iw-head__blob { position: absolute; z-index: -1; left: -.55em; top: 50%; width: 2.3em; transform: translateY(-50%) rotate(-12deg); }
.iw-head__sub { margin-top: .45em; font: 600 var(--fs-m) / 1.2 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: rgba(255, 255, 255, .88); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.iw-corner { position: absolute; bottom: calc(var(--u) * 2); font: 600 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); letter-spacing: .04em; }
.iw-corner--bl { left: calc(var(--u) * 3.4); }
.iw-corner--br { right: calc(var(--u) * 3.4); }
.iw-seclabel { display: flex; align-items: center; gap: .55em; font: 900 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.iw-seclabel i { display: block; width: 1.5em; height: 1.5em; color: var(--a); }
.iw-seclabel i svg { width: 100%; height: 100%; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; }
.iw-chip i { display: block; width: 1.7em; height: 1.7em; color: var(--a); }
.iw-chip i svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ logo */
.iw-logo { position: relative; display: inline-flex; flex-direction: column; align-items: center; isolation: isolate; }
.iw-logo--xl { font-size: calc(var(--u) * 11.5); }
.iw-logo--md { font-size: calc(var(--u) * 6.2); }
.iw-logo--sm { font-size: calc(var(--u) * 3.4); }
.iw-logo__splat { position: absolute; z-index: -1; left: 50%; top: 50%; width: 5.4em; transform: translate(-50%, -52%) rotate(-3deg); }
.iw-logo__word { display: flex; font-family: 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; line-height: 1; }
.iw-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: iw-letter 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.27s);
}
.iw-logo__l:nth-child(1) { --r: -7deg; --y: .02em; }
.iw-logo__l:nth-child(2) { --r: 4deg; --y: -.04em; }
.iw-logo__l:nth-child(3) { --r: -3deg; --y: .03em; }
.iw-logo__l:nth-child(4) { --r: 6deg; --y: -.02em; color: var(--a-light); }
.iw-logo__l:nth-child(5) { --r: -5deg; --y: .04em; }
.iw-logo__l:nth-child(6) { --r: 3deg; --y: -.03em; }
.iw-logo__l:nth-child(7) { --r: -6deg; --y: .02em; }
.iw-logo__l:nth-child(4) { color: #fff; }
@keyframes iw-letter { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -.045em; rotate: 2.5deg; } }
.iw-logo__sub { margin-top: -.02em; font: 400 .3em / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-logo__sub span { display: inline-block; padding: .2em .65em .24em; border-radius: .32em; background: var(--b); color: var(--b-ink);
  text-transform: uppercase; letter-spacing: .1em; transform: rotate(-3deg);
  box-shadow: 0 0 0 .09em var(--k), 0 .14em 0 .09em var(--k); }
.iw-logo--sm .iw-logo__sub { font-size: .36em; }
.iw-drip path { transform-box: fill-box; transform-origin: 50% 0; animation: iw-drip 3.8s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(var(--d) * -.95s); }
.iw-drip__drop { animation: iw-drop 3.8s cubic-bezier(.55, 0, 1, .6) infinite; animation-delay: calc(var(--d) * -.95s); }
@keyframes iw-drip { 0% { transform: scaleY(.25); } 62% { transform: scaleY(1); } 70% { transform: scaleY(.7); } 100% { transform: scaleY(.25); } }
@keyframes iw-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 */
.iw-loading { background: radial-gradient(120% 90% at 50% 40%, #2b2050 0%, #161029 58%, #0b0814 100%); }
.iw-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%); }
.iw-loading__bg { position: absolute; inset: 0; overflow: hidden; }
.iw-bgblob { position: absolute; border-radius: 50%; filter: blur(calc(var(--u) * 5)); opacity: .5; animation: iw-float 14s ease-in-out infinite alternate; }
.iw-bgblob--0 { width: 42vw; height: 42vw; left: -12vw; top: -14vw; background: var(--a); }
.iw-bgblob--1 { width: 46vw; height: 46vw; right: -14vw; bottom: -20vw; background: var(--b); animation-delay: -4s; }
.iw-bgblob--2 { width: 18vw; height: 18vw; right: 12vw; top: 6vh; background: var(--a); opacity: .3; animation-delay: -7s; }
.iw-bgblob--3 { width: 22vw; height: 22vw; left: 10vw; bottom: 2vh; background: var(--b); opacity: .28; animation-delay: -2s; }
.iw-bgblob--4 { width: 10vw; height: 10vw; left: 44vw; top: 4vh; background: var(--b); opacity: .22; animation-delay: -9s; }
.iw-bgblob--5 { width: 12vw; height: 12vw; left: 60vw; bottom: 8vh; background: var(--a); opacity: .22; animation-delay: -5s; }
@keyframes iw-float { to { translate: 4vw 3vh; scale: 1.12; } }
.iw-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); }
.iw-progress { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.4); }
.iw-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); }
.iw-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%); }
.iw-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: iw-stripes .7s linear infinite; }
.iw-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); }
.iw-progress__pct { min-width: 4ch; font: 400 calc(var(--u) * 1.9) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.iw-loading__label { font: 700 var(--fs-m) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .8); text-transform: uppercase; }
.iw-loading__label.is-in { animation: iw-fade .3s; }
.iw-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); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; transform: rotate(-4deg); box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px var(--k); }
.iw-tip__text { font: 600 var(--fs-m) / 1.4 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #eeeaf8; }
.iw-tip__text.is-in { animation: iw-tip-in .5s var(--spring); }
@keyframes iw-tip-in { from { opacity: 0; translate: calc(var(--u) * 2) 0; } }

/* ------------------------------------------------------------------ TITLE */
.iw-title { cursor: pointer; }
.iw-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%); }
.iw-title__logo { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.iw-title__press { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .7); }
.iw-title__presstext { font: 400 calc(var(--u) * 2.5) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .08em;
  -webkit-text-stroke: .2em var(--k); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--k);
  animation: iw-press-pulse 1.5s ease-in-out infinite; }
.iw-title__presssub { font: 700 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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 iw-press-pulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.07; opacity: .72; } }
.iw-title.is-go .iw-title__presstext { animation: iw-go-flash .3s steps(2) 2, iw-press-pulse 1.5s ease-in-out infinite; color: var(--a); }
@keyframes iw-go-flash { 50% { opacity: .2; } }
.iw-title .iw-corner--bl b { font-family: 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-weight: 400; letter-spacing: .06em; }

/* ------------------------------------------------------------------ MAIN */
.iw-main__logo { position: absolute; left: calc(var(--u) * 3.4); top: calc(var(--u) * 2.6); }
.iw-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); }
.iw-main__menu .iw-btn--xl { margin-bottom: calc(var(--u) * .5); }
.iw-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; }
.iw-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); }
.iw-profile__avatar { position: relative; width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.iw-profile__avblob { position: absolute; inset: -12%; }
.iw-profile__avblob svg { width: 100%; height: 100%; }
.iw-profile__squid { position: absolute; inset: 14%; color: #fff; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.iw-profile__squid svg { width: 100%; height: 100%; }
.iw-profile__info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.iw-profile__name { font: 400 calc(var(--u) * 2) / 1.05 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-profile__rank { --rk: #9fe8ff; display: flex; align-items: center; gap: .45em; margin-top: .35em; font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--rk); }
.iw-profile__rank.is-t1 { --rk: #7dffb0; } .iw-profile__rank.is-t2 { --rk: #ffd54a; } .iw-profile__rank.is-t3 { --rk: #ff8ad0; } .iw-profile__rank.is-t4 { --rk: #ffb14a; }
.iw-profile__xp { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * .8); }
.iw-profile__xpnum { font: 700 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .72; white-space: nowrap; }
.iw-profile__stats { grid-column: 1 / -1; display: flex; gap: calc(var(--u) * .7); }
.iw-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); }
.iw-profile__stats b { font: 400 calc(var(--u) * 1.6) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-profile__stats span { font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .1em; opacity: .7; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); white-space: nowrap; }
.iw-lvl small { font: 900 .55em / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; }
.iw-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); }
.iw-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); }
.iw-kitcard { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5) calc(var(--u) * 1.3); }
.iw-kitcard__label { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; opacity: .7; }
.iw-kitcard__main { display: flex; align-items: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * .7) 0 calc(var(--u) * .9); }
.iw-kitcard__icon { width: calc(var(--u) * 6); height: calc(var(--u) * 4.4); color: var(--a); }
.iw-kitcard__icon svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.iw-kitcard__name { font: 400 calc(var(--u) * 1.8) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-kitcard__kind { margin-top: .3em; font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.iw-kitcard__chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }

/* ------------------------------------------------------------------ SETUP */
.iw-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); }
.iw-setup__maps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.2); }
.iw-setup__maps .iw-mapcard__art { aspect-ratio: 1.75 / 1; }
.iw-setup__maps .iw-mapcard__name { font-size: calc(var(--u) * 1.35); }
.iw-setup__maps .iw-mapcard__blurb { font-size: calc(var(--u) * 0.82); }
.iw-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; }
.iw-mapcard__art { display: block; aspect-ratio: 2.15 / 1; overflow: hidden; }
.iw-mapcard__art svg { width: 100%; height: 100%; transition: transform .6s var(--out); }
.iw-mapcard.is-focus .iw-mapcard__art svg { transform: scale(1.07); }
.iw-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); }
.iw-mapcard__name { font: 400 calc(var(--u) * 1.65) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-mapcard__blurb { font: 500 var(--fs-s) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; }
.iw-mapcard__chip i { display: block; width: 1.4em; height: 1.4em; color: #ffd45a; }
.iw-mapcard__chip i svg { width: 100%; height: 100%; }
.iw-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); }
.iw-mapcard__check svg { width: 62%; height: 62%; }
.iw-mapcard.is-sel { box-shadow: 0 0 0 4px var(--a), 0 calc(var(--u) * .5) 0 var(--a-deep); }
.iw-mapcard.is-sel .iw-mapcard__check { transform: scale(1) rotate(0deg); }
.iw-mapcard.is-focus { transform: rotate(0deg) translateY(calc(var(--u) * -.5)) scale(1.025); }
.iw-mapcard.is-pick, .iw-wcard.is-pick { animation: iw-pick .5s var(--spring); }
@keyframes iw-pick { 0% { scale: .92; } 45% { scale: 1.06; } }
.iw-setup__opts { display: flex; flex-direction: column; gap: calc(var(--u) * .5); padding: calc(var(--u) * .9); }
.iw-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; }
.iw-setrow.is-focus { background: rgba(var(--a-rgb), .14); }
.iw-setrow__label { display: flex; align-items: center; gap: .6em; font: 900 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; }
.iw-setrow__label i { display: block; width: 1.6em; height: 1.6em; color: var(--a); }
.iw-setrow__label i svg { width: 100%; height: 100%; }
.iw-setrow .iw-seg { min-width: calc(var(--u) * 32); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); }
.iw-setup__desc.is-in { animation: iw-tip-in .4s var(--spring); }
.iw-diffopt { display: inline-flex; align-items: center; gap: .55em; }
.iw-pips { display: inline-flex; gap: 3px; }
.iw-pips i { width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .25; }
.iw-pips i.on { opacity: 1; }
.iw-setup__foot { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.iw-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; }
.iw-wchip__icon { width: calc(var(--u) * 5.4); height: calc(var(--u) * 4.4); color: var(--a); }
.iw-wchip__icon svg { width: 100%; height: 100%; }
.iw-wchip__text { display: flex; flex-direction: column; gap: .35em; flex: 1; }
.iw-wchip__text small { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; opacity: .65; }
.iw-wchip__text b { font: 400 calc(var(--u) * 1.6) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .1em; transition: background .2s, color .2s; }
.iw-wchip__edit i { display: block; width: 1.3em; height: 1.3em; }
.iw-wchip.is-focus { transform: translateY(calc(var(--u) * -.3)); background: rgba(34, 27, 52, .95); }
.iw-wchip.is-focus .iw-wchip__edit { background: var(--a); color: var(--a-ink); }
.iw-btn--start { flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 6); font-size: calc(var(--u) * 2.9); --tilt: -1.5deg; }
.iw-btn--start .iw-btn__sub { font-size: var(--fs-xs); max-width: calc(var(--u) * 19); overflow: hidden; text-overflow: ellipsis; }
.iw-btn--start .iw-btn__icon { animation: iw-nudge-r 1.1s ease-in-out infinite; }
@keyframes iw-nudge-r { 50% { translate: calc(var(--u) * .35) 0; } }
.iw-setup.is-launch .iw-btn--start { animation: iw-launch .4s var(--spring) forwards; }
@keyframes iw-launch { 40% { scale: 1.12; } 100% { scale: 1.02; } }

/* ------------------------------------------------------------------ segmented / slider / toggle / tabs / rows */
.iw-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); }
.iw-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); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .72); cursor: pointer; transition: color .2s; }
.iw-seg__opt:hover { color: #fff; }
.iw-seg__opt.is-sel { color: var(--a-ink); }
.iw-seg.is-change .iw-seg__hl { animation: iw-hl-squish .45s var(--spring); }
@keyframes iw-hl-squish { 30% { scale: 1.08 .82; } }
.is-edge-l { animation: iw-nudge-l .3s var(--out); }
.is-edge-r { animation: iw-nudge-rr .3s var(--out); }
.is-edge { animation: iw-shake .3s; }
@keyframes iw-nudge-l { 35% { translate: calc(var(--u) * -.5) 0; } }
@keyframes iw-nudge-rr { 35% { translate: calc(var(--u) * .5) 0; } }
@keyframes iw-shake { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

.iw-slider { display: flex; align-items: center; gap: calc(var(--u) * 1.3); width: calc(var(--u) * 25); }
.iw-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); }
.iw-slider__track::before { content: ''; position: absolute; inset: calc(var(--u) * -1.1) calc(var(--u) * -.6); }
.iw-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); }
.iw-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; }
.iw-slider.is-drag .iw-slider__fill, .iw-slider.is-drag .iw-slider__knob { transition: scale .3s var(--spring); }
.iw-slider.is-drag .iw-slider__knob { scale: 1.2; }
.iw-slider__knob.is-bump { animation: iw-knob .3s var(--spring); }
@keyframes iw-knob { 0% { scale: 1.35 .85; } }
.iw-slider__val { width: 4.2em; text-align: right; font: 400 calc(var(--u) * 1.5) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; }

.iw-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; }
.iw-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); }
.iw-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); }
.iw-toggle.is-on .iw-toggle__knob { transform: translateX(calc(var(--u) * 4.5)); }
.iw-toggle__txt { position: absolute; top: 50%; transform: translateY(-50%); font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .1em; transition: opacity .2s; }
.iw-toggle__off { right: calc(var(--u) * 1); opacity: .6; }
.iw-toggle__on { left: calc(var(--u) * 1.1); opacity: 0; color: var(--a-ink); }
.iw-toggle.is-on .iw-toggle__off { opacity: 0; }
.iw-toggle.is-on .iw-toggle__on { opacity: 1; }

.iw-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); }
.iw-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); }
.iw-tabs__hl.is-instant { transition: none; }
.iw-tabs__hl.is-move { animation: iw-pill-squish .45s var(--spring); }
@keyframes iw-pill-squish { 35% { scale: 1.06 .8; } }
.iw-tab { position: relative; z-index: 1; }
.iw-tabs__hint { flex: none; padding: 0 calc(var(--u) * .4); font-size: var(--fs-s); opacity: .85; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; cursor: pointer; pointer-events: auto; transition: color .2s, background .2s; }
.iw-tab i { display: block; width: 1.35em; height: 1.35em; }
.iw-tab i svg { width: 100%; height: 100%; }
.iw-tab:hover { color: #fff; }
.iw-tab.is-sel { color: var(--a-ink); animation: iw-tab-pop .4s var(--spring); }
@keyframes iw-tab-pop { 0% { scale: .85; } }

.iw-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); }
.iw-row + .iw-row { margin-top: calc(var(--u) * .45); }
.iw-row.is-focus { background: rgba(var(--a-rgb), .15); transform: translateX(calc(var(--u) * .35)); }
.iw-row__label { font: 700 var(--fs-m) / 1.1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-row__ctrl { display: flex; align-items: center; }
.iw-row__ctrl .iw-seg { min-width: calc(var(--u) * 25); }
.iw-row.is-focus .iw-slider__knob { scale: 1.12; box-shadow: 0 0 0 3px var(--k), 0 0 0 7px rgba(var(--a-rgb), .45); }
.iw-rowin { animation: iw-row-in .5s var(--spring) backwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes iw-row-in { from { opacity: 0; translate: calc(var(--dir, 1) * var(--u) * 4) 0; } }
.iw-row.is-flash { animation: iw-row-flash .6s; }
@keyframes iw-row-flash { 20% { background: rgba(var(--a-rgb), .4); } }

/* ------------------------------------------------------------------ SETTINGS */
.iw-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); }
.iw-rows { min-height: calc(var(--u) * 14); }
.iw-row--link .iw-row__ctrl { gap: .5em; font: 800 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .08em; opacity: .85; }
.iw-row--link .iw-row__ctrl i { display: block; width: 1.5em; height: 1.5em; }
.iw-row--link.is-focus .iw-row__ctrl { color: var(--a); opacity: 1; }
.iw-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); }
.iw-settings__help { flex: 1; min-height: 2.6em; font: 500 var(--fs-s) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); }
.iw-settings__help.is-in { animation: iw-tip-in .35s var(--spring); }

/* ------------------------------------------------------------------ LOADOUT */
.iw-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); }
.iw-loadout__body .iw-seclabel { margin: calc(var(--u) * .3) 0 calc(var(--u) * .2); }
.iw-loadout__practice.iw-btn { position: absolute; right: calc(var(--u) * 3.4); top: calc(var(--u) * 2.4); width: calc(var(--u) * 27); height: calc(var(--u) * 6); }
.iw-loadout__practice .iw-btn__sub { font-size: var(--fs-xs); }
.iw-ppractice .iw-seclabel { margin: calc(var(--u) * .2) 0 0; }
.iw-ppractice__tip { margin: 0; font: 500 var(--fs-xs) / 1.45 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #d0cadf; }
.iw-ppractice__tip b { color: var(--self); font-weight: 800; }
.iw-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; }
.iw-name__label { flex: none; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .15em; opacity: .75; }
.iw-name__field { position: relative; flex: 1; display: flex; align-items: center; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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; }
.iw-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; }
.iw-name__pen svg { width: 100%; height: 100%; }
.iw-name.is-editing .iw-name__input { background: #fff; color: var(--k); box-shadow: 0 0 0 3px var(--a); }
.iw-name.is-shake { animation: iw-shake .4s; }
.iw-name.is-saved { animation: iw-saved .5s var(--spring); }
@keyframes iw-saved { 30% { scale: 1.03; box-shadow: inset 0 0 0 2px var(--a), 0 0 0 4px rgba(var(--a-rgb), .4); } }
.iw-wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); }
.iw-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; }
.iw-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); }
.iw-wcard.is-equipped .iw-wcard__blob { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.iw-wcard__icon { flex: 1; display: grid; place-items: center; width: 82%; min-height: 0; color: #fff; transition: transform .45s var(--spring); }
.iw-wcard__icon svg { width: 100%; height: calc(var(--u) * 5.6); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.iw-wcard__name { font: 400 calc(var(--u) * 1.3) / 1.05 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; text-align: center; -webkit-text-stroke: .18em var(--k); paint-order: stroke fill; }
.iw-wcard__kind { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.iw-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); }
.iw-wcard__eq svg { width: 64%; height: 64%; }
.iw-wcard.is-equipped .iw-wcard__eq { transform: scale(1) rotate(0deg); }
.iw-wcard.is-equipped { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 calc(var(--u) * .45) 0 var(--a-deep); }
.iw-wcard.is-focus { transform: rotate(0deg) translateY(calc(var(--u) * -.35)) scale(1.04); }
.iw-wcard.is-focus .iw-wcard__icon { transform: rotate(-6deg) scale(1.08); }
.iw-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); }
.iw-wd__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.iw-wd__kind { display: block; margin-bottom: .45em; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .18em; color: var(--a); }
.iw-wd__name { display: block; font-size: calc(var(--u) * 2.7); line-height: 1; }
.iw-wd.is-swap .iw-wd__name, .iw-wd.is-swap .iw-wd__blurb { animation: iw-tip-in .4s var(--spring); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .1em; box-shadow: 0 3px 0 var(--a-deep); }
.iw-wd__eq i { display: block; width: 1.3em; height: 1.3em; }
.iw-wd.is-equipped .iw-wd__eq { display: inline-flex; animation: iw-pop .4s var(--spring); }
.iw-wd__blurb { grid-column: 1 / -1; margin: 0; font: 500 var(--fs-m) / 1.35 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #ddd8ea; }
.iw-wd__stats { align-self: stretch; display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(var(--u) * .62); }
.iw-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); }
.iw-stat__label { font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.iw-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); }
.iw-stat__ghost, .iw-stat__fill { position: absolute; inset: 0; border-radius: inherit; transition: clip-path .6s var(--spring); }
.iw-stat__ghost { background: rgba(255, 255, 255, .38); clip-path: inset(0 calc((1 - var(--g, 0)) * 100%) 0 0 round 999px); }
.iw-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); }
.iw-stat__bar.is-up .iw-stat__fill { background: linear-gradient(180deg, #b6ffcf -30%, #3ddc84 50%, #1e9e58); }
.iw-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%); }
.iw-wd__kits { display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.iw-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); }
.iw-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); }
.iw-kit__icon svg { width: 80%; height: 80%; }
.iw-kit small { display: block; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; opacity: .6; }
.iw-kit b { display: block; margin: .25em 0 .25em; font: 400 calc(var(--u) * 1.3) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-kit span { display: block; font: 500 var(--fs-xs) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #d0cadf; }

/* ------------------------------------------------------------------ HOW TO PLAY */
.iw-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; }
.iw-howto__rules { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.5); }
.iw-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); }
.iw-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); }
.iw-rule__art svg { width: 100%; height: 100%; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; box-shadow: 0 0 0 3px var(--k), 0 3px 0 3px rgba(0, 0, 0, .3); }
.iw-rule__title { padding: 0 calc(var(--u) * .4); font: 400 calc(var(--u) * 1.6) / 1.1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-rule__text { margin: calc(var(--u) * .4) 0 0; padding: 0 calc(var(--u) * .4); font: 500 var(--fs-s) / 1.38 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #d9d3e7; }
.iw-howto__ctl { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.2); }
.iw-ctl-switch { display: flex; margin: calc(var(--u) * 1) 0 calc(var(--u) * .8); border-radius: 999px; }
.iw-ctl-switch .iw-seg { width: 100%; }
.iw-segico { display: inline-flex; align-items: center; gap: .55em; }
.iw-segico i { display: block; width: 1.45em; height: 1.45em; }
.iw-segico i svg { width: 100%; height: 100%; }
.iw-ctl-wrap.is-in .iw-ctl__row { animation: iw-tip-in .4s var(--spring) backwards; }
.iw-ctl-wrap.is-in .iw-ctl__row:nth-child(2) { animation-delay: 25ms; } .iw-ctl-wrap.is-in .iw-ctl__row:nth-child(3) { animation-delay: 50ms; }
.iw-ctl-wrap.is-in .iw-ctl__row:nth-child(4) { animation-delay: 75ms; } .iw-ctl-wrap.is-in .iw-ctl__row:nth-child(5) { animation-delay: 100ms; }
.iw-ctl-wrap.is-in .iw-ctl__row:nth-child(6) { animation-delay: 125ms; } .iw-ctl-wrap.is-in .iw-ctl__row:nth-child(7) { animation-delay: 150ms; }
.iw-ctl-wrap.is-in .iw-ctl__row:nth-child(8) { animation-delay: 175ms; } .iw-ctl-wrap.is-in .iw-ctl__row:nth-child(9) { animation-delay: 200ms; }
.iw-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); }
.iw-ctl__row:last-child { border-bottom: 0; }
.iw-ctl__act { font: 700 var(--fs-m) / 1.15 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .85; vertical-align: .1em; }
.iw-ctl__keys { display: flex; align-items: center; flex: none; font-size: var(--fs-m); }
.iw-ctl__keys em { margin: 0 .35em; font: 700 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; opacity: .6; }
.iw-ctl--compact .iw-ctl__row { min-height: calc(var(--u) * 2.6); }

/* ------------------------------------------------------------------ CREDITS */
.iw-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%); }
.iw-cred__roll { position: absolute; left: 0; right: 0; top: 0; text-align: center; will-change: transform; }
.iw-cred__logo { margin-bottom: calc(var(--u) * 5); }
.iw-cred__lead { margin: 0 0 calc(var(--u) * 7); font: 600 var(--fs-l) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #e6e1f2; }
.iw-cred__sec { margin: 0 0 calc(var(--u) * 6.5); }
.iw-cred__sec h3 { margin: 0 0 calc(var(--u) * 1.1); font: 900 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--a); }
.iw-cred__sec p { margin: calc(var(--u) * .45) 0; font: 400 calc(var(--u) * 2) / 1.25 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-cred__sec p.dim { font: 500 var(--fs-m) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .7; }
.iw-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); }
.iw-cred__cast span { display: flex; align-items: center; justify-content: center; gap: .45em; font: 700 var(--fs-m) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-cred__cast i { display: block; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); color: var(--c); }
.iw-cred__cast i svg { width: 100%; height: 100%; }
.iw-cred__end { position: relative; display: grid; place-items: center; height: calc(var(--u) * 22); margin-top: calc(var(--u) * 5); isolation: isolate; }
.iw-cred__endsplat { position: absolute; z-index: -1; width: calc(var(--u) * 28); animation: iw-spin 40s linear infinite; }
.iw-cred__end .iw-display { font-size: calc(var(--u) * 4.8); }
@keyframes iw-spin { to { rotate: 360deg; } }

/* ------------------------------------------------------------------ PAUSE */
.iw-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: iw-fade .25s both; }
.iw-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); }
.iw-pause__title { position: relative; isolation: isolate; font-size: calc(var(--u) * 5); line-height: 1; padding-left: calc(var(--u) * .5); }
.iw-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); }
.iw-pause__menu { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.iw-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); }
.iw-pause__ref .iw-seclabel { margin-bottom: calc(var(--u) * .7); }

/* ------------------------------------------------------------------ MODAL */
.iw-modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8, 6, 14, .62); backdrop-filter: blur(5px); animation: iw-fade .2s both; }
.iw-modal.is-leaving { animation: iw-fade-out .2s forwards; pointer-events: none; }
@keyframes iw-fade-out { to { opacity: 0; } }
.iw-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: iw-pop .5s var(--spring) both; }
.iw-modal__splat { position: absolute; left: 50%; top: calc(var(--u) * -5.5); width: calc(var(--u) * 11); transform: translateX(-50%) rotate(-8deg); }
.iw-modal__title { font-size: calc(var(--u) * 3.3); }
.iw-modal__text { margin: calc(var(--u) * 1) auto calc(var(--u) * 2.2); max-width: 34em; font: 500 var(--fs-m) / 1.4 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); }
.iw-modal__btns { display: flex; justify-content: center; gap: calc(var(--u) * 1.3); }

/* ------------------------------------------------------------------ RESULTS */
.iw-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: iw-fade .6s both; }
.iw-res__head { position: absolute; left: calc(var(--u) * 3.8); top: calc(var(--u) * 2.6); isolation: isolate; }
.iw-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); }
.iw-res__splat svg { animation: iw-spin 60s linear infinite; }
.iw-res__title { font-size: calc(var(--u) * 6.6); line-height: 1; }
.iw-res__head.is-lose .iw-res__title { color: #ece8f6; rotate: 2deg; }
.iw-res__head.is-lose .iw-res__splat { filter: saturate(.55) brightness(.72); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-res__meta i { display: block; width: 1.4em; height: 1.4em; color: var(--ta); }
.iw-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); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; -webkit-text-stroke: .2em var(--k); paint-order: stroke fill; }
.iw-cover__names span { display: flex; align-items: center; gap: .4em; }
.iw-cover__names .ta { color: var(--ta); }
.iw-cover__names .tb { color: var(--tb); }
.iw-cover__names b { color: #fff; font-weight: 400; margin: 0 .2em; }
.iw-cover__names i { display: block; width: 1.3em; height: 1.3em; color: #ffd54a; filter: drop-shadow(0 2px 0 var(--k)); }
.iw-cover__names i svg { width: 100%; height: 100%; }
.iw-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); }
.iw-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 45%); pointer-events: none; }
.iw-cover__a, .iw-cover__b { position: absolute; top: 0; bottom: 0; }
.iw-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; }
.iw-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; }
.iw-cover__num { display: none; }
@keyframes iw-grow-l { from { clip-path: inset(0 100% 0 0); } }
@keyframes iw-grow-r { from { clip-path: inset(0 0 0 100%); } }
.iw-res__teams { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.6); }
.iw-ttable--a { --tc: var(--ta); --tc-rgb: var(--ta-rgb); }
.iw-ttable--b { --tc: var(--tb); --tc-rgb: var(--tb-rgb); }
.iw-ttable__head, .iw-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); }
.iw-ttable__head { padding: 0 calc(var(--u) * 1) calc(var(--u) * .35) calc(var(--u) * .5); font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; opacity: .85; }
.iw-ttable__team { grid-column: 1 / 3; display: flex; align-items: center; gap: .6em; text-transform: uppercase; }
.iw-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); }
.iw-ttable__col { display: flex; align-items: center; justify-content: center; gap: .35em; }
.iw-ttable__col:nth-child(2) { justify-content: flex-end; }
.iw-ttable__col i { display: block; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); color: var(--tc); }
.iw-ttable__col i svg { width: 100%; height: 100%; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-prow__w { height: calc(var(--u) * 2.3); color: var(--tc); }
.iw-prow__w svg { width: 100%; height: 100%; }
.iw-prow__name { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; letter-spacing: .08em; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-prow__turf small { font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .7; }
.iw-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; }
.iw-prow__n { text-align: center; font: 400 calc(var(--u) * 1.35) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-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); }
.iw-res__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: auto; }
.iw-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); }
.iw-lvl--big { position: relative; isolation: isolate; font-size: calc(var(--u) * 2.1); padding: .3em .55em .26em; }
.iw-lvl--big.is-pop { animation: iw-lvl-pop .6s var(--spring2); }
@keyframes iw-lvl-pop { 0% { scale: 1.6; rotate: -10deg; } }
.iw-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; }
.iw-lvl__burst svg { width: 100%; height: 100%; }
.iw-xp.is-levelup .iw-lvl__burst { animation: iw-burst 1s var(--out); }
@keyframes iw-burst { 0% { opacity: 1; scale: .2; rotate: -30deg; } 60% { opacity: 1; } 100% { opacity: 0; scale: 1.2; rotate: 20deg; } }
.iw-xp__mid { flex: 1; min-width: 0; }
.iw-xp__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: calc(var(--u) * .55); }
.iw-xp__gain { font: 400 calc(var(--u) * 1.75) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; }
.iw-xp__next { font: 600 var(--fs-s) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .75; white-space: nowrap; }
.iw-xpbar--big { height: calc(var(--u) * 1.4); }
.iw-results .iw-xpbar i { background: linear-gradient(180deg, var(--ta-light) -30%, var(--ta) 50%, var(--ta-dark)); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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; }
.iw-xp.is-levelup .iw-xp__lvup, .iw-xp.is-done.is-levelup .iw-xp__lvup { animation: iw-lvup .7s var(--spring2) forwards; }
@keyframes iw-lvup { 0% { opacity: 0; scale: .3; rotate: -20deg; } 40% { opacity: 1; scale: 1.35; rotate: -2deg; } 100% { opacity: 1; scale: 1; rotate: -5deg; } }
.iw-res__btns { display: flex; gap: calc(var(--u) * 1.2); }
.iw-results .iw-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); }
.iw-results .iw-btn:not(.iw-btn--primary) { --fill: var(--ta); --fill-ink: var(--ta-ink); }
.iw-results .iw-btn--primary.is-focus, .iw-btn--primary.is-focus { color: var(--fill-ink); }

/* ------------------------------------------------------------------ WIPE */
.iw-wipe { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; visibility: hidden; }
.iw-wipe.is-run { visibility: visible; }
.iw-wipe__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iw-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; }
.iw-wipe__squid { position: absolute; inset: 0; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.iw-wipe__squid svg { width: 100%; height: 100%; }
.iw-wipe__ring { position: absolute; inset: -18%; border-radius: 50%; border: calc(var(--u) * .5) solid rgba(255, 255, 255, .85); opacity: 0; }
.iw-wipe__mark.is-on { animation: iw-wipe-mark 1s linear forwards; }
.iw-wipe__mark.is-on .iw-wipe__ring { animation: iw-wipe-ring 1s var(--out) forwards; }
@keyframes iw-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 iw-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 */
.iw-ico-cut { stroke: var(--cut, #fff); }
circle.iw-ico-cut { fill: var(--cut, #fff); }

/* DOM ink burst (inkBurst in menu-art.js) */
.iw-burst { position: absolute; width: 0; height: 0; z-index: 45; pointer-events: none; color: var(--c); }
.iw-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: iw-burst-splat .75s var(--out) forwards; }
.iw-burst__splat svg { width: 100%; height: 100%; filter: drop-shadow(0 0 0 var(--k)); }
@keyframes iw-burst-splat { 0% { opacity: 1; scale: .15; rotate: -40deg; } 30% { opacity: .95; scale: 1.08; } 100% { opacity: 0; scale: 1.25; rotate: 10deg; } }
.iw-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: iw-burst-ring .6s var(--out) forwards; }
@keyframes iw-burst-ring { 0% { opacity: 1; scale: .2; } 100% { opacity: 0; scale: 1.5; border-width: 1px; } }
.iw-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: iw-burst-drop var(--t) cubic-bezier(.2, .75, .35, 1) forwards; }
@keyframes iw-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 .iw-btn__blob), press squash */
.iw-btn.is-hover:not(.is-focus) .iw-btn__blob { transform: translate(-50%, -50%) scale(.08) rotate(-20deg); }

/* ------------------------------------------------------------------ title */
.iw-title__logoin { position: relative; }
.iw-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; }
.iw-title.is-go .iw-title__shock { animation: iw-title-shock .65s var(--out) forwards; }
.iw-title.is-go .iw-title__logoin { animation: iw-title-go .45s var(--spring); }
@keyframes iw-title-shock { 0% { opacity: 1; scale: .25; } 100% { opacity: 0; scale: 1.25; border-width: 1px; } }
@keyframes iw-title-go { 0% { scale: 1; } 30% { scale: 1.09 .9; } 62% { scale: .97 1.05; } 100% { scale: 1; } }

/* ------------------------------------------------------------------ main */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-main__descdot { flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 2px var(--k); animation: iw-descdot 1.6s ease-in-out infinite; }
@keyframes iw-descdot { 50% { scale: 1.35; box-shadow: 0 0 0 2px var(--k), 0 0 10px var(--a); } }
.iw-main__desc.is-swap .iw-main__desctext { animation: iw-tip-in .35s var(--spring); }
.iw-profile__emblem { display: block; flex: none; width: 1.75em; height: 1.75em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.iw-profile__emblem svg { width: 100%; height: 100%; }
.iw-profile__stats .iw-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); }
.iw-profile__next span { font: 900 calc(var(--u) * .6) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; opacity: .75; }
.iw-profile__next b { font: 400 calc(var(--u) * 1.2) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--a-light); }
.iw-xpbar--shine { overflow: hidden; }
.iw-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: iw-glint 3.2s ease-in-out infinite 1s; }
@keyframes iw-glint { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

/* ------------------------------------------------------------------ setup: map cards (3D tilt, pan, glare, own focus ring) */
.iw-mapcard { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg)); }
.iw-mapcard.is-hover { transition: transform .2s var(--out), box-shadow .25s; }
.iw-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); }
.iw-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); }
.iw-mapcard.is-down { scale: .97; }
.iw-mapcard__art { position: relative; }
.iw-mapcard__art svg, .iw-mapcard.is-focus .iw-mapcard__art svg { transform: none; }
.iw-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%)); }
.iw-mapcard.is-focus .iw-mapcard__pan, .iw-mapcard.is-hover .iw-mapcard__pan { transform: translate(calc(var(--px, 0) * -6%), calc(var(--py, 0) * -6%)) scale(1.07); }
.iw-mapcard__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 9, 22, 0) 58%, rgba(12, 9, 22, .38)); }
.iw-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%); }
.iw-mapcard.is-hover .iw-mapcard__glare, .iw-mapcard.is-focus .iw-mapcard__glare { opacity: 1; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-mapcard.is-sel .iw-mapcard__sel { opacity: 1; scale: 1; }
/* START: charge-up bar, ready chip, running chevrons */
.iw-btn--start .iw-btn__sub { max-width: calc(var(--u) * 17.5); }
.iw-btn--start .iw-btn__text { min-width: 0; }
.iw-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; }
.iw-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: iw-charge-up 1.1s cubic-bezier(.35, .1, .2, 1) .45s backwards; }
.iw-btn--start.is-recharge .iw-start__charge i { animation: iw-charge-up .65s cubic-bezier(.35, .1, .2, 1) backwards; }
@keyframes iw-charge-up { from { transform: scaleX(0); } }
.iw-btn--start:not(.is-focus) .iw-start__charge i { background: linear-gradient(90deg, rgba(var(--a-rgb), .6), var(--a)); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; animation: iw-pop .45s var(--spring2) backwards 1.55s; }
.iw-start__ready i { display: block; width: 1.25em; height: 1.25em; }
.iw-btn--start.is-recharge .iw-start__ready { animation: iw-pop .45s var(--spring2) backwards .6s; }
.iw-start__chev { position: absolute; right: calc(var(--u) * 1.4); top: 58%; translate: 0 -50%; display: flex; }
.iw-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: iw-chev 1.1s ease-in-out infinite; }
.iw-start__chev i:nth-child(2) { animation-delay: .14s; } .iw-start__chev i:nth-child(3) { animation-delay: .28s; }
@keyframes iw-chev { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ------------------------------------------------------------------ loadout: weapon cards + detail */
.iw-wcard { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg)); }
.iw-wcard.is-hover { transition: transform .18s var(--out), box-shadow .25s; }
.iw-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); }
.iw-wcard.is-down { scale: .95; }
.iw-wcard__icon { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 7px); }
.iw-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%); }
.iw-wcard.is-hover .iw-wcard__ink, .iw-wcard.is-focus .iw-wcard__ink { opacity: 1; }
.iw-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%)); }
.iw-wcard.is-hover .iw-wcard__glare, .iw-wcard.is-focus .iw-wcard__glare { opacity: 1; }
.iw-wd__badges { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.iw-wd__cmp b { color: #fff; font-weight: 900; }
.iw-wd.is-compare .iw-wd__cmp { display: inline-flex; animation: iw-pop .35s var(--spring); }
.iw-stat__num { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.iw-stat__num.is-up { color: #7dffb0; }
.iw-stat__num.is-down { color: #ff8a9a; }
.iw-stat__bar.is-down .iw-stat__fill { background: linear-gradient(180deg, #ffc2cb -30%, #ff5a74 50%, #c22a44); }
.iw-wd.is-enter .iw-stat { animation: iw-tip-in .45s var(--spring) backwards; animation-delay: calc(var(--i) * 60ms + 200ms); }

/* ------------------------------------------------------------------ settings: rows, controls, saved chip */
.iw-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; }
.iw-row.is-focus .iw-row__pip { background: var(--a); scale: 1.45; box-shadow: 0 0 8px rgba(var(--a-rgb), .9); }
.iw-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; }
.iw-slider__knob { z-index: 2; }
.iw-toggle__ink { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.iw-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; }
.iw-toggle.is-flip.is-on .iw-toggle__ink::before { animation: iw-toggle-ink .55s var(--out); }
.iw-toggle.is-flip .iw-toggle__knob { animation: iw-knob-squash .45s var(--spring); }
@keyframes iw-toggle-ink { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes iw-knob-squash { 30% { scale: 1.3 .8; } }
.iw-saved { display: flex; align-items: center; gap: .5em; font: 700 var(--fs-s) / 1.2 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); }
.iw-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; }
.iw-saved i svg { width: 100%; height: 100%; }
.iw-saved.is-on { color: #fff; animation: iw-saved-pop .6s var(--spring); }
.iw-saved.is-on i { background: #3ddc84; color: var(--k); }
@keyframes iw-saved-pop { 0% { scale: .9; } 40% { scale: 1.06; } }

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

/* ------------------------------------------------------------------ pause: live match panel */
.iw-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); }
.iw-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); }
.iw-pmatch__top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); }
.iw-pmatch__info { display: flex; flex-direction: column; gap: calc(var(--u) * .65); min-width: 0; }
.iw-pmatch__mode { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; rotate: -2deg;
  box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px var(--k); }
.iw-pmatch__diff { display: flex; align-items: center; gap: .4em; font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.iw-pmatch__diff i { display: block; width: 1.35em; height: 1.35em; color: var(--self); }
.iw-pmatch__diff i svg, .iw-pmatch__map i svg { width: 100%; height: 100%; }
.iw-pmatch__map { display: flex; align-items: center; gap: .45em; font: 400 calc(var(--u) * 1.55) / 1.05 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-pmatch__map i { display: block; flex: none; width: 1.1em; height: 1.1em; color: var(--self); }
.iw-pclock { --clk: var(--self); position: relative; flex: none; width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); }
.iw-pclock.is-low { --clk: #ff4d6a; }
.iw-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%); }
.iw-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; }
.iw-pclock__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; }
.iw-pclock__num { font: 400 calc(var(--u) * 1.6) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; }
.iw-pclock__txt small { font: 900 calc(var(--u) * .56) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; opacity: .7; }
.iw-pclock.is-low .iw-pclock__num { color: #ff8a9a; }
.iw-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); }
.iw-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)); }
.iw-pyou__av svg { width: 100%; height: 100%; }
.iw-pyou__id { display: flex; flex-direction: column; gap: .3em; min-width: 0; flex: 1; }
.iw-pyou__id small { font: 900 calc(var(--u) * .6) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; opacity: .75; }
.iw-pyou__id b { font: 400 calc(var(--u) * 1.4) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-pyou__stats { display: flex; gap: calc(var(--u) * .45); }
.iw-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; }
.iw-pstat > i { display: block; width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); color: var(--self); }
.iw-pstat > i svg { width: 100%; height: 100%; }
.iw-pstat > b { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iw-pstat > b small { font: 900 .55em / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .7; margin-left: .1em; }
.iw-pstat > small { font: 900 calc(var(--u) * .5) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; opacity: .65; }
.iw-pstat--sp::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--sp, 0) * 100%); background: var(--self); }
.iw-pstat--sp.is-ready { background: var(--self); color: var(--self-ink); animation: iw-sp-ready 1s ease-in-out infinite; }
.iw-pstat--sp.is-ready > i { color: var(--self-ink); }
@keyframes iw-sp-ready { 50% { box-shadow: 0 0 12px var(--self); } }
.iw-pteams { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); }
.iw-roster--a { --tc: var(--ta); --tc-rgb: var(--ta-rgb); }
.iw-roster--b { --tc: var(--tb); --tc-rgb: var(--tb-rgb); }
.iw-roster__head { display: flex; align-items: center; gap: .5em; margin-bottom: calc(var(--u) * .3); font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.iw-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; }
.iw-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); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; transition: opacity .3s, background .3s, box-shadow .3s; }
.iw-rrow__w { height: calc(var(--u) * 1.9); color: var(--tc); }
.iw-rrow__w svg { width: 100%; height: 100%; }
.iw-rrow__name { display: flex; align-items: center; gap: .45em; min-width: 0; white-space: nowrap; overflow: hidden; }
.iw-rrow__name em { flex: none; padding: .2em .4em; border-radius: .35em; background: #fff; color: var(--k); font: 900 calc(var(--u) * .56) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; letter-spacing: .08em; }
.iw-rrow.is-self { background: rgba(var(--tc-rgb), .24); box-shadow: inset 0 0 0 2px var(--tc); }
.iw-rrow.is-dead { opacity: .55; }
.iw-rrow.is-dead .iw-rrow__w { filter: grayscale(1); }
.iw-rrow.is-sp { box-shadow: inset 0 0 0 2px var(--tc), 0 0 12px rgba(var(--tc-rgb), .45); }
.iw-st { display: inline-flex; align-items: center; gap: .35em; font: 900 calc(var(--u) * .66) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .08em; }
.iw-st i { display: block; width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
.iw-st i svg { width: 100%; height: 100%; }
.iw-st--alive i { color: var(--tc); }
.iw-st--dead { color: #ff9aa9; }
.iw-st--dead i { color: #b7b0c9; }
.iw-st--sp { color: var(--tc); animation: iw-st-sp 1s ease-in-out infinite; }
.iw-st--sp i { color: var(--tc); }
@keyframes iw-st-sp { 50% { opacity: .55; } }
.iw-pctl .iw-seclabel { margin-bottom: calc(var(--u) * .35); }
.iw-pctl .iw-ctl { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 1.6); }
.iw-pctl .iw-ctl__row { min-height: calc(var(--u) * 2.35); }
.iw-pctl .iw-ctl__row:nth-last-child(2) { border-bottom: 0; }
.iw-pctl .iw-ctl__act { font-size: var(--fs-s); }
.iw-pctl .iw-ctl__keys { font-size: var(--fs-s); }

/* ------------------------------------------------------------------ results: head, tags, medals */
.iw-res__head { right: calc(var(--u) * 3.8); }
.iw-res__title { display: inline-block; }
.iw-res__metarow { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .9); }
.iw-res__metarow .iw-res__meta { margin-top: 0; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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: iw-pop .5s var(--spring2) backwards 1.2s; }
.iw-res__tag i { display: block; flex: none; width: 1.45em; height: 1.45em; color: var(--k); }
.iw-res__tag i svg { width: 100%; height: 100%; }
.iw-res__tag small { font: 900 .72em / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .75; }
.iw-res__tag--landslide { background: var(--tw); color: var(--tw-ink); }
.iw-res__tag--landslide i { color: var(--tw-ink); }
.iw-res__medals { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .7); }
.iw-res__medalcap { padding: .4em .85em; border-radius: 999px; background: rgba(14, 11, 22, .82); font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .18em; animation: iw-pop .4s var(--spring) backwards 2s; }
.iw-res__medallist { display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: calc(var(--u) * .5) calc(var(--u) * .6); }
.iw-res__medallist .iw-medal:only-child { grid-column: 2; }
.iw-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; }
.iw-medal.is-silver { --m1: #ffffff; --m2: #b9c3d8; --m3: #5d6780; --cut: #ffffff; }
.iw-medal.is-bronze { --m1: #ffd3b0; --m2: #d9824a; --m3: #7a3e18; --cut: #ffe6d4; }
.iw-medal.is-in { animation: iw-medal-stamp .7s var(--spring2) forwards; }
.iw-medal.is-shown { opacity: 1; }
@keyframes iw-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; } }
.iw-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; }
.iw-medal__burst svg { width: 100%; height: 100%; }
.iw-medal.is-in .iw-medal__burst { animation: iw-medal-burst .8s var(--out); }
@keyframes iw-medal-burst { 0% { scale: .2; rotate: -60deg; } 55% { scale: 1.12; } 100% { scale: 1; rotate: 0deg; } }
.iw-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; }
.iw-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%); }
.iw-medal__ribbon i:first-child { left: calc(var(--u) * .15); rotate: 16deg; }
.iw-medal__ribbon i:last-child { right: calc(var(--u) * .15); rotate: -16deg; filter: brightness(.82); }
.iw-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); }
.iw-medal__face { display: block; width: 58%; height: 58%; color: var(--m3); }
.iw-medal__face svg { width: 100%; height: 100%; filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, .45)); }
.iw-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%); }
.iw-medal.is-in .iw-medal__shine, .iw-medal.is-shown .iw-medal__shine { animation: iw-medal-shine 3.4s ease-in-out infinite .7s; }
@keyframes iw-medal-shine { 0% { transform: translateX(-130%); } 32%, 100% { transform: translateX(130%); } }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28); }
.iw-medal__val { margin-top: calc(var(--u) * .3); font: 800 calc(var(--u) * .68) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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 */
.iw-cover__names b { font-variant-numeric: tabular-nums; }
.iw-cover__crown { opacity: 0; scale: .3; }
.iw-res__cover.is-landed .iw-cover__crown { animation: iw-crown-in .6s var(--spring2) forwards; }
@keyframes iw-crown-in { 0% { opacity: 0; scale: .3; rotate: -30deg; } 60% { opacity: 1; scale: 1.3; } 100% { opacity: 1; scale: 1; rotate: -8deg; } }
.iw-res__cover.is-landed .iw-cover { animation: iw-cover-land .45s var(--spring); }
@keyframes iw-cover-land { 30% { scale: 1.012 1.25; } }
.iw-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); }
.iw-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%); }
.iw-res__cover.is-landed .iw-cover__shine { animation: iw-cover-shine 1.1s var(--out) .1s; }
@keyframes iw-cover-shine { to { transform: translateX(110%); } }
/* tables */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; letter-spacing: .08em; rotate: -3deg; box-shadow: 0 0 0 2px var(--k); }
.iw-ttable__win i { display: block; width: 1.25em; height: 1.25em; }
.iw-ttable__win i svg { width: 100%; height: 100%; }
.iw-prow__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.iw-prow__name em { flex: none; }
.iw-prow__aw { display: inline-flex; flex: none; gap: .25em; margin-left: .45em; }
.iw-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: iw-aw-in .45s var(--spring2) backwards; }
.iw-aw.is-silver { --m1: #ffffff; --m2: #b9c3d8; --m3: #5d6780; --cut: #ffffff; }
.iw-aw.is-bronze { --m1: #ffd3b0; --m2: #d9824a; --m3: #7a3e18; --cut: #ffe6d4; }
.iw-aw svg { width: 68%; height: 68%; }
@keyframes iw-aw-in { from { opacity: 0; scale: .2; rotate: -40deg; } }
.iw-prow.is-mvp { box-shadow: inset 0 0 0 2px #ffd54a, 0 0 14px rgba(255, 213, 74, .3); }
.iw-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); }
.iw-prow__n { transition: opacity .25s, scale .35s var(--spring2); }
.iw-prow__n.is-wait { opacity: 0; scale: .4; }
.iw-prow.is-counted .iw-prow__turf b { animation: iw-count-pop .35s var(--spring2); }
@keyframes iw-count-pop { 0% { scale: 1.35; } }
.iw-prow__turfbar { transition: none; }
/* xp breakdown */
.iw-xp.has-bd { padding-top: calc(var(--u) * .7); padding-bottom: calc(var(--u) * .7); }
.iw-xp__bd { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5) calc(var(--u) * 1.1); margin-top: calc(var(--u) * .55); }
.iw-xpb { display: inline-flex; align-items: baseline; gap: .4em; opacity: 0; translate: 0 calc(var(--u) * .4); transition: opacity .25s, translate .35s var(--spring); }
.iw-xpb.is-in { opacity: 1; translate: 0 0; }
.iw-xpb small { font: 900 calc(var(--u) * .6) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; opacity: .7; }
.iw-xpb b { font: 400 calc(var(--u) * 1) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--ta-light); }


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

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

/* ------------------------------------------------------------------ settings previews: aim assist, vibration */
.iw-pv-aim__trail { stroke: rgba(var(--a-rgb), .9); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.iw-pv-aimm__row { display: flex; gap: calc(var(--u) * 1.4); }
.iw-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; }
.iw-pv-aimm__dev svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); color: #fff; }
.iw-pv-aimm__dev .iw-mouse { width: calc(var(--u) * 2.9); height: calc(var(--u) * 3.3); }
.iw-pv-aimm__dev b { font: 900 calc(var(--u) * .62) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; padding: .3em .55em; border-radius: 999px; background: var(--a); color: var(--a-ink); }
.iw-pv-aimm__dev.is-pad { background: rgba(var(--a-rgb), .18); box-shadow: inset 0 0 0 2px var(--a); }
.iw-pv--aimm:not(.is-on) .iw-pv-aimm__dev.is-mouse { opacity: .4; }
.iw-pv--aimm:not(.is-on) .iw-pv-aimm__dev.is-mouse b { background: rgba(255, 255, 255, .2); color: #fff; }
.iw-pv--aimm.is-on .iw-pv-aimm__dev.is-mouse { background: rgba(var(--a-rgb), .12); box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .6); }
.iw-pv-rumble__pad { position: relative; width: calc(var(--u) * 7); height: calc(var(--u) * 7); color: #fff; }
.iw-pv-rumble__pad svg { width: 100%; height: 100%; }
.iw-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; }
.iw-pv-rumble__pad i.l { left: calc(var(--u) * -2); border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.iw-pv-rumble__pad i.r { right: calc(var(--u) * -2); border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.iw-pv--rumble.is-buzz .iw-pv-rumble__pad i { animation: iw-rumble-wave .5s var(--out); }
@keyframes iw-rumble-wave { 0% { opacity: 1; scale: .6; } 100% { opacity: 0; scale: 1.5; } }
.iw-pv--rumble.is-off .iw-pv-rumble__pad { opacity: .4; }
/* loadout opened on top of a paused match: keep the right side (3D squidkid) crisp and bright */
.iw-loadout .iw-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 */
.iw-results .iw-res__body { top: 46%; bottom: calc(var(--u) * 5.6); transition: translate .75s var(--spring), opacity .35s var(--out); }
.iw-results.is-intro .iw-res__body { translate: 0 calc(var(--u) * 34); opacity: 0; pointer-events: none; transition: none; }
.iw-results.is-intro .iw-res__medals { opacity: 0; }
.iw-results .iw-res__medals { transition: opacity .3s; }
.iw-results .iw-prow { height: calc(var(--u) * 2.42); margin-top: calc(var(--u) * .26); }
.iw-results .iw-xp { padding-top: calc(var(--u) * .6); padding-bottom: calc(var(--u) * .6); }
.iw-results .iw-btn--wide { height: calc(var(--u) * 4.6); }
.iw-results .iw-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; }
.iw-results.is-intro .iw-res__scrim { opacity: .35; }


/* =====================================================================================
   STAGE SELECT (setup) — Splatoon-style stage tickets, big hero render with a DAY / DUSK switch
   ===================================================================================== */
.iw-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); }
.iw-head { left: calc(var(--u) * 3.4 + var(--sal)); top: calc(var(--u) * 2.2 + var(--sat)); }
.iw-prompts { right: calc(var(--u) * 2.6 + var(--sar)); bottom: calc(var(--u) * 1.9 + var(--sab)); }
.iw-corner--bl { left: calc(var(--u) * 3.4 + var(--sal)); } .iw-corner--br { right: calc(var(--u) * 3.4 + var(--sar)); }

/* background: the selected stage, blurred + graded, over the live arena */
.iw-ss__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.iw-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: iw-ss-drift 26s ease-in-out infinite alternate; }
.iw-ss__bgimg.is-on { opacity: .94; }
@keyframes iw-ss-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, 1.5%); } }
.iw-ss__scrim { position: absolute; inset: 0; pointer-events: none; animation: iw-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%); }
.iw-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%); }
.iw-ss[data-time="dusk"] .iw-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 */
.iw-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); }
.iw-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; }
.iw-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; }
.iw-ticket.is-hover { transition: transform .2s var(--out), box-shadow .25s; }
.iw-ticket__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #20325a; }
.iw-ticket__fallback { position: absolute; inset: 0; display: block; }
.iw-ticket__fallback svg { width: 100%; height: 100%; }
.iw-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); }
.iw-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); }
.iw-ticket.is-dusk .iw-ticket__img.is-dusk { clip-path: inset(0 0 0 0); }
.iw-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; }
.iw-ticket.is-focus .iw-ticket__shade, .iw-ticket.is-sel .iw-ticket__shade { opacity: .88; }
.iw-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; }
.iw-ticket__ink svg { width: 100%; height: 100%; }
.iw-ticket.is-sel .iw-ticket__ink { transform: scale(1) rotate(0deg); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-ticket.is-sel .iw-ticket__num { background: var(--a); color: var(--a-ink); scale: 1.1; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .01em;
  -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--k); }
.iw-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); }
.iw-ticket__time:hover { transform: scale(1.12) rotate(-8deg); }
.iw-ticket__time i { position: absolute; width: 62%; height: 62%; transition: transform .5s var(--spring2), opacity .25s; }
.iw-ticket__time svg { width: 100%; height: 100%; }
.iw-ticket__sun { color: #ffd45a; }
.iw-ticket__moon { color: #ffe8b8; opacity: 0; transform: translateY(120%) rotate(60deg); }
.iw-ticket.is-dusk .iw-ticket__time { background: rgba(60, 24, 80, .82); }
.iw-ticket.is-dusk .iw-ticket__sun { opacity: 0; transform: translateY(120%) rotate(-60deg); }
.iw-ticket.is-dusk .iw-ticket__moon { opacity: 1; transform: none; }
.iw-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); }
.iw-ticket__check svg { width: 62%; height: 62%; }
.iw-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); }
.iw-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); }
.iw-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); }
.iw-ticket.is-down { scale: .97; }
.iw-ticket.is-pick { animation: iw-ticket-pick .5s var(--spring); }
@keyframes iw-ticket-pick { 0% { scale: .94; } 45% { scale: 1.05; } }
.iw-ticket.is-timeflip .iw-ticket__time { animation: iw-ticket-tflip .55s var(--spring2); }
@keyframes iw-ticket-tflip { 0% { scale: .6; rotate: -90deg; } }
.iw-ticket.is-noart .iw-ticket__img { display: none; }
.iw-ticket__check { display: none; }
.iw-ticket:not(.is-sel) .iw-ticket__art { filter: saturate(.55) brightness(.78); transition: filter .35s; }
.iw-ticket:not(.is-sel).is-focus .iw-ticket__art, .iw-ticket:not(.is-sel).is-hover .iw-ticket__art { filter: none; }
.iw-ticket.is-sel { translate: calc(var(--u) * .8) 0; transition: transform .42s var(--spring), box-shadow .25s, translate .45s var(--spring); }
.iw-ticket { transition: transform .42s var(--spring), box-shadow .25s, translate .45s var(--spring); }
.iw-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: iw-nudge-r 1.1s ease-in-out infinite; }

.iw-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); }
.iw-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); }
.iw-setrow--stack .iw-seg { min-width: 0; width: 100%; }
.iw-setrow--stack .iw-seg__opt { padding: calc(var(--u) * .55) calc(var(--u) * .3); font-size: var(--fs-xs); }
.iw-ss__match .iw-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 */
.iw-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); }
.iw-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: iw-ss-splat 30s linear infinite; }
.iw-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; }
.iw-ss__splat svg { width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .3)); }
@keyframes iw-ss-splat { to { rotate: 360deg; } }
.iw-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; }
.iw-ss__frame.is-hover { transition: transform .25s var(--out); }
.iw-ss__frame.is-hit { animation: iw-ss-hit .55s var(--spring); }
.iw-ss__frame.is-flip { animation: iw-ss-flip .6s var(--spring); }
@keyframes iw-ss-hit { 0% { scale: .975; } 40% { scale: 1.012; } }
@keyframes iw-ss-flip { 0% { scale: .99; } 50% { scale: 1.006; } }
.iw-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); }
.iw-ss__layer, .iw-ss__ink { position: absolute; inset: -3%; will-change: clip-path; }
.iw-ss__layer { animation: iw-ss-kb 22s ease-in-out infinite alternate; }
.iw-ss__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes iw-ss-kb { from { transform: scale(1.02); } to { transform: scale(1.085) translate(-1.2%, .6%); } }
.iw-ss__layer.is-fade { animation: iw-fade .3s both, iw-ss-kb 22s ease-in-out infinite alternate; }
.iw-ss__fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #7fe3f5, #1e76cf); }
.iw-ss__fallback svg { width: 100%; height: 100%; }
.iw-ss__layer[data-time="dusk"] .iw-ss__fallback svg { filter: sepia(.4) hue-rotate(-28deg) saturate(1.4) brightness(.8); }
.iw-ss__ink { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 32%), var(--a); }
.iw-ss__ink.is-b { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .4), transparent 32%), var(--b); }
.iw-ss__ink.is-time.is-dusk { background: linear-gradient(160deg, #ffd29a 0%, #ff8c5a 30%, #c84a9a 62%, #4a2a8a 100%); }
.iw-ss__ink.is-time.is-day { background: linear-gradient(160deg, #fffbe0 0%, #9fe6ff 38%, #3aa4ec 75%, #2468c8 100%); }
/* atmosphere over the render */
.iw-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: iw-ss-sun 7s ease-in-out infinite alternate; }
.iw-ss__hero[data-time="dusk"] .iw-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 iw-ss-sun { to { scale: 1.12; opacity: .7; } }
.iw-ss__stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s .15s; }
.iw-ss__hero[data-time="dusk"] .iw-ss__stars { opacity: 1; }
.iw-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: iw-ss-twinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--d) * -1); filter: drop-shadow(0 0 4px #ffe6b0); }
@keyframes iw-ss-twinkle { 0%, 100% { opacity: .15; scale: .6; } 50% { opacity: .95; scale: 1; } }
.iw-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: iw-ss-glare 7.5s var(--out) infinite 1.4s; }
@keyframes iw-ss-glare { 0% { background-position: 130% 0; } 22%, 100% { background-position: -40% 0; } }
.iw-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%); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; transform: rotate(-2.5deg); box-shadow: 0 calc(var(--u) * .2) 0 rgba(0, 0, 0, .35); }
.iw-ss__count b { font: 400 calc(var(--u) * 1.35) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .02em; color: var(--a); }
.iw-ss__count em { font-style: normal; opacity: .6; }
.iw-ss__count.is-in { animation: iw-pop .45s var(--spring2); }
.iw-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); }
.iw-ss__layout.is-in { animation: iw-ss-sticker .55s var(--spring2); }
@keyframes iw-ss-sticker { 0% { scale: .6; rotate: -12deg; opacity: 0; } 60% { opacity: 1; } }
.iw-ss__layoutmap { display: block; aspect-ratio: 2.15 / 1; border-radius: calc(var(--u) * .6); overflow: hidden; }
.iw-ss__layoutmap svg { width: 100%; height: 100%; }
.iw-ss__hero[data-time="dusk"] .iw-ss__layoutmap svg { filter: sepia(.35) hue-rotate(-25deg) saturate(1.3) brightness(.86); transition: filter .6s; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; }
.iw-ss__layoutlbl i { display: block; width: 1.3em; height: 1.3em; color: var(--a); }
.iw-ss__layoutlbl i svg { width: 100%; height: 100%; }
/* caption: stage name on black tape + blurb */
.iw-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; }
.iw-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%); }
.iw-ss__name { font: 400 calc(var(--u) * 3.6) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.iw-ss__word { display: inline-block; white-space: nowrap; }
.iw-ss__name span span { display: inline-block; }
.iw-ss__caption.is-in .iw-ss__name span span { animation: iw-ss-letter .5s var(--spring2) backwards; animation-delay: calc(var(--i) * 24ms); }
@keyframes iw-ss-letter { 0% { opacity: 0; translate: 0 .5em; scale: .4; rotate: -12deg; } 60% { opacity: 1; } }
.iw-ss__caption.is-in .iw-ss__tape { animation: iw-ss-tape .45s var(--spring); }
@keyframes iw-ss-tape { 0% { clip-path: polygon(1.2% 6%, 1.2% 0, 0 100%, 0 100%); } }
.iw-ss__blurb { max-width: calc(var(--u) * 38); padding: 0 calc(var(--u) * .3); font: 600 var(--fs-m) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #f2eefb; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .5); }
.iw-ss__caption.is-in .iw-ss__blurb { animation: iw-tip-in .5s var(--spring) .12s backwards; }
/* drips off the frame's bottom edge */
.iw-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; }
.iw-ss__drips svg { width: 100%; height: 100%; overflow: visible; }
.iw-ss__drip path { transform-box: fill-box; transform-origin: 50% 0; animation: iw-drip 4.6s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(var(--d) * -.77s); }

/* DAY / DUSK switch */
.iw-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; }
.iw-ss__timehead { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: var(--fs-xs); }
.iw-ss__timehead small { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; opacity: .8; }
.iw-ss__timehead .iw-hint { font-size: .85em; opacity: .9; }
.iw-ss__timetext { font: 600 var(--fs-xs) / 1.2 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); padding: 0 calc(var(--u) * .2); }
.iw-ss__timetext.is-in { animation: iw-tip-in .4s var(--spring); }
.iw-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); }
.iw-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); }
.iw-daytgl__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #7fdcff 0%, #36a6ef 100%); }
.iw-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%); }
.iw-daytgl[data-time="dusk"] .iw-daytgl__sky::after { opacity: 1; }
.iw-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: iw-daytgl-cloud 6s ease-in-out infinite alternate; }
.iw-daytgl__cloud::before { content: ''; position: absolute; left: 22%; bottom: 40%; width: 48%; height: 110%; border-radius: 50%; background: inherit; }
.iw-daytgl__cloud.is-2 { left: 84%; top: 12%; width: 10%; height: 18%; opacity: .6; animation-delay: -3s; }
.iw-daytgl[data-time="dusk"] .iw-daytgl__cloud { opacity: 0; translate: 40% 0; }
@keyframes iw-daytgl-cloud { to { translate: -12% 0; } }
.iw-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%); }
.iw-daytgl[data-time="dusk"] .iw-daytgl__star { opacity: .9; animation: iw-ss-twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.iw-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); }
.iw-daytgl[data-time="dusk"] .iw-daytgl__thumb { transform: translateX(100%); }
.iw-daytgl.is-flip .iw-daytgl__thumb { animation: iw-daytgl-squish .5s var(--spring); }
@keyframes iw-daytgl-squish { 25% { scale: 1.12 .78; } }
.iw-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; }
.iw-daytgl__thumb i svg { width: 100%; height: 100%; }
.iw-daytgl__sunico { color: #ffb21a; filter: drop-shadow(0 1px 0 rgba(150, 80, 0, .45)); animation: iw-spin 12s linear infinite; }
.iw-daytgl__moonico { color: #6a4ad6; opacity: 0; transform: translateY(80%) rotate(-70deg) scale(.5); }
.iw-daytgl[data-time="dusk"] .iw-daytgl__sunico { opacity: 0; transform: translateY(90%) rotate(90deg) scale(.4); }
.iw-daytgl[data-time="dusk"] .iw-daytgl__moonico { opacity: 1; transform: none; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; color: #fff; -webkit-text-stroke: .22em rgba(16, 24, 60, .55); paint-order: stroke fill; transition: color .3s; }
.iw-daytgl__opt.is-day { left: 0; }
.iw-daytgl__opt.is-dusk { right: 0; }
.iw-daytgl__opt.is-on { color: var(--k); -webkit-text-stroke: 0 transparent; }
.iw-daytgl.is-edge-l, .iw-daytgl.is-edge-r { animation: iw-shake .3s; }

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

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

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

/* =====================================================================================
   LOCKER — choose + customise your squidkid (live 3D kid on the pedestal to the right)
   ===================================================================================== */
.iw-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); }
.iw-ltabs { margin-bottom: 0; }
.iw-ltabs .iw-tab { font-size: var(--fs-s); letter-spacing: .08em; }
.iw-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); }
.iw-lgrids { height: calc(var(--u) * 23.2); display: flex; flex-direction: column; gap: calc(var(--u) * .85); }
.iw-lsec { display: flex; flex-direction: column; gap: calc(var(--u) * .75); animation: iw-row-in .45s var(--spring) backwards; }
.iw-lsec + .iw-lsec { animation-delay: 60ms; } .iw-lsec + .iw-lsec + .iw-lsec { animation-delay: 120ms; }
.iw-lsec__title { display: flex; align-items: baseline; justify-content: space-between; padding: 0 calc(var(--u) * .2); font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .9); }
.iw-lsec__title small { font: 800 calc(var(--u) * .62) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; opacity: .5; }
.iw-lgrid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(var(--u) * .7); }
.iw-lgrid--swatch { gap: calc(var(--u) * .6); }
.iw-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; }
.iw-ltile.is-hover { transition: transform .18s var(--out), box-shadow .25s; }
.iw-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; }
.iw-ltile--body { aspect-ratio: .86; }
.iw-ltile--bust { aspect-ratio: 1; }
.iw-ltile--iris, .iw-ltile--skin { border-radius: 50%; }
.iw-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; }
.iw-ltile__blob svg { width: 100%; height: 100%; }
.iw-ltile.is-on .iw-ltile__blob { transform: scale(1) rotate(0deg); }
.iw-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); }
.iw-ltile__art > svg { width: 80%; height: 80%; filter: drop-shadow(0 calc(var(--u) * .18) 0 rgba(0, 0, 0, .35)); }
.iw-ltile--iris .iw-ltile__art > svg, .iw-ltile--skin .iw-ltile__art > svg { width: 84%; height: 84%; }
.iw-ltile__squid { display: block; width: 52%; color: rgba(255, 255, 255, .22); }
.iw-ltile__squid svg { width: 100%; height: 100%; }
.iw-ltile.has-pic .iw-ltile__art > svg, .iw-ltile.has-pic .iw-ltile__squid { opacity: 0; }
.iw-ltile__pic { position: absolute; inset: 0; display: block; animation: iw-ltile-pic .35s var(--out) both; }
.iw-ltile__pic.is-swap { animation-name: iw-fade; animation-duration: .25s; }
.iw-ltile__pic canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes iw-ltile-pic { from { opacity: 0; scale: .86; translate: 0 8%; } }
.iw-ltile--bust .iw-ltile__pic canvas, .iw-ltile--body .iw-ltile__pic canvas { object-fit: cover; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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)); }
.iw-ltile--bust .iw-ltile__name { font-size: calc(var(--u) * 1.15); }
.iw-ltile--head .iw-ltile__name, .iw-ltile--face .iw-ltile__name { font-size: calc(var(--u) * .8); padding-bottom: .55em; }
.iw-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; }
.iw-ltile__eq svg { width: 64%; height: 64%; }
.iw-ltile--iris .iw-ltile__eq, .iw-ltile--skin .iw-ltile__eq { top: auto; right: -2%; bottom: -2%; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.iw-ltile.is-on .iw-ltile__eq { transform: scale(1) rotate(0deg); }
.iw-ltile.is-on { box-shadow: inset 0 0 0 calc(var(--u) * .2) var(--a), 0 calc(var(--u) * .35) 0 var(--a-deep); }
.iw-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); }
.iw-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); }
.iw-ltile.is-down { scale: .94; }
.iw-ltile.is-pick { animation: iw-ticket-pick .5s var(--spring); }

.iw-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); }
.iw-linfo__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.iw-linfo__names { display: flex; align-items: baseline; gap: .7em; min-width: 0; }
.iw-linfo__names small { flex: none; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; color: var(--a); }
.iw-linfo__names b { font: 400 calc(var(--u) * 1.55) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-linfo__text { font: 500 var(--fs-s) / 1.25 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--muted); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; letter-spacing: .1em; box-shadow: 0 3px 0 var(--a-deep); }
.iw-linfo__eq i { display: block; width: 1.25em; height: 1.25em; }
.iw-linfo__eq i svg { width: 100%; height: 100%; }
.iw-linfo.is-on .iw-linfo__eq { display: inline-flex; animation: iw-pop .4s var(--spring); }
.iw-linfo.is-swap .iw-linfo__names b, .iw-linfo.is-swap .iw-linfo__text { animation: iw-tip-in .35s var(--spring); }

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

/* name tag + current look, top right above the kid */
.iw-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; }
.iw-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: iw-ss-splat 40s linear infinite; }
.iw-ltag__blob svg { width: 100%; height: 100%; }
.iw-ltag .iw-name { transform: rotate(1.2deg); }
.iw-ltag .iw-name__label { color: var(--a); opacity: 1; }
.iw-lsheet { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * .35); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.iw-lsheet__row small { font: 900 calc(var(--u) * .56) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; opacity: .55; }
.iw-lsheet__row b { font-weight: 800; }
.iw-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); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.iw-lspin > i { display: block; width: 1.9em; height: 1.9em; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); animation: iw-lspin 3.2s ease-in-out infinite; }
.iw-lspin > i svg { width: 100%; height: 100%; }
.iw-lspin .iw-padg { align-items: center; gap: .4em; }
@keyframes iw-lspin { 0%, 100% { rotate: -25deg; } 50% { rotate: 25deg; } }
@media (prefers-reduced-motion: reduce) { .iw-ltag__blob, .iw-lspin > i { animation: none !important; } }

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

/* ---- our additions on top of upstream's stage select / loadout ----------------------------------------------------- */
/* 4+ stages: slim tickets in a scrolling column (upstream's layout is sized for three) */
.iw-ss__list.is-many { max-height: calc(var(--u) * 31); gap: calc(var(--u) * .55); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-left: calc(var(--u) * .3); }
.iw-ss__list.is-many::-webkit-scrollbar { display: none; }
.iw-ss__list.is-many .iw-ticket { height: calc(var(--u) * 3.9); border-radius: calc(var(--u) * .9); }
.iw-ss__list.is-many .iw-ticket__num { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); font-size: calc(var(--u) * .9); left: calc(var(--u) * .7); }
.iw-ss__list.is-many .iw-ticket__name { left: calc(var(--u) * 3.5); font-size: calc(var(--u) * 1.3); }
.iw-ss__list.is-many .iw-ticket__time { top: 50%; translate: 0 -50%; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); }
.iw-ss__list.is-many .iw-ticket__check { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); right: calc(var(--u) * -.4); bottom: calc(var(--u) * -.4); }
/* loadout: Practice sits top-right; the squidkid → Locker chip goes under it */
.iw-loadout__look { top: calc(var(--u) * 9.4 + var(--sat)); }

/* =====================================================================================
   ZONE CONTROL — mode picker on the stage select, locked match length, pause + results variants
   ===================================================================================== */
/* stage select: MODE card top right (the TIME OF DAY card's look, a little wider), lined up with the hero's right edge */
.iw-ss__mode { position: absolute; z-index: 3; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 1.5 + var(--sat)); width: calc(var(--u) * 33); display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .65) calc(var(--u) * .8) calc(var(--u) * .7); border-radius: calc(var(--u) * 1.2); background: rgba(14, 11, 24, .78); 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(-.8deg); pointer-events: auto; transition: transform .35s var(--spring), box-shadow .2s; }
.iw-ss__mode.is-focus { transform: rotate(0deg) scale(1.02); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 0 0 calc(var(--u) * .3) rgba(var(--a-rgb), .7), 0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .35); }
.iw-ss__mode.is-press { animation: iw-pick .4s var(--spring); }
.iw-ss__mode .iw-seg { width: 100%; }
.iw-ss__mode .iw-seg__opt { padding: calc(var(--u) * .62) calc(var(--u) * .4); font-size: var(--fs-s); letter-spacing: .08em; }
.iw-ss__mode .iw-segico i { width: 1.35em; height: 1.35em; }
.iw-ss__modetext { min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-head__title.is-swap { animation: iw-mode-swap .5s var(--spring2); }
@keyframes iw-mode-swap { 0% { scale: .82; rotate: -3deg; opacity: .2; } 55% { opacity: 1; } }
/* MATCH LENGTH in Zone Control: fixed 5:00 + overtime */
.iw-lenlock { display: none; align-items: center; gap: .6em; padding: calc(var(--u) * .5) calc(var(--u) * .9); 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); font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.iw-lenlock b { font: 400 calc(var(--u) * 1.25) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .02em; color: #fff; }
.iw-lenlock em { margin-left: auto; font-style: normal; padding: .35em .7em; border-radius: 999px; background: var(--a); color: var(--a-ink); font-size: .85em; letter-spacing: .1em; box-shadow: 0 2px 0 var(--a-deep); }
.iw-setrow.is-locked .iw-seg { display: none; }
.iw-setrow.is-locked .iw-lenlock { display: flex; }
.iw-setrow.is-locked.is-focus { background: rgba(255, 255, 255, .05); }
.iw-setrow.is-swap .iw-lenlock, .iw-setrow.is-swap .iw-seg { animation: iw-pop .4s var(--spring2); }
.iw-lenlock.is-edge-r { animation: iw-shake .3s; }
/* pause: the live countdowns */
.iw-pzone { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: calc(var(--u) * .6); }
.iw-pzone__team { --tc: var(--ta); --tc-rgb: var(--ta-rgb); position: relative; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .35); padding: calc(var(--u) * .6) calc(var(--u) * .9);
  border-radius: calc(var(--u) * 1); background: rgba(var(--tc-rgb), .14); box-shadow: inset 0 0 0 2px rgba(var(--tc-rgb), .38); transition: background .3s, box-shadow .3s; }
.iw-pzone__team--b { --tc: var(--tb); --tc-rgb: var(--tb-rgb); align-items: flex-end; text-align: right; }
.iw-pzone__team.is-holding { background: rgba(var(--tc-rgb), .3); box-shadow: inset 0 0 0 2px var(--tc), 0 0 14px rgba(var(--tc-rgb), .35); }
.iw-pzone__name { display: flex; align-items: center; gap: .5em; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.iw-pzone__team--b .iw-pzone__name { flex-direction: row-reverse; }
.iw-pzone__crown { display: block; width: 1.3em; height: 1.3em; color: #ffd84a; opacity: 0; scale: .4; transition: opacity .25s, scale .35s var(--spring2); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.iw-pzone__crown svg { width: 100%; height: 100%; }
.iw-pzone__team.is-ahead .iw-pzone__crown { opacity: 1; scale: 1; }
.iw-pzone__score { display: flex; align-items: baseline; gap: .35em; }
.iw-pzone__team--b .iw-pzone__score { flex-direction: row-reverse; }
.iw-pzone__num { font: 400 calc(var(--u) * 2.6) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.iw-pzone__pen { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #ff8a9a; }
.iw-pzone__obj { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; min-width: calc(var(--u) * 9.5); padding: calc(var(--u) * .5) calc(var(--u) * .7);
  border-radius: calc(var(--u) * 1); background: rgba(0, 0, 0, .32); text-align: center; }
.iw-pzone__ico { display: block; width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); color: rgba(255, 255, 255, .7); transition: color .3s; }
.iw-pzone__ico svg { width: 100%; height: 100%; }
.iw-pzone__obj b { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; }
.iw-pzone__state { font: 800 calc(var(--u) * .62) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .1em; opacity: .75; }
.iw-pzone__obj[data-owner="a"] .iw-pzone__ico, .iw-pzone__obj[data-owner="a"] .iw-pzone__state { color: var(--ta); opacity: 1; }
.iw-pzone__obj[data-owner="b"] .iw-pzone__ico, .iw-pzone__obj[data-owner="b"] .iw-pzone__state { color: var(--tb); opacity: 1; }
.iw-pzone.is-ot .iw-pzone__obj { box-shadow: inset 0 0 0 2px #ff4d6a; animation: iw-pzone-ot 1.1s ease-in-out infinite; }
@keyframes iw-pzone-ot { 50% { box-shadow: inset 0 0 0 2px #ff4d6a, 0 0 14px rgba(255, 77, 106, .55); } }
.iw-pclock.is-ot .iw-pclock__num { font-size: calc(var(--u) * 1.9); }
.iw-pclock.is-ot .iw-pclock__arc { animation: iw-pzone-otclk 1.1s ease-in-out infinite; }
@keyframes iw-pzone-otclk { 50% { opacity: .45; } }
/* results: the countdown race (each bar = how far that team counted down; hatched = penalty it still owed) */
.iw-cover--zones .iw-zbar__pen { position: absolute; z-index: 1; top: 0; bottom: 0; pointer-events: none; }
.iw-cover--zones .iw-zbar__pen.is-a { left: calc(var(--pa) * var(--ga, 1) * 100%); width: calc(var(--qa) * var(--ga, 1) * 100%);
  background: repeating-linear-gradient(135deg, rgba(var(--ta-rgb), .95) 0 5px, rgba(var(--ta-rgb), .28) 5px 10px); }
.iw-cover--zones .iw-zbar__pen.is-b { right: calc(var(--pb) * var(--ga, 1) * 100%); width: calc(var(--qb) * var(--ga, 1) * 100%);
  background: repeating-linear-gradient(45deg, rgba(var(--tb-rgb), .95) 0 5px, rgba(var(--tb-rgb), .28) 5px 10px); }
.iw-cover--zones .iw-cover__mid { width: 5px; margin-left: -2.5px; background: repeating-linear-gradient(180deg, #fff 0 4px, #15121c 4px 8px); }
.iw-res__cover--zones .iw-cover__names { align-items: center; }
.iw-res__cover--zones .iw-cover__names b { min-width: 1.6em; text-align: center; }
.iw-zres__pen { font: 400 .62em / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-style: normal; color: #ff8a9a; -webkit-text-stroke: .2em var(--k); paint-order: stroke fill; opacity: 0; scale: .3; }
.iw-zres__pen.is-none { display: none; }
.iw-res__cover.is-landed .iw-zres__pen { animation: iw-zpen-in .55s var(--spring2) .15s forwards; }
@keyframes iw-zpen-in { 0% { opacity: 0; scale: .3; } 60% { opacity: 1; scale: 1.25; } 100% { opacity: 1; scale: 1; } }
.iw-zres__mid { display: flex; align-items: center; gap: .5em; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; color: rgba(255, 255, 255, .78); -webkit-text-stroke: 0; }
.iw-zres__mid i { display: block; width: 1.5em; height: 1.5em; color: rgba(255, 255, 255, .6); filter: none; }
.iw-res__tag--zreason { background: var(--tw); color: var(--tw-ink); }
.iw-res__tag--zreason i { color: var(--tw-ink); }
.iw-results.is-lose .iw-res__tag--zreason { background: #ece8f6; color: var(--k); }
.iw-results.is-lose .iw-res__tag--zreason i { color: var(--k); }
.iw-res__tag--zot { background: #ff4d6a; color: #fff; }
.iw-res__tag--zot i { color: #fff; }
.iw-res__tag--zot small { opacity: .9; }
.iw-ss__foot .iw-btn--start .iw-btn__sub { max-width: calc(var(--u) * 18.6); }
.iw-ss__foot .iw-btn--start .iw-btn__sub.is-tight { font-size: calc(var(--fs-xs) * .87); letter-spacing: 0; }
/* how to play: rules for either mode */
.iw-howto__left { display: flex; flex-direction: column; gap: calc(var(--u) * 1.3); min-width: 0; }
.iw-howto__modes { margin: 0; }
.iw-howto__modes .iw-seg__opt { padding: calc(var(--u) * .5) calc(var(--u) * .6); }
.iw-howto__modes.is-focus .iw-seg { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 3px 6px rgba(0, 0, 0, .35), 0 0 0 calc(var(--u) * .25) rgba(var(--a-rgb), .7); }
.iw-howto__modes.is-press { animation: iw-pick .4s var(--spring); }
.iw-howto__rules.is-swap .iw-rule { animation: iw-pop .42s var(--spring2) backwards; }
.iw-howto__rules.is-swap .iw-rule:nth-child(2) { animation-delay: 40ms; } .iw-howto__rules.is-swap .iw-rule:nth-child(3) { animation-delay: 80ms; } .iw-howto__rules.is-swap .iw-rule:nth-child(4) { animation-delay: 120ms; }
.iw-howto__noteslot:empty { display: none; }
.iw-howto__notes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); }
.iw-hnote { display: flex; align-items: center; gap: calc(var(--u) * .7); padding: calc(var(--u) * .6) calc(var(--u) * .9); border-radius: calc(var(--u) * 1); background: rgba(22, 18, 34, .92);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .09), 0 calc(var(--u) * .35) 0 rgba(0, 0, 0, .45); font: 500 var(--fs-xs) / 1.35 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #d9d3e7; }
.iw-hnote b { color: #fff; font-weight: 800; }
.iw-hnote i { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 2px var(--k); }
.iw-hnote i svg { width: 62%; height: 62%; }

/* =====================================================================================
   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 */
.iw-main__menu { top: 53.5%; gap: calc(var(--u) * .78); }
.iw-main__menu .iw-btn--menu:not(.iw-btn--xl):not(.iw-btn--online) { height: calc(var(--u) * 3.85); font-size: calc(var(--u) * 1.85); }
.iw-main__desc { top: calc(53.5% + var(--u) * 19.4); }
.iw-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); }
.iw-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: iw-dots-drift 6s linear infinite; }
@keyframes iw-dots-drift { to { background-position: 44px -22px; } }
.iw-btn--online .iw-btn__icon { width: 1.5em; height: 1.5em; }
.iw-btn--online .iw-btn__sub { font-size: var(--fs-s); }
.iw-btn--online.is-focus .iw-btn__icon svg { animation: iw-online-ping 1.4s ease-in-out infinite; }
@keyframes iw-online-ping { 50% { translate: 0 -2px; } }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); rotate: 3deg; }
.iw-btn__live i { width: .7em; height: .7em; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 0 0 rgba(255, 77, 106, .7); animation: iw-live 1.6s ease-out infinite; }
@keyframes iw-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) — Splatoon 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.
   ===================================================================================== */
.iw-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");
}
.iw-fhv { fill: var(--hv); }
/* splashtag art inks (menu-art.js tagArt) */
.iw-tf0 { fill: var(--tc); } .iw-tf1 { fill: var(--tc-dark); } .iw-tf2 { fill: var(--tc-light); } .iw-tf3 { fill: var(--tc-deep); }

/* ---- tape: black strip with torn ends; a strip of ink peeks out underneath (text sits on top) */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; rotate: -2deg; }
.iw-tape::before, .iw-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%); }
.iw-tape::after { z-index: -2; background: var(--tape, var(--a)); translate: calc(var(--u) * .3) calc(var(--u) * .32); }
.iw-tape > i { flex: none; display: block; width: 1.4em; height: 1.4em; color: var(--tape, var(--a)); }
.iw-tape > i svg { width: 100%; height: 100%; }

/* ---- drips hanging off a sticker (menu-art.js dripsSVG) */
.iw-sdrip path { stroke: var(--k); stroke-width: 3; paint-order: stroke; vector-effect: non-scaling-stroke; }
.iw-sdrip { transform-box: fill-box; transform-origin: 50% 0; animation: iw-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 */
.iw-ui[data-screen="online"] .iw-cursor__ring, .iw-ui[data-screen="lobby"] .iw-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: iw-hv-ring 1.2s ease-in-out infinite; }
@keyframes iw-hv-ring { 50% { border-color: #f4ff9a; } }
.iw-ui[data-screen="online"] .iw-cursor__glow, .iw-ui[data-screen="lobby"] .iw-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: iw-hv-drip 2.4s ease-in-out infinite; }
.iw-cursor.is-nodrip .iw-cursor__glow { opacity: 0 !important; }
@keyframes iw-hv-drip { 0%, 100% { transform: scaleY(.55); } 55% { transform: scaleY(1); } }
@keyframes iw-squish { 0% { scale: .92 1.08; } 35% { scale: 1.07 .94; } 65% { scale: .98 1.02; } 100% { scale: 1; } }
@keyframes iw-wobble { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

/* ---- shared chrome on both screens: back/leave pill, header, prompt legend */
.iw-online .iw-backbtn, .iw-lobby .iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; }
.iw-online .iw-backbtn__arrow, .iw-lobby .iw-backbtn__arrow { background: var(--hv); box-shadow: 0 0 0 2px var(--k); }
.iw-online .iw-backbtn:hover, .iw-lobby .iw-backbtn:hover { background: #2a2140; transform: translateX(-3px) scale(1.06); }
.iw-online .iw-head__title { rotate: -3deg; font-size: calc(var(--u) * 4.2); }
.iw-online .iw-head__blob svg path, .iw-online .iw-head__blob svg circle { stroke: var(--k); stroke-width: 5; paint-order: stroke; }
.iw-online .iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; text-shadow: none; }
.iw-online .iw-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%); }
.iw-online .iw-prompts, .iw-lobby .iw-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) */
.iw-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; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; rotate: -1.4deg;
  box-shadow: var(--stk); animation: iw-toast-in .55s var(--spring2) both; }
.iw-toast:nth-child(even) { rotate: 1.2deg; }
.iw-toast.is-out { animation: iw-toast-out .38s var(--in) forwards; }
@keyframes iw-toast-in { from { opacity: 0; translate: calc(var(--u) * 4) 0; scale: .7; } }
@keyframes iw-toast-out { to { opacity: 0; translate: calc(var(--u) * 3) 0; scale: .9; } }
.iw-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; }
.iw-toast__icon svg { width: 100%; height: 100%; }
.iw-toast.is-error { background-color: #3a0d1a; }
.iw-toast.is-error .iw-toast__icon { background: #ff3d5e; color: #fff; }
.iw-toast.is-good .iw-toast__icon { background: #3ddc84; color: var(--k); }
.iw-toast.is-leave .iw-toast__icon { background: #5a5170; color: #fff; }
/* a joining player's mini splashtag leads the toast */
.iw-toast.has-tag { padding-left: calc(var(--u) * 1.5); }
.iw-toast__tag.iw-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); }
.iw-toast__tag .iw-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); }
.iw-toast__tag .iw-stag__title { font-size: calc(var(--u) * .46); }
.iw-toast__tag b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 calc(var(--u) * .95) / 1.1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }

/* ---- small shared bits: fat pills */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; box-shadow: var(--stk-k); transition: background .2s, color .2s, transform .35s var(--spring); }
.iw-minibtn i { display: block; width: 1.3em; height: 1.3em; }
.iw-minibtn i svg { width: 100%; height: 100%; }
.iw-minibtn:hover { transform: translateY(-2px) scale(1.06) rotate(-2deg); }
.iw-minibtn.is-go.is-ready { background: var(--hv); color: var(--k); animation: iw-squish .5s var(--spring2), iw-wobble 1.1s ease-in-out .5s infinite; }
.iw-minibtn.is-cancel { background: #ff3d5e; color: #fff; }
.iw-minibtn.is-cancel i { display: none; }
.iw-dash { margin: 0 .2em; font-style: normal; opacity: .7; }

/* =====================================================================================
   ONLINE HUB — create / join (left), your splashtag + weapon + look (right)
   ===================================================================================== */
.iw-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); }
.iw-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; }
.iw-hubcard__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: #251c3c; }
.iw-hubcard__bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--tex-grain); }
.iw-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%); }
.iw-hubcard.is-hover { transition: transform .2s var(--out), box-shadow .2s; }
.iw-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: iw-squish .5s var(--spring2); }
.iw-hubcard.is-down { scale: .975; }
.iw-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%); }
.iw-hubcard.is-hover .iw-hubcard__ink, .iw-hubcard.is-focus .iw-hubcard__ink { opacity: 1; }
.iw-hubcard__kicker { --tape: var(--hv); align-self: flex-start; font-size: var(--fs-xs); }
.iw-hubcard__title { display: block; margin-top: .42em; font: 400 calc(var(--u) * 3.05) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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%; }
.iw-hubcard__sub { display: block; margin-top: .5em; font: 700 var(--fs-m) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.iw-hubcard__text { display: flex; flex-direction: column; min-width: 0; }
.iw-hubcard.is-shake { animation: iw-shake .4s; }
.iw-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); }
.iw-hubcard__drips svg { width: 100%; height: 100%; overflow: visible; }
.iw-hubcard.is-focus .iw-hubcard__drips { scale: 1 1; }
/* create: striped sticker in the ONLINE ink */
.iw-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); }
.iw-hubcard--create .iw-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: iw-hub-stripes 2.6s linear infinite; }
.iw-hubcard--create .iw-hubcard__title { color: #fff; }
@keyframes iw-hub-stripes { to { background-position: calc(var(--u) * 3.394) 0, 0 0, 0 0; } }
.iw-hubcard__icon { position: relative; display: grid; place-items: center; width: calc(var(--u) * 7.2); height: calc(var(--u) * 7.2); color: #fff; }
.iw-hubcard__icon > i { position: relative; z-index: 1; width: 56%; height: 56%; transition: transform .45s var(--spring), opacity .25s; }
.iw-hubcard__icon > i svg, .iw-hubcard__spin svg { width: 100%; height: 100%; }
.iw-hubcard__icon > i svg path { stroke: var(--k); stroke-width: 7; paint-order: stroke; }
.iw-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); }
.iw-hubcard__blob svg { width: 100%; height: 100%; animation: iw-spin 40s linear infinite; }
.iw-hubcard__blob svg path, .iw-hubcard__blob svg circle { stroke: var(--k); stroke-width: 5.5; paint-order: stroke; }
.iw-hubcard--create.is-focus .iw-hubcard__blob { transform: scale(1.1) rotate(-14deg); }
.iw-hubcard--create.is-focus .iw-hubcard__icon > i { transform: rotate(-12deg) scale(1.15); }
.iw-hubcard__spin { position: absolute; z-index: 2; inset: 18%; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--spring2); }
.iw-hubcard--create.is-busy .iw-hubcard__icon > i { opacity: 0; transform: scale(.4); }
.iw-hubcard--create.is-busy .iw-hubcard__spin { opacity: 1; transform: none; animation: iw-squid-swim .9s ease-in-out infinite; }
@keyframes iw-squid-swim { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 0 -8%; rotate: 8deg; } }
.iw-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); }
.iw-hubcard__go b { font: 400 calc(var(--u) * 1.9) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-hubcard__go .iw-hint { font-size: calc(var(--u) * .8); }
.iw-hubcard--create.is-focus .iw-hubcard__go { background: var(--hv); color: var(--k); transform: scale(1.12); animation: iw-wobble 1s ease-in-out infinite; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; rotate: -1deg; }
.iw-hubcard__status:empty { display: none; }
.iw-hubcard--create.is-busy .iw-hubcard__status::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: iw-ellipsis 1s steps(4) infinite; }
@keyframes iw-ellipsis { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.iw-hubcard.is-err .iw-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 */
.iw-hubcard--join { cursor: default; padding-bottom: calc(var(--u) * 1.3); }
.iw-hubcard--join .iw-hubcard__bg { background: var(--tex-squids), linear-gradient(170deg, #2e2449, #1c1530); }
.iw-join__head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 1); }
.iw-join__btns { display: flex; gap: calc(var(--u) * .9); padding: 0 calc(var(--u) * .3) calc(var(--u) * .3) 0; }
.iw-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); }
.iw-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); }
.iw-code__ch, .iw-code__ghost { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(var(--u) * 4.6) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: 0; }
.iw-code__ghost { color: rgba(255, 255, 255, .32); }
.iw-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; }
.iw-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; }
.iw-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; }
.iw-code__box.is-filled .iw-code__caret { opacity: 0; }
.iw-hubcard--join:not(.is-entry) .iw-code__box:not(.is-filled) .iw-code__caret { animation: iw-caret-idle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes iw-caret-idle { 50% { background: rgba(255, 255, 255, .5); } }
.iw-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); }
.iw-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); }
.iw-code__box.is-caret:not(.is-filled) .iw-code__caret { background: var(--hv); animation: iw-caret-blink 1s steps(2) infinite; }
@keyframes iw-caret-blink { 50% { opacity: .15; } }
.iw-code__box.is-pop { animation: iw-code-pop .42s var(--spring2); }
@keyframes iw-code-pop { 0% { scale: .6; rotate: -12deg; } 50% { scale: 1.15; } }
.iw-code__box.is-shake, .iw-code.is-shake { animation: iw-shake .4s; }
.iw-code__box.is-roll-up .iw-code__ch { animation: iw-roll-up .22s var(--out); }
.iw-code__box.is-roll-dn .iw-code__ch { animation: iw-roll-dn .22s var(--out); }
@keyframes iw-roll-up { from { translate: 0 45%; opacity: 0; } }
@keyframes iw-roll-dn { from { translate: 0 -45%; opacity: 0; } }
.iw-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)); }
.iw-code__arr svg { width: 100%; height: 100%; }
.iw-code__arr.is-up { top: calc(var(--u) * -1.55); rotate: -90deg; }
.iw-code__arr.is-dn { bottom: calc(var(--u) * -1.55); rotate: 90deg; }
.iw-ui.is-pad .iw-code__box.is-caret .iw-code__arr { opacity: 1; animation: iw-arr-bob 1s ease-in-out infinite; }
@keyframes iw-arr-bob { 50% { translate: 0 -2px; } }
.iw-code.is-wake .iw-code__box { animation: iw-code-wake .45s var(--spring) backwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes iw-code-wake { 0% { translate: 0 calc(var(--u) * .5); } 40% { translate: 0 calc(var(--u) * -.45); } }
.iw-hubcard--join[data-mode="connecting"] .iw-code__box { animation: iw-code-wave .9s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes iw-code-wave { 0%, 100% { translate: 0 0; } 40% { translate: 0 calc(var(--u) * -.9); } }
.iw-hubcard--join.is-err .iw-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); }
.iw-code.is-yay .iw-code__box { animation: iw-code-pop .5s var(--spring2) backwards; animation-delay: calc(var(--i) * 45ms); }
.iw-join__foot { position: relative; min-height: calc(var(--u) * 2.4); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; rotate: -.8deg; transition: opacity .2s; }
.iw-hubcard--join[data-mode="connecting"] .iw-join__hint { background: var(--hv); color: var(--k); }
.iw-hubcard--join[data-mode="connecting"] .iw-join__hint::after { content: ''; animation: iw-ellipsis 1s steps(4) infinite; }
.iw-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); }
.iw-jstat.is-on { display: flex; }
.iw-jstat.is-on ~ .iw-join__hint, .iw-hubcard--join.is-err .iw-join__hint { display: none; }
.iw-jstat.is-in { animation: iw-jstat-in .5s var(--spring2); }
@keyframes iw-jstat-in { from { opacity: 0; scale: 1.5; rotate: 8deg; } 45% { opacity: 1; } }
.iw-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; }
.iw-jstat__splat svg { width: 100%; height: 100%; }
.iw-jstat__splat svg path, .iw-jstat__splat svg circle { stroke: var(--k); stroke-width: 6; paint-order: stroke; }
.iw-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; }
.iw-jstat__icon svg { width: 100%; height: 100%; }
.iw-jstat__txt { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.iw-jstat__txt b { font: 400 calc(var(--u) * 1.55) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; letter-spacing: .02em; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); }
.iw-jstat__txt span { font: 700 var(--fs-s) / 1.3 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; }
.iw-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); }
.iw-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 */
.iw-hub__steps { display: flex; gap: calc(var(--u) * 1.7); padding: 0 calc(var(--u) * .4); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .02em; rotate: var(--tilt); box-shadow: var(--stk-k); }
.iw-hubstep > b { position: relative; flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; margin: -.5em 0 -.5em -.3em; }
.iw-hubstep > b svg { position: absolute; inset: -12%; width: 124%; height: 124%; }
.iw-hubstep > b svg path, .iw-hubstep > b svg circle { stroke: var(--k); stroke-width: 7; paint-order: stroke; }
.iw-hubstep > b span { position: relative; font: 400 1.25em / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--a-ink); }
.iw-hubstep > i { flex: none; display: block; width: 1.5em; height: 1.5em; color: var(--k); }
.iw-hubstep > i svg { width: 100%; height: 100%; }
.iw-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): splashtag with your editable name, then weapon + look tickets under the kid */
.iw-hub__me { position: absolute; inset: 0; pointer-events: none; }
.iw-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; }
.iw-hub__metaglbl { --tape: var(--a); margin: 0 calc(var(--u) * 1.6) calc(var(--u) * -.5) 0; z-index: 1; rotate: 2deg; }
.iw-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; }
.iw-hub__chips .iw-wchip { flex: 1 1 0; min-width: 0; height: calc(var(--u) * 5.6); }
.iw-hub__chips .iw-wchip__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-hub__chips .iw-wchip:first-child { rotate: -1.5deg; }
.iw-hub__chips .iw-wchip:last-child { rotate: 1.5deg; }
.iw-online .iw-prompts.is-entry, .iw-online .iw-prompts.is-busy { display: none; }
.iw-online.is-entry .iw-prompts:not(.is-entry) { display: none; }
.iw-online.is-entry .iw-prompts.is-entry { display: flex; animation: iw-fade .25s; }
.iw-online.is-connecting .iw-prompts:not(.is-busy) { display: none !important; }
.iw-online.is-connecting .iw-prompts.is-busy { display: flex; animation: iw-fade .25s; }

/* ---- weapon / look tickets (hub + lobby bar) */
.iw-online .iw-wchip, .iw-lobby .iw-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; }
.iw-online .iw-wchip__icon, .iw-lobby .iw-wchip__icon { filter: drop-shadow(0 2px 0 var(--k)); }
.iw-online .iw-wchip__text small, .iw-lobby .iw-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; }
.iw-online .iw-wchip__text b, .iw-lobby .iw-wchip__text b { -webkit-text-stroke: .15em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); }
.iw-online .iw-wchip__edit, .iw-lobby .iw-wchip__edit { background: #fff; color: var(--k); box-shadow: 0 0 0 2.5px var(--k); border-radius: 50%; }
.iw-online .iw-wchip.is-focus, .iw-lobby .iw-wchip.is-focus { transform: translateY(calc(var(--u) * -.35)) rotate(0deg) scale(1.04); background-color: #3a2d5c; animation: iw-squish .5s var(--spring2); }
.iw-online .iw-wchip.is-focus .iw-wchip__edit, .iw-lobby .iw-wchip.is-focus .iw-wchip__edit { background: var(--hv); color: var(--k); }
.iw-online .iw-lchip__blob svg path, .iw-lobby .iw-lchip__blob svg path { stroke: var(--k); stroke-width: 5; paint-order: stroke; }

/* ---- splashtag: banner art in the owner's ink, title line over a big name, weapon badge on the left end */
.iw-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); }
.iw-stag__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--tc); }
.iw-stag__art svg { width: 100%; height: 100%; }
.iw-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%); }
.iw-stag__txt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-width: 0; }
.iw-stag__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(var(--u) * .78) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; color: #fff;
  -webkit-text-stroke: .28em var(--k); paint-order: stroke fill; }
.iw-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); }
.iw-stag__w svg { width: 74%; height: 74%; }
.iw-stag__num { position: absolute; left: calc(var(--u) * 5.6); bottom: calc(var(--u) * .45); font: 900 calc(var(--u) * .66) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .08em; color: #fff; -webkit-text-stroke: .3em var(--k); paint-order: stroke fill; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; rotate: 8deg; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.iw-stag__lv small { font: 900 .5em / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .1em; }
.iw-stag.is-pick { animation: iw-squish .5s var(--spring2); }
.iw-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; }
.iw-stag--big .iw-stag__title { font-size: calc(var(--u) * .95); }
/* the editable name on your splashtag (reuses _nameRow) */
.iw-stag .iw-name { position: relative; width: 100%; padding: 0; gap: 0; background: none; box-shadow: none; border-radius: calc(var(--u) * .6); }
.iw-stag .iw-name__label { display: none; }
.iw-stag .iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; -webkit-text-stroke: .15em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); caret-color: var(--k); }
.iw-stag .iw-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); }
.iw-stag .iw-name.is-focus .iw-name__pen { background: var(--hv); }
.iw-stag .iw-name.is-editing .iw-name__input { background: #fff; color: var(--k); -webkit-text-stroke: 0 transparent; text-shadow: none; box-shadow: 0 0 0 3px var(--k); }
.iw-stag .iw-name.is-saved { animation: iw-squish .5s var(--spring2); }

/* =====================================================================================
   LOBBY — room code ticket (top left), head-count (top right), host settings (left rail), splashtags over the kids,
   your controls on the ink band (bottom)
   ===================================================================================== */
.iw-lob__scrim { position: absolute; inset: 0; pointer-events: none; animation: iw-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 */
.iw-lob__band { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 13 + var(--sab)); pointer-events: none; }
.iw-lob__band svg { width: 100%; height: 100%; }
.iw-lob__band path { fill: var(--k); stroke: var(--a); stroke-width: calc(var(--u) * .3); vector-effect: non-scaling-stroke; }
.iw-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 */
.iw-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); }
.iw-lob__leave { margin-top: calc(var(--u) * 2.2); }
.iw-lob__leavetxt { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; }
.iw-rc { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .9); }
.iw-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 */
.iw-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)); }
.iw-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: iw-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; }
.iw-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; }
.iw-rc__label > i { color: var(--a); }
.iw-rc__row { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.3); }
.iw-rc__tiles { display: flex; gap: calc(var(--u) * .6); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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: iw-tile-in .6s var(--spring2) backwards; animation-delay: calc(.25s + var(--i) * 60ms); }
@keyframes iw-tile-in { from { opacity: 0; scale: .3; rotate: -30deg; } }
.iw-rc__tile.is-wave { animation: iw-tile-wave .6s var(--spring) backwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes iw-tile-wave { 0% { translate: 0 0; } 35% { translate: 0 calc(var(--u) * -1.1); scale: 1.1; } }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; rotate: 3deg; box-shadow: var(--stk-k); transition: background .2s, color .2s, transform .35s var(--spring); }
.iw-rc__copy > i { display: block; width: 1.3em; height: 1.3em; }
.iw-rc__copy > i svg { width: 100%; height: 100%; }
.iw-rc__copy .iw-hint { font-size: calc(var(--u) * .8); }
.iw-rc__copy.is-focus, .iw-rc__copy.is-hover { background: var(--hv); transform: translateY(-2px) scale(1.08); }
.iw-rc__copy.is-focus { animation: iw-squish .5s var(--spring2); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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; }
.iw-rc__copied i { display: block; width: 1.1em; height: 1.1em; }
.iw-rc__copied.is-on { animation: iw-copied 2.1s var(--spring2) forwards; }
@keyframes iw-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; } }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; rotate: 1deg; }
.iw-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%); }
.iw-rc__share b { font-weight: 900; letter-spacing: .06em; color: var(--hv); }
/* top-right: head count + both teams as squid pips */
.iw-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); }
.iw-lob__count { display: flex; align-items: baseline; justify-content: flex-end; gap: .3em; }
.iw-lob__count b { font: 400 calc(var(--u) * 3) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; color: var(--hv); -webkit-text-stroke: .1em var(--k); paint-order: stroke fill; }
.iw-lob__count small { font: 400 calc(var(--u) * 1.4) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .75; }
.iw-lob__count .iw-lob__countlbl { margin-right: auto; align-self: center; font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .16em; opacity: 1; }
.iw-lob__teams { display: flex; align-items: center; gap: calc(var(--u) * .4); }
.iw-lob__tline { display: flex; flex-direction: column; gap: calc(var(--u) * .3); }
.iw-lob__tline.is-b { align-items: flex-end; }
.iw-lob__tl { align-self: flex-start; padding: .3em .55em .28em; border-radius: .3em; font: 900 calc(var(--u) * .66) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; rotate: -3deg; box-shadow: 0 0 0 2px var(--k); }
.iw-lob__tl.is-a { background: var(--ta); color: var(--ta-ink); } .iw-lob__tl.is-b { align-self: flex-end; background: var(--tb); color: var(--tb-ink); rotate: 3deg; }
.iw-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; }
.iw-lob__vs svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.iw-lob__vs svg path, .iw-lob__vs svg circle { stroke: #fff; stroke-width: 6; paint-order: stroke; }
.iw-lob__vs b { position: relative; font: 400 calc(var(--u) * 1.15) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--hv); rotate: -8deg; }
.iw-lob__pips { display: flex; gap: calc(var(--u) * .12); }
.iw-lob__pips i { position: relative; display: block; width: calc(var(--u) * 2.45); height: calc(var(--u) * 2.45); color: #3a3350; transition: color .3s; }
.iw-lob__pips i svg { width: 100%; height: 100%; }
.iw-lob__pips i:nth-child(odd) { rotate: -8deg; } .iw-lob__pips i:nth-child(even) { rotate: 7deg; }
.iw-lob__pips.is-a i.is-on { color: var(--ta); } .iw-lob__pips.is-b i.is-on { color: var(--tb); }
.iw-lob__pips i.is-bot { color: #5d5672; }
.iw-lob__pips i.is-bot::after { content: '电脑'; 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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; color: #cfc8e0; }
.iw-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); }
.iw-lob__pips i.is-pop { animation: iw-code-pop .45s var(--spring2); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; text-align: center; }
.iw-lob__status.is-allready .iw-lob__statustxt { background: var(--hv); color: var(--k); animation: iw-squish .5s var(--spring2); }

/* left: match settings (the host edits, guests read) */
.iw-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; }
.iw-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); }
.iw-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; }
.iw-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%); }
.iw-lob__mode > i { position: relative; display: grid; place-items: center; width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.iw-lob__mode > i svg { position: absolute; inset: -20%; width: 140%; height: 140%; }
.iw-lob__mode > i svg path, .iw-lob__mode > i svg circle { stroke: var(--k); stroke-width: 7; paint-order: stroke; }
.iw-lob__mode > i b { position: relative; width: 58%; height: 58%; color: #fff; }
.iw-lob__mode > i b svg { position: static; width: 100%; height: 100%; }
.iw-lob__mode > i b svg path { stroke: var(--k); stroke-width: 6; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-lock b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; color: var(--hv); }
.iw-lock i { flex: none; display: block; width: 1.35em; height: 1.35em; color: #fff; }
.iw-lock i svg { width: 100%; height: 100%; }
.iw-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: iw-medal-stamp .6s var(--spring2) .4s backwards; }
.iw-lock.is-host i { color: var(--k); }
.iw-lobby:not(.is-host) .iw-lock.is-host, .iw-lobby.is-host .iw-lock:not(.is-host) { display: none; }
.iw-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); }
.iw-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; }
.iw-lset__drips svg { width: 100%; height: 100%; overflow: visible; }
.iw-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; }
.iw-lset__label { display: flex; align-items: center; gap: .45em; font: 400 calc(var(--u) * .98) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; color: #fff; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.iw-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); }
.iw-lset__label > i svg { width: 100%; height: 100%; }
.iw-lset__note { margin-left: auto; padding: .3em .5em; border-radius: .35em; background: var(--k); font: 800 calc(var(--u) * .62) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 0; }
.iw-lset .iw-seg { width: 100%; }
.iw-lset.is-focus { background: rgba(227, 255, 46, .1); transform: translateX(calc(var(--u) * .3)); animation: iw-squish .45s var(--spring2); }
.iw-lset.is-off { opacity: .45; }
.iw-lset.is-flash { animation: iw-lset-flash .9s; }
@keyframes iw-lset-flash { 15% { background: rgba(227, 255, 46, .35); scale: 1.03; } }
.iw-lobby:not(.is-host) .iw-lset { pointer-events: none; }
.iw-lobby:not(.is-host) .iw-lset .iw-seg__opt:not(.is-sel) { opacity: .4; }
.iw-lobby:not(.is-host) .iw-lstage__arrows { display: none; }
.iw-lobby:not(.is-host) .iw-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 */
.iw-online .iw-seg, .iw-lobby .iw-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); }
.iw-lobby .iw-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); }
.iw-lobby .iw-seg__opt { padding: calc(var(--u) * .46) calc(var(--u) * .25); font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .06em; color: #fff; }
.iw-lobby .iw-seg__opt.is-sel { color: var(--a-ink); }
.iw-lset__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .45); }
.iw-lset__pair .iw-lset .iw-seg__opt { padding: calc(var(--u) * .46) calc(var(--u) * .12); letter-spacing: .02em; }
.iw-lset__pair .iw-segico { gap: .3em; }
.iw-lset__pair .iw-segico i { width: 1.2em; height: 1.2em; }
/* ink palette: pairs of ink drops */
.iw-palopt { display: inline-flex; align-items: center; }
.iw-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); }
.iw-palopt i + i { margin-left: calc(var(--u) * -.3); rotate: -45deg; translate: 0 calc(var(--u) * .2); }
.iw-lset--pal .iw-seg__opt { padding: calc(var(--u) * .4) 0; }
.iw-lset--pal .iw-seg__hl { background: #fff; }
.iw-lset--pal .iw-lset__note { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-lset--pal .iw-lset__label { flex-wrap: nowrap; }
/* FILL WITH BOTS: a fat switch with an outlined knob */
.iw-lset--bots { flex-direction: row; align-items: center; justify-content: space-between; }
.iw-lset--bots .iw-lset__label { flex: 1; flex-wrap: wrap; row-gap: .35em; }
.iw-lobby .iw-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); }
.iw-lobby .iw-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); }
.iw-lobby .iw-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); }
.iw-lobby .iw-toggle.is-on .iw-toggle__knob { transform: translateX(calc(var(--u) * 4)); }
.iw-lobby .iw-toggle__txt { font: 400 calc(var(--u) * .95) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; }
.iw-lobby .iw-toggle__on { color: var(--a-ink); }
.iw-lobby .iw-toggle.is-flip .iw-toggle__knob { animation: iw-knob .35s var(--spring); }
/* stage ticket */
.iw-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); }
.iw-lstage__imgs { position: absolute; inset: 0; }
.iw-lstage__img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; display: block; animation: iw-ss-kb 18s ease-in-out infinite alternate; }
.iw-lstage__fb svg { width: 100%; height: 100%; }
.iw-lstage__img.is-slide { animation: iw-lstage-slide .5s var(--out) both, iw-ss-kb 18s ease-in-out infinite alternate; }
@keyframes iw-lstage-slide { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.iw-lstage__img.is-slide[style*="--dir: -1"] { animation-name: iw-lstage-slide-l, iw-ss-kb; }
@keyframes iw-lstage-slide-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.iw-lstage__img.is-fade { animation: iw-fade .45s both, iw-ss-kb 18s ease-in-out infinite alternate; }
.iw-lstage__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 9, 22, .7) 0%, rgba(12, 9, 22, 0) 55%); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; rotate: -3deg; }
.iw-lstage__num b { font: 400 calc(var(--u) * .95) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: var(--hv); letter-spacing: .02em; }
.iw-lstage__num em { font-style: normal; opacity: .6; }
.iw-lstage__tape { position: absolute; left: calc(var(--u) * .6); bottom: calc(var(--u) * .65); right: calc(var(--u) * 3.6); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-lstage__name.is-in { animation: iw-ss-tape .45s var(--spring); }
.iw-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; }
.iw-lstage__time i { position: absolute; width: 62%; height: 62%; transition: transform .5s var(--spring2), opacity .25s; }
.iw-lstage__time i svg { width: 100%; height: 100%; }
.iw-lstage__time .is-sun { color: #ffd45a; }
.iw-lstage__time .is-moon { color: #ffe8b8; opacity: 0; transform: translateY(120%) rotate(60deg); }
.iw-lstage[data-time="dusk"] .iw-lstage__time { background: #3c1850; }
.iw-lstage[data-time="dusk"] .iw-lstage__time .is-sun { opacity: 0; transform: translateY(120%) rotate(-60deg); }
.iw-lstage[data-time="dusk"] .iw-lstage__time .is-moon { opacity: 1; transform: none; }
.iw-lstage__arrows { position: absolute; right: calc(var(--u) * .5); top: calc(var(--u) * .5); display: flex; gap: calc(var(--u) * .35); }
.iw-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); }
.iw-lstage__arrows i svg { width: 100%; height: 100%; }
.iw-lstage__arrows i:hover { background: var(--hv); transform: scale(1.15); }
.iw-lset--stage.is-focus .iw-lstage__arrows i { background: var(--hv); }
.iw-lstage.is-hit { animation: iw-ss-hit .5s var(--spring); }
/* stage rules sticker (ONLINE ONLY · NO BOTS — config onlineOnly / noBots): slapped across the ticket's top edge */
.iw-lset--stage .iw-lset__label { position: relative; z-index: 2; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-lstage__rules i { flex: none; display: block; width: 1.3em; height: 1.3em; }
.iw-lstage__rules i svg { width: 100%; height: 100%; }
.iw-lstage__rules b { font-weight: 900; }
.iw-lset--stage.has-rules .iw-lstage__rules { display: inline-flex; animation: iw-medal-stamp .6s var(--spring2); }
/* humans-only stage: FILL WITH BOTS is locked off (the note says why) */
.iw-lset--bots.is-locked .iw-toggle { opacity: .4; filter: grayscale(1); pointer-events: none; }
.iw-lset--bots.is-locked .iw-lset__note { background: #ffd54a; color: var(--k); rotate: -2deg; box-shadow: 0 0 0 2px var(--k); }
.iw-lset.is-shake { animation: iw-shake .4s; }

/* bottom: your controls, standing on the ink band */
.iw-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; }
.iw-lob__you { display: flex; gap: calc(var(--u) * 1); min-width: 0; }
.iw-lob__bar .iw-wchip { flex: none; height: calc(var(--u) * 5); gap: calc(var(--u) * .7); padding: 0 calc(var(--u) * .9) 0 calc(var(--u) * .7); }
.iw-lob__wchip { width: calc(var(--u) * 17.5); rotate: -1.5deg; }
.iw-lob__bar .iw-wchip__icon { width: calc(var(--u) * 4.6); height: calc(var(--u) * 3.6); }
.iw-lob__bar .iw-lchip__av { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
.iw-lob__bar .iw-wchip__text { min-width: 0; }
.iw-lob__bar .iw-wchip__text b { font-size: calc(var(--u) * 1.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-lob__bar .iw-wchip__edit { padding: .45em; }
.iw-lob__bar .iw-wchip.is-pick { animation: iw-pick .5s var(--spring); }
.iw-lob__bar .iw-lob__lchip { position: relative; width: calc(var(--u) * 5.6); padding: 0; justify-content: center; rotate: 2deg; }
.iw-lob__bar .iw-lob__lchip .iw-lchip__av { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); margin-top: calc(var(--u) * -.6); }
.iw-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; }
.iw-lob__lbadge svg { width: 100%; height: 100%; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; }
.iw-lob__lchip.is-focus .iw-lob__lbadge, .iw-lob__lchip.is-hover .iw-lob__lbadge { background: var(--hv); }
.iw-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; }
.iw-lob__team.is-focus { animation: iw-squish .45s var(--spring2); }
.iw-lob__team.is-shake { animation: iw-shake .4s; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.iw-lob__barlbl .iw-hint { font-size: calc(var(--u) * .78); -webkit-text-stroke: 0; }
.iw-lob__team .iw-seg { width: calc(var(--u) * 22.5); }
.iw-lob__team .iw-seg__opt { padding: calc(var(--u) * .55) calc(var(--u) * .2); }
.iw-teamopt { display: inline-flex; align-items: center; gap: .45em; }
.iw-teamopt i { display: block; width: 1em; height: 1em; border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: 0 0 0 2px var(--k); }
.iw-teamopt i svg { width: 100%; height: 100%; rotate: 45deg; }
.iw-teamopt.is-a i { background: var(--ta); } .iw-teamopt.is-b i { background: var(--tb); }
.iw-teamopt:not(.is-a):not(.is-b) i { box-shadow: none; border-radius: 0; rotate: 0deg; }
.iw-teamopt:not(.is-a):not(.is-b) i svg { rotate: 0deg; }
.iw-lob__team .iw-seg__hl { background: #fff; }
.iw-lob__team .iw-seg__opt.is-sel { color: var(--k); }
.iw-lob__team[data-pick="0"] .iw-seg__hl { background: var(--tex-stripes), linear-gradient(180deg, var(--ta-light) -40%, var(--ta) 50%); }
.iw-lob__team[data-pick="1"] .iw-seg__hl { background: var(--tex-stripes), linear-gradient(180deg, var(--tb-light) -40%, var(--tb) 50%); }
.iw-lob__team[data-pick="0"] .iw-seg__opt.is-sel { color: var(--ta-ink); }
.iw-lob__team[data-pick="1"] .iw-seg__opt.is-sel { color: var(--tb-ink); }
.iw-lob__team[data-pick="0"] .iw-seg__opt.is-sel .iw-teamopt i, .iw-lob__team[data-pick="1"] .iw-seg__opt.is-sel .iw-teamopt i { box-shadow: 0 0 0 2px #fff; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .02em; rotate: -2deg;
  box-shadow: var(--stk); transition: transform .4s var(--spring), background .2s, color .2s; }
.iw-lob__emoteico { display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 3); color: #ffd54a; transition: transform .45s var(--spring); }
.iw-lob__emoteico svg { width: 100%; height: 100%; }
.iw-lob__emoteico svg circle:first-child { stroke: var(--k); stroke-width: 4; }
.iw-lob__emotekeys { font-size: calc(var(--u) * .8); }
.iw-lob__emotekeys em { font-style: normal; margin: 0 .15em; opacity: .7; }
.iw-lob__emote.is-focus, .iw-lob__emote.is-hover { background: #ffd54a; color: var(--k); transform: translateY(calc(var(--u) * -.3)) scale(1.04); }
.iw-lob__emote.is-focus { animation: iw-squish .5s var(--spring2); }
.iw-lob__emote.is-focus .iw-lob__emoteico, .iw-lob__emote.is-hover .iw-lob__emoteico { color: #fff; transform: rotate(-16deg) scale(1.18); }
.iw-lob__emote.is-shake { animation: iw-shake .35s; }
.iw-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; }
.iw-lob__grow { flex: 1; min-width: 0; }
/* READY? / START! — the loud one: high-vis lime, scrolling stripes, wobbles when focused */
.iw-btn__key { position: absolute; right: calc(var(--u) * .9); top: calc(var(--u) * .6); font-size: calc(var(--u) * .8); }
.iw-btn--ready, .iw-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); }
.iw-btn--ready::before, .iw-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: iw-btn-stripes 1.6s linear infinite; }
@keyframes iw-btn-stripes { to { background-position: calc(var(--u) * 3.394) 0; } }
.iw-btn--ready .iw-btn__label, .iw-btn--lobstart .iw-btn__label { letter-spacing: .03em; }
.iw-btn--ready .iw-btn__icon svg, .iw-btn--lobstart .iw-btn__icon svg { filter: none; }
.iw-btn--ready .iw-btn__sub, .iw-btn--lobstart .iw-btn__sub { font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: 1; max-width: calc(var(--u) * 16); overflow: hidden; text-overflow: ellipsis; }
.iw-btn--ready.is-focus, .iw-btn--lobstart.is-focus { transform: rotate(var(--tilt)) scale(1.06); animation: iw-squish .5s var(--spring2), iw-wobble 1.3s ease-in-out .5s infinite; }
.iw-btn--ready:not(.is-on):not(.is-focus) { animation: iw-ready-breathe 1.8s ease-in-out infinite; }
@keyframes iw-ready-breathe { 50% { scale: 1.035; } }
.iw-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; }
.iw-btn--ready.is-on::before { animation: none; opacity: .5; }
.iw-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); }
.iw-ready__stamp svg { width: 100%; height: 100%; }
.iw-btn--ready.is-on .iw-ready__stamp { opacity: 1; scale: 1; rotate: -12deg; }
.iw-btn--ready.is-on .iw-btn__key { opacity: 0; }
.iw-lobby.is-host .iw-btn--ready, .iw-lobby:not(.is-host) .iw-btn--lobstart { display: none; }
.iw-btn--lobstart .iw-start__chev { top: 64%; }
.iw-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; }
.iw-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)); }
.iw-btn--lobstart.is-blocked .iw-start__chev { display: none; }
.iw-btn--lobstart.is-blocked .iw-btn__label { -webkit-text-stroke: .14em var(--k); paint-order: stroke fill; }
.iw-btn--lobstart.is-blocked .iw-btn__icon { animation: none; opacity: .6; }
.iw-btn--lobstart.is-blocked.is-focus { color: var(--k); }
.iw-btn--lobstart.is-blocked.is-focus .iw-btn__label { -webkit-text-stroke: 0 transparent; }
.iw-btn--lobstart.is-blocked.is-focus .iw-btn__icon { opacity: .8; }
.iw-btn.is-shake { animation: iw-shake .4s; }

/* nameplates over the line-up: compact splashtags */
.iw-lob__plates { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }   /* plate z-order stays inside (modals, wheel, drawer above) */
.iw-plate { --tc: var(--a); position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.iw-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); }
.iw-plate.is-on .iw-plate__stack { opacity: 1; scale: 1; }
.iw-plate__tag.iw-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); }
.iw-plate:nth-child(even) .iw-plate__tag { rotate: 2deg; }
.iw-plate__tag .iw-stag__title { display: none; }
.iw-plate__tag .iw-stag__art::after { background: var(--tex-dots); }
.iw-plate__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 400 calc(var(--u) * 1.3) / 1.12 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .01em; color: #fff; -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
.iw-plate.is-long .iw-plate__name { font-size: calc(var(--u) * .98); }
.iw-plate.is-xlong .iw-plate__name { font-size: calc(var(--u) * .84); }
.iw-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); }
.iw-plate__w svg { width: 76%; height: 76%; }
.iw-plate__w.is-pop { animation: iw-code-pop .45s var(--spring2); }
.iw-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; }
.iw-plate__crown svg { width: 100%; height: 100%; }
.iw-plate__crown svg path { stroke: var(--k); stroke-width: 9; paint-order: stroke; }
.iw-plate.is-host .iw-plate__crown { display: block; }
.iw-plate__crown.is-stamp { animation: iw-medal-stamp .6s var(--spring2); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .04em;
  rotate: 10deg; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.iw-plate.is-you .iw-plate__you { display: block; }
.iw-plate.is-you .iw-plate__tag.iw-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); }
.iw-plate.is-you .iw-plate__name { font-size: calc(var(--u) * 1.42); }
.iw-plate.is-you .iw-plate__ping { display: none; }
.iw-plate.is-you.is-long .iw-plate__name { font-size: calc(var(--u) * 1.1); }
.iw-plate.is-you.is-xlong .iw-plate__name { font-size: calc(var(--u) * .9); }
.iw-plate.is-you .iw-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: iw-you-bob 1.1s ease-in-out infinite; }
@keyframes iw-you-bob { 50% { translate: 0 calc(var(--u) * .35); } }
.iw-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; }
.iw-plate__ping i { display: block; width: calc(var(--u) * .24); border-radius: 1px; background: rgba(255, 255, 255, .22); }
.iw-plate__ping i:nth-child(1) { height: 40%; } .iw-plate__ping i:nth-child(2) { height: 70%; } .iw-plate__ping i:nth-child(3) { height: 100%; }
.iw-plate__ping[data-q="0"] { display: none; }
.iw-plate__ping[data-q="3"] i { background: #6dffa8; }
.iw-plate__ping[data-q="2"] i:nth-child(-n+2) { background: #ffd54a; }
.iw-plate__ping[data-q="1"] i:nth-child(1) { background: #ff6a80; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; rotate: -9deg; box-shadow: 0 0 0 2.5px var(--k), 2px 3px 0 2.5px var(--k); }
.iw-plate__ready i { display: block; width: 1.15em; height: 1.15em; }
.iw-plate__ready i svg { width: 100%; height: 100%; }
.iw-plate.is-ready:not(.is-hostready) .iw-plate__ready { display: inline-flex; }
.iw-plate__ready.is-stamp { animation: iw-medal-stamp .55s var(--spring2); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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%; }
.iw-plate__bubble i { display: block; width: 1.35em; height: 1.35em; color: var(--tc-dark, var(--k)); }
.iw-plate__bubble i svg { width: 100%; height: 100%; }
.iw-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); }
.iw-plate__bubble.is-on { animation: iw-bubble 1.9s var(--spring2) forwards; }
@keyframes iw-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 */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .12em; rotate: -2deg; box-shadow: 0 0 0 2.5px var(--k); }
.iw-plate__ghost::before { content: ''; position: absolute; inset: 3px; border-radius: inherit; border: 2px dashed rgba(255, 255, 255, .35); }
.iw-plate__plus { display: block; width: 1.3em; height: 1.3em; }
.iw-plate__plus svg { width: 100%; height: 100%; }
.iw-plate.is-open.is-on .iw-plate__stack { opacity: .92; animation: iw-open-bob 3s ease-in-out infinite; }
@keyframes iw-open-bob { 50% { translate: -50% calc(var(--u) * -.25); } }
.iw-plate.is-open.is-bot .iw-plate__ghost { color: rgba(255, 255, 255, .55); }

/* emote wheel */
.iw-emowheel { position: absolute; inset: 0; z-index: 42; animation: iw-fade .15s both; }
.iw-emowheel.is-leaving { animation: iw-fade-out .18s forwards; pointer-events: none; }
.iw-emowheel__card { position: absolute; width: calc(var(--u) * 25); height: calc(var(--u) * 19.5); translate: -50% calc(-100% - var(--u) * 1.3); }
.iw-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: iw-pop .35s var(--spring) both; }
.iw-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: iw-pop .4s var(--spring2) both; }
.iw-emowheel__hub svg { width: 100%; height: 100%; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; white-space: nowrap; box-shadow: var(--stk-k);
  translate: -50% -50%; animation: iw-emo-in .45s var(--spring2) backwards; transition: transform .35s var(--spring), background .2s; }
.iw-emo > i { display: block; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); color: var(--a-dark); }
.iw-emo > i svg { width: 100%; height: 100%; }
.iw-emo__key { font-size: calc(var(--u) * .78); }
.iw-emo--up { left: 50%; top: 11%; animation-delay: 0ms; rotate: -3deg; }
.iw-emo--right { left: 88%; top: 50%; animation-delay: 40ms; rotate: 3deg; }
.iw-emo--down { left: 50%; top: 89%; animation-delay: 80ms; rotate: 2deg; }
.iw-emo--left { left: 12%; top: 50%; animation-delay: 120ms; rotate: -2deg; }
@keyframes iw-emo-in { from { opacity: 0; scale: .3; } }
.iw-emo.is-focus, .iw-emo.is-hover { background: var(--hv); transform: scale(1.12); }
.iw-dpad { width: 1.9em; height: 1.9em; }
.iw-dpad svg { width: 70%; height: 70%; }
.iw-dpad--up svg { rotate: -90deg; } .iw-dpad--down svg { rotate: 90deg; } .iw-dpad--left svg { rotate: 180deg; }

/* loadout drawer */
.iw-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: iw-fade .22s both; }
.iw-ldr.is-leaving { animation: iw-fade-out .22s forwards; pointer-events: none; }
.iw-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: iw-ldr-in .5s var(--spring) both; transform-origin: 20% 100%; }
.iw-ldr.is-leaving .iw-ldr__card { animation: iw-ldr-out .22s var(--in) forwards; }
@keyframes iw-ldr-in { from { opacity: 0; translate: 0 calc(var(--u) * 4); scale: .94; } }
@keyframes iw-ldr-out { to { opacity: 0; translate: 0 calc(var(--u) * 2); scale: .97; } }
.iw-ldr__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.iw-ldr__head .iw-seclabel { font: 400 calc(var(--u) * 1.5) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .02em; -webkit-text-stroke: .15em var(--k); paint-order: stroke fill; rotate: -1.5deg; }
.iw-ldr__hint { display: flex; gap: calc(var(--u) * 1.2); font: 700 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-ldr__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(var(--u) * .8); }
.iw-ldr__grid .iw-wcard { height: calc(var(--u) * 8); gap: calc(var(--u) * .2); padding: calc(var(--u) * .5) calc(var(--u) * .4) calc(var(--u) * .6); }
.iw-ldr__grid .iw-wcard__icon svg { height: calc(var(--u) * 4); }
.iw-ldr__grid .iw-wcard__name { font-size: calc(var(--u) * 1.05); }
.iw-ldr__grid .iw-wcard__blob { width: calc(var(--u) * 9); }
.iw-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); }
.iw-ldr__detail .iw-wd__title { grid-column: 1; }
.iw-ldr__detail .iw-wd__name { font-size: calc(var(--u) * 2.1); }
.iw-ldr__detail .iw-wd__blurb { grid-column: 1; font-size: var(--fs-xs); line-height: 1.35; margin: 0; }
.iw-ldr__detail .iw-wd__stats { grid-column: 2; grid-row: 1 / span 3; gap: calc(var(--u) * .45); }
.iw-ldr__detail .iw-stat { grid-template-columns: calc(var(--u) * 8.4) 1fr; }
.iw-ldr__detail .iw-stat__fill { transition: clip-path .45s var(--spring); }
.iw-ldr__detail.is-swap .iw-wd__name, .iw-ldr__detail.is-swap .iw-wd__blurb { animation: iw-tip-in .35s var(--spring); }
.iw-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 */
.iw-online .iw-modal, .iw-lobby .iw-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); }
.iw-online .iw-modal__card, .iw-lobby .iw-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: iw-modal-stamp .5s var(--spring2) both; }
@keyframes iw-modal-stamp { 0% { opacity: 0; scale: 1.35; rotate: 6deg; } 50% { opacity: 1; } }
.iw-online .iw-modal__splat svg path, .iw-online .iw-modal__splat svg circle, .iw-lobby .iw-modal__splat svg path, .iw-lobby .iw-modal__splat svg circle { stroke: var(--k); stroke-width: 5; paint-order: stroke; }
.iw-online .iw-modal__text, .iw-lobby .iw-modal__text { color: #fff; font-weight: 600; }
.iw-online .iw-modal__splat, .iw-lobby .iw-modal__splat { top: calc(var(--u) * -7.4); }
.iw-online .iw-btn--modal, .iw-lobby .iw-btn--modal { --bg: #fff; --fill: var(--hv); --fill-ink: var(--k); color: var(--k); border-radius: 999px; box-shadow: var(--stk-k); }
.iw-online .iw-btn--modal.iw-btn--danger, .iw-lobby .iw-btn--modal.iw-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 */
.iw-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; }
.iw-lcd.is-on { opacity: 1; }
.iw-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: iw-spin 16s linear infinite; }
.iw-lcd__splat { position: absolute; width: calc(var(--u) * 22); height: calc(var(--u) * 22); animation: iw-spin 14s linear infinite; }
.iw-lcd__splat svg { width: 100%; height: 100%; }
.iw-lcd__splat svg path, .iw-lcd__splat svg circle { stroke: var(--k); stroke-width: 5; paint-order: stroke; }
.iw-lcd__num { position: relative; font: 400 calc(var(--u) * 12.5) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: #fff; -webkit-text-stroke: .1em var(--k); paint-order: stroke fill; text-shadow: .05em .07em 0 var(--k); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-lcd__sub:empty { display: none; }
.iw-lcd.is-beat .iw-lcd__num { animation: iw-lcd-beat .55s var(--spring2); }
.iw-lcd.is-beat .iw-lcd__splat { animation: iw-lcd-splat .6s var(--spring2), iw-spin 14s linear infinite; }
@keyframes iw-lcd-beat { 0% { scale: 2.2; opacity: 0; rotate: -14deg; } 45% { opacity: 1; } 100% { scale: 1; rotate: 0deg; } }
@keyframes iw-lcd-splat { 0% { scale: .3; } 60% { scale: 1.12; } }
.iw-lcd.is-go .iw-lcd__num { font-size: calc(var(--u) * 14); color: var(--hv); rotate: -6deg; }
.iw-lobby.is-starting .iw-lob__side { animation: iw-lob-out-l .5s var(--in) forwards; }
.iw-lobby.is-starting .iw-lob__bar, .iw-lobby.is-starting .iw-prompts, .iw-lobby.is-starting .iw-lob__band { animation: iw-lob-out-d .5s var(--in) forwards; }
.iw-lobby.is-starting .iw-lob__top, .iw-lobby.is-starting .iw-lob__status { animation: iw-lob-out-u .5s var(--in) .08s forwards; }
.iw-lobby.is-starting .iw-lob__plates { opacity: 0; transition: opacity .4s 2.6s; }
.iw-lobby.is-starting .iw-plate.is-open { opacity: 0; transition: opacity .3s; }
@keyframes iw-lob-out-l { to { opacity: 0; translate: calc(var(--u) * -8) 0; } }
@keyframes iw-lob-out-d { to { opacity: 0; translate: 0 calc(var(--u) * 6); } }
@keyframes iw-lob-out-u { to { opacity: 0; translate: 0 calc(var(--u) * -5); } }
.iw-lobby.is-starting .iw-lob__scrim { opacity: .5; transition: opacity .6s; }

/* lobby: toasts ride in the free band between the room code and the room status */
.iw-ui[data-screen="lobby"] .iw-toasts { right: auto; left: calc(var(--u) * 61 + var(--sal)); top: calc(var(--u) * 2.8 + var(--sat)); align-items: center; translate: -50% 0; }
.iw-ui[data-screen="lobby"] .iw-toast { max-width: calc(var(--u) * 16); padding: .45em .9em .5em .45em; font-size: var(--fs-xs); animation-name: iw-toast-in-d; }
.iw-ui[data-screen="lobby"] .iw-toast.is-out { animation-name: iw-toast-out-u; }
.iw-ui[data-screen="lobby"] .iw-toast__icon { width: 2.1em; height: 2.1em; }
@keyframes iw-toast-in-d { from { opacity: 0; translate: 0 calc(var(--u) * -2.5); scale: .6; rotate: -12deg; } }
@keyframes iw-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 */
.iw-lobby.is-alone .iw-rc__copy:not(.is-focus) { animation: iw-copy-nudge 2.4s ease-in-out infinite 1.5s; }
@keyframes iw-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 */
.iw-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); }
.iw-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%); }
.iw-res__lobbytxt { display: flex; flex-direction: column; gap: .2em; }
.iw-res__lobbytxt small { font: 900 calc(var(--u) * .66) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; }
.iw-res__lobbytxt b { font: 400 calc(var(--u) * 2.1) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; }
.iw-res__lobbytxt b.is-tick { animation: iw-code-pop .4s var(--spring2); }
.iw-res__lobby.is-due .iw-res__lobbyring { animation: iw-spin 1s linear infinite; background: conic-gradient(var(--k) 0 90deg, rgba(0, 0, 0, .2) 0); }
.iw-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); }
.iw-btn--toroom .iw-btn__sub { font-size: var(--fs-xs); }
/* online pause: the match is still running */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-pause__live i { width: .75em; height: .75em; border-radius: 50%; background: #ff4d6a; animation: iw-live 1.6s ease-out infinite; }

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

/* =====================================================================================
   BOSS MODE — Play › mode select (Turf War | Boss Battle), stage select boss variant, lobby MODE, boss results
   ===================================================================================== */
/* ------------------------------------------------------------------ mode select: two big sticker cards */
.iw-modesel__row { position: absolute; left: 50%; top: calc(var(--u) * 12.2); display: flex; gap: calc(var(--u) * 4.2); translate: -50% 0; }
.iw-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; }
.iw-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); }
.iw-mode.is-hover { transition: transform .2s var(--out), box-shadow .25s, translate .45s var(--spring), scale .45s var(--spring); }
.iw-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); }
.iw-mode.is-down { scale: .98; }
.iw-mode.is-pick { animation: iw-mode-pick .5s var(--spring2); }
@keyframes iw-mode-pick { 0% { scale: .94; } 45% { scale: 1.09; } }
.iw-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); }
.iw-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; }
.iw-mode--boss .iw-mode__img { filter: brightness(.62) saturate(.85) hue-rotate(-8deg); }
.iw-mode:not(.is-focus) .iw-mode__img { filter: brightness(.7) saturate(.75); }
.iw-mode--boss:not(.is-focus) .iw-mode__img { filter: brightness(.45) saturate(.65); }
.iw-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%); }
.iw-mode__splat { position: absolute; left: 50%; top: 60%; width: calc(var(--u) * 27); height: calc(var(--u) * 27); translate: -50% -50%; opacity: .95; animation: iw-spin 60s linear infinite; }
.iw-mode__splat svg { width: 100%; height: 100%; }
.iw-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); }
.iw-mode__hero.is-boss { width: calc(var(--u) * 33.5); filter: drop-shadow(0 calc(var(--u) * .5) 0 rgba(0, 0, 0, .35)); }
.iw-mode__hero.is-boss svg { width: 100%; height: auto; }
.iw-mode.is-focus .iw-mode__hero.is-boss { animation: iw-mode-stomp 1.6s ease-in-out infinite; }
@keyframes iw-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); } }
.iw-mode__hero.is-turf { display: flex; align-items: center; gap: calc(var(--u) * .6); bottom: calc(var(--u) * 1.6); }
.iw-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)); }
.iw-mode__squid svg { width: 100%; height: 100%; }
.iw-mode__squid.is-a { color: var(--a); rotate: -10deg; }
.iw-mode__squid.is-b { color: var(--b); rotate: 10deg; transform: scaleX(-1); }
.iw-mode.is-focus .iw-mode__squid.is-a { animation: iw-mode-bob 1s ease-in-out infinite; }
.iw-mode.is-focus .iw-mode__squid.is-b { animation: iw-mode-bob 1s ease-in-out infinite .5s; }
@keyframes iw-mode-bob { 50% { translate: 0 calc(var(--u) * -.8); } }
.iw-mode__vs { font-size: calc(var(--u) * 4); color: #fff; rotate: -8deg; }
.iw-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; }
.iw-mode.is-hover .iw-mode__glare, .iw-mode.is-focus .iw-mode__glare { opacity: 1; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .22em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); rotate: -3deg; }
.iw-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); }
.iw-mode__tape .iw-display { font-size: calc(var(--u) * 3.5); color: #fff; }
.iw-mode.is-focus .iw-mode__tape { rotate: -4.5deg; scale: 1.05; }
.iw-mode__blurb { margin: calc(var(--u) * 2.9) calc(var(--u) * 1.8) 0; font: 600 var(--fs-s) / 1.4 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: rgba(255, 255, 255, .86); }
.iw-mode__chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); margin: auto calc(var(--u) * 1.6) calc(var(--u) * 1.5); }
.iw-mode .iw-chip { background: rgba(255, 255, 255, .1); }
.iw-mode .iw-chip i { color: var(--mc-l); }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; box-shadow: 0 0 0 3px var(--k), 0 4px 0 3px var(--k); rotate: 12deg; animation: iw-mode-new 1.4s ease-in-out infinite; }
@keyframes iw-mode-new { 50% { scale: 1.1; rotate: 6deg; } }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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); }
.iw-mode__go i { display: block; width: 1.3em; height: 1.3em; }
.iw-mode__go i svg { width: 100%; height: 100%; }
.iw-mode.is-focus .iw-mode__go { opacity: 1; scale: 1; }
.iw-mode.is-focus .iw-mode__chips { padding-right: calc(var(--u) * 8); }
.iw-modesel[data-mode="boss"] .iw-head__blob .iw-fa { fill: var(--b); }
.iw-modesel[data-mode="boss"] .iw-ss__scrim::after { opacity: .85; }

/* ------------------------------------------------------------------ stage select: boss variant */
.iw-setup.is-boss .iw-head__blob .iw-fa { fill: var(--b); }
.iw-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: iw-pop .5s var(--spring2) backwards .35s; }
.iw-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; }
.iw-ss__bossemb svg { width: 100%; height: 100%; scale: 1.06; translate: 0 5%; }
.iw-ss__bosstxt { display: flex; flex-direction: column; gap: .15em; }
.iw-ss__bosstxt small { font: 900 calc(var(--fs-xs) * .9) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .2em; color: var(--b-light); }
.iw-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 */
.iw-lset--mode { position: relative; flex: none; flex-direction: row; align-items: center; gap: 0; padding: 0; background: none; }
.iw-lset--mode.is-focus { background: none; transform: none; animation: none; }
.iw-lset--mode.is-focus .iw-lob__mode { scale: 1.07; }
.iw-lset--mode.is-hit .iw-lob__mode, .iw-lset--mode.is-swap .iw-lob__mode { animation: iw-squish .45s var(--spring2); }
.iw-lset--mode.is-flash { animation: none; }
.iw-lset--mode.is-flash .iw-lob__mode { animation: iw-squish .5s var(--spring2); }
.iw-lob__mode { transition: scale .3s var(--spring); }
.iw-lobby.is-bossmode .iw-lob__mode { font-size: calc(var(--u) * 1.62); }
.iw-lobby.is-bossmode .iw-lob__mode > i svg path, .iw-lobby.is-bossmode .iw-lob__mode > i svg circle { fill: var(--tb); }
.iw-lob__mode > i b .iw-ico { overflow: visible; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .18em; rotate: -4deg; box-shadow: 0 0 0 2px var(--k); }
.iw-lobby:not(.is-host) .iw-lob__modelbl { background: #fff; }
.iw-lob__modearrows { display: flex; gap: calc(var(--u) * .22); margin-left: calc(var(--u) * .3); }
.iw-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; }
.iw-lob__modearrows i svg { width: 64%; height: 64%; }
.iw-lobby:not(.is-host) .iw-lob__modearrows { display: none; }
.iw-lobby.is-bossmode .iw-lock { max-width: 42%; }
/* Zone Control rooms: the longer headline, and the fixed 5:00 + overtime in place of the length picker */
.iw-lobby.is-zonemode .iw-lob__mode { font-size: calc(var(--u) * 1.62); }
.iw-lobby.is-zonemode .iw-lock { max-width: 42%; }
.iw-lset--len.is-locked .iw-seg { display: none; }
.iw-lset--len.is-locked .iw-lenlock { display: flex; }

.iw-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); }
.iw-lob__squadlock i { flex: none; display: block; width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); color: var(--ta); }
.iw-lob__squadlock i svg { width: 100%; height: 100%; }
.iw-lob__squadlock b { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .05em; color: var(--ta); }
.iw-lob__squadlock small { margin-left: auto; font: 800 calc(var(--u) * .62) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .05em; color: #cfc8e0; white-space: nowrap; }
.iw-lob__team.is-locked .iw-seg { display: none; }
.iw-lob__team.is-locked .iw-lob__squadlock { display: flex; }
.iw-lob__team.is-locked .iw-lob__barlbl .iw-hint { opacity: .3; }
.iw-lobby.is-bossmode .iw-lob__teamprompt { display: none; }

.iw-lob__bossvs { display: none; align-items: center; gap: calc(var(--u) * .4); }
.iw-lob__status.is-boss .iw-lob__teams { display: none; }
.iw-lob__status.is-boss .iw-lob__bossvs { display: flex; }
.iw-lob__status.is-swap { animation: iw-squish .45s var(--spring2); }
.iw-lob__pips.is-squad { display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--u) * .05) calc(var(--u) * .1); }
.iw-lob__pips.is-squad i { width: calc(var(--u) * 2.15); height: calc(var(--u) * 2.15); }
.iw-lob__pips.is-squad i.is-on { color: var(--ta); }
.iw-lob__bossside { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .3); padding-left: calc(var(--u) * .3); }
.iw-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; }
.iw-lob__bossemb svg { width: 100%; height: 100%; scale: 1.06; translate: 0 5%; }
.iw-lob__status.is-boss .iw-lob__bossemb { animation: iw-lob-bossbob 2.4s ease-in-out infinite; }
@keyframes iw-lob-bossbob { 50% { rotate: -4deg; translate: 0 calc(var(--u) * -.2); } }
.iw-lob__bossname { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.iw-lob__bossname small { font: 900 calc(var(--u) * .5) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .2em; color: #cfc8e0; }
.iw-lob__bossname b { font: 400 calc(var(--u) * .9) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; color: var(--tb); -webkit-text-stroke: .16em var(--k); paint-order: stroke fill; }
@media (prefers-reduced-motion: reduce) { .iw-lob__status.is-boss .iw-lob__bossemb, .iw-mode.is-focus .iw-mode__hero.is-boss, .iw-mode__new, .iw-mode__splat, .iw-mode.is-focus .iw-mode__squid { animation: none !important; } }

/* ------------------------------------------------------------------ results: Boss Battle (HP panel, squad ranked by damage, MVP stamp) */
.iw-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); }
.iw-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); }
.iw-rb__emb svg { width: 100%; height: 100%; scale: 1.06; translate: 0 5%; }
.iw-res__boss.is-win.is-landed .iw-rb__emb { animation: iw-rb-sink .9s var(--in) forwards; }
@keyframes iw-rb-sink { 40% { rotate: 20deg; } 100% { rotate: 172deg; filter: grayscale(.35) brightness(.92); } }
.iw-rb__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .45); }
.iw-rb__row { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.iw-rb__name { font-size: calc(var(--u) * 1.55); color: #fff; letter-spacing: .05em; }
.iw-rb__phase { display: flex; align-items: center; gap: calc(var(--u) * .28); margin-left: auto; }
.iw-rb__phase small, .iw-rb__hp small { font: 900 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .6); margin-right: .2em; }
.iw-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); }
.iw-rb__pip.is-on { background: var(--tb-light); }
.iw-rb__hp { display: flex; align-items: baseline; }
.iw-rb__hp b { font: 400 calc(var(--u) * 1.35) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.iw-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); }
.iw-rb__fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(var(--tb-light) -30%, var(--tb) 45%, var(--tb-dark)); }
.iw-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); }
.iw-rb__notch { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--k); }
.iw-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); }
.iw-rb__time i { grid-row: 1 / 3; display: block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); color: #ffd54a; }
.iw-rb__time i svg { width: 100%; height: 100%; }
.iw-rb__time small { font: 900 calc(var(--u) * .6) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.iw-rb__time b { font: 400 calc(var(--u) * 1.5) / 1 'Titan One', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; font-variant-numeric: tabular-nums; }
.iw-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); }
.iw-res__boss.is-lose .iw-rb__stamp { color: var(--tb-light); }
.iw-res__boss.is-landed .iw-rb__stamp { animation: iw-rb-stamp .45s var(--spring2) forwards; }
@keyframes iw-rb-stamp { 0% { opacity: 0; scale: 2.4; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
.iw-res__boss.is-landed { animation: iw-cover-land .45s var(--spring); }
.iw-res__tag--escaped { background: var(--tb); color: var(--tb-ink); }
.iw-res__tag--escaped i { color: var(--tb-ink); }

.iw-res__teams.is-boss { gap: calc(var(--u) * 2); }
.iw-ttable--boss .iw-ttable__head, .iw-ttable--boss .iw-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); }
.iw-ttable--boss .iw-ttable__col:nth-child(2) { justify-content: flex-end; }
.iw-ttable--boss .iw-ttable__col:last-child { justify-content: flex-end; }
.iw-ttable--boss .iw-prow { position: relative; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; }
.iw-prow.is-mvp .iw-prow__rank { background: #ffd54a; color: var(--k); }
.iw-prow__sm { display: flex; align-items: baseline; justify-content: flex-end; gap: .1em; font-size: calc(var(--u) * 1.1); }
.iw-prow__sm small { font: 800 var(--fs-xs) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; opacity: .7; }
.iw-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; }
.iw-prow.has-stamp .iw-prow__stamp { opacity: 1; scale: 1; }
.iw-prow.is-stamping .iw-prow__stamp { animation: iw-rb-stamp .5s var(--spring2) backwards; }

/* =====================================================================================
   PUBLIC BETA badge (boss mode card, lobby MODE switch, boss title card, boss results)
   ===================================================================================== */
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',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; }
.iw-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); }
.iw-beta--sm { font-size: max(9px, calc(var(--u) * .56)); letter-spacing: .12em; padding: .3em .5em .28em .32em; }
.iw-mode__beta { position: absolute; left: calc(var(--u) * 7.4); top: calc(var(--u) * 1.45); rotate: 2deg; }
.iw-lob__beta { position: absolute; z-index: 5; right: calc(var(--u) * .5); top: calc(100% + var(--u) * 1.15); display: none; rotate: 3deg; }
.iw-lobby.is-bossmode .iw-lob__beta { display: inline-flex; animation: iw-pop .4s var(--spring2); }
.iw-res__beta { rotate: 2deg; }

/* =====================================================================================
   WHAT'S NEW (src/ui/news.js) — splat-wiped sticker cards, shown once per update on the first main menu
   ===================================================================================== */
.iw-news { --nu: var(--u); position: absolute; inset: 0; z-index: 60; pointer-events: auto; overflow: hidden; }
.iw-news__dim { position: absolute; inset: 0; background: rgba(8, 6, 14, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: iw-fade .25s both; }
.iw-news.is-leaving .iw-news__dim { animation: iw-fade-out .45s .05s forwards; }
.iw-news.is-leaving { pointer-events: none; }
.iw-news__inks { position: absolute; inset: 0; }
.iw-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%); }
.iw-news__ink.is-a { --c: var(--a); --c-rgb: var(--a-rgb); --c-dark: var(--a-dark); }
.iw-news__ink.is-b { --c: var(--b); --c-rgb: var(--b-rgb); --c-dark: var(--b-dark); }
.iw-news__ink.is-fade { animation: iw-fade .3s both; }
.iw-news.is-reduced.is-leaving .iw-news__ink { animation: iw-fade-out .25s forwards; }
.iw-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%); }

.iw-news__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--nu) * 3); }
.iw-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); }
.iw-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%); }
.iw-news__card.is-in { animation: iw-news-in .7s var(--spring2) .28s backwards; }
.iw-news__card.is-swap { animation: iw-news-in .55s var(--spring2) backwards; }
.iw-news__card.is-out { animation: iw-news-out .28s var(--in) forwards; }
@keyframes iw-news-in { 0% { opacity: 0; scale: .55; rotate: -9deg; } 55% { opacity: 1; } }
@keyframes iw-news-out { to { opacity: 0; scale: .8; rotate: 5deg; } }

/* hero: the render as a taped ticket */
.iw-news__hero { position: relative; aspect-ratio: 16 / 9; rotate: 2.2deg; }
.iw-news__herosplat { position: absolute; left: -9%; top: -16%; width: 44%; aspect-ratio: 1; z-index: 0; animation: iw-spin 40s linear infinite; }
.iw-news__herosplat svg { width: 100%; height: 100%; }
.iw-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); }
.iw-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); }
.iw-news__frame.is-loaded .iw-news__img { opacity: 1; scale: 1; }
.iw-news__glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 42%, transparent 54%); translate: -100% 0; }
.iw-news__card.is-in .iw-news__glare, .iw-news__card.is-swap .iw-news__glare { animation: iw-news-glare 1.1s var(--out) .75s both; }
@keyframes iw-news-glare { to { translate: 100% 0; } }
.iw-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%); }
.iw-news__fb svg { width: 88%; height: auto; }
.iw-news__fbsquid { display: block; width: 36%; color: var(--nc); }
.iw-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%); }
.iw-news__tapebit.is-tl { left: -5%; top: -3%; rotate: -33deg; }
.iw-news__tapebit.is-br { right: -5%; bottom: -3%; rotate: -33deg; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .03em; rotate: 12deg; box-shadow: 0 0 0 3px var(--k), 0 4px 0 3px var(--k);
  animation: iw-news-stamp .55s var(--spring2) .75s backwards, iw-mode-new 1.4s ease-in-out 1.4s infinite; }
@keyframes iw-news-stamp { from { opacity: 0; scale: 2.4; rotate: -10deg; } }
.iw-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: iw-news-tape .5s var(--spring) .7s backwards; }
.iw-news__tape span { display: block; padding: .35em .7em .32em; background: #fff; color: var(--k); font: 900 calc(var(--nu) * 1.12) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .14em; white-space: nowrap; box-shadow: 0 0 0 2px var(--k); }
@keyframes iw-news-tape { from { opacity: 0; translate: calc(var(--nu) * -8) 0; } }

/* body */
.iw-news__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .24em; rotate: -3deg; box-shadow: 0 0 0 2.5px var(--k);
  animation: iw-news-pop .45s var(--spring2) .45s backwards; }
.iw-news__kicker i { display: block; width: 1.2em; height: 1.2em; }
.iw-news__kicker i svg { width: 100%; height: 100%; }
.iw-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; }
.iw-news__title span { display: block; animation: iw-news-word .5s var(--spring2) backwards; animation-delay: calc(.52s + var(--i) * 90ms); }
.iw-news__title span:nth-child(2) { color: var(--nc-light); }
.iw-news__title.is-one { font-size: calc(var(--nu) * 4.7); }
.iw-news__title.is-one span { color: #fff; }
.iw-news[data-page="boss"] .iw-news__title.is-one span { color: var(--nc-light); }
@keyframes iw-news-word { from { opacity: 0; scale: 1.8; translate: 0 -.2em; } }
@keyframes iw-news-pop { from { opacity: 0; scale: .3; } }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: rgba(255, 255, 255, .88); animation: iw-news-pop .4s var(--out) .65s backwards; }
.iw-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%; }
.iw-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', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; color: rgba(255, 255, 255, .86);
  animation: iw-news-li .45s var(--spring) backwards; animation-delay: calc(.72s + var(--i) * 90ms); }
.iw-news__list b { color: #fff; font-weight: 900; }
@keyframes iw-news-li { from { opacity: 0; translate: calc(var(--nu) * 3) 0; } }
.iw-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; }
.iw-news__bico svg { width: 62%; height: 62%; }
.iw-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); }
.iw-news__btns { display: flex; align-items: center; gap: calc(var(--nu) * 1.2); flex-wrap: wrap; animation: iw-news-pop .45s var(--spring2) .95s backwards; }
.iw-news__btns .iw-btn--wide { height: calc(var(--nu) * 4.6); font-size: calc(var(--nu) * 1.9); padding: 0 calc(var(--nu) * 2); }
.iw-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); }
.iw-news__go.is-focus { color: var(--k); }
.iw-news__chev { display: block; width: 1.05em; height: 1.05em; margin-left: .15em; }
.iw-news__chev svg { width: 100%; height: 100%; }
.iw-news__go.is-focus .iw-news__chev { animation: iw-nudge-r 1s ease-in-out infinite; }
.iw-news__key { position: absolute; right: calc(var(--nu) * .9); top: 50%; translate: 0 -50%; font-size: calc(var(--nu) * .78); opacity: .95; }
.iw-news__go { padding-right: calc(var(--nu) * 4.6) !important; }
.iw-news__later.is-focus, .iw-news__skip.is-focus { color: var(--k); }
.iw-news__later { --fill: #fff; --fill-ink: var(--k); }
.iw-news__skip { --fill: #fff; --fill-ink: var(--k); gap: .7em; }
.iw-news__skipkey { font-size: .85em; opacity: .9; }
.iw-news__foot { display: flex; align-items: center; gap: calc(var(--nu) * .7); margin-top: calc(var(--nu) * 1.4); }
.iw-news__dots { display: flex; gap: calc(var(--nu) * .4); }
.iw-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; }
.iw-news__dots i.is-on { width: calc(var(--nu) * 2.2); border-radius: 99px; background: var(--nc); }
.iw-news__count { font: 900 max(10px, calc(var(--nu) * .75)) / 1 'Rubik', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC','WenQuanYi Micro Hei',sans-serif; letter-spacing: .18em; color: rgba(255, 255, 255, .55); }

/* confetti */
.iw-news__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.iw-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); }
.iw-news__confetti.is-on i { animation: iw-news-conf var(--t) cubic-bezier(.25, .6, .5, 1) var(--d) forwards; }
@keyframes iw-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) {
  .iw-news { --nu: min(2.1vw, 1.25vh); }
  .iw-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; }
  .iw-news__stage { padding: calc(var(--nu) * 2.2); overflow-y: auto; }
  .iw-news__title { font-size: calc(var(--nu) * 4.2); }
  .iw-news__title.is-one { font-size: calc(var(--nu) * 5.4); }
}
@media (prefers-reduced-motion: reduce) {
  .iw-news__card, .iw-news__card *, .iw-news__herosplat, .iw-news__stamp { animation: none !important; }
  .iw-news__confetti { display: none; }
  .iw-news__img { transition: opacity .2s; scale: 1; }
}
.iw-news.is-reduced .iw-news__confetti { display: none; }
.iw-news.is-reduced .iw-news__card.is-out { animation: iw-fade-out .2s forwards !important; }

/* ---- mode select with Zone Control: three cards in the row (narrower cards, same sticker language) */
.iw-modesel__row.is-three { gap: calc(var(--u) * 2.6); }
.iw-modesel__row.is-three .iw-mode { width: calc(var(--u) * 30.5); }
.iw-modesel__row.is-three .iw-mode__hero.is-boss { width: calc(var(--u) * 28); }
.iw-modesel__row.is-three .iw-mode__splat { width: calc(var(--u) * 23); height: calc(var(--u) * 23); }
.iw-modesel__row.is-three .iw-mode__squid { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); }
.iw-modesel__row.is-three .iw-mode__tape .iw-display { font-size: calc(var(--u) * 3); }
.iw-mode--zones { --mc: #ffc233; --mc-rgb: 255, 194, 51; --mc-l: #ffe08a; --mc-d: #a8740a; --mc-ink: #3a2800; }
.iw-mode--zones .iw-mode__tape .iw-display { color: #2a1d00; }
.iw-mode__zone { display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); color: #fff; filter: drop-shadow(0 calc(var(--u) * .35) 0 var(--k)); }
.iw-mode__zone svg { width: 100%; height: 100%; }
.iw-mode--zones.is-focus .iw-mode__zone { animation: iw-mode-bob 1.2s ease-in-out infinite .25s; }


/* 汉化署名角标 */
.iw-zh-credit { color: #ffd23f; letter-spacing: .05em; }