/* ULTIMA CHIAMATA · survivor select
   Layout: HUD strip / [ big portrait | roster grid + final boss | dossier ] / console strip.
   One screen on desktop. Every panel is transparent with an orange neon edge,
   floating over the ash-white world layer (or your artwork, or nothing).
   Portrait view: the same interface recomposed into a 540×960 (9:16) frame, scaled to fit. */

:root {
  /* palette */
  --ash: #ECECE8;           /* fallout white, the ground */
  --ash-hi: #F7F7F4;
  --dust: #D8D8D2;
  --soot: #17181B;          /* ink */
  --smoke: #585B61;         /* secondary ink */
  --neon: #FF5A14;          /* orange neon tube */
  --neon-hover: #FF7433;
  --neon-glow: rgba(255, 90, 20, .55);
  --neon-dim: rgba(255, 90, 20, .42);
  --ember: #B53A00;         /* orange for small text, readable on white */
  --void: #0B0C0E;          /* letterbox around the portrait frame */
  --boss-bg: #111214;       /* the final boss slab stays dark in every mode */
  --boss-fg: #EFEFEA;
  --boss-dim: #9A9DA3;

  /* panels: raise --panel for more frost, set it to transparent for none */
  --panel: rgba(255, 255, 255, .16);
  --panel-blur: 3px;
  --glass: rgba(255, 255, 255, .22);

  /* type */
  --f-display: 'Big Shoulders Stencil', 'Saira Stencil One', Impact, 'Arial Narrow Bold', sans-serif;
  --f-body: 'Chakra Petch', 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Share Tech Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* frame geometry: size of the cut corners and the neon line */
  --cut: 16px;
  --bw: 2px;

  /* placeholder figure (shown until a picture is added) */
  --sil-body: rgba(23, 24, 27, .13);
  --sil-hood: rgba(23, 24, 27, .2);
  --sil-mask: rgba(23, 24, 27, .42);
  --sil-lens: rgba(255, 90, 20, .42);
  --sil-can: rgba(23, 24, 27, .55);
  --sil-grill: rgba(236, 236, 232, .7);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .1 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --static: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .1 0 0 0 4.2 -1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Dark mode, and whenever Dee Jay Park is selected: same tokens, night values. */
body.is-dark,
body.is-boss {
  --ash: #111214;
  --ash-hi: #1B1C1F;
  --dust: #2B2C30;
  --soot: #EFEFEA;
  --smoke: #A2A5AA;
  --ember: #FF8446;
  --panel: rgba(10, 10, 12, .35);
  --glass: rgba(255, 255, 255, .04);
  --sil-body: rgba(239, 239, 234, .1);
  --sil-hood: rgba(239, 239, 234, .16);
  --sil-mask: rgba(239, 239, 234, .3);
  --sil-can: rgba(239, 239, 234, .42);
  --sil-grill: rgba(17, 18, 20, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ash);
  color: var(--soot);
  font: 400 15px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--soot); outline-offset: 4px; }

html:has(body.is-transparent), body.is-transparent { background: transparent; }
body.is-transparent .world { display: none; }

/* ═══ WORLD LAYER ═══════════════════════════════════════════════════════ */

.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 0%, var(--ash-hi) 0%, var(--ash) 55%, var(--dust) 100%);
}
.world-art { position: absolute; inset: 0; background: center / cover no-repeat; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-skyline {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.03);
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.world-grain {
  position: absolute;
  inset: -50%;
  background-image: var(--grain);
  opacity: .45;
  animation: grain .7s steps(5) infinite;
}
.world-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(23, 24, 27, .14) 100%);
}

/* ═══ FRAME: transparent panel + neon edge with cut corners ═════════════ */

.frame {
  position: relative;
  isolation: isolate;
  --shape: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --ring: polygon(evenodd,
    0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 0,
    var(--bw) var(--bw), var(--bw) calc(100% - var(--cut) - 1px), calc(var(--cut) + 1px) calc(100% - var(--bw)),
    calc(100% - var(--bw)) calc(100% - var(--bw)), calc(100% - var(--bw)) calc(var(--cut) + 1px),
    calc(100% - var(--cut) - 1px) var(--bw), var(--bw) var(--bw));
}
.frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill, var(--panel));
  clip-path: var(--shape);
  transition: background .2s ease;
}
.edge {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 1px var(--neon)) drop-shadow(0 0 7px var(--neon-glow));
}
.edge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--neon);
  clip-path: var(--ring);
}
.stage::before,
.dossier::before {
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
}

