/* ==========================================================================
   JUJUTSU BALL CLASH — interface
   A hand-built, asset-free companion style sheet.
   ========================================================================== */

:root {
  --ink: #05070d;
  --ink-soft: #080d18;
  --panel: rgba(9, 14, 25, 0.7);
  --paper: #eee9dc;
  --paper-dim: #a8a79f;
  --muted: #656c79;
  --line: rgba(230, 237, 255, 0.13);
  --line-strong: rgba(230, 237, 255, 0.26);
  --blue: #2c78ff;
  --blue-bright: #62d9ff;
  --cyan: #89f7ff;
  --violet: #a06bff;
  --red: #ff3b3b;
  --red-deep: #ac0c25;
  --gold: #d7c191;
  --green: #7dffb0;
  --font-display: "Bodoni 72", "Didot", "Songti SC", "STSong", "SimSun", serif;
  --font-cjk: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-ui: "Bahnschrift", "DIN Alternate", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background: var(--ink);
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse at 18% 45%, rgba(19, 66, 156, 0.19), transparent 44%),
    radial-gradient(ellipse at 82% 45%, rgba(155, 20, 38, 0.16), transparent 44%),
    #05070d;
  color: var(--paper);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 4px;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 19px;
  padding: 0 5px;
  border: 1px solid rgba(220, 233, 255, 0.22);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(236, 242, 255, 0.78);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

::selection {
  background: rgba(120, 226, 255, 0.25);
  color: #fff;
}

/* film grain + global optical finishing -------------------------------- */
.page-grain {
  position: fixed;
  inset: -30%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");
  animation: grain-shift 0.72s steps(2) infinite;
}

.page-vignette {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.3)),
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.48) 100%);
  mix-blend-mode: multiply;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -1%); }
  50% { transform: translate(-1%, 2%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(-2%, -1%); }
}

/* ==========================================================================
   SCREEN / MENU
   ========================================================================== */

.screen {
  position: fixed;
  inset: 0;
}

.menu-screen {
  z-index: 2;
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  background:
    radial-gradient(ellipse at 20% 48%, rgba(26, 85, 199, 0.18), transparent 43%),
    radial-gradient(ellipse at 80% 48%, rgba(198, 26, 47, 0.14), transparent 43%),
    linear-gradient(180deg, #060911 0%, #05070c 58%, #04060a 100%);
  transition: opacity 0.5s ease;
}

.menu-screen.is-active {
  display: flex;
  opacity: 1;
}

.menu-screen.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.menu-split {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    linear-gradient(112deg, rgba(28, 92, 214, 0.15) 0%, transparent 39%, transparent 61%, rgba(174, 22, 40, 0.14) 100%),
    conic-gradient(from 180deg at 50% 50%, rgba(50, 125, 255, 0.04), transparent 20%, transparent 80%, rgba(255, 70, 70, 0.04));
}

.menu-split::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(190, 218, 255, 0.014) 4px 5px);
  mix-blend-mode: screen;
}

.menu-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(84vw, 1050px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.44;
}

.menu-rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(179, 206, 255, 0.08);
  border-radius: 50%;
}

.menu-rings i:nth-child(2) {
  inset: 13%;
  border-style: dashed;
  border-color: rgba(179, 206, 255, 0.06);
  animation: slow-spin 80s linear infinite;
}

.menu-rings i:nth-child(3) {
  inset: 29%;
  border-color: rgba(232, 204, 159, 0.055);
}

.menu-rings::before,
.menu-rings::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6%;
  width: 112%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 220, 255, 0.09), transparent);
}

.menu-rings::after {
  transform: rotate(90deg);
}

@keyframes slow-spin {
  to { transform: rotate(360deg); }
}

/* topbar ---------------------------------------------------------------- */
.topbar {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 3.4vw, 56px) 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
  pointer-events: none;
}

.brand-seal {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(223, 204, 166, 0.52);
  border-radius: 50%;
  color: #e8dcbf;
  font-family: var(--font-cjk);
  font-size: 20px;
  line-height: 1;
  box-shadow:
    0 0 0 4px rgba(216, 192, 147, 0.035),
    0 0 26px rgba(217, 193, 148, 0.08);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-copy strong {
  font-family: var(--font-cjk);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.brand-copy small {
  color: rgba(204, 207, 202, 0.48);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.24em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 23px;
}

.topbar-note {
  color: rgba(214, 219, 221, 0.36);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.17em;
}

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: rgba(228, 232, 230, 0.58);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.13em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.text-btn:hover {
  color: var(--cyan);
}

.sound-btn svg {
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: rgba(222, 239, 247, 0.6);
  stroke: rgba(222, 239, 247, 0.6);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-btn svg .sound-slash {
  display: none;
  fill: none;
  stroke: #ff7d7d;
}

.sound-btn.is-muted svg .sound-wave {
  display: none;
}

.sound-btn.is-muted svg .sound-slash {
  display: block;
}

.sound-btn.is-muted svg {
  fill: rgba(180, 185, 187, 0.35);
  stroke: rgba(180, 185, 187, 0.35);
}

/* menu grid ------------------------------------------------------------- */
.menu-main {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(236px, 310px) minmax(350px, 1fr) minmax(236px, 310px);
  align-items: center;
  gap: clamp(13px, 2.5vw, 44px);
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 8px clamp(20px, 3.4vw, 54px) 12px;
}

/* fighter cards --------------------------------------------------------- */
.fighter-card {
  position: relative;
  isolation: isolate;
  align-self: center;
  min-width: 0;
  max-height: min(580px, calc(100dvh - 155px));
  padding: clamp(15px, 1.7vw, 22px);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.038), transparent 25%),
    linear-gradient(180deg, rgba(9, 15, 27, 0.74), rgba(5, 8, 15, 0.48));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.23),
    0 0 0 1px rgba(255, 255, 255, 0.012) inset;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  backdrop-filter: blur(14px);
  transition: transform 0.6s var(--ease-out), border-color 0.5s ease;
}

.fighter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.68;
  background:
    linear-gradient(180deg, transparent 0%, transparent 64%, rgba(0, 0, 0, 0.24) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.012) 3px 4px);
  pointer-events: none;
}

.fighter-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 66px;
  height: 1px;
  background: var(--card-accent, rgba(255, 255, 255, 0.45));
  box-shadow: 0 0 16px var(--card-accent, rgba(255, 255, 255, 0.25));
}

.fighter-card--blue {
  --card-accent: var(--blue-bright);
  border-left-color: rgba(89, 198, 255, 0.34);
}

.fighter-card--red {
  --card-accent: #ff5c5c;
  border-right-color: rgba(255, 87, 87, 0.33);
  text-align: right;
}

.fighter-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.card-glow {
  position: absolute;
  z-index: -1;
  top: 15%;
  left: 50%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(24px);
  opacity: 0.38;
  pointer-events: none;
}

.fighter-card--blue .card-glow {
  background: radial-gradient(circle, rgba(31, 130, 255, 0.42), transparent 67%);
}

.fighter-card--red .card-glow {
  background: radial-gradient(circle, rgba(213, 33, 47, 0.37), transparent 67%);
}

.fighter-card-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.fighter-card--red .fighter-card-head {
  flex-direction: row-reverse;
}

.side-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(227, 237, 242, 0.58);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.side-tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}

.side-tag--blue {
  color: rgba(107, 212, 255, 0.82);
}

.side-tag--red {
  color: rgba(255, 107, 107, 0.8);
}

.grade-tag {
  padding: 4px 8px;
  border: 1px solid rgba(216, 193, 147, 0.25);
  color: rgba(218, 199, 161, 0.8);
  font-family: var(--font-cjk);
  font-size: 9px;
  letter-spacing: 0.17em;
}

.orb-display {
  position: relative;
  display: grid;
  height: clamp(154px, 18vh, 190px);
  place-items: center;
  margin: 2px 0 3px;
}

.orb-halo {
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(26px);
  pointer-events: none;
}

.fighter-card--blue .orb-halo {
  background: radial-gradient(circle, rgba(61, 191, 255, 0.3), rgba(17, 78, 202, 0.08) 50%, transparent 70%);
}

.fighter-card--red .orb-halo {
  background: radial-gradient(circle, rgba(255, 78, 72, 0.25), rgba(170, 16, 29, 0.07) 50%, transparent 70%);
}

.orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(216, 236, 255, 0.1);
  pointer-events: none;
}

.orb-ring--one {
  width: clamp(180px, 16.5vw, 232px);
  aspect-ratio: 1;
  border-style: dashed;
  animation: slow-spin 32s linear infinite;
}

.orb-ring--two {
  width: clamp(208px, 19vw, 268px);
  aspect-ratio: 1;
  border-color: rgba(216, 236, 255, 0.055);
}

.fighter-card--red .orb-ring--one {
  animation-direction: reverse;
}

.menu-orb {
  position: relative;
  width: clamp(112px, 11vw, 142px);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: orb-levitate 5.5s ease-in-out infinite;
  will-change: transform;
}

.fighter-card--red .menu-orb {
  animation-delay: -2s;
}

.menu-orb::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13%;
  border-radius: 50%;
  border: 1px solid rgba(225, 246, 255, 0.12);
  transform: rotateX(72deg);
}

.menu-orb::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26%;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(225, 246, 255, 0.18);
  border-right-color: rgba(225, 246, 255, 0.04);
  transform: rotateX(68deg) rotateZ(30deg);
}

@keyframes orb-levitate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.menu-orb--gojo {
  background:
    radial-gradient(circle at 37% 27%, rgba(255, 255, 255, 0.96) 0 3%, rgba(179, 252, 255, 0.8) 5%, transparent 17%),
    radial-gradient(circle at 44% 45%, #67e9ff 0%, #21a4ff 17%, #1063e0 38%, #073385 61%, #031238 82%, #010713 100%);
  box-shadow:
    -12px -16px 28px rgba(154, 250, 255, 0.24) inset,
    -22px -20px 50px rgba(0, 128, 255, 0.24) inset,
    14px 18px 34px rgba(0, 4, 22, 0.9) inset,
    0 0 30px rgba(37, 134, 255, 0.52),
    0 0 75px rgba(16, 101, 255, 0.24);
}

.menu-orb--gojo::after {
  border-top-color: rgba(147, 249, 255, 0.58);
}

.gojo-core {
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 36%, #fff 0 9%, #c4ffff 19%, #6af5ff 42%, rgba(32, 205, 255, 0.48) 68%, transparent 76%);
  filter: blur(0.3px);
  box-shadow:
    0 0 13px rgba(205, 255, 255, 0.85),
    0 0 34px rgba(80, 232, 255, 0.48);
  opacity: 0.96;
}

.gojo-band {
  position: absolute;
  z-index: 3;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 49.2%, transparent 49.6%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 49.2%, transparent 49.6%);
  pointer-events: none;
}

.gojo-band::before {
  content: "";
  position: absolute;
  top: 25%;
  left: -2%;
  width: 104%;
  height: 18%;
  border-top: 1px solid rgba(152, 224, 255, 0.26);
  border-bottom: 1px solid rgba(0, 2, 12, 0.9);
  background:
    linear-gradient(180deg, rgba(20, 47, 76, 0.8), rgba(2, 5, 13, 0.95) 38%, #010207 100%);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.68),
    0 -1px 10px rgba(90, 204, 255, 0.12);
  transform: rotate(-8deg);
  clip-path: polygon(0 5%, 100% 0, 100% 88%, 0 100%);
}

.gojo-band::after {
  content: "";
  position: absolute;
  top: 30%;
  right: 18%;
  width: 4px;
  height: 1px;
  background: rgba(120, 231, 255, 0.8);
  box-shadow: 0 0 8px rgba(120, 231, 255, 0.8);
}

.gojo-hair {
  position: absolute;
  z-index: 2;
  top: -8%;
  left: 13%;
  width: 77%;
  height: 45%;
  background:
    linear-gradient(140deg, #f4f5ef 0 28%, #c8d1d1 52%, #778d9c 100%);
  clip-path: polygon(0 95%, 8% 46%, 20% 70%, 26% 21%, 40% 57%, 52% 4%, 63% 49%, 74% 16%, 82% 63%, 94% 40%, 100% 91%, 70% 79%, 51% 95%, 30% 78%);
  filter: drop-shadow(0 -2px 7px rgba(202, 246, 255, 0.28));
  opacity: 0.92;
}

.gojo-glint {
  position: absolute;
  z-index: 4;
  top: 11%;
  left: 18%;
  width: 34%;
  height: 14%;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(-28deg);
  filter: blur(1px);
}

.orbit-mote {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d7ffff;
  box-shadow: 0 0 9px 2px rgba(121, 242, 255, 0.8);
  animation: mote-orbit 6s linear infinite;
}

.orbit-mote.m1 { top: -5%; left: 55%; animation-delay: 0s; }
.orbit-mote.m2 { right: 2%; bottom: 27%; animation-delay: -2s; }
.orbit-mote.m3 { left: -2%; bottom: 33%; animation-delay: -4s; }

@keyframes mote-orbit {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.48; }
  50% { transform: translate(-9px, -14px) scale(1.3); opacity: 1; }
}

.menu-orb--sukuna {
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 207, 145, 0.7) 0 3%, transparent 17%),
    radial-gradient(circle at 44% 46%, #ff8745 0%, #e22b2e 17%, #a5091c 38%, #57040e 61%, #240208 82%, #090103 100%);
  box-shadow:
    -12px -16px 28px rgba(255, 123, 77, 0.2) inset,
    -21px -18px 48px rgba(177, 14, 23, 0.3) inset,
    14px 18px 34px rgba(17, 0, 2, 0.92) inset,
    0 0 30px rgba(214, 28, 38, 0.45),
    0 0 76px rgba(160, 10, 24, 0.22);
}

.sukuna-core {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 34%, #ffe1b0 0 4%, #ff9656 15%, #ee2d22 37%, rgba(134, 7, 16, 0.8) 68%, transparent 78%);
  box-shadow:
    0 0 16px rgba(255, 117, 59, 0.56),
    0 0 36px rgba(244, 33, 27, 0.25);
  opacity: 0.88;
}

.sukuna-hair {
  position: absolute;
  z-index: 2;
  top: -8%;
  left: 15%;
  width: 75%;
  height: 42%;
  background: linear-gradient(145deg, #362823 0 18%, #171110 56%, #771723 100%);
  clip-path: polygon(0 95%, 7% 53%, 18% 73%, 26% 12%, 41% 60%, 53% 0, 64% 55%, 78% 7%, 84% 68%, 98% 44%, 100% 95%, 72% 78%, 52% 97%, 29% 77%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
  opacity: 0.94;
}

.sukuna-mark {
  position: absolute;
  z-index: 3;
  border: 3px solid rgba(7, 2, 3, 0.93);
  border-color: rgba(7, 2, 3, 0.93) transparent transparent transparent;
  border-radius: 50%;
  filter: drop-shadow(0 0 2px rgba(255, 136, 95, 0.17));
}

.sukuna-mark.sk1 {
  top: 40%;
  left: 8%;
  width: 31%;
  height: 20%;
  transform: rotate(-25deg);
}

.sukuna-mark.sk2 {
  top: 51%;
  right: 5%;
  width: 37%;
  height: 19%;
  transform: rotate(24deg);
}

.sukuna-mark.sk3 {
  bottom: 12%;
  left: 27%;
  width: 46%;
  height: 8%;
  border: 0;
  border-radius: 0;
  background: rgba(7, 2, 3, 0.87);
  clip-path: polygon(0 54%, 16% 8%, 24% 58%, 43% 18%, 55% 62%, 76% 5%, 100% 52%, 82% 100%, 57% 67%, 29% 94%);
  transform: rotate(5deg);
  filter: drop-shadow(0 0 2px rgba(255, 136, 95, 0.1));
}

.sukuna-eye {
  position: absolute;
  z-index: 4;
  width: 9.5%;
  height: 3.4%;
  border-radius: 50%;
  background: #f4e5cc;
  border: 1px solid rgba(12, 2, 3, 0.94);
  box-shadow: 0 0 5px rgba(255, 94, 58, 0.36);
}

.sukuna-eye::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4px;
  height: 2.4px;
  border-radius: 50%;
  background: #8e0410;
  box-shadow: 0 0 4px rgba(255, 37, 26, 0.7);
  transform: translate(-50%, -50%);
}

.sukuna-eye.e1 { top: 33%; left: 24%; transform: rotate(18deg); }
.sukuna-eye.e2 { top: 28%; left: 40%; transform: rotate(-9deg); }
.sukuna-eye.e3 { top: 46%; right: 22%; transform: rotate(12deg); }
.sukuna-eye.e4 { top: 39%; right: 35%; transform: rotate(-6deg); }

.sukuna-glint {
  position: absolute;
  z-index: 1;
  top: 9%;
  left: 16%;
  width: 33%;
  height: 13%;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 234, 210, 0.4);
  transform: rotate(-28deg);
  filter: blur(1px);
}

