/* ===== styles/00-tokens.css ===== */
:root,
.ca-v3 {
  color-scheme: light;
  --ca-v3-font: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --ca-v3-mono: ui-monospace, SFMono-Regular, Consolas, "D2Coding", monospace;

  --ca-v3-navy-950: #071a38;
  --ca-v3-navy-900: #102d5a;
  --ca-v3-navy-800: #1c4375;
  --ca-v3-navy-700: #2a5688;
  --ca-v3-ink: #16345f;
  --ca-v3-muted: #667c98;

  --ca-v3-cream-50: #fffef9;
  --ca-v3-cream-100: #fff8e9;
  --ca-v3-cream-200: #f9edcf;
  --ca-v3-cream-300: #efd39d;
  --ca-v3-white-glass: rgba(255, 254, 249, .94);

  --ca-v3-orange-300: #ffd05c;
  --ca-v3-orange-500: #ff9318;
  --ca-v3-orange-600: #ef7507;
  --ca-v3-orange-700: #c95500;
  --ca-v3-cyan-300: #72dcf4;
  --ca-v3-cyan-500: #39bfe5;
  --ca-v3-cyan-600: #239fd2;
  --ca-v3-green-300: #a4e966;
  --ca-v3-green-500: #67c83c;
  --ca-v3-red-400: #ff746b;
  --ca-v3-red-600: #d84643;
  --ca-v3-violet: #a978f5;

  --ca-v3-btc: #ff9b26;
  --ca-v3-eth: #42bdea;
  --ca-v3-sol: #a978f5;
  --ca-v3-doge: #7dcc4b;

  --ca-v3-r-1: 8px;
  --ca-v3-r-2: 12px;
  --ca-v3-r-3: 16px;
  --ca-v3-r-4: 20px;
  --ca-v3-r-5: 24px;
  --ca-v3-r-6: 30px;
  --ca-v3-pill: 999px;

  --ca-v3-s-1: 4px;
  --ca-v3-s-2: 6px;
  --ca-v3-s-3: 8px;
  --ca-v3-s-4: 12px;
  --ca-v3-s-5: 16px;
  --ca-v3-s-6: 20px;
  --ca-v3-s-7: 24px;

  --ca-v3-line-strong: #173b69;
  --ca-v3-line-warm: #e9c98e;
  --ca-v3-line-soft: #f4dfb9;
  --ca-v3-line-blue: #93c9e9;

  --ca-v3-shadow-shell:
    0 7px 0 rgba(37, 78, 116, .24),
    0 22px 50px rgba(47, 86, 119, .24);
  --ca-v3-shadow-panel:
    0 4px 0 rgba(137, 101, 45, .12),
    0 12px 24px rgba(47, 86, 119, .13);
  --ca-v3-shadow-raised:
    inset 0 3px 0 rgba(255,255,255,.58),
    0 4px 0 rgba(12, 40, 76, .26),
    0 9px 18px rgba(46, 82, 115, .15);
  --ca-v3-shadow-orange:
    inset 0 3px 0 rgba(255,255,255,.50),
    0 5px 0 var(--ca-v3-orange-700),
    0 11px 18px rgba(126, 75, 20, .18);
  --ca-v3-shadow-blue:
    inset 0 3px 0 rgba(255,255,255,.42),
    0 5px 0 #176b9e,
    0 11px 18px rgba(26, 80, 117, .18);

  --ca-v3-bg-image: url("../assets/backgrounds/game-world-desktop-1920x1080.png");
  --ca-v3-sidebar: clamp(330px, 25vw, 410px);
  --ca-v3-gap: clamp(10px, 1vw, 16px);
  --ca-v3-transition: 140ms cubic-bezier(.2, .8, .2, 1);
}


/* ===== styles/01-foundation.css ===== */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

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

.ca-v3 {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100dvh;
  min-width: 960px;
  overflow: hidden;
  color: var(--ca-v3-ink);
  font-family: var(--ca-v3-font);
  background:
    linear-gradient(rgba(225, 244, 252, .34), rgba(233, 246, 249, .48)),
    var(--ca-v3-bg-image) center / cover no-repeat fixed;
}

.ca-v3::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(227,244,251,.22), rgba(255,249,226,.16));
  pointer-events: none;
}

.ca-v3 button,
.ca-v3 input,
.ca-v3 textarea,
.ca-v3 select {
  font: inherit;
}

.ca-v3 button {
  -webkit-tap-highlight-color: transparent;
}