/* ═══ APP SHELL ═════════════════════════════════════════════════════════ */

.app {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2vh, 22px);
  padding-block: clamp(14px, 2.4vh, 28px);
  padding-inline: clamp(16px, 2.4vw, 40px);
}

.label {
  font: 12px/1.2 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--smoke);
}
.label b { font-weight: 400; color: var(--soot); }

/* ═══ HUD ═══════════════════════════════════════════════════════════════ */

.hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
}
.brand { min-width: 0; }
.brand-title {
  font: 800 clamp(30px, 3.2vw, 50px)/.86 var(--f-display);
  letter-spacing: .07em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--neon);
  text-shadow: 0 0 18px var(--neon-glow);
  filter: drop-shadow(0 0 2px var(--neon));
  animation: flicker 9s infinite;
}
.brand-sub {
  margin-top: 8px;
  font: 12px/1 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--smoke);
}
.hud-center { text-align: center; }
.eyebrow {
  font: 12px/1 var(--f-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ember);
}
.tagline {
  margin-top: 8px;
  font: 800 clamp(22px, 2.3vw, 34px)/1 var(--f-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-wrap: balance;
}
.tagline.nudge { animation: nudge .3s linear; }

.hud-readouts {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px 22px;
}
.readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 15px/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.readout-label,
.readout-unit {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--smoke);
}
.readout-unit { letter-spacing: .06em; text-transform: none; }
.rad-meter {
  align-self: center;
  width: 58px;
  height: 8px;
  padding: 1px;
  border: 1px solid var(--soot);
}
.rad-meter i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon-glow);
  transition: width .6s ease;
}
.is-boss .rad-meter i { animation: blink .5s steps(1) infinite; }

/* ═══ DECK ══════════════════════════════════════════════════════════════ */

.deck {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr) minmax(290px, .95fr);
  grid-template-areas: "stage roster dossier";
  gap: clamp(16px, 2vw, 32px);
  min-height: 0;
}
.stage { grid-area: stage; }
.roster { grid-area: roster; }
.dossier { grid-area: dossier; }

/* ─── Stage: the big portrait, sliced per member ─── */

.stage {
  --cut: 26px;
  display: flex;
  min-width: 0;
  min-height: 0;
}
.stage-inner {
  position: relative;
  flex: 1;
  min-height: 360px;
  overflow: hidden;
  clip-path: var(--shape);
}
.stage-num {
  position: absolute;
  top: 3%;
  right: 6%;
  font: 900 clamp(110px, 20vh, 240px)/.8 var(--f-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-dim);
}
.stage-glow {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -25%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255, 90, 20, .36), rgba(255, 90, 20, .12) 55%, rgba(255, 90, 20, 0));
  animation: breathe 5s ease-in-out infinite;
}
.stage-media { position: absolute; inset: 0; }
.stage-media.glitch { animation: glitch .38s steps(1); }
.shot { position: absolute; inset: 0; }
.shot-box {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shot-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.fit-contain .shot-box img {
  padding: 9% 3% 0;
  object-fit: contain;
  object-position: center bottom;
}
.shot-box .silhouette {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 84%;
  margin-bottom: 18%;
}
.stage[data-n="2"] .shot-box .silhouette,
.stage[data-n="3"] .shot-box .silhouette { margin-bottom: 70%; }
.stage-slash {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 8px var(--neon-glow));
}
.stage-slash line {
  stroke: var(--neon);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.stage-fog {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ash) 92%, transparent),
    color-mix(in srgb, var(--ash) 50%, transparent) 40%,
    transparent);
}
.stage-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: repeating-linear-gradient(to bottom, rgba(23, 24, 27, .06) 0 1px, transparent 1px 4px);
}
.stage-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  background: linear-gradient(to bottom, transparent, rgba(255, 90, 20, .09), transparent);
  translate: 0 -100%;
  animation: sweep 7s linear infinite;
}
.stage-static {
  position: absolute;
  inset: -20%;
  background-image: var(--static);
  opacity: 0;
  pointer-events: none;
}
.stage-static.go { animation: static .34s steps(1); }