.orb-code {
  position: absolute;
  right: 2%;
  bottom: 4%;
  color: rgba(211, 223, 229, 0.33);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
}

.fighter-card--red .orb-code {
  right: auto;
  left: 2%;
}

.fighter-copy {
  position: relative;
  z-index: 2;
}

.fighter-kicker {
  margin: 0 0 3px;
  color: rgba(186, 201, 211, 0.38);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.22em;
}

.fighter-copy h2 {
  margin: 0;
  font-family: var(--font-cjk);
  font-size: clamp(29px, 2.5vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-shadow: 0 0 34px rgba(133, 192, 255, 0.15);
}

.fighter-card--red .fighter-copy h2 {
  text-shadow: 0 0 34px rgba(255, 109, 109, 0.13);
}

.fighter-title {
  margin: 7px 0 0;
  color: rgba(231, 222, 201, 0.82);
  font-family: var(--font-cjk);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.fighter-desc {
  margin: 8px 0 0;
  max-width: 270px;
  color: rgba(191, 201, 204, 0.66);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.fighter-card--red .fighter-desc {
  margin-left: auto;
}

.skill-preview {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 13px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid rgba(220, 232, 244, 0.09);
  list-style: none;
}

.skill-preview li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 1px;
}

.fighter-card--red .skill-preview li {
  flex-direction: row-reverse;
  text-align: right;
}

.mini-seal {
  flex: 0 0 auto;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(223, 235, 242, 0.16);
  border-radius: 50%;
  font-family: var(--font-cjk);
  font-size: 11px;
  line-height: 1;
}

.seal-blue { color: #91e5ff; border-color: rgba(101, 205, 255, 0.32); background: rgba(22, 96, 204, 0.14); }
.seal-violet { color: #c9a7ff; border-color: rgba(169, 114, 255, 0.32); background: rgba(107, 42, 196, 0.14); }
.seal-green { color: #a8faca; border-color: rgba(116, 241, 166, 0.26); background: rgba(38, 144, 94, 0.12); }
.seal-white { color: #f1f2e7; border-color: rgba(240, 241, 226, 0.3); background: rgba(231, 237, 231, 0.06); }
.seal-red { color: #ffb4a7; border-color: rgba(255, 106, 87, 0.32); background: rgba(171, 20, 30, 0.16); }
.seal-flame { color: #ffd095; border-color: rgba(255, 166, 88, 0.3); background: rgba(183, 72, 17, 0.13); }
.seal-blood { color: #ff9395; border-color: rgba(255, 71, 84, 0.3); background: rgba(142, 9, 26, 0.16); }
.seal-crimson { color: #f2c7bd; border-color: rgba(225, 143, 126, 0.3); background: rgba(101, 5, 17, 0.2); }

.skill-preview li > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.skill-preview b {
  overflow: hidden;
  color: rgba(232, 237, 233, 0.86);
  font-family: var(--font-cjk);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-preview small {
  overflow: hidden;
  color: rgba(170, 182, 186, 0.52);
  font-size: 7px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-index {
  position: absolute;
  z-index: 0;
  right: 12px;
  bottom: 5px;
  color: rgba(216, 228, 235, 0.035);
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;
}

.fighter-card--red .card-index {
  right: auto;
  left: 12px;
}

/* center ---------------------------------------------------------------- */
.menu-center {
  position: relative;
  z-index: 4;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  align-self: center;
  text-align: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 13px;
  color: rgba(217, 199, 160, 0.58);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.28em;
}

.eyebrow span {
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 193, 145, 0.6));
}

.eyebrow span:last-child {
  transform: scaleX(-1);
}

.game-title {
  position: relative;
  display: flex;
  margin: 0;
  flex-direction: column;
  color: #f2ede0;
  font-family: var(--font-cjk);
  font-size: clamp(62px, 6.8vw, 102px);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.035em;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 0 55px rgba(155, 198, 255, 0.13);
}

.title-row {
  display: flex;
  justify-content: center;
  gap: 0.07em;
}

.title-row--lower {
  margin-top: 0.12em;
  margin-left: 0.14em;
  color: #f0ebe0;
}

.title-row em {
  font-style: normal;
}

.title-row--lower em:first-child {
  color: #d7e0dd;
}

.title-row--lower em:last-child {
  color: #f49d8b;
  text-shadow:
    0 0 30px rgba(235, 77, 55, 0.18),
    0 2px 0 rgba(0, 0, 0, 0.5);
}

.title-stamp {
  position: absolute;
  right: -2%;
  bottom: -3%;
  display: grid;
  width: clamp(28px, 3vw, 38px);
  height: clamp(28px, 3vw, 38px);
  place-items: center;
  border: 1px solid rgba(216, 73, 65, 0.6);
  color: rgba(235, 108, 95, 0.9);
  font-family: var(--font-cjk);
  font-size: clamp(11px, 1.1vw, 15px);
  line-height: 1;
  transform: rotate(-8deg);
  opacity: 0.74;
}

.game-title-en {
  margin: 20px 0 0;
  color: rgba(193, 203, 207, 0.68);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.7vw, 10px);
  letter-spacing: 0.46em;
  text-indent: 0.46em;
}

.game-title-en b {
  color: #e7d9bd;
  font-weight: 500;
}

.title-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(310px, 86%);
  margin-top: 16px;
}

.title-rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 215, 207, 0.18));
}

.title-rule i:last-child {
  transform: scaleX(-1);
}

.title-rule span {
  color: rgba(206, 204, 187, 0.42);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.center-vs {
  display: flex;
  width: min(270px, 78%);
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 23px 0 17px;
}

.vs-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 209, 238, 0.22));
}

.vs-line:last-child {
  background: linear-gradient(90deg, rgba(184, 209, 238, 0.22), transparent);
}

.center-vs strong {
  color: rgba(229, 227, 213, 0.7);
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.start-btn {
  position: relative;
  display: flex;
  width: min(330px, 86%);
  min-height: 91px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(206, 193, 163, 0.4);
  background: rgba(7, 11, 18, 0.72);
  color: var(--paper);
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  isolation: isolate;
  transition:
    border-color 0.35s ease,
    color 0.35s ease,
    transform 0.4s var(--ease-out);
}

.start-btn::before,
.start-btn::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 1px;
  background: rgba(244, 231, 204, 0.74);
  transition: width 0.45s var(--ease-out);
}

.start-btn::before {
  top: 9px;
  left: 13px;
}

.start-btn::after {
  bottom: 9px;
  right: 13px;
}

.start-btn-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(22, 117, 255, 0.36), transparent 47%),
    radial-gradient(ellipse at 82% 0%, rgba(198, 28, 44, 0.23), transparent 50%),
    linear-gradient(100deg, rgba(13, 28, 51, 0.56), rgba(11, 12, 18, 0.36));
  opacity: 0.72;
  transform: scaleX(0.7);
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.55s var(--ease-out);
}

.start-btn:hover {
  border-color: rgba(238, 226, 201, 0.8);
  color: #fffdf3;
  transform: translateY(-2px);
}

.start-btn:hover .start-btn-bg {
  opacity: 1;
  transform: scaleX(1);
}

.start-btn:hover::before,
.start-btn:hover::after {
  width: 36px;
}

.start-btn-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.start-btn-copy small {
  color: rgba(216, 197, 161, 0.59);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.start-btn-copy b {
  font-family: var(--font-cjk);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
}

.start-btn-arrow {
  position: relative;
  z-index: 1;
  color: rgba(226, 214, 186, 0.55);
  font-family: var(--font-mono);
  font-size: 18px;
  transition: transform 0.35s var(--ease-out), color 0.35s ease;
}

.start-btn:hover .start-btn-arrow {
  color: var(--cyan);
  transform: translateX(4px);
}

.start-btn:disabled {
  opacity: 0.38;
  filter: saturate(0.35);
  cursor: not-allowed;
  pointer-events: none;
}

.start-btn.is-starting {
  pointer-events: none;
  animation: start-press 0.65s var(--ease-out);
}

@keyframes start-press {
  0% { transform: scale(1); }
  35% { transform: scale(0.98); filter: brightness(1.55); }
  100% { transform: scale(1.02); filter: brightness(1); }
}

.start-hint {
  margin: 12px 0 0;
  color: rgba(171, 181, 184, 0.4);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.start-hint kbd {
  margin-left: 6px;
  height: 17px;
  vertical-align: -3px;
  opacity: 0.7;
}

.menu-quick-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 13px;
  margin-top: 18px;
  color: rgba(151, 162, 166, 0.38);
  font-size: 8px;
  letter-spacing: 0.04em;
}

.menu-quick-controls span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.menu-quick-controls kbd {
  height: 16px;
  min-width: 19px;
  padding: 0 4px;
  font-size: 8px;
  border-color: rgba(205, 219, 231, 0.15);
}

.auto-quick-controls span {
  color: rgba(178, 194, 197, 0.52);
  letter-spacing: 0.06em;
}

.auto-quick-controls b {
  display: inline-grid;
  height: 15px;
  min-width: 17px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid rgba(118, 222, 255, 0.22);
  border-radius: 2px;
  color: rgba(142, 232, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 0.08em;
  box-shadow: 0 0 8px rgba(56, 167, 255, 0.06) inset;
}

.auto-live-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  border-radius: 50%;
  background: #ff5d52;
  box-shadow: 0 0 7px rgba(255, 73, 64, 0.75);
  vertical-align: 1px;
  animation: auto-live 1.6s ease-in-out infinite;
}

@keyframes auto-live {
  0%, 100% { opacity: 0.36; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* footer ---------------------------------------------------------------- */
.mobile-brief {
  display: none;
}

.menu-footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(20px, 3.4vw, 56px) 15px;
  border-top: 1px solid rgba(211, 225, 235, 0.06);
  color: rgba(151, 164, 169, 0.35);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.menu-footer p {
  margin: 0;
}

.menu-footer p:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #87ffc0;
  box-shadow: 0 0 7px rgba(107, 255, 180, 0.8);
  animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ==========================================================================
   BATTLE
   ========================================================================== */

.battle-screen {
  z-index: 1;
  display: none;
  overflow: hidden;
  background: #03050a;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.battle-screen.is-active {
  display: block;
  opacity: 1;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
  touch-action: none;
}

.battle-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 48%, rgba(0, 0, 0, 0.3) 88%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(1, 3, 8, 0.5), transparent 16%, transparent 79%, rgba(1, 3, 8, 0.65));
}

.battle-hud {
  position: absolute;
  z-index: 6;
  top: max(17px, env(safe-area-inset-top));
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 3vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2.8vw, 46px);
  pointer-events: none;
}

.hud-side {
  min-width: 0;
  padding-top: 4px;
}

.hud-side--red {
  text-align: right;
}

.combatant-id {
  display: flex;
  align-items: baseline;
  gap: clamp(7px, 1vw, 12px);
  margin-bottom: 7px;
  line-height: 1;
}

.hud-side--red .combatant-id {
  justify-content: flex-end;
}

.side-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.12em;
}

.side-pill i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.side-pill--blue {
  border-color: rgba(97, 207, 255, 0.24);
  background: rgba(19, 83, 172, 0.15);
  color: #79ddff;
}

.side-pill--red {
  border-color: rgba(255, 105, 100, 0.22);
  background: rgba(151, 23, 32, 0.15);
  color: #ff9a8c;
}

.hud-name {
  overflow: hidden;
  color: rgba(242, 238, 226, 0.94);
  font-family: var(--font-cjk);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-overflow: ellipsis;
  text-shadow: 0 0 24px rgba(144, 210, 255, 0.13);
  white-space: nowrap;
}

.hud-side--red .hud-name {
  text-shadow: 0 0 24px rgba(255, 133, 108, 0.12);
}

.hp-readout {
  margin-left: auto;
  color: rgba(210, 228, 233, 0.68);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.78vw, 10px);
  font-weight: 400;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hud-side--red .hp-readout {
  margin-left: 0;
  margin-right: auto;
}

.hp-track {
  position: relative;
  height: clamp(10px, 1vw, 14px);
  overflow: hidden;
  border: 1px solid rgba(195, 221, 241, 0.18);
  background: rgba(3, 7, 13, 0.78);
  transform: skewX(-16deg);
  box-shadow:
    0 0 0 2px rgba(4, 8, 13, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

.hud-side--red .hp-track {
  transform: skewX(16deg);
}

.hp-ghost,
.hp-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  transform-origin: left center;
}

.hp-ghost {
  background: rgba(255, 230, 207, 0.32);
  transition: width 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: blur(1px);
}

.hp-fill {
  background:
    linear-gradient(90deg, rgba(17, 92, 220, 0.95), #25a3ff 46%, #74e5ff 100%);
  box-shadow:
    0 0 13px rgba(68, 193, 255, 0.45),
    0 0 24px rgba(41, 137, 255, 0.2);
  transition: width 0.16s ease-out;
}

.hp-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 43%, rgba(0, 0, 20, 0.3));
}

.hp-ticks {
  position: absolute;
  inset: 0;
  display: block;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(2, 7, 15, 0.65) calc(10% - 1px) 10%);
  pointer-events: none;
}

.hud-side--red .hp-ghost,
.hud-side--red .hp-fill {
  right: 0;
  left: auto;
  transform-origin: right center;
}

.hud-side--red .hp-fill {
  background: linear-gradient(90deg, #ffd0a7 0%, #ff704e 32%, #e52d34 66%, #ad0e24 100%);
  box-shadow:
    0 0 13px rgba(255, 80, 68, 0.38),
    0 0 25px rgba(210, 26, 37, 0.19);
}

.hud-side--red .hp-fill::after {
  background: linear-gradient(180deg, rgba(255, 231, 207, 0.26), transparent 43%, rgba(40, 0, 4, 0.3));
}

.hp-track.is-danger .hp-fill {
  animation: hp-danger 1.15s ease-in-out infinite;
}

.hp-track.is-danger::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255, 75, 75, 0.35);
  animation: danger-border 1.15s ease-in-out infinite;
}

@keyframes hp-danger {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}

@keyframes danger-border {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; }
}

.domain-meter {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--font-mono);
  line-height: 1;
}

.hud-side--red .domain-meter {
  justify-content: flex-end;
}

.domain-label {
  flex: 0 0 auto;
  color: rgba(164, 181, 189, 0.48);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.domain-track {
  position: relative;
  display: block;
  width: min(170px, 50%);
  height: 4px;
  overflow: hidden;
  background: rgba(157, 185, 205, 0.1);
}

.domain-track i {
  position: absolute;
  inset: 0;
  display: block;
  width: 0%;
  background: linear-gradient(90deg, rgba(37, 113, 255, 0.58), rgba(140, 238, 255, 0.9));
  box-shadow: 0 0 8px rgba(109, 223, 255, 0.45);
  transition: width 0.24s ease;
}

.hud-side--red .domain-track i {
  right: 0;
  left: auto;
  background: linear-gradient(90deg, rgba(255, 194, 122, 0.8), rgba(219, 47, 47, 0.76));
  box-shadow: 0 0 8px rgba(255, 79, 62, 0.34);
}

.domain-notch {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(1, 4, 10, 0.65);
}

.domain-pct {
  width: 27px;
  color: rgba(186, 204, 211, 0.55);
  font-size: 8px;
  text-align: right;
}

.hud-side--red .domain-pct {
  text-align: left;
}

.domain-ready {
  display: none;
  color: #b8f8ff;
  font-size: 6px;
  letter-spacing: 0.13em;
  text-shadow: 0 0 7px rgba(101, 236, 255, 0.7);
  animation: ready-glow 1.8s ease-in-out infinite;
}

.hud-side--red .domain-ready {
  color: #ffb49e;
  text-shadow: 0 0 7px rgba(255, 107, 82, 0.6);
}

.domain-meter.is-ready .domain-ready {
  display: inline;
}

.domain-meter.is-ready .domain-pct {
  display: none;
}

@keyframes ready-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.status-line {
  min-height: 16px;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(130, 226, 255, 0.7);
  font-family: var(--font-cjk);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(74, 192, 255, 0.18);
}

.hud-side--red .status-line {
  color: rgba(255, 152, 129, 0.66);
  text-shadow: 0 0 10px rgba(255, 91, 63, 0.14);
}

.status-line .status-chip {
  display: inline-block;
  margin-right: 6px;
}

.status-line .status-chip::before {
  content: "◆";
  margin-right: 3px;
  font-size: 5px;
  vertical-align: 1px;
  opacity: 0.7;
}

.hud-side--red .status-line .status-chip {
  margin-right: 0;
  margin-left: 6px;
}

.hud-side--red .status-line .status-chip::before {
  content: "";
  margin: 0;
}

.hud-side--red .status-line .status-chip::after {
  content: "◆";
  margin-left: 3px;
  font-size: 5px;
  vertical-align: 1px;
  opacity: 0.7;
}

.match-clock {
  display: flex;
  min-width: 104px;
  align-items: center;
  flex-direction: column;
  padding: 2px 14px 8px;
  border-bottom: 1px solid rgba(216, 227, 226, 0.12);
  text-align: center;
}

.clock-kicker {
  color: rgba(202, 188, 156, 0.45);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

#matchTimer {
  margin: 5px 0 4px;
  color: rgba(246, 242, 228, 0.95);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 39px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(238, 245, 255, 0.11);
}

.match-clock.is-danger #matchTimer {
  color: #ff9c86;
  animation: clock-pulse 1s ease-in-out infinite;
}