.ca-v3 :where(.ca-v3__shell, [data-ca="shell"]) {
  position: relative;
  width: min(1760px, calc(100vw - 32px));
  height: calc(100dvh - 28px);
  margin: 14px auto;
  overflow: hidden;
  border: 3px solid var(--ca-v3-line-strong);
  border-radius: var(--ca-v3-r-6);
  background: linear-gradient(180deg, rgba(255,254,248,.97), rgba(255,247,229,.96));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.92),
    inset 0 -3px 0 rgba(226,192,132,.36),
    var(--ca-v3-shadow-shell);
}

.ca-v3 :where(.ca-v3__surface, [data-ca="surface"]) {
  min-width: 0;
  border: 2px solid var(--ca-v3-line-warm);
  border-radius: var(--ca-v3-r-4);
  background: linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,247,231,.96));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.94),
    var(--ca-v3-shadow-panel);
}

.ca-v3 :where(.ca-v3__panel, [data-ca="panel"]) {
  min-width: 0;
  border: 2px solid var(--ca-v3-line-soft);
  border-radius: var(--ca-v3-r-3);
  background: linear-gradient(180deg, rgba(255,254,250,.94), rgba(255,249,237,.92));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.92), 0 3px 0 rgba(169,120,55,.08);
}

.ca-v3 :where(.ca-v3__well, [data-ca="well"]) {
  border: 2px solid #ecdabc;
  border-radius: var(--ca-v3-r-3);
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 3px 8px rgba(75, 96, 118, .08), inset 0 1px 0 #fff;
}