.stage-top {
  position: absolute;
  top: 16px;
  left: 18px;
  right: calc(var(--cut) + 12px);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font: 12px/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chip-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 5px;
  background: var(--soot);
  color: var(--ash);
}
.chip-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
  animation: blink 1.2s steps(1) infinite;
}
.stage-coords {
  margin-left: auto;
  padding: 5px 7px 4px;
  color: var(--smoke);
  background: color-mix(in srgb, var(--ash) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

.boss-alert {
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  z-index: 4;
  display: none;
  height: 30px;
  overflow: hidden;
  background: var(--neon);
  color: var(--boss-bg);
  box-shadow: 0 0 22px var(--neon-glow);
  font: 800 17px/30px var(--f-display);
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.is-boss .boss-alert { display: block; animation: alert-in .4s steps(4); }
.boss-alert-track { display: inline-flex; animation: ticker 9s linear infinite; }
.boss-alert-track span { padding-right: 1.4em; }

.nameplate {
  position: absolute;
  left: -10px;
  bottom: 26px;
  z-index: 5;
  max-width: calc(100% - 20px);
  padding: 11px 22px 16px 18px;
  background: var(--soot);
  color: var(--ash);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.nameplate::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 34px;
  bottom: 7px;
  height: 2px;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
}
.nameplate-no {
  font: 12px/1 var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neon);
}
.nameplate-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .04em .22em;
  margin-top: 5px;
  font: 900 clamp(36px, 4vw, 62px)/.86 var(--f-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.nameplate-name .x { color: var(--neon); font-size: .62em; }
.stage[data-n="2"] .nameplate-name { font-size: clamp(28px, 2.9vw, 44px); }
.stage[data-n="3"] .nameplate-name,
.stage[data-n="4"] .nameplate-name { font-size: clamp(24px, 2.3vw, 36px); }
.nameplate-sub {
  margin-top: 7px;
  font: 12px/1.25 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dust);
}

.stamp {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 4;
  padding: .1em .32em .02em;
  border: 5px solid currentColor;
  outline: 2px solid currentColor;
  outline-offset: 4px;
  color: var(--neon);
  font: 900 clamp(40px, 5vw, 78px)/1 var(--f-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-10deg) scale(1.8);
}
.is-boss .stamp { mix-blend-mode: normal; }
.is-locked .stamp { animation: stamp .38s cubic-bezier(.2, 1.4, .4, 1) forwards; }

.drop-hint {
  position: absolute;
  inset: 14px;
  z-index: 6;
  display: none;
  place-items: center;
  border: 2px dashed var(--neon);
  background: color-mix(in srgb, var(--ash) 60%, transparent);
  color: var(--ember);
  font: 800 24px/1 var(--f-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.is-dragging .drop-hint { display: grid; }
.stage.is-drop .drop-hint { background: color-mix(in srgb, var(--neon) 18%, transparent); }

/* ─── Roster grid ─── */

.roster {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.roster-body {
  --cols: 5;
  --g: clamp(8px, .9vw, 14px);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roster-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--g);
}

/* unrevealed rapper (revealTracks in roster.js): X'd name, dimmed silhouette */
.slot.is-hidden .silhouette, .boss.is-hidden .silhouette { opacity: .55; }
.slot.is-hidden .slot-name, .boss.is-hidden .boss-name { letter-spacing: .12em; opacity: .75; }

/* a unit = one track: a solo, a pair or a trio side by side */
.unit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-column: span var(--n);
  gap: var(--g);
  transition: opacity .3s ease, filter .3s ease, transform .2s ease;
}
.unit.is-active { transform: translateY(-3px); }
.unit-link {
  position: absolute;
  top: 42%;
  left: calc(var(--k) * (100% - (var(--n) - 1) * var(--g)) / var(--n) + (var(--k) - .5) * var(--g));
  z-index: 7;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  rotate: 45deg;
  border: 1px solid var(--neon);
  background: var(--soot);
  pointer-events: none;
}
.unit-link span {
  rotate: -45deg;
  color: var(--neon);
  font: 700 12px/1 var(--f-mono);
}
.unit.is-active .unit-link { background: var(--neon); box-shadow: 0 0 10px var(--neon-glow); }
.unit.is-active .unit-link span { color: var(--boss-bg); }

.slot {
  --cut: 12px;
  --fill: var(--glass);
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease;
}
.slot:focus-visible { outline: none; } /* the sliding brackets mark focus */
.slot .edge {
  opacity: .45;
  filter: none;
  transition: opacity .2s ease;
}
.slot:hover .edge { opacity: .8; }
.slot-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  clip-path: var(--shape);
}
.slot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  opacity: .82;
  transition: opacity .3s ease, transform .5s ease;
}
.fit-contain .slot-media img {
  padding: 12% 5% 0;
  object-fit: contain;
  object-position: center bottom;
}
.slot .silhouette { width: 90%; height: auto; margin-bottom: 12%; }
.slot-no {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 5;
  padding: 3px 5px 2px;
  background: color-mix(in srgb, var(--ash) 80%, transparent);
  color: var(--ember);
  font: 12px/1 var(--f-mono);
  letter-spacing: .08em;
}
.slot-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 6px 8px 7px 10px;
  background: var(--soot);
  color: var(--ash);
  font: 800 clamp(12px, .95vw, 16px)/.95 var(--f-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background .2s ease, color .2s ease;
}
.slot-lock {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: none;
  height: 9px;
  background: repeating-linear-gradient(-45deg, var(--neon) 0 6px, var(--soot) 6px 12px);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, calc(100% - var(--cut) + 9px) 100%, 0 100%);
}