@keyframes clock-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.clock-round {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(168, 181, 184, 0.36);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.14em;
}

.clock-round i {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.utility-actions {
  position: absolute;
  z-index: 8;
  right: clamp(18px, 3vw, 48px);
  bottom: max(25px, calc(env(safe-area-inset-bottom) + 16px));
  display: flex;
  gap: 7px;
  align-items: center;
}

.icon-btn {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(193, 213, 226, 0.14);
  background: rgba(5, 9, 16, 0.58);
  color: rgba(209, 223, 230, 0.6);
  cursor: pointer;
  backdrop-filter: blur(7px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.icon-btn:hover {
  border-color: rgba(182, 231, 255, 0.35);
  background: rgba(10, 22, 38, 0.72);
  color: var(--cyan);
}

.icon-btn:disabled {
  opacity: 0.28;
  pointer-events: none;
}

.icon-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn.sound-btn svg {
  fill: currentColor;
  stroke: none;
}

.icon-btn.sound-btn svg .sound-wave {
  fill: none;
  stroke: currentColor;
}

.icon-btn.sound-btn svg .sound-slash {
  fill: none;
  stroke: #ff887c;
}

/* announce -------------------------------------------------------------- */
.announce {
  position: absolute;
  z-index: 12;
  top: 32%;
  left: 50%;
  display: flex;
  width: min(680px, 88vw);
  align-items: center;
  flex-direction: column;
  gap: 5px;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.48s var(--ease-out);
}

.announce.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.announce::before,
.announce::after {
  content: "";
  width: min(260px, 42%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 231, 216, 0.36));
  transition: width 0.5s var(--ease-out);
}

.announce::after {
  background: linear-gradient(90deg, rgba(226, 231, 216, 0.36), transparent);
}

.announce small {
  color: rgba(215, 195, 157, 0.75);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
}

.announce strong {
  color: #f3efe3;
  font-family: var(--font-cjk);
  font-size: clamp(34px, 5.1vw, 68px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.17em;
  text-indent: 0.17em;
  text-shadow:
    0 0 20px rgba(188, 225, 255, 0.15),
    0 0 60px rgba(126, 194, 255, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.42);
}

.announce span {
  color: rgba(195, 203, 194, 0.58);
  font-family: var(--font-cjk);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.announce.tone-blue strong {
  color: #d5faff;
  text-shadow: 0 0 18px rgba(74, 197, 255, 0.36), 0 0 65px rgba(43, 133, 255, 0.25);
}

.announce.tone-violet strong {
  color: #e5d4ff;
  text-shadow: 0 0 20px rgba(158, 90, 255, 0.44), 0 0 74px rgba(105, 50, 219, 0.27);
}

.announce.tone-red strong {
  color: #ffd3c5;
  text-shadow: 0 0 20px rgba(255, 72, 52, 0.34), 0 0 70px rgba(209, 19, 32, 0.26);
}

.announce.tone-green strong {
  color: #d6ffe6;
  text-shadow: 0 0 20px rgba(86, 255, 169, 0.32), 0 0 60px rgba(30, 165, 101, 0.2);
}

.announce.tone-ko strong {
  font-size: clamp(70px, 11vw, 156px);
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.02em;
  color: #f8f0dc;
  text-shadow: 0 0 22px rgba(255, 245, 219, 0.25), 0 0 80px rgba(255, 236, 196, 0.13);
}

.announce.tone-ko {
  gap: 4px;
}

.announce.tone-ko::before,
.announce.tone-ko::after {
  width: min(380px, 58%);
}

/* skill dock ------------------------------------------------------------ */
.skill-dock {
  position: absolute;
  z-index: 9;
  bottom: max(17px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  align-items: stretch;
  gap: 13px;
  padding: 9px 11px 9px 9px;
  border: 1px solid rgba(187, 215, 231, 0.16);
  background:
    linear-gradient(120deg, rgba(14, 30, 48, 0.78), rgba(5, 9, 16, 0.88) 59%),
    rgba(5, 9, 16, 0.84);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.018) inset;
  transform: translateX(-50%);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  backdrop-filter: blur(14px);
}

.skill-dock::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgba(119, 223, 255, 0.7), transparent);
}

.dock-heading {
  display: flex;
  width: 132px;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 3px;
  border-right: 1px solid rgba(196, 218, 226, 0.1);
}

.dock-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(92, 198, 255, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(163, 251, 255, 0.32), rgba(10, 66, 163, 0.3));
  color: #d9fdff;
  font-family: var(--font-cjk);
  font-size: 13px;
  box-shadow: 0 0 16px rgba(41, 151, 255, 0.14);
}

.dock-heading div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.dock-heading b {
  overflow: hidden;
  color: rgba(221, 235, 238, 0.82);
  font-family: var(--font-cjk);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dock-heading small {
  overflow: hidden;
  color: rgba(159, 176, 181, 0.44);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dock-state {
  position: absolute;
  top: -15px;
  left: 11px;
  color: rgba(146, 222, 246, 0.45);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.skill-list {
  display: flex;
  gap: 5px;
}

.skill-card {
  position: relative;
  display: flex;
  width: clamp(74px, 6.25vw, 89px);
  min-width: 0;
  height: clamp(70px, 7.35vh, 82px);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  padding: 7px 4px 5px;
  border: 1px solid rgba(191, 218, 231, 0.12);
  background:
    linear-gradient(160deg, rgba(41, 70, 94, 0.17), transparent 52%),
    rgba(5, 10, 17, 0.66);
  color: rgba(223, 233, 234, 0.8);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.skill-card::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-right: 1px solid rgba(184, 216, 231, 0.3);
  border-bottom: 1px solid rgba(184, 216, 231, 0.3);
}

.skill-card:hover {
  border-color: rgba(155, 222, 249, 0.34);
  background:
    linear-gradient(160deg, rgba(45, 103, 132, 0.24), transparent 58%),
    rgba(7, 15, 24, 0.78);
}

.skill-card:active {
  transform: translateY(1px);
}

.skill-hotkey {
  position: absolute;
  top: 3px;
  left: 4px;
  color: rgba(161, 190, 201, 0.5);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
}

.auto-mini {
  position: absolute;
  top: 4px;
  left: 5px;
  color: rgba(128, 200, 218, 0.4);
  font-family: var(--font-mono);
  font-size: 5px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.spectator-dock .skill-card {
  cursor: default;
  pointer-events: none;
}

.spectator-dock .skill-card:hover {
  border-color: rgba(191, 218, 231, 0.12);
  background:
    linear-gradient(160deg, rgba(41, 70, 94, 0.17), transparent 52%),
    rgba(5, 10, 17, 0.66);
}

.spectator-dock .skill-card:active {
  transform: none;
}

.spectator-dock .skill-card--basic:hover {
  border-color: rgba(153, 214, 228, 0.09);
  background: rgba(4, 8, 13, 0.54);
}

.spectator-dock .skill-card--domain:hover {
  border-color: rgba(194, 227, 235, 0.15);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 227, 245, 0.08), transparent 53%),
    rgba(4, 8, 14, 0.73);
}

.skill-glyph {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(212, 232, 237, 0.17);
  border-radius: 50%;
  color: rgba(239, 241, 228, 0.9);
  font-family: var(--font-cjk);
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(232, 240, 228, 0.13);
  box-shadow: inset 0 0 13px rgba(175, 217, 235, 0.04);
}

.glyph-blue {
  border-color: rgba(88, 204, 255, 0.3);
  background: radial-gradient(circle at 40% 35%, rgba(154, 249, 255, 0.22), rgba(12, 86, 182, 0.13));
  color: #b6f9ff;
  text-shadow: 0 0 14px rgba(84, 226, 255, 0.45);
}

.glyph-violet {
  border-color: rgba(169, 118, 255, 0.32);
  background: radial-gradient(circle at 40% 35%, rgba(211, 174, 255, 0.18), rgba(82, 26, 157, 0.15));
  color: #dac2ff;
  text-shadow: 0 0 14px rgba(153, 90, 255, 0.45);
}

.glyph-green {
  border-color: rgba(104, 240, 164, 0.25);
  background: radial-gradient(circle at 40% 35%, rgba(151, 255, 200, 0.16), rgba(17, 105, 65, 0.14));
  color: #abffcb;
  text-shadow: 0 0 14px rgba(93, 250, 161, 0.4);
}

.glyph-void {
  border-color: rgba(224, 225, 209, 0.27);
  background: radial-gradient(circle at 50% 45%, rgba(226, 244, 247, 0.14), rgba(9, 16, 27, 0.42));
  color: #eff4ed;
  box-shadow: inset 0 0 18px rgba(166, 217, 239, 0.08);
}

.skill-name {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  gap: 0;
  line-height: 1.25;
}

.skill-name b {
  max-width: 100%;
  overflow: hidden;
  color: rgba(218, 229, 228, 0.84);
  font-family: var(--font-cjk);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-name small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(151, 169, 175, 0.44);
  font-size: 6px;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-card--basic {
  width: clamp(60px, 5vw, 71px);
  border-color: rgba(153, 214, 228, 0.09);
  background: rgba(4, 8, 13, 0.54);
}

.skill-card--basic .skill-glyph {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  color: rgba(191, 219, 227, 0.65);
  font-size: 10px;
  transform: rotate(45deg);
}

.skill-card--basic .skill-glyph {
  color: transparent;
}

.skill-card--basic .skill-glyph::after {
  content: "弹";
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(191, 219, 227, 0.7);
  transform: rotate(-45deg);
}

.skill-card--basic .skill-name b {
  color: rgba(201, 213, 213, 0.58);
  font-size: 7px;
}

.skill-card--domain {
  width: clamp(82px, 6.8vw, 95px);
  border-color: rgba(194, 227, 235, 0.15);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 227, 245, 0.08), transparent 53%),
    rgba(4, 8, 14, 0.73);
}

.skill-card--domain .skill-glyph {
  border-color: rgba(231, 237, 222, 0.38);
  background:
    radial-gradient(circle at 50% 50%, rgba(235, 255, 255, 0.21), transparent 47%),
    #060b13;
  box-shadow:
    0 0 16px rgba(152, 221, 245, 0.09),
    inset 0 0 12px rgba(207, 247, 255, 0.09);
}

.skill-card--domain.is-ready,
.spectator-dock .skill-card--domain.is-ready:hover {
  border-color: rgba(153, 244, 255, 0.58);
  box-shadow:
    0 0 22px rgba(67, 186, 255, 0.16),
    inset 0 0 17px rgba(59, 162, 255, 0.08);
}

.skill-card--domain.is-ready .skill-glyph {
  border-color: rgba(180, 252, 255, 0.76);
  color: #fff;
  animation: void-ready 2.6s ease-in-out infinite;
}

.skill-card--domain.is-ready::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 22%, rgba(163, 246, 255, 0.09) 45%, transparent 66%);
  animation: ready-sweep 3.2s linear infinite;
}

@keyframes void-ready {
  0%, 100% { box-shadow: 0 0 8px rgba(162, 248, 255, 0.12), inset 0 0 10px rgba(215, 255, 255, 0.06); }
  50% { box-shadow: 0 0 20px rgba(162, 248, 255, 0.3), inset 0 0 18px rgba(215, 255, 255, 0.14); }
}

@keyframes ready-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.skill-card--domain:not(.is-ready) {
  color: rgba(192, 205, 208, 0.48);
}

.skill-card--domain:not(.is-ready) .skill-glyph {
  opacity: 0.52;
}

.skill-card.is-denied {
  animation: denied-shake 0.35s ease;
}

@keyframes denied-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.skill-cooldown {
  position: absolute;
  inset: 0;
  display: none;
  background: conic-gradient(from 0deg, rgba(2, 6, 11, 0.82) calc(var(--cd, 0) * 1turn), transparent 0);
  pointer-events: none;
}

.skill-card.is-cooling .skill-cooldown {
  display: block;
}

.skill-cdtext {
  position: absolute;
  z-index: 3;
  right: 5px;
  bottom: 18px;
  display: none;
  color: rgba(231, 243, 241, 0.8);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 5px #000;
  pointer-events: none;
}

.skill-card.is-cooling .skill-cdtext {
  display: block;
}

.domain-charge {
  position: absolute;
  right: 5px;
  bottom: 3px;
  left: 5px;
  height: 2px;
  overflow: hidden;
  background: rgba(160, 194, 203, 0.1);
}

.domain-charge i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(79, 196, 255, 0.55), rgba(214, 250, 255, 0.88));
  box-shadow: 0 0 5px rgba(120, 233, 255, 0.46);
  transition: width 0.2s linear;
}

.skill-card--domain.is-ready .domain-charge i {
  background: rgba(219, 255, 255, 0.9);
}

/* touch ----------------------------------------------------------------- */
.touch-controls {
  position: absolute;
  z-index: 10;
  bottom: max(184px, calc(env(safe-area-inset-bottom) + 166px));
  left: 19px;
  display: none;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.joystick {
  position: relative;
  width: 102px;
  height: 102px;
  border: 1px solid rgba(166, 218, 239, 0.15);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 26, 40, 0.48), rgba(4, 8, 14, 0.36));
  backdrop-filter: blur(5px);
  pointer-events: auto;
  touch-action: none;
}

.joystick-ring {
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(150, 214, 239, 0.12);
  border-radius: 50%;
}

.joystick-stick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(166, 237, 255, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(162, 249, 255, 0.25), rgba(13, 49, 78, 0.34));
  box-shadow: 0 0 18px rgba(60, 174, 255, 0.1);
  transform: translate(-50%, -50%);
}

.touch-hint {
  color: rgba(169, 187, 193, 0.34);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   VS INTRO
   ========================================================================== */
.vs-intro {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  overflow: hidden;
  background: #03050a;
}

.vs-intro.is-active {
  display: grid;
  place-items: center;
}

.vs-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.44s ease;
}

.vs-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 63%;
  overflow: hidden;
}

.vs-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.09), transparent 36%),
    repeating-linear-gradient(120deg, transparent 0 13px, rgba(255, 255, 255, 0.024) 13px 14px);
  mix-blend-mode: screen;
}