.ca-v3 :where(.ca-v3__section-title, [data-ca="section-title"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ca-v3-navy-900);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.ca-v3 :where(.ca-v3__screen-scrim, [data-ca="scrim"]) {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(38, 75, 110, .42);
  backdrop-filter: blur(12px) saturate(.88);
  -webkit-backdrop-filter: blur(12px) saturate(.88);
}

@media (max-height: 800px) {
  .ca-v3 :where(.ca-v3__shell, [data-ca="shell"]) {
    width: min(1760px, calc(100vw - 16px));
    height: calc(100dvh - 16px);
    margin: 8px auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-v3 *,
  .ca-v3 *::before,
  .ca-v3 *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ===== styles/02-components.css ===== */
.ca-v3 :where(.ca-v3__button, [data-ca-button]) {
  --button-top: #fffdf5;
  --button-bottom: #efe3ca;
  --button-edge: #b69a70;
  --button-text: var(--ca-v3-navy-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  color: var(--button-text);
  border: 2px solid var(--ca-v3-navy-900);
  border-radius: var(--ca-v3-r-2);
  outline: 0;
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.56),
    0 4px 0 var(--button-edge),
    0 8px 14px rgba(40, 71, 104, .14);
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transform: translateY(0);
  transition: transform var(--ca-v3-transition), filter var(--ca-v3-transition), box-shadow var(--ca-v3-transition);
}

.ca-v3 :where(.ca-v3__button, [data-ca-button]):hover {
  filter: brightness(1.03) saturate(1.04);
  transform: translateY(-1px);
}

.ca-v3 :where(.ca-v3__button, [data-ca-button]):active,
.ca-v3 :where(.ca-v3__button, [data-ca-button]).is-pressed {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 1px 0 var(--button-edge);
  filter: brightness(.96);
  transform: translateY(3px);
}

.ca-v3 :where(.ca-v3__button, [data-ca-button]):focus-visible {
  box-shadow: 0 0 0 4px rgba(57,191,229,.28), inset 0 3px 0 rgba(255,255,255,.56), 0 4px 0 var(--button-edge);
}

.ca-v3 :where(.ca-v3__button, [data-ca-button]):disabled,
.ca-v3 :where(.ca-v3__button, [data-ca-button])[aria-disabled="true"] {
  pointer-events: none;
  filter: grayscale(.55);
  opacity: .52;
}

.ca-v3 [data-ca-button="primary"],
.ca-v3 .ca-v3__button--primary {
  --button-top: #ffc642;
  --button-bottom: var(--ca-v3-orange-500);
  --button-edge: var(--ca-v3-orange-700);
  --button-text: #fff;
  min-height: 52px;
  border-radius: var(--ca-v3-pill);
  text-shadow: 0 2px 0 rgba(145, 66, 0, .38);
}

.ca-v3 [data-ca-button="secondary"],
.ca-v3 .ca-v3__button--secondary {
  --button-top: #62d6f4;
  --button-bottom: #2a9edf;
  --button-edge: #176b9e;
  --button-text: #fff;
  border-radius: var(--ca-v3-pill);
  text-shadow: 0 2px 0 rgba(16, 71, 112, .36);
}

.ca-v3 [data-ca-button="success"],
.ca-v3 .ca-v3__button--success {
  --button-top: #a9eb70;
  --button-bottom: #5fbd31;
  --button-edge: #378719;
  --button-text: #fff;
  border-radius: var(--ca-v3-pill);
  text-shadow: 0 2px 0 rgba(39, 111, 21, .32);
}

.ca-v3 [data-ca-button="danger"],
.ca-v3 .ca-v3__button--danger {
  --button-top: #ff9185;
  --button-bottom: #e84e48;
  --button-edge: #ad2e31;
  --button-text: #fff;
  border-radius: var(--ca-v3-pill);
}

.ca-v3 [data-ca-button="neutral"],
.ca-v3 .ca-v3__button--neutral {
  border-color: #9e825a;
}

.ca-v3 [data-ca-button="icon"],
.ca-v3 .ca-v3__icon-button {
  --button-top: #6bdaf5;
  --button-bottom: #2b9edc;
  --button-edge: #176c9d;
  --button-text: #fff;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 14px;
}

.ca-v3 :where(.ca-v3__button, [data-ca-button]) img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}

.ca-v3 :where(.ca-v3__field, [data-ca="field"]) {
  width: 100%;
  height: 46px;
  min-width: 0;
  padding: 0 16px;
  color: var(--ca-v3-ink);
  border: 2px solid #bcd4e3;
  border-radius: var(--ca-v3-pill);
  outline: 0;
  background: rgba(255,255,255,.88);
  box-shadow: inset 0 3px 7px rgba(67, 91, 115, .08), inset 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 750;
  transition: border-color var(--ca-v3-transition), box-shadow var(--ca-v3-transition);
}

.ca-v3 :where(.ca-v3__field, [data-ca="field"]):focus {
  border-color: var(--ca-v3-cyan-500);
  box-shadow: 0 0 0 4px rgba(57,191,229,.20), inset 0 3px 7px rgba(67, 91, 115, .08);
}

.ca-v3 :where(.ca-v3__field, [data-ca="field"])::placeholder {
  color: #92a6b9;
}

.ca-v3 :where(.ca-v3__segmented, [data-ca="segmented"]) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 7px;
}

.ca-v3 :where(.ca-v3__segment, [data-ca="segment"]) {
  min-height: 38px;
  padding: 0 10px;
  color: var(--ca-v3-navy-900);
  border: 2px solid #dfcfb7;
  border-radius: var(--ca-v3-r-2);
  background: linear-gradient(#fffef9, #f6ecdc);
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(126, 94, 52, .10);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.ca-v3 :where(.ca-v3__segment, [data-ca="segment"])[aria-pressed="true"],
.ca-v3 :where(.ca-v3__segment, [data-ca="segment"]).is-selected {
  color: #713300;
  border-color: var(--ca-v3-orange-600);
  background: linear-gradient(#ffd55f, #ff9a18);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.46), 0 4px 0 #d86d06;
}

.ca-v3 :where(.ca-v3__badge, [data-ca="badge"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 11px;
  color: #fff;
  border: 2px solid var(--ca-v3-navy-900);
  border-radius: var(--ca-v3-pill);
  background: linear-gradient(#2c4e78, #112d59);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 2px 0 rgba(7,28,61,.22);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
}

.ca-v3 [data-ca-status="ready"],
.ca-v3 [data-ca-status="alive"] { background: linear-gradient(#a8eb6a, #5dbd31); }
.ca-v3 [data-ca-status="sealed"] { background: linear-gradient(#a9b4c1, #6b788a); }
.ca-v3 [data-ca-status="liquidated"] { background: linear-gradient(#ef958d, #bf6864); opacity: .82; }

.ca-v3 :where(.ca-v3__message, [data-ca="message"]) {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-height: 27px;
  margin-bottom: 5px;
  padding: 5px 10px;
  border: 1.5px solid #e7d3b1;
  border-radius: 10px 10px 10px 4px;
  background: rgba(255,253,247,.93);
  box-shadow: 0 2px 0 rgba(126, 92, 46, .07);
  font-size: 11px;
  line-height: 1.35;
}

.ca-v3 :where(.ca-v3__message, [data-ca="message"]).is-system {
  color: #5d7088;
  background: #f4f8fb;
  border-color: #cadbe8;
}

.ca-v3 :where(.ca-v3__quick, [data-ca="quick-message"]) {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  color: var(--ca-v3-navy-900);
  border: 2px solid #e7d3ad;
  border-radius: var(--ca-v3-pill);
  background: linear-gradient(#fffef8, #f5ead7);
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(116, 84, 44, .10);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}


/* ===== styles/03-screens.css ===== */
/* ---------- Waiting room ---------- */
.ca-v3[data-ca-screen="waiting"] :where(.ca-v3__shell, [data-ca="shell"]) {
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr) 72px;
}

.ca-v3 :where(.ca-v3__room-header, [data-ca="room-header"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 18px;
  border-bottom: 2px solid var(--ca-v3-line-warm);
  background: linear-gradient(180deg, rgba(255,254,248,.96), rgba(255,247,229,.94));
  box-shadow: inset 0 2px 0 #fff;
}

.ca-v3 :where(.ca-v3__room-header-title, [data-ca="room-title"]) {
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.03em;
}

.ca-v3 :where(.ca-v3__room-code, [data-ca="room-code"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-left: auto;
  padding: 0 18px;
  color: #ffd451;
  border: 3px solid var(--ca-v3-navy-950);
  border-radius: var(--ca-v3-pill);
  background: linear-gradient(#284a78, #102d5a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 4px 0 rgba(6,25,55,.25);
  font: 950 16px/1 var(--ca-v3-mono);
  letter-spacing: .22em;
}

.ca-v3 :where(.ca-v3__waiting-layout, [data-ca="waiting-layout"]) {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(340px, .9fr);
  gap: var(--ca-v3-gap);
  min-width: 0;
  min-height: 0;
  padding: var(--ca-v3-gap);
}

.ca-v3 :where(.ca-v3__waiting-main, [data-ca="waiting-main"]) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(90px, 11vh, 118px);
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.ca-v3 :where(.ca-v3__player-grid, [data-ca="player-grid"]) {
  display: grid;
  grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.ca-v3 :where(.ca-v3__player-card, [data-ca="player-card"]) {
  --player: var(--ca-v3-sol);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  border: 3px solid var(--player);
  border-radius: var(--ca-v3-r-5);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.68), transparent 38%),
    color-mix(in srgb, var(--player) 11%, #fffdf6);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.86),
    0 5px 0 color-mix(in srgb, var(--player) 28%, transparent),
    0 11px 20px rgba(46,82,115,.10);
}

.ca-v3 [data-player="btc"] { --player: var(--ca-v3-btc); }
.ca-v3 [data-player="eth"] { --player: var(--ca-v3-eth); }
.ca-v3 [data-player="sol"] { --player: var(--ca-v3-sol); }
.ca-v3 [data-player="doge"] { --player: var(--ca-v3-doge); }

.ca-v3 :where(.ca-v3__player-card-avatar, [data-ca="player-avatar"]) {
  width: auto;
  height: min(48%, 134px);
  max-width: 44%;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(51, 70, 94, .13));
}

.ca-v3 :where(.ca-v3__player-card-name, [data-ca="player-name"]) {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.03em;
}

.ca-v3 :where(.ca-v3__character-rail, [data-ca="character-rail"]) {
  display: grid;
  grid-template-columns: 80px repeat(4, minmax(70px, 1fr)) 50px;
  align-items: center;
  gap: 9px;
  min-height: 0;
  padding: 9px 12px;
  border: 2px solid var(--ca-v3-line-warm);
  border-radius: var(--ca-v3-r-4);
  background: linear-gradient(180deg, #fffdf5, #f9edda);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(135, 99, 46, .10);
}

.ca-v3 :where(.ca-v3__character-tile, [data-ca="character-tile"]) {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 70px;
  overflow: hidden;
  border: 2px solid #c6d9e6;
  border-radius: var(--ca-v3-r-3);
  background: linear-gradient(#fff, #eef6f8);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(60,91,120,.10);
}

.ca-v3 :where(.ca-v3__character-tile, [data-ca="character-tile"]).is-selected,
.ca-v3 :where(.ca-v3__character-tile, [data-ca="character-tile"])[aria-selected="true"] {
  border-color: var(--ca-v3-orange-500);
  background: linear-gradient(#fffaf0, #ffedc6);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #d9790a, 0 8px 15px rgba(155,91,20,.13);
}

.ca-v3 :where(.ca-v3__waiting-side, [data-ca="waiting-side"]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.ca-v3 :where(.ca-v3__settings, [data-ca="settings"]) {
  padding: 13px;
}

.ca-v3 :where(.ca-v3__settings-row, [data-ca="settings-row"]) {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ca-v3 :where(.ca-v3__settings-label, [data-ca="settings-label"]) {
  color: #5c7089;
  font-size: 11px;
  font-weight: 900;
}

.ca-v3 :where(.ca-v3__map-selector, [data-ca="map-selector"]) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.ca-v3 :where(.ca-v3__map-card, [data-ca="map-card"]) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 76px;
  padding: 6px;
  border: 2px solid #decfb7;
  border-radius: 13px;
  background: linear-gradient(#fffef9, #f7eddd);
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(126, 92, 48, .10);
}

.ca-v3 :where(.ca-v3__map-card, [data-ca="map-card"]).is-selected,
.ca-v3 :where(.ca-v3__map-card, [data-ca="map-card"])[aria-selected="true"] {
  border-color: var(--ca-v3-orange-600);
  background: #fff3d9;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #da7108;
}

.ca-v3 :where(.ca-v3__chat, [data-ca="chat"]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.ca-v3 :where(.ca-v3__chat-title, [data-ca="chat-title"]) {
  margin: 0 0 8px 2px;
  font-size: 16px;
  font-weight: 950;
}

.ca-v3 :where(.ca-v3__chat-messages, [data-ca="chat-messages"]) {
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid #ead9bd;
  border-radius: var(--ca-v3-r-3);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 4px 10px rgba(55, 79, 104, .07), inset 0 1px 0 #fff;
  scrollbar-width: thin;
}

.ca-v3 :where(.ca-v3__chat-composer, [data-ca="chat-composer"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 8px;
  padding-top: 9px;
}

.ca-v3 :where(.ca-v3__chat-quick, [data-ca="chat-quick"]) {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  overflow-x: auto;
}

.ca-v3 :where(.ca-v3__waiting-footer, [data-ca="waiting-footer"]) {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 18px;
  border-top: 2px solid var(--ca-v3-line-warm);
  background: linear-gradient(180deg, rgba(255,252,243,.96), rgba(248,236,216,.96));
  box-shadow: inset 0 2px 0 #fff;
}

.ca-v3 :where(.ca-v3__waiting-start, [data-ca="start-button"]) {
  width: min(390px, 34vw);
  margin-left: auto;
}

/* ---------- Gameplay ---------- */
.ca-v3[data-ca-screen="battle"] :where(.ca-v3__shell, [data-ca="shell"]) {
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 0 12px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.ca-v3 :where(.ca-v3__hud, [data-ca="hud"]) {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) auto minmax(360px, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 8px 16px;
  border: 3px solid var(--ca-v3-line-strong);
  border-radius: var(--ca-v3-r-5);
  background: linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,247,229,.96));
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 rgba(37,78,116,.22), 0 14px 28px rgba(47,86,119,.16);
}

.ca-v3 :where(.ca-v3__hud-players, [data-ca="hud-players"]),
.ca-v3 :where(.ca-v3__hud-inventory, [data-ca="hud-inventory"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ca-v3 :where(.ca-v3__hud-inventory, [data-ca="hud-inventory"]) { justify-content: flex-end; }

.ca-v3 :where(.ca-v3__player-chip, [data-ca="player-chip"]) {
  --player: var(--ca-v3-sol);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 52px;
  padding: 4px 10px 4px 5px;
  border: 2px solid var(--player);
  border-radius: 14px;
  background: color-mix(in srgb, var(--player) 10%, #fffdf7);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 color-mix(in srgb, var(--player) 25%, transparent);
}

.ca-v3 :where(.ca-v3__timer, [data-ca="timer"]) {
  display: grid;
  place-items: center;
  min-width: 156px;
  min-height: 58px;
  padding: 3px 24px 6px;
  color: #fff;
  border: 3px solid var(--ca-v3-navy-950);
  border-radius: var(--ca-v3-pill);
  background: linear-gradient(#2a4d7a, #102d5a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 5px 0 rgba(6,25,55,.28);
  font: 950 30px/1 var(--ca-v3-mono);
  letter-spacing: .08em;
}

.ca-v3 :where(.ca-v3__counter, [data-ca="counter"]) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  color: #fff;
  border: 2px solid var(--ca-v3-navy-950);
  border-radius: 12px;
  background: linear-gradient(#294b77, #102d5a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 4px 0 rgba(6,25,55,.22);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ca-v3 :where(.ca-v3__battle-layout, [data-ca="battle-layout"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ca-v3-sidebar);
  gap: var(--ca-v3-gap);
  min-width: 0;
  min-height: 0;
}

.ca-v3 :where(.ca-v3__map-stage, [data-ca="map-stage"]) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.ca-v3 :where(.ca-v3__map-cabinet, [data-ca="map-cabinet"]) {
  position: relative;
  box-sizing: border-box;
  width: min(100%, calc(100dvh - 112px));
  max-height: 100%;
  aspect-ratio: 1 / 1;
  padding: clamp(10px, 1vh, 15px);
  overflow: hidden;
  border: 4px solid var(--ca-v3-line-strong);
  border-radius: 32px;
  background: linear-gradient(145deg, #fff9e9 0%, #edf6fb 38%, #cdddea 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.92),
    inset 0 -6px 0 rgba(118,145,171,.30),
    0 8px 0 rgba(74,105,137,.32),
    0 20px 40px rgba(38,72,104,.22);
}

.ca-v3 :where(.ca-v3__map-cabinet, [data-ca="map-cabinet"]) canvas,
.ca-v3 :where(.ca-v3__map-canvas, [data-ca="map-canvas"]) {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  object-fit: contain;
}

.ca-v3 :where(.ca-v3__game-sidebar, [data-ca="game-sidebar"]) {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 11px;
  border: 3px solid var(--ca-v3-line-strong);
  border-radius: var(--ca-v3-r-5);
  background: linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,247,229,.96));
  box-shadow: inset 0 2px 0 #fff, 0 7px 0 rgba(37,78,116,.22), 0 18px 32px rgba(47,86,119,.18);
}

.ca-v3 :where(.ca-v3__room-summary, [data-ca="room-summary"]),
.ca-v3 :where(.ca-v3__roster, [data-ca="roster"]) {
  padding: 10px;
}

.ca-v3 :where(.ca-v3__roster-row, [data-ca="roster-row"]) {
  --player: var(--ca-v3-sol);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px;
  border: 2px solid var(--player);
  border-radius: 13px;
  background: color-mix(in srgb, var(--player) 10%, #fffdf8);
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 color-mix(in srgb, var(--player) 18%, transparent);
}

.ca-v3 :where(.ca-v3__roster-row, [data-ca="roster-row"]) + :where(.ca-v3__roster-row, [data-ca="roster-row"]) {
  margin-top: 5px;
}

.ca-v3 :where(.ca-v3__roster-row, [data-ca="roster-row"])[data-state="liquidated"] {
  filter: saturate(.45);
  opacity: .72;
}

.ca-v3 :where(.ca-v3__spectator-card, [data-ca="spectator-card"]) {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: min(310px, 46%);
  min-height: 174px;
  padding: 20px;
  color: #fff;
  border: 3px solid #dce8f3;
  border-radius: var(--ca-v3-r-5);
  background: linear-gradient(180deg, rgba(48,77,113,.96), rgba(13,42,82,.97));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.14), 0 7px 0 rgba(7,25,55,.34), 0 18px 34px rgba(7,25,55,.30);
  text-align: center;
  transform: translate(-50%, -50%);
}

.ca-v3 :where(.ca-v3__spectator-card, [data-ca="spectator-card"]) h2 {
  margin: 12px 0 7px;
  font-size: 28px;
  font-weight: 950;
}

.ca-v3 :where(.ca-v3__result-modal, [data-ca="result-modal"]) {
  position: relative;
  width: min(620px, calc(100vw - 36px));
  max-height: calc(100dvh - 40px);
  padding: 74px 34px 30px;
  overflow: auto;
  border: 4px solid var(--ca-v3-line-strong);
  border-radius: 34px;
  background: linear-gradient(180deg, #fffdf5, #fff2d6);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), inset 0 -5px 0 rgba(211,172,105,.28), 0 9px 0 rgba(36,72,108,.28), 0 26px 60px rgba(24,55,90,.30);
}

.ca-v3 :where(.ca-v3__result-plate, [data-ca="result-plate"]) {
  position: absolute;
  top: -2px;
  left: 50%;
  min-width: 290px;
  min-height: 70px;
  padding: 0 28px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 4px solid var(--ca-v3-navy-900);
  border-radius: var(--ca-v3-pill);
  background: linear-gradient(#ffd256, #ff8b13);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.45), 0 7px 0 #c95300, 0 12px 22px rgba(120,64,8,.22);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 2px 0 rgba(124,59,0,.38);
  transform: translate(-50%, -36%);
}

.ca-v3 :where(.ca-v3__result-stats, [data-ca="result-stats"]) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.ca-v3 :where(.ca-v3__stat-card, [data-ca="stat-card"]) {
  display: grid;
  place-items: center;
  min-height: 94px;
  padding: 10px;
  border: 2px solid #e8d1a8;
  border-radius: var(--ca-v3-r-3);
  background: linear-gradient(#fffef9, #f8edd9);
  box-shadow: inset 0 3px 0 #fff, 0 4px 0 rgba(128,95,50,.12);
}

.ca-v3 :where(.ca-v3__ranking-row, [data-ca="ranking-row"]) {
  --player: #9db9d2;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 8px;
  padding: 0 14px;
  border: 2px solid var(--player);
  border-radius: 15px;
  background: color-mix(in srgb, var(--player) 9%, #fffdf8);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 color-mix(in srgb, var(--player) 18%, transparent);
}

.ca-v3 :where(.ca-v3__ranking-row, [data-ca="ranking-row"])[data-rank="1"] {
  --player: #f5b82e;
  background: linear-gradient(#fff6c8, #ffe28a);
}

.ca-v3 :where(.ca-v3__result-actions, [data-ca="result-actions"]) {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 14px;
  margin-top: 20px;
}

.ca-v3 :where(.ca-v3__result-actions, [data-ca="result-actions"]) > :only-child {
  grid-column: 1 / -1;
  width: min(100%, 360px);
  justify-self: center;
}

@media (max-width: 1100px) {
  .ca-v3 { min-width: 768px; }
  .ca-v3 :where(.ca-v3__waiting-layout, [data-ca="waiting-layout"]) { grid-template-columns: minmax(0, 1fr) 310px; }
  .ca-v3 :where(.ca-v3__hud, [data-ca="hud"]) { grid-template-columns: minmax(260px, 1fr) auto minmax(240px, 1fr); padding-inline: 10px; gap: 8px; }
  .ca-v3 :where(.ca-v3__battle-layout, [data-ca="battle-layout"]) { grid-template-columns: 1fr; }
  .ca-v3 :where(.ca-v3__game-sidebar, [data-ca="game-sidebar"]) {
    position: absolute;
    z-index: 40;
    top: 88px;
    right: 12px;
    bottom: 12px;
    width: min(370px, calc(100vw - 24px));
    transform: translateX(calc(100% + 28px));
    transition: transform 180ms ease;
  }
  .ca-v3 :where(.ca-v3__game-sidebar, [data-ca="game-sidebar"]).is-open { transform: translateX(0); }
}

@media (max-height: 800px) {
  .ca-v3[data-ca-screen="waiting"] :where(.ca-v3__shell, [data-ca="shell"]) { grid-template-rows: 58px minmax(0, 1fr) 62px; }
  .ca-v3 :where(.ca-v3__waiting-main, [data-ca="waiting-main"]) { grid-template-rows: minmax(0, 1fr) 86px; }
  .ca-v3[data-ca-screen="battle"] :where(.ca-v3__shell, [data-ca="shell"]) { grid-template-rows: 64px minmax(0, 1fr); gap: 8px; }
  .ca-v3 :where(.ca-v3__timer, [data-ca="timer"]) { min-height: 48px; font-size: 25px; }
  .ca-v3 :where(.ca-v3__spectator-card, [data-ca="spectator-card"]) { min-height: 148px; }
}

/* ===== styles/99-compatibility-overrides.css ===== */
/*
  Load this file after every existing project stylesheet.
  It normalizes legacy classes that appeared in the current screenshots.
  Prefer the data-ca contract for new markup; these selectors are the migration safety net.
*/

.ca-v3.ca-game-screen {
  padding: 0 !important;
  color: var(--ca-v3-ink) !important;
  background:
    linear-gradient(rgba(225,244,252,.34), rgba(233,246,249,.48)),
    var(--ca-v3-bg-image) center / cover no-repeat fixed !important;
}

.ca-v3 .ca-surface,
.ca-v3 .ca-settings,
.ca-v3 .ca-room-summary,
.ca-v3 .ca-roster,
.ca-v3 .ca-chat {
  border: 2px solid var(--ca-v3-line-warm) !important;
  border-radius: var(--ca-v3-r-4) !important;
  background: linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,247,231,.96)) !important;
  box-shadow: inset 0 2px 0 #fff, var(--ca-v3-shadow-panel) !important;
}

.ca-v3 .ca-game-shell,
.ca-v3 .ca-waiting-shell {
  width: min(1760px, calc(100vw - 32px)) !important;
  height: calc(100dvh - 28px) !important;
  margin: 14px auto !important;
}

.ca-v3 .ca-player-card {
  border-width: 3px !important;
  border-radius: var(--ca-v3-r-5) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.86), 0 5px 0 color-mix(in srgb, var(--card, #a978f5) 28%, transparent) !important;
}

.ca-v3 .ca-character-rail,
.ca-v3 .ca-waiting-footer {
  border-color: var(--ca-v3-line-warm) !important;
  background: linear-gradient(180deg, #fffdf5, #f9edda) !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(135,99,46,.10) !important;
}

.ca-v3 .ca-segmented button {
  min-height: 38px !important;
  border: 2px solid #dfcfb7 !important;
  border-radius: var(--ca-v3-r-2) !important;
  background: linear-gradient(#fffef9, #f6ecdc) !important;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(126,94,52,.10) !important;
}

.ca-v3 .ca-segmented button[aria-pressed="true"],
.ca-v3 .ca-segmented button.is-selected {
  border-color: var(--ca-v3-orange-600) !important;
  background: linear-gradient(#ffd55f, #ff9a18) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.46), 0 4px 0 #d86d06 !important;
}

.ca-v3 .ca-button,
.ca-v3 button.ca-button,
.ca-v3 .game-start-button,
.ca-v3 .start-button,
.ca-v3 .invite-button,
.ca-v3 .leave-button,
.ca-v3 .send-button,
.ca-v3 .result-button {
  border: 2px solid var(--ca-v3-navy-900) !important;
  border-radius: var(--ca-v3-pill) !important;
  background-image: none !important;
}

.ca-v3 .ca-chat__messages,
.ca-v3 .chat-messages,
.ca-v3 .messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  border: 2px solid #ead9bd !important;
  border-radius: var(--ca-v3-r-3) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 4px 10px rgba(55,79,104,.07), inset 0 1px 0 #fff !important;
}

.ca-v3 .ca-chat__input,
.ca-v3 .chat-input,
.ca-v3 input[type="text"] {
  height: 46px !important;
  border: 2px solid #bcd4e3 !important;
  border-radius: var(--ca-v3-pill) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: inset 0 3px 7px rgba(67,91,115,.08), inset 0 1px 0 #fff !important;
}

.ca-v3 .ca-map-frame {
  border: 4px solid var(--ca-v3-line-strong) !important;
  border-radius: 32px !important;
  background: linear-gradient(145deg, #fff9e9 0%, #edf6fb 38%, #cdddea 100%) !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.92), inset 0 -6px 0 rgba(118,145,171,.30), 0 8px 0 rgba(74,105,137,.32), 0 20px 40px rgba(38,72,104,.22) !important;
}

.ca-v3 .ca-game-sidebar {
  border: 3px solid var(--ca-v3-line-strong) !important;
  border-radius: var(--ca-v3-r-5) !important;
  background: linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,247,229,.96)) !important;
  box-shadow: inset 0 2px 0 #fff, 0 7px 0 rgba(37,78,116,.22), 0 18px 32px rgba(47,86,119,.18) !important;
}

.ca-v3 .ca-hud {
  border: 3px solid var(--ca-v3-line-strong) !important;
  border-radius: var(--ca-v3-r-5) !important;
  background: linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,247,229,.96)) !important;
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 rgba(37,78,116,.22), 0 14px 28px rgba(47,86,119,.16) !important;
}

.ca-v3 .liquidated-overlay,
.ca-v3 .spectator-overlay,
.ca-v3 .eliminated-overlay {
  color: #fff !important;
  border: 3px solid #dce8f3 !important;
  border-radius: var(--ca-v3-r-5) !important;
  background: linear-gradient(180deg, rgba(48,77,113,.96), rgba(13,42,82,.97)) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.14), 0 7px 0 rgba(7,25,55,.34), 0 18px 34px rgba(7,25,55,.30) !important;
}

.ca-v3 .result-modal,
.ca-v3 .game-result-modal,
.ca-v3 .result-dialog {
  border: 4px solid var(--ca-v3-line-strong) !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, #fffdf5, #fff2d6) !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), inset 0 -5px 0 rgba(211,172,105,.28), 0 9px 0 rgba(36,72,108,.28), 0 26px 60px rgba(24,55,90,.30) !important;
}

/* No page scroll. Only chat message wells may scroll. */
.ca-v3,
.ca-v3 .ca-game-shell,
.ca-v3 .ca-waiting-shell,
.ca-v3 .ca-battle-layout,
.ca-v3 .ca-waiting-layout {
  overflow: hidden !important;
}