/* =====================================================================
   SIGNAL COMBAT 3.4 · THE PLAYER EXPERIENCE
   Less UI, less text, more game. Loaded last: everything here overrides what came before it, so the older layers stay
   readable (and recoverable) as they were.
   ===================================================================== */

/* ---------------------------------------------------------- hidden means gone (app.css carries the global rule too) */
.du-mtip[hidden], .du-intro[hidden] { display: none !important; }

/* =====================================================================
   THE FACE-OFF (the walk-up). The whole screen, not the court's column. Their art large, the name fitted, one detail line,
   their line, the technique to know, YOUR FIT, START FIGHT. Nothing over their face.
   ===================================================================== */
.du-intro { position: fixed; inset: 0; z-index: 35; display: grid; overflow: hidden; text-align: center; animation: none !important;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: end; gap: 0;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(90% 55% at 50% 38%, color-mix(in srgb, var(--them) 22%, transparent), transparent 72%),
    linear-gradient(180deg, #07060A 0%, color-mix(in srgb, var(--them) 7%, #08070B) 100%); place-content: stretch; }
.du-in-art { grid-row: 1; grid-column: 1; position: relative; align-self: end; justify-self: center; height: 100%; max-height: min(54vh, 100%);
  aspect-ratio: 1; max-width: 100%; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6));
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 10%, #000 24%); mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .55) 10%, #000 24%); }
.du-in-art > img, .du-in-art > .sav, .du-in-art > .fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.du-in-art > .sav img { -webkit-mask-image: none; mask-image: none; }
.du-in-art { transition: opacity .3s ease; } .du-in-art.wait { opacity: 0; transition: none; }   /* 3.6.1 · hidden at once, in when every layer is (duel.js intro) */
.du-intro.boss .du-in-art { -webkit-mask-image: none; mask-image: none; }
.du-in-card { grid-row: 2; grid-column: 1; display: grid; justify-items: center; gap: 8px; width: min(100%, 460px); min-width: 0; margin-top: -26px; position: relative; z-index: 1; }
.du-intro .du-in-nm { margin: 0; max-width: 100%; white-space: nowrap; font: italic 700 clamp(44px, 14vw, 92px)/.88 var(--f-head, sans-serif); letter-spacing: .005em;
  color: var(--them); text-shadow: 0 0 50px color-mix(in srgb, var(--them) 35%, transparent), 0 4px 24px rgba(0, 0, 0, .7); }
.du-in-meta { margin: 0; font: 700 12px/1.3 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--ink-2, #C9C5C0); }
.du-intro .du-line { margin: 2px 0 0; max-width: 34ch; font: italic 500 17px/1.38 var(--f-text, sans-serif); color: var(--ink, #F9F4EE); }
.du-intro.quick .du-line { font-size: 15.5px; }
.du-intro .du-tech { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; max-width: 100%; text-align: left;
  font: 500 14.5px/1.35 var(--f-text, sans-serif); color: var(--ink, #F9F4EE); background: rgba(12, 11, 16, .82); box-shadow: inset 0 0 0 1.5px var(--orange, #FC4C01); }
.du-in-acts { display: grid; justify-items: center; gap: 8px; width: 100%; margin-top: 6px; }
.du-intro .du-start { flex: none; width: min(100%, 340px); height: 56px; margin-top: 2px; font-size: 15px !important; letter-spacing: .14em;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--orange, #FC4C01) 70%, transparent); }
.du-intro .du-back { flex: none; width: min(100%, 340px); height: 46px; }   /* 3.8 · BACK: under START FIGHT, as wide (on a phone it shrank to its word) */
.du-intro .du-fit { width: min(100%, 360px); margin-top: 0; }
.du-intro .du-more { margin-top: 0; }
.du-intro .du-fits { grid-row: 1 / span 2; grid-column: 1; align-self: center; z-index: 2; }
/* 3.5 · a phone: the Fits stand where the art and the card were, never over their face (the art steps out while you choose) */
.du-intro.fits .du-in-art { visibility: hidden; }
.du-intro .du-kit { justify-content: center; }
/* a short phone: the art gives way to the words and the button */
@media (max-height: 700px) { .du-in-art { max-height: min(44vh, 100%); } .du-intro .du-in-nm { font-size: clamp(40px, 12vw, 72px); } .du-intro .du-line { font-size: 15.5px; } }
@media (max-height: 560px) { .du-in-art { max-height: min(34vh, 100%); } .du-in-card { margin-top: -10px; gap: 6px; } .du-intro .du-start { height: 50px; } }

/* a desk: cinematic. The art large on the left, standing on the bottom edge; the words beside it, left-aligned. 3.5 · also a short,
   wide window (a laptop at 150 % text, 853 × 480): stacked, the art had shrunk to a strip above the name */
@media (min-width: 900px) and (min-height: 500px) and (min-aspect-ratio: 1/1), (min-width: 760px) and (min-height: 400px) and (min-aspect-ratio: 3/2) {
  .du-intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: 100%; align-items: center; justify-items: stretch;
    column-gap: clamp(20px, 3.5vw, 64px); padding: 0 clamp(28px, 5.5vw, 110px) 0 clamp(8px, 2vw, 40px); text-align: left;
    background: radial-gradient(55% 80% at 27% 72%, color-mix(in srgb, var(--them) 30%, transparent), transparent 70%),
      radial-gradient(40% 50% at 80% 40%, color-mix(in srgb, var(--them) 8%, transparent), transparent 75%),
      linear-gradient(180deg, #07060A 0%, color-mix(in srgb, var(--them) 8%, #08070B) 100%); }
  .du-in-art { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; height: auto; width: min(100%, 92vh); max-height: none; margin-bottom: -1px; }
  .du-in-card { grid-column: 2; grid-row: 1; align-self: center; justify-items: start; width: min(100%, 780px); margin: 0; gap: 12px; }
  .du-intro .du-in-nm { font-size: clamp(64px, 8vw, 156px); }
  .du-in-meta { font-size: 13px; letter-spacing: .18em; }
  .du-intro .du-line { font-size: clamp(18px, 1.35vw, 23px); max-width: 30ch; }
  .du-intro .du-tech { font-size: 15.5px; padding: 11px 15px; }
  .du-in-acts { justify-items: stretch; width: min(100%, 420px); margin-top: 14px; gap: 10px; }
  .du-intro .du-start { width: 100%; height: 62px; font-size: 16px !important; }
  .du-intro .du-back { width: 100%; }
  .du-intro .du-fit { width: 100%; }
  .du-intro .du-more { justify-self: start; }
  .du-intro .du-kit { justify-content: flex-start; }
  .du-intro .du-fits { grid-column: 2; grid-row: 1; justify-self: stretch; width: auto; }
  .du-intro.fits .du-in-art { visibility: visible; }      /* a desk: the Fits take the card's column; the art stays beside them */
}
/* 3.5 · a short, wide window (853 × 480: a laptop at 150 %): the card's column is too short for three Fits, so the third sat half
   under BACK. While you choose, the Fits take the whole width, as on a phone; the art steps out */
@media (min-width: 760px) and (min-height: 400px) and (max-height: 599px) and (min-aspect-ratio: 3/2) {
  .du-intro.fits .du-fits { grid-column: 1 / -1; justify-self: center; width: min(100%, 640px); }
  .du-intro.fits .du-in-art { visibility: hidden; }
}

/* a first meeting: the same screen, arriving. The art rises in their light, the name lands, the line, then the controls */
.du-intro.arrive .du-in-art { animation: xp-art 1.15s cubic-bezier(.16, .84, .2, 1) both; }
.du-intro.arrive .du-in-nm { animation: xp-slam .5s cubic-bezier(.2, .9, .2, 1) .45s both; }
.du-intro.arrive .du-in-meta { animation: xp-up .45s ease-out .8s both; }
.du-intro.arrive .du-line { animation: xp-up .5s ease-out 1s both; }
.du-intro.arrive .du-tech, .du-intro.arrive .du-in-acts { animation: xp-up .45s ease-out 1.35s both; pointer-events: none; }
.du-intro.boss.arrive .du-in-art { animation-duration: 1.7s; }
.du-intro.boss.arrive .du-in-nm { animation-delay: .9s; }
.du-intro.boss.arrive .du-in-meta { animation-delay: 1.3s; }
.du-intro.boss.arrive .du-line { animation-delay: 1.5s; }
.du-intro.boss.arrive .du-tech, .du-intro.boss.arrive .du-in-acts { animation-delay: 2s; }
@keyframes xp-art { from { opacity: 0; transform: translateY(9%) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes xp-slam { 0% { opacity: 0; transform: scale(1.3); filter: blur(6px); } 60% { opacity: 1; transform: scale(.985); filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes xp-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.sc-calm .du-intro.arrive *, .du-intro.arrived * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .du-intro.arrive * { animation: none !important; } }
.du-intro.going .du-in-card, .du-intro.going .du-in-art { opacity: 0; transition: opacity .25s; }

/* =====================================================================
   THE HUD: marks, not words. One small square per thing a fighter fights with; your uses as pips beside the icon.
   ===================================================================== */
.du-gear, .du-uses { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; min-width: 0; }
.du-mk { position: relative; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; font-style: normal; color: var(--ink, #F9F4EE);
  background: rgba(8, 7, 11, .72); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .2); transition: opacity .25s, filter .25s; cursor: default; }
.du-mk svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.du-mk .du-pp { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); display: grid; gap: 2px; }
.du-mk .du-pp b { display: block; width: 4px; height: 7px; background: var(--you); box-shadow: 0 0 0 1px #08070B; }
.du-mk .du-pp b.off { background: rgba(249, 244, 238, .22); }
.du-mk.spent { opacity: .3; filter: grayscale(1); }
.du-mk.tech { color: #0A0A0A; background: var(--you); box-shadow: none; }
.du-mk-ph, .du-mk-t { font: 700 12px/1 var(--f-mono, monospace); font-style: normal; }
.du-uses .du-mk { padding: 0; letter-spacing: 0; }
.du-uses .du-mk.du-pk { gap: 0; }
.du-uses .du-mk.du-pk b { font: inherit; }
.du-uses .du-mk.rdy { color: #0A0A0A; background: #F9F4EE; box-shadow: 0 0 0 2px #F9F4EE, 0 0 18px rgba(249, 244, 238, .55); animation: du-ring 700ms ease-in-out infinite alternate; }
.du-uses .du-mk.fire { animation: du-burst 650ms ease-out both; }
.du-uses .du-mk.miss { opacity: .35; }
/* theirs: in their colour; lit when they use one */
.du-who.them .du-mk { color: var(--them); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--them) 45%, transparent); }
.du-who.them .du-mk.tech { color: #0A0A0A; background: var(--them); }
.du-who.them .du-mk.lit { animation: xp-lit 900ms ease-out both; }
@keyframes xp-lit { 0% { color: #0A0A0A; background: var(--them); box-shadow: 0 0 18px var(--them); transform: scale(1.18); } 100% { } }
.du-gear i:not(.du-mk) { display: none; }   /* (the old word chips, if anything still makes one) */
/* the rows: their name, their points and their marks on one line; yours by your pads */
.du-top .du-who.them { flex: 1 1 auto; flex-wrap: nowrap; gap: 12px; }
.du-top .du-who.them .du-nm { overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.du-deck .du-who.you { flex-wrap: nowrap; gap: 10px; }
.du-deck .du-who.you .du-uses { flex: 1 1 auto; justify-content: center; }
.du-deck .du-who.you .du-nm { overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
@media (max-width: 560px) {
  .du-top { align-items: center; }
  .du-top .du-who.them { flex-wrap: wrap; row-gap: 6px; }
  .du-top .du-gear { flex: 1 1 100%; min-width: 0; }
  .du-mk { width: 28px; height: 28px; } .du-mk svg { width: 16px; height: 16px; }
  .du-deck .du-who.you { flex-wrap: wrap; row-gap: 6px; justify-content: space-between; }
  .du-deck .du-who.you .du-uses { order: 3; flex: 1 1 100%; }
}
/* the tip: a mark's name and line, by the mark */
.du-mtip { position: absolute; z-index: 38; max-width: min(300px, calc(100% - 16px)); padding: 9px 11px 10px; display: grid; gap: 3px; pointer-events: none; text-align: left;
  background: #0E0D12; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .22), 0 14px 40px rgba(0, 0, 0, .6); }
.du-mtip b { font: 700 13px/1.15 var(--f-disp, sans-serif); letter-spacing: .08em; color: var(--ink, #F9F4EE); }
.du-mtip em { font: 700 11px/1.2 var(--f-disp, sans-serif); letter-spacing: .12em; font-style: normal; color: var(--you); }
.du-mtip span { font: 500 13.5px/1.4 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); }

/* the pause card: the marks, named */
.du-pz-in { width: min(100%, 440px); max-height: calc(100% - 8px); overflow: auto; }
.du-pz-legend { width: 100%; display: grid; gap: 10px; text-align: left; padding: 2px 0 4px; }
.du-pz-legend .du-k { margin: 0 0 6px; font: 700 11px/1.2 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--ink-2, #C9C5C0); }
.du-pz-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.du-pz-legend li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.du-pz-legend li > .du-mk { grid-row: span 2; }
.du-pz-legend li b { font: 700 13px/1.2 var(--f-disp, sans-serif); letter-spacing: .08em; color: var(--ink, #F9F4EE); }
.du-pz-legend li b em { font-style: normal; color: var(--you); letter-spacing: .1em; font-size: 11px; margin-left: 4px; }
.du-pz-legend li span { font: 500 13px/1.35 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); }
.du-pz-legend > div:nth-child(2) .du-mk { color: var(--them); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--them) 45%, transparent); }
.du-pz-legend > div:nth-child(2) .du-mk.tech { color: #0A0A0A; background: var(--them); }

/* START FIGHT: the whole face-off fades away, so the court and the count are there at once */
.du-intro.going { opacity: 0; transition: opacity .28s ease-out; pointer-events: none; }
html.sc-calm .du-intro.going { transition: none; }

/* =====================================================================
   THE FIGHT ON A DESK: the court's column grows with the screen (the lanes grow with it: js/duel.js geo), so the playfield is
   the biggest thing on a wide screen, not a strip down the middle. A phone keeps the column it was built for.
   ===================================================================== */
@media (min-width: 1100px) and (min-height: 680px) {
  .du { --duw: clamp(560px, 46vw, 900px); max-width: var(--duw); }
  .du-stage { grid-template-rows: 22% minmax(0, 1fr) 15%; }
  .du-top { padding-left: 4px; padding-right: 4px; }
  .du-nm { font-size: 20px; }
  .du-mk { width: 34px; height: 34px; } .du-mk svg { width: 19px; height: 19px; }
  .du-pads { height: clamp(96px, 13vh, 140px); }
}
@media (min-width: 1120px) and (min-height: 680px) { .du-teach { width: clamp(230px, calc((100vw - var(--duw)) / 2 - 64px), 340px); } }
.du-pz-legend { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(249, 244, 238, .1); }
@media (min-width: 900px) { .du-pz-in { width: min(100%, 620px); } .du-pz-legend { grid-template-columns: 1fr 1fr; column-gap: 18px; } }
/* yours, on a wider screen: your points and marks on the left, your name on the right; the middle (your fighter) stays clear */
@media (min-width: 561px) {
  .du-deck .du-who.you { justify-content: flex-start; }
  .du-deck .du-who.you .du-uses { flex: 0 1 auto; justify-content: flex-start; }
  .du-deck .du-who.you .du-nm { margin-left: auto; }
}

/* =====================================================================
   THE LOCKER ON A DESK: an app, not a page. The screen doesn't scroll: your fighters across the top, your look on the left
   (the stage sized to the room it has), the panel on the right with its tabs fixed and its list scrolling on its own. A
   short screen: the slot columns scroll inside themselves; nothing is cut off and nothing is hidden. A phone keeps its
   own layout (one scrolling column, the fighter pinned while you dress it)
   ===================================================================== */
.v-lk-k { display: none; }                                   /* YOUR LOOK · What opponents see: the stage says it */
@media (min-width: 1100px) and (min-height: 600px) {
  .v-scr-locker .v-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; }
  .v-scr-locker .v-lk-ws { flex: none; margin: 10px 0 4px; }
  .v-scr-locker .v-lk-ws > .v-k { display: none; }
  .v-scr-locker .v-lk-w { width: 74px; padding: 4px 3px 6px; }
  .v-scr-locker .v-lk-w .v-stage.sm { width: 54px; }
  .v-scr-locker .v-lk { flex: 1 1 auto; min-height: 0; padding-top: 8px; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 22px; }
  .v-scr-locker .v-lk-look { position: static; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .v-scr-locker .v-doll { min-height: 0; height: 100%; align-items: stretch; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(150px, 200px); }
  .v-scr-locker .v-col { align-content: center; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
  .v-scr-locker .v-lk-mid { min-height: 0; container-type: size; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; }
  .v-scr-locker .v-lk-mid .v-stage { width: min(100cqw, 100cqh - 52px, 640px); align-self: center; }
  .v-scr-locker .v-lk-who { justify-self: center; text-align: center; }
  .v-scr-locker .v-lk-panel { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .v-scr-locker .v-lk-tabs { position: static; }
  .v-scr-locker .v-lk-pane { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}
/* a short desk: slimmer slot cards */
@media (min-width: 1100px) and (min-height: 600px) and (max-height: 860px) {
  .v-scr-locker .v-ds { grid-template-columns: 40px minmax(0, 1fr); padding: 3px 8px 3px 3px; }
  .v-scr-locker .v-col.r .v-ds { grid-template-columns: minmax(0, 1fr) 40px; padding: 3px 3px 3px 8px; }
  .v-scr-locker .v-ds-art, .v-scr-locker .v-ds-art .v-pa { width: 40px; height: 40px; }
  .v-scr-locker .v-col { gap: 5px; }
}
/* 3.5 · between a phone and a desk (a tablet either way up, a narrow desk window, a laptop at 150 % text): the same app in two
   columns, your look and the panel. Stacked, every tab opened on the same screen (your fighters, your fighter, twelve slot cards)
   with its contents a long scroll below. The slot columns step out here: the panel's slot chips choose, the stage shows */
@media (min-width: 761px) and (max-width: 1099px) and (min-height: 420px) {
  .v-scr-locker .v-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 14px; }
  .v-scr-locker .v-lk-ws { flex: none; margin: 10px 0 4px; }
  .v-scr-locker .v-lk-ws > .v-k { display: none; }
  .v-scr-locker .v-lk-w { width: 74px; padding: 4px 3px 6px; }
  .v-scr-locker .v-lk-w .v-stage.sm { width: 54px; }
  .v-scr-locker .v-lk { flex: 1 1 auto; min-height: 0; padding-top: 8px; grid-template-columns: minmax(0, 1fr) minmax(330px, 1.15fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 18px; }
  .v-scr-locker .v-lk-look { position: static; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .v-scr-locker .v-doll { min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .v-scr-locker .v-doll .v-col { display: none; }
  .v-scr-locker .v-lk-mid { order: 0; grid-column: auto; min-height: 0; container-type: size; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; }
  .v-scr-locker .v-lk-mid .v-stage { width: min(100cqw, 100cqh - 52px, 560px); align-self: center; }
  .v-scr-locker .v-lk-who { justify-self: center; text-align: center; }
  .v-scr-locker .v-lk-panel { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .v-scr-locker .v-lk-tabs { position: static; }
  .v-scr-locker .v-lk-pane { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
  .v-scr-locker .v-lk .v-arm-slots { grid-template-columns: minmax(0, 1fr); }   /* IN FIGHT: one piece per row, as on a desk (two broke PERFECT RETURN mid-word) */
}
/* … and short (a laptop at 150 %): shorter fighter cards (the picture smaller, the name whole), so your look keeps its room */
@media (min-width: 761px) and (max-height: 599px) and (min-height: 420px) {
  .v-scr-locker .v-lk-ws { margin: 6px 0 2px; }
  .v-scr-locker .v-lk-w { padding: 3px 3px 5px; }
  .v-scr-locker .v-lk-w .v-stage.sm { width: 38px; }
}

/* IN FIGHT: a slot card never puts its button over the name. The piece and what it does, then STOP USING under them */
.v-arm-slots .v-slot:not(.empty):not(.locked) { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 10px; align-items: start; }
.v-arm-slots .v-slot:not(.empty):not(.locked) > .v-pa { width: 56px; grid-row: 1; }
.v-arm-slots .v-slot:not(.empty):not(.locked) > span { grid-row: 1; }
.v-arm-slots .v-slot > .v-btn { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-self: start; }
.v-slot b { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.v-slot em { overflow-wrap: anywhere; }

/* =====================================================================
   SIGNAL PACKS: OPEN PACK → the cards turn by themselves → TRY ON or CONTINUE. The pack charges on the music's beat (100 BPM),
   shakes into the drop, bursts; the cards deal out face down and turn on the beats. Each reward is shown on your fighter.
   ===================================================================== */
.v-pack-seal .v-name { margin: 2px 0 0; }
.v-pack-seal .v-k { margin: 0; color: var(--ink-2); }
.v-pack-rv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; justify-items: center; align-content: center; gap: 12px; min-height: min(100%, 520px); }
.v-pack-rv > .v-pack-row { width: min(100%, 1040px, calc((100dvh - 240px) * 2 + 28px)); }
.v-pack-rv[data-v] { cursor: pointer; }
.v-pack-burst { grid-area: 1 / 1; align-self: center; position: relative; z-index: 3; width: min(300px, 62vw); aspect-ratio: 720 / 681; pointer-events: none; }
/* 3.8.2 · no mask: the cleaned file fades its own floor glow (a mask here cut the glow and the shadow off at the image's box) */
.v-pack-burst img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c, #FC4C01) 60%, transparent)) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.v-pack-rv.plus .v-pack-burst img { filter: drop-shadow(0 0 26px #FFC23D) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.v-pack-burst i { position: absolute; inset: 10% 14%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, #FC4C01) 60%, transparent), transparent); opacity: .5; }
.v-pack-rv > .v-pack-row { grid-area: 1 / 1; }
.v-pack-rv > .v-fine { margin: 0; }
/* the charge: a pulse on every beat; the build: it shakes and burns brighter; the drop: it bursts */
.v-pack-rv.charge .v-pack-burst { animation: xp-beat .6s cubic-bezier(.2, .8, .3, 1) infinite; }
.v-pack-rv.charge .v-pack-burst i { animation: xp-glow .6s ease-out infinite; }
.v-pack-rv.build .v-pack-burst { animation: xp-shake .15s linear infinite; }
.v-pack-rv.build .v-pack-burst img { filter: brightness(1.35) drop-shadow(0 0 36px color-mix(in srgb, var(--c, #FC4C01) 85%, transparent)) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.v-pack-rv.build .v-pack-burst i { opacity: 1; transform: scale(1.4); transition: transform 2.4s ease-in; }
.v-pack-rv.burst .v-pack-burst { animation: xp-burst .55s cubic-bezier(.2, .8, .3, 1) forwards; }
.v-pack-rv.ph-done .v-pack-burst { display: none; }
@keyframes xp-beat { 0% { transform: scale(1.06); } 30% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes xp-glow { 0% { opacity: 1; } 100% { opacity: .35; } }
@keyframes xp-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-1.2deg); } 50% { transform: translate(2px, -2px) rotate(1deg); } 75% { transform: translate(3px, 2px) rotate(-.6deg); } }
@keyframes xp-burst { 0% { transform: scale(1); opacity: 1; filter: brightness(2.2); } 100% { transform: scale(1.9); opacity: 0; filter: brightness(3) blur(6px); } }
/* the cards: dealt out on the drop, face down; each turns on its beat */
.v-pack-rv .v-pack-card { display: block; padding: 0; perspective: 900px; overflow: visible; background: none; box-shadow: none; animation: none; }
.v-pack-rv:not(.burst):not(.ph-done) .v-pack-card { opacity: 0; transform: translateY(14px) scale(.92); }
.v-pack-rv.burst .v-pack-card { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .45s cubic-bezier(.2, .9, .3, 1); }
.v-pack-rv.burst .v-pack-card:nth-child(2) { transition-delay: .06s; } .v-pack-rv.burst .v-pack-card:nth-child(3) { transition-delay: .12s; }
/* 3.4 · each face also hides itself at the turn's midpoint (edge-on, so it can't be seen happening): a browser that draws 3D
   flat and ignores backface-visibility still shows the right face */
.v-pc-front, .v-pack-rv .v-pack-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .5s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .25s; }
.v-pc-front { transform: rotateY(180deg); visibility: hidden; display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 14px; overflow: hidden;
  background: var(--v-panel-2); box-shadow: inset 0 0 0 1.5px var(--r), 0 0 28px -8px var(--r); }
.v-pack-rv .v-pack-back { inset: 0; }
.v-pack-card.up .v-pc-front { transform: rotateY(0deg); visibility: visible; }
.v-pack-card.up .v-pack-back { transform: rotateY(-180deg); visibility: hidden; }
.v-pack-card.r-legendary .v-pc-front { background: radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--r) 22%, var(--v-panel-2)), var(--v-panel-2)); }
.v-pack-card.r-epic .v-pc-front { background: radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--r) 14%, var(--v-panel-2)), var(--v-panel-2)); }
.v-pack-card.big.up .v-pc-front { animation: xp-rare 1.2s ease-out both; }
@keyframes xp-rare { 0% { box-shadow: inset 0 0 0 1.5px var(--r), 0 0 0 0 var(--r); filter: brightness(1.8); } 35% { box-shadow: inset 0 0 0 2px var(--r), 0 0 60px 6px var(--r); filter: none; } 100% { box-shadow: inset 0 0 0 1.5px var(--r), 0 0 28px -8px var(--r); } }
.v-pc-r { margin: 0; font: 700 11px/1.2 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--r); }
.v-pc-front b { font: 700 15px/1.15 var(--f-disp); letter-spacing: .04em; }
.v-pc-front > i { font: 600 10.5px/1.2 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; }
.v-pc-front em { align-self: flex-start; font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; font-style: normal; padding: 4px 6px; }
.v-pc-front em.new { background: var(--v-go); color: #0A0A0A; }
.v-pc-front em.dup { box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink-2); }
.v-pc-acts { margin-top: auto; visibility: hidden; }
/* 3.8.1 · WEARING sits on the card's picture (the buttons below change it: WEAR, TAKE OFF) */
.v-pc-front > .v-pc-on { position: absolute; top: 16px; left: 16px; z-index: 300; margin: 0; padding: 4px 6px; background: var(--ink, #F9F4EE); color: #0A0A0A; font: 700 11px/1 var(--f-disp); letter-spacing: .12em; font-style: normal; }
.v-pc-front > .v-pc-on[hidden] { display: none; }
.ph-done .v-pc-acts { visibility: visible; }
.ph-done .v-pc-front, .ph-done .v-pack-back { transition: none; }
/* a reward on your fighter (or on SAN's dummy when it's cut for the other body) */
.v-me-art { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; flex: none;
  background: radial-gradient(70% 60% at 50% 70%, color-mix(in srgb, var(--c) 34%, #121118), #0D0C11 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.v-me-art > .sav { position: absolute; inset: 0; }
.v-me-zoom { background: #121118 !important; box-shadow: inset 0 0 0 2px var(--r, #F9F4EE), 0 6px 18px rgba(0, 0, 0, .6) !important; }
.v-me-zoom .sav { position: absolute; inset: 0; }
.v-pc-front .v-dum, .v-pc-front .v-me-art { width: 100%; }
/* 3.5 · a card keeps its words and WEAR / INSPECT: on a short screen its picture gives way. Square at full width, it pushed them out
   of a 2:3 card whose height follows the screen's (half cut at 1280 × 600 and on a tablet, gone at 150 %) */
@media (min-width: 641px) { .v-pc-front > .v-me-art, .v-pc-front > .v-dum { flex: 0 1 auto; min-height: 56px; } }
/* 3.5 · a short screen (a laptop at 150 %, 853 × 480): a 2:3 card that tall is too narrow for WEAR and INSPECT side by side, so
   INSPECT wrapped under WEAR and was cut at the card's foot. Under 540 px of height the cards keep the height there is and take
   the width they need: both buttons on one row */
@media (min-width: 641px) and (max-height: 540px) {
  .v-pack-rv > .v-pack-row { width: min(100%, 780px); }
  .v-pack-rv .v-pack-card { aspect-ratio: auto; height: max(200px, calc(100dvh - 240px)); }
}
/* still (reduced motion): nothing shakes, flies or flips: each card is shown when its picture is ready */
html.sc-calm .v-pack-rv *, html.sc-calm .v-pack-rv { animation: none !important; transition: none !important; }
html.sc-calm .v-pack-rv.burst .v-pack-burst { display: none; }
@media (prefers-reduced-motion: reduce) { .v-pack-rv *, .v-pack-rv { animation: none !important; transition: none !important; } .v-pack-rv.burst .v-pack-burst { display: none; } }
/* a phone: the cards are rows (the reward on the left, its words on the right) */
@media (max-width: 640px) {
  .v-pack-rv .v-pack-row { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 10px; }
  .v-pack-rv .v-pack-card { height: 152px; aspect-ratio: auto; }
  .v-pc-front { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 10px; }
  .v-pc-front > .v-me-art, .v-pc-front > .v-dum, .v-pc-front > .v-pa { grid-column: 1; grid-row: 1 / -1; width: 128px; align-self: center; }
  .v-pc-front > :not(.v-me-art):not(.v-dum):not(.v-pa) { grid-column: 2; }
  .v-pc-front > .v-pc-on:not(.v-me-art):not(.v-dum):not(.v-pa) { grid-column: 1; grid-row: 1; top: 0; left: 0; }
  .v-pack-card .v-pc-acts { flex-wrap: nowrap; gap: 6px; }
  .v-pack-card .v-pc-acts .v-btn { padding-left: 10px; padding-right: 10px; }
  .v-pc-acts { margin-top: 0; align-self: end; }
}

/* =====================================================================
   THE RESULT: YOU WIN, the XP, the pack (OPEN PACK), what's new in one row (SEE for the rest), CONTINUE to the next fight
   ===================================================================== */
.v-won-pcm { display: inline-block; width: 26px; height: 26px; flex: none; }
.v-won-pcm .v-pa { width: 26px; }
.v-won-abl li { grid-template-columns: auto minmax(0, 1fr); }
.v-won-abl li > .v-won-pcl { width: 72px; flex: none; }
.v-won-abl li > .v-won-pcl .v-me-art, .v-won-abl li > .v-won-pcl .v-dum { width: 72px; }
.v-won-abl li > .v-row { grid-column: 2; }
.v-won-pk > div > b { font: italic 700 26px/1 var(--f-head); }

/* 3.4 · a question in a scene (THE ROAD BETWEEN): the answers share the row and are never clipped; on a phone they take the
   whole row, two equal halves, and the panel count steps aside */
.st.asks .st-lt-b .v-btn, .st.asks .st-lt .v-btn.go { min-width: 0; }
@media (max-width: 700px) {
  .st.asks .st-lt-b .st-dots { display: none; }
  .st.asks .st-lt-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .st.asks .st-lt-b .v-btn { width: 100%; padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.2; }
}

/* 3.4 · on a phone, a button's label that doesn't fit its half of the dock wraps to two balanced lines (CONTINUE · FOLDBACK,
   OPEN THE NEXT · 2, FIGHT · LONG HAUL) instead of being cut at both ends. One that fits stays on one line */
@media (max-width: 600px) {
  .v-dock .v-btn, .v-dock-b .v-btn, .v-place-go .v-btn { white-space: normal; text-wrap: balance; line-height: 1.15; padding-block: 6px; }
}

/* 3.4 · MY FIGHTER's YOUR LOOK on a phone: the pieces take the first row, what they are and LOCKER the second (in one row the
   words had a column a few letters wide and broke mid-word) */
@media (max-width: 600px) {
  .v-slot.look { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .v-slot.look > .v-slot-pcs { grid-column: 1 / -1; }
  .v-slot.look b, .v-slot.look em { overflow-wrap: normal; }
}

/* =====================================================================
   3.5 · THE TYPE FLOOR. Nothing anyone reads is under 11 px (the house label, .v-k, is 12 px). These were 8.5–10.5 px: the
   Locker's slot and tile labels, the fighter switcher, ON / FAVOURITE / NEW tags, the pick grid, your Fit's label at the walk-up,
   the fight's SPEED and FULL SPEED, ◆'s word, the cue's line, the WIRE strip. One floor, set once (--t-floor), not one patch each
   ===================================================================== */
:root { --t-floor: 11px; }
.v-lk-w i, .v-pk2-t i, .v-wt i, .v-wt b, .v-wt .v-on, .v-pa.noart > i, .v-fit-fav, .v-ds-in i, .v-tile i, .v-state, .v-next, .v-goal i, .v-own b,
.v-how dt, .v-st dt, .v-f-id em, .v-jn-b i, .v-castph > em, .v-fin li b, .v-new, .v-pk2-tag, .v-pk2-id .v-k, .v-place.fold .v-place-h .v-k,
.du-fit-in i, .du-fit-ms small, .du-fitc .du-fitc-tag, .du-tempo em, .du-tempo b, .du-ctr i, .du-ctr em.du-key, .du-cue span, .du-wire, .du-wdr li i,
.du-gear i:not(.du-mk), .du-uses i:not(.du-mk), .v-pc-front > i, .v-pc-front em, .v-tech header b i, .v-tbl thead th, .v-end-cast li span i, .v-fin li em, .v-insp-art .v-stage > .v-k { font-size: var(--t-floor); }
/* … and what the floor made wider gets its room: the finish ladder in three columns on a phone (HOLOGRAPHIC ran 5 px off a 390 px
   screen), a slot's label wraps (KATANA · WORN lost its end in the Locker's narrower two-column panel) */
@media (max-width: 520px) { .v-fin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v-arm-slots .v-slot i { white-space: normal; overflow: visible; text-overflow: clip; }
.du-cue.in.fire span { font-size: var(--t-floor); }

/* 3.5 · a character appears whole (js/avatar-layers.js marks a composite .ready when all its layers are in): in a story panel, a
   fight and the face-off, never a head before its face */
.st-a .sav:not(.ready), .du-bust .sav:not(.ready), .du-in-art .sav:not(.ready) { opacity: 0; }
.st-a .sav, .du-bust .sav, .du-in-art .sav { transition: opacity .25s ease; }

/* 3.5 · a name the player typed (a Fit: up to 20 letters) never widens what holds it. A 20-letter name in wide letters ran MY
   FIGHTER's whole column off a phone; on the walk-up and in CHANGE FIT a real name (MIDNIGHT MARKET KIT) lost its end. It wraps,
   two lines at most where room is tight */
.v-lo-head > div { min-width: 0; }
.v-lo-name, .v-lo-in > .v-k, .v-lo-in > b { overflow-wrap: anywhere; }
.du-fit-in b, .du-fitc b { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.du-fitc b { text-align: center; }

/* 3.5 · a finger's reach. On a touch screen the small controls keep their look but take at least 44 × 44 px of touch (WCAG 2.5.5,
   Apple's 44 pt): the map card's arrows and fold (36), DETAILS (32 high), the walk-up's WHAT THEY BRING (29), a Fit's EDIT (32),
   PAUSE (36), the Locker's slot and source chips (38), the walk-up's CHANGE FIT / LOCKER (38). The extra area is invisible and
   changes no layout */
@media (pointer: coarse) {
  .v-pn, .v-place-fold, .v-more-t, .v-lo-edit > summary, .du-leave, .du-intro .du-more summary, .du-intro .du-fit-go, .v-src-b, .v-cat { position: relative; }
  .v-pn::after, .v-place-fold::after, .v-more-t::after, .v-lo-edit > summary::after, .du-leave::after, .du-intro .du-more summary::after, .du-intro .du-fit-go::after, .v-src-b::after, .v-cat::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}

/* 3.5 · a land on the map shows where the keyboard is (its outline was removed with nothing in its place) */
.w-land:focus-visible { fill: rgba(249, 244, 238, .07); stroke: var(--orange, #FC4C01); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* 3.5.1 · the map's bar on a tablet or a narrow window (761–999 px): icons only, as on a phone, so every button fits (with a pack
   waiting, the labelled bar ran past the right edge at 768 and 853 wide; it needs about 960 px) */
@media (min-width: 761px) and (max-width: 999px) {
  .v-hb { width: 46px; padding: 0; justify-content: center; }
  .v-hb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v-hb.pk { position: relative; }
  .v-hb.pk em { position: absolute; top: -6px; right: -6px; padding: 2px 4px; font-size: 10px; }
}
/* 3.5.1 · with the music button the bar has six buttons: up to 430 px your badge is your face (and NEW), as it already was with a
   pack waiting, rather than a name cut to "#" */
@media (max-width: 430px) { .v-hud .v-me-id { display: none; } .v-hud .v-me { padding-right: 6px; } }

/* 3.8 · small phones (under 375 px: 320 and 360 among them). Nothing runs off the side: a sheet's column is the screen's width (a
   wide table scrolls inside itself); the Locker's tabs drop their icons, and its panel never grows past the screen; Fits stand one
   to a row; a pack card's art gives its words room for WEAR and INSPECT on one line. At 340 and under, where those still wrap, the
   card grows to hold them, and a sheet's title steps down a size */
@media (max-width: 374px) {
  .v-scr { grid-template-columns: minmax(0, 1fr); }
  .v-lk-panel { grid-template-columns: minmax(0, 1fr); }
  .v-lk-tab > .v-ui { display: none; }
  .v-fit-list { grid-template-columns: minmax(0, 1fr); }
  .v-pc-front { grid-template-columns: 100px minmax(0, 1fr); }
  .v-pc-front > .v-me-art, .v-pc-front > .v-dum, .v-pc-front > .v-pa { width: 100px; }
}
@media (max-width: 340px) {
  .v-pack-rv .v-pack-card { height: 188px; }
  .v-pack-card .v-pc-acts { flex-wrap: wrap; row-gap: 6px; }
  .v-bar-t { font-size: 18px; }
}