.vs-panel--blue {
  left: 0;
  background:
    radial-gradient(ellipse at 34% 47%, rgba(24, 95, 219, 0.43), transparent 58%),
    linear-gradient(108deg, #071122, #07172f 46%, #06101d);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
  animation: panel-left-in 0.8s var(--ease-out) both;
}

.vs-panel--red {
  right: 0;
  background:
    radial-gradient(ellipse at 70% 49%, rgba(176, 23, 36, 0.4), transparent 58%),
    linear-gradient(252deg, #17090d, #220a10 46%, #10070b);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  animation: panel-right-in 0.8s var(--ease-out) both;
}

.vs-panel--blue::before,
.vs-panel--red::before {
  content: "";
  position: absolute;
  top: 50%;
  width: min(46vw, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(197, 224, 255, 0.08);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow:
    0 0 0 70px rgba(184, 216, 255, 0.025),
    0 0 0 140px rgba(184, 216, 255, 0.018);
}

.vs-panel--blue::before {
  left: -10%;
}

.vs-panel--red::before {
  right: -10%;
  border-color: rgba(255, 159, 135, 0.07);
  box-shadow:
    0 0 0 70px rgba(255, 153, 126, 0.022),
    0 0 0 140px rgba(255, 153, 126, 0.016);
}

@keyframes panel-left-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes panel-right-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.vs-noise {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.83' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.vs-inner {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1000px, 90vw);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(25px, 6vw, 90px);
  margin-top: -3vh;
}

.vs-fighter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fighter-in 0.8s 0.28s var(--ease-out) both;
}

.vs-fighter--blue {
  align-items: flex-start;
  text-align: left;
}

.vs-fighter--red {
  align-items: flex-end;
  text-align: right;
  animation-delay: 0.36s;
}

@keyframes fighter-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.vs-side {
  color: rgba(190, 226, 240, 0.56);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.24em;
}

.vs-fighter--red .vs-side {
  color: rgba(255, 173, 154, 0.54);
}

.vs-fighter strong {
  color: #f2ede0;
  font-family: var(--font-cjk);
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow: 0 0 40px rgba(122, 213, 255, 0.2);
}

.vs-fighter--red strong {
  text-shadow: 0 0 40px rgba(255, 102, 77, 0.19);
}

.vs-fighter small {
  color: rgba(171, 194, 201, 0.34);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.42em;
}

.vs-emblem {
  display: flex;
  width: clamp(98px, 10vw, 134px);
  aspect-ratio: 1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(212, 199, 165, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 35, 45, 0.7), rgba(3, 6, 12, 0.6));
  box-shadow:
    0 0 0 8px rgba(216, 199, 161, 0.024),
    0 0 60px rgba(136, 190, 255, 0.08);
  animation: emblem-in 0.9s 0.2s var(--ease-out) both;
}

@keyframes emblem-in {
  from { opacity: 0; transform: scale(0.72) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.vs-emblem-ring {
  position: absolute;
  width: clamp(124px, 13vw, 172px);
  aspect-ratio: 1;
  border: 1px dashed rgba(220, 209, 178, 0.17);
  border-radius: 50%;
  animation: slow-spin 22s linear infinite;
}

.vs-emblem b {
  color: #f0e7d4;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 33px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(255, 243, 214, 0.18);
}

.vs-emblem small {
  color: rgba(192, 178, 145, 0.54);
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.16em;
}

.intro-countdown {
  position: absolute;
  z-index: 4;
  bottom: 7%;
  left: 50%;
  color: #f4eedf;
  font-family: var(--font-display);
  font-size: clamp(70px, 12vw, 140px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.8;
  text-shadow:
    0 0 35px rgba(246, 238, 218, 0.17),
    0 0 100px rgba(152, 207, 255, 0.12);
  transform: translateX(-50%);
  animation: countdown-pop 0.66s var(--ease-out);
}

.intro-countdown.is-final {
  font-family: var(--font-cjk);
  font-size: clamp(42px, 6.6vw, 88px);
  font-style: normal;
  letter-spacing: 0.14em;
  color: #e9eedd;
}

@keyframes countdown-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(1.3); }
  24% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.78; transform: translateX(-50%) scale(0.96); }
}

.intro-tip {
  position: absolute;
  z-index: 3;
  bottom: 3.5%;
  left: 50%;
  margin: 0;
  color: rgba(183, 195, 190, 0.34);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.3em;
  transform: translateX(-50%);
}

/* ==========================================================================
   MODALS / PAUSE / RESULT
   ========================================================================== */
.modal-layer,
.result-layer {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  background: rgba(2, 4, 8, 0.66);
  backdrop-filter: blur(10px);
}

.modal-layer.is-active,
.result-layer.is-active {
  display: grid;
}

.modal-layer {
  animation: fade-in 0.28s ease both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  position: relative;
  width: min(390px, calc(100vw - 40px));
  padding: 30px 32px 24px;
  border: 1px solid rgba(205, 222, 230, 0.19);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(67, 132, 184, 0.12), transparent 50%),
    rgba(6, 11, 19, 0.91);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.018) inset;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: modal-in 0.42s var(--ease-out) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-kicker {
  margin: 0 0 9px;
  color: rgba(206, 189, 153, 0.62);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.24em;
}

.pause-card h2 {
  margin: 0;
  color: #f0ebdf;
  font-family: var(--font-cjk);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0.13em;
}

.modal-copy {
  margin: 11px 0 25px;
  color: rgba(180, 192, 193, 0.52);
  font-family: var(--font-cjk);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.primary-btn,
.ghost-btn {
  position: relative;
  min-height: 45px;
  padding: 0 17px;
  overflow: hidden;
  border: 1px solid rgba(226, 214, 184, 0.35);
  background: rgba(226, 210, 174, 0.08);
  color: #f0e9d7;
  font-family: var(--font-cjk);
  font-size: 13px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.primary-btn {
  border-color: rgba(156, 225, 245, 0.46);
  background:
    linear-gradient(100deg, rgba(30, 85, 135, 0.34), rgba(12, 38, 68, 0.3));
}

.primary-btn:hover {
  border-color: rgba(195, 250, 255, 0.82);
  background:
    linear-gradient(100deg, rgba(41, 132, 195, 0.42), rgba(17, 61, 106, 0.38));
  color: #fff;
}

.ghost-btn {
  border-color: rgba(200, 215, 222, 0.13);
  background: transparent;
  color: rgba(202, 211, 210, 0.61);
}

.ghost-btn:hover {
  border-color: rgba(205, 231, 237, 0.34);
  color: rgba(238, 242, 234, 0.94);
  background: rgba(196, 217, 220, 0.04);
}

.modal-hint {
  margin: 17px 0 0;
  color: rgba(155, 169, 170, 0.34);
  font-family: var(--font-mono);
  font-size: 7px;
  text-align: center;
}

/* result ---------------------------------------------------------------- */
.result-layer {
  z-index: 70;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(26, 67, 110, 0.26), transparent 58%),
    rgba(2, 4, 8, 0.84);
  backdrop-filter: blur(12px);
}

.result-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160vmax;
  height: 160vmax;
  opacity: 0.33;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 2deg, rgba(151, 205, 232, 0.12) 2deg 2.4deg),
    radial-gradient(circle, rgba(48, 118, 176, 0.21), transparent 43%);
  transform: translate(-50%, -50%);
  animation: slow-spin 130s linear infinite;
  pointer-events: none;
}

.result-layer.is-defeat .result-rays {
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 2deg, rgba(235, 131, 104, 0.12) 2deg 2.4deg),
    radial-gradient(circle, rgba(142, 35, 38, 0.2), transparent 43%);
}

.result-card {
  position: relative;
  z-index: 2;
  width: min(620px, calc(100vw - 36px));
  padding: 28px clamp(24px, 4vw, 46px) 25px;
  border: 1px solid rgba(216, 228, 225, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 40%),
    rgba(5, 10, 17, 0.88);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  text-align: center;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  animation: result-in 0.65s var(--ease-out) both;
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.result-kicker {
  margin: 0;
  color: rgba(199, 218, 222, 0.4);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

.result-en {
  margin: 8px 0 0;
  color: rgba(211, 189, 148, 0.55);
  font-family: var(--font-cjk);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}

.result-card h2 {
  margin: 9px 0 3px;
  color: #f5eddf;
  font-family: var(--font-cjk);
  font-size: clamp(58px, 7vw, 88px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-shadow:
    0 0 20px rgba(203, 242, 255, 0.12),
    0 0 90px rgba(57, 135, 220, 0.15);
}

.result-layer.is-victory .result-card h2 {
  color: #e9f8f5;
  text-shadow:
    0 0 18px rgba(172, 245, 255, 0.22),
    0 0 90px rgba(53, 167, 255, 0.28);
}

.result-layer.is-defeat .result-card h2 {
  color: #f7ddd2;
  text-shadow:
    0 0 18px rgba(255, 141, 108, 0.19),
    0 0 90px rgba(206, 35, 31, 0.22);
}

.result-sub {
  margin: 0;
  color: rgba(189, 199, 195, 0.55);
  font-family: var(--font-cjk);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.result-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 14px;
}

.result-divider i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 218, 210, 0.14));
}

.result-divider i:last-child {
  transform: scaleX(-1);
}

.result-divider span {
  color: rgba(193, 177, 143, 0.45);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(197, 214, 216, 0.08);
  border-bottom: 1px solid rgba(197, 214, 216, 0.08);
}

.result-stats div {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  padding: 13px 7px 12px;
  border-right: 1px solid rgba(197, 214, 216, 0.07);
}

.result-stats div:last-child {
  border-right: 0;
}

.result-stats small {
  color: rgba(161, 177, 179, 0.4);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.result-stats b {
  color: rgba(240, 235, 222, 0.88);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.result-actions .primary-btn,
.result-actions .ghost-btn {
  min-height: 43px;
  font-size: 12px;
}

.result-quote {
  margin: 15px 0 0;
  color: rgba(153, 172, 173, 0.36);
  font-family: var(--font-cjk);
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-height: 790px) and (min-width: 981px) {
  .topbar { padding-top: 14px; padding-bottom: 4px; }
  .menu-main { padding-top: 2px; padding-bottom: 5px; }
  .eyebrow { margin-bottom: 8px; }
  .game-title { font-size: clamp(61px, 6.7vw, 90px); }
  .game-title-en { margin-top: 14px; }
  .title-rule { margin-top: 11px; }
  .center-vs { margin: 14px 0 10px; }
  .start-btn { min-height: 76px; width: min(292px, 84%); }
  .start-btn-copy b { font-size: 21px; }
  .start-hint { margin-top: 8px; }
  .menu-quick-controls { margin-top: 11px; }
  .fighter-card { max-height: min(530px, calc(100dvh - 125px)); padding: 14px 16px; }
  .orb-display { height: clamp(128px, 16vh, 158px); }
  .menu-orb { width: clamp(96px, 9.7vw, 120px); }
  .fighter-copy h2 { font-size: 30px; }
  .fighter-title { margin-top: 5px; font-size: 10px; }
  .fighter-desc { margin-top: 6px; font-size: 9px; line-height: 1.55; }
  .skill-preview { margin-top: 9px; padding-top: 8px; gap: 4px; }
  .mini-seal { width: 23px; height: 23px; font-size: 10px; }
  .skill-preview b { font-size: 9px; }
  .skill-preview small { font-size: 6px; }
  .menu-footer { padding-top: 6px; padding-bottom: 9px; }
}

@media (max-width: 1180px) {
  .menu-main {
    grid-template-columns: minmax(205px, 264px) minmax(320px, 1fr) minmax(205px, 264px);
    gap: 16px;
  }

  .roster-card {
    height: 48px;
    gap: 4px;
    padding: 4px;
  }

  .roster-orb {
    width: 24px;
    height: 24px;
  }

  .roster-orb i {
    width: 10px;
    height: 10px;
  }

  .roster-meta b {
    font-size: 8.5px;
  }

  .roster-meta small {
    font-size: 6px;
  }

  .setup-hint {
    font-size: 6px;
  }
  .fighter-desc { display: none; }
  .menu-orb { width: clamp(96px, 10vw, 122px); }
  .orb-display { height: 145px; }
  .skill-preview { grid-template-columns: 1fr; gap: 2px; }
  .fighter-card--red .skill-preview li { flex-direction: row-reverse; }
  .skill-preview li { padding: 1px; }
  .skill-preview small { font-size: 6px; }
  .fighter-card { padding: 14px 17px; }
  .fighter-title { font-size: 10px; }
  .menu-quick-controls { max-width: 370px; gap: 6px 11px; }
  .game-title { font-size: clamp(58px, 6.6vw, 82px); }
}

@media (max-width: 981px) {
  .menu-screen { overflow-y: auto; overflow-x: hidden; }
  .topbar { padding-top: 13px; padding-bottom: 7px; }
  .brand-seal { width: 31px; height: 31px; font-size: 17px; }
  .brand-copy strong { font-size: 12px; }
  .topbar-note { display: none; }
  .menu-main {
    flex: 1 0 auto;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 16px;
  }
  .menu-center {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 9px 0 16px;
  }
  .eyebrow { margin-bottom: 8px; }
  .game-title { flex-direction: row; gap: 12px; font-size: clamp(49px, 8vw, 72px); line-height: 1; }
  .title-row { gap: 0.03em; }
  .title-row--lower { margin: 0; }
  .title-stamp { right: 12%; bottom: -9%; width: 25px; height: 25px; font-size: 10px; }
  .game-title-en { margin-top: 13px; font-size: 7px; }
  .title-rule { display: none; }
  .center-vs { display: none; }
  .start-btn { width: min(290px, 78%); min-height: 67px; margin-top: 15px; }
  .start-btn-copy { gap: 5px; }
  .start-btn-copy b { font-size: 20px; }
  .start-hint { margin-top: 7px; }
  .menu-quick-controls { margin-top: 10px; }
  .fighter-card {
    max-height: none;
    min-height: 220px;
  }
  .orb-display { height: 126px; }
  .fighter-copy h2 { font-size: 25px; }
  .fighter-title { font-size: 9px; }
  .skill-preview { display: none; }
  .orb-ring--two { display: none; }
  .orb-ring--one { width: 150px; }
  .card-index { font-size: 55px; }
  .fighter-card-head { align-items: center; }
  .menu-footer { padding-top: 6px; padding-bottom: 9px; font-size: 6px; }
  .menu-footer p:last-child { display: none; }
  .orb-code { display: none; }
}

@media (max-width: 680px) {
  .page-vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45)); }
  .menu-main { display: flex; flex-direction: column; justify-content: center; padding-left: 13px; padding-right: 13px; gap: 9px; }
  .menu-center { order: 0; padding: 4px 0 8px; }
  .game-title { font-size: 47px; gap: 8px; }
  .eyebrow { font-size: 6px; margin-bottom: 7px; }
  .game-title-en { margin-top: 9px; font-size: 6px; letter-spacing: 0.3em; }
  .start-btn { min-height: 59px; width: min(260px, 84%); margin-top: 12px; }
  .start-btn-copy b { font-size: 18px; }
  .start-btn-copy small { font-size: 6px; }
  .start-hint { margin-top: 6px; }
  .start-hint kbd { display: none; }
  .menu-quick-controls { display: none; }
  .fighter-card { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 4px 8px; min-height: 0; padding: 10px 13px; width: 100%; }
  .fighter-card--blue { order: 1; }
  .fighter-card--red { order: 2; text-align: left; }
  .fighter-card--red .fighter-card-head { flex-direction: row; }
  .fighter-card--red .fighter-copy { text-align: left; }
  .fighter-card--red .card-index { left: auto; right: 12px; }
  .fighter-card-head { grid-column: 1 / -1; }
  .orb-display { grid-column: 1; grid-row: 2 / span 2; height: 94px; margin: 0; }
  .fighter-copy { grid-column: 2; grid-row: 2; }
  .fighter-copy h2 { font-size: 23px; }
  .fighter-kicker { display: none; }
  .fighter-title { font-size: 8px; margin-top: 4px; }
  .fighter-card .orb-ring { display: none; }
  .menu-orb { width: 72px; }
  .gojo-hair, .sukuna-hair { top: -9%; }
  .skill-preview { display: flex; grid-column: 2; grid-row: 3; flex-wrap: wrap; margin: 3px 0 0; padding: 6px 0 0; gap: 2px 7px; border-top-color: rgba(220, 232, 244, 0.06); }
  .fighter-card--red .skill-preview { flex-direction: row; text-align: left; justify-content: flex-start; }
  .skill-preview li { flex: 0 0 auto; padding: 0; }
  .fighter-card--red .skill-preview li { flex-direction: row; }
  .mini-seal { display: none; }
  .skill-preview li > span:last-child { display: block; }
  .skill-preview b { font-size: 8px; color: rgba(219, 227, 224, 0.55); }
  .skill-preview small { display: none; }
  .topbar { padding-left: 15px; padding-right: 15px; }
  .topbar-right { gap: 10px; }
  .sound-btn span { display: none; }
  .text-btn.sound-btn { padding: 5px; }
  .menu-footer { padding-left: 15px; padding-right: 15px; }
  .menu-footer p:first-child { font-size: 5.5px; letter-spacing: 0.05em; }
  .card-index { display: none; }
  .grade-tag { font-size: 8px; padding: 3px 6px; }
  .menu-rings { width: 160vw; opacity: 0.26; }
  .mobile-brief {
    order: 3;
    display: block;
    width: 100%;
    padding: 15px 16px 13px;
    border: 1px solid rgba(197, 218, 226, 0.09);
    background:
      linear-gradient(120deg, rgba(23, 55, 83, 0.16), transparent 50%),
      rgba(6, 11, 19, 0.42);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  }
  .mobile-brief-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(194, 216, 222, 0.08);
  }
  .mobile-brief-head span {
    color: rgba(199, 183, 147, 0.48);
    font-family: var(--font-mono);
    font-size: 6px;
    letter-spacing: 0.22em;
  }
  .mobile-brief-head b {
    color: rgba(222, 228, 219, 0.66);
    font-family: var(--font-cjk);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
  }
  .mobile-brief-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    margin-top: 11px;
  }
  .mobile-brief-grid p {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    margin: 0;
  }
  .mobile-brief-grid b {
    color: rgba(139, 225, 255, 0.62);
    font-family: var(--font-cjk);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.08em;
  }
  .mobile-brief-grid p:nth-child(2) b { color: rgba(192, 159, 255, 0.64); }
  .mobile-brief-grid p:nth-child(3) b { color: rgba(135, 249, 180, 0.6); }
  .mobile-brief-grid p:nth-child(4) b { color: rgba(236, 222, 190, 0.65); }
  .mobile-brief-grid span {
    overflow: hidden;
    color: rgba(166, 181, 183, 0.44);
    font-family: var(--font-cjk);
    font-size: 7px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-brief-note {
    margin: 12px 0 0;
    color: rgba(160, 173, 171, 0.31);
    font-family: var(--font-cjk);
    font-size: 7px;
    line-height: 1.7;
    letter-spacing: 0.06em;
  }
}