.is-active .slot { --sil-lens: var(--neon); }
.is-active .slot .edge {
  opacity: 1;
  filter: drop-shadow(0 0 1.5px var(--neon)) drop-shadow(0 0 9px var(--neon-glow));
  animation: ignite .45s steps(1);
}
.is-active .slot-media img { opacity: 1; transform: scale(1.05); }
.is-active .slot-name { background: var(--neon); color: var(--boss-bg); }
.is-chosen .slot-lock { display: block; }
.is-locked .unit:not(.is-chosen),
.is-locked .boss:not(.is-chosen) { opacity: .4; }

.is-dragging .slot .edge { opacity: .9; }
.slot.is-drop { --fill: color-mix(in srgb, var(--neon) 22%, transparent); transform: scale(1.05); }
.slot.is-drop .edge { filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 12px var(--neon-glow)); }

/* ─── The final boss slot ─── */

.boss {
  --cut: 14px;
  --fill: var(--boss-bg);
  --sil-body: rgba(239, 239, 234, .1);
  --sil-hood: rgba(239, 239, 234, .16);
  --sil-mask: rgba(239, 239, 234, .3);
  --sil-can: rgba(239, 239, 234, .42);
  --sil-grill: rgba(17, 18, 20, .8);
  --sil-lens: var(--neon);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, 40%);
  width: 100%;
  aspect-ratio: 6 / 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--boss-fg);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease, transform .2s ease;
}
.boss:focus-visible { outline: none; }
.boss .edge { opacity: .75; }
.boss.is-active { transform: translateY(-2px); }
.boss.is-active .edge { opacity: 1; animation: boss-pulse 1.4s ease-in-out infinite; }
.boss-hazard {
  background: repeating-linear-gradient(-45deg, var(--neon) 0 7px, var(--boss-bg) 7px 14px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.boss-text {
  align-self: center;
  min-width: 0;
  padding: 0 14px 0 16px;
}
.boss-name {
  display: block;
  margin-top: 5px;
  font: 900 clamp(24px, 2.5vw, 40px)/.88 var(--f-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.boss-sub {
  display: block;
  margin-top: 6px;
  font: 11px/1.1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--boss-dim);
}
.boss-media {
  position: relative;
  overflow: hidden;
  clip-path: polygon(16% 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.boss-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
  mask-image: linear-gradient(to right, transparent, #000 40%);
}
.boss-media .silhouette {
  position: absolute;
  right: 12%;
  bottom: -40%;
  width: auto;
  height: 150%;
}
.boss .slot-lock { display: none; }
.boss.is-chosen .slot-lock { display: block; }

/* ─── Selector: one set of brackets that slides and stretches over a whole track ─── */

.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: var(--cw, 0px);
  height: var(--ch, 0px);
  translate: var(--cx, 0px) var(--cy, 0px);
  pointer-events: none;
  transition:
    translate .26s cubic-bezier(.3, 1.25, .5, 1),
    width .26s cubic-bezier(.3, 1.25, .5, 1),
    height .26s cubic-bezier(.3, 1.25, .5, 1);
}
.cursor.no-anim { transition: none; }
.cursor i {
  --b: 2px;
  --l: 16px;
  --c: var(--soot);
  position: absolute;
  inset: -8px;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) left top / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) right top / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) left bottom / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) right bottom / var(--b) var(--l);
  background-repeat: no-repeat;
  animation: reticle 1.1s ease-in-out infinite;
}
.is-locked .cursor i { --c: var(--neon); animation: none; }