/* battle responsive ----------------------------------------------------- */
@media (max-width: 1050px) {
  .battle-hud { left: 17px; right: 17px; gap: 12px; }
  .dock-heading { display: none; }
  .skill-dock { gap: 9px; padding: 8px; }
  .domain-meter .domain-label { display: none; }
  .domain-track { width: min(130px, 48%); }
  .skill-card { width: clamp(64px, 8.4vw, 77px); }
  .skill-card--basic { width: clamp(54px, 7vw, 65px); }
  .skill-card--domain { width: clamp(72px, 9vw, 84px); }
}

@media (max-width: 760px) {
  .battle-hud {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    gap: 7px;
  }
  .hud-side { padding-top: 1px; }
  .side-pill { display: inline-flex; padding: 2px 4px; gap: 3px; font-size: 6px; letter-spacing: 0.06em; }
  .side-pill i { width: 3px; height: 3px; }
  .combatant-id { margin-bottom: 5px; gap: 5px; }
  .hud-name { font-size: 13px; letter-spacing: 0.06em; }
  .hp-readout { font-size: 7px; }
  .hp-track { height: 9px; transform: skewX(-10deg); }
  .hud-side--red .hp-track { transform: skewX(10deg); }
  .domain-meter { margin-top: 6px; gap: 4px; }
  .domain-track { width: 70%; height: 3px; }
  .domain-pct { width: 22px; font-size: 6px; }
  .domain-ready { font-size: 5px; }
  .status-line { margin-top: 5px; font-size: 7px; min-height: 12px; }
  .match-clock { min-width: 60px; padding: 1px 3px 5px; }
  .clock-kicker { font-size: 5px; letter-spacing: 0.12em; }
  #matchTimer { font-size: 24px; margin: 3px 0 3px; }
  .clock-round { font-size: 4.5px; letter-spacing: 0.08em; }
  .utility-actions { top: auto; bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px)); right: 11px; gap: 5px; }
  .icon-btn { width: 31px; height: 31px; }
  .icon-btn svg { width: 12px; height: 12px; }
  .skill-dock {
    bottom: max(7px, env(safe-area-inset-bottom));
    gap: 5px;
    width: calc(100vw - 14px);
    padding: 6px;
  }
  .skill-list { width: 100%; gap: 4px; }
  .skill-card, .skill-card--basic, .skill-card--domain {
    width: auto;
    flex: 1 1 0;
    height: 62px;
    padding: 5px 2px 4px;
  }
  .skill-glyph { width: 24px; height: 24px; font-size: 12px; }
  .skill-card--basic .skill-glyph { width: 19px; height: 19px; font-size: 9px; }
  .skill-hotkey { top: 2px; left: 3px; font-size: 6px; }
  .skill-name b { font-size: 7px; }
  .skill-name small { display: none; }
  .skill-cdtext { right: 3px; bottom: 14px; font-size: 8px; }
  .domain-charge { right: 3px; bottom: 2px; left: 3px; }
  .announce { top: 29%; width: 94vw; }
  .announce strong { font-size: 34px; letter-spacing: 0.1em; }
  .announce small { font-size: 6px; }
  .announce span { font-size: 8px; }
  .touch-controls { display: flex; bottom: max(118px, calc(env(safe-area-inset-bottom) + 105px)); left: 11px; }
  .joystick { width: 86px; height: 86px; }
  .joystick-stick { width: 32px; height: 32px; }
  .touch-hint { display: none; }
  .vs-inner { width: 94vw; gap: 7px; grid-template-columns: 1fr auto 1fr; }
  .vs-fighter strong { font-size: 25px; letter-spacing: 0.02em; }
  .vs-side { font-size: 6px; letter-spacing: 0.1em; }
  .vs-fighter small { display: none; }
  .vs-emblem { width: 66px; }
  .vs-emblem-ring { width: 84px; }
  .vs-emblem b { font-size: 18px; }
  .vs-emblem small { font-size: 4px; }
  .intro-countdown { bottom: 12%; font-size: 66px; }
  .modal-card { padding: 23px 22px 19px; }
  .pause-card h2 { font-size: 30px; }
  .result-card { padding: 22px 18px 19px; width: calc(100vw - 20px); }
  .result-card h2 { font-size: 60px; }
  .result-sub { font-size: 9px; }
  .result-stats { grid-template-columns: 1fr 1fr; }
  .result-stats div:nth-child(2) { border-right: 0; }
  .result-stats div:nth-child(-n+2) { border-bottom: 1px solid rgba(197, 214, 216, 0.07); }
  .result-stats b { font-size: 13px; }
  .result-actions { grid-template-columns: 1fr; }
  .result-actions .primary-btn, .result-actions .ghost-btn { min-height: 39px; }
  .result-divider { margin: 14px 0 11px; }
  .result-quote { margin-top: 11px; font-size: 8px; }
}

@media (max-height: 600px) {
  .menu-screen { overflow-y: auto; }
  .topbar { padding-top: 8px; }
  .menu-footer { display: none; }
  .menu-main { padding-top: 0; padding-bottom: 8px; }
  .menu-center { padding-top: 2px; }
  .game-title { font-size: 45px; }
  .start-btn { min-height: 53px; margin-top: 9px; }
  .start-hint { margin-top: 5px; }
  .menu-quick-controls { display: none; }
  .fighter-card { max-height: none; }
  .orb-display { height: 105px; }
  .menu-orb { width: 79px; }
  .skill-preview { display: none; }
  .eyebrow { display: none; }
  .center-vs { display: none; }
  .battle-hud { top: 8px; }
  .utility-actions { top: auto; bottom: 69px; }
  .skill-dock { bottom: 6px; padding: 5px; }
  .skill-card { height: 55px; }
  .skill-glyph { width: 23px; height: 23px; }
  .skill-name { display: none; }
  .skill-cdtext { bottom: 5px; }
  .touch-controls { bottom: 95px; }
}

@media (pointer: coarse) {
  .touch-controls { display: flex; }
  #gameCanvas { cursor: default; }
  .start-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .page-grain { animation: none; }
}

/* ==========================================================================
   FOUR-FIGHTER ROYALE ADDITIONS
   ========================================================================== */

/* ---- menu lineup builder ------------------------------------------------ */
.match-builder {
  width: min(610px, 100%);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(208, 218, 213, 0.09);
  text-align: left;
}

.setup-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.setup-label {
  flex: 0 0 auto;
  color: rgba(205, 196, 171, 0.62);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.count-select {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(197, 211, 214, 0.15);
  background: rgba(4, 8, 15, 0.6);
}

.count-btn {
  display: grid;
  width: 25px;
  height: 21px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(191, 201, 199, 0.52);
  font-family: var(--font-mono);
  font-size: 8px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.count-btn:hover {
  color: rgba(245, 239, 220, 0.9);
  border-color: rgba(211, 220, 207, 0.2);
}

.count-btn.is-active {
  border-color: rgba(226, 199, 139, 0.45);
  background: rgba(191, 154, 79, 0.14);
  color: #f8edd4;
  box-shadow: 0 0 12px rgba(214, 171, 87, 0.08) inset;
}

.count-btn--custom {
  width: auto;
  min-width: 42px;
  padding: 0 6px;
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.team-mode-btn {
  flex: 0 0 auto;
  height: 21px;
  padding: 0 6px;
  border: 1px solid rgba(197, 211, 214, 0.16);
  background: rgba(4, 8, 15, 0.55);
  color: rgba(191, 201, 199, 0.58);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.team-mode-btn:hover,
.team-mode-btn[data-mode="2"],
.team-mode-btn[data-mode="3"] {
  border-color: rgba(225, 203, 147, 0.36);
  background: rgba(191, 154, 79, 0.1);
  color: #f4e7c7;
}

.roster-card.has-team::after {
  content: attr(data-team-label);
  position: absolute;
  right: 3px;
  bottom: 2px;
  z-index: 2;
  color: var(--team-color);
  font-family: var(--font-cjk);
  font-size: 5.5px;
  line-height: 1;
  text-shadow: 0 0 4px var(--team-color);
}

.hud-team-badge {
  display: grid;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--team-color);
  border-radius: 50%;
  color: var(--team-color);
  font-family: var(--font-cjk);
  font-size: 6px;
  line-height: 1;
}

.intro-team-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--team-color);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.count-btn:focus-visible,
.roster-card:focus-visible {
  outline: 1px solid rgba(238, 215, 166, 0.8);
  outline-offset: 2px;
}

.lineup-count {
  margin-left: auto;
  flex: 0 0 auto;
  color: rgba(177, 190, 189, 0.45);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.roster-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
}

.roster-card {
  position: relative;
  display: flex;
  flex: 0 0 calc(20% - 4px);
  min-width: 0;
  height: 38px;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  overflow: hidden;
  border: 1px solid rgba(190, 207, 211, 0.13);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 48%),
    rgba(5, 10, 17, 0.63);
  color: rgba(230, 234, 227, 0.9);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color 0.24s ease, opacity 0.24s ease, background 0.24s ease, transform 0.24s var(--ease-out);
}

.roster-card[data-character="gojo"] {
  --roster-main: #2b7fff;
  --roster-core: #8cf6ff;
  --roster-inner: #c7ffff;
  --roster-rgb: 86, 180, 255;
}
.roster-card[data-character="sukuna"] {
  --roster-main: #d92a36;
  --roster-core: #ff9b60;
  --roster-inner: #ffe5c5;
  --roster-rgb: 255, 101, 75;
}
.roster-card[data-character="minato"] {
  --roster-main: #e6ad2b;
  --roster-core: #fff3a6;
  --roster-inner: #8ff5ff;
  --roster-rgb: 255, 205, 73;
}
.roster-card[data-character="sasuke"] {
  --roster-main: #7b4bf0;
  --roster-core: #d6b7ff;
  --roster-inner: #ff7099;
  --roster-rgb: 168, 113, 255;
}
.roster-card[data-character="yuta"] {
  --roster-main: #aab9d2;
  --roster-core: #ffffff;
  --roster-inner: #ffd4dc;
  --roster-rgb: 219, 232, 250;
}
.roster-card[data-character="yuji"] {
  --roster-main: #e84470;
  --roster-core: #ffe0e8;
  --roster-inner: #fff4f7;
  --roster-rgb: 255, 111, 148;
}
.roster-card[data-character="tiger"] {
  --roster-main: #24a77f;
  --roster-core: #fff2a8;
  --roster-inner: #fff9d6;
  --roster-rgb: 94, 232, 181;
}
.roster-card[data-character="tigerking"] {
  --roster-main: #c34a62;
  --roster-core: #ffe9f0;
  --roster-inner: #fff7f9;
  --roster-rgb: 255, 116, 145;
}
.roster-card[data-character="watermelon"] {
  --roster-main: #1f9d55;
  --roster-core: #ffd8df;
  --roster-inner: #fff2f4;
  --roster-rgb: 255, 112, 134;
}

.roster-card.is-locked {
  opacity: 0.55;
  filter: saturate(0.65);
}

.roster-card.is-locked::before {
  content: "LOCK";
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 2;
  padding: 1px 3px;
  border: 1px solid rgba(255, 211, 90, 0.45);
  color: #ffd36b;
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.05em;
}

.roster-card.is-locked .roster-meta em {
  display: none;
}

.roster-orb--watermelon::before {
  top: -2px;
  left: 0;
  width: 30px;
  height: 16px;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(160deg, #7be495, #1d8a4b 55%, #0b2d18);
}
.roster-orb--watermelon::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 14px;
  height: 11px;
  border-radius: 45%;
  background: radial-gradient(circle at 38% 34%, #fff4f5 0 16%, #ff526d 40%, #a70d2b 100%);
  box-shadow: 0 0 7px rgba(255, 82, 108, 0.5);
}

.author-card {
  width: min(390px, 92vw);
}

.team-card {
  width: min(620px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

.team-mode-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}

.team-mode-tabs button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid rgba(194, 209, 211, 0.16);
  background: rgba(4, 8, 14, 0.6);
  color: rgba(210, 218, 209, 0.7);
  font-family: var(--font-cjk);
  font-size: 10px;
  cursor: pointer;
}

.team-mode-tabs button.is-active {
  border-color: rgba(226, 199, 139, 0.5);
  color: #f5e8c8;
  background: rgba(54, 43, 25, 0.35);
}

.team-assign-list {
  display: grid;
  gap: 5px;
  max-height: 300px;
  overflow-y: auto;
}

.team-assign-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(194, 209, 211, 0.1);
  background: rgba(3, 7, 12, 0.55);
}

.team-assign-row b {
  flex: 1;
  color: rgba(240, 234, 218, 0.86);
  font-family: var(--font-cjk);
  font-size: 10px;
  font-weight: 500;
}

.team-assign-row button {
  min-width: 38px;
  padding: 3px 5px;
  border: 1px solid rgba(194, 209, 211, 0.14);
  background: rgba(4, 8, 14, 0.7);
  color: rgba(190, 200, 192, 0.65);
  font-family: var(--font-cjk);
  font-size: 8px;
  cursor: pointer;
}

.team-assign-row button.is-active {
  border-color: var(--team-color, #ffd36b);
  color: #fff4dc;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--team-color, #ffd36b) 25%, transparent);
}

.team-assign-row button[data-team="none"].is-active {
  border-color: rgba(194, 209, 211, 0.42);
  color: #e5e1d4;
}

.author-password {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border: 1px solid rgba(194, 209, 211, 0.22);
  background: rgba(2, 5, 9, 0.82);
  color: #ffe4ea;
  font-family: var(--font-cjk);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  outline: none;
}
.roster-card[data-character="naruto"] {
  --roster-main: #e98a2c;
  --roster-core: #ffe6a6;
  --roster-inner: #fff7d8;
  --roster-rgb: 255, 166, 70;
}
.roster-card[data-character="megumi"] {
  --roster-main: #44518e;
  --roster-core: #cfd8ff;
  --roster-inner: #8997ff;
  --roster-rgb: 112, 128, 230;
}
.roster-card[data-character="tendo"] {
  --roster-main: #77758f;
  --roster-core: #ece9ff;
  --roster-inner: #b7afff;
  --roster-rgb: 185, 179, 232;
}
.roster-card[data-character="dio"] {
  --roster-main: #c79a39;
  --roster-core: #ffe7a2;
  --roster-inner: #ffb3b9;
  --roster-rgb: 255, 205, 105;
}
.roster-card[data-character="obito"] {
  --roster-main: #b04a2b;
  --roster-core: #ffc37c;
  --roster-inner: #ff8a52;
  --roster-rgb: 242, 122, 78;
}
.roster-card[data-character="warobito"] {
  --roster-main: #c85a2b;
  --roster-core: #ffd09a;
  --roster-inner: #ff8a4d;
  --roster-rgb: 238, 124, 78;
}
.roster-card[data-character="whitemask"] {
  --roster-main: #d8dce8;
  --roster-core: #ffffff;
  --roster-inner: #d6c4ff;
  --roster-rgb: 228, 223, 245;
}
.roster-card[data-character="shinjuku"] {
  --roster-main: #2b7fff;
  --roster-core: #d8ffff;
  --roster-inner: #ffffff;
  --roster-rgb: 92, 180, 255;
}
.roster-card[data-character="halfgojo"] {
  --roster-main: #59a6d9;
  --roster-core: #f4ffff;
  --roster-inner: #9beaff;
  --roster-rgb: 126, 210, 255;
}
.roster-card[data-character="blobsukuna"] {
  --roster-main: #a51e2d;
  --roster-core: #ff9b74;
  --roster-inner: #ff5b4d;
  --roster-rgb: 255, 88, 75;
}

.roster-card.is-selected {
  border-color: rgba(var(--roster-rgb), 0.46);
  background:
    linear-gradient(135deg, rgba(var(--roster-rgb), 0.12), transparent 55%),
    rgba(7, 13, 22, 0.8);
  box-shadow:
    0 0 0 1px rgba(var(--roster-rgb), 0.06) inset,
    0 7px 18px rgba(0, 0, 0, 0.2);
}

.roster-card:not(.is-selected) {
  opacity: 0.42;
  filter: saturate(0.55);
}

.roster-card:hover {
  border-color: rgba(var(--roster-rgb), 0.7);
  transform: translateY(-1px);
}

.roster-card.is-nudge {
  animation: roster-nudge 0.36s ease;
}

@keyframes roster-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2px); }
  65% { transform: translateX(2px); }
}

.roster-orb {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(var(--roster-rgb), 0.48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, var(--roster-core), var(--roster-main) 43%, #070912 76%, #03050a 100%);
  box-shadow:
    0 0 11px rgba(var(--roster-rgb), 0.3),
    inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.roster-orb::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 3px;
  width: 20px;
  height: 10px;
  border-radius: 50% 50% 30% 30%;
  background: rgba(244, 246, 239, 0.32);
  filter: blur(0.2px);
  transform: rotate(-11deg);
}

.roster-orb i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff, var(--roster-inner) 40%, transparent 77%);
  box-shadow: 0 0 8px var(--roster-inner);
  transform: translate(-50%, -50%);
}

.roster-orb--minato::before {
  top: -3px;
  left: 1px;
  width: 24px;
  height: 15px;
  border-radius: 40% 50% 20% 30%;
  background: linear-gradient(160deg, #fffbd1, #eab833 60%, #a96c08);
  clip-path: polygon(0 100%, 10% 39%, 27% 67%, 39% 14%, 53% 62%, 68% 8%, 78% 65%, 94% 30%, 100% 100%);
}

.roster-orb--minato::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 4px;
  width: 18px;
  height: 2px;
  background: rgba(151, 236, 255, 0.7);
  transform: rotate(-8deg);
}

.roster-orb--sasuke::before {
  top: -3px;
  left: 0;
  width: 26px;
  height: 15px;
  border-radius: 45%;
  background: linear-gradient(160deg, #4a3d68, #10101d 65%, #2a0c40);
  clip-path: polygon(0 100%, 8% 32%, 25% 68%, 35% 8%, 51% 61%, 65% 18%, 78% 64%, 98% 26%, 100% 100%);
}

.roster-orb--sasuke::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 8px;
  width: 4px;
  height: 2px;
  border-radius: 50%;
  background: #ff5575;
  box-shadow: 7px 0 0 #ff5575, 0 0 5px rgba(255, 74, 113, 0.7);
}

.roster-orb--sukuna::before {
  top: -1px;
  left: 0;
  width: 26px;
  height: 9px;
  border-radius: 0 0 45% 45%;
  background: rgba(12, 1, 4, 0.75);
}

.roster-orb--yuta::before {
  top: -3px;
  left: 1px;
  width: 25px;
  height: 14px;
  border-radius: 45%;
  background: linear-gradient(160deg, #eef2f8, #5b6271 32%, #10121a 70%, #07080c);
  clip-path: polygon(0 100%, 8% 35%, 24% 70%, 34% 9%, 51% 63%, 66% 17%, 80% 66%, 98% 28%, 100% 100%);
}

.roster-orb--yuta::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 16px;
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffffff, #cfdaea 58%, #7f8da4);
  box-shadow: 0 0 5px rgba(236, 245, 255, 0.8);
  transform: rotate(42deg);
}

.roster-orb--yuji::before {
  top: -4px;
  left: -2px;
  width: 30px;
  height: 15px;
  border-radius: 55% 45% 42% 38%;
  background: linear-gradient(118deg, #ffd6e1, #ed5f86 44%, #25101a 86%);
  transform: rotate(-13deg);
}

.roster-orb--yuji::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #13060b;
  box-shadow: 9px 1px 0 #13060b, 4px 7px 0 rgba(16, 4, 10, 0.9);
}

.roster-orb--tiger::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 7px;
  height: 8px;
  background: #f5e6ab;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 14px 0 0 #f5e6ab;
}

.roster-orb--tiger::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 18px;
  height: 9px;
  border-radius: 45% 45% 40% 40%;
  background:
    repeating-linear-gradient(105deg, transparent 0 4px, rgba(10, 17, 14, 0.78) 4px 6px);
}

.roster-orb--tigerking::before {
  top: -3px;
  left: -2px;
  width: 30px;
  height: 16px;
  border-radius: 50% 50% 30% 30%;
  background: #0b0609;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14);
}
.roster-orb--tigerking::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 19px;
  height: 10px;
  background: linear-gradient(115deg, #fff5f7, #f0b9c8 45%, #9d2340);
  clip-path: polygon(0 100%, 6% 24%, 28% 74%, 44% 0, 62% 58%, 82% 18%, 100% 70%, 100% 100%);
  box-shadow: 0 0 5px rgba(255, 112, 142, 0.35);
}

.roster-orb--naruto::before {
  top: -4px;
  left: 0;
  width: 26px;
  height: 13px;
  background: #e9be48;
  clip-path: polygon(0 100%, 6% 24%, 25% 72%, 38% 4%, 55% 62%, 74% 12%, 88% 68%, 100% 38%, 100% 100%);
}
.roster-orb--naruto::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -1px;
  width: 28px;
  height: 4px;
  border-top: 2px solid #1b1712;
  border-bottom: 1px solid rgba(218, 224, 232, 0.8);
  transform: rotate(-4deg);
}

.roster-orb--megumi::before {
  top: -3px;
  left: 0;
  width: 26px;
  height: 13px;
  background: #10121c;
  clip-path: polygon(0 100%, 12% 16%, 30% 68%, 48% 0, 66% 54%, 84% 18%, 100% 100%);
}
.roster-orb--megumi::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 7px;
  width: 12px;
  height: 4px;
  border-top: 2px solid rgba(138, 156, 255, 0.9);
  border-radius: 50%;
}

.roster-orb--tendo::before {
  inset: 3px;
  border: 1px solid rgba(238, 235, 255, 0.75);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(160, 152, 210, 0.24) inset,
    0 0 0 6px rgba(238, 235, 255, 0.35) inset;
}
.roster-orb--tendo::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  width: 2px;
  height: 28px;
  background: rgba(24, 22, 34, 0.9);
  transform: rotate(38deg);
}

.roster-orb--dio::before {
  top: -4px;
  left: 0;
  width: 27px;
  height: 13px;
  border-radius: 50% 50% 30% 40%;
  background: linear-gradient(120deg, #fff0b8, #e5c255 50%, #78551b);
  transform: rotate(-10deg);
}
.roster-orb--dio::after {
  content: "♥";
  position: absolute;
  top: 12px;
  left: 8px;
  color: rgba(255, 209, 94, 0.9);
  font-size: 8px;
  text-shadow: 0 0 4px rgba(255, 120, 90, 0.7);
}

.roster-orb--obito::before {
  inset: 3px;
  border: 2px solid rgba(255, 126, 65, 0.9);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 62% 52%, 88% 100%, 0 100%);
}
.roster-orb--obito::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb15e;
  box-shadow: 0 0 0 2px rgba(15, 5, 5, 0.9), 0 0 6px rgba(255, 88, 51, 0.8);
}

.roster-orb--warobito::before {
  inset: 3px;
  border: 2px solid rgba(255, 139, 75, 0.95);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 58% 50%, 90% 100%, 0 100%);
}
.roster-orb--warobito::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5d43;
  box-shadow: 0 0 0 2px rgba(12, 4, 3, 0.95), 0 0 5px rgba(255, 85, 58, 0.8);
}

.roster-orb--whitemask::before {
  inset: 3px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: rgba(250, 249, 255, 0.12);
}
.roster-orb--whitemask::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b68cff;
  box-shadow: 0 0 0 2px rgba(8, 6, 12, 0.9), 0 0 6px rgba(182, 140, 255, 0.8);
}

.roster-orb--shinjuku::before {
  top: -4px;
  left: 0;
  width: 26px;
  height: 13px;
  background: #f4f8ff;
  clip-path: polygon(0 100%, 8% 26%, 25% 70%, 40% 2%, 58% 64%, 76% 18%, 100% 100%);
}
.roster-orb--shinjuku::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 1px;
  width: 28px;
  height: 4px;
  background: #070b12;
  transform: rotate(-3deg);
}

.roster-orb--halfgojo::before {
  top: -4px;
  left: 1px;
  width: 24px;
  height: 12px;
  background: #f4f8ff;
  clip-path: polygon(0 100%, 12% 24%, 38% 72%, 58% 0, 84% 66%, 100% 44%, 100% 100%);
}
.roster-orb--halfgojo::after {
  content: "2.5";
  position: absolute;
  top: 7px;
  left: 4px;
  width: 20px;
  height: 9px;
  border-top: 2px solid #070b12;
  border-bottom: 2px solid #070b12;
  color: #b9f4ff;
  font: 600 5px/9px var(--font-mono);
  text-align: center;
}

.roster-orb--blobsukuna::before {
  top: -2px;
  left: -3px;
  width: 32px;
  height: 27px;
  border-radius: 42% 58% 62% 38%;
  background:
    radial-gradient(circle at 30% 40%, #ff5b4d 0 2px, transparent 3px),
    radial-gradient(circle at 68% 28%, #ff9b74 0 1.5px, transparent 2px),
    radial-gradient(circle at 63% 65%, #ff5b4d 0 2px, transparent 3px),
    #5e0a14;
}
.roster-orb--blobsukuna::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
  width: 14px;
  height: 4px;
  border-bottom: 2px solid rgba(255, 214, 189, 0.8);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.roster-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.roster-meta b {
  overflow: hidden;
  color: rgba(240, 240, 231, 0.92);
  font-family: var(--font-cjk);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-meta small {
  overflow: hidden;
  color: rgba(167, 180, 181, 0.48);
  font-family: var(--font-cjk);
  font-size: 6px;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-meta em {
  position: absolute;
  top: 3px;
  right: 4px;
  color: rgba(255, 214, 107, 0.82);
  font-family: var(--font-mono);
  font-size: 5px;
  font-style: normal;
  letter-spacing: 0.06em;
}

.roster-state {
  position: absolute;
  right: 5px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(189, 205, 205, 0.3);
  border-radius: 50%;
}

.roster-card.is-selected .roster-state {
  border-color: var(--roster-core);
  background: var(--roster-core);
  box-shadow: 0 0 7px var(--roster-core);
}

.new-kit-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 12px;
  margin-top: 6px;
  color: rgba(194, 203, 199, 0.58);
  font-family: var(--font-cjk);
  font-size: 7.2px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.new-kit-line span {
  flex: 0 1 calc(31% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-kit-line span:nth-child(1) b {
  color: rgba(255, 173, 115, 0.94);
}

.new-kit-line span:nth-child(2) b {
  color: rgba(242, 237, 255, 0.94);
}

.new-kit-line span:nth-child(3) b {
  color: rgba(143, 217, 255, 0.94);
}

.new-kit-line span:nth-child(4) b {
  color: rgba(190, 239, 255, 0.94);
}

.new-kit-line span:nth-child(5) b {
  color: rgba(255, 126, 106, 0.94);
}

.new-kit-line b {
  margin-right: 3px;
  font-weight: 500;
}

.setup-hint {
  margin: 5px 0 0;
  color: rgba(156, 170, 171, 0.34);
  font-family: var(--font-cjk);
  font-size: 6px;
  letter-spacing: 0.02em;
}

/* ---- battle roster HUD -------------------------------------------------- */
.brawl-hud {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 5px;
  grid-template-columns: none;
}

.brawl-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.brawl-mode,
.brawl-alive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(184, 199, 198, 0.48);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.brawl-mode i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff6052;
  box-shadow: 0 0 8px rgba(255, 82, 68, 0.8);
  animation: auto-live 1.6s ease-in-out infinite;
}

.brawl-alive {
  justify-self: end;
  color: rgba(214, 199, 164, 0.52);
}

.brawl-alive b {
  color: #f5e9cc;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.brawl-headline .match-clock {
  min-width: 154px;
  padding: 0;
  border-bottom: 0;
}

.brawl-headline .clock-kicker {
  font-size: 5px;
  letter-spacing: 0.24em;
}

.brawl-headline #matchTimer {
  margin: 1px 0 2px;
  font-size: clamp(23px, 2.2vw, 33px);
}

.brawl-headline .clock-round {
  font-size: 5px;
}

.roster-hud {
  display: grid;
  grid-template-columns: repeat(var(--fighter-count, 4), minmax(0, 1fr));
  gap: 6px;
}

.roster-hud.is-many {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

.roster-hud.is-many .hud-fighter {
  flex: 0 0 calc(12.5% - 3px);
  padding: 3px 4px 2px;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.roster-hud.is-many .hud-fighter-head {
  justify-content: center;
  gap: 0;
}

.roster-hud.is-many .hud-fighter-name {
  font-size: 7px;
  letter-spacing: 0;
  text-align: center;
}

.roster-hud.is-many .hud-fighter-mark,
.roster-hud.is-many .hud-hp-value,
.roster-hud.is-many .hud-fighter-status,
.roster-hud.is-many .hud-ultimate-label,
.roster-hud.is-many .hud-ultimate-ready,
.roster-hud.is-many .hud-team-badge {
  display: none;
}

.hud-fighter.has-team {
  border-top-color: var(--team-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--team-color) 18%, transparent) inset, 0 8px 20px rgba(0, 0, 0, 0.17);
}

.hud-fighter {
  position: relative;
  min-width: 0;
  padding: 6px 8px 5px;
  overflow: hidden;
  border: 1px solid rgba(var(--hud-rgb), 0.2);
  border-top-color: rgba(var(--hud-rgb), 0.48);
  background:
    linear-gradient(145deg, rgba(var(--hud-rgb), 0.07), transparent 55%),
    rgba(4, 8, 14, 0.7);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.17);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  backdrop-filter: blur(9px);
  transition: opacity 0.35s ease, filter 0.35s ease, border-color 0.25s ease;
}

.hud-fighter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 1px;
  background: var(--hud-core);
  box-shadow: 0 0 12px var(--hud-core);
  opacity: 0.72;
}

.hud-fighter-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.hud-fighter-mark {
  display: grid;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(var(--hud-rgb), 0.42);
  border-radius: 50%;
  background: rgba(var(--hud-rgb), 0.12);
  color: var(--hud-core);
  font-family: var(--font-cjk);
  font-size: 7px;
  line-height: 1;
  box-shadow: 0 0 7px rgba(var(--hud-rgb), 0.14) inset;
}

.hud-fighter-name {
  overflow: hidden;
  color: rgba(239, 238, 226, 0.92);
  font-family: var(--font-cjk);
  font-size: clamp(8px, 0.78vw, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-hp-value {
  margin-left: auto;
  color: rgba(221, 230, 224, 0.62);
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.63vw, 9px);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hud-fighter-hp {
  position: relative;
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
  background: rgba(2, 6, 12, 0.85);
  transform: skewX(-12deg);
  box-shadow: 0 0 0 1px rgba(190, 215, 223, 0.08) inset;
}

.hud-hp-ghost,
.hud-hp-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
}

.hud-hp-ghost {
  background: rgba(255, 235, 201, 0.3);
  transition: width 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: blur(1px);
}

.hud-hp-fill {
  background: linear-gradient(90deg, var(--hud-main), var(--hud-core));
  box-shadow: 0 0 10px rgba(var(--hud-rgb), 0.5);
  transition: width 0.16s ease-out;
}

.hud-hp-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.27), transparent 50%, rgba(0, 0, 0, 0.26));
}

.hud-fighter-hp.is-danger .hud-hp-fill {
  animation: hp-danger 1.15s ease-in-out infinite;
}

.hud-ultimate {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: rgba(165, 180, 182, 0.45);
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.hud-ultimate-label {
  flex: 0 0 auto;
  color: rgba(var(--hud-rgb), 0.72);
  font-family: var(--font-cjk);
  font-size: 6px;
}

.hud-ultimate-track {
  display: block;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: rgba(155, 183, 194, 0.12);
}

.hud-ultimate-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--hud-main), var(--hud-core));
  box-shadow: 0 0 6px var(--hud-core);
  transition: width 0.22s ease;
}