/* ─── Transmission strip under the grid ─── */

.transmit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--soot) 30%, transparent);
}
.transmit-text { min-width: 0; }
.transmit-track {
  margin-top: 5px;
  font: 13px/1.2 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smoke);
}
.transmit-track b {
  margin-left: 8px;
  font: 800 22px/1 var(--f-display);
  letter-spacing: .06em;
  color: var(--soot);
}
.is-playing #transmitState { color: var(--ember); }
.eq {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
}
.eq i {
  width: 4px;
  height: 100%;
  background: var(--neon);
  box-shadow: 0 0 5px var(--neon-glow);
  transform-origin: bottom;
  transform: scaleY(.12);
  animation: eq-idle var(--d, 1.2s) ease-in-out var(--dl, 0s) infinite alternate;
}
.is-playing .eq i { animation-name: eq; animation-duration: calc(var(--d, 1.2s) * .38); }

/* ─── Dossier ─── */

.dossier {
  --cut: 20px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
  min-width: 0;
  min-height: 0;
  padding: 20px 22px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.dossier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-right: 10px;
}
.dossier-id {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dossier-name {
  display: grid;
  gap: 5px;
  min-width: 0;
  font: 900 clamp(28px, 2.4vw, 40px)/.9 var(--f-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.dossier[data-n="2"] .dossier-name { font-size: clamp(24px, 2vw, 32px); }
.dossier[data-n="3"] .dossier-name,
.dossier[data-n="4"] .dossier-name { font-size: clamp(21px, 1.7vw, 27px); }
.dn { display: flex; align-items: center; gap: 10px; }
.dn .swatch { flex: none; width: 16px; }
.status {
  flex: none;
  margin-top: 3px;
  padding: 5px 8px 4px;
  border: 1px solid var(--soot);
  font: 11px/1 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.is-boss .status { border-color: var(--neon); color: var(--neon); }
.is-locked .status { border-color: var(--neon); background: var(--neon); color: var(--boss-bg); }

.facts { display: grid; gap: 8px; }
.facts > div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}
.facts dt {
  font: 11px/1.3 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.facts dd { display: grid; gap: 3px; font: 500 14px/1.3 var(--f-body); }
.ln { display: flex; align-items: baseline; gap: 8px; }
.ln .swatch { flex: none; width: 12px; align-self: center; }

/* member swatches: link each name to its origin line */
.swatch { display: block; height: 8px; transform: skewX(-18deg); }
.swatch[data-m="0"] { background: var(--neon); box-shadow: 0 0 6px var(--neon-glow); }
.swatch[data-m="1"] { background: var(--soot); }
.swatch[data-m="2"] { border: 1px solid var(--neon); background: repeating-linear-gradient(90deg, var(--neon) 0 1.5px, transparent 1.5px 3.5px); }
.swatch[data-m="3"] { border: 1px solid var(--soot); }

.quote { position: relative; padding: 4px 0 0 30px; }
.quote::before {
  content: '“';
  position: absolute;
  left: 0;
  top: -4px;
  font: 900 54px/1 var(--f-display);
  color: var(--neon);
}
.quote-text { display: grid; font: 14px/1.5 var(--f-mono); }
.quote-ghost, .quote-typed { grid-area: 1 / 1; }
.quote-ghost { visibility: hidden; }
.quote-typed::after {
  content: '▌';
  margin-left: 2px;
  color: var(--neon);
  animation: blink 1s steps(1) infinite;
}

.tracklist { display: grid; gap: 6px; }
.tracks { display: grid; }
.tracks button {
  position: relative;
  display: grid;
  grid-template-columns: 2.2ch minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 5px 6px 4px 14px;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--soot) 16%, transparent);
  background: none;
  color: var(--smoke);
  font: 12px/1.25 var(--f-mono);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.tracks button:hover { color: var(--soot); background: color-mix(in srgb, var(--neon) 8%, transparent); }
.tracks .t-no { color: var(--ember); }
.tracks .t-title { overflow-wrap: anywhere; }
.tracks .t-who { font-size: 11px; white-space: nowrap; }
.tracks .is-current button { color: var(--soot); background: color-mix(in srgb, var(--neon) 16%, transparent); }
.tracks .is-current button::before { content: '▸'; position: absolute; left: 3px; color: var(--neon); }
.tracks .is-boss-track .t-who { color: var(--ember); }

.actions {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
}
.btn {
  --cut: 10px;
  padding: 15px 14px 13px;
  border: 0;
  background: none;
  cursor: pointer;
  font: 800 18px/1 var(--f-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { --fill: var(--neon); color: var(--boss-bg); }
.btn-primary:hover { --fill: var(--neon-hover); }
.is-locked .btn-primary { --fill: var(--soot); color: var(--ash); }
.btn-ghost { --fill: var(--glass); }
.btn-ghost:hover { --fill: color-mix(in srgb, var(--neon) 14%, transparent); }
.is-rolling .btn { pointer-events: none; opacity: .6; }

/* ═══ CONSOLE ═══════════════════════════════════════════════════════════ */

.console {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 28px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--soot) 18%, transparent);
}
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font: 12px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smoke);
}
.keys li { display: flex; align-items: center; gap: 4px; }
kbd {
  min-width: 22px;
  padding: 4px 6px 3px;
  border: 1px solid var(--soot);
  border-bottom-width: 2px;
  background: color-mix(in srgb, var(--ash-hi) 70%, transparent);
  color: var(--soot);
  font: 11px/1 var(--f-mono);
  text-align: center;
}
.touch-hint {
  display: none;
  font: 12px/1.2 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--smoke);
}
@media (hover: none) and (pointer: coarse) {
  .keys { display: none; }
  .touch-hint { display: block; }
}
.ticker {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  font: 12px/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
}
.ticker-track {
  display: inline-flex;
  animation: ticker var(--ticker-dur, 60s) linear infinite;
}
.ticker-track span::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 1.6em;
  background: var(--neon);
  box-shadow: 0 0 5px var(--neon);
  vertical-align: 2px;
  transform: rotate(45deg);
}