.hud-ultimate-ready {
  display: none;
  flex: 0 0 auto;
  color: var(--hud-core);
  font-size: 5px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 6px rgba(var(--hud-rgb), 0.8);
  animation: ready-glow 1.8s ease-in-out infinite;
}

.hud-ultimate-ready.is-visible {
  display: inline;
}

.hud-fighter.is-ultimate-ready {
  border-color: rgba(var(--hud-rgb), 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.17), 0 0 18px rgba(var(--hud-rgb), 0.1) inset;
}

.hud-fighter-status {
  height: 10px;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(var(--hud-rgb), 0.83);
  font-family: var(--font-cjk);
  font-size: 6.5px;
  line-height: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hud-status-chip {
  display: inline-block;
  margin-right: 5px;
}

.hud-status-chip::before {
  content: "◆";
  margin-right: 2px;
  font-size: 4px;
  vertical-align: 1px;
  opacity: 0.68;
}

.hud-out {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(2, 4, 8, 0.66);
  color: rgba(240, 109, 95, 0.9);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-shadow: 0 0 12px rgba(255, 78, 64, 0.4);
}

.hud-fighter.is-out {
  opacity: 0.46;
  filter: grayscale(0.72);
}

.hud-fighter.is-out .hud-out {
  display: grid;
}

.hud-fighter.is-domain-owner {
  box-shadow:
    0 0 0 1px rgba(var(--hud-rgb), 0.22) inset,
    0 0 22px rgba(var(--hud-rgb), 0.16);
}

/* ---- spectator footer --------------------------------------------------- */
.spectator-footer {
  position: absolute;
  z-index: 9;
  right: clamp(18px, 3vw, 48px);
  bottom: max(13px, calc(env(safe-area-inset-bottom) + 9px));
  left: clamp(18px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

.spectator-state {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(192, 210, 218, 0.1);
  background: rgba(4, 8, 15, 0.52);
  color: rgba(175, 190, 190, 0.46);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
}

.spectator-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: rgba(237, 218, 177, 0.66);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.spectator-live i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff5f52;
  box-shadow: 0 0 7px rgba(255, 82, 68, 0.75);
  animation: auto-live 1.6s ease-in-out infinite;
}

.spectator-divider {
  width: 1px;
  height: 8px;
  flex: 0 0 auto;
  background: rgba(198, 214, 215, 0.14);
}

#spectatorState {
  overflow: hidden;
  text-overflow: ellipsis;
}

.spectator-footer .utility-actions {
  position: static;
  flex: 0 0 auto;
  pointer-events: auto;
}

/* ---- royale intro ------------------------------------------------------- */
.rumble-intro {
  background: #03050a;
}

.rumble-aurora {
  position: absolute;
  inset: -20%;
  opacity: 0.7;
  background:
    radial-gradient(ellipse at 18% 26%, rgba(34, 129, 255, 0.24), transparent 38%),
    radial-gradient(ellipse at 82% 28%, rgba(208, 35, 42, 0.17), transparent 36%),
    radial-gradient(ellipse at 25% 82%, rgba(255, 193, 57, 0.15), transparent 34%),
    radial-gradient(ellipse at 78% 82%, rgba(134, 79, 255, 0.2), transparent 38%);
  filter: blur(16px);
  animation: rumble-aurora 9s ease-in-out infinite alternate;
}

@keyframes rumble-aurora {
  0% { transform: scale(1) rotate(-1deg); opacity: 0.52; }
  100% { transform: scale(1.08) rotate(1.5deg); opacity: 0.82; }
}

.rumble-inner {
  position: relative;
  z-index: 2;
  width: min(1100px, 92vw);
  margin-top: -4vh;
  text-align: center;
  animation: rumble-in 0.8s var(--ease-out) both;
}

@keyframes rumble-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.rumble-kicker {
  margin: 0;
  color: rgba(229, 204, 151, 0.66);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

.rumble-title {
  margin: 12px 0 0;
  color: #f4eddf;
  font-family: var(--font-cjk);
  font-size: clamp(58px, 8.4vw, 116px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-shadow:
    0 0 30px rgba(225, 237, 255, 0.12),
    0 0 90px rgba(146, 193, 255, 0.12);
}

.rumble-sub {
  margin: 17px 0 0;
  color: rgba(183, 197, 195, 0.45);
  font-family: var(--font-cjk);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.intro-roster {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}

.intro-contender {
  position: relative;
  display: flex;
  width: clamp(172px, 19vw, 236px);
  align-items: center;
  gap: 10px;
  padding: 13px 14px 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--intro-rgb), 0.27);
  background:
    linear-gradient(135deg, rgba(var(--intro-rgb), 0.13), transparent 55%),
    rgba(5, 10, 18, 0.7);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.25),
    0 0 24px rgba(var(--intro-rgb), 0.07) inset;
  text-align: left;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  animation: contender-in 0.68s var(--ease-out) both;
}

.intro-contender:nth-child(2) { animation-delay: 0.08s; }
.intro-contender:nth-child(3) { animation-delay: 0.16s; }
.intro-contender:nth-child(4) { animation-delay: 0.24s; }

@keyframes contender-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-contender::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, var(--intro-core), transparent);
  opacity: 0.7;
}

.intro-contender-index {
  position: absolute;
  top: 5px;
  right: 7px;
  color: rgba(var(--intro-rgb), 0.4);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.08em;
}

.intro-contender-orb {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(var(--intro-rgb), 0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, var(--intro-core), var(--intro-main) 48%, #070912 84%);
  color: rgba(255, 255, 248, 0.9);
  font-family: var(--font-cjk);
  font-size: 17px;
  text-shadow: 0 0 9px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 17px rgba(var(--intro-rgb), 0.25), inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.intro-contender-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.intro-contender-copy b {
  overflow: hidden;
  color: #f4efe3;
  font-family: var(--font-cjk);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intro-contender-copy small {
  overflow: hidden;
  color: rgba(var(--intro-rgb), 0.65);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intro-roster[data-count="2"] .intro-contender {
  width: clamp(230px, 25vw, 300px);
}

.intro-roster[data-count="3"] .intro-contender {
  width: clamp(190px, 21vw, 250px);
}

.intro-roster[data-count="5"] .intro-contender {
  width: calc((100% - 40px) / 5);
  padding: 11px 12px;
  gap: 8px;
}

.intro-roster[data-count="5"] .intro-contender-orb {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.intro-roster[data-count="5"] .intro-contender-copy b {
  font-size: clamp(11px, 0.9vw, 14px);
}

.rumble-intro .intro-countdown {
  bottom: 6%;
}

.rumble-intro .intro-tip {
  bottom: 2.4%;
}

/* ---- result ranking / winner tint -------------------------------------- */
.result-layer.is-victory .result-rays {
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 2deg, rgba(var(--winner-rgb), 0.12) 2deg 2.4deg),
    radial-gradient(circle, rgba(var(--winner-rgb), 0.16), transparent 45%);
}

.result-layer.is-victory .result-card h2 {
  color: var(--winner-core);
  text-shadow:
    0 0 18px rgba(var(--winner-rgb), 0.28),
    0 0 96px rgba(var(--winner-rgb), 0.3);
}

.result-layer.is-victory .result-card {
  border-color: rgba(var(--winner-rgb), 0.24);
}

.result-ranking {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 142px;
  margin-top: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid rgba(197, 214, 216, 0.08);
}

.result-ranking.is-many {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  max-height: 260px;
}

.result-rank-row {
  display: grid;
  grid-template-columns: 22px 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 3px 5px;
  border-bottom: 1px solid rgba(197, 214, 216, 0.045);
  color: rgba(207, 216, 211, 0.62);
  text-align: left;
}

.result-rank-row:last-child {
  border-bottom: 0;
}

.result-rank-row.is-first {
  background: linear-gradient(90deg, rgba(var(--winner-rgb), 0.11), transparent 72%);
  color: rgba(243, 238, 225, 0.88);
}

.rank-number {
  color: rgba(188, 166, 124, 0.65);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
}

.result-rank-row.is-first .rank-number {
  color: var(--winner-core);
}

.rank-orb {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orb-core), var(--orb-color) 65%, #06080f);
  box-shadow: 0 0 6px var(--orb-core);
}

.rank-name {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
}

.rank-name b {
  overflow: hidden;
  font-family: var(--font-cjk);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-name small {
  flex: 0 0 auto;
  color: rgba(161, 177, 177, 0.35);
  font-size: 7px;
}

.result-rank-row.is-first .rank-name small {
  color: rgba(var(--winner-rgb), 0.6);
}

.rank-kills {
  color: rgba(173, 187, 185, 0.42);
  font-family: var(--font-mono);
  font-size: 7px;
  white-space: nowrap;
}

/* ---- extra tones ------------------------------------------------------- */
.announce.tone-gold strong {
  color: #ffe9a4;
  text-shadow: 0 0 20px rgba(255, 206, 82, 0.35), 0 0 70px rgba(255, 180, 31, 0.22);
}

.announce.tone-gold small {
  color: rgba(255, 214, 112, 0.64);
}

.announce.tone-silver strong {
  color: #f7faff;
  text-shadow:
    0 0 20px rgba(228, 239, 255, 0.42),
    0 0 70px rgba(161, 191, 242, 0.28);
}

.announce.tone-silver small {
  color: rgba(225, 236, 255, 0.66);
}

.announce.tone-rose strong {
  color: #ffe0e8;
  text-shadow:
    0 0 20px rgba(255, 127, 158, 0.42),
    0 0 70px rgba(255, 63, 111, 0.26);
}

.announce.tone-rose small {
  color: rgba(255, 184, 201, 0.66);
}

.announce.tone-jade strong {
  color: #dcffef;
  text-shadow:
    0 0 20px rgba(122, 255, 207, 0.4),
    0 0 70px rgba(255, 224, 112, 0.22);
}

.announce.tone-jade small {
  color: rgba(186, 255, 228, 0.66);
}

.announce.tone-orange strong {
  color: #ffe2ae;
  text-shadow: 0 0 20px rgba(255, 162, 66, 0.4), 0 0 70px rgba(255, 112, 32, 0.24);
}

.announce.tone-shadow strong {
  color: #dfe5ff;
  text-shadow: 0 0 20px rgba(130, 148, 255, 0.4), 0 0 70px rgba(72, 86, 180, 0.26);
}

.announce.tone-gravity strong {
  color: #f1edff;
  text-shadow: 0 0 20px rgba(205, 195, 255, 0.4), 0 0 70px rgba(140, 125, 200, 0.24);
}

.announce.tone-vampire strong {
  color: #fff0b4;
  text-shadow: 0 0 20px rgba(255, 211, 105, 0.42), 0 0 70px rgba(173, 46, 39, 0.24);
}

.announce.tone-ember strong {
  color: #ffd4b1;
  text-shadow: 0 0 20px rgba(255, 126, 76, 0.42), 0 0 70px rgba(177, 54, 27, 0.24);
}

.announce.tone-war strong {
  color: #ffd7b3;
  text-shadow: 0 0 20px rgba(255, 150, 92, 0.4), 0 0 70px rgba(198, 68, 34, 0.24);
}

.announce.tone-mask strong {
  color: #f8f4ff;
  text-shadow: 0 0 20px rgba(228, 219, 255, 0.44), 0 0 70px rgba(174, 154, 230, 0.24);
}

.announce.tone-elim {
  width: min(620px, 86vw);
}

.announce.tone-elim strong {
  color: #f4b4a5;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: 0.16em;
  text-shadow: 0 0 20px rgba(255, 93, 67, 0.24);
}

.announce.tone-elim small {
  color: rgba(225, 166, 147, 0.5);
}

/* ---- responsive royale ------------------------------------------------- */
@media (max-width: 760px) {
  .battle-hud.brawl-hud {
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
  }

  .brawl-headline {
    gap: 5px;
  }

  .brawl-mode,
  .brawl-alive {
    font-size: 5.5px;
    letter-spacing: 0.06em;
  }

  .brawl-alive b {
    font-size: 11px;
  }

  .brawl-headline .match-clock {
    min-width: 104px;
  }

  .brawl-headline .clock-kicker {
    display: none;
  }

  .brawl-headline #matchTimer {
    margin: 0 0 1px;
    font-size: 23px;
  }

  .brawl-headline .clock-round {
    font-size: 4.5px;
  }

  .roster-hud {
    gap: 3px;
  }

  .hud-fighter {
    padding: 4px 5px 3px;
  }

  .hud-fighter-mark {
    width: 11px;
    height: 11px;
    font-size: 6px;
  }

  .hud-fighter-name {
    font-size: 8px;
    letter-spacing: 0;
  }

  .hud-hp-value {
    font-size: 6.5px;
  }

  .hud-fighter-hp {
    height: 4px;
    margin-top: 3px;
  }

  .hud-ultimate {
    gap: 3px;
    margin-top: 3px;
    font-size: 4.5px;
  }

  .hud-ultimate-label {
    font-size: 5px;
  }

  .hud-fighter-status {
    height: 8px;
    margin-top: 2px;
    font-size: 5.5px;
    line-height: 8px;
  }

  .hud-status-chip:nth-child(n+2) {
    display: none;
  }

  .roster-hud[data-count="4"] .hud-ultimate-label {
    display: none;
  }

  .roster-hud[data-count="4"] .hud-fighter-status {
    display: none;
  }

  .roster-hud[data-count="5"] {
    gap: 2px;
  }

  .roster-hud[data-count="5"] .hud-fighter {
    padding: 4px 4px 3px;
  }

  .roster-hud[data-count="5"] .hud-fighter-mark,
  .roster-hud[data-count="5"] .hud-hp-value,
  .roster-hud[data-count="5"] .hud-fighter-status,
  .roster-hud[data-count="5"] .hud-ultimate-label,
  .roster-hud[data-count="5"] .hud-ultimate-ready {
    display: none;
  }

  .roster-hud[data-count="5"] .hud-fighter-name {
    font-size: 7px;
    letter-spacing: 0;
  }

  .roster-hud[data-count="5"] .hud-fighter-hp {
    margin-top: 3px;
  }

  .roster-hud[data-count="5"] .hud-ultimate {
    margin-top: 3px;
  }

  .spectator-footer {
    right: 10px;
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 5px));
    left: 10px;
    gap: 7px;
  }

  .spectator-state {
    padding: 5px 7px;
    font-size: 5.5px;
    gap: 5px;
  }

  .spectator-live {
    font-size: 5px;
  }

  .spectator-footer .icon-btn {
    width: 27px;
    height: 27px;
  }

  .match-builder {
    width: 100%;
    margin-top: 9px;
    padding-top: 8px;
  }

  .roster-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .roster-card {
    height: 42px;
    flex: 0 0 calc(25% - 3px);
    gap: 3px;
    padding: 3px 4px;
  }

  .roster-orb {
    width: 22px;
    height: 22px;
  }

  .roster-orb i {
    width: 9px;
    height: 9px;
  }

  .roster-meta b {
    font-size: 8px;
  }

  .roster-meta small {
    font-size: 5.5px;
  }

  .new-kit-line {
    font-size: 6.2px;
    gap: 1px 8px;
  }

  .new-kit-line span {
    flex-basis: calc(50% - 4px);
  }

  .rumble-inner {
    width: 92vw;
    margin-top: -2vh;
  }

  .rumble-title {
    font-size: 54px;
    letter-spacing: 0.08em;
  }

  .rumble-kicker {
    font-size: 6px;
  }

  .rumble-sub {
    margin-top: 11px;
    font-size: 7px;
  }

  .intro-roster {
    gap: 6px;
    margin-top: 22px;
  }

  .intro-contender,
  .intro-roster[data-count="2"] .intro-contender,
  .intro-roster[data-count="3"] .intro-contender {
    width: calc(50% - 4px);
    padding: 9px 10px;
  }

  .intro-roster[data-count="5"] .intro-contender {
    width: calc(33.333% - 4px);
    padding: 8px 9px;
  }

  .intro-roster[data-count="5"] .intro-contender-orb {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .intro-roster[data-count="5"] .intro-contender-copy b {
    font-size: 10px;
  }

  .intro-roster[data-count="5"] .intro-contender-copy small {
    display: none;
  }

  .intro-contender-orb {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .intro-contender-copy b {
    font-size: 11px;
  }

  .intro-contender-copy small {
    font-size: 6px;
  }

  .rumble-intro .intro-countdown {
    bottom: 5%;
    font-size: 60px;
  }

  .rumble-intro .intro-tip {
    font-size: 7px;
  }

  .result-card {
    max-height: calc(100dvh - 18px);
    overflow-y: auto;
  }

  .result-card h2 {
    font-size: 50px;
  }

  .result-rank-row {
    grid-template-columns: 18px 7px minmax(0, 1fr) auto;
    gap: 4px;
  }

  .rank-name b {
    font-size: 8px;
  }

  .rank-kills {
    font-size: 6px;
  }
}

@media (max-height: 640px) and (min-width: 761px) {
  .brawl-headline .clock-round {
    display: none;
  }

  .brawl-headline #matchTimer {
    margin: 0;
    font-size: 22px;
  }

  .hud-fighter-status {
    display: none;
  }

  .hud-fighter {
    padding: 4px 7px;
  }

  .spectator-footer {
    bottom: 8px;
  }
}

@media (max-height: 620px) and (max-width: 760px) {
  .hud-fighter-status {
    display: none;
  }

  .brawl-headline .clock-round {
    display: none;
  }

  .brawl-headline #matchTimer {
    margin: 0;
    font-size: 20px;
  }

  .spectator-state {
    max-width: 58vw;
  }

  .match-builder {
    margin-top: 7px;
  }
}

@media (min-width: 761px) {
  .match-builder {
    width: min(610px, 100%);
  }

  .roster-card {
    height: 38px;
    gap: 4px;
    padding: 3px 4px;
  }

  .roster-orb {
    width: 24px;
    height: 24px;
  }

  .roster-orb i {
    width: 13px;
    height: 13px;
  }

  .roster-meta b {
    font-size: 10px;
  }

  .roster-meta small {
    font-size: 6.5px;
  }

  .setup-hint {
    font-size: 6.5px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .intro-roster[data-count="5"] .intro-contender {
    width: calc(33.333% - 7px);
    padding: 9px 10px;
  }
}

@media (min-width: 981px) and (max-width: 1320px) {
  .match-builder {
    width: min(520px, 100%);
  }

  .roster-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .roster-card {
    height: 38px;
    flex: 0 0 calc(20% - 4px);
    gap: 3px;
    padding: 2px 3px;
  }

  .roster-orb {
    width: 20px;
    height: 20px;
  }

  .roster-orb i {
    width: 8px;
    height: 8px;
  }

  .roster-meta b {
    font-size: 7.5px;
  }

  .roster-meta small {
    font-size: 5px;
  }

  .roster-meta em {
    display: none;
  }
}

/* ---- large custom lineups ---------------------------------------------- */
.intro-roster.is-many {
  gap: 6px;
  margin-top: 20px;
  max-width: 1100px;
}

.intro-roster.is-many .intro-contender {
  width: calc(16.666% - 6px);
  gap: 6px;
  padding: 8px;
}

.intro-roster.is-many .intro-contender-orb {
  width: 28px;
  height: 28px;
  font-size: 9px;
}

.intro-roster.is-many .intro-contender-copy b {
  font-size: 10px;
}

.intro-roster.is-many .intro-contender-copy small {
  font-size: 6px;
}

@media (max-width: 760px) {
  .result-ranking.is-many {
    display: flex;
    max-height: 190px;
  }

  .intro-roster.is-many {
    gap: 4px;
    margin-top: 14px;
  }

  .intro-roster.is-many .intro-contender {
    width: calc(25% - 4px);
    gap: 4px;
    padding: 5px;
  }

  .intro-roster.is-many .intro-contender-orb {
    width: 22px;
    height: 22px;
    font-size: 7px;
  }

  .intro-roster.is-many .intro-contender-copy b {
    font-size: 8px;
  }

  .intro-roster.is-many .intro-contender-copy small {
    display: none;
  }

  .intro-roster.is-many .intro-contender-index {
    display: none;
  }
}

/* ---- play/online modes ------------------------------------------------- */
.topbar-mode-btn {
  padding: 3px 7px;
  border: 1px solid rgba(194, 209, 211, 0.18);
  background: rgba(5, 10, 16, 0.55);
  color: rgba(207, 214, 207, 0.62);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

.topbar-mode-btn:hover,
.topbar-mode-btn.is-active {
  border-color: rgba(226, 199, 139, 0.42);
  color: #f4e8cc;
}

.topbar-mode-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.manual-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  display: none;
  padding: 6px 11px;
  border: 1px solid rgba(226, 199, 139, 0.22);
  background: rgba(4, 8, 14, 0.78);
  color: rgba(211, 218, 209, 0.62);
  font-family: var(--font-cjk);
  font-size: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.manual-controls.is-active {
  display: block;
}

.manual-controls b {
  color: #ffd36b;
}

@media (max-width: 760px) {
  .manual-controls {
    bottom: 86px;
    max-width: 92vw;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
}

.online-card {
  width: min(620px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

.online-profile {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 7px 8px;
  border: 1px solid rgba(194, 209, 211, 0.12);
  background: rgba(3, 7, 12, 0.5);
}

.online-profile label {
  color: rgba(190, 200, 192, 0.55);
  font-family: var(--font-cjk);
  font-size: 8px;
}

.online-profile input {
  min-width: 0;
  flex: 1;
  height: 24px;
  border: 1px solid rgba(194, 209, 211, 0.18);
  background: rgba(0, 0, 0, 0.4);
  color: #f1e7cf;
  font-family: var(--font-cjk);
  font-size: 9px;
  outline: none;
  padding: 0 6px;
}

.online-profile button {
  padding: 4px 7px;
  border: 1px solid rgba(226, 199, 139, 0.26);
  background: rgba(54, 43, 25, 0.28);
  color: #f1dfb6;
  font-family: var(--font-cjk);
  font-size: 8px;
  cursor: pointer;
}

.online-location-status {
  color: rgba(183, 196, 192, 0.5);
  font-family: var(--font-cjk);
  font-size: 7px;
}

.online-join-actions {
  display: flex;
  gap: 5px;
}

.online-join-actions .primary-btn,
.online-join-actions .ghost-btn {
  flex: 1;
  padding-left: 4px;
  padding-right: 4px;
}

.online-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.online-pane {
  padding: 12px;
  border: 1px solid rgba(194, 209, 211, 0.12);
  background: rgba(4, 8, 14, 0.55);
}

.online-pane h3 {
  margin: 0 0 8px;
  color: rgba(240, 235, 220, 0.9);
  font-family: var(--font-cjk);
  font-size: 11px;
}

.online-room-code {
  margin: 8px 0 2px;
  color: #f0d79c;
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.25em;
}

.online-broker-label {
  display: block;
  margin: 4px 0 3px;
  color: rgba(183, 196, 192, 0.55);
  font-family: var(--font-cjk);
  font-size: 7px;
}

.online-broker-select {
  width: 100%;
  height: 27px;
  margin-bottom: 5px;
  border: 1px solid rgba(194, 209, 211, 0.18);
  background: rgba(2, 5, 9, 0.8);
  color: rgba(239, 231, 211, 0.82);
  font-family: var(--font-cjk);
  font-size: 9px;
  outline: none;
}

.online-code-input {
  width: 100%;
  height: 32px;
  margin-bottom: 7px;
  border: 1px solid rgba(194, 209, 211, 0.2);
  background: rgba(2, 5, 9, 0.8);
  color: #f4e8cc;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.3em;
  text-align: center;
  outline: none;
}

.online-status {
  min-height: 16px;
  margin: 6px 0 0;
  color: rgba(183, 196, 192, 0.62);
  font-family: var(--font-cjk);
  font-size: 8px;
  line-height: 1.5;
}

.start-hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 18px;
  margin-top: 12px;
}

.start-hint-row .start-hint {
  margin: 0;
}

.start-online-btn {
  padding: 2px 8px;
  border: 1px solid rgba(226, 199, 139, 0.28);
  background: rgba(54, 43, 25, 0.24);
  color: rgba(241, 223, 182, 0.82);
  font-family: var(--font-cjk);
  font-size: 7px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

.start-online-btn:hover {
  border-color: rgba(226, 199, 139, 0.55);
  color: #fff0c9;
}

.online-select {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(61, 20, 30, 0.55), transparent 52%),
    rgba(2, 4, 8, 0.96);
  overflow-y: auto;
}

.online-select.is-active {
  display: flex;
}

.online-select-head {
  text-align: center;
}

.online-select-head h2 {
  margin: 4px 0 2px;
  color: #f4ead6;
  font-family: var(--font-cjk);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.online-select-slots {
  display: flex;
  align-items: center;
  gap: 18px;
}

.online-select-slot {
  min-width: 150px;
  padding: 8px 14px;
  border: 1px solid rgba(194, 209, 211, 0.18);
  background: rgba(4, 8, 14, 0.66);
  text-align: center;
}

.online-select-slot small {
  display: block;
  color: rgba(190, 200, 192, 0.55);
  font-family: var(--font-mono);
  font-size: 7px;
}

.online-select-slot b {
  color: #f1dfb6;
  font-family: var(--font-cjk);
  font-size: 13px;
  font-weight: 500;
}

.online-select-roster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: min(860px, 96vw);
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}

.online-select-card {
  padding: 6px 5px;
  border: 1px solid rgba(194, 209, 211, 0.12);
  background: rgba(4, 8, 14, 0.6);
  color: rgba(225, 229, 216, 0.82);
  font-family: var(--font-cjk);
  font-size: 8px;
  text-align: center;
  cursor: pointer;
}

.online-select-card small {
  display: block;
  margin-top: 2px;
  color: rgba(180, 192, 186, 0.42);
  font-size: 6px;
}

.online-select-card.is-selected {
  border-color: rgba(226, 199, 139, 0.65);
  background: rgba(84, 62, 28, 0.36);
  color: #fff3d2;
}

.online-select-card:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.online-select-card.is-locked {
  border-color: rgba(255, 211, 90, 0.28);
  color: rgba(255, 226, 168, 0.75);
}

#authorOverlay {
  z-index: 160;
}

.online-select-confirm {
  display: none;
  min-width: 150px;
}

.online-select-confirm.is-active {
  display: inline-block;
}

.online-rematch-btn {
  position: absolute;
  right: 14px;
  bottom: 56px;
  display: none;
  padding: 8px 14px;
  border: 1px solid rgba(226, 199, 139, 0.46);
  background: rgba(54, 43, 25, 0.72);
  color: #fff1cd;
  font-family: var(--font-cjk);
  font-size: 10px;
  cursor: pointer;
}

.online-rematch-btn.is-active {
  display: block;
}

@media (max-width: 760px) {
  .online-select-roster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 38vh;
  }

  .online-select-slot {
    min-width: 110px;
  }
}

.online-lobby {
  margin-top: 14px;
  border-top: 1px solid rgba(194, 209, 211, 0.12);
  padding-top: 10px;
}

.online-lobby-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(240, 234, 218, 0.86);
  font-family: var(--font-cjk);
  font-size: 10px;
}

.online-lobby-head span {
  color: rgba(183, 196, 192, 0.5);
  font-size: 7px;
}

.online-room-list {
  display: grid;
  gap: 4px;
  max-height: 120px;
  margin-top: 6px;
  overflow-y: auto;
}

.online-room-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(194, 209, 211, 0.1);
  background: rgba(3, 7, 12, 0.55);
  color: rgba(210, 218, 209, 0.7);
  font-family: var(--font-cjk);
  font-size: 8px;
}

.online-room-row b {
  color: #f0d79c;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.online-room-row button {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgba(226, 199, 139, 0.34);
  background: rgba(54, 43, 25, 0.32);
  color: #f1dfb6;
  font-family: var(--font-cjk);
  font-size: 8px;
  cursor: pointer;
}

.online-viewer.is-spectator .online-viewer-help {
  border-color: rgba(85, 200, 255, 0.2);
}

.online-viewer.is-spectator .online-viewer-help b {
  color: #88dcff;
}

.world-chat-icon {
  color: #8fdcff;
  font-family: var(--font-cjk);
  font-size: 9px;
}

.world-chat {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 145;
  display: none;
  width: 280px;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(194, 209, 211, 0.2);
  background: rgba(3, 7, 12, 0.92);
  backdrop-filter: blur(8px);
  color: rgba(224, 230, 220, 0.82);
  font-family: var(--font-cjk);
}

.world-chat.is-active {
  display: block;
}

.world-chat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(194, 209, 211, 0.1);
  font-size: 9px;
  color: #f1dfb6;
}

.world-chat-head b {
  flex: 1;
}

.world-chat-head span {
  color: rgba(183, 196, 192, 0.48);
  font-size: 7px;
}

.world-chat-head button {
  border: 0;
  background: transparent;
  color: rgba(200, 210, 202, 0.6);
  font-size: 12px;
  cursor: pointer;
}

.world-chat-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 150px;
  overflow-y: auto;
  padding: 7px 8px;
  font-size: 8px;
  line-height: 1.45;
}

.world-chat-log p {
  margin: 0;
  overflow-wrap: anywhere;
}

.world-chat-log b {
  color: #8fdcff;
}

.world-chat-form {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-top: 1px solid rgba(194, 209, 211, 0.1);
}

.world-chat-form input {
  min-width: 0;
  flex: 1;
  height: 24px;
  border: 1px solid rgba(194, 209, 211, 0.14);
  background: rgba(0, 0, 0, 0.4);
  color: #eee8d8;
  font-family: var(--font-cjk);
  font-size: 8px;
  outline: none;
  padding: 0 5px;
}

.world-chat-form button {
  border: 1px solid rgba(226, 199, 139, 0.28);
  background: rgba(54, 43, 25, 0.35);
  color: #f1dfb6;
  font-family: var(--font-cjk);
  font-size: 8px;
  cursor: pointer;
}

.room-chat-head {
  gap: 4px;
}

.room-chat-head > button:first-of-type {
  color: #8fdcff;
}

.room-chat {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 55;
  display: none;
  width: 230px;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(194, 209, 211, 0.2);
  background: rgba(3, 7, 12, 0.9);
  backdrop-filter: blur(8px);
  color: rgba(224, 230, 220, 0.8);
  font-family: var(--font-cjk);
}

.room-chat.is-active {
  display: block;
}

.room-chat.is-collapsed .room-chat-log,
.room-chat.is-collapsed .room-chat-form {
  display: none;
}

.room-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(194, 209, 211, 0.1);
  font-size: 9px;
  color: #f1dfb6;
}

.room-chat-head button {
  border: 0;
  background: transparent;
  color: rgba(200, 210, 202, 0.6);
  cursor: pointer;
  font-size: 12px;
}

.room-chat-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 120px;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 8px;
  line-height: 1.45;
}

.room-chat-log p {
  margin: 0;
  overflow-wrap: anywhere;
}

.room-chat-log b {
  color: #ffd36b;
}

.room-chat-form {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-top: 1px solid rgba(194, 209, 211, 0.1);
}

.room-chat-form input {
  min-width: 0;
  flex: 1;
  height: 24px;
  border: 1px solid rgba(194, 209, 211, 0.14);
  background: rgba(0, 0, 0, 0.4);
  color: #eee8d8;
  font-family: var(--font-cjk);
  font-size: 8px;
  outline: none;
  padding: 0 5px;
}

.room-chat-form button {
  border: 1px solid rgba(226, 199, 139, 0.28);
  background: rgba(54, 43, 25, 0.35);
  color: #f1dfb6;
  font-family: var(--font-cjk);
  font-size: 8px;
  cursor: pointer;
}

.online-viewer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: #020407;
}

.online-viewer.is-active {
  display: flex;
}

.online-viewer:focus {
  outline: none;
}

.online-viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.online-viewer-top {
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 12px;
  border: 1px solid rgba(194, 209, 211, 0.16);
  background: rgba(3, 7, 12, 0.78);
  color: rgba(235, 229, 211, 0.82);
  font-family: var(--font-cjk);
  font-size: 9px;
  transform: translateX(-50%);
}

.online-viewer-help {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(194, 209, 211, 0.13);
  background: rgba(3, 7, 12, 0.72);
  color: rgba(193, 203, 196, 0.62);
  font-family: var(--font-cjk);
  font-size: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.online-viewer-help b {
  color: #f1dfb6;
}

body.is-online-viewing {
  overflow: hidden;
}

body.is-online-viewing .room-chat {
  z-index: 130;
}

@media (max-width: 760px) {
  .topbar-note {
    display: none;
  }

  .topbar-right {
    gap: 4px;
  }

  .topbar-mode-btn {
    padding: 2px 5px;
    font-size: 6px;
  }

  .online-panes {
    grid-template-columns: 1fr;
  }

  .online-viewer-help {
    left: 8px;
    right: 8px;
    bottom: 8px;
    transform: none;
    white-space: normal;
    line-height: 1.5;
  }
}

/* ---- preview support --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rumble-aurora {
    animation: none;
  }
}