.console-controls { display: flex; align-items: center; gap: 10px; }
.switch,
.toggle {
  --cut: 7px;
  --fill: var(--glass);
  border: 0;
  background: none;
  cursor: pointer;
  font: 11px/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.switch { display: inline-flex; gap: 2px; padding: 3px; }
.switch-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 5px;
  color: var(--smoke);
  transition: background .15s ease, color .15s ease;
}
.switch[aria-checked="false"] [data-opt="landscape"],
.switch[aria-checked="true"] [data-opt="portrait"] { background: var(--neon); color: var(--boss-bg); }
.ico { display: inline-block; border: 1.5px solid currentColor; }
.ico-land { width: 14px; height: 9px; }
.ico-port { width: 9px; height: 14px; }
.toggle { padding: 9px 12px 8px; }
.toggle b { font-weight: 400; color: var(--ember); }
.toggle[aria-pressed="false"] b { color: var(--smoke); }
.toggle[aria-pressed="false"] .edge { opacity: .35; filter: none; }

/* ═══ OVERLAYS ══════════════════════════════════════════════════════════ */

.flash {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85) 25%, rgba(255, 90, 20, .35) 100%);
}
.flash.go { animation: flash .55s ease-out; }
.app.shake { animation: shake .32s linear; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: min(calc(100vw - 32px), 540px);
  padding: 12px 16px 11px;
  background: var(--soot);
  color: var(--ash);
  font: 13px/1.4 var(--f-mono);
  letter-spacing: .04em;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
  vertical-align: 1px;
}

/* ═══ MOTION ════════════════════════════════════════════════════════════ */

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -2%); }
  60% { transform: translate(-2%, -4%); }
  80% { transform: translate(4%, 2%); }
}
@keyframes flicker {
  0%, 88%, 90.5%, 92.5%, 100% { opacity: 1; }
  89% { opacity: .3; }
  91.5% { opacity: .65; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes breathe { 50% { opacity: .7; transform: scale(1.06); } }
@keyframes sweep { to { translate: 0 720%; } }
@keyframes static {
  0% { opacity: .95; transform: translate(0, 0); }
  30% { opacity: .75; transform: translate(-6%, 4%); }
  60% { opacity: .4; transform: translate(5%, -3%); }
  100% { opacity: 0; }
}
@keyframes glitch {
  0% { clip-path: inset(0); transform: none; filter: none; }
  12% { clip-path: inset(8% 0 62% 0); transform: translateX(-10px); filter: drop-shadow(5px 0 0 var(--neon)); }
  24% { clip-path: inset(58% 0 10% 0); transform: translateX(12px); filter: drop-shadow(-5px 0 0 var(--neon)); }
  36% { clip-path: inset(28% 0 44% 0); transform: translateX(-6px); filter: none; }
  48% { clip-path: inset(0); transform: translateX(4px); filter: drop-shadow(3px 0 0 var(--neon)); }
  60% { clip-path: inset(70% 0 4% 0); transform: translateX(-3px); filter: none; }
  72%, 100% { clip-path: inset(0); transform: none; filter: none; }
}
@keyframes ignite {
  0% { opacity: .2; }
  15% { opacity: 1; }
  25% { opacity: .35; }
  40% { opacity: 1; }
  50% { opacity: .6; }
  60%, 100% { opacity: 1; }
}
@keyframes reticle { 50% { scale: 1.03; } }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(1.8); }
  100% { opacity: .95; transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
}
@keyframes eq-idle { from { transform: scaleY(.1); } to { transform: scaleY(calc(var(--h, .6) * .35)); } }
@keyframes eq { from { transform: scaleY(.15); } to { transform: scaleY(var(--h, .8)); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes shake {
  20% { translate: -4px 2px; }
  40% { translate: 4px -2px; }
  60% { translate: -2px 1px; }
  80% { translate: 2px 0; }
}
@keyframes nudge {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes alert-in {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}
@keyframes boss-pulse {
  50% { filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 16px var(--neon)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker-track, .boss-alert-track, .world-grain { animation: none !important; }
}

/* ═══ LANDSCAPE: fit to screen, then smaller screens ════════════════════ */

@media (min-width: 1100px) and (min-height: 620px) {
  body:not(.is-portrait) .app { height: 100%; }
  /* size the grid from the viewport height so every row and the boss slot fit on one screen */
  body:not(.is-portrait) .roster-body {
    width: min(100%, calc((100vh - 334px) * 1.09));
    width: min(100%, calc((100dvh - 334px) * 1.09));
  }
}

@media (max-width: 1099px) {
  body:not(.is-portrait) .hud { grid-template-columns: minmax(0, 1fr) auto; }
  body:not(.is-portrait) .hud-center { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  body:not(.is-portrait) .deck {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "stage dossier" "roster roster";
  }
  body:not(.is-portrait) .dossier { overflow: visible; }
  body:not(.is-portrait) .stage-inner { min-height: 520px; }
  body:not(.is-portrait) .console { grid-template-columns: minmax(0, 1fr) auto; }
  body:not(.is-portrait) .keys { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  body:not(.is-portrait) .brand { grid-column: 1 / -1; text-align: center; }
  body:not(.is-portrait) .hud-readouts { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; }
  body:not(.is-portrait) .hud-center { grid-row: 3; }
  body:not(.is-portrait) .readout-clock { display: none; }
  body:not(.is-portrait) .deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "roster" "dossier";
  }
  body:not(.is-portrait) .stage-inner { min-height: 0; height: min(64vh, 470px); }
  body:not(.is-portrait) .stage-num { font-size: 120px; }
  body:not(.is-portrait) .nameplate-name { font-size: 34px; }
  body:not(.is-portrait) .stage[data-n="3"] .nameplate-name { font-size: 26px; }
  body:not(.is-portrait) .roster-body { --g: 6px; }
  body:not(.is-portrait) .slot { --cut: 8px; }
  body:not(.is-portrait) .slot-name { display: none; }
  body:not(.is-portrait) .slot-no { top: 4px; left: 4px; padding: 2px 3px 1px; font-size: 10px; }
  body:not(.is-portrait) .unit-link { width: 14px; height: 14px; }
  body:not(.is-portrait) .unit-link span { font-size: 10px; }
  body:not(.is-portrait) .boss { aspect-ratio: 4.2 / 1; }
  body:not(.is-portrait) .transmit { align-items: flex-end; }
  body:not(.is-portrait) .transmit-track b { display: block; margin: 5px 0 0; }
  body:not(.is-portrait) .console { grid-template-columns: minmax(0, 1fr); }
  body:not(.is-portrait) .console-controls { justify-content: space-between; }
}

/* ═══ PORTRAIT VIEW: a 540×960 frame, scaled to fit the window ═════════ */

body.is-portrait { overflow: hidden; background: var(--void); }
body.is-portrait .world {
  inset: auto;
  left: var(--fx, 0px);
  top: var(--fy, 0px);
  width: var(--fw, 100vw);
  height: var(--fh, 100vh);
  box-shadow: 0 0 0 1px var(--neon-dim), 0 0 60px rgba(255, 90, 20, .18);
}
body.is-portrait .app {
  position: fixed;
  left: var(--fx, 0px);
  top: var(--fy, 0px);
  width: 540px;
  height: 960px;
  min-height: 0;
  transform: scale(var(--fk, 1));
  transform-origin: 0 0;
  padding: 16px 16px 12px;
  gap: 10px;
}
.is-portrait .hud { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; }
.is-portrait .brand-title { font-size: 34px; }
.is-portrait .brand-sub { margin-top: 6px; font-size: 10px; letter-spacing: .2em; }
.is-portrait .hud-center { grid-column: 1 / -1; grid-row: 2; text-align: left; }
.is-portrait .eyebrow { display: none; }
.is-portrait .tagline { margin: 0; font-size: 22px; }
.is-portrait .readout-clock { display: none; }
.is-portrait .readout { font-size: 13px; }
.is-portrait .rad-meter { width: 40px; }

.is-portrait .deck {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: 350px auto;
  grid-template-areas: "stage dossier" "roster roster";
  gap: 12px;
}
.is-portrait .stage { --cut: 20px; }
.is-portrait .stage-inner { min-height: 0; }
.is-portrait .stage-num { font-size: 120px; }
.is-portrait .stage-top { top: 12px; left: 12px; font-size: 10px; }
.is-portrait .stage-coords { display: none; }
.is-portrait .boss-alert { top: 42px; height: 24px; font-size: 14px; line-height: 24px; }
.is-portrait .nameplate { bottom: 16px; left: -8px; padding: 8px 16px 13px 12px; }
.is-portrait .nameplate::after { left: 12px; right: 26px; bottom: 6px; }
.is-portrait .nameplate-no, .is-portrait .nameplate-sub { font-size: 10px; }
.is-portrait .nameplate-name { font-size: 32px; }
.is-portrait .stage[data-n="2"] .nameplate-name { font-size: 25px; }
.is-portrait .stage[data-n="3"] .nameplate-name { font-size: 21px; }
.is-portrait .stamp { font-size: 38px; border-width: 4px; }

.is-portrait .dossier { --cut: 16px; padding: 14px; gap: 9px; overflow: hidden; }
.is-portrait .dossier-head .label { font-size: 10px; letter-spacing: .14em; }
.is-portrait .dossier-id { flex-direction: column; gap: 6px; }
.is-portrait .dossier-name { gap: 3px; font-size: 24px; }
.is-portrait .dossier[data-n="2"] .dossier-name { font-size: 19px; }
.is-portrait .dossier[data-n="3"] .dossier-name { font-size: 17px; }
.is-portrait .dn { gap: 7px; }
.is-portrait .dn .swatch { width: 12px; }
.is-portrait .status { margin: 0; padding: 4px 6px 3px; font-size: 9px; }
.is-portrait .facts > div { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 6px; }
.is-portrait .facts dt { font-size: 9px; letter-spacing: .1em; }
.is-portrait .facts dd { font-size: 11px; }
.is-portrait .facts .f-track { display: none; }  /* the name plate already shows the track */
.is-portrait .tracklist,
.is-portrait .quote { display: none !important; }
.is-portrait .actions { grid-template-columns: 1fr 1fr; gap: 8px; }
.is-portrait .btn { --cut: 8px; padding: 11px 6px 10px; font-size: 15px; letter-spacing: .1em; }

.is-portrait .roster-body { width: 100%; --g: 7px; gap: 8px; }
.is-portrait .slot { --cut: 9px; aspect-ratio: 1 / 1; }
.is-portrait .slot-name { padding: 4px 6px 5px 8px; font-size: 11px; }
.is-portrait .slot-no { top: 5px; left: 5px; font-size: 10px; }
.is-portrait .unit-link { width: 15px; height: 15px; }
.is-portrait .unit-link span { font-size: 10px; }
.is-portrait .boss { aspect-ratio: 6.6 / 1; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 40%); }
.is-portrait .boss-name { font-size: 26px; }
.is-portrait .boss-sub { font-size: 9px; }
.is-portrait .transmit { display: none; }
.is-portrait .cursor i { inset: -6px; --l: 12px; }

.is-portrait .console { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-top: 8px; }
.is-portrait .keys,
.is-portrait .touch-hint { display: none; }
.is-portrait .ticker { font-size: 10px; }
.is-portrait .switch-opt { padding: 5px 7px 4px; font-size: 10px; }
.is-portrait .toggle { padding: 8px 10px 7px; font-size: 10px; }