@import url("./kott-design-tokens.css?v=20260818a");

:root {
  --black: var(--kott-color-black);
  --charcoal: #0b0d0d;
  --panel: rgba(15, 17, 17, 0.92);
  --panel-soft: rgba(20, 21, 21, 0.72);
  --line: rgb(212 166 58 / 52%);
  --line-soft: var(--kott-line-quiet);
  --gold: var(--kott-color-gold);
  --gold-light: var(--kott-color-gold-bright);
  --gold-deep: var(--kott-color-gold-deep);
  --green: var(--kott-color-cloth);
  --green-light: var(--kott-color-cloth-active);
  --text: var(--kott-color-ivory);
  --muted: #a7a197;
  --muted-2: #716d66;
  --shadow: rgba(0, 0, 0, 0.58);
  --danger: var(--kott-color-error);
  --hall-club-background: url("../assets/lobby_hall_v2/club_background_reference.jpg?v=20260811d");
  --hall-club-preview: url("../assets/lobby_hall_v2/club_background_preview.jpg?v=20260811d");
  color-scheme: dark;
  font-family: var(--font-ui);
}

/* Premium training discipline selector */
.hall-training-copy > small {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hall-training-copy > small span,
.hall-training-copy > small b {
  font-weight: 500;
}

.hall-training-copy > small i {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, #e7bb53, rgba(231, 187, 83, 0.1));
}

.hall-training-modes button {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  overflow: hidden;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.hall-training-modes button::after {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #102018;
  font-size: 10px;
  font-weight: 800;
  content: "✓";
  background: #e8bf59;
  border: 1px solid #fff0a9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 150ms ease, transform 150ms ease;
}

.hall-training-modes button.is-selected::after {
  opacity: 1;
  transform: scale(1);
}

.hall-training-modes button:hover,
.hall-training-modes button:focus-visible {
  border-color: rgba(239, 196, 91, 0.78);
  box-shadow: inset 0 1px rgba(255, 248, 218, 0.07), 0 8px 22px rgba(0, 0, 0, 0.24);
}

.hall-training-modes button:active {
  transform: translateY(1px);
}

.hall-training-mark {
  width: 36px;
  height: 36px;
  overflow: visible;
  color: #e6b84d;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.42));
}

.hall-training-ball-rim,
.hall-training-rack {
  fill: rgba(4, 8, 7, 0.82);
  stroke: currentColor;
  stroke-width: 1.6;
}

.hall-training-ball-stripe {
  fill: rgba(230, 184, 77, 0.9);
}

.hall-training-ball-spot {
  fill: #f2ead2;
  stroke: #b98a29;
  stroke-width: 0.8;
}

.hall-training-mark text {
  fill: #12120e;
  font-family: "KottCondensed", "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
}

.hall-training-ball-glint {
  fill: none;
  stroke: rgba(255, 241, 190, 0.82);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.hall-training-balls circle {
  fill: #efe2bf;
  stroke: #a97420;
  stroke-width: 0.8;
}

.hall-training-mark-snooker .hall-training-balls circle {
  fill: #9f2531;
  stroke: #e3a548;
}

.hall-training-cue-ball {
  fill: #f5eedc;
  stroke: #cf9d37;
  stroke-width: 0.8;
}

@media (max-width: 860px) and (orientation: portrait) {
  .hall-training-room > .hall-training {
    display: flex;
    align-items: flex-end;
    padding: 0 12px 14px;
    background-position: 65% bottom;
    background-size: auto 145%;
  }

  .hall-training::before {
    background:
      linear-gradient(180deg, rgba(2, 6, 5, 0.08) 0 28%, rgba(2, 7, 5, 0.34) 48%, rgba(2, 7, 5, 0.91) 76%, #030806 100%),
      linear-gradient(90deg, rgba(3, 8, 6, 0.28), transparent 36% 70%, rgba(3, 8, 6, 0.3));
  }

  .hall-training-copy {
    position: relative;
    width: 100%;
    align-self: auto;
    padding: 17px 15px 15px;
    overflow: hidden;
    background:
      linear-gradient(145deg, rgba(9, 23, 18, 0.92), rgba(4, 11, 9, 0.965)),
      linear-gradient(90deg, rgba(129, 77, 27, 0.12), transparent 42%);
    border: 1px solid rgba(222, 176, 69, 0.48);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 247, 215, 0.07);
    backdrop-filter: blur(12px);
  }

  .hall-training-copy::before {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #e7ba51 20% 80%, transparent);
  }

  .hall-training-copy > small {
    color: #ddb456;
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  .hall-training-copy > small i {
    flex: 1 1 auto;
  }

  .hall-training-copy h1 {
    margin: 7px 0 3px;
    font-size: clamp(35px, 10.5vw, 43px);
    font-weight: 570;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  .hall-training-copy > p {
    max-width: none;
    margin: 0 0 13px;
    color: #c9c5bb;
    font-size: 12px;
    line-height: 1.35;
  }

  .hall-training-modes {
    gap: 8px;
    margin-bottom: 12px;
  }

  .hall-training-modes button {
    min-height: 58px;
    grid-template-columns: 39px minmax(0, 1fr);
    gap: 9px;
    padding: 7px 28px 7px 9px;
    color: #d7d2c7;
    font-size: 15px;
    font-weight: 420;
    line-height: 1.15;
    background: linear-gradient(150deg, rgba(13, 25, 21, 0.94), rgba(5, 13, 11, 0.96));
    border-color: rgba(211, 161, 52, 0.32);
    border-radius: 8px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  }

  .hall-training-modes button.is-selected {
    color: #fff6df;
    background:
      linear-gradient(135deg, rgba(18, 91, 62, 0.98), rgba(7, 45, 33, 0.98)),
      linear-gradient(90deg, rgba(231, 187, 82, 0.12), transparent);
    border-color: #dfb24b;
    box-shadow: inset 3px 0 #edc464, inset 0 1px rgba(255, 249, 218, 0.08), 0 8px 20px rgba(0, 0, 0, 0.22);
  }

  .hall-training-mark {
    width: 38px;
    height: 38px;
  }

  .hall-training-copy .hall-play-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 12px;
    font-size: clamp(21px, 6.1vw, 25px);
    background: linear-gradient(180deg, #f0d27f 0%, #ddb158 52%, #b77b25 100%);
    border: 1px solid #f6de94;
    border-radius: 9px;
    box-shadow: inset 0 1px rgba(255, 250, 214, 0.9), inset 0 -1px rgba(89, 50, 8, 0.45), 0 10px 24px rgba(0, 0, 0, 0.38);
  }

  .hall-bottom-nav span {
    min-height: 20px;
    overflow: visible;
    font-size: clamp(7.5px, 2.15vw, 9px);
    line-height: 1.02;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 860px) and (max-height: 700px) and (orientation: portrait) {
  .hall-training-room > .hall-training {
    padding: 0 9px 8px;
  }

  .hall-training-copy {
    padding: 10px;
  }

  .hall-training-copy h1 {
    margin-top: 4px;
    font-size: 30px;
  }

  .hall-training-copy > p {
    display: none;
  }

  .hall-training-modes {
    gap: 5px;
    margin: 7px 0;
  }

  .hall-training-modes button {
    min-height: 44px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 23px 4px 7px;
    font-size: 12px;
  }

  .hall-training-mark {
    width: 29px;
    height: 29px;
  }

  .hall-training-modes button::after {
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .hall-training-copy .hall-play-button {
    min-height: 44px;
    font-size: 18px;
  }
}

/* Shared in-game utility rail: keep the top edge clear for the match HUD. */
.game-room-fullscreen {
  --kott-game-hud-bottom: max(8px, env(safe-area-inset-bottom));
  --kott-game-utility-height: 48px;
}

.game-room-fullscreen .game-save-replay-button,
.game-room-fullscreen .game-lobby-button,
.game-room-fullscreen .visualizer-quality {
  top: auto;
  bottom: var(--kott-game-hud-bottom);
  min-height: var(--kott-game-utility-height);
}

.game-room-fullscreen .game-save-replay-button {
  left: max(8px, env(safe-area-inset-left));
  width: min(144px, calc(50vw - 492px));
  min-width: 124px;
  max-width: 144px;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.05;
  text-align: left;
}

.game-room-fullscreen .game-save-replay-button span:first-child {
  flex: 0 0 auto;
  font-size: 14px;
}

.game-room-fullscreen .game-save-replay-button span:last-child {
  display: block;
  max-width: 104px;
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: normal;
}

.game-room-fullscreen .game-lobby-button {
  right: max(8px, env(safe-area-inset-right));
  width: 68px;
  min-width: 68px;
  padding: 0 8px;
  font-size: 10px;
}

.game-room-fullscreen .visualizer-quality {
  right: calc(max(8px, env(safe-area-inset-right)) + 76px);
  z-index: 12;
  width: 82px;
  justify-content: center;
  gap: 0;
  padding: 5px;
}

.game-room-fullscreen .visualizer-quality > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.game-room-fullscreen .visualizer-quality select {
  width: 100%;
  min-height: 36px;
  padding: 0 18px 0 6px;
  font-size: 10px;
}

.game-room-fullscreen .ball-in-hand-hint {
  bottom: calc(var(--kott-game-hud-bottom) + 122px);
}

@media (min-width: 981px) and (max-width: 1180px) {
  .game-room-fullscreen .kott-shot-hud-desktop {
    width: calc(100% - 320px);
    grid-template-columns: 124px 138px 78px minmax(245px, 1fr);
  }

  .game-room-fullscreen .shot-panel-actions {
    grid-template-columns: repeat(7, minmax(34px, 1fr));
  }
}

@media (max-width: 980px) and (orientation: landscape),
  (max-height: 520px) and (orientation: landscape) {
  .game-room-fullscreen {
    --kott-game-hud-bottom: max(10px, env(safe-area-inset-bottom));
    --kott-game-utility-height: 44px;
  }

  .game-room-fullscreen .game-save-replay-button {
    right: auto;
    bottom: var(--kott-game-hud-bottom);
    left: calc(max(10px, env(safe-area-inset-left)) + 136px);
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    padding: 0 8px;
  }

  .game-room-fullscreen .game-save-replay-button span:last-child {
    display: none;
  }

  .game-room-fullscreen .game-save-replay-button span:first-child {
    font-size: 17px;
  }

  .game-room-fullscreen .game-lobby-button {
    right: calc(max(10px, env(safe-area-inset-right)) + 74px);
    bottom: var(--kott-game-hud-bottom);
    width: 66px;
    min-width: 66px;
    padding: 0 6px;
    font-size: 9px;
  }

  .game-room-fullscreen .visualizer-quality {
    right: calc(max(10px, env(safe-area-inset-right)) + 148px);
    bottom: var(--kott-game-hud-bottom);
    width: 72px;
    min-height: var(--kott-game-utility-height);
    padding: 4px;
  }

  .game-room-fullscreen .visualizer-quality select {
    min-height: 34px;
    padding: 0 15px 0 4px;
    font-size: 9px;
  }

  .game-room-fullscreen .ball-in-hand-hint {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    bottom: auto;
  }
}

/* Billiard Hall matchmaking workspace: full-height, stable and device-adaptive. */
.hall-room:has(.hall-match-setup) {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.hall-room:has(.hall-match-setup) > .hall-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  padding: clamp(18px, 2.3vw, 34px);
  background-position: center;
}

.hall-room:has(.hall-match-setup) > .hall-side,
.hall-room:has(.hall-match-setup) > .hall-edge-button,
.hall-room:has(.hall-match-setup) > .hall-drawer-scrim {
  display: none;
}

.hall-match-setup {
  width: min(100%, 1180px);
  height: 100%;
  max-height: 640px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 27%);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(12px, 1.25vw, 18px);
  padding: clamp(18px, 1.7vw, 26px);
  background:
    linear-gradient(145deg, rgba(10, 23, 18, 0.975), rgba(5, 11, 9, 0.985)),
    radial-gradient(circle at 16% -12%, rgba(225, 181, 74, 0.12), transparent 38%);
  border-color: rgba(225, 181, 74, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 209, 0.07),
    0 26px 70px rgba(0, 0, 0, 0.58);
}

.hall-match-setup .hall-discipline-fieldset {
  min-height: 0;
  padding-inline-end: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hall-match-setup .hall-discipline-fieldset:focus-visible {
  outline: 2px solid rgba(239, 203, 108, 0.72);
  outline-offset: 4px;
}

.hall-card-close {
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  border-radius: 50%;
}

.hall-card-close:hover,
.hall-card-close:focus-visible {
  color: #fff0b8;
  background: rgba(225, 181, 74, 0.1);
  outline: 1px solid rgba(225, 181, 74, 0.45);
}

.hall-option-grid {
  min-height: 0;
  align-content: start;
}

.hall-search-footer {
  min-width: 0;
}

@media (max-width: 1180px) and (min-width: 861px) and (min-height: 541px) {
  .hall-room:has(.hall-match-setup) > .hall-stage {
    padding: 18px;
  }

  .hall-match-setup {
    width: min(100%, 1060px);
    max-height: none;
    grid-template-columns: minmax(0, 1fr) minmax(232px, 28%);
    gap: 12px;
    padding: 16px;
  }

  .hall-choice-grid {
    gap: 8px;
  }

  .hall-discipline-group {
    padding: 8px;
  }

  .hall-choice {
    min-height: 46px;
    padding: 6px;
  }
}

@media (max-width: 1080px) and (min-width: 861px) {
  .hall-topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(410px, auto);
  }

  .hall-brand {
    display: none;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  .hall-room:has(.hall-match-setup) > .hall-stage {
    padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  }

  .hall-match-setup {
    width: min(100%, 620px);
    height: 100%;
    max-height: none;
    gap: 8px;
    padding: 12px 10px 10px;
  }

  .hall-match-setup .hall-discipline-fieldset {
    padding-inline-end: 4px;
  }

  .hall-match-setup .hall-discipline-fieldset > legend {
    padding-inline-end: 42px;
  }

  .hall-card-close {
    top: 2px;
    right: 2px;
  }

  .hall-choice-grid {
    gap: 7px;
  }

  .hall-discipline-group {
    padding: 8px;
  }

  .hall-choice {
    min-height: 52px;
  }

  .hall-option-grid {
    flex: 0 0 auto;
    gap: 7px;
  }

  .hall-option-grid fieldset {
    margin-top: 0;
  }

  .hall-segment {
    min-height: 44px;
  }

  .hall-search-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding-top: 7px;
  }

  .hall-search-footer p {
    min-width: 54px;
  }

  .hall-match-setup .hall-play-button {
    min-height: 48px;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  .hall-room:has(.hall-match-setup) > .hall-stage {
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .hall-match-setup {
    width: min(100%, 1160px);
    height: 100%;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 27%);
    gap: 8px 12px;
    padding: 9px 13px;
  }

  .hall-match-setup .hall-discipline-fieldset {
    padding-inline-end: 5px;
  }

  .hall-card-close {
    top: 0;
    right: 0;
  }

  .hall-option-grid {
    gap: 6px;
    padding-inline-end: 32px;
  }

  .hall-search-footer {
    gap: 6px;
    padding-top: 6px;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .hall-match-setup {
    grid-template-columns: minmax(0, 1fr) minmax(196px, 28%);
    column-gap: 8px;
    padding: 6px 10px;
  }

  .hall-match-setup .hall-discipline-fieldset {
    grid-column: 1;
    grid-row: 1 / 3;
    padding-inline-end: 4px;
  }

  .hall-option-grid {
    grid-column: 2;
    grid-row: 1;
    gap: 3px;
    padding-inline-end: 30px;
  }

  .hall-search-footer {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    padding-top: 4px;
  }

  .hall-search-footer p {
    display: none;
  }

  .hall-match-setup .hall-play-button {
    width: 100%;
    min-height: 36px;
    font-size: 18px;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  .hall-training-modes button {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  .hall-training-mark {
    width: 25px;
    height: 25px;
  }

  .hall-training-modes button::after {
    top: 3px;
    right: 3px;
    width: 13px;
    height: 13px;
    font-size: 7px;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-ui);
  direction: ltr;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(circle at 52% 12%, rgba(212, 166, 58, 0.14), transparent 22rem),
    radial-gradient(circle at 24% 78%, rgba(6, 53, 31, 0.55), transparent 30rem),
    linear-gradient(135deg, #040505, #121414 52%, #050505);
}

body[data-view="lobby"] {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.login-screen {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(10px, 2.4vw, 36px);
  overflow-x: clip;
  isolation: isolate;
}

.login-screen::before {
  position: absolute;
  inset: 0;
  z-index: -3;
  content: "";
  background:
    linear-gradient(rgba(4, 5, 5, 0.8), rgba(4, 5, 5, 0.88)),
    radial-gradient(ellipse at 50% 92%, rgba(7, 65, 38, 0.8) 0 10%, transparent 36%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 5px
    );
}

.login-screen::after {
  position: absolute;
  inset: -16%;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 205, 103, 0.14), transparent 8rem),
    radial-gradient(circle at 70% 14%, rgba(255, 205, 103, 0.13), transparent 7rem),
    radial-gradient(circle at 82% 70%, rgba(90, 45, 18, 0.35), transparent 16rem);
  filter: blur(2px);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(270px, 318px) minmax(0, 1fr);
  width: min(1080px, calc(100vw - 32px));
  height: min(760px, calc(100svh - 32px));
  min-height: 0;
  max-height: 760px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(21, 23, 23, 0.97), rgba(7, 8, 8, 0.97)),
    linear-gradient(90deg, rgba(6, 53, 31, 0.24), transparent 48%);
  border: 1px solid rgba(212, 166, 58, 0.84);
  border-radius: 24px;
  box-shadow:
    0 34px 80px var(--shadow),
    inset 0 1px 0 rgba(255, 238, 188, 0.08),
    inset 0 0 80px rgba(255, 255, 255, 0.025);
}

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3.4vh, 40px) 32px;
  overflow: hidden;
  border-right: 1px solid rgba(244, 240, 232, 0.06);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 72%, rgba(2, 5, 4, 0.94) 89%),
    url("../assets/login_brand_panel.png") top center / cover no-repeat,
    linear-gradient(180deg, rgba(7, 16, 12, 0.9), rgba(4, 6, 5, 0.95));
}

.brand-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 50%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.brand-mark {
  position: relative;
  z-index: 1;
  width: min(210px, 58%);
  margin: 0 auto 22px;
  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 20px rgba(212, 166, 58, 0.18));
}

.brand-wordmark {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  justify-items: center;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 0.86;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 #593710,
    0 8px 22px rgba(0, 0, 0, 0.74);
}

.brand-wordmark span:nth-child(1),
.brand-wordmark span:nth-child(3) {
  font-size: clamp(54px, 5vw, 78px);
}

.brand-wordmark span:nth-child(2) {
  margin: 8px 0 6px;
  color: #f8dda0;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.18em;
}

.brand-subtitle {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  color: var(--gold-light);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.brand-subtitle::after {
  display: block;
  width: 86px;
  height: 1px;
  margin: 20px auto 0;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.brand-scene {
  position: relative;
  flex: 1;
  min-height: 260px;
  margin: 16px -38px 0;
}

.scene-table {
  position: absolute;
  right: -22%;
  bottom: -24%;
  left: -18%;
  height: 58%;
  background:
    radial-gradient(ellipse at 52% 18%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(145deg, #0c5b37, #052719 76%);
  border-top: 12px solid #3a1a0c;
  box-shadow: inset 0 26px 36px rgba(0, 0, 0, 0.32);
  transform: perspective(420px) rotateX(62deg);
}

.scene-cue {
  position: absolute;
  bottom: 31%;
  left: 50%;
  width: 6px;
  height: 360px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b3b14, #f0c66b 45%, #6f3c14);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 32px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 100%;
}

.scene-cue-left {
  transform: translateX(-50%) rotate(-58deg);
}

.scene-cue-right {
  transform: translateX(-50%) rotate(58deg);
}

.scene-ball {
  position: absolute;
  right: 26%;
  bottom: 15%;
  display: grid;
  width: 140px;
  height: 140px;
  place-items: center;
  color: #090909;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  font-weight: 900;
  background:
    radial-gradient(circle at 38% 30%, #3a3934, #050505 62%),
    #050505;
  border: 1px solid rgba(255, 224, 143, 0.24);
  border-radius: 50%;
  box-shadow:
    inset -22px -24px 38px rgba(0, 0, 0, 0.78),
    inset 10px 12px 18px rgba(255, 255, 255, 0.08),
    0 30px 45px rgba(0, 0, 0, 0.62);
}

.scene-ball::before {
  position: absolute;
  width: 74px;
  height: 74px;
  content: "";
  background: linear-gradient(145deg, #fff5cf, #c9a04f 82%);
  border-radius: 50%;
}

.scene-ball {
  color: #111;
}

.scene-ball::after {
  position: absolute;
  content: "8";
}

.scene-crown {
  position: absolute;
  right: 29%;
  bottom: 47%;
  width: 92px;
  height: 58px;
  background:
    linear-gradient(150deg, transparent 0 16%, var(--gold) 17% 28%, transparent 29% 38%, var(--gold-light) 39% 56%, transparent 57% 66%, var(--gold) 67% 80%, transparent 81%),
    linear-gradient(180deg, transparent 0 55%, var(--gold) 56% 72%, #8a5b16 73%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}

.brand-mark,
.brand-wordmark,
.brand-subtitle,
.brand-scene {
  display: none;
}

.support {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-top: auto;
  margin-left: 0;
  padding: 17px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.support::before {
  position: absolute;
  inset: -28px -38px -50px;
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgba(3, 5, 5, 0), rgba(3, 6, 5, 0.96) 42%);
}

.support a {
  width: fit-content;
  color: var(--gold-light);
  text-decoration-color: rgba(242, 199, 102, 0.5);
  text-underline-offset: 4px;
}

.form-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: clamp(26px, 4.2vh, 42px) clamp(34px, 4.2vw, 50px) clamp(20px, 3vh, 32px);
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 10%, rgba(255, 255, 255, 0.045), transparent 17rem),
    linear-gradient(135deg, rgba(20, 22, 22, 0.76), rgba(6, 7, 7, 0.48));
}

.form-topline,
.auth-tabs,
.auth-form,
.divider,
.social-grid {
  flex: 0 0 auto;
}

.form-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(34px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: 0;
}

.form-topline p {
  margin: 0;
  color: var(--gold);
  font-size: clamp(16px, 1.35vw, 20px);
}

.language-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: clamp(170px, 18vw, 230px);
  min-width: 0;
  height: 52px;
  justify-content: center;
  gap: 10px;
  padding: 0 14px 0 18px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(39, 40, 40, 0.9), rgba(17, 18, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.language-select select {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 28px 0 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: 0;
}

.language-select option {
  color: var(--text);
  background: #111;
}

.language-select svg {
  position: absolute;
  right: 14px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.auth-tabs {
  display: flex;
  gap: 44px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.auth-tab {
  position: relative;
  min-width: 154px;
  padding: 0 0 16px;
  color: #8f8980;
  font-size: 22px;
  text-align: center;
  background: transparent;
  border: 0;
}

.auth-tab.is-active {
  color: var(--gold-light);
}

.auth-tab.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 18px rgba(212, 166, 58, 0.44);
}

.auth-form {
  display: grid;
  gap: 16px;
  min-height: 222px;
  align-content: start;
}

.field {
  position: relative;
  display: flex;
  align-items: center;
  height: 62px;
  background: linear-gradient(180deg, rgba(32, 33, 33, 0.92), rgba(22, 23, 23, 0.92));
  border: 1px solid rgba(244, 240, 232, 0.18);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 24px rgba(0, 0, 0, 0.2);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease,
    transform 160ms ease,
    margin 160ms ease;
}

.field:focus-within {
  border-color: rgba(242, 199, 102, 0.72);
  box-shadow:
    0 0 0 3px rgba(212, 166, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.field.is-hidden {
  height: 0;
  margin-bottom: -20px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

body[data-auth-mode="register"] .form-topline {
  margin-bottom: 28px;
}

body[data-auth-mode="register"] .auth-tabs {
  margin-bottom: 20px;
}

body[data-auth-mode="register"] .auth-form {
  gap: 14px;
  min-height: auto;
}

body[data-auth-mode="register"] .field {
  height: 56px;
}

body[data-auth-mode="register"] .field input {
  font-size: 21px;
}

body[data-auth-mode="register"] .form-row {
  display: none;
}

body[data-auth-mode="register"] .primary-action {
  height: 58px;
}

body[data-auth-mode="register"] .divider {
  margin: 18px 0 18px;
}

body[data-auth-mode="register"] .divider.lower {
  margin-top: 24px;
}

body[data-auth-mode="register"] .social-button {
  min-height: 74px;
}

body[data-auth-mode="register"] .provider-icon,
body[data-auth-mode="register"] .social-button span {
  font-size: 29px;
  width: 29px;
  height: 29px;
}

.field-icon {
  display: grid;
  width: 72px;
  place-items: center;
  color: #8f8980;
}

.field svg,
.ghost-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.field input {
  width: 100%;
  min-width: 0;
  height: 100%;
  color: var(--text);
  font-size: 22px;
  background: transparent;
  border: 0;
  outline: none;
}

html[dir="rtl"] .field input,
html[dir="rtl"] .form-topline,
html[dir="rtl"] .auth-tab,
html[dir="rtl"] .divider {
  text-align: right;
}

html[dir="rtl"] .auth-shell,
html[dir="rtl"] .brand-panel {
  direction: ltr;
}

html[dir="rtl"] .form-panel {
  direction: rtl;
}

html[dir="rtl"] .language-select {
  padding: 0 18px 0 14px;
}

html[dir="rtl"] .language-select select {
  padding: 0 0 0 28px;
}

html[dir="rtl"] .language-select svg {
  right: auto;
  left: 14px;
}

.field input::placeholder {
  color: #8f8980;
}

.ghost-icon {
  display: grid;
  width: 62px;
  height: 100%;
  place-items: center;
  color: #8f8980;
  background: transparent;
  border: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: -2px 0 6px;
}

.text-link {
  padding: 0;
  color: var(--gold-light);
  font-size: 18px;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-decoration-color: rgba(242, 199, 102, 0.52);
  text-underline-offset: 5px;
}

.primary-action {
  height: 62px;
  margin-top: 2px;
  color: #080807;
  font-size: 25px;
  font-weight: 800;
  background:
    linear-gradient(180deg, rgba(255, 240, 173, 0.44), transparent 45%),
    linear-gradient(135deg, #f2c766, #d4a63a 50%, #9e6b1d);
  border: 1px solid rgba(255, 221, 132, 0.86);
  border-radius: 8px;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -18px 24px rgba(74, 38, 5, 0.18);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.primary-action:hover {
  box-shadow:
    0 22px 38px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(212, 166, 58, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 28px 0 22px;
  color: #8f8980;
  font-size: 18px;
}

.divider::before,
.divider::after {
  height: 1px;
  content: "";
  background: rgba(244, 240, 232, 0.12);
}

.divider.lower {
  margin: 24px 0 0;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.social-button {
  display: grid;
  min-height: 82px;
  place-items: center;
  gap: 8px;
  padding: 14px;
  color: #fff;
  font-size: 17px;
  background: linear-gradient(180deg, #252626, #0f1010);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.social-button span {
  font-size: 37px;
  font-weight: 800;
  line-height: 1;
}

.social-button .provider-name {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
}

body[data-auth-mode="register"] .social-button .provider-name {
  width: auto;
  height: auto;
  font-size: 13px;
}

.provider-icon {
  display: block;
  width: 34px;
  height: 34px;
}

.social-button:hover {
  border-color: rgba(242, 199, 102, 0.42);
  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.social-button.google {
  color: #151515;
  background: linear-gradient(180deg, #ffffff, #e6e6e4);
}

.social-button.facebook {
  background: linear-gradient(145deg, #3768b6, #203f83);
}

.social-button.apple {
  background: linear-gradient(180deg, #151515, #050505);
}

.social-button.twitter {
  background: linear-gradient(145deg, #38a8f2, #1874bc);
}

.nickname-onboarding {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: flex-start;
  justify-items: center;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(2, 4, 3, 0.86);
  backdrop-filter: blur(18px);
  -webkit-overflow-scrolling: touch;
}

.nickname-onboarding[hidden] {
  display: none;
}

.nickname-onboarding__card {
  width: min(440px, 100%);
  margin-block: auto;
  padding: 34px;
  border: 1px solid rgba(229, 191, 90, 0.38);
  border-radius: 22px;
  color: #f7f2e7;
  background: linear-gradient(145deg, rgba(22, 31, 25, 0.98), rgba(6, 10, 8, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.nickname-onboarding__card > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.nickname-onboarding__eyebrow {
  margin: 18px 0 5px;
  color: #d7b557;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.nickname-onboarding__card h2 {
  margin: 0 0 9px;
  font-size: clamp(1.55rem, 4vw, 2rem);
}

.nickname-onboarding__card > p:not(.nickname-onboarding__eyebrow):not(.nickname-onboarding__status) {
  margin: 0 0 24px;
  color: rgba(247, 242, 231, 0.7);
  line-height: 1.5;
}

.nickname-onboarding__card label {
  display: grid;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nickname-onboarding__card input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
  font: inherit;
  text-transform: none;
}

.nickname-onboarding__card input:focus {
  border-color: #d7b557;
  outline: 2px solid rgba(215, 181, 87, 0.2);
}

.nickname-onboarding__card input[aria-invalid="true"] {
  border-color: #f0bd6c;
}

.nickname-onboarding__card small {
  display: block;
  margin-top: 9px;
  color: rgba(247, 242, 231, 0.5);
  line-height: 1.45;
}

.nickname-onboarding__status {
  min-height: 1.35em;
  margin: 12px 0;
  color: #f0bd6c;
  font-size: 0.86rem;
}

.nickname-onboarding__card button {
  width: 100%;
  min-height: 48px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  color: #171309;
  background: linear-gradient(135deg, #f0d27a, #bd8f29);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

@media (max-height: 620px) and (orientation: landscape) {
  .nickname-onboarding {
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .nickname-onboarding__card {
    padding: 20px 24px;
  }

  .nickname-onboarding__card > img {
    width: 42px;
    height: 42px;
  }

  .nickname-onboarding__eyebrow {
    margin-top: 12px;
  }

  .nickname-onboarding__card h2 {
    margin-bottom: 7px;
    font-size: clamp(1.35rem, 6.4vh, 1.7rem);
  }

  .nickname-onboarding__card > p:not(.nickname-onboarding__eyebrow):not(.nickname-onboarding__status) {
    margin-bottom: 14px;
    line-height: 1.3;
  }

  .nickname-onboarding__card small {
    margin-top: 6px;
    line-height: 1.3;
  }

  .nickname-onboarding__status {
    min-height: 1.2em;
    margin: 8px 0;
  }
}

.status-line {
  position: fixed;
  right: clamp(18px, 3vw, 40px);
  bottom: clamp(18px, 3vw, 34px);
  max-width: min(520px, calc(100vw - 36px));
  margin: 0;
  padding: 14px 18px;
  color: var(--text);
  background: rgba(15, 16, 16, 0.94);
  border: 1px solid rgba(212, 166, 58, 0.55);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.status-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lobby-screen {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: clamp(8px, 1vw, 18px);
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.18), transparent 21rem),
    radial-gradient(circle at 78% 75%, rgba(8, 76, 41, 0.42), transparent 23rem),
    linear-gradient(135deg, #030404, #0b0d0d 52%, #050505);
}

.lobby-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 31% 9%, rgba(242, 199, 102, 0.3) 0 2.5rem, transparent 8rem),
    radial-gradient(circle at 58% 8%, rgba(242, 199, 102, 0.22) 0 2rem, transparent 7rem),
    radial-gradient(circle at 77% 11%, rgba(242, 199, 102, 0.24) 0 2.3rem, transparent 7.5rem),
    radial-gradient(ellipse at 54% 42%, rgba(10, 84, 47, 0.65) 0 9rem, transparent 28rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.93), transparent 24%, transparent 74%, rgba(0, 0, 0, 0.94)),
    linear-gradient(180deg, rgba(2, 2, 2, 0.55), rgba(0, 0, 0, 0.86)),
    repeating-linear-gradient(
      90deg,
      rgba(90, 45, 18, 0.12) 0 1px,
      transparent 1px 96px
    ),
    linear-gradient(135deg, #050606, #11100d 46%, #060707);
  opacity: 0.98;
}

.lobby-atmosphere::before,
.lobby-atmosphere::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.lobby-atmosphere::before {
  right: 17%;
  bottom: 13%;
  left: 19%;
  height: 28%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.11), transparent 22%),
    linear-gradient(145deg, #0d5a36, #052719 72%);
  border: min(1.4vw, 18px) solid #2a1208;
  border-radius: 28px;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.62),
    inset 0 0 44px rgba(0, 0, 0, 0.58);
  transform: perspective(900px) rotateX(62deg);
  transform-origin: 50% 100%;
}

.lobby-atmosphere::after {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 26%, rgba(0, 0, 0, 0.58)),
    radial-gradient(circle at 32% 14%, rgba(242, 199, 102, 0.16), transparent 12rem),
    radial-gradient(circle at 70% 12%, rgba(242, 199, 102, 0.14), transparent 11rem);
  backdrop-filter: blur(1.4px);
}

.lobby-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1760px, 100%);
  height: min(960px, calc(100svh - clamp(16px, 2vw, 36px)));
  grid-template-columns: minmax(270px, 0.88fr) minmax(0, 3.25fr) minmax(320px, 1.05fr);
  grid-template-rows: minmax(0, 1fr) 72px;
  gap: clamp(10px, 0.9vw, 18px);
  padding: clamp(10px, 0.9vw, 18px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 10, 10, 0.48), rgba(3, 4, 4, 0.3)),
    radial-gradient(ellipse at 52% 15%, rgba(242, 199, 102, 0.09), transparent 28rem);
  border: 1px solid rgba(212, 166, 58, 0.3);
  border-radius: 18px;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 235, 184, 0.07);
}

.lobby-side,
.lobby-center,
.lobby-nav,
.table-card,
.premium-card,
.bonus-card {
  border: 1px solid rgba(212, 166, 58, 0.55);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 236, 176, 0.08);
}

.lobby-side {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: clamp(10px, 0.8vw, 16px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 14, 14, 0.94), rgba(5, 6, 6, 0.92));
  border-radius: 16px;
}

.profile-side {
  padding: clamp(10px, 0.9vw, 18px);
}

.player-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.avatar-ring {
  position: relative;
  width: 104px;
  aspect-ratio: 1;
  padding: 4px;
  background:
    linear-gradient(#0a0d0d, #0a0d0d) padding-box,
    linear-gradient(135deg, var(--gold-light), #8a5b16, var(--gold)) border-box;
  border: 2px solid transparent;
  border-radius: 50%;
}

.avatar-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 30%, rgba(242, 199, 102, 0.72) 0 5%, transparent 6%),
    radial-gradient(circle at 44% 34%, #312119 0 14%, #0f0d0b 15% 36%, transparent 37%),
    radial-gradient(circle at 58% 56%, rgba(212, 166, 58, 0.18), transparent 32%),
    linear-gradient(145deg, #171b1a, #050606 72%);
}

.avatar-crown,
.avatar-level {
  position: absolute;
  display: grid;
  place-items: center;
  color: #111;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.48);
}

.avatar-crown {
  top: -11px;
  right: -3px;
  width: 32px;
  height: 32px;
}

.avatar-level {
  right: -1px;
  bottom: 5px;
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.player-meta h2 {
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-meta p {
  margin: 0 0 18px;
  color: var(--gold-light);
  font-weight: 700;
}

.xp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.xp-row strong {
  color: #ddd6c9;
  font-size: 13px;
}

.progress-track {
  height: 16px;
  overflow: hidden;
  background: #090909;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a86f1f, var(--gold-light));
  border-radius: inherit;
}

.progress-stack {
  display: grid;
  min-height: 0;
  gap: 8px;
}

.progress-card,
.side-action,
.lobby-language-control {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: linear-gradient(180deg, rgba(18, 20, 20, 0.82), rgba(6, 7, 7, 0.86));
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 10px;
}

.progress-card {
  padding: clamp(10px, 1vw, 16px);
}

.gold-icon {
  color: var(--gold-light);
  font-size: 24px;
  text-align: center;
  text-shadow: 0 0 16px rgba(212, 166, 58, 0.28);
}

.progress-card h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.big-stat {
  margin: 0 0 4px;
  color: var(--gold-light);
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 900;
  line-height: 1;
}

.big-stat span {
  color: #918a7d;
  font-size: 0.72em;
}

.progress-card small {
  display: block;
  color: #bdb3a3;
  line-height: 1.25;
}

.side-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.side-action,
.lobby-language-control {
  width: 100%;
  min-height: 60px;
  padding: 0 12px;
  color: var(--text);
  font-weight: 800;
}

.side-action {
  text-align: left;
  border-color: rgba(244, 240, 232, 0.1);
}

.lobby-language-control {
  grid-template-columns: 34px auto minmax(0, 1fr);
}

.lobby-language-control select {
  width: 100%;
  min-width: 0;
  color: var(--gold-light);
  font-weight: 800;
  text-overflow: ellipsis;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
}

.lobby-center {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 0.8vw, 16px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(3, 5, 5, 0.16), rgba(3, 5, 5, 0.04));
  border-color: transparent;
  box-shadow: none;
}

.lobby-header {
  display: grid;
  justify-items: center;
  text-align: center;
}

.lobby-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

.lobby-brand img {
  display: none;
}

.lobby-brand strong {
  display: block;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4vw, 68px);
  font-weight: 900;
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 #fff0bd,
    0 3px 0 #4d2d08,
    0 14px 28px rgba(0, 0, 0, 0.7);
}

.lobby-brand strong span {
  font-size: 0.32em;
}

.lobby-brand p {
  margin: 8px 0 0;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lobby-copy h1 {
  margin: clamp(8px, 0.6vw, 14px) 0 4px;
  color: #fff;
  font-size: clamp(24px, 2.1vw, 38px);
  font-weight: 800;
  line-height: 1.05;
}

.lobby-copy p {
  max-width: 760px;
  margin: 0 auto;
  color: #f0ece5;
  font-size: clamp(14px, 1vw, 20px);
  line-height: 1.28;
}

.tables-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 0.8vw, 16px);
  overflow: hidden;
}

.table-card {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 8px;
  padding: clamp(10px, 0.9vw, 16px);
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 0%, rgba(242, 199, 102, 0.08), transparent 10rem),
    linear-gradient(180deg, rgba(12, 18, 15, 0.92), rgba(4, 6, 6, 0.95));
  border-radius: 14px;
}

.table-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.discipline-badge {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--gold-light);
  font-size: 18px;
  font-weight: 800;
  background:
    radial-gradient(circle at 38% 28%, rgba(242, 199, 102, 0.24), transparent 34%),
    linear-gradient(180deg, #171818, #050606);
  border: 1px solid rgba(242, 199, 102, 0.7);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.38),
    0 7px 18px rgba(0, 0, 0, 0.4);
}

.table-card h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(18px, 1.3vw, 25px);
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill {
  padding: 6px 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(180deg, #39a74a, #13772b);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.status-pill.is-open {
  background: linear-gradient(180deg, #3d91c8, #0c5a8b);
}

.table-card-body {
  display: grid;
  min-height: 0;
  grid-template-columns: 1.34fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.table-visual {
  position: relative;
  min-height: 100px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.58)),
    url("../assets/table_pool_preview.jpg") center 72% / 118% auto no-repeat,
    linear-gradient(155deg, rgba(7, 77, 39, 0.98), rgba(2, 27, 15, 0.98));
  border: 1px solid rgba(212, 166, 58, 0.28);
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.58);
}

.table-visual::before,
.table-visual::after {
  position: absolute;
  content: "";
}

.table-visual::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.13), transparent 16%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.62));
  mix-blend-mode: screen;
  opacity: 0.42;
}

.table-visual::after {
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
}

.table-visual.pool9 {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.58)),
    url("../assets/table_pool_preview_alt.jpg") center 64% / 118% auto no-repeat,
    linear-gradient(155deg, #0f5e8a, #03121a 80%);
}

.table-visual.snooker,
.table-visual.pyramid {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.6)),
    url("../assets/table_pool_preview.jpg") center 56% / 118% auto no-repeat,
    linear-gradient(155deg, rgba(7, 77, 39, 0.98), rgba(2, 27, 15, 0.98));
  filter: saturate(0.9) brightness(0.88);
}

.table-visual i {
  position: absolute;
  right: 6%;
  bottom: 10%;
  left: 6%;
  z-index: 1;
  height: 48%;
  border: 10px solid rgba(48, 19, 7, 0.88);
  border-bottom-width: 13px;
  border-radius: 12px;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.68),
    0 7px 14px rgba(0, 0, 0, 0.38);
  transform: perspective(260px) rotateX(57deg);
  transform-origin: 50% 100%;
}

.table-visual span {
  position: absolute;
  z-index: 2;
  display: block;
  width: 13px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #d8d0b8 62%, #5b4e34);
  border-radius: 50%;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.55);
}

.table-visual i,
.table-visual span {
  display: none;
}

.table-visual.pool8 span:nth-of-type(1) { left: 35%; top: 56%; background: radial-gradient(circle at 35% 30%, #fff, #0b0b0b 58%); }
.table-visual.pool8 span:nth-of-type(2) { left: 42%; top: 48%; background: radial-gradient(circle at 35% 30%, #fff, #f7cc3e 58%); }
.table-visual.pool8 span:nth-of-type(3) { left: 48%; top: 58%; background: radial-gradient(circle at 35% 30%, #fff, #b51f1b 58%); }
.table-visual.pool8 span:nth-of-type(4) { left: 55%; top: 49%; background: radial-gradient(circle at 35% 30%, #fff, #1f64d0 58%); }
.table-visual.pool8 span:nth-of-type(5) { left: 60%; top: 60%; background: radial-gradient(circle at 35% 30%, #fff, #e88924 58%); }
.table-visual.pool8 span:nth-of-type(6) { left: 27%; top: 60%; }
.table-visual.pool9 span:nth-of-type(1) { left: 36%; top: 55%; }
.table-visual.pool9 span:nth-of-type(2) { left: 48%; top: 48%; background: radial-gradient(circle at 35% 30%, #fff, #e0b433 58%); }
.table-visual.pool9 span:nth-of-type(3) { left: 58%; top: 62%; }
.table-visual.snooker span:nth-of-type(1) { left: 28%; top: 58%; background: radial-gradient(circle at 35% 30%, #fff, #b7181d 58%); }
.table-visual.snooker span:nth-of-type(2) { left: 38%; top: 48%; background: radial-gradient(circle at 35% 30%, #fff, #e4d233 58%); }
.table-visual.snooker span:nth-of-type(3) { left: 48%; top: 59%; background: radial-gradient(circle at 35% 30%, #fff, #0c49b4 58%); }
.table-visual.snooker span:nth-of-type(4) { left: 56%; top: 45%; background: radial-gradient(circle at 35% 30%, #fff, #1e8a32 58%); }
.table-visual.snooker span:nth-of-type(5) { left: 64%; top: 58%; background: radial-gradient(circle at 35% 30%, #fff, #b7181d 58%); }
.table-visual.pyramid span { background: radial-gradient(circle at 35% 30%, #fffef0, #d8d0b8 62%, #635d4c); }
.table-visual.pyramid span:nth-of-type(1) { left: 42%; top: 36%; }
.table-visual.pyramid span:nth-of-type(2) { left: 36%; top: 50%; }
.table-visual.pyramid span:nth-of-type(3) { left: 48%; top: 50%; }
.table-visual.pyramid span:nth-of-type(4) { left: 30%; top: 64%; }
.table-visual.pyramid span:nth-of-type(5) { left: 42%; top: 64%; }
.table-visual.pyramid span:nth-of-type(6) { left: 60%; top: 66%; background: radial-gradient(circle at 35% 30%, #fff, #6d090a 58%); }

.king-info {
  min-width: 0;
  color: #ddd7ca;
}

.king-info small {
  display: block;
  color: #bcb4a8;
  font-size: 13px;
}

.king-info strong {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
  margin: 5px 0 10px;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.king-info strong span,
.winner-rule {
  color: var(--gold-light);
}

.king-info b {
  display: block;
  color: var(--gold-light);
  font-size: clamp(22px, 1.8vw, 32px);
}

.open-note {
  color: #35bfff !important;
  font-weight: 800;
}

.king-info p {
  margin: 8px 0 0;
  color: #ddd7ca;
  line-height: 1.3;
}

.table-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: rgba(4, 6, 6, 0.64);
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
}

.table-stats span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  color: #bdb5a7;
  font-size: 13px;
}

.table-stats span + span {
  border-left: 1px solid rgba(244, 240, 232, 0.08);
}

.table-stats i {
  color: var(--gold-light);
  font-style: normal;
  font-size: 20px;
  grid-row: span 2;
}

.table-stats strong {
  display: block;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-rule {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gold-button,
.dark-button,
.blue-button,
.bonus-row button,
.side-action,
.lobby-nav button {
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.gold-button,
.dark-button,
.blue-button {
  min-height: 42px;
  padding: 0 14px;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 7px;
}

.gold-button {
  color: #111;
  background:
    linear-gradient(180deg, rgba(255, 244, 191, 0.54), transparent 46%),
    linear-gradient(135deg, var(--gold-light), var(--gold) 52%, #a36a18);
  border: 1px solid rgba(255, 223, 137, 0.88);
}

.dark-button {
  color: #fff;
  background: linear-gradient(180deg, rgba(35, 37, 37, 0.92), rgba(10, 11, 11, 0.95));
  border: 1px solid rgba(244, 240, 232, 0.14);
}

.blue-button {
  color: #fff;
  background: linear-gradient(180deg, #2479ad, #0c4f79);
  border: 1px solid rgba(103, 195, 255, 0.45);
}

.gold-button:hover,
.dark-button:hover,
.blue-button:hover,
.bonus-row button:hover,
.side-action:hover,
.lobby-nav button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.club-side {
  gap: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.premium-card,
.bonus-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.15), transparent 9rem),
    linear-gradient(180deg, rgba(12, 14, 14, 0.95), rgba(4, 5, 5, 0.94));
  border-radius: 16px;
}

.premium-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(16px, 1.1vw, 24px);
}

.premium-card::before {
  position: absolute;
  inset: 8px;
  content: "";
  border: 1px solid rgba(212, 166, 58, 0.25);
  border-radius: 12px;
  pointer-events: none;
}

.premium-crown {
  width: 58px;
  margin: -2px auto 8px;
  color: var(--gold-light);
  font-size: 44px;
  line-height: 1;
  text-align: center;
}

.premium-card h2,
.bonus-card h2 {
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.price {
  margin: 12px 0 18px;
  color: var(--gold-light);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 900;
  text-align: center;
}

.price span {
  font-size: 0.68em;
}

.premium-card ul {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.premium-card li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 10px;
  color: #eee8dc;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.2;
}

.mini-mark {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  transform: translateY(5px) rotate(45deg);
}

.premium-card .gold-button {
  width: 100%;
  min-height: 54px;
  font-size: clamp(16px, 1.1vw, 20px);
  text-transform: uppercase;
}

.bonus-card {
  flex: 0 0 auto;
  padding: clamp(14px, 1vw, 22px);
  background:
    radial-gradient(circle at 35% 70%, rgba(18, 111, 45, 0.56), transparent 10rem),
    linear-gradient(180deg, rgba(12, 24, 12, 0.96), rgba(3, 6, 3, 0.94));
}

.bonus-art {
  color: var(--gold-light);
  font-size: clamp(48px, 5vw, 86px);
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 18px 28px rgba(0, 0, 0, 0.5);
}

.bonus-card p {
  margin: 10px auto 14px;
  max-width: 260px;
  color: #eee8dc;
  line-height: 1.25;
  text-align: center;
}

.bonus-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.bonus-row span {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  color: var(--gold-light);
  font-weight: 900;
  background: rgba(5, 8, 5, 0.54);
  border: 1px solid rgba(212, 166, 58, 0.24);
  border-radius: 8px;
}

.bonus-row button {
  min-height: 44px;
  padding: 0 20px;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(180deg, #24a34d, #096d28);
  border: 1px solid rgba(105, 225, 119, 0.45);
  border-radius: 8px;
}

.lobby-nav {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(170px, 0.95fr);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 14, 14, 0.94), rgba(4, 5, 5, 0.95));
  border-radius: 14px;
}

.lobby-nav button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #c9c1b3;
  font-size: clamp(13px, 0.95vw, 17px);
  font-weight: 800;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(212, 166, 58, 0.14);
}

.lobby-nav button:first-child {
  border-left: 0;
}

.lobby-nav button span {
  color: var(--gold-light);
}

.nav-mark {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.nav-mark::before,
.nav-mark::after {
  position: absolute;
  content: "";
}

.nav-mark-crown::before {
  inset: 4px 2px 6px;
  background:
    linear-gradient(135deg, transparent 0 18%, currentColor 19% 35%, transparent 36% 44%, currentColor 45% 58%, transparent 59% 67%, currentColor 68% 84%, transparent 85%),
    linear-gradient(180deg, transparent 0 58%, currentColor 59%);
}

.nav-mark-cues::before,
.nav-mark-cues::after {
  top: 2px;
  left: 11px;
  width: 3px;
  height: 22px;
  background: currentColor;
  border-radius: 2px;
}

.nav-mark-cues::before {
  transform: rotate(45deg);
}

.nav-mark-cues::after {
  transform: rotate(-45deg);
}

.nav-mark-profile::before {
  inset: 3px 7px auto;
  height: 9px;
  background: currentColor;
  border-radius: 50%;
}

.nav-mark-profile::after {
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 10px;
  background: currentColor;
  border-radius: 12px 12px 3px 3px;
}

.nav-mark-trophy::before {
  inset: 4px 6px 7px;
  border: 3px solid currentColor;
  border-top-width: 5px;
  border-radius: 2px 2px 9px 9px;
}

.nav-mark-trophy::after {
  right: 6px;
  bottom: 3px;
  left: 6px;
  height: 3px;
  background: currentColor;
}

.nav-mark-badge::before {
  inset: 4px;
  background: currentColor;
  clip-path: polygon(50% 0, 64% 30%, 98% 35%, 72% 58%, 80% 94%, 50% 76%, 20% 94%, 28% 58%, 2% 35%, 36% 30%);
}

.nav-mark-shop::before {
  inset: 8px 3px 4px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 2px 2px 6px 6px;
}

.nav-mark-shop::after {
  top: 4px;
  right: 7px;
  left: 7px;
  height: 9px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.nav-mark-calendar::before {
  inset: 4px 3px 3px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.nav-mark-calendar::after {
  right: 7px;
  bottom: 7px;
  left: 7px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor;
}

.lobby-nav button.is-active {
  color: var(--gold-light);
  background: radial-gradient(ellipse at 50% 100%, rgba(212, 166, 58, 0.22), transparent 62%);
}

.lobby-nav .wallet-button {
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(14, 16, 16, 0.72);
}

.wallet-button b {
  display: grid;
  width: 32px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

@media (max-width: 1180px), (max-height: 820px) {
  .login-screen {
    padding: 12px;
  }

  .auth-shell {
    grid-template-columns: minmax(244px, 288px) minmax(0, 1fr);
    width: min(1000px, calc(100vw - 24px));
    height: calc(100svh - 24px);
    max-height: none;
    border-radius: 20px;
  }

  .brand-panel {
    padding: 24px;
  }

  .form-panel {
    padding: 28px 38px 22px;
  }

  .form-topline {
    margin-bottom: 24px;
  }

  h1 {
    font-size: clamp(34px, 5.2vh, 44px);
  }

  .form-topline p {
    font-size: 17px;
  }

  .language-select {
    width: clamp(150px, 20vw, 200px);
    height: 48px;
  }

  .auth-tabs {
    margin-bottom: 18px;
  }

  .auth-tab {
    min-width: 132px;
    padding-bottom: 13px;
    font-size: 20px;
  }

  .auth-form {
    gap: 12px;
    min-height: 0;
  }

  .field,
  .primary-action {
    height: 56px;
  }

  .field input {
    font-size: 20px;
  }

  .field-icon {
    width: 62px;
  }

  .field svg,
  .ghost-icon svg {
    width: 26px;
    height: 26px;
  }

  .form-row {
    margin: -4px 0 0;
  }

  .text-link {
    font-size: 16px;
  }

  .divider {
    gap: 18px;
    margin: 18px 0 14px;
    font-size: 16px;
  }

  .social-button {
    min-height: 64px;
    gap: 6px;
    padding: 8px;
    font-size: 15px;
  }

  .provider-icon,
  .social-button span {
    width: 28px;
    height: 28px;
    font-size: 28px;
  }

  .divider.lower {
    display: none;
  }

  body[data-auth-mode="register"] .form-topline {
    margin-bottom: 18px;
  }

  body[data-auth-mode="register"] .auth-tabs {
    margin-bottom: 14px;
  }

  body[data-auth-mode="register"] .field {
    height: 50px;
  }

  body[data-auth-mode="register"] .primary-action {
    height: 52px;
  }

  body[data-auth-mode="register"] .divider {
    margin: 12px 0 12px;
  }

  body[data-auth-mode="register"] .social-button {
    min-height: 56px;
  }
}

@media (max-height: 700px) {
  .auth-shell {
    grid-template-columns: minmax(224px, 264px) minmax(0, 1fr);
  }

  .form-panel {
    padding: 22px 34px 18px;
  }

  .form-topline {
    margin-bottom: 18px;
  }

  h1 {
    font-size: clamp(31px, 5.1vh, 38px);
  }

  .form-topline p {
    font-size: 15px;
  }

  .language-select {
    width: clamp(132px, 20vw, 178px);
    height: 44px;
    gap: 10px;
    padding: 0 12px;
  }

  .auth-tabs {
    gap: 32px;
    margin-bottom: 14px;
  }

  .auth-tab {
    min-width: 118px;
    padding-bottom: 11px;
    font-size: 19px;
  }

  .auth-form {
    gap: 10px;
  }

  .field {
    height: 50px;
  }

  .field input {
    font-size: 18px;
  }

  .primary-action {
    height: 52px;
    font-size: 22px;
  }

  .divider {
    margin: 12px 0 10px;
  }

  .social-grid {
    gap: 14px;
  }

  .social-button {
    min-height: 54px;
    font-size: 14px;
  }

  .provider-icon,
  .social-button span {
    width: 25px;
    height: 25px;
    font-size: 25px;
  }

  .support {
    font-size: 12px;
  }

  body[data-auth-mode="register"] .form-topline {
    margin-bottom: 14px;
  }

  body[data-auth-mode="register"] .field {
    height: 46px;
  }

  body[data-auth-mode="register"] .field input {
    font-size: 18px;
  }

  body[data-auth-mode="register"] .primary-action {
    height: 48px;
    font-size: 21px;
  }

  body[data-auth-mode="register"] .divider {
    margin: 9px 0;
  }

  body[data-auth-mode="register"] .social-button {
    min-height: 50px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .login-screen {
    padding: 8px;
  }

  .auth-shell {
    grid-template-columns: minmax(178px, 210px) minmax(0, 1fr);
    width: calc(100vw - 16px);
    height: calc(100svh - 16px);
    border-radius: 16px;
  }

  .brand-panel {
    padding: 16px;
    background-position: top center;
  }

  .support {
    gap: 3px;
    font-size: 11px;
  }

  .support::before {
    inset: -20px -16px -32px;
  }

  .form-panel {
    padding: 14px 22px 12px;
  }

  .form-topline {
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  h1 {
    margin-bottom: 4px;
    font-size: clamp(25px, 6.2vh, 32px);
  }

  .form-topline p {
    font-size: 13px;
    line-height: 1.2;
  }

  .language-select {
    width: clamp(136px, 22vw, 172px);
    height: 38px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .language-select select {
    padding-right: 22px;
    font-size: 13px;
  }

  .language-select svg {
    right: 11px;
    width: 17px;
    height: 17px;
  }

  .auth-tabs {
    gap: 24px;
    margin-bottom: 8px;
  }

  .auth-tab {
    min-width: 96px;
    padding-bottom: 7px;
    font-size: 16px;
  }

  .auth-tab.is-active::after {
    height: 2px;
  }

  .auth-form {
    gap: 7px;
  }

  .field {
    height: 38px;
    border-radius: 7px;
  }

  .field-icon {
    width: 46px;
  }

  .field svg,
  .ghost-icon svg {
    width: 20px;
    height: 20px;
  }

  .field input {
    font-size: 15px;
  }

  .ghost-icon {
    width: 44px;
  }

  .form-row {
    margin: -3px 0 -2px;
  }

  .text-link {
    font-size: 13px;
    text-underline-offset: 3px;
  }

  .primary-action {
    height: 40px;
    font-size: 18px;
    border-radius: 7px;
  }

  .divider {
    gap: 12px;
    margin: 7px 0 6px;
    font-size: 13px;
  }

  .social-grid {
    gap: 10px;
  }

  .social-button {
    min-height: 38px;
    grid-template-columns: auto auto;
    gap: 7px;
    justify-content: center;
    padding: 6px 8px;
    font-size: 13px;
  }

  .provider-icon,
  .social-button span {
    width: 19px;
    height: 19px;
    font-size: 19px;
  }

  body[data-auth-mode="register"] .form-topline {
    margin-bottom: 8px;
  }

  body[data-auth-mode="register"] .auth-tabs {
    margin-bottom: 7px;
  }

  body[data-auth-mode="register"] .auth-form {
    gap: 6px;
  }

  body[data-auth-mode="register"] .field {
    height: 36px;
  }

  body[data-auth-mode="register"] .field input {
    font-size: 15px;
  }

  body[data-auth-mode="register"] .primary-action {
    height: 38px;
    font-size: 17px;
  }

  body[data-auth-mode="register"] .divider {
    margin: 6px 0 5px;
  }

  body[data-auth-mode="register"] .social-button {
    min-height: 36px;
  }
}

/* King of the Table — approved Billiard Hall shell */
body[data-view="lobby"] .hall-app {
  position: fixed;
  inset: 0;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #080b0a;
  isolation: isolate;
}

.hall-app > [data-hall-app-root] {
  display: grid;
  grid-template-rows: clamp(92px, 11.2vh, 132px) minmax(0, 1fr) clamp(78px, 9.5vh, 104px);
  width: 100%;
  height: 100svh;
  min-height: 0;
}

.hall-app button,
.hall-app input,
.hall-app select {
  font-family: "Arial Narrow", "Roboto Condensed", Inter, ui-sans-serif, system-ui, sans-serif;
}

.hall-topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(240px, 420px) minmax(480px, 1fr);
  align-items: center;
  min-width: 0;
  padding: max(12px, env(safe-area-inset-top)) clamp(18px, 2vw, 38px) 12px;
  color: #f6f1e7;
  background:
    radial-gradient(circle at 50% -80%, rgba(213, 166, 58, 0.12), transparent 65%),
    linear-gradient(180deg, #07100f 0%, #060b0a 100%);
  border-bottom: 1px solid rgba(214, 167, 68, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.hall-profile {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
}

.hall-avatar-frame {
  position: relative;
  display: block;
  width: clamp(64px, 5.8vw, 92px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 3px;
  overflow: visible;
  background: linear-gradient(145deg, #fff1b1, #bb741b 52%, #f2c95e);
  border-radius: 14px;
  box-shadow: 0 0 0 1px #33200b, 0 8px 20px rgba(0, 0, 0, 0.45);
}

.hall-avatar-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: #19201e;
  border-radius: 11px;
}

.hall-avatar-frame > i {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #171006;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(#ffe79a, #c98927);
  border: 2px solid #07100f;
  border-radius: 50%;
}

.hall-profile-copy {
  display: grid;
  min-width: 0;
  margin-inline-start: 16px;
  gap: 5px;
}

.hall-profile-copy > strong {
  overflow: hidden;
  font-size: clamp(20px, 1.7vw, 31px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-rank-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hall-rank-row b {
  padding: 4px 10px;
  color: #efc65f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border: 1px solid rgba(225, 172, 57, 0.75);
  border-radius: 4px;
}

.hall-rank-row i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #f7d573;
  font-size: 12px;
  font-style: normal;
  background: #10231d;
  border: 1px solid rgba(224, 173, 61, 0.7);
  clip-path: polygon(50% 0, 90% 20%, 100% 66%, 72% 100%, 28% 100%, 0 66%, 10% 20%);
}

.hall-xp-row {
  display: grid;
  grid-template-columns: auto minmax(80px, 170px) auto;
  align-items: center;
  gap: 8px;
  color: #d8d2c7;
}

.hall-xp-row > span {
  height: 7px;
  overflow: hidden;
  background: #303532;
  border-radius: 99px;
  box-shadow: inset 0 1px 2px #000;
}

.hall-xp-row > span > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b7781c, #f0c766);
  border-radius: inherit;
}

.hall-xp-row small {
  font-size: 12px;
  white-space: nowrap;
}

.hall-brand {
  width: min(100%, 330px);
  max-height: 84px;
  justify-self: center;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

.hall-toolbar {
  display: flex;
  align-items: center;
  justify-self: end;
  min-width: 0;
  gap: clamp(8px, 1.2vw, 20px);
}

.hall-currency {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 5px 0;
  color: #f4efe4;
  background: transparent;
  border: 0;
}

.hall-currency + .hall-currency {
  padding-inline-start: clamp(10px, 1.2vw, 20px);
  border-inline-start: 1px solid rgba(238, 225, 196, 0.16);
}

img.hall-currency-art {
  display: block;
  object-fit: contain;
}

img.kott-chip-art {
  clip-path: none;
}

img.kott-crown-art {
  clip-path: polygon(50% 5%, 88% 25%, 88% 75%, 50% 96%, 12% 75%, 12% 25%);
}

.hall-currency .hall-currency-art {
  width: clamp(31px, 2.6vw, 43px);
  height: clamp(31px, 2.6vw, 43px);
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45));
  transition: transform 160ms ease, filter 160ms ease;
}

.hall-currency:hover .hall-currency-art,
.hall-currency:focus-visible .hall-currency-art {
  transform: translateY(-1px) scale(1.045);
  filter:
    drop-shadow(0 7px 10px rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 7px rgba(232, 186, 78, 0.18));
}

.hall-currency strong {
  font-size: clamp(16px, 1.3vw, 23px);
  font-weight: 500;
  white-space: nowrap;
}

.hall-currency > span {
  color: #e1b655;
  font-size: 20px;
}

.hall-language {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: 13px 27px;
  border-inline: 1px solid rgba(238, 225, 196, 0.16);
}

.hall-language select {
  max-width: 84px;
  padding: 9px 0;
  color: #f4efe4;
  font-size: 15px;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
}

.hall-language svg {
  position: absolute;
  right: 8px;
  width: 17px;
  fill: none;
  stroke: #e4b953;
  stroke-width: 2;
  pointer-events: none;
}

.hall-icon-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #ebc05d;
  background: none;
  border: 0;
}

.hall-icon-button svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.hall-icon-button i {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 7px;
  height: 7px;
  background: #e43c45;
  border: 2px solid #07100f;
  border-radius: 50%;
}

.hall-settings-layer {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 24px;
}

.hall-settings-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  border: 0;
  backdrop-filter: blur(8px);
}

.hall-settings-sheet {
  position: relative;
  width: min(760px, 100%);
  max-height: min(880px, calc(100dvh - 48px));
  overflow-y: auto;
  padding: 26px;
  color: #f4efe4;
  background:
    radial-gradient(circle at 88% 4%, rgba(222, 177, 74, 0.12), transparent 13rem),
    linear-gradient(155deg, #151715, #080a09 72%);
  border: 1px solid rgba(226, 185, 88, 0.44);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hall-settings-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(238, 225, 196, 0.13);
}

.hall-settings-sheet__header small,
.hall-settings-account small {
  display: block;
  color: #b69b61;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hall-settings-sheet__header h2 {
  margin: 7px 0 0;
  color: #f7f1e4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1;
}

.hall-settings-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 0 3px;
  color: #d9caa9;
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(238, 225, 196, 0.16);
  border-radius: 10px;
}

.hall-settings-account {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(238, 225, 196, 0.1);
  border-radius: 12px;
}

.hall-settings-account__avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
  background: #07100f;
  border: 1px solid rgba(226, 185, 88, 0.5);
  border-radius: 10px;
}

.hall-settings-account__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hall-settings-account strong {
  display: block;
  margin-top: 5px;
  color: #fffaf0;
  font-size: 18px;
}

.hall-graphics-settings {
  display: grid;
  gap: 16px;
  margin: 0 0 22px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(6, 53, 31, 0.32), rgba(4, 10, 8, 0.72));
  border: 1px solid rgba(226, 185, 88, 0.18);
  border-radius: var(--kott-radius-md, 6px);
}

.hall-graphics-settings__heading,
.hall-graphics-range > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hall-graphics-settings__heading small { color: #b69b61; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.hall-graphics-settings__heading h3 { margin: 4px 0 0; font-size: 20px; font-weight: 600; }
.hall-graphics-settings__heading > span { color: #e0b84e; font-size: 12px; }
.hall-graphics-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hall-graphics-presets button { position: relative; min-height: 44px; color: #c7c0b4; background: #0a100d; border: 1px solid rgba(199,192,180,.18); border-radius: 4px; }
.hall-graphics-presets button.is-selected { color: #f4f0e8; border-color: #d4a63a; box-shadow: inset 0 -2px 0 rgba(212,166,58,.65); }
.hall-graphics-presets i { margin-inline-start: 7px; color: #d4a63a; font-style: normal; }
.hall-graphics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.hall-graphics-grid label { display: grid; min-width: 0; gap: 6px; color: #c7c0b4; font-size: 12px; }
.hall-graphics-grid select { width: 100%; min-height: 42px; padding: 0 11px; color: #f4f0e8; font: inherit; background: #09100c; border: 1px solid rgba(212,166,58,.28); border-radius: 4px; }
.hall-graphics-range input { width: 100%; accent-color: #d4a63a; }
.hall-graphics-range output { color: #f2c766; font-variant-numeric: tabular-nums; }
.hall-graphics-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hall-graphics-toggles label { display: flex; min-height: 44px; align-items: center; gap: 9px; padding: 8px 10px; color: #e7dfc9; background: rgba(0,0,0,.2); border: 1px solid rgba(199,192,180,.12); border-radius: 4px; }
.hall-graphics-toggles input { width: 18px; height: 18px; accent-color: #d4a63a; }
.hall-graphics-settings > p { margin: 0; color: #8f8980; font-size: 11px; line-height: 1.45; }

.hall-settings-logout {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  color: #ffe2db;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(124, 45, 35, 0.78), rgba(70, 24, 20, 0.9));
  border: 1px solid rgba(231, 130, 110, 0.55);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hall-settings-logout svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hall-settings-close:hover,
.hall-settings-logout:hover,
.hall-settings-button:hover {
  filter: brightness(1.12);
}

.hall-settings-close:focus-visible,
.hall-settings-logout:focus-visible,
.hall-settings-button:focus-visible {
  outline: 2px solid #edc463;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .hall-settings-layer {
    align-items: end;
    padding: 0;
  }

  .hall-settings-sheet {
    width: 100%;
    padding: 22px max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .hall-graphics-grid,
  .hall-graphics-toggles { grid-template-columns: 1fr; }

  .hall-settings-account { margin: 14px 0; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hall-settings-sheet {
    width: min(520px, calc(100% - 32px));
    padding: 16px 20px max(16px, env(safe-area-inset-bottom));
    border: 1px solid rgba(226, 185, 88, 0.44);
    border-radius: 14px;
  }

  .hall-settings-sheet__header {
    padding-bottom: 12px;
  }

  .hall-settings-sheet__header h2 {
    font-size: 25px;
  }

  .hall-settings-account {
    margin: 12px 0;
    padding: 10px;
  }

  .hall-settings-account__avatar {
    width: 44px;
    height: 44px;
  }
}

/* Owner-approved lobby settings cabinet, 2026-08-30. */
.hall-settings-layer { padding: clamp(12px, 2.2vw, 34px); }
.hall-settings-scrim {
  background:
    radial-gradient(circle at 18% 62%, rgba(7, 73, 40, .16), transparent 28%),
    rgba(0, 3, 2, .68);
  backdrop-filter: blur(7px) saturate(.8);
}
.hall-settings-sheet {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 72px;
  width: min(1320px, 96vw);
  height: min(860px, calc(100dvh - 48px));
  max-height: none;
  padding: 14px;
  overflow: hidden;
  color: var(--kott-text-primary, #f4f0e8);
  background:
    linear-gradient(rgba(34, 15, 6, .8), rgba(19, 9, 4, .92)),
    url("./assets/pooltool/converted/textures/table/wood_1k/Wood048_1K_Color.jpg") center / 620px auto;
  background-blend-mode: multiply;
  border: 2px solid #74521d;
  border-radius: 8px;
  box-shadow:
    0 36px 100px rgba(0,0,0,.84),
    inset 0 0 0 3px #080604,
    inset 0 0 0 6px rgba(207,151,50,.34),
    inset 0 12px 18px rgba(255,204,103,.05);
}
.hall-settings-sheet::before,
.hall-settings-sheet::after { position: absolute; z-index: 4; width: 8px; height: 8px; content: ""; background: radial-gradient(circle at 40% 35%, #e0bd68 0 12%, #6f4d20 28%, #171007 72%); border: 1px solid #8b642c; border-radius: 50%; pointer-events: none; }
.hall-settings-sheet::before { top: 8px; left: 8px; }
.hall-settings-sheet::after { top: 8px; right: 8px; }
.hall-settings-sheet__header {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0 54px;
  background:
    linear-gradient(90deg, rgba(38,18,8,.72), rgba(5,7,5,.98) 30%, rgba(5,7,5,.98) 70%, rgba(38,18,8,.72)),
    url("./assets/pooltool/converted/textures/table/wood_1k/Wood048_1K_Color.jpg") center 42% / 560px auto;
  background-blend-mode: multiply;
  border: 1px solid rgba(212,166,58,.42);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.58), 0 3px 8px rgba(0,0,0,.55);
}
.hall-settings-brand { display: flex; min-width: 310px; height: 36px; align-items: center; justify-content: center; gap: 9px; color: #d4a63a; background: linear-gradient(180deg, #11140f, #050705); border-right: 1px solid rgba(212,166,58,.28); border-left: 1px solid rgba(212,166,58,.28); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.hall-settings-brand > span { font-size: 17px; }
.hall-settings-brand small { color: #d4a63a; font-size: 11px; letter-spacing: .18em; }
.hall-settings-close {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 36px;
  height: 34px;
  color: #d9b65b;
  font: 400 25px/1 var(--font-ui);
  background: #11140f;
  border: 1px solid rgba(212,166,58,.5);
  border-radius: 3px;
}
.hall-settings-cabinet {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 0;
  margin-top: 10px;
  background: #050a07;
  border: 2px solid rgba(212,166,58,.42);
  box-shadow: inset 0 0 0 3px #020403, 0 4px 12px rgba(0,0,0,.48);
}
.hall-settings-nav {
  display: grid;
  grid-template-rows: repeat(2, minmax(82px, 1fr)) minmax(96px, 1.2fr);
  min-height: 0;
  padding: 4px;
  background:
    linear-gradient(180deg, rgba(17,24,18,.93), rgba(4,13,8,.98)),
    radial-gradient(circle at 50% 0, rgba(212,166,58,.08), transparent 42%);
  border-right: 1px solid rgba(212,166,58,.32);
}
.hall-settings-nav button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 19px;
  padding: 14px 24px;
  color: #bbb7aa;
  font: 560 clamp(14px, 1.15vw, 18px)/1 var(--font-ui);
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(212,166,58,.16);
  border-radius: 0;
}
.hall-settings-nav button:not(.is-active):disabled { opacity: .55; }
.hall-settings-nav button.is-active {
  color: #e7c56b;
  background: linear-gradient(90deg, rgba(212,166,58,.13), rgba(212,166,58,.025));
  box-shadow: inset 4px 0 #d4a63a, inset 0 0 0 2px rgba(212,166,58,.5), 0 5px 16px rgba(0,0,0,.28);
}
.hall-settings-nav svg { width: 31px; height: 31px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.45; }
.hall-settings-nav__account { align-self: end; color: #d0c3a5 !important; }
.hall-settings-nav__account span { display: grid; gap: 5px; min-width: 0; }
.hall-settings-nav__account b { font: inherit; }
.hall-settings-nav__account small { overflow: hidden; color: #77756e; font-size: 10px; letter-spacing: .03em; text-overflow: ellipsis; text-transform: none; }
.hall-graphics-settings {
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(20px, 2.2vw, 34px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 72% 16%, rgba(20,83,49,.14), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #07110d, #020704 76%);
  border: 0;
  border-radius: 0;
}
.hall-graphics-settings[hidden] { display: none; }
.hall-graphics-settings__title h2 {
  margin: 0 0 18px;
  color: #f4f0e8;
  font: 620 clamp(28px, 3vw, 46px)/1 var(--font-ui);
  letter-spacing: .025em;
  text-transform: uppercase;
}
.hall-device-recommendation {
  padding: 13px 16px 16px;
  background: linear-gradient(180deg, rgba(8,22,15,.82), rgba(3,9,6,.7));
  border: 1px solid rgba(212,166,58,.58);
  border-radius: 3px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.38);
}
.hall-device-recommendation__heading { display: flex; align-items: baseline; justify-content: center; gap: 8px 14px; margin-bottom: 12px; text-align: center; }
.hall-device-recommendation__heading small { color: #d4a63a; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.hall-device-recommendation__heading strong { color: #f4f0e8; font-size: 14px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.hall-device-recommendation__heading span { color: #777a72; font-size: 10px; letter-spacing: .035em; }
.hall-graphics-recovery { display: grid; gap: 10px; padding: 16px; margin-bottom: 16px; border: 1px solid rgba(212,166,58,.5); background: rgba(24,20,12,.92); color: #eee7d9; overflow-wrap: anywhere; }
.hall-graphics-recovery > strong { font-size: 18px; line-height: 1.3; }
.hall-graphics-recovery > b { color: #e7c473; font-size: 15px; }
.hall-graphics-recovery > p { margin: 0; font-size: 14px; line-height: 1.45; color: #d2c8b5; }
.hall-graphics-recovery > button { justify-self: start; min-height: 48px; max-width: 100%; padding: 10px 18px; border: 1px solid #c99a38; background: #d9b65f; color: #19150c; font: inherit; font-size: 15px; white-space: normal; cursor: pointer; }
.hall-graphics-recovery > button:hover { background: #edcc80; }
.hall-graphics-recovery > button:active { background: #c99a38; }
.hall-graphics-recovery > button:focus-visible { outline: 2px solid #fff0cb; outline-offset: 3px; }
.hall-graphics-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; }
.hall-graphics-presets button {
  position: relative;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #c8c3b7;
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: .065em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #101711, #070c09);
  border: 1px solid rgba(212,166,58,.22);
  border-radius: 4px;
}
.hall-graphics-presets button.is-selected { color: #f3e3ad; background: linear-gradient(180deg, #123b26, #0a2116); border-color: #d4a63a; box-shadow: inset 0 0 18px rgba(212,166,58,.09); }
.hall-graphics-presets i { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; margin: 0; color: #d4a63a; }
.hall-graphics-presets i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.hall-graphics-presets button > span { display: grid; gap: 3px; text-align: left; }
.hall-graphics-presets button b { font: inherit; }
.hall-graphics-presets button small { color: #777a72; font-size: 9px; letter-spacing: .08em; }
.hall-graphics-presets em { position: absolute; top: 5px; right: 5px; display: grid; width: 17px; height: 17px; place-items: center; color: #132014; font-size: 10px; font-style: normal; background: #e0b84e; border-radius: 50%; }
.hall-gameplay-clarity-lock { display: grid; grid-template-columns: 38px minmax(180px, auto) 1fr; align-items: center; gap: 12px 16px; margin-top: 14px; padding: 12px 15px; color: #c7c0b4; background: rgba(5,22,14,.72); border: 1px solid rgba(99,198,109,.32); }
.hall-gameplay-clarity-lock svg { width: 28px; height: 28px; color: #63c66d; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.hall-gameplay-clarity-lock span { display: grid; gap: 2px; }
.hall-gameplay-clarity-lock small { color: #8f8980; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hall-gameplay-clarity-lock strong { color: #dce7d7; font-size: 13px; letter-spacing: .055em; text-transform: uppercase; }
.hall-gameplay-clarity-lock p { margin: 0; color: #8f8980; font-size: 11px; line-height: 1.35; }
.hall-graphics-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 17px; border-top: 1px solid rgba(199,192,180,.13); }
.hall-graphics-grid label {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(230px, 38%);
  min-height: 58px;
  align-items: center;
  gap: 22px;
  color: #ddd8cb;
  font-size: 15px;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(199,192,180,.13);
}
.hall-graphics-grid select { min-height: 42px; padding: 0 38px 0 15px; color: #f1ead8; font-size: 14px; background-color: #07100c; border: 1px solid rgba(212,166,58,.25); }
.hall-graphics-grid .hall-graphics-range { position: relative; }
.hall-graphics-grid .hall-graphics-range > span { justify-content: space-between; }
.hall-graphics-grid .hall-graphics-range output { position: static; flex: 0 0 auto; color: #d9b354; font-size: 14px; }
.hall-graphics-grid .hall-graphics-range input { width: 100%; min-width: 0; }
.hall-graphics-range > span { display: flex; justify-content: flex-start; }
.hall-graphics-range output { position: absolute; right: clamp(20px, 2.2vw, 34px); color: #d9b354; font-size: 17px; }
.hall-graphics-range input { width: calc(100% - 58px); height: 22px; accent-color: #d4a63a; }
.hall-graphics-toggles { display: grid; grid-template-columns: 1fr; gap: 0; }
.hall-graphics-toggles label {
  position: relative;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #ddd8cb;
  font-size: 15px;
  letter-spacing: .045em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(199,192,180,.13);
}
.hall-graphics-toggles input { position: absolute; right: 0; width: 70px; height: 32px; margin: 0; opacity: 0; cursor: pointer; }
.hall-graphics-switch { position: relative; display: grid; grid-template-columns: 70px 42px; align-items: center; gap: 10px; }
.hall-graphics-switch input { right: auto; left: 0; }
.hall-graphics-switch b { color: #d4a63a; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hall-graphics-toggles i { position: relative; width: 70px; height: 32px; background: #191b18; border: 1px solid #554e3c; border-radius: 18px; pointer-events: none; }
.hall-graphics-toggles i::after { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; content: ""; background: linear-gradient(145deg, #c7b276, #695126); border: 1px solid #e2c56d; border-radius: 50%; box-shadow: 0 2px 5px #000; transition: transform 160ms ease; }
.hall-graphics-toggles input:checked + i { background: #183c27; border-color: #9c7b31; }
.hall-graphics-toggles input:checked + i::after { transform: translateX(38px); }
.hall-graphics-settings > p { margin: 14px 0 0; color: #777a72; font-size: 11px; }
.hall-sound-mixer { display: grid; gap: 12px; margin: 8px 0 22px; padding: 18px; background: rgba(3,10,7,.62); border: 1px solid rgba(212,166,58,.3); }
.hall-sound-mixer label { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 46%); min-height: 58px; align-items: center; gap: 22px; color: #ddd8cb; font-size: 15px; letter-spacing: .045em; text-transform: uppercase; border-bottom: 1px solid rgba(199,192,180,.13); }
.hall-sound-mixer label:last-child { border-bottom: 0; }
.hall-sound-mixer output { right: 0; }
.hall-account-settings { display: flex; flex-direction: column; gap: 22px; }
.hall-account-settings[hidden] { display: none; }
.hall-account-card { display: flex; align-items: center; gap: 20px; padding: 22px; background: linear-gradient(145deg, rgba(17,50,33,.72), rgba(4,12,8,.86)); border: 1px solid rgba(212,166,58,.45); }
.hall-account-card > svg { width: 58px; height: 58px; padding: 12px; color: #d4a63a; fill: none; stroke: currentColor; border: 1px solid rgba(212,166,58,.5); border-radius: 50%; }
.hall-account-card div { display: grid; gap: 5px; }
.hall-account-card small, .hall-account-card span { color: #8d8b82; }
.hall-account-card strong { color: #f0e4c7; font-size: 22px; }
.hall-account-logout { margin-top: auto; padding: 22px; background: rgba(35,9,7,.36); border: 1px solid rgba(158,66,48,.62); }
.hall-account-logout h3 { margin: 0 0 8px; color: #efe7d6; font-size: 21px; }
.hall-account-logout p { max-width: 620px; margin: 0 0 18px; color: #9c968a; line-height: 1.5; }
.hall-account-logout button { min-height: 44px; padding: 0 24px; color: #f1d9d2; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #5b2018, #32100c); border: 1px solid #a95645; }
.hall-settings-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding: 10px 24px;
  background:
    linear-gradient(90deg, rgba(40,20,9,.24), rgba(8,10,8,.96) 18%, rgba(8,10,8,.96) 82%, rgba(40,20,9,.24)),
    url("./assets/pooltool/converted/textures/table/wood_1k/Wood048_1K_Color.jpg") center 65% / 520px auto;
  background-blend-mode: multiply;
  border: 1px solid rgba(212,166,58,.48);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55);
}
.hall-settings-actions > button { min-width: 220px; min-height: 46px; color: #d0c7b3; font: 620 16px/1 var(--font-ui); letter-spacing: .065em; text-transform: uppercase; background: #0c110d; border: 1px solid rgba(212,166,58,.38); border-radius: 3px; }
.hall-settings-actions > button span { margin-right: 10px; color: #d4a63a; }
.hall-settings-actions > button.is-primary { color: #171309; background: linear-gradient(180deg, #f0cd72, #b98627); border-color: #f4d983; box-shadow: inset 0 1px rgba(255,255,255,.5); }
.hall-settings-actions > button.is-primary span { color: inherit; }
.hall-settings-crest { position: absolute; left: 50%; bottom: -14px; display: grid; width: 76px; height: 66px; place-items: center; color: #d4a63a; font-size: 14px; transform: translateX(-50%); }
.hall-settings-crest i::before,
.hall-settings-crest i::after { position: absolute; left: 37px; bottom: 3px; width: 2px; height: 66px; content: ""; background: linear-gradient(#deb960, #6f4a19); transform: rotate(48deg); transform-origin: center; }
.hall-settings-crest i::after { transform: rotate(-48deg); }
.hall-settings-crest em { position: absolute; top: -2px; z-index: 2; color: #d4a63a; font-size: 18px; font-style: normal; }
.hall-settings-crest b { position: absolute; bottom: 12px; z-index: 3; display: grid; width: 31px; height: 31px; place-items: center; color: #dfbc61; font-size: 12px; background: radial-gradient(circle at 40% 35%, #20231d, #050605 72%); border: 1px solid #d4a63a; border-radius: 50%; box-shadow: 0 3px 8px #000; }

@media (max-width: 860px) {
  .hall-settings-layer { align-items: stretch; padding: 0; }
  .hall-settings-sheet { grid-template-rows: 46px minmax(0,1fr) auto; width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .hall-settings-sheet__header { padding: 0 42px 0 8px; }
  .hall-settings-brand { min-width: 0; width: 100%; }
  .hall-settings-cabinet { grid-template-columns: 1fr; }
  .hall-settings-nav { grid-template-columns: repeat(3, 1fr); grid-template-rows: 58px; order: 2; border-top: 1px solid rgba(212,166,58,.3); border-right: 0; }
  .hall-settings-nav button { justify-content: center; gap: 0; padding: 8px; border-right: 1px solid rgba(212,166,58,.1); border-bottom: 0; }
  .hall-settings-nav button span { display: none; }
  .hall-settings-nav svg { width: 25px; height: 25px; }
  .hall-settings-nav button.is-active { box-shadow: inset 0 -3px #d4a63a; }
  .hall-graphics-settings { order: 1; padding: 18px; }
  .hall-graphics-settings__title h2 { font-size: 29px; }
  .hall-device-recommendation__heading { flex-wrap: wrap; }
  .hall-device-recommendation__heading span { flex-basis: 100%; }
  .hall-gameplay-clarity-lock { grid-template-columns: 34px 1fr; }
  .hall-gameplay-clarity-lock p { grid-column: 1 / -1; }
  .hall-settings-actions { margin-top: 6px; padding: 8px; }
  .hall-settings-actions > button { min-width: 0; flex: 1; }
  .hall-settings-crest { display: none; }
}

@media (max-height: 800px) and (min-width: 861px) {
  .hall-settings-sheet { height: calc(100dvh - 38px); }
  .hall-graphics-settings { padding: 18px 26px; }
  .hall-graphics-settings__title h2 { margin-bottom: 10px; font-size: 34px; }
  .hall-device-recommendation { padding: 8px 12px 10px; }
  .hall-device-recommendation > small { margin-bottom: 7px; font-size: 10px; }
  .hall-graphics-presets button { min-height: 43px; font-size: 13px; }
  .hall-graphics-presets i { font-size: 17px; }
  .hall-graphics-grid { margin-top: 10px; }
  .hall-graphics-grid label { min-height: 45px; font-size: 12px; }
  .hall-graphics-grid select { min-height: 34px; font-size: 12px; }
  .hall-graphics-toggles label { min-height: 42px; font-size: 12px; }
  .hall-graphics-toggles i { width: 58px; height: 27px; }
  .hall-graphics-toggles input { width: 58px; height: 27px; }
  .hall-graphics-toggles i::after { width: 19px; height: 19px; }
  .hall-graphics-toggles input:checked + i::after { transform: translateX(29px); }
  .hall-graphics-settings > p { margin-top: 8px; font-size: 9px; }
}

@media (max-width: 560px) {
  .hall-settings-sheet { padding: 5px; }
  .hall-graphics-settings { padding: 14px 12px 18px; }
  .hall-graphics-presets { gap: 5px; }
  .hall-graphics-presets button { min-height: 50px; gap: 5px; padding: 7px; font-size: 11px; }
  .hall-graphics-presets i { font-size: 16px; }
  .hall-graphics-presets em { display: none; }
  .hall-device-recommendation__heading { gap: 4px 8px; }
  .hall-device-recommendation__heading small,
  .hall-device-recommendation__heading strong { font-size: 10px; }
  .hall-gameplay-clarity-lock { padding: 9px 10px; }
  .hall-gameplay-clarity-lock p { font-size: 10px; }
  .hall-graphics-grid label { grid-template-columns: minmax(130px, 1fr) minmax(120px, 42%); min-height: 54px; gap: 10px; font-size: 12px; }
  .hall-graphics-grid select { min-height: 40px; padding-left: 9px; font-size: 12px; }
  .hall-graphics-range { grid-template-columns: 1fr !important; gap: 2px !important; padding: 6px 0; }
  .hall-graphics-range input { width: calc(100% - 58px); }
  .hall-graphics-grid .hall-graphics-range input { width: 100%; }
  .hall-graphics-range output { right: 12px; }
  .hall-graphics-toggles label { min-height: 52px; font-size: 12px; }
  .hall-graphics-switch { grid-template-columns: 70px 36px; gap: 7px; }
  .hall-settings-actions > button { min-height: 44px; font-size: 13px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hall-settings-sheet { grid-template-rows: 38px minmax(0,1fr) 48px; width: 100%; height: 100dvh; padding: 4px; }
  .hall-settings-sheet__header { min-height: 0; }
  .hall-settings-cabinet { grid-template-columns: 168px minmax(0,1fr); }
  .hall-settings-nav { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(42px,1fr)); order: initial; border-right: 1px solid rgba(212,166,58,.3); border-top: 0; }
  .hall-settings-nav button { justify-content: flex-start; gap: 12px; padding: 7px 14px; border-right: 0; border-bottom: 1px solid rgba(212,166,58,.1); }
  .hall-settings-nav button span { display: block; font-size: 11px; }
  .hall-settings-nav svg { width: 20px; height: 20px; }
  .hall-graphics-settings { order: initial; padding: 11px 15px; }
  .hall-graphics-settings__title h2 { margin-bottom: 8px; font-size: 24px; }
  .hall-device-recommendation { padding: 7px 9px 9px; }
  .hall-device-recommendation > small { margin-bottom: 6px; font-size: 9px; }
  .hall-device-recommendation__heading { margin-bottom: 5px; }
  .hall-device-recommendation__heading small,
  .hall-device-recommendation__heading strong { font-size: 9px; }
  .hall-device-recommendation__heading span { display: none; }
  .hall-graphics-presets button { min-height: 38px; font-size: 10px; }
  .hall-gameplay-clarity-lock { grid-template-columns: 24px 1fr; gap: 5px 9px; margin-top: 6px; padding: 6px 8px; }
  .hall-gameplay-clarity-lock svg { width: 21px; height: 21px; }
  .hall-gameplay-clarity-lock small { font-size: 8px; }
  .hall-gameplay-clarity-lock strong { font-size: 10px; }
  .hall-gameplay-clarity-lock p { display: none; }
  .hall-graphics-grid { margin-top: 6px; }
  .hall-graphics-grid label { min-height: 42px; font-size: 10px; }
  .hall-graphics-grid select { min-height: 32px; font-size: 10px; }
  .hall-graphics-toggles label { min-height: 40px; font-size: 10px; }
  .hall-graphics-toggles i { width: 54px; height: 26px; }
  .hall-graphics-toggles input { width: 54px; height: 26px; }
  .hall-graphics-switch { grid-template-columns: 54px 34px; gap: 6px; }
  .hall-graphics-switch b { font-size: 10px; }
  .hall-graphics-toggles i::after { width: 18px; height: 18px; }
  .hall-graphics-toggles input:checked + i::after { transform: translateX(27px); }
  .hall-graphics-settings > p { display: none; }
  .hall-settings-actions { margin-top: 4px; padding: 4px 12px; }
  .hall-settings-actions > button { min-width: 160px; min-height: 36px; font-size: 12px; }
}

.hall-content {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hall-room {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(270px, 22%) minmax(420px, 1fr) minmax(280px, 22%);
  min-width: 0;
  min-height: 0;
  background: #0a0d0c;
}

.hall-room:has(.hall-match-setup) {
  grid-template-columns: minmax(0, 1fr);
}

.hall-room:has(.hall-match-setup) > .hall-side {
  overflow: hidden;
  visibility: hidden;
}

.hall-room:has(.hall-match-setup) > .hall-stage {
  grid-column: 1;
}

.hall-stage,
.hall-training {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 7, 0.14), rgba(2, 5, 4, 0.25)),
    url("../assets/lobby_hall_v1/club_background.png") center / cover no-repeat;
}

.hall-stage {
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 50px);
  isolation: isolate;
}

.hall-stage::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: radial-gradient(ellipse at center 38%, rgba(3, 10, 8, 0.08), rgba(2, 6, 5, 0.32) 80%);
}

.hall-side {
  position: relative;
  z-index: 4;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(6, 20, 17, 0.96), rgba(7, 12, 11, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, 0.01) 4px 5px);
  backdrop-filter: blur(18px);
}

.hall-chat {
  border-inline-end: 1px solid rgba(214, 167, 68, 0.28);
}

.hall-players {
  border-inline-start: 1px solid rgba(214, 167, 68, 0.28);
}

.hall-side-title {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 1.6vw, 29px);
  border-bottom: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-side-title h2 {
  margin: 0;
  color: #f3d47c;
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hall-side-title h2 span {
  color: #a9b0aa;
}

.hall-side-title button,
.hall-player-card > button:first-child {
  display: none;
  color: #e7c160;
  font-size: 27px;
  background: none;
  border: 0;
}

.hall-chat-scroll,
.hall-player-scroll {
  min-height: 0;
  overflow: auto;
  scrollbar-color: rgba(215, 170, 68, 0.38) transparent;
}

.hall-chat-scroll {
  padding: 2px clamp(16px, 1.45vw, 26px);
}

.hall-chat-message {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 13px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-chat-message > img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid #d4a63a;
  border-radius: 50%;
}

.hall-chat-message header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.hall-chat-message strong {
  color: #f6f2e9;
  font-size: 16px;
  font-weight: 550;
}

.hall-chat-message time {
  color: #8d928d;
  font-size: 13px;
}

.hall-chat-message p {
  margin: 7px 0 0;
  color: #bdc0bc;
  font-size: 14px;
  line-height: 1.45;
}

.hall-chat-message small {
  display: block;
  margin-top: 7px;
  color: #dcb251;
  font-size: 11px;
  text-transform: uppercase;
}

.hall-chat-form {
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 10px;
  padding: 16px clamp(16px, 1.45vw, 26px) max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-chat-form input {
  min-width: 0;
  padding: 0 14px;
  color: #f4efe5;
  background: rgba(22, 29, 26, 0.88);
  border: 1px solid rgba(215, 169, 65, 0.4);
  border-radius: 7px;
  outline: none;
}

.hall-chat-form input:focus {
  border-color: #e6bd5b;
  box-shadow: 0 0 0 2px rgba(230, 189, 91, 0.12);
}

.hall-chat-form button {
  display: grid;
  place-items: center;
  color: #11100b;
  background: linear-gradient(145deg, #f4d47a, #bb7a21);
  border: 1px solid #f5d87e;
  border-radius: 7px;
}

.hall-chat-form svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.hall-player-scroll {
  flex: 1 1 auto;
  padding: 0 12px;
}

.hall-player-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 32px 24px;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  color: #f4f0e8;
  text-align: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-player-row:hover,
.hall-player-row.is-selected {
  background: linear-gradient(90deg, rgba(12, 67, 46, 0.72), rgba(12, 67, 46, 0.15));
}

.hall-player-avatar {
  position: relative;
}

.hall-player-avatar img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid #d4a63a;
  border-radius: 50%;
}

.hall-player-avatar i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 12px;
  height: 12px;
  background: #4bd568;
  border: 2px solid #0a1512;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(75, 213, 104, 0.6);
}

.hall-player-row.is-busy .hall-player-avatar i {
  background: #d14b3f;
  box-shadow: 0 0 7px rgba(209, 75, 63, 0.58);
}

.hall-player-row.is-searching .hall-player-avatar i {
  background: #e0b44e;
  box-shadow: 0 0 7px rgba(224, 180, 78, 0.58);
}

.hall-player-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.hall-player-row strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-player-row small {
  color: #e0b44e;
  font-size: 11px;
  text-transform: uppercase;
}

.hall-player-discipline {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #fff4cc;
  font-weight: 800;
  background: #101312;
  border: 1px solid #d5a43d;
  border-radius: 50%;
}

.hall-player-row em {
  color: #cbd0cc;
  font-size: 14px;
  font-style: normal;
}

.hall-player-hint {
  display: grid;
  place-items: center;
  padding: 18px 26px;
  color: #858c87;
  text-align: center;
  border-top: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-player-hint span {
  color: #d6aa46;
  font-size: 28px;
}

.hall-player-hint p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.hall-player-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 12px;
  padding: 14px 20px;
  border-top: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-player-card > img {
  width: 56px;
  height: 56px;
  grid-row: span 2;
  object-fit: cover;
  border: 1px solid #d4a63a;
  border-radius: 50%;
}

.hall-player-card h3,
.hall-player-card p {
  margin: 0;
}

.hall-player-card p {
  color: #ddb149;
  font-size: 11px;
}

.hall-player-country {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #f4f0e8;
  background: rgba(255, 255, 255, 0.035);
  border-inline-start: 2px solid rgba(212, 166, 58, 0.72);
}

.hall-player-country > span:first-child {
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.hall-player-country > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.hall-player-country small {
  color: #8f9691;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hall-player-country strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 600;
}

.hall-player-card dl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  margin: 3px 0;
  gap: 8px;
}

.hall-player-card dl div {
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.035);
}

.hall-player-card dt {
  color: #8f9691;
  font-size: 10px;
}

.hall-player-card dd {
  margin: 2px 0 0;
  color: #f0d175;
  font-size: 15px;
}

.hall-bot-strength {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr minmax(118px, 0.8fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #d9cda9;
  font-size: 11px;
  background: rgba(6, 38, 25, 0.58);
  border: 1px solid rgba(212, 166, 58, 0.32);
  border-radius: 6px;
}

.hall-bot-strength select {
  min-width: 0;
  min-height: 32px;
  padding: 0 28px 0 9px;
  color: #f5dda0;
  background: #111713;
  border: 1px solid rgba(224, 184, 78, 0.58);
  border-radius: 5px;
}

.hall-small-gold,
.hall-small-dark {
  min-height: 34px;
  grid-column: 1 / -1;
  color: #171106;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(145deg, #f3d27a, #b9761e);
  border: 1px solid #f4d57d;
  border-radius: 5px;
}

.hall-player-card-status.is-available {
  color: #65d67c;
}

.hall-player-card-status.is-busy {
  color: #df6a5e;
}

.hall-player-card-status.is-searching {
  color: #e0b44e;
}

.hall-small-gold:disabled,
.hall-bot-strength select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.hall-small-dark {
  color: #e4c063;
  background: #131a17;
  border-color: rgba(218, 172, 65, 0.45);
}

.hall-invite-toggle {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  color: #afb4b0;
  border-top: 1px solid rgba(232, 220, 190, 0.13);
}

.hall-invite-toggle input {
  position: absolute;
  opacity: 0;
}

.hall-invite-toggle i {
  position: relative;
  width: 49px;
  height: 25px;
  flex: 0 0 auto;
  background: #303532;
  border: 1px solid #87682d;
  border-radius: 99px;
}

.hall-invite-toggle i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  content: "";
  background: #d8d9d5;
  border-radius: 50%;
  transition: transform 160ms ease;
}

.hall-invite-toggle input:checked + i {
  background: #1d683f;
}

.hall-invite-toggle input:checked + i::after {
  transform: translateX(24px);
}

.hall-stage-card {
  width: min(100%, 680px);
  padding: clamp(24px, 3vw, 46px);
  color: #f8f3e9;
  text-align: center;
  background: linear-gradient(145deg, rgba(5, 15, 12, 0.88), rgba(8, 10, 9, 0.82));
  border: 1px solid rgba(233, 190, 91, 0.58);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 247, 220, 0.08);
  backdrop-filter: blur(12px);
}

.hall-stage-hero {
  width: min(100%, 640px);
  padding-block: clamp(32px, 5.6vh, 62px);
}

.hall-stage-card > small {
  color: #d7ad4c;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hall-stage-card h1 {
  margin: 12px 0 8px;
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(40px, 4vw, 72px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 0.96;
  text-transform: uppercase;
  text-shadow: 0 4px 16px #000;
}

.hall-stage-card > p {
  margin: 0 0 22px;
  color: #ddd8ce;
  font-size: clamp(15px, 1.25vw, 21px);
}

.hall-play-button {
  min-width: min(100%, 360px);
  min-height: clamp(60px, 7vh, 82px);
  padding: 0 42px;
  color: #121006;
  font-size: clamp(25px, 2.2vw, 40px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #f8dc8b, #c2872d);
  border: 1px solid #fff0a5;
  border-radius: 8px;
  box-shadow: inset 0 1px #fff7ca, 0 10px 26px rgba(0, 0, 0, 0.42);
}

.hall-play-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.hall-play-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8) brightness(0.65);
}

.hall-match-setup {
  position: relative;
  display: grid;
  width: min(100%, 1120px);
  max-height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 27%);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px 14px;
  padding: clamp(13px, 1.35vw, 21px);
  overflow: hidden;
  text-align: start;
}

.hall-match-setup h1 {
  font-size: clamp(34px, 3vw, 52px);
  text-align: center;
}

.hall-match-setup > p,
.hall-match-setup > small {
  display: block;
  text-align: center;
}

.hall-card-close {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #e7c261;
  font-size: 30px;
  background: none;
  border: 0;
}

.hall-match-setup .hall-discipline-fieldset {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 0;
  margin-top: 0;
  padding-right: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(218, 172, 65, 0.55) rgba(3, 10, 8, 0.5);
  scrollbar-width: thin;
}

.hall-match-setup .hall-discipline-fieldset > legend {
  margin-bottom: 8px;
}

.hall-match-setup fieldset {
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.hall-match-setup legend {
  margin-bottom: 8px;
  color: #e3bd5d;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hall-choice-grid {
  display: grid;
  grid-template-columns: 1.28fr 1fr 0.88fr;
  gap: 10px;
}

.hall-discipline-group {
  min-width: 0;
  padding: 10px;
  background: linear-gradient(160deg, rgba(17, 28, 23, 0.94), rgba(8, 14, 12, 0.96));
  border: 1px solid rgba(230, 188, 91, 0.24);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255, 245, 215, 0.04);
}

.hall-discipline-group > header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 0 3px 8px;
  color: #efd280;
  border-bottom: 1px solid rgba(231, 190, 91, 0.18);
}

.hall-discipline-group > header strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hall-discipline-group > header small {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #9ea8a2;
  font-size: 10px;
  background: rgba(3, 9, 7, 0.65);
  border: 1px solid rgba(231, 190, 91, 0.18);
  border-radius: 50%;
}

.hall-discipline-list {
  display: grid;
  gap: 6px;
}

.hall-choice {
  display: grid;
  min-width: 0;
  min-height: 49px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  color: #c9cbc7;
  text-align: start;
  background: rgba(21, 27, 24, 0.88);
  border: 1px solid rgba(233, 190, 91, 0.24);
  border-radius: 7px;
}

.hall-discipline-mark {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
}

.hall-discipline-mark-pool {
  background: radial-gradient(circle at 35% 28%, #4e5450 0 4%, #151918 28%, #030504 72%);
  border: 1px solid #d7a93f;
  border-radius: 50%;
  box-shadow: inset -4px -5px 8px #000, inset 3px 3px 5px rgba(255, 255, 255, 0.12), 0 2px 5px #000;
}

.hall-discipline-mark-pool::before {
  position: absolute;
  inset: 7px;
  content: "";
  background: #f3ead3;
  border-radius: 50%;
}

.hall-discipline-mark-pool i {
  position: relative;
  z-index: 1;
  color: #15130f;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}

.hall-discipline-mark-pool-10 i {
  font-size: 8px;
}

.hall-discipline-mark-german {
  background: linear-gradient(180deg, #171a19 0 38%, #c21d27 39% 62%, #d5a72f 63% 100%);
}

.hall-discipline-mark-pyramid {
  filter: drop-shadow(0 2px 2px #000);
}

.hall-discipline-mark-pyramid i {
  position: absolute;
  bottom: 3px;
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 35% 30%, #fffdf4, #d5c9ac 70%, #9d8d6f);
  border: 1px solid #b99443;
  border-radius: 50%;
}

.hall-discipline-mark-pyramid i:nth-child(1) { left: 2px; }
.hall-discipline-mark-pyramid i:nth-child(2) { left: 10px; bottom: 14px; }
.hall-discipline-mark-pyramid i:nth-child(3) { right: 2px; }
.hall-discipline-mark-pyramid b {
  position: absolute;
  right: -3px;
  bottom: -2px;
  z-index: 2;
  min-width: 15px;
  padding: 1px 3px;
  color: #211909;
  font-size: 6px;
  text-align: center;
  background: #e1b84e;
  border: 1px solid #fff0a8;
  border-radius: 6px;
}

.hall-discipline-mark-snooker {
  display: block;
  filter: drop-shadow(0 2px 2px #000);
}

.hall-discipline-mark-snooker i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 30%, #d6453b, #71130f 78%);
  border: 1px solid #d07d67;
  border-radius: 50%;
}

.hall-discipline-mark-snooker i:nth-child(1) { left: 11px; top: 1px; }
.hall-discipline-mark-snooker i:nth-child(2) { left: 6px; top: 10px; }
.hall-discipline-mark-snooker i:nth-child(3) { left: 16px; top: 10px; }
.hall-discipline-mark-snooker i:nth-child(4) { left: 1px; top: 19px; }
.hall-discipline-mark-snooker i:nth-child(5) { left: 11px; top: 19px; }
.hall-discipline-mark-snooker i:nth-child(6) { left: 21px; top: 19px; }
.hall-discipline-mark-snooker b {
  position: absolute;
  right: -5px;
  bottom: -2px;
  z-index: 2;
  min-width: 15px;
  padding: 1px 3px;
  color: #211909;
  font-size: 6px;
  text-align: center;
  background: #e1b84e;
  border: 1px solid #fff0a8;
  border-radius: 6px;
}

.hall-choice span {
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.18;
}

.hall-choice > em {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: transparent;
  font-size: 10px;
  font-style: normal;
  background: rgba(3, 8, 7, 0.6);
  border: 1px solid rgba(235, 199, 111, 0.25);
  border-radius: 4px;
}

.hall-choice.is-selected {
  color: #fff8e6;
  background: linear-gradient(145deg, #12593b, #0b2e22);
  border-color: #e7bd57;
  box-shadow: inset 0 0 16px rgba(38, 174, 109, 0.22);
}

.hall-choice.is-selected > em {
  color: #17321f;
  background: #efcb6c;
  border-color: #fff0ae;
  box-shadow: 0 0 8px rgba(231, 189, 87, 0.32);
}

.hall-option-grid {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
}

.hall-option-grid fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hall-option-grid legend {
  grid-column: 1 / -1;
}

.hall-segment {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 8px;
  color: #aeb2ae;
  background: #151a18;
  border: 1px solid rgba(232, 190, 90, 0.25);
}

.hall-segment em {
  display: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  color: #17321f;
  font-size: 9px;
  font-style: normal;
  background: #efcb6c;
  border: 1px solid #fff0ae;
  border-radius: 4px;
}

.hall-segment[role="checkbox"] em {
  display: grid;
  color: transparent;
  background: rgba(3, 8, 7, 0.55);
  border-color: rgba(235, 199, 111, 0.25);
}

.hall-segment[role="checkbox"].is-selected em {
  color: #17321f;
  background: #efcb6c;
  border-color: #fff0ae;
}

.hall-segment:first-of-type {
  border-radius: 6px 0 0 6px;
}

.hall-segment:last-of-type {
  border-radius: 0 6px 6px 0;
}

.hall-segment.is-selected {
  color: #f3d06f;
  background: #143b2c;
  border-color: #c89537;
}

.hall-search-footer {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(232, 190, 90, 0.2);
}

.hall-search-footer p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: #9fa7a2;
  font-size: 12px;
}

.hall-search-footer p strong {
  color: #f0ca67;
  font-family: "KottCondensed", "Arial Narrow", sans-serif;
  font-size: 28px;
  line-height: 1;
}

.hall-match-setup .hall-play-button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  font-size: 25px;
}

.hall-search-orbit {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border: 1px solid rgba(231, 188, 87, 0.25);
  border-radius: 50%;
}

.hall-search-orbit i {
  position: absolute;
  inset: -1px;
  border: 3px solid transparent;
  border-top-color: #ecc45e;
  border-radius: 50%;
  animation: hall-spin 1s linear infinite;
}

.hall-search-orbit::after {
  position: absolute;
  inset: 20px;
  content: "8";
  display: grid;
  place-items: center;
  color: #fff1b7;
  font-weight: 900;
  background: #0c0f0e;
  border: 1px solid #d6a63b;
  border-radius: 50%;
}

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

.hall-search-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 24px;
}

.hall-search-tags span {
  padding: 7px 10px;
  color: #edd078;
  background: #113326;
  border: 1px solid rgba(225, 179, 70, 0.45);
  border-radius: 99px;
}

.hall-searching .hall-small-dark {
  min-width: 180px;
}

.hall-bottom-nav {
  position: relative;
  z-index: 21;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  min-width: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background:
    linear-gradient(180deg, rgba(8, 16, 14, 0.99), rgba(5, 9, 8, 0.99)),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.01) 5px 6px);
  border-top: 1px solid rgba(226, 181, 72, 0.46);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
}

.hall-bottom-nav button {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1vw, 14px);
  padding: 10px 8px;
  color: #d6bd83;
  background: none;
  border: 0;
  border-inline-end: 1px solid rgba(232, 220, 190, 0.11);
}

.hall-bottom-nav button::after {
  position: absolute;
  right: 16%;
  bottom: 0;
  left: 16%;
  height: 3px;
  content: "";
  background: transparent;
  border-radius: 3px 3px 0 0;
}

.hall-bottom-nav button.is-active {
  color: #f6da88;
  background: linear-gradient(180deg, rgba(22, 80, 57, 0.54), rgba(8, 32, 24, 0.64));
}

.hall-bottom-nav button.is-active::after {
  background: #e9bd57;
  box-shadow: 0 -4px 12px rgba(233, 189, 87, 0.42);
}

.hall-bottom-nav svg {
  width: clamp(29px, 2.7vw, 45px);
  height: clamp(29px, 2.7vw, 45px);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.hall-bottom-nav span {
  overflow: hidden;
  font-size: clamp(11px, 1.05vw, 18px);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hall-bottom-nav button > i {
  position: absolute;
  top: 12px;
  right: 22%;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: white;
  font-size: 11px;
  font-style: normal;
  background: #d93443;
  border: 2px solid #08100e;
  border-radius: 50%;
}

.hall-edge-button,
.hall-drawer-scrim {
  display: none;
}

.hall-training {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(390px, 38%) minmax(0, 1fr);
  align-items: stretch;
  padding: clamp(24px, 4vw, 66px);
  gap: clamp(18px, 2.4vw, 38px);
}

.hall-training::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(4, 10, 8, 0.92) 0 37%, rgba(4, 9, 7, 0.2) 66%, rgba(4, 9, 7, 0.7));
}

.hall-training-copy,
.hall-training-table,
.hall-promo {
  position: relative;
  z-index: 1;
}

.hall-training-copy {
  align-self: center;
}

.hall-training-copy > small,
.hall-promo small {
  color: #e0b653;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hall-training-copy h1 {
  margin: 8px 0;
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(46px, 5vw, 78px);
  line-height: 0.96;
  text-transform: uppercase;
}

.hall-training-copy > p {
  max-width: 520px;
  margin: 0 0 22px;
  color: #d2d0ca;
  line-height: 1.55;
}

.hall-training-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.hall-training-modes button {
  display: grid;
  min-height: 61px;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #d1d0cb;
  text-align: start;
  background: rgba(11, 20, 17, 0.8);
  border: 1px solid rgba(225, 177, 66, 0.25);
  border-radius: 6px;
}

.hall-training-modes button.is-selected {
  color: #fff7e1;
  background: linear-gradient(145deg, rgba(19, 100, 67, 0.92), rgba(8, 43, 31, 0.95));
  border-color: #e4b64e;
  box-shadow: inset 0 0 18px rgba(51, 189, 124, 0.15);
}

.hall-training-modes i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #f3d377;
  font-style: normal;
  font-weight: 900;
  background: #101211;
  border: 1px solid #d09c35;
  border-radius: 50%;
}

.hall-training-table {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}

.hall-training-table span {
  padding: 9px 18px;
  color: #f1cf72;
  background: rgba(5, 12, 10, 0.78);
  border: 1px solid rgba(227, 180, 70, 0.55);
  border-radius: 99px;
  backdrop-filter: blur(8px);
}

.hall-promo {
  display: grid;
  align-self: end;
  gap: 10px;
}

.hall-promo article {
  position: relative;
  display: grid;
  min-height: 96px;
  align-content: end;
  padding: 17px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(26, 65, 48, 0.94), rgba(9, 20, 17, 0.96));
  border: 1px solid rgba(227, 181, 72, 0.5);
  border-radius: 8px;
}

.hall-promo article::before {
  position: absolute;
  top: -30px;
  right: -18px;
  width: 90px;
  height: 90px;
  content: "";
  background: radial-gradient(circle, rgba(238, 192, 85, 0.25), transparent 68%);
}

.hall-promo strong {
  margin-top: 5px;
  color: #f2d277;
  font-size: 19px;
}

.hall-promo button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #f4d272;
  font-size: 25px;
  background: none;
  border: 0;
}

.hall-placeholder-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 40px;
  text-align: center;
  background:
    linear-gradient(rgba(5, 14, 11, 0.85), rgba(4, 9, 8, 0.94)),
    url("../assets/lobby_hall_v1/club_background.png") center / cover;
}

.hall-placeholder-card > svg {
  width: 78px;
  color: #e1b653;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.hall-placeholder-card h1 {
  margin: 16px 0 8px;
  font-size: clamp(38px, 4vw, 68px);
  text-transform: uppercase;
}

.hall-placeholder-card p {
  color: #bbbdb9;
}

.hall-placeholder-card div {
  display: flex;
  gap: 10px;
}

.hall-placeholder-card div span {
  padding: 10px 14px;
  color: #e7c15f;
  background: rgba(15, 38, 29, 0.92);
  border: 1px solid rgba(224, 177, 66, 0.44);
  border-radius: 99px;
}

@media (max-width: 1180px) {
  .hall-topbar {
    grid-template-columns: minmax(260px, 1fr) 180px minmax(410px, 1fr);
  }

  .hall-room {
    grid-template-columns: minmax(240px, 23%) minmax(360px, 1fr) minmax(250px, 23%);
  }

  .hall-profile-copy > strong {
    font-size: 21px;
  }

  .hall-currency + .hall-currency {
    padding-inline-start: 7px;
  }

  .hall-bottom-nav span {
    font-size: 11px;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  .hall-app > [data-hall-app-root] {
    grid-template-rows: 98px minmax(0, 1fr) calc(72px + env(safe-area-inset-bottom));
  }

  .hall-topbar {
    grid-template-columns: minmax(150px, 1fr) auto;
    padding: max(10px, env(safe-area-inset-top)) 12px 8px;
  }

  .hall-brand {
    display: none;
  }

  .hall-avatar-frame {
    width: 54px;
  }

  .hall-avatar-frame > i {
    width: 23px;
    height: 23px;
    font-size: 10px;
  }

  .hall-profile-copy {
    margin-inline-start: 10px;
    gap: 3px;
  }

  .hall-profile-copy > strong {
    max-width: 110px;
    font-size: 17px;
  }

  .hall-rank-row b {
    padding: 2px 6px;
    font-size: 9px;
  }

  .hall-rank-row i {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .hall-xp-row {
    grid-template-columns: auto 68px;
  }

  .hall-xp-row small:last-child {
    display: none;
  }

  .hall-toolbar {
    gap: 5px;
  }

  .hall-currency {
    display: grid;
    grid-template-columns: 27px auto;
    gap: 3px;
  }

  .hall-currency .hall-currency-art {
    width: 27px;
    height: 27px;
    grid-row: span 2;
  }

  .hall-currency strong {
    font-size: 12px;
  }

  .hall-currency > span {
    display: none;
  }

  .hall-currency + .hall-currency {
    padding-inline-start: 4px;
    border: 0;
  }

  .hall-language {
    padding: 0;
    border: 0;
  }

  .hall-language select {
    width: 36px;
    font-size: 11px;
  }

  .hall-language svg,
  .hall-notifications-button {
    display: none;
  }

  .hall-room {
    grid-template-columns: 1fr;
  }

  .hall-stage {
    padding: 16px 34px;
    background-position: center;
  }

  .hall-stage-card {
    padding: 22px 16px;
  }

  .hall-stage-card h1 {
    font-size: clamp(37px, 12vw, 54px);
  }

  .hall-stage-card > p {
    font-size: 14px;
  }

  .hall-side {
    position: fixed;
    top: 98px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 42;
    width: min(88vw, 360px);
    visibility: hidden;
    transition: transform 190ms ease, visibility 190ms;
  }

  .hall-chat {
    left: 0;
    transform: translateX(-104%);
  }

  .hall-players {
    right: 0;
    transform: translateX(104%);
  }

  .hall-side.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  .hall-players {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .hall-players > .hall-side-title {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    background: #081713;
  }

  .hall-players > .hall-player-scroll {
    flex: 0 0 auto;
    overflow: visible;
  }

  .hall-players > .hall-player-card {
    flex: 0 0 auto;
  }

  .hall-players > .hall-invite-toggle {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 auto;
    background: #08110f;
  }

  .hall-side-title button,
  .hall-player-card > button:first-child {
    display: block;
  }

  .hall-edge-button {
    position: absolute;
    top: 18px;
    z-index: 10;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #f0cd70;
    background: rgba(6, 20, 16, 0.9);
    border: 1px solid rgba(228, 181, 71, 0.65);
    border-radius: 50%;
    backdrop-filter: blur(8px);
  }

  .hall-edge-chat {
    left: 10px;
  }

  .hall-edge-players {
    right: 10px;
  }

  .hall-edge-button svg {
    width: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .hall-edge-button span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 4px;
    color: white;
    font-size: 10px;
    background: #d43b44;
    border: 2px solid #08110e;
    border-radius: 99px;
  }

  .hall-room:has(.hall-side.is-open) .hall-drawer-scrim {
    position: fixed;
    inset: 98px 0 calc(72px + env(safe-area-inset-bottom));
    z-index: 41;
    display: block;
    background: rgba(0, 0, 0, 0.58);
    border: 0;
  }

  .hall-bottom-nav {
    overflow: hidden;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .hall-bottom-nav button {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 5px 3px;
  }

  .hall-bottom-nav svg {
    width: 25px;
    height: 25px;
    margin: auto;
  }

  .hall-bottom-nav span {
    min-height: 14px;
    font-size: 6.5px;
    line-height: 1.05;
    white-space: normal;
  }

  .hall-bottom-nav button > i {
    top: 3px;
    right: 18%;
  }

  .hall-choice-grid {
    grid-template-columns: 1fr;
  }

  .hall-choice {
    min-height: 56px;
  }

  .hall-option-grid {
    grid-template-columns: 1fr;
  }

  .hall-match-setup {
    display: flex;
    width: min(100%, 560px);
    max-height: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 16px 12px 12px;
    overflow: hidden;
  }

  .hall-match-setup .hall-discipline-fieldset {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 3px;
    overflow-y: auto;
  }

  .hall-match-setup .hall-play-button {
    min-height: 50px;
    font-size: 23px;
  }

  .hall-search-footer {
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 8px;
  }

  .hall-training {
    grid-template-columns: 1fr;
    align-content: end;
    padding: 24px 18px;
  }

  .hall-training::before {
    background: linear-gradient(0deg, rgba(4, 10, 8, 0.95) 0 57%, rgba(4, 9, 7, 0.24) 100%);
  }

  .hall-training-table,
  .hall-promo {
    display: none;
  }

  .hall-training-copy h1 {
    font-size: 48px;
  }

  .hall-training-copy > p {
    font-size: 13px;
  }

  .hall-training-modes button {
    min-height: 50px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hall-app > [data-hall-app-root] {
    grid-template-rows: 66px minmax(0, 1fr) 68px;
  }

  .hall-topbar {
    grid-template-columns: minmax(170px, 1fr) 170px minmax(330px, 1fr);
    padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-left)) 5px max(10px, env(safe-area-inset-right));
  }

  .hall-avatar-frame {
    width: 46px;
    border-radius: 8px;
  }

  .hall-avatar-frame img {
    border-radius: 6px;
  }

  .hall-avatar-frame > i,
  .hall-rank-row,
  .hall-xp-row,
  .hall-notifications-button {
    display: none;
  }

  .hall-profile-copy {
    margin-inline-start: 8px;
  }

  .hall-profile-copy > strong {
    max-width: 120px;
    font-size: 16px;
  }

  .hall-brand {
    max-height: 50px;
  }

  .hall-toolbar {
    gap: 4px;
  }

  .hall-currency .hall-currency-art {
    width: 27px;
    height: 27px;
  }

  .hall-currency strong {
    font-size: 13px;
  }

  .hall-language {
    padding-inline: 6px 21px;
  }

  .hall-language select {
    max-width: 50px;
    font-size: 11px;
  }

  .hall-room {
    grid-template-columns: minmax(185px, 24%) minmax(300px, 1fr) minmax(195px, 24%);
  }

  .hall-side-title {
    min-height: 42px;
    padding: 0 12px;
  }

  .hall-side-title h2 {
    font-size: 13px;
  }

  .hall-chat-scroll {
    padding: 0 10px;
  }

  .hall-chat-message {
    grid-template-columns: 35px 1fr;
    gap: 8px;
    padding: 9px 0;
  }

  .hall-chat-message > img {
    width: 35px;
    height: 35px;
  }

  .hall-chat-message strong,
  .hall-player-row strong {
    font-size: 12px;
  }

  .hall-chat-message p {
    margin-top: 2px;
    font-size: 10px;
  }

  .hall-chat-message small,
  .hall-player-hint {
    display: none;
  }

  .hall-player-card {
    display: grid;
  }

  .hall-chat-form {
    grid-template-columns: 1fr 38px;
    padding: 7px 9px;
  }

  .hall-player-scroll {
    padding: 0 6px;
  }

  .hall-player-row {
    grid-template-columns: 35px minmax(0, 1fr) 25px 18px;
    gap: 6px;
    padding: 7px 5px;
  }

  .hall-player-avatar img {
    width: 35px;
    height: 35px;
  }

  .hall-player-discipline {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .hall-invite-toggle {
    min-height: 39px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .hall-invite-toggle i {
    width: 40px;
    height: 21px;
  }

  .hall-invite-toggle i::after {
    width: 15px;
    height: 15px;
  }

  .hall-invite-toggle input:checked + i::after {
    transform: translateX(18px);
  }

  .hall-stage {
    padding: 10px;
  }

  .hall-stage-card {
    width: min(100%, 470px);
    padding: 14px 18px;
  }

  .hall-stage-card h1 {
    margin: 5px 0;
    font-size: clamp(31px, 6.5vh, 43px);
  }

  .hall-stage-card > p {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .hall-play-button {
    min-height: 48px;
    font-size: 24px;
  }

  .hall-match-setup {
    max-height: 100%;
    overflow: auto;
  }

  .hall-match-setup > small,
  .hall-match-setup > p {
    display: none;
  }

  .hall-match-setup fieldset {
    margin-top: 8px;
  }

  .hall-choice {
    min-height: 42px;
    padding: 5px;
  }

  .hall-discipline-mark {
    width: 27px;
    height: 27px;
  }

  .hall-segment {
    min-height: 30px;
    font-size: 10px;
  }

  .hall-match-setup .hall-play-button {
    min-height: 38px;
    font-size: 20px;
  }

  .hall-bottom-nav button {
    display: grid;
    align-content: center;
    gap: 1px;
    padding: 4px 3px;
  }

  .hall-bottom-nav svg {
    width: 28px;
    height: 28px;
    margin: auto;
  }

  .hall-bottom-nav span {
    font-size: 8px;
  }

  .hall-training {
    grid-template-columns: minmax(310px, 47%) 1fr;
    padding: 16px 24px;
  }

  .hall-training-copy > small,
  .hall-training-copy > p,
  .hall-promo {
    display: none;
  }

  .hall-training-copy h1 {
    margin: 0 0 8px;
    font-size: 38px;
  }

  .hall-training-modes {
    gap: 4px;
    margin-bottom: 8px;
  }

  .hall-training-modes button {
    min-height: 38px;
    grid-template-columns: 25px 1fr;
    padding: 4px 7px;
    font-size: 11px;
  }

  .hall-training-modes i {
    width: 24px;
    height: 24px;
  }

  .hall-training-copy .hall-play-button {
    min-height: 40px;
    font-size: 20px;
  }
}

[dir="rtl"] .hall-language svg {
  right: auto;
  left: 8px;
}

[dir="rtl"] .hall-card-close {
  right: auto;
  left: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .hall-search-orbit i {
    animation-duration: 2.5s;
  }

  .hall-app *,
  .hall-app *::before,
  .hall-app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Matchmaking ceremony — approved King of the Table setup and search reference. */
.hall-room:has(.hall-match-ceremony),
.hall-room:has(.hall-match-search) {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.hall-room:has(.hall-match-ceremony) > .hall-stage,
.hall-room:has(.hall-match-search) > .hall-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  padding: clamp(10px, 1.6vw, 24px);
  background:
    radial-gradient(circle at 50% 45%, rgb(27 68 49 / 26%), transparent 46%),
    linear-gradient(180deg, rgb(3 11 8 / 30%), rgb(2 8 6 / 66%));
}

.hall-room:has(.hall-match-ceremony) > .hall-side,
.hall-room:has(.hall-match-search) > .hall-side,
.hall-room:has(.hall-match-ceremony) > .hall-edge-button,
.hall-room:has(.hall-match-search) > .hall-edge-button,
.hall-room:has(.hall-match-ceremony) > .hall-drawer-scrim,
.hall-room:has(.hall-match-search) > .hall-drawer-scrim {
  display: none;
}

.hall-match-ceremony,
.hall-match-search {
  position: relative;
  isolation: isolate;
  width: min(100%, 1240px);
  height: min(100%, 716px);
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: #f5edda;
  text-align: start;
  background:
    linear-gradient(145deg, rgb(11 25 19 / 98%), rgb(4 11 8 / 99%)),
    radial-gradient(circle at 12% 0%, rgb(200 154 61 / 13%), transparent 38%);
  border: 1px solid rgb(205 162 67 / 66%);
  border-radius: 5px;
  box-shadow:
    0 28px 78px rgb(0 0 0 / 64%),
    inset 0 1px rgb(255 241 203 / 8%),
    inset 0 0 70px rgb(0 0 0 / 22%);
  backdrop-filter: blur(13px);
  animation: hall-match-surface-in 240ms cubic-bezier(.2, .72, .22, 1) both;
}

.hall-match-ceremony::after,
.hall-match-search::after {
  position: absolute;
  inset: 8px;
  z-index: -1;
  content: "";
  border: 1px solid rgb(228 191 103 / 10%);
  pointer-events: none;
}

@keyframes hall-match-surface-in {
  from { opacity: 0; transform: translateY(8px) scale(.994); }
  to { opacity: 1; transform: none; }
}

.hall-match-room-plaque {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 112px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(20px, 3vw, 44px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(3 10 7 / 25%), rgb(3 10 7 / 52%) 40%, rgb(3 10 7 / 91%) 72%),
    linear-gradient(0deg, rgb(1 6 4 / 62%), transparent 68%),
    var(--hall-match-room) center 51% / cover no-repeat;
  border-bottom: 1px solid rgb(221 179 82 / 48%);
  box-shadow: inset 0 -24px 44px rgb(0 0 0 / 40%);
}

.hall-match-room-plaque::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgb(255 255 255 / 1.2%) 4px 5px),
    radial-gradient(circle at 16% 28%, rgb(241 205 123 / 10%), transparent 28%);
  pointer-events: none;
}

.hall-match-room-plaque__number {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #efd17b;
  font: 700 24px/1 "KottCondensed", "Arial Narrow", sans-serif;
  border: 1px solid rgb(222 179 78 / 55%);
  box-shadow: inset 0 0 0 4px rgb(2 10 7 / 48%);
}

.hall-match-room-plaque__identity,
.hall-match-room-plaque__economy,
.hall-match-room-plaque__economy > span {
  position: relative;
  display: grid;
  min-width: 0;
}

.hall-match-room-plaque__identity {
  gap: 2px;
  text-shadow: 0 3px 12px #000;
}

.hall-match-room-plaque__identity small,
.hall-match-room-plaque__economy small {
  color: #bcae91;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hall-match-room-plaque__identity strong {
  overflow: hidden;
  color: #f4e7c7;
  font: 600 clamp(27px, 3vw, 44px)/.96 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hall-match-room-plaque__economy {
  grid-auto-flow: column;
  grid-template-columns: minmax(130px, auto) 1px minmax(145px, auto);
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  padding: 13px 17px;
  background: rgb(3 10 7 / 73%);
  border: 1px solid rgb(214 172 75 / 25%);
  box-shadow: inset 0 1px rgb(255 239 196 / 5%);
}

.hall-match-room-plaque__economy > span {
  gap: 5px;
}

.hall-match-room-plaque__economy > i {
  align-self: stretch;
  background: rgb(218 178 86 / 21%);
}

.hall-match-room-plaque__economy strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f0c969;
  font: 700 clamp(20px, 2vw, 30px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
  white-space: nowrap;
}

.hall-money-digits {
  position: relative;
  display: inline-flex;
  min-width: 0;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums lining-nums;
}

.hall-money-digits__visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .018em;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  line-height: 1;
}

.hall-money-glyph {
  position: relative;
  display: inline-grid;
  width: .54em;
  height: 1em;
  flex: 0 0 .54em;
  place-items: center;
  color: inherit;
  font: inherit;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
}

.hall-money-glyph.is-zero::before {
  width: .42em;
  height: .76em;
  box-sizing: border-box;
  background: #07100d;
  border: .105em solid currentcolor;
  border-radius: 50%;
  content: "";
}

.hall-money-glyph.is-space {
  width: .27em;
  flex-basis: .27em;
}

.hall-money-glyph.is-mark {
  width: .3em;
  flex-basis: .3em;
}

.hall-money-digits__spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.hall-match-room-plaque .hall-currency-art {
  width: 29px;
  height: 29px;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 62%));
}

.hall-match-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
}

.hall-match-setup > .hall-match-room-plaque {
  grid-column: 1;
  grid-row: 1;
}

.hall-match-setup__body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(278px, 29%);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px clamp(16px, 2vw, 28px);
  padding: 16px clamp(20px, 2.5vw, 36px) 13px;
  overflow: hidden;
}

.hall-match-setup > .hall-match-setup__body {
  grid-column: 1;
  grid-row: 2;
}

.hall-match-setup__heading {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.hall-match-setup__heading::before,
.hall-match-setup__heading > span {
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(213 171 77 / 52%));
}

.hall-match-setup__heading > span {
  background: linear-gradient(90deg, rgb(213 171 77 / 52%), transparent);
}

.hall-match-setup__heading small {
  display: none;
}

.hall-match-setup__heading h1,
.hall-match-search__heading h1 {
  margin: 0;
  color: #f2dfad;
  font: 600 clamp(25px, 2.35vw, 36px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .075em;
  text-shadow: 0 3px 12px #000;
  text-transform: uppercase;
}

.hall-match-setup .hall-discipline-fieldset {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
  padding: 0 8px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  overscroll-behavior: contain;
  scrollbar-color: rgb(207 164 64 / 62%) rgb(2 9 6 / 52%);
  scrollbar-width: thin;
}

.hall-match-setup legend {
  margin: 0 0 8px;
  padding: 0;
  color: #caae6b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hall-match-setup .hall-choice-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: 1.28fr 1fr .88fr;
  gap: 10px;
}

.hall-match-setup .hall-discipline-group {
  min-width: 0;
  padding: 9px;
  background:
    linear-gradient(155deg, rgb(19 36 28 / 95%), rgb(6 15 11 / 98%)),
    radial-gradient(circle at 20% 0%, rgb(203 161 68 / 8%), transparent 42%);
  border: 1px solid rgb(215 173 78 / 22%);
  border-radius: 4px;
  box-shadow: inset 0 1px rgb(255 244 214 / 4%), 0 8px 18px rgb(0 0 0 / 20%);
}

.hall-match-setup .hall-discipline-group > header {
  min-height: 30px;
  margin-bottom: 7px;
  color: #e6c66f;
  border-bottom-color: rgb(222 182 86 / 20%);
}

.hall-match-setup .hall-discipline-group > header small {
  border-radius: 50%;
}

.hall-match-setup .hall-discipline-list {
  gap: 5px;
}

.hall-match-setup .hall-choice {
  min-height: 43px;
  padding: 5px 7px;
  color: #b8bcb6;
  background: rgb(17 25 21 / 94%);
  border-color: rgb(215 173 78 / 18%);
  border-radius: 3px;
  box-shadow: inset 0 1px rgb(255 255 255 / 2%);
  transition: color 150ms ease-out, background 170ms ease-out, border-color 150ms ease-out, box-shadow 170ms ease-out, transform 120ms ease-out;
}

.hall-match-setup .hall-choice:hover {
  color: #eee6d2;
  border-color: rgb(222 181 83 / 46%);
}

.hall-match-setup .hall-choice:active {
  transform: translateY(1px);
}

.hall-match-setup .hall-choice.is-selected {
  color: #fff4d6;
  background:
    linear-gradient(135deg, rgb(19 93 62 / 94%), rgb(7 43 31 / 98%)),
    radial-gradient(circle at 0 0, rgb(231 191 99 / 10%), transparent 48%);
  border-color: #d6aa49;
  box-shadow: inset 3px 0 #d5ad54, inset 0 0 18px rgb(33 150 96 / 14%);
}

.hall-match-setup .hall-choice > em {
  border-radius: 2px;
  transition: color 140ms ease-out, background 140ms ease-out, transform 160ms cubic-bezier(.2, .72, .22, 1);
}

.hall-match-setup .hall-choice.is-selected > em {
  color: #17321f;
  background: #e8c56c;
  box-shadow: 0 2px 7px rgb(0 0 0 / 40%);
  transform: scale(1);
}

.hall-match-setup .hall-option-grid {
  display: grid;
  min-height: 0;
  grid-column: 2;
  grid-row: 2;
  align-content: start;
  gap: 15px;
  padding: 0;
}

.hall-match-setup .hall-option-grid fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgb(215 173 78 / 20%);
  border-radius: 4px;
  background: rgb(6 16 12 / 78%);
}

.hall-segment-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
}

.hall-match-setup .hall-segment {
  min-width: 0;
  min-height: 48px;
  gap: 7px;
  padding: 7px 9px;
  color: #aeb5ad;
  font-size: 11px;
  line-height: 1.15;
  background: rgb(18 26 22 / 94%);
  border-color: rgb(216 173 77 / 22%);
  border-radius: 0;
  transition: color 150ms ease-out, background 170ms ease-out, border-color 150ms ease-out, box-shadow 170ms ease-out;
}

.hall-match-setup .hall-segment:first-child { border-radius: 3px 0 0 3px; }
.hall-match-setup .hall-segment:last-child { border-radius: 0 3px 3px 0; }

.hall-match-setup .hall-segment em {
  display: grid;
  color: transparent;
  background: rgb(3 10 7 / 62%);
  border-color: rgb(221 181 86 / 27%);
  border-radius: 2px;
}

.hall-match-setup .hall-segment.is-selected em {
  color: #17321f;
  background: #e8c56c;
  border-color: #fff0ae;
}

.hall-match-setup .hall-segment.is-selected {
  color: #f5dda0;
  background: linear-gradient(180deg, #174d38, #0c3024);
  border-color: #c99a38;
  box-shadow: inset 0 0 14px rgb(45 152 101 / 16%);
}

.hall-match-setup .hall-search-footer {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(126px, .72fr) minmax(160px, 1fr) minmax(250px, 1.15fr);
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 12px clamp(20px, 2.5vw, 36px);
  background: linear-gradient(180deg, rgb(6 16 12 / 94%), rgb(3 10 7 / 98%));
  border-top: 1px solid rgb(215 173 78 / 28%);
  box-shadow: 0 -12px 30px rgb(0 0 0 / 20%);
}

.hall-match-setup > .hall-search-footer {
  grid-column: 1;
  grid-row: 3;
}

.hall-match-back,
.hall-match-cancel {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #cfc6b1;
  font: 700 13px/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgb(16 23 20 / 88%);
  border: 1px solid rgb(211 172 79 / 28%);
  border-radius: 3px;
  transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out, transform 120ms ease-out;
}

.hall-match-back span {
  color: #dcb75c;
  font-size: 26px;
  line-height: 0;
}

.hall-match-back:hover,
.hall-match-cancel:hover {
  color: #fff0c4;
  background: rgb(27 39 33 / 94%);
  border-color: rgb(225 186 92 / 52%);
}

.hall-match-back:active,
.hall-match-cancel:active { transform: translateY(1px); }

.hall-match-setup .hall-search-footer p {
  display: block;
  margin: 0;
  color: #b6ad99;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.hall-match-setup .hall-play-button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  color: #171106;
  font: 800 clamp(19px, 1.7vw, 25px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .06em;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 18%), transparent 31%),
    linear-gradient(180deg, #f1d47e, #b77c28);
  border-color: #f6dda0;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff3be, 0 8px 20px rgb(0 0 0 / 36%);
  text-shadow: 0 1px rgb(255 246 201 / 34%);
}

.hall-match-setup .hall-play-button i {
  font-size: 29px;
  font-style: normal;
  line-height: 0;
  transition: transform 160ms ease-out;
}

.hall-match-setup .hall-play-button:hover i { transform: translateX(3px); }

.hall-match-setup button:focus-visible,
.hall-match-search button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #08130f, 0 0 0 4px #e7c46e;
}

/* Opponent search ceremony. */
.hall-match-search {
  display: grid;
  width: min(100%, 1160px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(190px, 1fr) auto auto auto;
  align-content: stretch;
  padding-bottom: 16px;
}

.hall-match-search .hall-match-room-plaque {
  min-height: 75px;
  padding-block: 8px;
  background-position: center 56%;
}

.hall-match-search .hall-match-room-plaque__number {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.hall-match-search .hall-match-room-plaque__identity strong {
  font-size: clamp(22px, 2.2vw, 32px);
}

.hall-match-search .hall-match-room-plaque__economy {
  padding-block: 7px;
}

.hall-match-search__heading {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 13px 20px 6px;
  text-align: center;
}

.hall-match-search__heading > small {
  color: #b88c35;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hall-match-search__heading > p {
  margin: 0;
  color: #bdb5a6;
  font-size: 12px;
  letter-spacing: .055em;
}

.hall-match-search__versus {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(190px, 260px) minmax(180px, 1fr) minmax(190px, 260px);
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 58px);
  padding: 8px clamp(28px, 6vw, 92px);
}

.hall-match-contender {
  position: relative;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  padding: 12px 14px 11px;
  background:
    linear-gradient(155deg, rgb(19 37 29 / 96%), rgb(5 14 10 / 98%)),
    radial-gradient(circle at 50% 12%, rgb(212 174 84 / 9%), transparent 42%);
  border: 1px solid rgb(211 169 73 / 28%);
  border-radius: 4px;
  box-shadow: 0 15px 32px rgb(0 0 0 / 32%), inset 0 1px rgb(255 240 199 / 5%);
}

.hall-match-contender::before,
.hall-match-contender::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  pointer-events: none;
}

.hall-match-contender::before {
  top: 5px;
  left: 5px;
  border-top: 1px solid rgb(226 187 94 / 46%);
  border-left: 1px solid rgb(226 187 94 / 46%);
}

.hall-match-contender::after {
  right: 5px;
  bottom: 5px;
  border-right: 1px solid rgb(226 187 94 / 46%);
  border-bottom: 1px solid rgb(226 187 94 / 46%);
}

.hall-match-contender__status {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 6px;
  color: #b9b5a9;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hall-match-contender__status i {
  width: 6px;
  height: 6px;
  background: #4eb678;
  border: 1px solid #b2e6bf;
  border-radius: 50%;
  box-shadow: 0 0 8px rgb(59 173 107 / 52%);
}

.hall-match-contender__portrait {
  --hall-avatar-frame-radius: 4px;
  position: relative;
  display: grid;
  width: clamp(92px, 10vw, 122px);
  height: clamp(92px, 10vw, 122px);
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgb(41 91 66 / 42%), transparent 58%),
    #07130e;
  border: 1px solid rgb(219 177 82 / 48%);
  border-radius: var(--hall-avatar-frame-radius);
  box-shadow:
    inset 0 0 0 3px rgb(2 9 6 / 82%),
    inset 0 0 0 4px rgb(233 197 109 / 16%),
    inset 0 0 25px #020806,
    0 6px 18px rgb(0 0 0 / 40%);
}

.hall-match-contender__portrait > img {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--hall-avatar-frame-radius) - 1px);
  object-fit: cover;
}

.hall-match-contender > strong {
  width: 100%;
  overflow: hidden;
  color: #f4ead1;
  font: 650 clamp(16px, 1.7vw, 22px)/1.05 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .035em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-match-contender.is-opponent > strong {
  color: #d9cfb8;
  font-size: clamp(13px, 1.4vw, 18px);
}

.hall-match-contender > small {
  color: #9fa69e;
  font-size: 9px;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.hall-match-contender > small b {
  color: #e2bd60;
  font-size: 12px;
}

.hall-match-contender > em {
  color: #d9b65d;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .13em;
}

.hall-match-opponent-silhouette {
  position: absolute;
  bottom: -7%;
  left: 50%;
  width: 78%;
  height: 88%;
  fill: rgb(126 146 135 / 34%);
  stroke: rgb(198 211 202 / 22%);
  stroke-width: 2;
  transform: translateX(-50%);
}

.hall-match-scan-ring,
.hall-match-scan-ring > i,
.hall-match-scan-ring > b {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--hall-avatar-frame-radius) - 1px);
}

.hall-match-scan-ring {
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgb(224 182 82 / 28%);
}

.hall-match-scan-ring > i {
  inset: 8% 7% auto;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #f0cd72 24% 76%, transparent);
  box-shadow: 0 0 9px rgb(240 205 114 / 72%);
  animation: hall-match-scan-line 1.8s ease-in-out infinite;
}

.hall-match-scan-ring > b {
  background: linear-gradient(180deg, rgb(85 190 129 / 4%), transparent 48%, rgb(85 190 129 / 11%));
  animation: hall-match-scan-breathe 2.8s ease-in-out infinite;
}

@keyframes hall-match-scan-line {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(100px); }
}

@keyframes hall-match-scan-breathe { 50% { opacity: .42; } }

.hall-match-stake-transfer {
  position: relative;
  display: grid;
  min-width: 170px;
  min-height: 140px;
  place-items: center;
}

.hall-match-stake-transfer::before,
.hall-match-stake-transfer::after {
  position: absolute;
  top: 50%;
  width: 44%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(218 177 80 / 35%));
}

.hall-match-stake-transfer::before { right: 52%; }
.hall-match-stake-transfer::after { left: 52%; transform: scaleX(-1); }

.hall-match-stake-pot {
  position: relative;
  z-index: 3;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  align-content: center;
  gap: 1px;
  background:
    radial-gradient(circle, rgb(34 79 57 / 94%), rgb(5 20 14 / 98%) 68%),
    #07130e;
  border: 1px solid #c79b3d;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(2 10 7 / 76%), 0 0 0 6px rgb(205 162 66 / 26%), 0 13px 28px rgb(0 0 0 / 48%);
  animation: hall-match-pot-breathe 2.6s ease-in-out infinite;
}

.hall-match-stake-pot .hall-currency-art {
  width: 35px;
  height: 35px;
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 56%));
}

.hall-match-stake-pot small {
  color: #a89e87;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hall-match-stake-pot strong {
  color: #f0c968;
  font: 700 16px/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .03em;
}

@keyframes hall-match-pot-breathe {
  50% { box-shadow: 0 0 0 5px rgb(2 10 7 / 76%), 0 0 0 6px rgb(223 184 89 / 40%), 0 13px 28px rgb(0 0 0 / 48%), 0 0 22px rgb(38 117 78 / 20%); }
}

.hall-match-coin-stream {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hall-match-coin-stream > i {
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  display: block;
  width: 24px;
  height: 24px;
  opacity: 0;
  animation: hall-match-coin-left 2.25s cubic-bezier(.36, .01, .45, 1) infinite;
  animation-delay: calc(var(--coin-index) * -0.46s);
}

.hall-match-coin-stream.is-right > i { animation-name: hall-match-coin-right; }

.hall-match-coin-stream .hall-currency-art {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 58%));
}

@keyframes hall-match-coin-left {
  0% { opacity: 0; transform: translateX(-115px) translateY(18px) rotate(-24deg) scale(.72); }
  18% { opacity: .92; }
  76% { opacity: .88; }
  100% { opacity: 0; transform: translateX(-12px) translateY(-4px) rotate(28deg) scale(.96); }
}

@keyframes hall-match-coin-right {
  0% { opacity: 0; transform: translateX(115px) translateY(18px) rotate(24deg) scale(.72); }
  18% { opacity: .92; }
  76% { opacity: .88; }
  100% { opacity: 0; transform: translateX(12px) translateY(-4px) rotate(-28deg) scale(.96); }
}

.hall-match-search__timer {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 3px 16px 7px;
}

.hall-match-search__timer small {
  color: #8f988f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hall-match-search__timer strong {
  color: #ead17f;
  font: 600 25px/1 "KottCondensed", "Arial Narrow", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .09em;
}

.hall-match-progress {
  position: relative;
  display: grid;
  width: min(100% - 40px, 650px);
  grid-template-columns: repeat(3, 1fr);
  justify-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hall-match-progress::before {
  position: absolute;
  top: 12px;
  right: 16.66%;
  left: 16.66%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #b8943d 0 48%, rgb(175 159 120 / 24%) 52% 100%);
}

.hall-match-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #737d75;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.hall-match-progress li > i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #857b65;
  font-size: 9px;
  font-style: normal;
  background: #07110d;
  border: 1px solid rgb(184 158 97 / 30%);
  border-radius: 50%;
}

.hall-match-progress li.is-complete { color: #bcae88; }
.hall-match-progress li.is-complete > i { color: #17301f; background: #cda84d; border-color: #f0d581; }
.hall-match-progress li.is-active { color: #e0c36d; }
.hall-match-progress li.is-active > i { border-color: #d5ad4f; box-shadow: 0 0 0 3px rgb(205 164 68 / 12%); }

.hall-match-progress li.is-active > i > b {
  width: 7px;
  height: 7px;
  background: #dcb759;
  border-radius: 50%;
  animation: hall-match-step-pulse 1.4s ease-in-out infinite;
}

@keyframes hall-match-step-pulse { 50% { opacity: .45; transform: scale(.72); } }

.hall-match-cancel {
  min-width: 180px;
  justify-self: center;
  margin-top: 10px;
  padding-inline: 30px;
}

html[dir="rtl"] .hall-match-room-plaque {
  background:
    linear-gradient(-90deg, rgb(3 10 7 / 25%), rgb(3 10 7 / 52%) 40%, rgb(3 10 7 / 91%) 72%),
    linear-gradient(0deg, rgb(1 6 4 / 62%), transparent 68%),
    var(--hall-match-room) center 51% / cover no-repeat;
}

html[dir="rtl"] .hall-match-back span,
html[dir="rtl"] .hall-match-setup .hall-play-button i { transform: scaleX(-1); }

@media (max-width: 1040px) and (min-height: 541px) {
  .hall-match-room-plaque { min-height: 96px; padding-inline: 20px; }
  .hall-match-room-plaque__economy { grid-template-columns: minmax(112px, auto) 1px minmax(125px, auto); gap: 14px; padding-inline: 12px; }
  .hall-match-setup__body { grid-template-columns: minmax(0, 1fr) minmax(246px, 30%); padding: 13px 18px 11px; }
  .hall-match-setup .hall-choice-grid { gap: 7px; }
  .hall-match-setup .hall-discipline-group { padding: 7px; }
  .hall-match-setup .hall-choice { min-height: 41px; padding-inline: 5px; }
  .hall-match-setup .hall-choice span { font-size: 10px; }
  .hall-match-setup .hall-search-footer { padding-inline: 18px; }
  .hall-match-search__versus { padding-inline: 34px; }
}

@media (max-width: 780px) and (orientation: portrait) {
  .hall-room:has(.hall-match-ceremony) > .hall-stage,
  .hall-room:has(.hall-match-search) > .hall-stage { padding: 7px max(7px, env(safe-area-inset-right)) 7px max(7px, env(safe-area-inset-left)); }

  .hall-match-ceremony,
  .hall-match-search { width: 100%; height: 100%; border-radius: 3px; }

  .hall-match-room-plaque {
    min-height: 74px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 10px;
  }

  .hall-match-room-plaque__number { width: 39px; height: 39px; font-size: 18px; }
  .hall-match-room-plaque__identity small { font-size: 8px; }
  .hall-match-room-plaque__identity strong { font-size: clamp(19px, 5.8vw, 29px); }
  .hall-match-room-plaque__economy { grid-template-columns: auto 1px auto; gap: 8px; padding: 7px; }
  .hall-match-room-plaque__economy small { font-size: 7px; letter-spacing: .1em; }
  .hall-match-room-plaque__economy strong { gap: 3px; font-size: clamp(13px, 3.4vw, 18px); }
  .hall-match-room-plaque .hall-currency-art { width: 20px; height: 20px; }

  .hall-match-setup__body {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 7px;
    padding: 9px 9px 7px;
  }

  .hall-match-setup__heading { flex: 0 0 auto; gap: 8px; }
  .hall-match-setup__heading h1 { font-size: clamp(20px, 5.6vw, 28px); }

  .hall-match-setup .hall-discipline-fieldset {
    min-height: 150px;
    flex: 1 1 auto;
    padding-inline-end: 4px;
  }

  .hall-match-setup .hall-choice-grid { grid-template-columns: 1fr; gap: 7px; }
  .hall-match-setup .hall-discipline-group { padding: 7px; }
  .hall-match-setup .hall-choice { min-height: 48px; }
  .hall-match-setup .hall-choice span { font-size: 11px; }

  .hall-match-setup .hall-option-grid {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .hall-match-setup .hall-option-grid fieldset { padding: 7px; }
  .hall-match-setup .hall-option-grid legend { margin-bottom: 4px; font-size: 8px; }
  .hall-match-setup .hall-segment { min-height: 44px; padding: 5px; font-size: 9px; }

  .hall-match-setup .hall-search-footer {
    grid-template-columns: minmax(88px, .62fr) minmax(0, 1fr);
    gap: 7px;
    padding: 7px 9px max(7px, env(safe-area-inset-bottom));
  }

  .hall-match-setup .hall-search-footer p { grid-column: 1 / -1; grid-row: 1; font-size: 8px; }
  .hall-match-setup .hall-search-footer .hall-match-back { grid-column: 1; grid-row: 2; }
  .hall-match-setup .hall-search-footer .hall-play-button { grid-column: 2; grid-row: 2; min-height: 49px; font-size: clamp(18px, 5vw, 23px); }

  .hall-match-search {
    grid-template-rows: auto auto minmax(150px, 1fr) auto auto auto;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .hall-match-search .hall-match-room-plaque { min-height: 64px; }
  .hall-match-search .hall-match-room-plaque__number { width: 35px; height: 35px; }
  .hall-match-search .hall-match-room-plaque__identity strong { font-size: clamp(17px, 5vw, 24px); }
  .hall-match-search .hall-match-room-plaque__economy { display: none; }
  .hall-match-search__heading { gap: 2px; padding: 8px 8px 3px; }
  .hall-match-search__heading h1 { font-size: clamp(22px, 6vw, 29px); }
  .hall-match-search__heading > p { font-size: 10px; }

  .hall-match-search__versus {
    grid-template-columns: minmax(108px, 1fr) 72px minmax(108px, 1fr);
    gap: 6px;
    padding: 5px 8px;
  }

  .hall-match-contender { gap: 3px; padding: 8px 6px 7px; }
  .hall-match-contender__portrait { width: clamp(70px, 21vw, 92px); height: clamp(70px, 21vw, 92px); }
  .hall-match-contender > strong { font-size: clamp(13px, 3.6vw, 18px); }
  .hall-match-contender.is-opponent > strong { font-size: clamp(10px, 2.8vw, 14px); white-space: normal; }
  .hall-match-contender > small { font-size: 7px; }
  .hall-match-contender > em { font-size: 7px; }
  .hall-match-stake-transfer { min-width: 70px; min-height: 110px; }
  .hall-match-stake-pot { width: 64px; height: 64px; }
  .hall-match-stake-pot .hall-currency-art { width: 22px; height: 22px; }
  .hall-match-stake-pot small { font-size: 6px; }
  .hall-match-stake-pot strong { font-size: 10px; }
  .hall-match-coin-stream > i { top: calc(50% - 8px); left: calc(50% - 8px); width: 16px; height: 16px; }
  .hall-match-coin-stream .hall-currency-art { width: 16px; height: 16px; }

  @keyframes hall-match-coin-left {
    0% { opacity: 0; transform: translateX(-48px) translateY(10px) rotate(-20deg) scale(.72); }
    18% { opacity: .9; }
    78% { opacity: .86; }
    100% { opacity: 0; transform: translateX(-7px) translateY(-2px) rotate(24deg) scale(.95); }
  }

  @keyframes hall-match-coin-right {
    0% { opacity: 0; transform: translateX(48px) translateY(10px) rotate(20deg) scale(.72); }
    18% { opacity: .9; }
    78% { opacity: .86; }
    100% { opacity: 0; transform: translateX(7px) translateY(-2px) rotate(-24deg) scale(.95); }
  }
  .hall-match-search__timer { padding-block: 3px; }
  .hall-match-progress { width: calc(100% - 22px); }
  .hall-match-progress li span { font-size: 7px; }
  .hall-match-cancel { min-height: 48px; margin-top: 7px; }
}

@media (max-width: 420px) and (orientation: portrait) {
  .hall-match-room-plaque__identity strong { font-size: 16px; letter-spacing: .02em; }
  .hall-match-room-plaque__economy { padding: 5px; }
  .hall-match-room-plaque__economy strong { font-size: 12px; }
  .hall-match-room-plaque__economy .hall-currency-art { width: 17px; height: 17px; }
  .hall-match-setup .hall-option-grid { grid-template-columns: 1fr; }
  .hall-match-setup .hall-option-grid fieldset { grid-template-columns: 1fr; }
  .hall-match-setup .hall-segment { min-height: 41px; }
  .hall-match-progress li span { max-width: 90px; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .hall-room:has(.hall-match-ceremony) > .hall-stage,
  .hall-room:has(.hall-match-search) > .hall-stage { padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left)); }

  .hall-match-ceremony,
  .hall-match-search { width: 100%; height: 100%; }

  .hall-match-room-plaque { min-height: 44px; padding: 4px 10px; }
  .hall-match-room-plaque__number { width: 32px; height: 32px; font-size: 15px; }
  .hall-match-room-plaque__identity small { display: none; }
  .hall-match-room-plaque__identity strong { font-size: 20px; }
  .hall-match-room-plaque__economy { grid-template-columns: auto 1px auto; gap: 8px; padding: 4px 7px; }
  .hall-match-room-plaque__economy small { display: none; }
  .hall-match-room-plaque__economy strong { font-size: 14px; }
  .hall-match-room-plaque .hall-currency-art { width: 18px; height: 18px; }

  .hall-match-setup__body { grid-template-columns: minmax(0, 1fr) minmax(214px, 28%); grid-template-rows: minmax(0, 1fr); gap: 8px; padding: 6px 9px; }
  .hall-match-setup__heading { display: none; }
  .hall-match-setup .hall-discipline-fieldset { grid-column: 1; grid-row: 1; }
  .hall-match-setup legend { margin-bottom: 3px; font-size: 8px; }
  .hall-match-setup .hall-choice-grid { gap: 5px; }
  .hall-match-setup .hall-discipline-group { padding: 4px; }
  .hall-match-setup .hall-discipline-group > header { min-height: 22px; margin-bottom: 3px; padding-bottom: 3px; }
  .hall-match-setup .hall-discipline-group > header > span { display: none; }
  .hall-match-setup .hall-discipline-group > header { grid-template-columns: 1fr auto; }
  .hall-match-setup .hall-discipline-list { gap: 2px; }
  .hall-match-setup .hall-choice { min-height: 32px; grid-template-columns: 24px minmax(0, 1fr) 14px; gap: 4px; padding: 2px 4px; }
  .hall-match-setup .hall-discipline-mark { width: 23px; height: 23px; transform: scale(.74); }
  .hall-match-setup .hall-choice span { font-size: 8px; }
  .hall-match-setup .hall-choice > em { width: 14px; height: 14px; font-size: 8px; }
  .hall-match-setup .hall-option-grid { grid-column: 2; grid-row: 1; gap: 5px; }
  .hall-match-setup .hall-option-grid fieldset { padding: 5px; }
  .hall-match-setup .hall-segment { min-height: 38px; padding: 3px; font-size: 8px; }
  .hall-match-setup .hall-search-footer { grid-template-columns: 100px minmax(0, 1fr) minmax(210px, 34%); gap: 8px; padding: 5px 9px; }
  .hall-match-setup .hall-search-footer p { font-size: 7px; }
  .hall-match-back { min-height: 48px; }
  .hall-match-setup .hall-play-button { min-height: 48px; font-size: 17px; }

  .hall-match-search {
    grid-template-columns: minmax(0, 1fr) 218px;
    grid-template-rows: 44px minmax(0, 1fr) 48px;
    gap: 0 8px;
    padding: 0 7px 6px;
  }
  .hall-match-search .hall-match-room-plaque { min-height: 44px; height: 44px; grid-column: 1 / -1; grid-row: 1; margin-inline: -7px; }
  .hall-match-search__heading { grid-column: 2; grid-row: 2; align-content: start; padding: 10px 5px 0; }
  .hall-match-search__heading h1 { font-size: 20px; }
  .hall-match-search__heading > small { display: none; }
  .hall-match-search__heading > p { font-size: 9px; }
  .hall-match-search__versus { grid-column: 1; grid-row: 2; grid-template-columns: minmax(118px, 1fr) 80px minmax(118px, 1fr); gap: 6px; padding: 4px 6px; }
  .hall-match-contender { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; justify-items: start; gap: 2px 6px; padding: 5px; }
  .hall-match-contender__status { grid-column: 2; }
  .hall-match-contender__portrait { width: 68px; height: 68px; grid-column: 1; grid-row: 1 / 4; }
  .hall-match-contender > strong { grid-column: 2; font-size: 13px; text-align: start; }
  .hall-match-contender.is-opponent > strong { font-size: 10px; white-space: normal; }
  .hall-match-contender > small { grid-column: 2; font-size: 7px; text-align: start; }
  .hall-match-contender > em { display: none; }
  .hall-match-stake-transfer { min-width: 78px; min-height: 86px; }
  .hall-match-stake-pot { width: 62px; height: 62px; }
  .hall-match-stake-pot .hall-currency-art { width: 21px; height: 21px; }
  .hall-match-stake-pot small { font-size: 6px; }
  .hall-match-stake-pot strong { font-size: 9px; }
  .hall-match-search__timer { grid-column: 2; grid-row: 2; align-self: end; padding: 0 0 8px; }
  .hall-match-progress { grid-column: 1; grid-row: 3; align-self: center; width: calc(100% - 12px); }
  .hall-match-progress li { gap: 2px; }
  .hall-match-progress li > i { width: 20px; height: 20px; }
  .hall-match-progress::before { top: 9px; }
  .hall-match-progress li span { font-size: 6px; }
  .hall-match-cancel { grid-column: 2; grid-row: 3; width: 100%; min-width: 0; min-height: 48px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hall-match-ceremony,
  .hall-match-search,
  .hall-match-scan-ring > i,
  .hall-match-scan-ring > b,
  .hall-match-stake-pot,
  .hall-match-coin-stream > i,
  .hall-match-progress li.is-active > i > b {
    animation: none !important;
  }

  .hall-match-coin-stream > i { display: none; }
  .hall-match-setup button,
  .hall-match-search button { transition-duration: 1ms !important; }
}

/* Stake room ladder: 25 distinct rooms, one shared wallet, five permanent crowns. */
.hall-room:has(.stake-room-ladder) {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.hall-room:has(.stake-room-ladder) > .hall-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-column: 1;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #040806;
}

.hall-room:has(.stake-room-ladder) > .hall-stage::after,
.hall-room:has(.stake-room-ladder) > .hall-side,
.hall-room:has(.stake-room-ladder) > .hall-edge-button,
.hall-room:has(.stake-room-ladder) > .hall-drawer-scrim {
  display: none;
}

.stake-room-ladder {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(14px, 1.6vw, 24px) clamp(14px, 2vw, 34px) clamp(10px, 1.2vw, 18px);
  overflow: hidden;
  color: #f5edda;
  background:
    radial-gradient(ellipse at 50% 42%, rgb(12 42 28 / 20%), rgb(1 4 3 / 84%) 76%),
    linear-gradient(180deg, rgb(2 8 6 / 86%), rgb(1 4 3 / 96%));
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
}

.stake-room-ladder::before,
.stake-room-ladder::after {
  position: absolute;
  inset: -30px;
  z-index: -2;
  content: "";
  background: var(--stake-room-hero) center 48% / cover no-repeat;
  filter: blur(16px) saturate(.7) brightness(.35);
  opacity: .38;
  transform: scale(1.08);
}

.stake-room-ladder::after {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(1 5 3 / 86%), transparent 24%, transparent 76%, rgb(1 5 3 / 86%)),
    linear-gradient(180deg, rgb(1 5 3 / 74%), transparent 20%, transparent 66%, rgb(1 5 3 / 96%));
  filter: none;
  opacity: 1;
  transform: none;
}

.stake-room-ladder__top {
  position: relative;
  z-index: 8;
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding-bottom: clamp(10px, 1.4vh, 16px);
  border-bottom: 1px solid rgb(211 167 71 / 26%);
}

.stake-room-ladder__top > div {
  min-width: 0;
  text-align: center;
}

.stake-room-ladder__top small,
.stake-room-ladder__top p {
  display: block;
  margin: 0;
  color: #c8ad6c;
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.stake-room-ladder__top h1 {
  margin: 2px 0;
  color: #fff5dc;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(25px, 2.5vw, 42px);
  font-weight: 560;
  letter-spacing: .035em;
  line-height: 1;
  text-shadow: 0 3px 12px #000;
  text-transform: uppercase;
}

.stake-room-ladder__top p {
  color: #a89978;
  letter-spacing: .08em;
}

.stake-room-ladder__count {
  min-width: 92px;
  color: #f0cf79;
  font-size: clamp(20px, 1.8vw, 30px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .08em;
  text-align: end;
}

.stake-room-ladder__count i {
  color: #70684f;
  font-size: .7em;
  font-style: normal;
}

.stake-room-ladder__viewport {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: clamp(6px, 1vw, 14px);
  align-items: center;
  padding-block: clamp(12px, 2vh, 22px);
}

.stake-room-track {
  position: relative;
  height: 100%;
  min-height: 0;
}

.stake-room-card,
.stake-room-card-spacer {
  position: absolute;
  top: 50%;
  display: block;
  width: 17%;
  height: 66%;
  min-width: 0;
  overflow: hidden;
  color: #f4ead4;
  background: #06100c;
  border: 1px solid rgb(136 105 51 / 66%);
  border-radius: 3px;
  box-shadow: 0 17px 36px rgb(0 0 0 / 58%), inset 0 0 0 1px rgb(0 0 0 / 78%);
  cursor: pointer;
  isolation: isolate;
  transform: translateY(-50%);
  transition: border-color 180ms ease-out, box-shadow 220ms ease-out, filter 180ms ease-out, transform 220ms cubic-bezier(.2,.72,.22,1);
  -webkit-tap-highlight-color: transparent;
}

.stake-room-card-spacer {
  visibility: hidden;
}

.stake-room-card:nth-child(1),
.stake-room-card-spacer:nth-child(1) { left: -2%; }
.stake-room-card:nth-child(2),
.stake-room-card-spacer:nth-child(2) { left: 12%; width: 23%; height: 79%; }
.stake-room-card:nth-child(3),
.stake-room-card-spacer:nth-child(3) { left: 50%; }
.stake-room-card:nth-child(4),
.stake-room-card-spacer:nth-child(4) { right: 12%; width: 23%; height: 79%; }
.stake-room-card:nth-child(5),
.stake-room-card-spacer:nth-child(5) { right: -2%; }

.stake-room-card.is-selected {
  width: min(48%, 720px);
  height: 100%;
  z-index: 5;
  border-color: #d8ae51;
  box-shadow:
    0 0 0 1px #251807,
    0 0 0 3px rgb(218 170 67 / 48%),
    0 28px 62px rgb(0 0 0 / 72%),
    inset 0 1px rgb(255 238 184 / 24%);
  cursor: default;
  transform: translate(-50%, -50%);
}

.stake-room-card::before {
  position: absolute;
  inset: 5px;
  z-index: 7;
  content: "";
  border: 1px solid rgb(242 205 117 / 18%);
  pointer-events: none;
}

.stake-room-card.is-selected::before {
  border-color: rgb(242 205 117 / 55%);
  box-shadow: inset 0 0 28px rgb(228 174 57 / 8%);
}

.stake-room-card__art,
.stake-room-card__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stake-room-card__art {
  z-index: -2;
  object-fit: cover;
  object-position: center;
  filter: saturate(.74) brightness(.52) contrast(1.08);
  transform: scale(1.03);
  transition: filter 220ms ease-out, transform 260ms ease-out;
}

.stake-room-card.is-selected .stake-room-card__art {
  filter: saturate(.95) brightness(.75) contrast(1.04);
  transform: scale(1.005);
}

.stake-room-card__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 12%) 28%, rgb(0 0 0 / 48%) 58%, rgb(1 5 3 / 98%) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 26%), transparent 35%, transparent 70%, rgb(0 0 0 / 24%));
}

.stake-room-card.is-locked .stake-room-card__art {
  filter: grayscale(.62) saturate(.35) brightness(.34) contrast(1.04);
}

.stake-room-card__head {
  position: absolute;
  top: 13px;
  right: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #dbc078;
  font-size: clamp(8px, .65vw, 11px);
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 2px 5px #000;
  text-transform: uppercase;
}

.stake-room-card__head span {
  max-width: 58%;
  overflow: hidden;
  color: #eee0bd;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stake-room-card__identity {
  position: absolute;
  right: 14px;
  bottom: 16px;
  left: 14px;
  z-index: 4;
  min-width: 0;
  text-align: center;
  text-shadow: 0 3px 9px #000;
}

.stake-room-card__identity h2 {
  margin: 0;
  overflow: hidden;
  color: #f3e5c5;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(15px, 1.25vw, 23px);
  font-weight: 580;
  letter-spacing: .025em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.stake-room-card__identity p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 7px 0 0;
  color: #e1bb58;
  font-size: clamp(12px, .94vw, 17px);
  font-weight: 750;
}

.stake-room-card__identity .hall-currency-art,
.stake-room-card__locked .hall-currency-art,
.stake-room-card__details .hall-currency-art {
  width: 21px;
  height: 21px;
}

.stake-room-card.is-selected .stake-room-card__identity {
  right: 24px;
  bottom: clamp(180px, 26vh, 220px);
  left: 24px;
}

.stake-room-card.is-selected .stake-room-card__identity h2 {
  color: #fff0c8;
  font-size: clamp(27px, 2.65vw, 48px);
  letter-spacing: .035em;
}

.stake-room-card.is-selected .stake-room-card__identity p {
  display: none;
}

.stake-room-card__details {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  display: none;
  min-width: 0;
  min-height: 156px;
  grid-template-columns: minmax(126px, .75fr) minmax(160px, 1fr);
  grid-template-rows: minmax(0, 1fr) 48px;
  gap: 9px 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 18% 0, rgb(142 79 36 / 22%), transparent 50%),
    linear-gradient(180deg, rgb(8 18 14 / 91%), rgb(3 8 6 / 98%));
  border: 1px solid rgb(219 173 69 / 42%);
  box-shadow: 0 11px 28px rgb(0 0 0 / 55%), inset 0 1px rgb(255 242 200 / 7%);
}

.stake-room-card.is-selected .stake-room-card__details {
  display: grid;
}

.stake-room-card__details dl {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}

.stake-room-card__details dl > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(204 165 81 / 17%);
}

.stake-room-card__details dt,
.stake-room-crowns header > span {
  color: #9f9377;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stake-room-card__details dd {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #f2d178;
  font-size: clamp(14px, 1.05vw, 18px);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

.stake-room-crowns {
  display: grid;
  min-width: 0;
  align-content: space-between;
}

.stake-room-crowns header {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.stake-room-crowns > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(28px, 1fr));
  gap: 5px;
}

.stake-room-crown {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: #4c4b40;
  background: rgb(0 0 0 / 28%);
  border: 1px solid rgb(183 156 91 / 16%);
}

.stake-room-crown svg {
  width: min(34px, 80%);
  fill: rgb(37 41 35 / 78%);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.stake-room-crown.is-earned {
  color: #f1c95f;
  background: radial-gradient(circle at 50% 18%, rgb(242 197 87 / 18%), rgb(0 0 0 / 26%));
  border-color: rgb(227 185 81 / 43%);
  box-shadow: inset 0 0 14px rgb(226 174 55 / 8%);
}

.stake-room-crown.is-earned svg {
  fill: rgb(154 105 26 / 52%);
  filter: drop-shadow(0 2px 4px #000);
}

.stake-room-mastery {
  display: grid;
  min-width: 0;
  justify-items: end;
  text-align: end;
}

.stake-room-mastery strong {
  color: #f0ca6a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.stake-room-mastery small {
  overflow: hidden;
  color: #8f856f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stake-room-mastery.is-mastered strong {
  color: #fff0b6;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stake-room-play {
  display: flex;
  min-width: 0;
  min-height: 48px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  color: #151006;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 850;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #f0cf76, #b87e27);
  border: 1px solid #f6dc91;
  border-radius: 2px;
  box-shadow: inset 0 1px rgb(255 251 216 / 50%), 0 7px 16px rgb(0 0 0 / 42%);
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter 150ms ease-out, transform 150ms ease-out;
}

.stake-room-play:hover {
  filter: brightness(1.1);
}

.stake-room-play:active {
  transform: translateY(1px);
}

.stake-room-play[disabled] {
  color: #9a927e;
  background: linear-gradient(180deg, #282b27, #151815);
  border-color: #4e5148;
  cursor: not-allowed;
}

.stake-room-lock-icon {
  width: 22px;
  height: 25px;
  fill: rgb(2 7 5 / 82%);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.stake-room-card__locked {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  color: #beaf88;
  text-align: center;
  background: rgb(1 5 3 / 37%);
  text-shadow: 0 2px 6px #000;
  pointer-events: none;
}

.stake-room-card__locked .stake-room-lock-icon {
  width: 32px;
  height: 38px;
  color: #d1b666;
}

.stake-room-card__locked strong {
  color: #e1d3ad;
  font-size: clamp(12px, .9vw, 16px);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.stake-room-card__locked small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: clamp(9px, .68vw, 12px);
}

.stake-room-card.is-selected .stake-room-card__locked {
  bottom: 184px;
}

.stake-room-card.is-selected.is-locked .stake-room-card__identity {
  display: none;
}

.stake-room-arrow {
  position: relative;
  z-index: 8;
  display: grid;
  width: 52px;
  height: 70px;
  place-items: center;
  padding: 0 0 5px;
  color: #edc662;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  background: linear-gradient(180deg, rgb(17 38 28 / 94%), rgb(4 13 9 / 98%));
  border: 1px solid rgb(213 168 65 / 49%);
  border-radius: 2px;
  box-shadow: 0 12px 24px rgb(0 0 0 / 42%), inset 0 1px rgb(255 238 186 / 9%);
  cursor: pointer;
}

.stake-room-arrow:hover:not(:disabled) {
  color: #ffe092;
  border-color: rgb(239 197 99 / 82%);
}

.stake-room-arrow:disabled {
  opacity: .25;
  cursor: default;
}

.stake-room-ladder__footer {
  position: relative;
  z-index: 9;
  display: grid;
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr) minmax(0, .65fr);
  gap: 18px;
  align-items: center;
  border-top: 1px solid rgb(211 167 71 / 21%);
}

.stake-room-progress {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(25, minmax(5px, 1fr));
  gap: clamp(2px, .28vw, 5px);
  align-items: center;
  padding-top: 8px;
}

.stake-room-progress button {
  display: grid;
  min-width: 0;
  height: 20px;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.stake-room-progress button span {
  display: block;
  width: 100%;
  height: 3px;
  background: #343934;
  border-radius: 0;
  transition: height 150ms ease-out, background 150ms ease-out;
}

.stake-room-progress button.is-unlocked span {
  background: #7d6d3e;
}

.stake-room-progress button.is-current span {
  height: 8px;
  background: #e2ba58;
  box-shadow: 0 0 10px rgb(226 186 88 / 43%);
}

.stake-room-notice {
  min-width: 0;
  margin: 7px 0 0;
  overflow: hidden;
  color: #cdbd93;
  font-size: clamp(10px, .74vw, 12px);
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stake-room-card:focus-visible,
.stake-room-arrow:focus-visible,
.stake-room-progress button:focus-visible,
.stake-room-play:focus-visible {
  outline: 2px solid #f1cf73;
  outline-offset: 3px;
}

html[dir="rtl"] .stake-room-arrow span,
html[dir="rtl"] .stake-room-ladder .hall-play-back > span {
  transform: rotate(180deg);
}

@media (max-width: 1024px) and (min-height: 541px) {
  .stake-room-ladder {
    padding-inline: 14px;
  }

  .stake-room-ladder__viewport {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 4px;
  }

  .stake-room-arrow {
    width: 44px;
    height: 62px;
  }

  .stake-room-card.is-selected {
    width: min(58%, 620px);
  }

  .stake-room-card:nth-child(2),
  .stake-room-card-spacer:nth-child(2) { left: 4%; width: 25%; }
  .stake-room-card:nth-child(4),
  .stake-room-card-spacer:nth-child(4) { right: 4%; width: 25%; }
  .stake-room-card:nth-child(1),
  .stake-room-card:nth-child(5) { opacity: .35; }
}

@media (max-width: 780px) and (orientation: portrait) {
  .stake-room-ladder {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .stake-room-ladder__top {
    grid-template-columns: 48px minmax(0, 1fr) 54px;
    gap: 5px;
    padding-bottom: 6px;
  }

  .stake-room-ladder__top .hall-play-back {
    width: 46px;
    min-width: 46px;
    min-height: 44px;
    padding: 0;
  }

  .stake-room-ladder__top .hall-play-back strong,
  .stake-room-ladder__top > div > small,
  .stake-room-ladder__top p {
    display: none;
  }

  .stake-room-ladder__top h1 {
    margin: 0;
    font-size: clamp(20px, 6vw, 28px);
  }

  .stake-room-ladder__count {
    min-width: 0;
    font-size: 15px;
  }

  .stake-room-ladder__viewport {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 0;
    padding-block: 8px;
  }

  .stake-room-arrow {
    width: 34px;
    height: 58px;
    padding-bottom: 3px;
    font-size: 42px;
  }

  .stake-room-track {
    overflow: visible;
  }

  .stake-room-card:nth-child(1),
  .stake-room-card:nth-child(5),
  .stake-room-card-spacer:nth-child(1),
  .stake-room-card-spacer:nth-child(5) {
    display: none;
  }

  .stake-room-card:nth-child(2),
  .stake-room-card-spacer:nth-child(2) {
    left: -15%;
    width: 38%;
    height: 69%;
  }

  .stake-room-card:nth-child(4),
  .stake-room-card-spacer:nth-child(4) {
    right: -15%;
    width: 38%;
    height: 69%;
  }

  .stake-room-card.is-selected {
    width: min(82%, 430px);
  }

  .stake-room-card__head {
    top: 10px;
    right: 11px;
    left: 11px;
  }

  .stake-room-card.is-selected .stake-room-card__identity {
    bottom: 224px;
  }

  .stake-room-card.is-selected .stake-room-card__identity h2 {
    font-size: clamp(24px, 8vw, 36px);
    white-space: normal;
  }

  .stake-room-card__details {
    right: 9px;
    bottom: 9px;
    left: 9px;
    min-height: 204px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 48px;
    gap: 7px;
    padding: 10px;
  }

  .stake-room-card__details dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .stake-room-card__details dl > div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding-bottom: 3px;
  }

  .stake-room-card__details dd {
    font-size: clamp(11px, 3.35vw, 14px);
  }

  .stake-room-card__details .hall-currency-art {
    width: 16px;
    height: 16px;
  }

  .stake-room-crowns {
    gap: 4px;
  }

  .stake-room-crown {
    min-height: 35px;
  }

  .stake-room-card.is-selected .stake-room-card__locked {
    bottom: 221px;
  }

  .stake-room-ladder__footer {
    min-height: 30px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stake-room-notice {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    padding: 7px 10px;
    color: #f0dfb7;
    text-align: center;
    background: rgb(3 10 7 / 91%);
    white-space: normal;
  }

  .stake-room-progress {
    gap: 2px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .stake-room-ladder {
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .stake-room-ladder__top {
    grid-template-columns: 44px minmax(0, 1fr) 70px;
    gap: 8px;
    padding-bottom: 4px;
  }

  .stake-room-ladder__top .hall-play-back {
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    padding: 0;
  }

  .stake-room-ladder__top .hall-play-back strong,
  .stake-room-ladder__top > div > small,
  .stake-room-ladder__top p {
    display: none;
  }

  .stake-room-ladder__top h1 {
    margin: 0;
    font-size: clamp(20px, 4vw, 28px);
  }

  .stake-room-ladder__count {
    min-width: 0;
    font-size: 16px;
  }

  .stake-room-ladder__viewport {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 3px;
    padding-block: 5px;
  }

  .stake-room-arrow {
    width: 36px;
    height: 52px;
    font-size: 40px;
  }

  .stake-room-card:nth-child(1),
  .stake-room-card:nth-child(5) { opacity: .28; }

  .stake-room-card:nth-child(2),
  .stake-room-card-spacer:nth-child(2) { left: 2%; width: 24%; }
  .stake-room-card:nth-child(4),
  .stake-room-card-spacer:nth-child(4) { right: 2%; width: 24%; }

  .stake-room-card.is-selected {
    width: min(60%, 610px);
  }

  .stake-room-card__head {
    top: 8px;
  }

  .stake-room-card.is-selected .stake-room-card__identity {
    right: 12px;
    bottom: 114px;
    left: 12px;
  }

  .stake-room-card.is-selected .stake-room-card__identity h2 {
    font-size: clamp(22px, 3.8vw, 34px);
  }

  .stake-room-card__details {
    right: 7px;
    bottom: 7px;
    left: 7px;
    min-height: 98px;
    grid-template-columns: minmax(88px, .7fr) minmax(140px, 1.15fr) minmax(104px, .65fr);
    grid-template-rows: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .stake-room-card__details dl {
    gap: 3px;
  }

  .stake-room-card__details dl > div {
    gap: 5px;
    padding-bottom: 2px;
  }

  .stake-room-card__details dt,
  .stake-room-crowns header > span {
    font-size: 8px;
  }

  .stake-room-card__details dd {
    font-size: 12px;
  }

  .stake-room-card__identity .hall-currency-art,
  .stake-room-card__locked .hall-currency-art,
  .stake-room-card__details .hall-currency-art {
    width: 16px;
    height: 16px;
  }

  .stake-room-crowns > div {
    gap: 3px;
  }

  .stake-room-crown {
    min-height: 31px;
  }

  .stake-room-mastery small {
    display: none;
  }

  .stake-room-play {
    min-height: 42px;
    grid-column: auto;
    align-self: end;
    padding-inline: 8px;
    font-size: 10px;
    letter-spacing: .045em;
  }

  .stake-room-card.is-selected .stake-room-card__locked {
    bottom: 111px;
  }

  .stake-room-ladder__footer {
    min-height: 25px;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);
  }

  .stake-room-progress {
    padding-top: 3px;
  }

  .stake-room-progress button {
    height: 15px;
  }

  .stake-room-notice {
    margin-top: 2px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stake-room-card,
  .stake-room-card__art,
  .stake-room-progress button span,
  .stake-room-play,
  .stake-room-track {
    transition: none;
  }
}

/* Approved room-carousel reference fidelity pass. */
.stake-room-ladder {
  grid-template-rows: auto minmax(0, 1fr) 48px;
  padding: clamp(9px, 1.1vw, 16px) clamp(12px, 1.5vw, 24px) 4px;
  overscroll-behavior-inline: contain;
  background:
    radial-gradient(ellipse at 50% 46%, rgb(56 34 14 / 10%), transparent 54%),
    linear-gradient(180deg, rgb(1 5 4 / 55%), rgb(1 4 3 / 84%));
}

.stake-room-ladder::before {
  inset: -12px;
  background-position: center 52%;
  filter: saturate(.78) brightness(.38) contrast(1.08);
  opacity: .72;
  transform: scale(1.012);
}

.stake-room-ladder::after {
  background:
    linear-gradient(90deg, rgb(1 4 3 / 72%), transparent 22%, transparent 78%, rgb(1 4 3 / 72%)),
    linear-gradient(180deg, rgb(1 4 3 / 38%), transparent 22%, transparent 72%, rgb(1 4 3 / 82%));
}

.stake-room-ladder__top {
  grid-template-columns: minmax(92px, 1fr) minmax(0, 2.8fr) minmax(92px, 1fr);
  gap: 12px;
  min-height: 76px;
  padding: 0 0 3px;
  border: 0;
}

.stake-room-ladder__top .hall-play-back {
  justify-self: start;
  align-self: center;
}

.stake-room-ladder__top > div {
  align-self: end;
}

.stake-room-ladder__top small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d2b96f;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 650;
  letter-spacing: .14em;
}

.stake-room-ladder__top small i {
  position: relative;
  display: block;
  width: clamp(36px, 5vw, 76px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #967a36);
}

.stake-room-ladder__top small i:last-child {
  background: linear-gradient(90deg, #967a36, transparent);
}

.stake-room-ladder__top small i::after {
  position: absolute;
  top: -2px;
  right: -1px;
  width: 5px;
  height: 5px;
  content: "";
  background: #d1b55e;
  transform: rotate(45deg);
}

.stake-room-ladder__top small i:last-child::after {
  right: auto;
  left: -1px;
}

.stake-room-ladder__top h1 {
  margin: 4px 0 0;
  color: #f0e2bc;
  font-size: clamp(30px, 3.25vw, 51px);
  font-weight: 520;
  letter-spacing: .025em;
  text-shadow: 0 4px 14px #000, 0 0 20px rgb(202 153 57 / 12%);
}

.stake-room-ladder__viewport {
  grid-template-columns: clamp(42px, 5vw, 72px) minmax(0, 1fr) clamp(42px, 5vw, 72px);
  gap: clamp(2px, .6vw, 10px);
  padding: 2px 0 5px;
}

.stake-room-track {
  width: 100%;
  height: 100%;
  transform: translate3d(var(--stake-room-drag-x, 0px), 0, 0);
  transition: transform 220ms cubic-bezier(.2, .72, .22, 1);
  will-change: transform;
}

.stake-room-ladder.is-dragging {
  cursor: grabbing;
}

.stake-room-ladder.is-dragging .stake-room-track {
  transition: none;
}

.stake-room-ladder.is-carousel-settling .stake-room-card__details,
.stake-room-ladder.is-carousel-settling .stake-room-card__locked {
  pointer-events: none;
}

.stake-room-card,
.stake-room-card-spacer {
  width: 16%;
  height: 61%;
  border: 2px solid #735d2d;
  border-radius: 4px;
  background: #050a07;
  box-shadow:
    0 0 0 2px #0b0a06,
    0 0 0 3px rgb(190 149 58 / 25%),
    0 18px 34px rgb(0 0 0 / 70%),
    inset 0 0 0 1px rgb(235 204 125 / 18%);
}

.stake-room-card:nth-child(1),
.stake-room-card-spacer:nth-child(1) {
  z-index: 1;
  left: 1%;
  width: 15%;
  height: 56%;
}

.stake-room-card:nth-child(2),
.stake-room-card-spacer:nth-child(2) {
  z-index: 2;
  left: 10.5%;
  width: 21%;
  height: 73%;
}

.stake-room-card:nth-child(4),
.stake-room-card-spacer:nth-child(4) {
  z-index: 2;
  right: 10.5%;
  width: 21%;
  height: 73%;
}

.stake-room-card:nth-child(5),
.stake-room-card-spacer:nth-child(5) {
  z-index: 1;
  right: 1%;
  width: 15%;
  height: 56%;
}

.stake-room-card.is-selected {
  z-index: 5;
  width: min(49%, 690px);
  height: min(100%, 540px);
  border-color: #c6a251;
  box-shadow:
    0 0 0 2px #161006,
    0 0 0 4px rgb(224 183 83 / 54%),
    0 28px 60px rgb(0 0 0 / 78%),
    inset 0 0 0 1px rgb(255 235 169 / 32%);
}

.stake-room-card::before {
  inset: 5px;
  border-color: rgb(224 188 100 / 34%);
}

.stake-room-card.is-selected::before {
  inset: 6px;
  border-color: rgb(246 211 126 / 62%);
}

.stake-room-card__art {
  filter: saturate(.62) brightness(.46) contrast(1.12);
  image-rendering: auto;
  transform: none;
}

.stake-room-card.is-selected .stake-room-card__art {
  filter: saturate(.86) brightness(.7) contrast(1.08);
  transform: none;
}

.stake-room-card__shade {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 45%), transparent 22%, transparent 64%, rgb(1 4 3 / 76%) 83%, rgb(1 4 3 / 95%)),
    linear-gradient(90deg, rgb(0 0 0 / 28%), transparent 28%, transparent 72%, rgb(0 0 0 / 25%));
}

.stake-room-card.is-selected .stake-room-card__shade {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 34%), transparent 21%, transparent 66%, rgb(0 0 0 / 38%) 84%, rgb(0 0 0 / 68%)),
    linear-gradient(90deg, rgb(0 0 0 / 27%), transparent 32%, transparent 78%, rgb(0 0 0 / 18%));
}

.stake-room-card__head {
  display: none;
}

.stake-room-card.is-selected .stake-room-card__head {
  top: 20px;
  right: 22px;
  left: 22px;
  display: block;
  color: #e1cc91;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(11px, .86vw, 14px);
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
}

.stake-room-card.is-selected .stake-room-card__head span {
  display: none;
}

.stake-room-card__identity {
  inset: 0;
  text-align: center;
  pointer-events: none;
}

.stake-room-card__identity h2 {
  position: absolute;
  top: 25px;
  right: 9px;
  left: 9px;
  color: #d5c59c;
  font-size: clamp(13px, 1.2vw, 21px);
  letter-spacing: .015em;
  white-space: normal;
}

.stake-room-notice:empty {
  display: none;
}

.stake-room-card__identity p {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  display: flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #ead28b;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(15px, 1.28vw, 22px);
  background: linear-gradient(180deg, rgb(10 16 13 / 86%), rgb(3 8 6 / 96%));
  border-top: 1px solid rgb(206 166 76 / 52%);
}

.stake-room-card.is-selected .stake-room-card__identity {
  inset: 0;
}

.stake-room-card.is-selected .stake-room-card__identity h2 {
  top: 50px;
  color: #f1dc9d;
  font-size: clamp(28px, 2.65vw, 43px);
  font-weight: 520;
  letter-spacing: .02em;
  text-shadow: 0 3px 10px #000;
}

.stake-room-card.is-selected .stake-room-card__identity p {
  display: none;
}

.stake-room-card__identity .hall-currency-art,
.stake-room-card__locked .hall-currency-art,
.stake-room-card__details .hall-currency-art {
  width: clamp(18px, 1.5vw, 25px);
  height: clamp(18px, 1.5vw, 25px);
}

.stake-room-chip-amount__compact {
  display: none;
}

.stake-room-card__details,
.stake-room-card.is-selected .stake-room-card__details {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.stake-room-card.is-selected .stake-room-card__details {
  display: block;
}

.stake-room-stats-rail {
  position: absolute;
  top: clamp(112px, 21%, 132px);
  left: clamp(22px, 3.4vw, 42px);
  width: clamp(120px, 25%, 168px);
  text-shadow: 0 3px 8px #000;
}

.stake-room-stats-rail dl {
  display: block;
  margin: 0;
}

.stake-room-stats-rail dl > div {
  position: relative;
  display: block;
  padding: 0 0 17px;
}

.stake-room-stats-rail dl > div + div {
  padding-top: 16px;
}

.stake-room-stats-rail dl > div + div::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 92%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #9c7736, rgb(156 119 54 / 20%));
  box-shadow: 0 0 8px #000;
}

.stake-room-stats-rail dl > div + div::after {
  position: absolute;
  top: -2px;
  left: 38%;
  width: 5px;
  height: 5px;
  content: "";
  background: #b99342;
  transform: rotate(45deg);
}

.stake-room-stats-rail dt {
  color: #dfc88c;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(11px, .86vw, 14px);
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.stake-room-stats-rail dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  color: #f4e2b1;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(23px, 2.2vw, 35px);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .025em;
  line-height: 1;
}

.stake-room-crown-plaque {
  position: absolute;
  bottom: clamp(82px, 16%, 96px);
  left: 21%;
  width: 59%;
  min-height: 128px;
  padding: 12px clamp(13px, 2vw, 24px) 9px;
  color: #dfcb91;
  background: linear-gradient(180deg, #b59756, #3f3219 8%, #211f16 16%, #121711 84%, #49391c 93%, #b2934f);
  clip-path: polygon(8% 0, 92% 0, 96% 9%, 96% 18%, 100% 24%, 100% 76%, 96% 82%, 96% 91%, 92% 100%, 8% 100%, 4% 91%, 4% 82%, 0 76%, 0 24%, 4% 18%, 4% 9%);
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 74%));
  isolation: isolate;
}

.stake-room-crown-plaque::before {
  position: absolute;
  inset: 3px;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 18% 22%, rgb(255 236 174 / 8%), transparent 18%),
    radial-gradient(circle at 76% 70%, rgb(0 0 0 / 26%), transparent 24%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #333329, #161b15 58%, #10140f);
  clip-path: inherit;
}

.stake-room-crown-plaque::after {
  position: absolute;
  inset: 7px;
  z-index: -1;
  content: "";
  border: 1px solid rgb(190 160 92 / 45%);
  clip-path: polygon(7% 0, 93% 0, 97% 10%, 97% 20%, 100% 25%, 100% 75%, 97% 80%, 97% 90%, 93% 100%, 7% 100%, 3% 90%, 3% 80%, 0 75%, 0 25%, 3% 20%, 3% 10%);
}

.stake-room-crown-plaque header,
.stake-room-crown-plaque footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  font-family: var(--kott-font-display, Georgia, serif);
  text-align: center;
  text-transform: uppercase;
}

.stake-room-crown-plaque header strong {
  color: #e5d19c;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 620;
  letter-spacing: .035em;
}

.stake-room-crown-plaque footer strong {
  color: #d9c790;
  font-size: clamp(10px, .84vw, 14px);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: .055em;
  white-space: nowrap;
}

.stake-room-crown-plaque header i,
.stake-room-crown-plaque footer i {
  display: block;
  width: min(64px, 20%);
  height: 1px;
  background: linear-gradient(90deg, transparent, #8c7440);
}

.stake-room-crown-plaque header i:last-child,
.stake-room-crown-plaque footer i:last-child {
  background: linear-gradient(90deg, #8c7440, transparent);
}

.stake-room-crown-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1px, .45vw, 6px);
  align-items: end;
  margin: 2px auto 0;
}

.stake-room-crown {
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  background: transparent;
  border: 0;
}

.stake-room-crown img {
  display: block;
  width: 100%;
  max-width: 68px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 72%));
}

.stake-room-crown.is-earned img {
  filter: drop-shadow(0 0 5px rgb(230 181 63 / 42%)) drop-shadow(0 3px 4px rgb(0 0 0 / 74%));
}

.stake-room-crown.is-active img {
  filter: drop-shadow(0 0 7px rgb(230 181 63 / 58%)) drop-shadow(0 3px 4px rgb(0 0 0 / 74%));
}

.stake-room-crown-plaque.is-mastered {
  background: linear-gradient(180deg, #e0bc65, #5f4720 8%, #2b281c 16%, #171b13 84%, #725421 93%, #d4ae56);
}

.stake-room-play {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  min-height: clamp(66px, 13%, 78px);
  padding: 0 20px;
  color: #f3ead2;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(22px, 2.35vw, 38px);
  font-weight: 610;
  letter-spacing: .01em;
  background:
    radial-gradient(ellipse at 18% 25%, rgb(255 213 148 / 8%) 0 1px, transparent 2px),
    radial-gradient(ellipse at 72% 62%, rgb(0 0 0 / 14%) 0 1px, transparent 2px),
    repeating-linear-gradient(12deg, rgb(255 255 255 / 1.4%) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #834324, #633119 48%, #512714);
  border: 1px solid #c7a15a;
  border-radius: 0;
  box-shadow:
    inset 0 1px rgb(255 225 170 / 22%),
    inset 0 0 0 3px rgb(43 18 8 / 22%),
    0 7px 15px rgb(0 0 0 / 52%);
  text-shadow: 0 2px 4px #2b1108;
  pointer-events: auto;
}

.stake-room-play:hover:not([disabled]) {
  filter: brightness(1.13) saturate(1.06);
}

.stake-room-play[disabled] {
  color: #938b78;
  background: linear-gradient(180deg, #282820, #141812);
  border-color: #625b45;
}

.stake-room-card__locked {
  gap: 0;
  padding: 0;
  color: #d8c17b;
  background: rgb(0 0 0 / 22%);
}

.stake-room-card__locked .stake-room-lock-icon {
  width: clamp(38px, 4vw, 62px);
  height: clamp(44px, 4.7vw, 72px);
  padding: 10px;
  color: #d2b66c;
  fill: rgb(8 11 8 / 88%);
  filter: drop-shadow(0 3px 5px #000);
  background: rgb(6 10 7 / 72%);
  border: 1px solid #9f803a;
  border-radius: 50%;
}

.stake-room-card__locked strong,
.stake-room-card__locked small {
  display: none;
}

.stake-room-card.is-selected .stake-room-card__locked {
  inset: 86px 8px clamp(76px, 14%, 88px);
  align-content: center;
  background: rgb(0 0 0 / 22%);
}

.stake-room-card.is-selected .stake-room-card__locked strong,
.stake-room-card.is-selected .stake-room-card__locked small {
  display: flex;
  margin-top: 7px;
  text-shadow: 0 3px 7px #000;
}

.stake-room-card.is-selected .stake-room-card__locked strong {
  color: #e3d4ac;
  font-size: 13px;
}

.stake-room-card.is-selected .stake-room-card__locked small {
  align-items: center;
  gap: 5px;
  color: #c7b889;
  font-size: 11px;
}

.stake-room-card.is-selected.is-locked .stake-room-card__identity {
  display: block;
}

.stake-room-arrow {
  width: clamp(42px, 4.6vw, 68px);
  height: clamp(62px, 7.2vw, 104px);
  padding: 0;
  color: transparent;
  background: linear-gradient(100deg, #f2dda0, #b78931 54%, #6a4517);
  border: 0;
  border-radius: 0;
  box-shadow: 0 5px 10px rgb(0 0 0 / 64%), inset 0 0 0 1px rgb(255 241 193 / 50%);
  clip-path: polygon(70% 0, 100% 0, 31% 50%, 100% 100%, 70% 100%, 0 50%);
  filter: drop-shadow(0 0 4px rgb(216 170 73 / 24%));
}

.stake-room-arrow.is-next {
  transform: scaleX(-1);
}

.stake-room-arrow span {
  display: none;
}

.stake-room-arrow:hover:not(:disabled) {
  background: linear-gradient(100deg, #fff0bc, #d2a346 54%, #875b20);
  filter: drop-shadow(0 0 8px rgb(235 193 96 / 38%));
}

.stake-room-arrow:disabled {
  opacity: .18;
}

html[dir="rtl"] .stake-room-arrow.is-next {
  transform: scaleX(1);
}

html[dir="rtl"] .stake-room-arrow.is-previous {
  transform: scaleX(-1);
}

.stake-room-ladder__footer {
  grid-template-columns: 1fr;
  min-height: 48px;
  border: 0;
}

.stake-room-progress {
  display: flex;
  width: min(760px, 76%);
  min-width: 0;
  justify-self: center;
  gap: clamp(3px, .42vw, 7px);
  align-items: center;
  justify-content: center;
  padding: 0;
}

.stake-room-progress button {
  width: clamp(8px, .72vw, 12px);
  min-width: clamp(8px, .72vw, 12px);
  height: 24px;
}

.stake-room-progress button span {
  width: clamp(6px, .55vw, 9px);
  height: clamp(6px, .55vw, 9px);
  background: #343630;
  border-radius: 50%;
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

.stake-room-progress button.is-unlocked span {
  background: #315c38;
}

.stake-room-progress button.is-current span {
  width: clamp(9px, .78vw, 13px);
  height: clamp(9px, .78vw, 13px);
  background: #f0cb6b;
  box-shadow: 0 0 10px #e7bd55, 0 0 22px rgb(232 185 70 / 52%);
}

.stake-room-ladder__count {
  position: absolute;
  bottom: 2px;
  left: 50%;
  z-index: 3;
  pointer-events: none;
  display: flex;
  min-width: 122px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 24px;
  color: #f0cf78;
  font-family: var(--kott-font-display, Georgia, serif);
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 650;
  letter-spacing: .03em;
  text-align: center;
  background: linear-gradient(180deg, #2f2a17, #0b120d 20%, #06100b 80%, #272113);
  border: 1px solid #8a6d30;
  clip-path: polygon(9% 0, 91% 0, 96% 20%, 100% 50%, 96% 80%, 91% 100%, 9% 100%, 4% 80%, 0 50%, 4% 20%);
  transform: translateX(-50%);
  line-height: 1;
  white-space: nowrap;
}

.stake-room-ladder__count i {
  color: #8c805e;
}

.stake-room-notice {
  position: absolute;
  right: 50%;
  bottom: 48px;
  width: max-content;
  max-width: min(520px, 88vw);
  margin: 0;
  padding: 8px 14px;
  color: #eddfba;
  text-align: center;
  background: rgb(5 12 8 / 94%);
  border: 1px solid rgb(207 165 69 / 45%);
  transform: translateX(50%);
  white-space: normal;
}

@media (max-width: 1024px) and (min-height: 541px) {
  .stake-room-card.is-selected {
    width: min(58%, 620px);
  }

  .stake-room-card:nth-child(2),
  .stake-room-card-spacer:nth-child(2) {
    left: 3%;
    width: 25%;
  }

  .stake-room-card:nth-child(4),
  .stake-room-card-spacer:nth-child(4) {
    right: 3%;
    width: 25%;
  }

  .stake-room-card:nth-child(1),
  .stake-room-card:nth-child(5) {
    opacity: .22;
  }

  .stake-room-crown-plaque {
    left: 19%;
    width: 64%;
  }
}

@media (max-width: 780px) and (orientation: portrait) {
  .stake-room-ladder {
    grid-template-rows: 56px minmax(0, 1fr) 40px;
    padding: max(5px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  .stake-room-ladder__top {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    min-height: 56px;
  }

  .stake-room-ladder__top .hall-play-back {
    width: 40px;
    min-width: 40px;
    min-height: 38px;
  }

  .stake-room-ladder__top small {
    display: none;
  }

  .stake-room-ladder__top h1 {
    font-size: clamp(22px, 6.5vw, 30px);
  }

  .stake-room-ladder__viewport {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 0;
    padding: 1px 0 3px;
  }

  .stake-room-arrow {
    width: 29px;
    height: 54px;
  }

  .stake-room-card:nth-child(2),
  .stake-room-card-spacer:nth-child(2) {
    left: -7%;
    width: 35%;
    height: 58%;
  }

  .stake-room-card:nth-child(4),
  .stake-room-card-spacer:nth-child(4) {
    right: -7%;
    width: 35%;
    height: 58%;
  }

  .stake-room-card.is-selected {
    width: min(74%, 380px);
    height: 90%;
  }

  .stake-room-card.is-selected .stake-room-card__head {
    top: 14px;
    font-size: 10px;
  }

  .stake-room-card.is-selected .stake-room-card__identity h2 {
    top: 34px;
    font-size: clamp(19px, 6.2vw, 28px);
    line-height: .94;
  }

  .stake-room-stats-rail {
    top: 76px;
    left: 13px;
    width: 52%;
  }

  .stake-room-stats-rail dl > div {
    padding-bottom: 9px;
  }

  .stake-room-stats-rail dl > div + div {
    padding-top: 9px;
  }

  .stake-room-stats-rail dt {
    font-size: 9px;
  }

  .stake-room-stats-rail dd {
    gap: 3px;
    font-size: clamp(14px, 4.45vw, 20px);
  }

  .stake-room-chip-amount.has-compact .stake-room-chip-amount__full {
    display: none;
  }

  .stake-room-chip-amount.has-compact .stake-room-chip-amount__compact {
    display: inline;
  }

  .stake-room-card__details .hall-currency-art {
    width: 17px;
    height: 17px;
  }

  .stake-room-crown-plaque {
    bottom: 59px;
    left: 7px;
    width: calc(100% - 14px);
    min-height: 101px;
    padding: 8px 10px 6px;
  }

  .stake-room-crown-plaque header strong {
    font-size: 11px;
  }

  .stake-room-crown-plaque footer strong {
    font-size: 10px;
  }

  .stake-room-crown {
    min-height: 39px;
  }

  .stake-room-crown img {
    height: 42px;
  }

  .stake-room-play {
    min-height: 49px;
    font-size: clamp(17px, 5.4vw, 24px);
  }

  .stake-room-card.is-selected .stake-room-card__locked {
    inset: 64px 7px 53px;
  }

  .stake-room-progress {
    width: 92%;
    gap: 2px;
  }

  .stake-room-progress button {
    width: 8px;
    min-width: 8px;
  }

  .stake-room-ladder__count {
    min-width: 92px;
    min-height: 31px;
    padding-inline: 16px;
    font-size: 16px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .stake-room-ladder {
    grid-template-rows: 39px minmax(0, 1fr) 28px;
    padding: max(3px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(1px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  }

  .stake-room-ladder__top {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    min-height: 39px;
    padding: 0;
  }

  .stake-room-ladder__top .hall-play-back {
    width: 36px;
    min-width: 36px;
    min-height: 34px;
  }

  .stake-room-ladder__top small {
    display: none;
  }

  .stake-room-ladder__top h1 {
    font-size: clamp(19px, 3.8vw, 26px);
  }

  .stake-room-ladder__viewport {
    grid-template-columns: 31px minmax(0, 1fr) 31px;
    gap: 2px;
    padding: 1px 0;
  }

  .stake-room-arrow {
    width: 30px;
    height: 47px;
  }

  .stake-room-card.is-selected {
    width: min(40%, 420px);
    height: 92%;
  }

  .stake-room-card:nth-child(1),
  .stake-room-card-spacer:nth-child(1),
  .stake-room-card:nth-child(5),
  .stake-room-card-spacer:nth-child(5) {
    display: none;
  }

  .stake-room-card:nth-child(2),
  .stake-room-card-spacer:nth-child(2) {
    left: 0;
    width: 27%;
    height: 78%;
  }

  .stake-room-card:nth-child(4),
  .stake-room-card-spacer:nth-child(4) {
    right: 0;
    width: 27%;
    height: 78%;
  }

  .stake-room-card:nth-child(2) .stake-room-card__identity h2,
  .stake-room-card:nth-child(4) .stake-room-card__identity h2 {
    top: 14px;
    font-size: clamp(11px, 1.9vw, 16px);
    line-height: .95;
  }

  .stake-room-card:nth-child(2) .stake-room-card__identity p,
  .stake-room-card:nth-child(4) .stake-room-card__identity p {
    min-height: 38px;
    font-size: clamp(11px, 1.75vw, 15px);
  }

  .stake-room-card.is-selected .stake-room-card__head {
    top: 8px;
    font-size: 8px;
  }

  .stake-room-card.is-selected .stake-room-card__identity h2 {
    top: 23px;
    font-size: clamp(16px, 2.75vw, 23px);
    line-height: .94;
  }

  .stake-room-stats-rail {
    top: 53px;
    left: 11px;
    width: 30%;
  }

  .stake-room-stats-rail dl > div {
    padding-bottom: 5px;
  }

  .stake-room-stats-rail dl > div + div {
    padding-top: 6px;
  }

  .stake-room-stats-rail dt {
    font-size: 7px;
  }

  .stake-room-stats-rail dd {
    gap: 2px;
    font-size: clamp(10px, 1.65vw, 15px);
  }

  .stake-room-chip-amount.has-compact .stake-room-chip-amount__full {
    display: none;
  }

  .stake-room-chip-amount.has-compact .stake-room-chip-amount__compact {
    display: inline;
  }

  .stake-room-card__details .hall-currency-art {
    width: 11px;
    height: 11px;
  }

  .stake-room-crown-plaque {
    bottom: 39px;
    left: 35%;
    width: 61%;
    min-height: 70px;
    padding: 4px 7px 3px;
  }

  .stake-room-crown-plaque header strong,
  .stake-room-crown-plaque footer strong {
    font-size: 8px;
  }

  .stake-room-crown-row {
    margin-top: 0;
  }

  .stake-room-crown {
    min-height: 28px;
  }

  .stake-room-crown img {
    height: 30px;
  }

  .stake-room-play {
    min-height: 34px;
    font-size: clamp(11px, 1.9vw, 16px);
  }

  .stake-room-card.is-selected .stake-room-card__locked {
    inset: 47px 7px 38px;
  }

  .stake-room-card.is-selected .stake-room-card__locked strong,
  .stake-room-card.is-selected .stake-room-card__locked small {
    display: none;
  }

  .stake-room-ladder__footer {
    min-height: 28px;
  }

  .stake-room-progress {
    width: 80%;
    gap: 3px;
  }

  .stake-room-progress button {
    width: 7px;
    min-width: 7px;
    height: 18px;
  }

  .stake-room-progress button span {
    width: 6px;
    height: 6px;
  }

  .stake-room-ladder__count {
    bottom: 0;
    min-width: 78px;
    min-height: 25px;
    padding-inline: 13px;
    font-size: 13px;
  }
}

/* Server-backed replay library and broadcast viewer shell. */
.hall-replay-page {
  position: relative;
  width: min(1240px, 100%);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  overflow: auto;
  color: #f4f0e8;
  background:
    linear-gradient(90deg, rgba(3, 10, 7, 0.97), rgba(5, 17, 12, 0.88) 56%, rgba(17, 10, 5, 0.91)),
    radial-gradient(circle at 74% 18%, rgba(213, 166, 58, 0.12), transparent 28rem);
}

.hall-profile-page {
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(215, 170, 68, 0.38) transparent;
  color: #f4f0e8;
  background:
    radial-gradient(circle at 18% 0, rgba(211, 163, 56, 0.13), transparent 32rem),
    linear-gradient(120deg, #030907, #07130e 58%, #120b06);
}

.hall-profile-hero {
  display: flex;
  width: min(1180px, calc(100% - 36px));
  gap: 22px;
  align-items: center;
  margin: 30px auto 0;
  padding: 24px;
  border: 1px solid rgba(212, 166, 58, 0.26);
  border-radius: 16px;
  background: rgba(5, 13, 9, 0.78);
}

.hall-profile-hero__avatar { position: relative; display: block; width: 92px; height: 92px; flex: 0 0 92px; }
.hall-profile-hero__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border: 3px solid #b8862f; border-radius: 50%; }
.hall-profile-hero__avatar button { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; color: #f3d47e; background: #101712; border: 1px solid #c89838; border-radius: 50%; }
.hall-profile-hero h1 { margin: 3px 0; font-family: Georgia, serif; font-size: clamp(28px, 3vw, 46px); }
.hall-profile-hero small, .hall-profile-hero p { color: #caa34c; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.hall-profile-tabs { display: flex; width: min(1180px, calc(100% - 36px)); gap: 8px; margin: 14px auto 0; border-bottom: 1px solid rgba(212, 166, 58, 0.24); }
.hall-profile-tabs button { min-height: 44px; padding: 0 22px; color: #a8a59d; background: transparent; border: 0; border-bottom: 2px solid transparent; font-weight: 850; }
.hall-profile-tabs button.is-active { color: #f2d783; border-bottom-color: #d4a63a; }
.hall-profile-overview { width: min(1180px, calc(100% - 36px)); margin: 18px auto; }
.hall-profile-overview dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hall-profile-overview dl div { padding: 22px; background: rgba(5, 13, 9, 0.82); border: 1px solid rgba(212, 166, 58, 0.22); border-radius: 12px; }
.hall-profile-overview dt { color: #9d998e; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hall-profile-overview dd { margin: 6px 0 0; color: #efd37f; font: 700 30px/1 Georgia, serif; }

.hall-replay-page::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(76, 37, 15, 0.14)),
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, 0.012) 96px);
}

.replay-avatar-edit {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #e7bf5c;
  background: rgba(5, 12, 9, 0.88);
  border: 1px solid rgba(212, 166, 58, 0.42);
  border-radius: 50%;
}

.replay-library {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1240px, 100%);
  min-height: 0;
  align-content: start;
  gap: clamp(18px, 2.2vw, 30px);
  margin: auto;
  padding: clamp(22px, 3vw, 42px) clamp(18px, 3.2vw, 46px) 48px;
}

.replay-library__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  gap: 24px;
  align-items: end;
  padding: clamp(18px, 2.4vw, 30px);
  background:
    linear-gradient(110deg, rgba(14, 28, 21, 0.92), rgba(5, 12, 9, 0.9) 68%),
    radial-gradient(circle at 88% 18%, rgba(226, 181, 75, 0.18), transparent 46%);
  border: 1px solid rgba(213, 166, 58, 0.28);
  border-radius: 16px;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 247, 217, 0.04);
}

.replay-library__header small {
  color: #dcb453;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.replay-library__header h1 {
  margin: 6px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 0.98;
}

.replay-library__header p {
  max-width: 720px;
  margin: 0;
  color: #bbb8ae;
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.45;
}

.replay-capacity {
  display: grid;
  gap: 9px;
  color: #d9d2c5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(213, 166, 58, 0.16);
  border-radius: 10px;
}

.replay-capacity i {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(213, 166, 58, 0.18);
  border-radius: 99px;
}

.replay-capacity i::after {
  display: block;
  width: calc(var(--replay-capacity, 0) * 100%);
  height: 100%;
  content: "";
  background: linear-gradient(90deg, #8a5d18, #e4bd5e);
}

.replay-library__message,
.replay-empty {
  margin: 0;
  color: #c6bda9;
}

.replay-empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  padding: 28px;
  text-align: center;
  background: rgba(4, 10, 8, 0.54);
  border: 1px dashed rgba(213, 166, 58, 0.26);
  border-radius: 14px;
}

.replay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(13px, 1.4vw, 22px);
}

.replay-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(17, 27, 23, 0.96), rgba(5, 10, 8, 0.98));
  border: 1px solid rgba(213, 166, 58, 0.3);
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255, 247, 217, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .replay-card:hover {
    border-color: rgba(232, 195, 103, 0.58);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(236, 200, 112, 0.05);
    transform: translateY(-3px);
  }
}

.replay-card__visual {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  text-align: initial;
  background: #07130d;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.replay-card__artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95) contrast(1.04);
  transition: filter 220ms ease, transform 420ms cubic-bezier(.2,.75,.25,1);
}

.replay-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 5, 4, 0.03) 38%, rgba(2, 5, 4, 0.86) 100%);
  pointer-events: none;
}

.replay-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding-left: 3px;
  color: #211505;
  font-size: 17px;
  background: linear-gradient(180deg, rgba(248, 222, 151, 0.96), rgba(190, 132, 36, 0.96));
  border: 1px solid rgba(255, 236, 177, 0.75);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.88);
  transition: opacity 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .replay-card__visual:hover .replay-card__artwork { filter: saturate(1.06) contrast(1.06); transform: scale(1.035); }
  .replay-card__visual:hover .replay-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.replay-card__visual:focus-visible { outline: 2px solid #f0d37c; outline-offset: -4px; }

.replay-card__discipline {
  position: absolute;
  bottom: 12px;
  left: 13px;
  z-index: 1;
  padding: 6px 9px;
  color: #f0cc72;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(4, 7, 6, 0.76);
  border: 1px solid rgba(224, 184, 78, 0.35);
  border-radius: 99px;
  backdrop-filter: blur(8px);
}

.replay-card__body {
  display: grid;
  gap: 9px;
  padding: 16px 16px 14px;
}

.replay-card__body h3 {
  min-height: 2.25em;
  margin: 0;
  overflow-wrap: anywhere;
  color: #f6f1e7;
  font-size: 18px;
  line-height: 1.12;
}

.replay-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  color: #948f85;
  font-size: 11px;
}

.replay-visibility {
  padding: 3px 6px;
  color: #cfc7b8;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.replay-visibility--public { color: #91d59c; }
.replay-visibility--unlisted { color: #e0b84e; }

.replay-card__actions {
  display: grid;
  grid-template-columns: 1fr repeat(3, 46px);
  gap: 1px;
  padding: 8px;
  background: rgba(1, 5, 3, 0.58);
  border-top: 1px solid rgba(213, 166, 58, 0.18);
}

.replay-card__actions.is-read-only {
  grid-template-columns: 1fr;
}

.replay-card__actions button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  overflow-wrap: anywhere;
  color: #bdb7ac;
  font-size: 10px;
  font-weight: 780;
  background: rgba(3, 7, 5, 0.58);
  border: 0;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 8px;
}

.replay-card__actions .replay-primary-action { color: #181006; font-size: 11px; background: linear-gradient(180deg, #ecd17e, #b98327); border-color: rgba(255, 225, 141, 0.35); }
.replay-card__actions .replay-icon-action { padding: 0; font-size: 17px; }
.replay-card__actions .replay-danger-action:hover { color: #f2b0a8; }

.game-save-replay-button {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 12;
  display: flex;
  min-height: 42px;
  gap: 8px;
  align-items: center;
  padding: 0 14px;
  color: #edc766;
  background: rgba(5, 10, 8, 0.86);
  border: 1px solid rgba(212, 166, 58, 0.52);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.game-save-replay-button:disabled {
  color: #8d887e;
  border-color: rgba(150, 145, 134, 0.2);
  opacity: 0.62;
}

.replay-viewer-controls {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  z-index: 24;
  display: flex;
  width: max-content;
  max-width: calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  margin: auto;
  gap: 7px;
  align-items: center;
  padding: 10px;
  color: #f0e9dc;
  background: linear-gradient(180deg, rgba(14, 21, 18, 0.94), rgba(3, 7, 5, 0.97));
  border: 1px solid rgba(212, 166, 58, 0.46);
  border-radius: 12px;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(12px);
}

.replay-viewer-controls button {
  min-height: 38px;
  padding: 0 10px;
  color: #dfd8ca;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(212, 166, 58, 0.22);
  border-radius: 7px;
}

.replay-viewer-icon { display: grid; width: 38px; min-width: 38px; padding: 0 !important; place-items: center; font-size: 16px; }
.replay-viewer-play { color: #181006 !important; background: linear-gradient(180deg, #f0d88e, #bd8426) !important; }
.replay-viewer-transport, .replay-viewer-tools, .replay-viewer-cameras { display: flex; gap: 6px; align-items: center; }
.replay-viewer-transport { padding-right: 7px; border-right: 1px solid rgba(212, 166, 58, .2); }
.replay-viewer-pill { min-width: 48px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.replay-viewer-controls [aria-pressed="true"] { color: #1b1206; background: linear-gradient(180deg, #f0d88e, #bd8426); border-color: #f2d984; }
.replay-viewer-time { color: #bdb7aa; font-size: 12px; font-variant-numeric: tabular-nums; }
.replay-contact-point { display: grid; width: 38px; height: 38px; place-items: center; }
.replay-contact-point > span { position: relative; display: block; width: 27px; height: 27px; background: radial-gradient(circle at 35% 28%, #fff, #e7decc 68%, #9d907c); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; }
.replay-contact-point i { position: absolute; top: calc(50% + var(--contact-y, 0%)); left: calc(50% + var(--contact-x, 0%)); width: 6px; height: 6px; background: #d62e32; border: 1px solid rgba(84,0,0,.34); border-radius: 50%; transform: translate(-50%, -50%); }
.replay-viewer-switcher { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(320px, calc(100vw - 24px)); max-height: min(48vh, 360px); overflow: auto; padding: 8px; color: #d9d1c3; background: rgba(3,8,6,.98); border: 1px solid rgba(212,166,58,.42); border-radius: 10px; box-shadow: 0 18px 42px rgba(0,0,0,.58); }
.replay-viewer-switch-item { display: block; width: 100%; margin: 4px 0; text-align: left; }

.kott-visualizer-host[data-replay-mode="true"] .kott-shot-hud-desktop,
.kott-visualizer-host[data-replay-mode="true"] .kott-shot-hud-mobile,
.kott-visualizer-host[data-replay-mode="true"] .ball-placement-confirm {
  display: none !important;
}

[dir="rtl"] .replay-card__discipline { right: 11px; left: auto; }

@media (max-width: 1180px) {
  .replay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hall-bottom-nav button { min-width: 0; }
  .replay-viewer-time { display: none; }
  .replay-viewer-other { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 860px) {
  .replay-library { padding: 14px 10px 30px; }
  .replay-library__header { grid-template-columns: 1fr; gap: 14px; }
  .replay-grid { grid-template-columns: 1fr; }
  .hall-profile-hero { width: calc(100% - 20px); margin-top: 10px; padding: 14px; }
  .hall-profile-tabs, .hall-profile-overview { width: calc(100% - 20px); }
  .hall-profile-overview dl { grid-template-columns: 1fr; }
  .replay-card__play { display: none; }
}

@media (max-width: 980px) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  .hall-profile-hero { width: calc(100% - 20px); min-height: 70px; gap: 12px; margin-top: 8px; padding: 8px 14px; }
  .hall-profile-hero__avatar { width: 58px; height: 58px; flex-basis: 58px; }
  .hall-profile-hero__avatar button { width: 24px; height: 24px; }
  .hall-profile-hero h1 { margin: 0; font-size: 26px; }
  .hall-profile-hero small, .hall-profile-hero p { margin: 0; font-size: 9px; }
  .hall-profile-tabs { width: calc(100% - 20px); margin-top: 4px; }
  .hall-profile-tabs button { min-height: 34px; padding: 0 16px; font-size: 11px; }

  .hall-profile-page--replays .hall-profile-hero { display: none; }
  .hall-profile-page--replays .hall-profile-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    margin-top: 0;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    background: rgba(3, 10, 7, 0.96);
    backdrop-filter: blur(10px);
  }
  .hall-profile-page--replays .hall-profile-tabs button { min-height: 30px; padding: 0 14px; font-size: 10px; }
  .hall-profile-page--replays .hall-replay-page { width: 100%; }

  .replay-library {
    gap: 8px;
    padding: 7px max(12px, env(safe-area-inset-right)) 14px max(12px, env(safe-area-inset-left));
  }
  .replay-library__header {
    grid-template-columns: minmax(0, 1fr) minmax(136px, 164px);
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 10px;
  }
  .replay-library__header small,
  .replay-library__header p { display: none; }
  .replay-library__header h1 { margin: 0; font-size: 24px; line-height: 1; }
  .replay-capacity { gap: 4px; padding: 6px 8px; font-size: 9px; border-radius: 7px; }
  .replay-capacity i { height: 4px; }
  .replay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .replay-card {
    grid-template-columns: minmax(118px, 42%) minmax(0, 58%);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 144px;
    border-radius: 11px;
  }
  .replay-card__visual {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 100%;
    min-height: 144px;
    aspect-ratio: auto;
  }
  .replay-card__play { display: none; }
  .replay-card__discipline { bottom: 8px; left: 8px; padding: 4px 6px; font-size: 8px; }
  .replay-card__body { grid-row: 1; grid-column: 2; align-content: space-between; gap: 5px; padding: 9px 9px 6px; }
  .replay-card__body h3 {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .replay-card__meta { align-items: flex-start; gap: 3px; font-size: 9px; }
  .replay-visibility { padding: 2px 4px; }
  .replay-card__actions {
    grid-row: 2;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) repeat(3, 38px);
    padding: 4px;
  }
  .replay-card__actions button { min-height: 38px; padding: 4px; font-size: 9px; }
  .replay-card__actions .replay-icon-action { font-size: 15px; }
  .game-save-replay-button { top: max(7px, env(safe-area-inset-top)); left: max(7px, env(safe-area-inset-left)); min-height: 38px; }
  .game-save-replay-button span:last-child { display: none; }
  .replay-viewer-controls { right: max(54px, env(safe-area-inset-right)); bottom: max(7px, env(safe-area-inset-bottom)); left: max(54px, env(safe-area-inset-left)); flex-wrap: wrap; justify-content: center; width: auto; max-width: none; padding: 6px; }
  .replay-viewer-controls button { min-height: 32px; padding: 0 7px; font-size: 10px; }
  .replay-viewer-icon { width: 32px; min-width: 32px; }
  .replay-viewer-other { width: 32px; min-width: 32px; max-width: 32px; color: transparent !important; font-size: 0 !important; }
  .replay-viewer-other::after { content: "☷"; color: #dfd8ca; font-size: 15px; }
  .replay-contact-point { width: 32px; height: 32px; }
  .replay-contact-point > span { width: 24px; height: 24px; }
}

@media (max-width: 980px), (max-height: 620px) {
  .game-room.game-room-fullscreen {
    gap: 0;
    padding: 0;
  }

  .game-room-fullscreen .game-lobby-button {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    min-width: 76px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .game-room-fullscreen .mobile-top-actions {
    right: auto;
    left: max(8px, env(safe-area-inset-left));
  }

  .game-room-fullscreen .visualizer-quality {
    right: calc(max(8px, env(safe-area-inset-right)) + 88px);
  }
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: minmax(210px, 248px) minmax(0, 1fr);
    width: calc(100vw - 20px);
    height: calc(100svh - 20px);
  }

  .form-panel {
    padding-right: 28px;
    padding-left: 28px;
  }

  .form-topline {
    gap: 14px;
  }

  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body {
    overflow: auto;
  }

  .auth-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100svh - 20px);
  }

  .brand-panel {
    min-height: 260px;
    background-size: cover;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 240, 232, 0.06);
  }

  .brand-scene,
  .support {
    display: none;
  }

  .form-topline {
    flex-direction: column;
  }

  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1500px), (max-height: 850px) {
  .lobby-shell {
    grid-template-columns: minmax(220px, 18vw) minmax(0, 1fr) minmax(260px, 20vw);
    grid-template-rows: minmax(0, 1fr) 62px;
    gap: 10px;
    padding: 10px;
  }

  .player-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .avatar-ring {
    width: 80px;
  }

  .player-meta p {
    margin-bottom: 10px;
  }

  .progress-card {
    padding: 10px;
  }

  .side-action,
  .lobby-language-control {
    min-height: 48px;
  }

  .lobby-brand img {
    width: 72px;
  }

  .lobby-brand strong {
    font-size: clamp(34px, 3.7vw, 54px);
  }

  .lobby-copy h1 {
    font-size: clamp(23px, 2vw, 31px);
  }

  .lobby-copy p {
    font-size: clamp(13px, 0.95vw, 17px);
  }

  .table-card {
    gap: 6px;
    padding: 10px;
  }

  .discipline-badge {
    width: 36px;
    font-size: 18px;
  }

  .table-card-body {
    gap: 8px;
  }

  .table-visual {
    min-height: 82px;
  }

  .table-stats span {
    padding: 8px;
  }

  .gold-button,
  .dark-button,
  .blue-button {
    min-height: 38px;
  }

  .premium-card {
    padding: 16px;
  }

  .premium-card ul {
    gap: 7px;
    margin-bottom: 12px;
  }

  .premium-card .gold-button {
    min-height: 46px;
  }

  .bonus-card {
    padding: 14px;
  }

  .bonus-art {
    font-size: 52px;
  }

  .bonus-card p {
    margin: 6px auto 10px;
    font-size: 13px;
  }

  .bonus-row span,
  .bonus-row button {
    min-height: 38px;
  }
}

@media (max-height: 760px) {
  .lobby-shell {
    grid-template-columns: minmax(200px, 17vw) minmax(0, 1fr) minmax(240px, 20vw);
    grid-template-rows: minmax(0, 1fr) 56px;
    padding: 8px;
    gap: 8px;
  }

  .profile-side {
    padding: 8px;
  }

  .progress-stack,
  .side-actions {
    gap: 6px;
  }

  .big-stat {
    font-size: 24px;
  }

  .progress-card small {
    font-size: 12px;
  }

  .lobby-brand p {
    margin-top: 4px;
  }

  .lobby-copy h1 {
    margin-top: 6px;
    font-size: 24px;
  }

  .lobby-copy p {
    max-width: 650px;
    font-size: 14px;
  }

  .tables-grid {
    gap: 8px;
  }

  .table-card h2 {
    font-size: 18px;
  }

  .status-pill,
  .king-info small,
  .winner-rule,
  .table-stats span {
    font-size: 12px;
  }

  .table-card-body {
    grid-template-columns: 1.18fr 0.92fr;
  }

  .premium-card h2,
  .bonus-card h2 {
    font-size: 18px;
  }

  .price {
    margin: 8px 0 10px;
    font-size: 24px;
  }

  .premium-card li {
    font-size: 12px;
  }

  .lobby-nav button {
    gap: 6px;
    font-size: 12px;
  }

  .lobby-nav button span {
    font-size: 20px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body[data-view="lobby"] {
    overflow: hidden;
  }

  .lobby-shell {
    grid-template-columns: 146px minmax(0, 1fr) 190px;
    grid-template-rows: minmax(0, 1fr) 48px;
    gap: 6px;
    padding: 6px;
  }

  .lobby-side,
  .table-card,
  .premium-card,
  .bonus-card,
  .lobby-nav {
    border-radius: 10px;
  }

  .profile-side {
    padding: 7px;
    gap: 6px;
  }

  .player-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
  }

  .avatar-ring {
    width: 54px;
    padding: 2px;
  }

  .avatar-crown {
    width: 20px;
    height: 20px;
    top: -5px;
    font-size: 13px;
  }

  .avatar-level {
    width: 17px;
    height: 17px;
    font-size: 10px;
  }

  .player-meta h2 {
    font-size: 15px;
  }

  .player-meta p {
    margin-bottom: 6px;
    font-size: 12px;
  }

  .xp-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .xp-row strong {
    font-size: 10px;
    text-align: right;
  }

  .progress-track {
    height: 10px;
  }

  .progress-card,
  .side-action,
  .lobby-language-control {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    border-radius: 7px;
  }

  .progress-card {
    padding: 6px;
  }

  .progress-card:nth-child(3) {
    display: none;
  }

  .progress-card h3 {
    margin-bottom: 2px;
    font-size: 11px;
  }

  .gold-icon {
    font-size: 16px;
  }

  .big-stat {
    margin-bottom: 2px;
    font-size: 17px;
  }

  .progress-card small {
    display: none;
  }

  .side-action,
  .lobby-language-control {
    min-height: 31px;
    padding: 0 7px;
    font-size: 11px;
  }

  .lobby-language-control {
    grid-template-columns: 18px minmax(0, auto) minmax(0, 1fr);
  }

  .lobby-language-control select {
    font-size: 10px;
  }

  .lobby-center {
    gap: 7px;
  }

  .lobby-header {
    align-content: start;
  }

  .lobby-brand {
    gap: 8px;
  }

  .lobby-brand img {
    width: 44px;
  }

  .lobby-brand strong {
    font-size: clamp(28px, 4.5vw, 39px);
  }

  .lobby-brand p {
    margin-top: 2px;
    font-size: 10px;
  }

  .lobby-copy h1 {
    margin: 4px 0 2px;
    font-size: 17px;
  }

  .lobby-copy p {
    display: none;
  }

  .tables-grid {
    grid-auto-columns: minmax(210px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .tables-grid::-webkit-scrollbar {
    display: none;
  }

  .table-card {
    width: 100%;
    gap: 5px;
    padding: 6px;
    grid-template-rows: auto 112px auto auto;
  }

  .table-card-head {
    gap: 5px;
  }

  .discipline-badge {
    width: 26px;
    font-size: 13px;
  }

  .table-card h2 {
    font-size: 13px;
    white-space: normal;
  }

  .status-pill {
    padding: 4px 6px;
    font-size: 10px;
  }

  .table-card-body {
    grid-template-columns: 1fr;
    gap: 5px;
    overflow: hidden;
  }

  .table-visual {
    min-height: 74px;
  }

  .king-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: baseline;
    overflow: hidden;
  }

  .king-info small:nth-of-type(2),
  .king-info p {
    display: none;
  }

  .king-info strong {
    margin: 0;
    font-size: 11px;
  }

  .king-info b {
    font-size: 16px;
  }

  .king-info small {
    font-size: 10px;
  }

  .table-stats {
    grid-template-columns: 1fr 1fr;
  }

  .table-stats span {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px;
    padding: 5px;
    font-size: 10px;
  }

  .table-stats i {
    font-size: 14px;
  }

  .winner-rule {
    display: none;
  }

  .table-actions {
    gap: 5px;
  }

  .gold-button,
  .dark-button,
  .blue-button {
    min-height: 29px;
    padding: 0 6px;
    font-size: 10px;
  }

  .club-side {
    gap: 6px;
  }

  .premium-card {
    padding: 10px;
    flex: 1 1 0;
  }

  .premium-crown {
    display: none;
  }

  .premium-card h2 {
    font-size: 15px;
  }

  .price {
    margin: 6px 0 7px;
    font-size: 19px;
  }

  .premium-card ul {
    gap: 4px;
    margin-bottom: 8px;
  }

  .premium-card li {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 5px;
    font-size: 10px;
  }

  .premium-card li:nth-child(n + 8) {
    display: none;
  }

  .premium-card .gold-button {
    min-height: 34px;
    font-size: 12px;
  }

  .bonus-card {
    padding: 9px;
  }

  .bonus-art {
    display: none;
  }

  .bonus-card h2 {
    font-size: 14px;
  }

  .bonus-card p {
    margin: 5px 0 7px;
    font-size: 10px;
  }

  .bonus-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .bonus-row span,
  .bonus-row button {
    min-height: 27px;
    font-size: 10px;
  }

  .lobby-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(84px, 1.2fr);
  }

  .lobby-nav button {
    flex-direction: column;
    gap: 1px;
    font-size: 9px;
    line-height: 1;
  }

  .lobby-nav button span {
    font-size: 16px;
  }

  .lobby-nav .wallet-button {
    flex-direction: row;
    gap: 4px;
    padding: 0 5px;
    font-size: 9px;
  }

  .wallet-button b {
    width: 20px;
  }
}

@media (max-width: 820px) and (max-height: 430px) and (orientation: landscape) {
  .lobby-shell {
    grid-template-columns: 128px minmax(0, 1fr) 170px;
  }

  .lobby-copy p {
    display: none;
  }

  .premium-card li:nth-child(n + 6) {
    display: none;
  }
}

/* Reference-faithful lobby pass: live UI, original image proportions/assets. */
body[data-view="lobby"] .lobby-screen {
  padding: 0;
  background: #010101;
}

body[data-view="lobby"] .lobby-atmosphere {
  inset: 0;
  overflow: hidden;
  background: #020202;
  opacity: 1;
}

body[data-view="lobby"] .lobby-atmosphere::before {
  top: -18px;
  right: -18px;
  bottom: -18px;
  left: -18px;
  height: auto;
  background:
    radial-gradient(circle at 32% 8%, rgba(242, 199, 102, 0.32) 0 1.7rem, transparent 7rem),
    radial-gradient(circle at 55% 7%, rgba(242, 199, 102, 0.28) 0 1.55rem, transparent 7rem),
    radial-gradient(circle at 76% 8%, rgba(242, 199, 102, 0.3) 0 1.65rem, transparent 7rem),
    radial-gradient(ellipse at 52% 45%, rgba(12, 75, 42, 0.34) 0 12rem, transparent 34rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.95), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.95)),
    repeating-linear-gradient(90deg, rgba(122, 82, 30, 0.08) 0 1px, transparent 1px 92px),
    linear-gradient(180deg, #070807 0%, #060504 46%, #010101 100%);
  border: 0;
  border-radius: 0;
  opacity: 1;
  filter: none;
  transform: none;
}

body[data-view="lobby"] .lobby-atmosphere::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(226, 184, 78, 0.12), transparent 32%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.92)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.92));
  backdrop-filter: none;
}

body[data-view="lobby"] .lobby-shell {
  width: min(1672px, calc(100vw - 12px), 176.5svh);
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  height: auto;
  max-height: calc(100svh - 12px);
  grid-template-columns: minmax(258px, 19.35%) minmax(0, 1fr) minmax(280px, 21.35%);
  grid-template-rows: minmax(0, 1fr) minmax(54px, 6.85%);
  gap: clamp(10px, 0.82vw, 16px);
  padding: clamp(9px, 0.78vw, 15px);
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-view="lobby"] .lobby-side,
body[data-view="lobby"] .table-card,
body[data-view="lobby"] .premium-card,
body[data-view="lobby"] .bonus-card,
body[data-view="lobby"] .lobby-nav {
  border-color: rgba(212, 166, 58, 0.62);
  border-radius: 9px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 231, 162, 0.08);
}

body[data-view="lobby"] .profile-side {
  gap: clamp(9px, 0.78vw, 14px);
  padding: clamp(10px, 0.82vw, 16px);
  background: linear-gradient(180deg, rgba(7, 9, 9, 0.92), rgba(2, 3, 3, 0.95));
}

body[data-view="lobby"] .player-card {
  grid-template-columns: clamp(78px, 6.35vw, 116px) minmax(0, 1fr);
  gap: clamp(10px, 0.8vw, 14px);
  align-items: center;
}

body[data-view="lobby"] .avatar-ring {
  width: clamp(78px, 6.35vw, 116px);
  padding: 0;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(242, 199, 102, 0.9);
  border-radius: 50%;
}

body[data-view="lobby"] .avatar-face {
  background: url("../assets/reference_lobby/avatar.png") center / cover no-repeat;
  border-radius: 50%;
}

body[data-view="lobby"] .avatar-crown,
body[data-view="lobby"] .avatar-level {
  display: none;
}

body[data-view="lobby"] .player-meta h2 {
  margin-bottom: 7px;
  font-size: clamp(18px, 1.45vw, 27px);
  font-weight: 800;
  letter-spacing: 0;
}

body[data-view="lobby"] .player-meta p {
  margin-bottom: clamp(10px, 1vw, 18px);
  color: var(--gold-light);
  font-size: clamp(12px, 0.96vw, 18px);
  font-weight: 800;
}

body[data-view="lobby"] .xp-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(6px, 0.58vw, 10px);
}

body[data-view="lobby"] .xp-row strong {
  color: #efe7d8;
  font-size: clamp(10px, 0.74vw, 14px);
}

body[data-view="lobby"] .progress-track {
  height: clamp(10px, 0.96vw, 17px);
  background: #050505;
  border-color: rgba(242, 199, 102, 0.2);
}

body[data-view="lobby"] .progress-card,
body[data-view="lobby"] .side-action,
body[data-view="lobby"] .lobby-language-control {
  background: linear-gradient(180deg, rgba(13, 16, 16, 0.85), rgba(5, 6, 6, 0.92));
  border-color: rgba(244, 240, 232, 0.12);
  border-radius: 7px;
}

body[data-view="lobby"] .progress-card {
  padding: clamp(10px, 0.86vw, 15px);
}

body[data-view="lobby"] .progress-card h3 {
  margin-bottom: 7px;
  font-size: clamp(12px, 0.94vw, 17px);
}

body[data-view="lobby"] .big-stat {
  font-size: clamp(24px, 1.88vw, 34px);
  font-weight: 900;
}

body[data-view="lobby"] .progress-card small {
  color: #c4baaa;
  font-size: clamp(11px, 0.82vw, 15px);
}

body[data-view="lobby"] .gold-icon {
  color: var(--gold-light);
  font-size: clamp(18px, 1.3vw, 25px);
}

body[data-view="lobby"] .side-actions {
  gap: clamp(7px, 0.62vw, 10px);
}

body[data-view="lobby"] .side-action,
body[data-view="lobby"] .lobby-language-control {
  min-height: clamp(46px, 3.6vw, 64px);
  font-size: clamp(12px, 0.94vw, 16px);
}

body[data-view="lobby"] .lobby-center {
  grid-template-rows: clamp(172px, 24.1%, 226px) minmax(0, 1fr);
  gap: clamp(9px, 0.78vw, 14px);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-view="lobby"] .lobby-header {
  align-content: start;
  justify-items: center;
  overflow: visible;
  text-align: center;
}

body[data-view="lobby"] .lobby-brand img {
  display: block;
  width: min(650px, 42vw);
  max-height: 116px;
  object-fit: contain;
}

body[data-view="lobby"] .lobby-brand > div {
  display: none;
}

body[data-view="lobby"] .lobby-copy h1 {
  margin: clamp(4px, 0.32vw, 8px) 0 5px;
  color: #ffffff;
  font-size: clamp(26px, 2.2vw, 37px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

body[data-view="lobby"] .lobby-copy p {
  max-width: min(780px, 78%);
  color: #f3efe8;
  font-size: clamp(14px, 1.02vw, 19px);
  line-height: 1.32;
}

body[data-view="lobby"] .account-side .direct-play-panel {
  display: grid;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(12px, 0.9vw, 16px);
  padding: clamp(16px, 1.2vw, 24px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.16), transparent 10rem),
    linear-gradient(180deg, rgba(12, 15, 14, 0.96), rgba(4, 5, 5, 0.97));
  border-color: rgba(212, 166, 58, 0.3);
  border-radius: 16px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 236, 176, 0.08);
}

body[data-view="lobby"] .account-side .direct-play-panel .room-panel-head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  text-align: center;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-panel-head small {
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.08em;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-panel-head h2 {
  margin: 1px 0 0;
  color: var(--gold-light);
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-crossplay {
  margin: 0;
  color: #d7d0c3;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.34;
  text-align: center;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists {
  display: grid;
  min-height: 0;
  grid-template-columns: 1fr;
  gap: clamp(10px, 0.8vw, 14px);
  overflow: hidden;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists section {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 12px;
  background: rgba(5, 8, 8, 0.66);
  border: 1px solid rgba(244, 240, 232, 0.09);
  border-radius: 8px;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists h3 {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists ol {
  display: grid;
  align-content: start;
  max-height: none;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  color: #f4f0e8;
  font-size: 14px;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists li span,
body[data-view="lobby"] .account-side .direct-play-panel .room-lists li small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists li small {
  grid-column: 1;
  color: #aaa297;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists li button {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 6px;
}

body[data-view="lobby"] .account-side .direct-play-panel .direct-game-actions {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  gap: 6px;
}

body[data-view="lobby"] .account-side .direct-play-panel .direct-game-actions button {
  grid-row: auto;
  grid-column: auto;
  min-width: 58px;
  padding: 0 10px;
}

body[data-view="lobby"] .account-side .direct-play-panel .room-lists .is-empty {
  grid-template-columns: 1fr;
  color: #a89f91;
}

body[data-view="lobby"] .tables-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 0.82vw, 16px);
  overflow: hidden;
}

body[data-view="lobby"] .table-card {
  grid-template-rows: auto minmax(96px, 1fr) auto auto auto;
  gap: clamp(7px, 0.58vw, 10px);
  padding: clamp(9px, 0.78vw, 14px);
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.07), transparent 7.5rem),
    linear-gradient(180deg, rgba(9, 13, 12, 0.94), rgba(3, 4, 4, 0.96));
  border-radius: 9px;
}

body[data-view="lobby"] .table-card-head {
  gap: clamp(8px, 0.7vw, 12px);
}

body[data-view="lobby"] .discipline-badge {
  width: clamp(34px, 2.8vw, 45px);
  font-size: clamp(15px, 1.08vw, 19px);
  background:
    radial-gradient(circle at 36% 28%, #ffffff 0 12%, #111 13% 30%, #0b0b0b 31% 58%, #d6a841 59% 78%, #211303 79%);
  border-color: rgba(242, 199, 102, 0.82);
}

body[data-view="lobby"] .table-card-pool9 .discipline-badge {
  color: #1a1a1a;
  background:
    radial-gradient(circle at 35% 31%, #ffffff 0 15%, #f9f1d4 16% 35%, #e2ad25 36% 66%, #59370a 67%);
}

body[data-view="lobby"] .table-card-snooker .discipline-badge {
  color: transparent;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #c61e22 0 52%, #124421 53% 64%, #050505 65%);
}

body[data-view="lobby"] .table-card-pyramid .discipline-badge {
  color: var(--gold-light);
  font-size: clamp(13px, 0.95vw, 17px);
  background:
    radial-gradient(circle at 50% 33%, rgba(242, 199, 102, 0.32), transparent 32%),
    linear-gradient(180deg, #161616, #050505);
}

body[data-view="lobby"] .table-card h2 {
  font-size: clamp(17px, 1.28vw, 24px);
  font-weight: 800;
  letter-spacing: 0;
}

body[data-view="lobby"] .status-pill {
  padding: clamp(5px, 0.46vw, 8px) clamp(8px, 0.66vw, 12px);
  font-size: clamp(10px, 0.82vw, 14px);
  border-radius: 4px;
}

body[data-view="lobby"] .table-card-body {
  grid-template-columns: minmax(0, 1.38fr) minmax(118px, 0.9fr);
  gap: clamp(9px, 0.76vw, 14px);
}

body[data-view="lobby"] .table-visual {
  min-height: 0;
  background: url("../assets/reference_lobby/pool8_thumb.png") center / cover no-repeat;
  border-color: rgba(212, 166, 58, 0.38);
  border-radius: 6px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.56);
}

body[data-view="lobby"] .table-visual::before,
body[data-view="lobby"] .table-visual::after,
body[data-view="lobby"] .table-visual i,
body[data-view="lobby"] .table-visual span {
  display: none;
}

body[data-view="lobby"] .table-visual.pool8 {
  background-image: url("../assets/reference_lobby/pool8_thumb.png");
}

body[data-view="lobby"] .table-visual.pool9 {
  background-image: url("../assets/reference_lobby/pool9_thumb.png");
  filter: none;
}

body[data-view="lobby"] .table-visual.snooker {
  background-image: url("../assets/reference_lobby/snooker_thumb.png");
  filter: none;
}

body[data-view="lobby"] .table-visual.pyramid {
  background-image: url("../assets/reference_lobby/pyramid_thumb.png");
  filter: none;
}

body[data-view="lobby"] .king-info small {
  color: #bfb5a6;
  font-size: clamp(11px, 0.82vw, 14px);
}

body[data-view="lobby"] .king-info strong {
  margin: 4px 0 9px;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 800;
}

body[data-view="lobby"] .king-info b {
  color: var(--gold-light);
  font-size: clamp(21px, 1.74vw, 31px);
}

body[data-view="lobby"] .king-info p {
  color: #eee8dc;
  font-size: clamp(11px, 0.82vw, 15px);
}

body[data-view="lobby"] .table-stats {
  border-radius: 7px;
  background: rgba(5, 6, 6, 0.72);
}

body[data-view="lobby"] .table-stats span {
  display: flex;
  gap: clamp(5px, 0.52vw, 8px);
  align-items: center;
  padding: clamp(6px, 0.62vw, 10px);
  color: #c3b9aa;
  font-size: clamp(10px, 0.78vw, 13px);
  line-height: 1.08;
}

body[data-view="lobby"] .table-stats i {
  flex: 0 0 auto;
  font-size: clamp(16px, 1.28vw, 21px);
  grid-row: auto;
}

body[data-view="lobby"] .table-stats strong {
  display: inline;
  margin-left: auto;
  line-height: 1.08;
}

body[data-view="lobby"] .winner-rule {
  color: var(--gold-light);
  font-size: clamp(10px, 0.78vw, 13px);
}

body[data-view="lobby"] .table-actions {
  gap: clamp(8px, 0.64vw, 12px);
}

body[data-view="lobby"] .gold-button,
body[data-view="lobby"] .dark-button,
body[data-view="lobby"] .blue-button {
  min-height: clamp(34px, 2.8vw, 44px);
  border-radius: 6px;
  font-size: clamp(11px, 0.86vw, 15px);
  font-weight: 800;
}

body[data-view="lobby"] .club-side {
  display: grid;
  grid-template-rows: minmax(0, 1.35fr) minmax(0, 0.86fr);
  gap: clamp(10px, 0.82vw, 16px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-view="lobby"] .premium-card,
body[data-view="lobby"] .bonus-card {
  display: grid;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.1), transparent 8rem),
    linear-gradient(180deg, rgba(8, 10, 10, 0.94), rgba(3, 4, 4, 0.97));
}

body[data-view="lobby"] .premium-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding: clamp(14px, 1.05vw, 22px);
}

body[data-view="lobby"] .premium-card::before {
  inset: 7px;
  border-color: rgba(212, 166, 58, 0.22);
  border-radius: 7px;
}

body[data-view="lobby"] .premium-crown {
  width: clamp(82px, 7vw, 125px);
  height: clamp(44px, 3.9vw, 70px);
  margin: -4px auto 4px;
  background: url("../assets/reference_lobby/premium_crown.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

body[data-view="lobby"] .premium-card h2,
body[data-view="lobby"] .bonus-card h2 {
  color: var(--gold-light);
  font-size: clamp(17px, 1.42vw, 25px);
  font-weight: 900;
  line-height: 1.08;
}

body[data-view="lobby"] .price {
  margin: clamp(8px, 0.72vw, 13px) 0 clamp(10px, 0.86vw, 16px);
  font-size: clamp(24px, 2vw, 33px);
}

body[data-view="lobby"] .premium-card ul {
  align-content: center;
  gap: clamp(7px, 0.6vw, 10px);
  margin-bottom: clamp(10px, 0.9vw, 18px);
}

body[data-view="lobby"] .premium-card li {
  grid-template-columns: clamp(20px, 1.55vw, 26px) minmax(0, 1fr);
  gap: clamp(7px, 0.62vw, 10px);
  color: #eee8dc;
  font-size: clamp(11px, 0.88vw, 16px);
}

body[data-view="lobby"] .mini-mark {
  width: 13px;
  height: 13px;
  margin-top: 1px;
  border: 1px solid rgba(242, 199, 102, 0.7);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 24%, transparent 25%),
    linear-gradient(135deg, rgba(242, 199, 102, 0.18), rgba(212, 166, 58, 0.08));
  color: var(--gold-light);
  transform: rotate(45deg);
}

body[data-view="lobby"] .premium-card .gold-button {
  min-height: clamp(40px, 3.4vw, 56px);
  font-size: clamp(14px, 1.08vw, 19px);
}

body[data-view="lobby"] .bonus-card {
  grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(8px, 0.72vw, 14px);
  row-gap: clamp(7px, 0.62vw, 12px);
  padding: clamp(12px, 1vw, 20px);
  background:
    radial-gradient(circle at 28% 65%, rgba(17, 112, 43, 0.48), transparent 9rem),
    linear-gradient(180deg, rgba(7, 24, 9, 0.95), rgba(2, 5, 2, 0.97));
}

body[data-view="lobby"] .bonus-art {
  align-self: center;
  width: 100%;
  min-height: clamp(80px, 7vw, 120px);
  background: url("../assets/reference_lobby/bonus_art.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

body[data-view="lobby"] .bonus-card p {
  max-width: none;
  margin: clamp(6px, 0.58vw, 10px) auto 0;
  font-size: clamp(11px, 0.82vw, 14px);
}

body[data-view="lobby"] .bonus-row {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(108px, 0.72fr);
  gap: clamp(7px, 0.62vw, 11px);
}

body[data-view="lobby"] .bonus-row span,
body[data-view="lobby"] .bonus-row button {
  min-height: clamp(34px, 2.82vw, 46px);
  border-radius: 6px;
  font-size: clamp(11px, 0.82vw, 15px);
}

body[data-view="lobby"] .lobby-nav {
  grid-template-columns: 1.08fr 1.24fr 1fr 1fr 1.12fr 1fr 1.12fr minmax(150px, 1.14fr);
  background: linear-gradient(180deg, rgba(9, 11, 11, 0.94), rgba(3, 4, 4, 0.97));
  border-radius: 9px;
}

body[data-view="lobby"] .lobby-nav button {
  gap: clamp(7px, 0.62vw, 11px);
  color: #c7bdaa;
  font-size: clamp(12px, 0.94vw, 17px);
  font-weight: 700;
}

body[data-view="lobby"] .lobby-nav button.is-active {
  color: var(--gold-light);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(242, 199, 102, 0.23), transparent 70%),
    linear-gradient(180deg, rgba(212, 166, 58, 0.09), rgba(0, 0, 0, 0));
}

body[data-view="lobby"] .nav-mark {
  width: clamp(21px, 1.8vw, 30px);
  height: clamp(21px, 1.8vw, 30px);
}

body[data-view="lobby"] .wallet-button {
  justify-content: flex-end;
  padding-right: clamp(8px, 0.8vw, 14px);
}

body[data-view="lobby"] .wallet-button b {
  width: clamp(24px, 1.9vw, 32px);
  height: clamp(24px, 1.9vw, 32px);
  margin-left: clamp(4px, 0.4vw, 7px);
  border-radius: 5px;
}

@media (max-width: 1450px), (max-height: 820px) {
  body[data-view="lobby"] .lobby-shell {
    width: min(calc(100vw - 8px), 177svh);
    max-height: calc(100svh - 8px);
    grid-template-columns: minmax(220px, 18.7%) minmax(0, 1fr) minmax(236px, 21.5%);
    grid-template-rows: minmax(0, 1fr) minmax(48px, 6.5%);
    gap: 8px;
    padding: 8px;
  }

  body[data-view="lobby"] .lobby-center {
    grid-template-rows: clamp(122px, 22.5%, 170px) minmax(0, 1fr);
    gap: 8px;
  }

  body[data-view="lobby"] .lobby-brand img {
    width: min(500px, 42vw);
    max-height: 86px;
  }

  body[data-view="lobby"] .lobby-copy h1 {
    font-size: clamp(20px, 2.05vw, 30px);
  }

  body[data-view="lobby"] .lobby-copy p {
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.22;
  }

  body[data-view="lobby"] .profile-side,
  body[data-view="lobby"] .table-card,
  body[data-view="lobby"] .premium-card,
  body[data-view="lobby"] .bonus-card {
    padding: 8px;
  }

  body[data-view="lobby"] .player-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body[data-view="lobby"] .avatar-ring {
    width: 72px;
  }

  body[data-view="lobby"] .player-meta h2 {
    font-size: 16px;
  }

  body[data-view="lobby"] .player-meta p,
  body[data-view="lobby"] .progress-card small,
  body[data-view="lobby"] .king-info small,
  body[data-view="lobby"] .king-info p,
  body[data-view="lobby"] .table-stats span,
  body[data-view="lobby"] .premium-card li,
  body[data-view="lobby"] .bonus-card p {
    font-size: 10px;
  }

  body[data-view="lobby"] .progress-card {
    padding: 8px;
  }

  body[data-view="lobby"] .progress-card h3 {
    font-size: 11px;
  }

  body[data-view="lobby"] .big-stat {
    font-size: 20px;
  }

  body[data-view="lobby"] .side-action,
  body[data-view="lobby"] .lobby-language-control {
    min-height: 38px;
    font-size: 11px;
  }

  body[data-view="lobby"] .table-card {
    grid-template-rows: auto minmax(84px, 1fr) auto auto auto;
    gap: 5px;
  }

  body[data-view="lobby"] .table-card h2 {
    font-size: 14px;
  }

  body[data-view="lobby"] .discipline-badge {
    width: 30px;
    font-size: 13px;
  }

  body[data-view="lobby"] .status-pill {
    padding: 4px 7px;
    font-size: 10px;
  }

  body[data-view="lobby"] .table-card-body {
    grid-template-columns: 1.32fr minmax(82px, 0.9fr);
    gap: 7px;
  }

  body[data-view="lobby"] .king-info strong {
    margin-bottom: 4px;
    font-size: 11px;
  }

  body[data-view="lobby"] .king-info b {
    font-size: 18px;
  }

  body[data-view="lobby"] .table-stats span {
    padding: 5px;
  }

  body[data-view="lobby"] .winner-rule {
    font-size: 10px;
  }

  body[data-view="lobby"] .gold-button,
  body[data-view="lobby"] .dark-button,
  body[data-view="lobby"] .blue-button {
    min-height: 30px;
    font-size: 10px;
  }

  body[data-view="lobby"] .premium-crown {
    height: 42px;
    margin-bottom: 0;
  }

  body[data-view="lobby"] .premium-card h2,
  body[data-view="lobby"] .bonus-card h2 {
    font-size: 15px;
  }

  body[data-view="lobby"] .price {
    margin: 5px 0 7px;
    font-size: 20px;
  }

  body[data-view="lobby"] .premium-card ul {
    gap: 4px;
  }

  body[data-view="lobby"] .premium-card .gold-button {
    min-height: 34px;
    font-size: 11px;
  }

  body[data-view="lobby"] .bonus-art {
    min-height: 72px;
  }

  body[data-view="lobby"] .bonus-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  body[data-view="lobby"] .bonus-row span,
  body[data-view="lobby"] .bonus-row button {
    min-height: 26px;
    font-size: 10px;
  }

  body[data-view="lobby"] .lobby-nav button {
    gap: 5px;
    font-size: 10px;
  }
}

@media (max-width: 980px) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  body[data-view="lobby"] .lobby-shell {
    width: calc(100vw - 6px);
    max-height: calc(100svh - 6px);
    aspect-ratio: auto;
    height: calc(100svh - 6px);
    grid-template-columns: minmax(126px, 16.2%) minmax(0, 1fr) minmax(166px, 20.2%);
    grid-template-rows: minmax(0, 1fr) 44px;
    gap: 6px;
    padding: 6px;
  }

  body[data-view="lobby"] .profile-side {
    gap: 6px;
    padding: 6px;
  }

  body[data-view="lobby"] .player-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    min-height: 76px;
  }

  body[data-view="lobby"] .avatar-ring {
    width: 58px;
  }

  body[data-view="lobby"] .player-meta h2 {
    margin-bottom: 3px;
    font-size: 14px;
  }

  body[data-view="lobby"] .player-meta p {
    margin-bottom: 6px;
    font-size: 10px;
  }

  body[data-view="lobby"] .xp-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  body[data-view="lobby"] .xp-row strong {
    font-size: 8px;
    text-align: right;
  }

  body[data-view="lobby"] .progress-track {
    height: 8px;
  }

  body[data-view="lobby"] .progress-card,
  body[data-view="lobby"] .side-action,
  body[data-view="lobby"] .lobby-language-control {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px;
    border-radius: 6px;
  }

  body[data-view="lobby"] .progress-card {
    padding: 6px;
  }

  body[data-view="lobby"] .progress-card:nth-child(3) {
    display: none;
  }

  body[data-view="lobby"] .progress-card h3 {
    margin-bottom: 2px;
    font-size: 9px;
  }

  body[data-view="lobby"] .big-stat {
    margin-bottom: 2px;
    font-size: 16px;
  }

  body[data-view="lobby"] .progress-card small {
    display: none;
    font-size: 8px;
    line-height: 1.2;
  }

  body[data-view="lobby"] .gold-icon {
    font-size: 14px;
  }

  body[data-view="lobby"] .side-action,
  body[data-view="lobby"] .lobby-language-control {
    min-height: 30px;
    padding: 0 6px;
    font-size: 9px;
  }

  body[data-view="lobby"] .lobby-language-control {
    grid-template-columns: 16px minmax(0, auto) minmax(0, 1fr);
  }

  body[data-view="lobby"] .lobby-language-control select {
    font-size: 8px;
  }

  body[data-view="lobby"] .lobby-center {
    grid-template-rows: 88px minmax(0, 1fr);
    gap: 5px;
  }

  body[data-view="lobby"] .lobby-brand img {
    width: min(360px, 43vw);
    max-height: 54px;
  }

  body[data-view="lobby"] .lobby-copy h1 {
    margin: 0 0 3px;
    font-size: 16px;
  }

  body[data-view="lobby"] .lobby-copy p {
    display: none;
  }

  body[data-view="lobby"] .tables-grid {
    grid-auto-columns: minmax(130px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  body[data-view="lobby"] .tables-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-view="lobby"] .table-card {
    grid-template-rows: auto auto auto auto auto;
    gap: 4px;
    min-width: 0;
    padding: 5px;
  }

  body[data-view="lobby"] .table-card-head {
    gap: 4px;
  }

  body[data-view="lobby"] .discipline-badge {
    width: 25px;
    font-size: 11px;
  }

  body[data-view="lobby"] .table-card h2 {
    font-size: 11px;
    white-space: normal;
  }

  body[data-view="lobby"] .status-pill {
    padding: 3px 5px;
    font-size: 8px;
  }

  body[data-view="lobby"] .table-card-body {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body[data-view="lobby"] .table-visual {
    aspect-ratio: 236 / 101;
    min-height: 0;
  }

  body[data-view="lobby"] .king-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 4px;
    align-items: baseline;
  }

  body[data-view="lobby"] .king-info small {
    font-size: 8px;
  }

  body[data-view="lobby"] .king-info small:nth-of-type(2),
  body[data-view="lobby"] .king-info p {
    display: none;
  }

  body[data-view="lobby"] .king-info strong {
    margin: 0;
    font-size: 9px;
  }

  body[data-view="lobby"] .king-info b {
    font-size: 14px;
  }

  body[data-view="lobby"] .table-stats span {
    gap: 3px;
    padding: 4px;
    font-size: 8px;
  }

  body[data-view="lobby"] .table-stats i {
    font-size: 12px;
  }

  body[data-view="lobby"] .winner-rule {
    font-size: 8px;
  }

  body[data-view="lobby"] .table-actions {
    gap: 4px;
  }

  body[data-view="lobby"] .gold-button,
  body[data-view="lobby"] .dark-button,
  body[data-view="lobby"] .blue-button {
    min-height: 26px;
    padding: 0 4px;
    font-size: 8px;
  }

  body[data-view="lobby"] .club-side {
    gap: 6px;
  }

  body[data-view="lobby"] .premium-card {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    padding: 7px;
  }

  body[data-view="lobby"] .premium-crown {
    display: block;
    width: 70px;
    height: 30px;
    margin: -3px auto 0;
  }

  body[data-view="lobby"] .premium-card h2 {
    font-size: 12px;
  }

  body[data-view="lobby"] .price {
    margin: 3px 0 5px;
    font-size: 15px;
  }

  body[data-view="lobby"] .premium-card ul {
    gap: 2px;
    margin-bottom: 5px;
  }

  body[data-view="lobby"] .premium-card li {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 4px;
    font-size: 7.5px;
    line-height: 1.08;
  }

  body[data-view="lobby"] .premium-card li:nth-child(n + 9) {
    display: none;
  }

  body[data-view="lobby"] .mini-mark {
    width: 8px;
    height: 8px;
  }

  body[data-view="lobby"] .premium-card .gold-button {
    min-height: 29px;
    font-size: 9px;
  }

  body[data-view="lobby"] .bonus-card {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 5px;
    padding: 7px;
  }

  body[data-view="lobby"] .bonus-art {
    display: block;
    min-height: 55px;
  }

  body[data-view="lobby"] .bonus-card h2 {
    font-size: 11px;
  }

  body[data-view="lobby"] .bonus-card p {
    display: none;
  }

  body[data-view="lobby"] .bonus-row {
    grid-template-columns: 1fr 0.82fr;
    gap: 4px;
  }

  body[data-view="lobby"] .bonus-row span,
  body[data-view="lobby"] .bonus-row button {
    min-height: 24px;
    padding: 0 4px;
    font-size: 8px;
  }

  body[data-view="lobby"] .lobby-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(70px, 0.9fr);
  }

  body[data-view="lobby"] .lobby-nav button {
    flex-direction: column;
    gap: 1px;
    font-size: 8px;
    line-height: 1;
  }

  body[data-view="lobby"] .lobby-nav button span {
    width: 16px;
    height: 16px;
  }

  body[data-view="lobby"] .lobby-nav .wallet-button {
    flex-direction: row;
    gap: 3px;
    padding: 0 4px;
    font-size: 8px;
  }

  body[data-view="lobby"] .wallet-button b {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  body[data-view="lobby"] .lobby-shell {
    grid-template-columns: 118px minmax(0, 1fr) 152px;
  }

  body[data-view="lobby"] .lobby-copy p {
    display: none;
  }

  body[data-view="lobby"] .tables-grid {
    grid-template-columns: none;
    grid-auto-columns: 132px;
  }

  body[data-view="lobby"] .premium-card li:nth-child(n + 7) {
    display: none;
  }
}

.game-screen {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 166, 58, 0.16), transparent 18rem),
    linear-gradient(135deg, #020303, #0a0b0b 56%, #030303);
}

.game-room {
  display: grid;
  height: 100svh;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(10px, 1.2vw, 18px);
}

.game-room-fullscreen {
  position: relative;
  display: block;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
}

.game-room-fullscreen .game-table-shell,
.game-room-fullscreen .game-engine-shell,
.game-room-fullscreen .engine-room-stage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.game-room-fullscreen .engine-room-stage {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.game-lobby-button {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 12;
  min-width: 84px;
  min-height: 42px;
  padding: 0 16px;
  color: var(--gold-light);
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid rgba(212, 166, 58, 0.5);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.game-room-fullscreen .visualizer-quality {
  right: calc(max(12px, env(safe-area-inset-right)) + 96px);
}

.game-topbar,
.game-hud,
.hud-card,
.hud-versus article,
.shot-state {
  border: 1px solid rgba(212, 166, 58, 0.46);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 236, 176, 0.07);
}

.game-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 62px;
  padding: 9px 12px;
  background: linear-gradient(180deg, rgba(14, 16, 16, 0.94), rgba(5, 6, 6, 0.94));
  border-radius: 14px;
}

.game-title {
  min-width: 0;
  text-align: center;
}

.game-title small {
  display: block;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-title h1 {
  margin: 2px 0 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(20px, 2vw, 34px);
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-connection {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #dcd5c9;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.game-connection span,
.shot-state span {
  width: 10px;
  height: 10px;
  background: #63c66d;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(99, 198, 109, 0.7);
}

.game-connection.is-offline span,
.shot-state.is-waiting span {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(212, 166, 58, 0.58);
}

.game-table-shell {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.34fr);
  gap: clamp(10px, 1vw, 16px);
}

.game-table {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 34px minmax(0, 1fr) 34px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(42, 18, 8, 0.96), rgba(90, 45, 18, 0.88), rgba(42, 18, 8, 0.96));
  border: 1px solid rgba(212, 166, 58, 0.5);
  border-radius: 20px;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.62),
    inset 0 0 0 10px rgba(19, 8, 3, 0.76);
}

.game-rail {
  background:
    linear-gradient(90deg, rgba(7, 4, 2, 0.26), transparent 20%, transparent 80%, rgba(7, 4, 2, 0.28)),
    linear-gradient(180deg, #5a2d12, #1d0b04);
}

.game-felt {
  position: relative;
  margin: 0 34px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.06), transparent 18%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #0e5a34, #06351f 74%);
  border: 16px solid rgba(4, 19, 12, 0.96);
  border-radius: 16px;
  box-shadow:
    inset 0 0 44px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(242, 199, 102, 0.22);
}

.game-felt::before,
.game-felt::after {
  position: absolute;
  content: "";
  width: 72px;
  height: 72px;
  background: radial-gradient(circle, #020202 0 34%, rgba(0, 0, 0, 0.14) 36% 60%, transparent 61%);
  border-radius: 50%;
}

.game-felt::before {
  top: -32px;
  left: -32px;
  box-shadow:
    calc(50vw - 90px) 0 0 0 #020202,
    0 calc(100vh - 190px) 0 0 #020202;
}

.game-felt::after {
  right: -32px;
  bottom: -32px;
  box-shadow: calc(-50vw + 90px) 0 0 0 #020202;
}

.ball {
  position: absolute;
  width: clamp(18px, 2.5vw, 34px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 34% 28%, #fff, #d9d0b7 64%, #5e5748);
  border-radius: 50%;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.45);
}

.rack-ball.b1 { top: 38%; left: 61%; background: radial-gradient(circle at 34% 28%, #fff, #e9d047 56%, #5e4c11); }
.rack-ball.b2 { top: 44%; left: 64%; background: radial-gradient(circle at 34% 28%, #fff, #0e1111 56%, #020202); }
.rack-ball.b3 { top: 50%; left: 61%; background: radial-gradient(circle at 34% 28%, #fff, #bd231e 56%, #4b0c09); }
.rack-ball.b4 { top: 44%; left: 58%; background: radial-gradient(circle at 34% 28%, #fff, #2a62c5 56%, #0a214c); }
.cue-ball { top: 54%; left: 30%; }

.cue {
  position: absolute;
  top: 57%;
  width: 42%;
  height: 8px;
  background: linear-gradient(90deg, #3a1a0c, #e9be66 32%, #6a3612);
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.42);
}

.cue-left {
  left: -4%;
  transform: rotate(-7deg);
}

.cue-right {
  right: -4%;
  transform: rotate(187deg);
}

.game-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: min(420px, 72%);
  gap: 6px;
  padding: 18px 22px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(212, 166, 58, 0.44);
  border-radius: 12px;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(5px);
}

.game-loader strong {
  color: var(--gold-light);
  font-size: clamp(20px, 2vw, 34px);
  text-transform: uppercase;
}

.game-hud {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  background: linear-gradient(180deg, rgba(14, 16, 16, 0.94), rgba(4, 5, 5, 0.94));
  border-radius: 16px;
}

.hud-card,
.hud-versus article,
.shot-state {
  padding: 12px;
  background: linear-gradient(180deg, rgba(22, 24, 24, 0.86), rgba(6, 7, 7, 0.88));
  border-radius: 10px;
}

.hud-card small,
.hud-versus small {
  color: #aaa198;
  font-weight: 800;
  text-transform: uppercase;
}

.hud-card strong,
.hud-versus strong {
  display: block;
  overflow: hidden;
  margin: 4px 0;
  color: #fff;
  font-size: clamp(17px, 1.3vw, 23px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-card p,
.hud-versus span,
.game-hint {
  margin: 0;
  color: #d6cec0;
  line-height: 1.28;
}

.hud-card.is-main strong {
  color: var(--gold-light);
}

.hud-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.game-queue {
  display: grid;
  max-height: 130px;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.game-queue li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  color: #dcd5c9;
}

.game-queue li.is-empty {
  display: block;
  color: #918a7d;
}

.game-queue li.is-you {
  color: var(--gold-light);
}

.game-queue b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #111;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-radius: 50%;
}

.game-queue span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-queue small {
  color: #918a7d;
}

.game-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.game-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8) brightness(0.62);
  opacity: 0.55;
}

.shot-state {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--gold-light);
  font-weight: 900;
}

.game-engine-shell {
  grid-template-columns: minmax(0, 1fr);
}

.engine-room-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 5, 5, 0.3), rgba(4, 5, 5, 0.82)),
    radial-gradient(circle at 48% 28%, rgba(14, 90, 52, 0.34), transparent 32rem),
    linear-gradient(135deg, rgba(5, 5, 5, 0.96), rgba(15, 17, 17, 0.94));
  border: 1px solid rgba(212, 166, 58, 0.52);
  border-radius: 20px;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 235, 180, 0.08);
}

.engine-room-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.54), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.62));
  opacity: 0.42;
  pointer-events: none;
}

.game-shot-alert {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  z-index: 120;
  display: grid;
  width: min(620px, calc(100% - 36px));
  gap: 5px;
  padding: 16px 20px;
  color: #f8f2e5;
  background: linear-gradient(180deg, rgba(35, 18, 14, 0.97), rgba(13, 13, 13, 0.97));
  border: 1px solid rgba(228, 174, 66, 0.78);
  border-left: 4px solid #d95d43;
  border-radius: 12px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.game-shot-alert[hidden] {
  display: none;
}

.game-shot-alert.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.game-shot-alert strong {
  color: #f2cf72;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.02em;
}

.game-shot-alert span {
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.4;
}

.kott-visualizer-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(14, 90, 52, 0.24), transparent 38rem),
    linear-gradient(180deg, rgba(2, 3, 3, 0.28), rgba(2, 3, 3, 0.78));
}

html.has-soft-fullscreen,
html.has-soft-fullscreen body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.kott-game-gesture-lock,
html.kott-game-gesture-lock body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

html.kott-game-gesture-lock body {
  position: fixed;
  inset: 0;
}

.game-room-fullscreen,
.engine-room-stage,
.kott-visualizer-host,
.pool8-render-canvas,
.kott-shot-hud-mobile,
.kott-shot-hud-mobile button,
.kott-shot-hud-mobile input {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.game-screen,
.game-screen * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

html.has-soft-fullscreen body {
  position: fixed;
  inset: 0;
}

.engine-room-stage:fullscreen,
.engine-room-stage:-webkit-full-screen,
.engine-room-stage.is-soft-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  background: #050505;
  border: 0;
  border-radius: 0;
}

.engine-room-stage:fullscreen .kott-visualizer-host,
.engine-room-stage:-webkit-full-screen .kott-visualizer-host,
.engine-room-stage.is-soft-fullscreen .kott-visualizer-host {
  border-radius: 0;
}

.engine-room-stage:fullscreen .engine-room-bar,
.engine-room-stage:-webkit-full-screen .engine-room-bar,
.engine-room-stage.is-soft-fullscreen .engine-room-bar {
  top: 12px;
  left: 12px;
}

html.has-soft-fullscreen .game-room,
html.has-soft-fullscreen .game-table-shell,
html.has-soft-fullscreen .game-engine-shell {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
}

html.has-soft-fullscreen .game-topbar,
html.has-soft-fullscreen .game-room > :not(.game-table-shell) {
  display: none;
}

html.has-soft-fullscreen .engine-room-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
}

.pool8-render-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.visualizer-loader,
.visualizer-error,
.visualizer-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  min-width: min(420px, calc(100% - 48px));
  gap: 6px;
  padding: 18px 22px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(212, 166, 58, 0.44);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}

.visualizer-loader.is-ready {
  border-color: rgba(99, 198, 109, 0.54);
}

.visualizer-loader strong,
.visualizer-error strong,
.visualizer-placeholder strong {
  color: var(--gold-light);
  font-size: clamp(20px, 2vw, 34px);
  text-transform: uppercase;
}

.visualizer-loader span,
.visualizer-error span,
.visualizer-placeholder span {
  color: #d6cec0;
  line-height: 1.3;
}

.visualizer-error strong {
  color: #ff8c7d;
}

.visualizer-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  color: #f4f0e8;
  background: rgba(5, 5, 5, 0.68);
  border: 1px solid rgba(212, 166, 58, 0.38);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.visualizer-badge strong {
  color: var(--gold-light);
  font-size: 14px;
  text-transform: uppercase;
}

.visualizer-badge span {
  color: #cfc7ba;
  font-size: 12px;
  font-weight: 800;
}

.visualizer-quality {
  position: absolute;
  top: 92px;
  right: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  color: #f4f0e8;
  background: rgba(5, 5, 5, 0.72);
  border: 1px solid rgba(212, 166, 58, 0.38);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.visualizer-quality span {
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.visualizer-quality select {
  min-height: 30px;
  padding: 0 26px 0 10px;
  color: #f4f0e8;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  background:
    linear-gradient(180deg, rgba(33, 35, 33, 0.98), rgba(8, 9, 9, 0.98)),
    #0b0b0b;
  border: 1px solid rgba(212, 166, 58, 0.34);
  border-radius: 10px;
  outline: none;
}

.visualizer-quality select:focus {
  border-color: rgba(242, 199, 102, 0.82);
  box-shadow: 0 0 0 3px rgba(212, 166, 58, 0.14);
}

.match-end-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 199, 102, 0.18), transparent 36%),
    rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.match-end-overlay[hidden] {
  display: none;
}

.match-end-card {
  width: min(520px, 100%);
  padding: 22px;
  color: #f4f0e8;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(16, 17, 16, 0.96), rgba(4, 5, 5, 0.96));
  border: 1px solid rgba(242, 199, 102, 0.62);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.66),
    0 0 44px rgba(242, 199, 102, 0.12);
}

.match-end-card small {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.match-end-card h2 {
  margin: 6px 0 14px;
  color: #fff7df;
  font-size: 30px;
  line-height: 1.05;
}

.match-end-card.is-loss h2 {
  color: #ffd8ce;
}

.match-end-awards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.match-end-awards span {
  display: grid;
  gap: 2px;
  padding: 10px 6px;
  color: #d8d0c2;
  font-size: 11px;
  font-weight: 850;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(242, 199, 102, 0.22);
  border-radius: 10px;
}

.match-end-awards b {
  color: #ffe8a6;
  font-size: 19px;
}

.match-end-awards .is-stake-result {
  border-color: rgba(242, 199, 102, 0.58);
  background: linear-gradient(180deg, rgba(61, 48, 16, 0.68), rgba(8, 9, 8, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 236, 172, 0.12);
}

.match-end-card.is-win .match-end-awards .is-stake-result b {
  color: #bff3a6;
}

.match-end-card.is-loss .match-end-awards .is-stake-result b {
  color: #ffb8a8;
}

.match-end-card p {
  margin: 0 0 12px;
  color: #d8d0c2;
  font-size: 13px;
  line-height: 1.35;
}

.match-end-rematch {
  display: block;
  margin-bottom: 12px;
  color: #fff0bc;
  font-size: 14px;
}

.match-end-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.match-end-actions button {
  min-height: 38px;
  padding: 0 16px;
  color: #0b0b0b;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(180deg, #ffe8a6, #c9962e);
  border: 1px solid rgba(255, 238, 180, 0.72);
  border-radius: 10px;
}

.match-end-actions button + button {
  color: #f4f0e8;
  background: linear-gradient(180deg, rgba(34, 35, 34, 0.96), rgba(8, 8, 8, 0.96));
  border-color: rgba(244, 240, 232, 0.16);
}

.match-end-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.visualizer-controls {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px;
  background: rgba(5, 5, 5, 0.64);
  border: 1px solid rgba(212, 166, 58, 0.34);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.visualizer-controls button {
  min-width: 48px;
  height: 34px;
  padding: 0 12px;
  color: #f4f0e8;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(31, 33, 33, 0.92), rgba(7, 8, 8, 0.94));
  border: 1px solid rgba(244, 240, 232, 0.16);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.visualizer-controls button:hover,
.visualizer-controls button:focus-visible {
  color: #111;
  background: linear-gradient(180deg, #f4d37e, #b88622);
  border-color: rgba(242, 199, 102, 0.82);
  outline: none;
}

.visualizer-controls button:disabled {
  cursor: wait;
  filter: grayscale(0.5) brightness(0.68);
}

.visualizer-controls .is-primary {
  color: #090909;
  background: linear-gradient(180deg, #f2c766, #b88622);
  border-color: rgba(242, 199, 102, 0.72);
}

.kott-shot-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.kott-shot-hud button,
.kott-shot-hud input {
  pointer-events: auto;
}

.kott-shot-hud-desktop {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: grid;
  grid-template-columns: 178px 205px 104px 402px;
  gap: 6px;
  align-items: end;
  width: min(955px, calc(100% - 220px));
  min-height: 58px;
  padding: 6px 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.92), rgba(4, 4, 4, 0.9));
  border: 1px solid rgba(212, 166, 58, 0.44);
  border-radius: 18px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  overflow: visible;
  pointer-events: auto;
}

.shot-panel {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 45px;
  padding: 6px 8px;
  color: #f4f0e8;
  background: linear-gradient(180deg, rgba(23, 24, 23, 0.76), rgba(5, 5, 5, 0.72));
  border: 1px solid rgba(242, 199, 102, 0.18);
  border-radius: 12px;
}

.shot-panel-title,
.spin-title,
.mobile-cue-tilt span,
.mobile-power-rail span,
.mobile-spin-label {
  color: #e0b84e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cue-tilt-readout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;
  align-items: center;
}

.cue-tilt-readout span {
  color: #c7c0b4;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.cue-tilt-line {
  position: relative;
  height: 3px;
  background: linear-gradient(90deg, rgba(212, 166, 58, 0.18), rgba(242, 199, 102, 0.7), rgba(212, 166, 58, 0.18));
  border-radius: 99px;
}

.cue-tilt-line::before,
.cue-tilt-line::after {
  position: absolute;
  top: -5px;
  width: 1px;
  height: 14px;
  content: "";
  background: rgba(242, 199, 102, 0.42);
}

.cue-tilt-line::before {
  left: 15%;
}

.cue-tilt-line::after {
  right: 15%;
}

.cue-tilt-line i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #f4d37e, #8a5d1d);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(242, 199, 102, 0.55);
  transform: translate(-50%, -50%);
}

.shot-panel-elevation strong,
.mobile-cue-tilt strong {
  color: #f4f0e8;
  font-size: 11px;
  text-align: center;
}

.shot-panel-power {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.shot-panel-power .shot-panel-title {
  grid-column: 1 / -1;
}

.shot-panel-power strong {
  color: #f2c766;
  font-size: 16px;
  font-weight: 900;
}

.power-row {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: 5px;
  align-items: center;
}

.power-row button,
.shot-panel-actions button,
.strike-button,
.mobile-menu-sheet button,
.mobile-icon-button,
.mobile-strike-button {
  color: #f4f0e8;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(31, 33, 33, 0.96), rgba(7, 8, 8, 0.96));
  border: 1px solid rgba(242, 199, 102, 0.24);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.36);
}

.power-row button,
.mobile-menu-sheet button {
  width: 24px;
  height: 24px;
  color: #e0b84e;
  font-size: 18px;
}

.power-track {
  position: relative;
  height: 18px;
  cursor: ew-resize;
}

.power-track i {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 24px;
  background: radial-gradient(circle at 35% 20%, #fff2c7, #b88622 72%);
  border: 1px solid rgba(255, 238, 180, 0.72);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(242, 199, 102, 0.55);
  transform: translate(-50%, -50%);
}

.power-bars {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 2px;
  height: 18px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
}

.power-bars span {
  background: rgba(199, 192, 180, 0.17);
  border-radius: 3px;
}

.power-bars span.is-lit {
  background: linear-gradient(180deg, #ffe39b, #b88622);
  box-shadow: 0 0 12px rgba(242, 199, 102, 0.5);
}

.spin-module {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  margin-top: -30px;
  color: #f4f0e8;
  overflow: visible;
  pointer-events: auto;
}

.spin-ball,
.mobile-spin-ball {
  position: relative;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  padding: 0;
  appearance: none;
  background: transparent url("./assets/hud/v3/contact-point/base/normal.png") center / 138% 138% no-repeat;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.spin-ball::before,
.spin-ball::after,
.mobile-spin-ball::before,
.mobile-spin-ball::after {
  display: none;
}

.spin-ball::before,
.mobile-spin-ball::before {
  top: 50%;
  left: 12%;
  width: 76%;
  height: 1px;
}

.spin-ball::after,
.mobile-spin-ball::after {
  top: 12%;
  left: 50%;
  width: 1px;
  height: 76%;
}

.spin-ball [data-spin-dot],
.mobile-spin-ball [data-spin-dot] {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle at 32% 28%, #ffb2a7, #d92720 70%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(201, 69, 54, 0.54);
  transform: translate(-50%, -50%);
}

.kott-shot-hud-mobile .mobile-spin-ball [data-spin-dot] {
  width: 9px;
  height: 9px;
}

.spin-ball [data-spin-limit],
.mobile-spin-ball [data-spin-limit] {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: var(--kott-spin-limit-size, 72%);
  height: var(--kott-spin-limit-size, 72%);
  pointer-events: none;
  background: rgba(7, 15, 11, 0.04);
  border: 1px solid rgba(242, 199, 102, 0.78);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(5, 8, 6, 0.5),
    inset 0 0 8px rgba(242, 199, 102, 0.12),
    0 0 7px rgba(242, 199, 102, 0.16);
  transform: translate(-50%, -50%);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.strike-button {
  min-width: 98px;
  height: 30px;
  color: #090909;
  font-size: 14px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f2d986, #b88622);
  border-color: rgba(242, 199, 102, 0.7);
}

.shot-panel-actions {
  grid-template-columns: repeat(7, minmax(48px, 1fr));
  gap: 4px;
  padding: 6px;
}

.shot-panel-actions button {
  display: grid;
  gap: 3px;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 4px 2px;
}

.shot-panel-actions button strong {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #e0b84e;
  font-size: 12px;
  border: 1px solid rgba(242, 199, 102, 0.24);
  border-radius: 10px;
}

.shot-panel-actions button span {
  max-width: 100%;
  color: #c7c0b4;
  font-size: 7px;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}

.kott-shot-hud button:hover,
.kott-shot-hud button:focus-visible {
  color: #090909;
  background: linear-gradient(180deg, #f4d37e, #b88622);
  border-color: rgba(242, 199, 102, 0.78);
  outline: none;
}

.kott-shot-hud button:disabled {
  cursor: wait;
  filter: grayscale(0.4) brightness(0.72);
}

.kott-shot-hud button.is-active {
  color: #090909;
  background: linear-gradient(180deg, #f4d37e, #b88622);
  border-color: rgba(242, 199, 102, 0.82);
  box-shadow: 0 0 18px rgba(242, 199, 102, 0.35);
}

.kott-shot-hud .spin-ball:hover,
.kott-shot-hud .spin-ball:active,
.kott-shot-hud .spin-ball:focus-visible,
.kott-shot-hud .mobile-spin-ball:hover,
.kott-shot-hud .mobile-spin-ball:active,
.kott-shot-hud .mobile-spin-ball:focus-visible {
  color: inherit;
  background: transparent url("./assets/hud/v3/contact-point/base/normal.png") center / 138% 138% no-repeat;
  border: 0;
  outline: none;
}

.kott-shot-hud-mobile {
  display: none;
}

.kott-visualizer-host[data-viewer-role="spectator"] .kott-shot-hud,
.kott-visualizer-host[data-viewer-role="spectator"] .kott-fine-aim-scrubber,
.kott-visualizer-host[data-viewer-role="spectator"] .ball-placement-confirm,
.kott-visualizer-host[data-viewer-role="spectator"] .ball-in-hand-hint {
  display: none !important;
}

.kott-fine-aim-scrubber {
  display: none;
}

.visualizer-engine-status {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 8px;
  align-items: center;
  padding: 9px 12px;
  color: #f4f0e8;
  background: rgba(5, 5, 5, 0.68);
  border: 1px solid rgba(212, 166, 58, 0.38);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.visualizer-engine-status span {
  width: 9px;
  height: 9px;
  background: #63c66d;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(99, 198, 109, 0.78);
}

.visualizer-engine-status strong {
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.visualizer-engine-status small {
  grid-column: 2;
  color: #cfc7ba;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.visualizer-engine-status.has-error span {
  background: #c94536;
  box-shadow: 0 0 16px rgba(201, 69, 54, 0.72);
}

.ball-in-hand-hint {
  position: absolute;
  left: 50%;
  bottom: 84px;
  z-index: 6;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: min(640px, calc(100% - 40px));
  padding: 10px 14px;
  color: #f4f0e8;
  background: rgba(5, 5, 5, 0.76);
  border: 1px solid rgba(212, 166, 58, 0.5);
  border-radius: 999px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.ball-in-hand-hint strong {
  color: var(--gold-light);
  font-size: 13px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ball-in-hand-hint span {
  color: #d9d0c1;
  font-size: 12px;
  font-weight: 800;
}

.ball-in-hand-hint.is-invalid {
  border-color: rgba(201, 69, 54, 0.9);
  box-shadow: 0 0 26px rgba(201, 69, 54, 0.42);
}

.ball-placement-confirm {
  position: absolute;
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #151008;
  background: linear-gradient(180deg, #f4d56f 0%, #d7a936 55%, #a87516 100%);
  border: 2px solid rgba(255, 239, 174, 0.92);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48), 0 0 0 4px rgba(20, 15, 6, 0.62);
  font-size: 27px;
  font-weight: 1000;
  line-height: 1;
  transform: translate(34%, -116%);
  cursor: pointer;
  touch-action: manipulation;
}

.ball-placement-confirm:hover,
.ball-placement-confirm:focus-visible {
  filter: brightness(1.08);
  outline: 3px solid rgba(255, 232, 151, 0.5);
  outline-offset: 3px;
}

.ball-placement-confirm:active {
  transform: translate(34%, -112%) scale(0.96);
}

.kott-visualizer-host.is-ball-in-hand .pool8-render-canvas {
  cursor: grab;
}

.kott-visualizer-host.is-ball-in-hand .pool8-render-canvas:active {
  cursor: grabbing;
}

.kott-visualizer-host.is-pyramid-cue-selection .pool8-render-canvas {
  cursor: pointer;
}

.kott-visualizer-host.is-practice-hand .pool8-render-canvas {
  cursor: grab;
}

.kott-visualizer-host.is-practice-hand .pool8-render-canvas:active {
  cursor: grabbing;
}

.practice-hand-hint {
  border-color: rgba(242, 199, 102, 0.78);
}

.pyramid-cue-selection-hint {
  bottom: 126px;
  border-color: rgba(212, 166, 58, 0.72);
}

.engine-room-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: min(720px, calc(100% - 220px));
  padding: 10px 13px;
  color: #f4f0e8;
  background: rgba(5, 5, 5, 0.72);
  border: 1px solid rgba(212, 166, 58, 0.38);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
}

.engine-room-bar strong,
.engine-room-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-room-bar small {
  color: #bdb5aa;
}

.engine-room-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(212, 166, 58, 0.6);
}

.engine-room-dot.is-live {
  background: #63c66d;
  box-shadow: 0 0 16px rgba(99, 198, 109, 0.8);
}

.engine-bridge-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: min(560px, calc(100% - 72px));
  gap: 12px;
  justify-items: center;
  padding: clamp(22px, 3.5vw, 38px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(16, 18, 18, 0.9), rgba(4, 5, 5, 0.92)),
    radial-gradient(circle at 50% 0, rgba(212, 166, 58, 0.16), transparent 18rem);
  border: 1px solid rgba(212, 166, 58, 0.54);
  border-radius: 18px;
  box-shadow:
    0 30px 76px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 239, 192, 0.08);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
}

.engine-mark {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  color: rgba(255, 255, 255, 0.86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 900;
  background: radial-gradient(circle at 34% 28%, #222, #030303 68%);
  border: 2px solid rgba(212, 166, 58, 0.64);
  border-radius: 50%;
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.44),
    0 0 30px rgba(212, 166, 58, 0.14);
}

.engine-bridge-panel small {
  color: var(--gold-light);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.engine-bridge-panel h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1;
  text-transform: uppercase;
}

.engine-bridge-panel p {
  max-width: 44rem;
  margin: 0;
  color: #cfc7ba;
  line-height: 1.5;
}

.engine-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.engine-bridge-actions span {
  color: var(--gold-light);
  font-weight: 900;
}

.room-overlay-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  min-height: 44px;
  padding: 0 16px;
  color: #111;
  font-weight: 950;
  background: linear-gradient(180deg, #f2c766, #b88622);
  border: 1px solid rgba(255, 238, 180, 0.75);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.room-overlay-toggle.is-collapsed {
  color: var(--gold-light);
  background: rgba(5, 5, 5, 0.76);
}

.room-match-overlay {
  position: absolute;
  top: 72px;
  right: 16px;
  bottom: 72px;
  z-index: 4;
  display: grid;
  width: min(390px, calc(100% - 32px));
  min-height: 0;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  background: linear-gradient(180deg, rgba(13, 15, 15, 0.88), rgba(4, 5, 5, 0.9));
  border: 1px solid rgba(212, 166, 58, 0.48);
  border-radius: 16px;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.62);
  transform: translateX(0);
  transition: transform 180ms ease, opacity 180ms ease;
  backdrop-filter: blur(12px);
}

.room-match-overlay.is-collapsed {
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 24px));
}

.room-match-overlay header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.room-match-overlay header small,
.overlay-queue h3,
.overlay-chat h3 {
  color: #aaa198;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.room-match-overlay header strong {
  display: block;
  margin-top: 2px;
  color: var(--gold-light);
  font-size: 20px;
}

.room-match-overlay header button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 166, 58, 0.28);
  border-radius: 999px;
}

.overlay-status,
.overlay-versus article,
.overlay-queue,
.overlay-chat,
.overlay-note {
  padding: 12px;
  background: linear-gradient(180deg, rgba(22, 24, 24, 0.78), rgba(6, 7, 7, 0.82));
  border: 1px solid rgba(244, 240, 232, 0.08);
  border-radius: 12px;
}

.overlay-status {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.overlay-status span,
.overlay-note {
  color: #d6cec0;
  line-height: 1.35;
}

.overlay-status b {
  color: var(--gold-light);
}

.overlay-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.overlay-versus small {
  color: #aaa198;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.overlay-versus strong {
  display: block;
  overflow: hidden;
  margin: 4px 0;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-versus span {
  color: #cfc7ba;
}

.overlay-queue h3,
.overlay-chat h3 {
  margin: 0 0 8px;
}

.chat-lines {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.chat-lines p {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  color: #cfc7ba;
}

.chat-lines b {
  overflow: hidden;
  color: var(--gold-light);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-chat input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(5, 5, 5, 0.58);
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 10px;
  outline: none;
}

@media (max-width: 980px) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  .match-end-overlay {
    padding: 10px;
  }

  .match-end-card {
    width: min(420px, 92%);
    padding: 14px;
    border-radius: 12px;
  }

  .match-end-card h2 {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .match-end-awards {
    gap: 5px;
    margin-bottom: 8px;
  }

  .match-end-awards span {
    padding: 6px 4px;
    font-size: 9px;
  }

  .match-end-awards b {
    font-size: 15px;
  }

  .match-end-card p {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .match-end-rematch {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .match-end-actions button {
    min-height: 30px;
    padding: 0 11px;
    font-size: 11px;
  }

  .game-room {
    gap: 8px;
    padding: 8px;
  }

  .game-topbar {
    min-height: 46px;
    padding: 6px 8px;
  }

  .game-title small,
  .game-connection,
  .hud-card small,
  .hud-versus small,
  .hud-card p,
  .hud-versus span,
  .game-hint,
  .game-queue li,
  .shot-state,
  .game-actions button {
    font-size: 10px;
  }

  .game-title h1 {
    font-size: 17px;
  }

  .game-table-shell {
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 8px;
  }

  .game-engine-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .engine-room-bar {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 150px);
    padding: 7px 10px;
    font-size: 10px;
  }

  .engine-room-bar small {
    display: none;
  }

  .visualizer-loader,
  .visualizer-error,
  .visualizer-placeholder {
    min-width: min(340px, calc(100% - 250px));
    padding: 12px 14px;
  }

  .visualizer-loader strong,
  .visualizer-error strong,
  .visualizer-placeholder strong {
    font-size: 16px;
  }

  .visualizer-loader span,
  .visualizer-error span,
  .visualizer-placeholder span,
  .visualizer-badge span {
    font-size: 10px;
  }

  .visualizer-badge {
    display: none;
  }

  .visualizer-badge strong {
    font-size: 11px;
  }

  .visualizer-quality {
    top: max(8px, env(safe-area-inset-top));
    right: calc(max(8px, env(safe-area-inset-right)) + 118px);
    gap: 5px;
    padding: 6px 7px;
    z-index: 7;
  }

  .visualizer-quality span {
    display: none;
  }

  .visualizer-quality select {
    min-height: 26px;
    padding: 0 18px 0 7px;
    font-size: 10px;
    border-radius: 8px;
  }

  .visualizer-controls {
    left: 50%;
    bottom: 8px;
    gap: 5px;
    padding: 5px;
  }

  .visualizer-controls button {
    min-width: 38px;
    height: 28px;
    padding: 0 8px;
    font-size: 10px;
    border-radius: 8px;
  }

  .kott-shot-hud-desktop {
    display: none;
  }

  .game-shot-alert {
    top: max(8px, env(safe-area-inset-top));
    width: min(560px, calc(100% - 20px));
    padding: 10px 14px;
    border-radius: 9px;
  }

  .kott-shot-hud-mobile {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    pointer-events: none;
  }

  .mobile-cue-tilt,
  .mobile-power-rail,
  .mobile-spin-pad,
  .mobile-menu-sheet,
  .mobile-top-actions {
    position: absolute;
    display: grid;
    color: #f4f0e8;
    background: linear-gradient(180deg, rgba(16, 17, 17, 0.84), rgba(5, 5, 5, 0.78));
    border: 1px solid rgba(212, 166, 58, 0.3);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(12px);
    pointer-events: auto;
  }

  .mobile-top-actions {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    grid-template-columns: repeat(3, 44px);
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
  }

  .mobile-icon-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 42px;
    padding: 0;
    color: #f2c766;
    font-size: 22px;
    line-height: 1;
    border-radius: 14px;
  }

  .mobile-spin-pad {
    left: max(10px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    justify-items: center;
    gap: 7px;
    width: 126px;
    padding: 10px 9px 9px;
    border-radius: 24px;
  }

  .mobile-spin-pad span {
    font-size: 9px;
  }

  .mobile-cue-tilt {
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    grid-template-columns: auto minmax(120px, 30vw) 38px;
    gap: 8px;
    align-items: center;
    min-width: 230px;
    padding: 9px 11px;
    transform: translateX(-50%);
  }

  .mobile-cue-tilt input {
    width: 100%;
    accent-color: #d4a63a;
  }

  .mobile-power-rail {
    top: 50%;
    right: calc(max(10px, env(safe-area-inset-right)) + 46px);
    width: 58px;
    height: min(250px, calc(100% - 188px));
    justify-items: center;
    align-content: center;
    gap: 7px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    transform: translateY(-50%);
  }

  .mobile-power-rail input {
    width: min(168px, calc(100vh - 260px));
    height: 42px;
    accent-color: #d4a63a;
    transform: rotate(-90deg);
    margin: 66px 0;
  }

  .mobile-power-rail strong {
    color: #f2c766;
    font-size: 15px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.74);
  }

  .mobile-power-rail span {
    color: #f2c766;
    font-size: 11px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.74);
  }

  .kott-fine-aim-scrubber {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: calc(max(10px, env(safe-area-inset-left)) + 41px);
    display: block;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .mobile-menu-sheet {
    top: calc(max(8px, env(safe-area-inset-top)) + 62px);
    right: max(8px, env(safe-area-inset-right));
    grid-template-columns: repeat(3, 48px);
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 20px;
  }

  .mobile-menu-sheet[hidden] {
    display: none;
  }

  .mobile-menu-sheet button {
    display: grid;
    place-items: center;
    gap: 3px;
    width: 48px;
    height: 46px;
    padding: 3px 2px;
    color: #e0b84e;
    font-size: 8px;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .mobile-menu-sheet button strong {
    font-size: 13px;
  }

  .mobile-menu-sheet button span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .mobile-spin-ball {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
    border-width: 3px;
  }

  .mobile-spin-ball span {
    width: 13px;
    height: 13px;
  }

  .mobile-strike-button {
    position: absolute;
    right: calc(max(14px, env(safe-area-inset-right)) + 86px);
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 88px;
    height: 88px;
    color: #f2c766;
    font-size: 16px;
    text-transform: uppercase;
    background: radial-gradient(circle at 50% 28%, rgba(242, 199, 102, 0.18), rgba(5, 5, 5, 0.96) 68%);
    border: 3px solid rgba(212, 166, 58, 0.48);
    border-radius: 50%;
    pointer-events: auto;
  }

  .mobile-power-rail input,
  .mobile-cue-tilt input {
    height: 34px;
  }

  .mobile-power-rail input::-webkit-slider-thumb,
  .mobile-cue-tilt input::-webkit-slider-thumb {
    width: 34px;
    height: 34px;
    border-radius: 999px;
  }

  .mobile-power-rail input::-moz-range-thumb,
  .mobile-cue-tilt input::-moz-range-thumb {
    width: 34px;
    height: 34px;
    border-radius: 999px;
  }

  .visualizer-engine-status {
    top: 8px;
    right: calc(max(8px, env(safe-area-inset-right)) + 112px);
    z-index: 7;
    max-width: 180px;
    padding: 7px 9px;
  }

  .visualizer-engine-status strong {
    font-size: 10px;
  }

  .visualizer-engine-status small {
    max-width: 130px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .engine-bridge-panel {
    width: min(430px, calc(100% - 300px));
    gap: 7px;
    padding: 14px;
  }

  .engine-mark {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .engine-bridge-panel h2 {
    font-size: 22px;
  }

  .engine-bridge-panel p,
  .engine-bridge-actions span {
    font-size: 10px;
  }

  .room-match-overlay {
    display: none;
  }

  .room-overlay-toggle {
    display: none;
  }

  .overlay-status,
  .overlay-versus article,
  .overlay-queue,
  .overlay-chat,
  .overlay-note {
    padding: 8px;
  }

  .overlay-chat {
    display: none;
  }

  .ball-in-hand-hint {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    bottom: auto;
    max-width: min(360px, calc(100% - 280px));
    padding: 7px 10px;
    z-index: 7;
  }

  .ball-in-hand-hint strong {
    font-size: 10px;
  }

  .ball-in-hand-hint span {
    display: none;
  }

  .ball-placement-confirm {
    width: 44px;
    height: 44px;
    font-size: 24px;
    transform: translate(28%, -112%);
  }

  .game-table {
    grid-template-rows: 22px minmax(0, 1fr) 22px;
    border-radius: 14px;
  }

  .game-felt {
    margin: 0 22px;
    border-width: 10px;
  }

  .game-loader {
    min-width: 56%;
    padding: 10px 12px;
  }

  .game-loader strong {
    font-size: 15px;
  }

  .game-hud {
    gap: 7px;
    padding: 8px;
  }

  .hud-card,
  .hud-versus article,
  .shot-state {
    padding: 7px;
  }

  .hud-card strong,
  .hud-versus strong {
    font-size: 13px;
  }

  .game-queue {
    max-height: 54px;
  }
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 700px) and (orientation: portrait) {
  .match-end-overlay {
    padding: 10px;
  }

  .match-end-card {
    padding: 14px;
    border-radius: 12px;
  }

  .match-end-card h2 {
    font-size: 22px;
  }

  .match-end-awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-room {
    min-height: 100svh;
    padding: 0;
  }

  .game-topbar,
  .visualizer-badge,
  .room-match-overlay,
  .room-overlay-toggle {
    display: none;
  }

  .game-table-shell,
  .game-engine-shell,
  .engine-room-stage {
    display: block;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    border-radius: 0;
  }

  .kott-shot-hud-desktop {
    display: none;
  }

  .kott-shot-hud-mobile {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    pointer-events: none;
  }

  .mobile-cue-tilt,
  .mobile-power-rail,
  .mobile-spin-pad,
  .mobile-menu-sheet,
  .mobile-top-actions {
    position: absolute;
    display: grid;
    color: #f4f0e8;
    background: linear-gradient(180deg, rgba(16, 17, 17, 0.86), rgba(5, 5, 5, 0.82));
    border: 1px solid rgba(212, 166, 58, 0.3);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(12px);
    pointer-events: auto;
  }

  .engine-room-bar {
    display: none;
  }

  .visualizer-engine-status {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    left: 8px;
    z-index: 7;
    max-width: none;
    padding: 8px 10px;
  }

  .visualizer-engine-status strong {
    font-size: 12px;
  }

  .visualizer-engine-status small {
    max-width: none;
    font-size: 10px;
  }

  .visualizer-quality {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    z-index: 7;
    gap: 6px;
    padding: 7px 8px;
  }

  .visualizer-quality span {
    font-size: 10px;
  }

  .visualizer-quality select {
    min-height: 30px;
    max-width: 126px;
    font-size: 12px;
  }

  .mobile-top-actions {
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    grid-template-columns: repeat(2, 46px);
    gap: 8px;
    padding: 6px;
  }

  .mobile-icon-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 44px;
    padding: 0;
    color: #f2c766;
    font-size: 23px;
    line-height: 1;
    border-radius: 14px;
  }

  .mobile-menu-sheet {
    top: calc(max(8px, env(safe-area-inset-top)) + 62px);
    left: 8px;
    grid-template-columns: repeat(3, 52px);
    gap: 7px;
    padding: 8px;
  }

  .mobile-menu-sheet[hidden] {
    display: none;
  }

  .mobile-menu-sheet button {
    display: grid;
    place-items: center;
    width: 52px;
    height: 48px;
    padding: 4px 2px;
    color: #e0b84e;
    font-size: 8px;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .mobile-spin-pad {
    left: 8px;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 82px);
    justify-items: center;
    gap: 6px;
    width: 122px;
    padding: 9px 8px;
  }

  .mobile-spin-pad span,
  .mobile-power-rail span,
  .mobile-cue-tilt span {
    font-size: 9px;
  }

  .mobile-spin-ball {
    width: 88px;
    height: 88px;
    min-width: 88px;
    min-height: 88px;
  }

  .mobile-spin-ball span {
    width: 14px;
    height: 14px;
  }

  .mobile-power-rail {
    right: 108px;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px);
    left: 138px;
    grid-template-columns: auto auto minmax(84px, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
  }

  .mobile-power-rail input {
    width: 100%;
    height: 34px;
    margin: 0;
    accent-color: #d4a63a;
    transform: none;
  }

  .mobile-power-rail strong {
    color: #f2c766;
    font-size: 13px;
  }

  .mobile-cue-tilt {
    right: 8px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 8px;
    grid-template-columns: auto minmax(110px, 1fr) 42px;
    gap: 8px;
    align-items: center;
    padding: 9px 11px;
  }

  .mobile-cue-tilt input {
    width: 100%;
    height: 34px;
    accent-color: #d4a63a;
  }

  .mobile-cue-tilt strong {
    font-size: 12px;
  }

  .mobile-strike-button {
    position: absolute;
    right: 8px;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px);
    width: 78px;
    height: 78px;
    color: #f2c766;
    font-size: 14px;
    text-transform: uppercase;
    background: radial-gradient(circle at 50% 28%, rgba(242, 199, 102, 0.18), rgba(5, 5, 5, 0.96) 68%);
    border: 3px solid rgba(212, 166, 58, 0.48);
    border-radius: 50%;
    pointer-events: auto;
  }

  .mobile-power-rail input::-webkit-slider-thumb,
  .mobile-cue-tilt input::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    border-radius: 999px;
  }

  .mobile-power-rail input::-moz-range-thumb,
  .mobile-cue-tilt input::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 999px;
  }

  .ball-in-hand-hint {
    top: calc(max(8px, env(safe-area-inset-top)) + 190px);
    bottom: auto;
    left: 50%;
    z-index: 7;
    max-width: min(240px, calc(100% - 24px));
    padding: 7px 10px;
  }

  .ball-in-hand-hint strong {
    font-size: 10px;
  }

  .ball-in-hand-hint span {
    display: none;
  }
}

.room-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 26px);
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 166, 58, 0.14), transparent 18rem),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
}

.room-panel-card {
  display: grid;
  width: min(920px, calc(100vw - 24px));
  max-height: min(720px, calc(100svh - 24px));
  gap: 16px;
  padding: clamp(16px, 1.5vw, 24px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.12), transparent 12rem),
    linear-gradient(180deg, rgba(13, 16, 16, 0.98), rgba(4, 5, 5, 0.98));
  border: 1px solid rgba(212, 166, 58, 0.76);
  border-radius: 16px;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 236, 176, 0.09);
}

.direct-invite-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 22%, rgba(242, 199, 102, 0.18), transparent 18rem),
    rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.direct-invite-overlay[hidden] {
  display: none;
}

.direct-invite-card {
  display: grid;
  width: min(460px, 100%);
  gap: 14px;
  padding: clamp(18px, 4vw, 28px);
  color: #f7f0e3;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.18), transparent 12rem),
    linear-gradient(180deg, rgba(13, 16, 16, 0.98), rgba(3, 4, 4, 0.98));
  border: 1px solid rgba(242, 199, 102, 0.74);
  border-radius: 14px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.72);
}

.direct-invite-card small {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.direct-invite-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.08;
}

.direct-invite-card p {
  margin: 0;
  color: #d8d0c4;
  line-height: 1.35;
}

.direct-invite-card div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.direct-match-loading {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: #f8f1e2;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(212, 166, 58, 0.16), transparent 20rem),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.direct-match-loading small {
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.direct-match-loading strong {
  color: #fff;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.08;
}

.direct-match-loading span {
  color: #d8d0c4;
  font-weight: 700;
}

.room-panel-head,
.room-stage,
.room-seats,
.room-actions,
.room-lists {
  display: grid;
  gap: 12px;
}

.room-panel-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.room-panel-head small {
  display: block;
  color: var(--gold-light);
  font-weight: 800;
  text-transform: uppercase;
}

.room-panel-head h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.04;
}

.room-crossplay {
  margin: 0;
  color: #d7d0c3;
  line-height: 1.35;
}

.room-stage {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 14px;
  color: #fff;
  background: rgba(5, 8, 8, 0.72);
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 10px;
}

.room-stage span,
.room-stage strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-stage span {
  color: var(--gold-light);
  font-weight: 900;
}

.room-seats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.room-seats article,
.room-lists section {
  min-width: 0;
  padding: 14px;
  background: linear-gradient(180deg, rgba(18, 20, 20, 0.82), rgba(6, 7, 7, 0.86));
  border: 1px solid rgba(212, 166, 58, 0.34);
  border-radius: 12px;
}

.room-seats small {
  color: #aaa198;
}

.room-seats strong {
  display: block;
  margin: 5px 0;
  overflow: hidden;
  color: #fff;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-seats span {
  color: var(--gold-light);
  font-weight: 800;
}

.room-actions {
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}

.room-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8) brightness(0.62);
  opacity: 0.55;
}

.room-lists {
  grid-template-columns: 1fr 1fr;
}

.room-lists h3 {
  margin: 0 0 10px;
  color: var(--gold-light);
  font-size: 16px;
  text-transform: uppercase;
}

.room-lists ol {
  display: grid;
  max-height: 160px;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.room-lists li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  color: #ddd6ca;
}

.room-lists li.is-empty {
  display: block;
  color: #918a7d;
}

.room-lists li b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #111;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-radius: 50%;
}

.room-lists li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-lists li small {
  color: #918a7d;
}

@media (max-width: 760px) and (orientation: landscape), (max-height: 460px) and (orientation: landscape) {
  .room-panel {
    padding: 8px;
  }

  .room-panel-card {
    width: calc(100vw - 16px);
    max-height: calc(100svh - 16px);
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }

  .room-panel-head h2 {
    font-size: 18px;
  }

  .room-panel-head small,
  .room-crossplay,
  .room-stage,
  .room-seats small,
  .room-seats span,
  .room-lists li,
  .room-actions button {
    font-size: 11px;
  }

  .room-seats strong {
    font-size: 15px;
  }

  .room-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .room-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-lists ol {
    max-height: 72px;
  }
}

@media (max-width: 980px) and (orientation: landscape), (max-height: 520px) and (orientation: landscape) {
  .mobile-top-actions {
    grid-template-columns: repeat(4, 42px);
    gap: 6px;
  }

  .mobile-fullscreen-button strong {
    color: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-fullscreen-button[aria-pressed="true"] {
    color: #090909;
    background: linear-gradient(180deg, #f4d37e, #b88622);
    border-color: rgba(242, 199, 102, 0.82);
  }

  .mobile-shot-pull {
    --kott-shot-pull: 0;
    position: absolute;
    z-index: 9;
    top: 50%;
    right: max(10px, env(safe-area-inset-right));
    display: grid;
    justify-items: center;
    width: 66px;
    height: 218px;
    padding: 9px 6px 8px;
    color: #f4f0e8;
    background: linear-gradient(180deg, rgba(24, 25, 24, 0.96), rgba(4, 5, 5, 0.98));
    border: 1px solid rgba(212, 166, 58, 0.5);
    border-radius: 19px;
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.52),
      inset 0 1px 0 rgba(255, 244, 208, 0.11);
    transform: translateY(-50%);
    cursor: ns-resize;
    pointer-events: auto;
  }

  .mobile-shot-pull:hover,
  .mobile-shot-pull:focus-visible {
    color: #f4f0e8;
    background: linear-gradient(180deg, rgba(31, 32, 30, 0.98), rgba(5, 6, 6, 0.99));
    border-color: rgba(242, 199, 102, 0.8);
    outline: none;
  }

  .mobile-shot-pull__label {
    color: #e8c466;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  .mobile-shot-pull > strong {
    min-width: 44px;
    padding: 4px 5px 3px;
    color: #171006;
    background: #f2c766;
    border: 1px solid rgba(255, 239, 184, 0.92);
    border-radius: 6px;
    box-shadow:
      0 3px 10px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.38);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    line-height: 1;
    text-align: center;
  }

  .mobile-shot-pull__track {
    position: relative;
    display: block;
    width: 26px;
    height: 126px;
    overflow: hidden;
    background:
      repeating-linear-gradient(to bottom, rgba(242, 199, 102, 0.18) 0 1px, transparent 1px 9px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.66), rgba(31, 32, 30, 0.86), rgba(0, 0, 0, 0.66));
    border: 1px solid rgba(242, 199, 102, 0.25);
    border-radius: 11px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
    pointer-events: none;
  }

  .mobile-shot-pull__fill {
    position: absolute;
    top: 0;
    right: 4px;
    left: 4px;
    height: calc(var(--kott-shot-pull) * 100%);
    background: linear-gradient(180deg, rgba(242, 199, 102, 0.16), rgba(212, 166, 58, 0.68));
    border-radius: 7px;
    pointer-events: none;
  }

  .mobile-shot-pull__handle {
    position: absolute;
    top: calc(7px + var(--kott-shot-pull) * 108px);
    left: 50%;
    width: 36px;
    height: 22px;
    background: linear-gradient(180deg, #f8dfa0, #bf8b27 60%, #69430d);
    border: 1px solid rgba(255, 239, 184, 0.9);
    border-radius: 8px;
    box-shadow:
      0 0 0 3px rgba(3, 4, 4, 0.82),
      0 4px 12px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    transition: top 150ms cubic-bezier(0.22, 0.8, 0.3, 1);
    pointer-events: none;
  }

  .mobile-shot-pull[data-dragging="true"] .mobile-shot-pull__handle {
    transition: none;
  }

  .mobile-shot-pull small {
    max-width: 52px;
    color: #aaa294;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-shot-pull:disabled {
    pointer-events: none;
    filter: grayscale(0.6) brightness(0.62);
  }

  .kott-fine-aim-scrubber {
    top: 43%;
    left: calc(max(10px, env(safe-area-inset-left)) + 41px);
    width: 44px;
    height: 132px;
    transform: translateY(-50%);
  }

  .mobile-menu-sheet {
    right: calc(max(8px, env(safe-area-inset-right)) + 84px);
  }

  .pyramid-cue-selection-hint {
    top: max(8px, env(safe-area-inset-top));
    bottom: auto;
  }
}

@media (max-height: 410px) and (orientation: landscape) {
  .mobile-shot-pull {
    width: 60px;
    height: 194px;
    padding-top: 7px;
  }

  .mobile-shot-pull__track {
    height: 108px;
  }

  .mobile-shot-pull__handle {
    top: calc(7px + var(--kott-shot-pull) * 90px);
  }

  .kott-fine-aim-scrubber {
    top: 43%;
    left: calc(max(8px, env(safe-area-inset-left)) + 43px);
    height: 122px;
  }

  .kott-fine-aim-scrubber__thumb {
    top: 67px;
  }
}

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

.guest-action {
  min-height: 48px;
  color: var(--gold-light);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, rgba(244, 240, 232, 0.08), rgba(244, 240, 232, 0.03));
  border: 1px solid rgba(212, 166, 58, 0.42);
  border-radius: 8px;
}

.guest-action:hover {
  filter: brightness(1.08);
}

body[data-view="lobby"] .account-side {
  gap: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-view="lobby"] .account-side[data-panel="players"] .account-card,
body[data-view="lobby"] .account-side[data-panel="profile"] .direct-play-panel {
  display: none;
}

body[data-view="lobby"] .account-card {
  display: grid;
  gap: 18px;
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 1.2vw, 24px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 199, 102, 0.16), transparent 10rem),
    linear-gradient(180deg, rgba(12, 14, 14, 0.96), rgba(4, 5, 5, 0.95));
  border: 1px solid rgba(212, 166, 58, 0.24);
  border-radius: 16px;
}

body[data-view="lobby"] .account-crown {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  font-size: 46px;
  background: rgba(212, 166, 58, 0.08);
  border: 1px solid rgba(212, 166, 58, 0.28);
  border-radius: 50%;
}

body[data-view="lobby"] .account-card h2 {
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}

body[data-view="lobby"] .account-card p {
  margin: 0;
  color: #d5cec0;
  line-height: 1.35;
  text-align: center;
}

body[data-view="lobby"] .account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

body[data-view="lobby"] .account-stats div {
  min-width: 0;
  padding: 14px 10px;
  background: rgba(5, 8, 5, 0.54);
  border: 1px solid rgba(212, 166, 58, 0.2);
  border-radius: 8px;
}

body[data-view="lobby"] .account-stats dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-view="lobby"] .account-stats dd {
  margin: 6px 0 0;
  color: var(--gold-light);
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 950;
}

body[data-view="lobby"] .account-card .gold-button {
  align-self: end;
  width: 100%;
}

body[data-view="lobby"] .lobby-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body[data-view="lobby"] .club-side,
body[data-view="lobby"] .premium-card,
body[data-view="lobby"] .bonus-card {
  display: none;
}

.game-orientation-lock {
  display: none;
}

/* Owner-only clean capture surface. The real game canvas stays interactive;
   this mode only recomposes the presentation for a 9:16 recording. */
body[data-view="game"][data-capture-mode="vertical"] .game-orientation-lock {
  display: none !important;
}

body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: #030403;
}

body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .engine-room-stage {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(circle at 50% 34%, rgba(14, 90, 52, 0.22), transparent 54%),
    #030403;
}

body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .game-lobby-button,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .game-save-replay-button,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .visualizer-game-settings,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .visualizer-badge,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .visualizer-engine-status,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .room-match-overlay,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .room-overlay-toggle,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .direct-match-hud,
body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .direct-match-loading {
  display: none !important;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="hidden"] .game-room-fullscreen .kott-shot-hud,
body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="hidden"] .game-room-fullscreen .game-shot-alert,
body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="hidden"] .game-room-fullscreen .ball-in-hand-hint,
body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="hidden"] .game-room-fullscreen .pyramid-cue-selection-hint,
body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="hidden"] .game-room-fullscreen .match-end-overlay {
  display: none !important;
}

body[data-view="game"][data-capture-mode="vertical"] .game-room-fullscreen .kott-visualizer-host {
  background: transparent;
}

/* The optional proof HUD stays usable in the owner-only portrait recorder.
   The clean reel path hides this control group entirely. */
body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull {
  --kott-shot-pull: 0;
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 9;
  display: grid;
  justify-items: center;
  width: 66px;
  height: 218px;
  padding: 9px 6px 8px;
  color: #f4f0e8;
  background: linear-gradient(180deg, rgba(24, 25, 24, 0.96), rgba(4, 5, 5, 0.98));
  border: 1px solid rgba(212, 166, 58, 0.5);
  border-radius: 19px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 244, 208, 0.11);
  transform: translateY(-50%);
  cursor: ns-resize;
  pointer-events: auto;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull__label {
  color: #e8c466;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull > strong {
  min-width: 44px;
  padding: 4px 5px 3px;
  color: #171006;
  background: #f2c766;
  border: 1px solid rgba(255, 239, 184, 0.92);
  border-radius: 6px;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull__track {
  position: relative;
  display: block;
  width: 26px;
  height: 126px;
  overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, rgba(242, 199, 102, 0.18) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.66), rgba(31, 32, 30, 0.86), rgba(0, 0, 0, 0.66));
  border: 1px solid rgba(242, 199, 102, 0.25);
  border-radius: 11px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull__fill {
  position: absolute;
  top: 0;
  right: 4px;
  left: 4px;
  height: calc(var(--kott-shot-pull) * 100%);
  background: linear-gradient(180deg, rgba(242, 199, 102, 0.16), rgba(212, 166, 58, 0.68));
  border-radius: 7px;
  pointer-events: none;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull__handle {
  position: absolute;
  top: calc(7px + var(--kott-shot-pull) * 108px);
  left: 50%;
  width: 36px;
  height: 22px;
  background: linear-gradient(180deg, #f8dfa0, #bf8b27 60%, #69430d);
  border: 1px solid rgba(255, 239, 184, 0.9);
  border-radius: 8px;
  box-shadow:
    0 0 0 3px rgba(3, 4, 4, 0.82),
    0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  transition: top 150ms cubic-bezier(0.22, 0.8, 0.3, 1);
  pointer-events: none;
}

body[data-view="game"][data-capture-mode="vertical"][data-capture-hud="visible"] .mobile-shot-pull small {
  max-width: 52px;
  color: #aaa294;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

@media (orientation: portrait) and (max-width: 1024px) {
  body[data-view="game"] .game-orientation-lock {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    overflow: hidden;
    color: #f1cd68;
    text-align: center;
    background:
      radial-gradient(circle at 50% 42%, rgba(32, 78, 45, 0.34), transparent 42%),
      #050605;
    touch-action: none;
    overscroll-behavior: none;
  }

  body[data-view="game"] .game-orientation-lock__phone {
    position: relative;
    width: 104px;
    height: 58px;
    border: 3px solid #d4a63a;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 225, 133, 0.24), 0 16px 36px rgba(0, 0, 0, 0.48);
  }

  body[data-view="game"] .game-orientation-lock__phone::before {
    position: absolute;
    top: 50%;
    left: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4a63a;
    content: "";
    transform: translateY(-50%);
  }

  body[data-view="game"] .game-orientation-lock strong {
    font-size: 24px;
    line-height: 1.1;
  }

  body[data-view="game"] .game-orientation-lock small {
    color: rgba(245, 239, 218, 0.74);
    font-size: 14px;
  }
}

@media (max-width: 820px), (orientation: portrait) {
  body[data-view="lobby"] .lobby-screen {
    display: block;
    height: 100svh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-view="lobby"] .lobby-shell {
    display: flex;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100svh;
    max-height: none;
    flex-direction: column;
    gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(96px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow: visible;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  body[data-view="lobby"] .account-side {
    order: 1;
    min-height: min(620px, calc(100svh - 128px));
    overflow: visible;
  }

  body[data-view="lobby"] .account-side .direct-play-panel {
    max-height: none;
    min-height: min(560px, calc(100svh - 148px));
    overflow: visible;
  }

  body[data-view="lobby"] .account-side .direct-play-panel .room-lists {
    overflow: visible;
  }

  body[data-view="lobby"] .account-side .direct-play-panel .room-lists section {
    min-height: 128px;
  }

  body[data-view="lobby"] .account-side .direct-play-panel .room-lists ol {
    max-height: none;
    overflow: visible;
  }

  body[data-view="lobby"] .lobby-center {
    order: 2;
    display: grid;
    overflow: visible;
  }

  body[data-view="lobby"] .lobby-header {
    display: none;
  }

  body[data-view="lobby"] .tables-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: visible;
  }

  body[data-view="lobby"] .table-card {
    min-height: 260px;
  }

  body[data-view="lobby"] .profile-side {
    order: 3;
    overflow: visible;
  }

  body[data-view="lobby"] .lobby-nav {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    z-index: 35;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 82px;
    overflow-x: auto;
  }

  body[data-view="lobby"] .lobby-nav button {
    min-width: 132px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .guest-action {
    min-height: 36px;
    font-size: 13px;
  }

  body[data-view="lobby"] .account-card {
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
  }

  body[data-view="lobby"] .account-crown {
    width: 38px;
    height: 38px;
    font-size: 26px;
  }

  body[data-view="lobby"] .account-card h2 {
    font-size: 15px;
  }

  body[data-view="lobby"] .account-card p {
    display: none;
  }

  body[data-view="lobby"] .account-stats {
    gap: 6px;
  }

  body[data-view="lobby"] .account-stats div {
    padding: 6px;
  }

  body[data-view="lobby"] .account-stats dt {
    font-size: 9px;
  }

  body[data-view="lobby"] .account-stats dd {
    margin-top: 2px;
    font-size: 17px;
  }
}

body[data-view="lobby"] .hall-app > .lobby-atmosphere,
body[data-view="lobby"] .hall-app > .legacy-lobby-shell {
  display: none !important;
}

body[data-view="lobby"] .hall-app > [data-hall-app-root] {
  position: relative;
  z-index: 2;
}

.hall-training-room {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(270px, 22%) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: #070c0a;
}

.hall-training-room > .hall-training {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) and (orientation: portrait) {
  .hall-training-room {
    grid-template-columns: 1fr;
  }

  .hall-training-room:has(.hall-side.is-open) .hall-drawer-scrim {
    position: fixed;
    inset: 98px 0 calc(72px + env(safe-area-inset-bottom));
    z-index: 41;
    display: block;
    background: rgba(0, 0, 0, 0.58);
    border: 0;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hall-training-room {
    grid-template-columns: minmax(185px, 24%) minmax(0, 1fr);
  }
}

/* Approved Hall reference — visual fidelity pass */

body[data-view="lobby"] .hall-app > [data-hall-app-root] {
  grid-template-rows: clamp(108px, 17.2vh, 147px) minmax(0, 1fr) clamp(84px, 13.2vh, 113px);
}

.hall-app,
.hall-app button,
.hall-app input,
.hall-app select {
  font-family: var(--font-ui);
}

.hall-topbar {
  grid-template-columns: 34% 32% 34%;
  padding: max(15px, env(safe-area-inset-top)) clamp(22px, 1.7vw, 32px) 14px;
  background:
    radial-gradient(circle at 50% -110%, rgba(211, 161, 54, 0.1), transparent 70%),
    linear-gradient(180deg, #07100f 0%, #050b0a 100%);
}

.hall-avatar-frame {
  width: clamp(82px, 6.2vw, 112px);
  border-radius: 4px;
}

.hall-avatar-frame img {
  border-radius: 2px;
}

.hall-profile-copy {
  margin-inline-start: clamp(13px, 1.3vw, 24px);
  gap: 6px;
}

.hall-profile-copy > strong {
  font-size: clamp(25px, 1.85vw, 35px);
  font-weight: 350;
  letter-spacing: 0;
}

.hall-rank-row b {
  padding: 5px 13px;
  font-size: clamp(13px, 1.05vw, 19px);
  font-weight: 450;
}

.hall-rank-row i {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.hall-xp-row {
  grid-template-columns: auto minmax(92px, 190px) auto;
  font-size: 16px;
}

.hall-xp-row small {
  font-size: clamp(12px, 1vw, 18px);
}

.hall-brand {
  display: grid;
  width: min(100%, 330px);
  justify-self: center;
  place-items: center;
  align-content: center;
  gap: 0;
  color: #edca67;
  text-align: center;
  background: transparent;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.62));
  opacity: 0.93;
}

.hall-brand > svg {
  width: 44px;
  height: 25px;
  margin-bottom: -1px;
  fill: #ecc55d;
  stroke: #ecc55d;
  stroke-width: 1.4;
}

.hall-brand > strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.95vw, 36px);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 1;
  white-space: nowrap;
}

.hall-brand > strong small {
  display: inline-block;
  margin: 0 0.1em;
  font-size: 0.34em;
  font-weight: 650;
  letter-spacing: -0.04em;
  transform: translateY(-0.18em);
}

.hall-brand > span {
  display: flex;
  width: 82%;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: #f4e7bd;
  font-family: var(--font-display);
  font-size: clamp(8px, 0.65vw, 12px);
  letter-spacing: 0.34em;
}

.hall-brand > span i {
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, #d6ae4f);
}

.hall-brand > span i:last-child {
  background: linear-gradient(90deg, #d6ae4f, transparent);
}

.hall-toolbar {
  gap: clamp(10px, 1.15vw, 22px);
}

.hall-currency strong {
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 350;
}

.hall-room {
  grid-template-columns: 22.5% minmax(0, 55%) 22.5%;
}

.hall-stage,
.hall-training {
  background:
    linear-gradient(180deg, rgba(3, 7, 6, 0.04), rgba(2, 5, 4, 0.18)),
    var(--hall-club-background) center / cover no-repeat,
    var(--hall-club-preview) center / cover no-repeat;
}

.hall-placeholder-card {
  background:
    linear-gradient(rgba(5, 14, 11, 0.78), rgba(4, 9, 8, 0.9)),
    var(--hall-club-background) center / cover no-repeat,
    var(--hall-club-preview) center / cover no-repeat;
}

  .hall-stage {
    place-items: center;
    padding: clamp(14px, 2.3vh, 24px);
}

.hall-stage::after {
  background: linear-gradient(180deg, rgba(2, 5, 4, 0.18), transparent 48%, rgba(2, 5, 4, 0.17));
}

.hall-side {
  background: linear-gradient(180deg, rgba(5, 19, 16, 0.975), rgba(5, 12, 10, 0.985));
  backdrop-filter: blur(8px);
}

.hall-side-title {
  min-height: 70px;
}

.hall-side-title h2 {
  color: #ead29b;
  font-size: clamp(20px, 1.45vw, 27px);
  font-weight: 350;
  letter-spacing: 0.025em;
}

.hall-chat-scroll {
  flex: 1 1 auto;
}

.hall-chat-message {
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 20px 0;
}

.hall-chat-message > img,
.hall-player-avatar img {
  width: 64px;
  height: 64px;
}

.hall-chat-message strong,
.hall-player-row strong {
  font-size: clamp(17px, 1.25vw, 23px);
  font-weight: 350;
}

.hall-chat-message p {
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.4;
}

.hall-player-row {
  grid-template-columns: 64px minmax(0, 1fr) 36px 28px;
  min-height: 88px;
  padding: 10px;
}

.hall-player-row small {
  font-size: clamp(12px, 0.9vw, 16px);
}

.hall-stage-card.hall-stage-hero {
  width: min(100%, 790px);
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.hall-stage-hero > small {
  display: none;
}

.hall-stage-hero h1 {
  margin: 0 0 8px;
  font-family: "KottCondensed", "Arial Narrow", sans-serif;
  font-size: clamp(56px, 4.6vw, 86px);
  font-weight: 520;
  letter-spacing: 0.01em;
  line-height: 0.92;
  white-space: nowrap;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.98), 0 10px 26px #000;
}

.hall-stage-hero > p {
  margin: 0 0 20px;
  color: #f4f0e8;
  font-size: clamp(18px, 1.45vw, 27px);
  font-weight: 300;
  text-shadow: 0 2px 5px #000, 0 8px 18px #000;
}

.hall-stage-hero .hall-play-button {
  width: min(100%, 350px);
  min-width: 0;
  min-height: clamp(64px, 8vh, 82px);
  font-size: clamp(30px, 2.4vw, 44px);
}

.hall-bottom-nav button {
  gap: clamp(9px, 1.2vw, 20px);
}

.hall-bottom-nav span {
  font-size: clamp(14px, 1.12vw, 21px);
  font-weight: 350;
}

@media (max-width: 1180px) and (min-height: 541px) {
  body[data-view="lobby"] .hall-app > [data-hall-app-root] {
    grid-template-rows: 112px minmax(0, 1fr) 88px;
  }

  .hall-room {
    grid-template-columns: minmax(245px, 24%) minmax(420px, 1fr) minmax(250px, 24%);
  }

  .hall-avatar-frame {
    width: 76px;
  }

  .hall-stage {
    padding-top: 72px;
  }

  .hall-stage-hero h1 {
    font-size: clamp(48px, 5.5vw, 66px);
  }

  .hall-chat-message,
  .hall-player-row {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .hall-chat-message > img,
  .hall-player-avatar img {
    width: 50px;
    height: 50px;
  }

  .hall-player-row {
    grid-template-columns: 50px minmax(0, 1fr) 30px 24px;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-view="lobby"] .hall-app > [data-hall-app-root] {
    grid-template-rows: 98px minmax(0, 1fr) calc(72px + env(safe-area-inset-bottom));
  }

  .hall-topbar {
    grid-template-columns: minmax(145px, 1fr) auto;
    padding: max(8px, env(safe-area-inset-top)) 10px 7px;
  }

  .hall-brand {
    display: none;
  }

  .hall-avatar-frame {
    width: 54px;
    border-radius: 3px;
  }

  .hall-profile-copy {
    margin-inline-start: 9px;
    gap: 3px;
  }

  .hall-profile-copy > strong {
    max-width: 88px;
    font-size: 17px;
  }

  .hall-rank-row b {
    padding: 2px 6px;
    font-size: 9px;
  }

  .hall-rank-row i {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .hall-xp-row {
    grid-template-columns: auto 54px;
    gap: 5px;
  }

  .hall-xp-row small {
    font-size: 9px;
  }

  .hall-xp-row small:last-child,
  .hall-currency > span,
  .hall-notifications-button {
    display: none;
  }

  .hall-toolbar {
    gap: 3px;
  }

  .hall-currency {
    display: grid;
    grid-template-columns: 24px auto;
    gap: 2px;
    padding: 0;
  }

  .hall-currency + .hall-currency {
    padding-inline-start: 2px;
    border: 0;
  }

  .hall-currency .hall-currency-art {
    width: 24px;
    height: 24px;
  }

  .hall-currency strong {
    font-size: 10px;
  }

  .hall-language {
    padding: 0;
    border: 0;
  }

  .hall-language select {
    width: 32px;
    font-size: 9px;
  }

  .hall-language svg {
    display: none;
  }

  .hall-room {
    grid-template-columns: 1fr;
  }

  .hall-stage {
    place-items: center;
    padding: 40px 44px 18px;
    background-position: 56% center;
  }

  .hall-stage-card.hall-stage-hero {
    align-self: start;
    margin-top: clamp(26px, 8vh, 68px);
  }

  .hall-stage-hero h1 {
    font-size: clamp(40px, 11.5vw, 58px);
    line-height: 0.92;
    white-space: normal;
  }

  .hall-stage-hero > p {
    font-size: 16px;
  }

  .hall-stage-hero .hall-play-button {
    min-height: 60px;
    font-size: 29px;
  }

  .hall-chat-message {
    grid-template-columns: 54px 1fr;
  }

  .hall-player-row {
    grid-template-columns: 54px minmax(0, 1fr) 30px 24px;
  }

  .hall-chat-message > img,
  .hall-player-avatar img {
    width: 54px;
    height: 54px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  body[data-view="lobby"] .hall-app > [data-hall-app-root] {
    grid-template-rows: 66px minmax(0, 1fr) 68px;
  }

  .hall-topbar {
    grid-template-columns: minmax(170px, 1fr) 190px minmax(330px, 1fr);
  }

  .hall-brand {
    display: grid;
    width: 180px;
  }

  .hall-brand > svg,
  .hall-brand > span {
    display: none;
  }

  .hall-brand > strong {
    font-size: 17px;
  }

  .hall-stage {
    place-items: start center;
    padding: 28px 10px 10px;
  }

  .hall-stage-card.hall-stage-hero {
    width: min(100%, 560px);
    padding: 0;
  }

  .hall-stage-hero h1 {
    font-size: clamp(35px, 8.5vh, 47px);
    white-space: nowrap;
  }

  .hall-stage-hero > p {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .hall-stage-hero .hall-play-button {
    width: 240px;
    min-height: 46px;
    font-size: 24px;
  }

  .hall-chat-message,
  .hall-player-row {
    grid-template-columns: 35px minmax(0, 1fr);
  }

  .hall-chat-message > img,
  .hall-player-avatar img {
    width: 35px;
    height: 35px;
  }

  .hall-player-row {
    grid-template-columns: 35px minmax(0, 1fr) 25px 18px;
  }
}

/* Phone and compact-tablet lobby in landscape orientation. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  body[data-view="lobby"] .hall-app {
    --hall-landscape-header: clamp(58px, 12.5vh, 74px);
    --hall-landscape-nav: clamp(58px, 11vh, 66px);
    overflow: hidden;
  }

  body[data-view="lobby"] .hall-app > [data-hall-app-root] {
    grid-template-rows: var(--hall-landscape-header) minmax(0, 1fr) var(--hall-landscape-nav);
    height: 100dvh;
    min-height: 100dvh;
  }

  .hall-topbar {
    grid-template-columns: minmax(145px, 1fr) auto;
    padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left));
  }

  .hall-avatar-frame {
    width: clamp(42px, 8vh, 54px);
    border-radius: 4px;
  }

  .hall-avatar-frame img {
    border-radius: 2px;
  }

  .hall-avatar-frame > i {
    right: -4px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .hall-profile-copy {
    margin-inline-start: 9px;
    gap: 2px;
  }

  .hall-profile-copy > strong {
    max-width: clamp(84px, 14vw, 180px);
    font-size: clamp(15px, 2.25vh, 20px);
  }

  .hall-rank-row,
  .hall-xp-row {
    display: none;
  }

  .hall-brand {
    position: absolute;
    left: 50%;
    display: grid;
    width: min(100%, 220px);
    transform: translateX(-50%);
  }

  .hall-brand > svg,
  .hall-brand > span {
    display: none;
  }

  .hall-brand > strong {
    font-size: clamp(15px, 2.6vh, 21px);
  }

  .hall-toolbar {
    gap: clamp(2px, 0.6vw, 8px);
  }

  .hall-currency {
    gap: 3px;
    padding: 0;
  }

  .hall-currency + .hall-currency {
    padding-inline-start: clamp(3px, 0.5vw, 7px);
    border-inline-start-color: rgba(238, 225, 196, 0.12);
  }

  .hall-currency .hall-currency-art {
    width: clamp(22px, 4.8vh, 28px);
    height: clamp(22px, 4.8vh, 28px);
  }

  .hall-currency strong {
    font-size: clamp(10px, 2.15vh, 14px);
  }

  .hall-currency > span,
  .hall-notifications-button {
    display: none;
  }

  .hall-language {
    padding-inline: clamp(5px, 0.8vw, 10px) clamp(16px, 2vw, 23px);
  }

  .hall-language select {
    width: clamp(42px, 6.5vw, 72px);
    max-width: none;
    padding: 5px 0;
    font-size: clamp(9px, 1.8vh, 12px);
  }

  .hall-language svg {
    right: 4px;
    width: 14px;
  }

  .hall-room,
  .hall-training-room {
    grid-template-columns: 1fr;
  }

  .hall-stage {
    place-items: start center;
    padding: clamp(24px, 7vh, 44px) max(58px, calc(env(safe-area-inset-left) + 48px)) 10px;
    background-position: 54% center;
  }

  .hall-stage-card.hall-stage-hero {
    width: min(100%, 620px);
    padding: 0;
  }

  .hall-stage-hero h1 {
    margin-bottom: 5px;
    font-size: clamp(38px, 10vh, 58px);
    line-height: 0.92;
    white-space: nowrap;
  }

  .hall-stage-hero > p {
    margin-bottom: clamp(8px, 2vh, 14px);
    font-size: clamp(12px, 3.2vh, 17px);
  }

  .hall-stage-hero .hall-play-button {
    width: min(100%, 320px);
    min-height: clamp(46px, 10vh, 60px);
    font-size: clamp(24px, 6.5vh, 34px);
  }

  .hall-side {
    position: fixed;
    top: var(--hall-landscape-header);
    bottom: var(--hall-landscape-nav);
    z-index: 42;
    width: min(46vw, 370px);
    visibility: hidden;
    transition: transform 190ms ease, visibility 190ms;
  }

  .hall-chat {
    left: 0;
    transform: translateX(-104%);
  }

  .hall-players {
    right: 0;
    transform: translateX(104%);
  }

  .hall-side.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  .hall-side-title {
    min-height: 44px;
    padding: 0 12px;
  }

  .hall-side-title h2 {
    font-size: 15px;
  }

  .hall-side-title button,
  .hall-player-card > button:first-child {
    display: block;
  }

  .hall-chat-scroll {
    padding: 0 11px;
  }

  .hall-chat-message {
    grid-template-columns: 38px 1fr;
    gap: 8px;
    padding: 9px 0;
  }

  .hall-chat-message > img,
  .hall-player-avatar img {
    width: 38px;
    height: 38px;
  }

  .hall-chat-message strong,
  .hall-player-row strong {
    font-size: 13px;
  }

  .hall-chat-message p {
    margin-top: 2px;
    font-size: 10px;
  }

  .hall-chat-message small {
    display: none;
  }

  .hall-player-card {
    display: grid;
  }

  .hall-players {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .hall-players > .hall-side-title {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    background: #081713;
  }

  .hall-players > .hall-player-scroll {
    flex: 0 0 auto;
    overflow: visible;
  }

  .hall-players > .hall-player-card {
    flex: 0 0 auto;
  }

  .hall-players > .hall-invite-toggle {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 auto;
    background: #08110f;
  }

  .hall-chat-form {
    grid-template-columns: 1fr 40px;
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  }

  .hall-player-scroll {
    padding: 0 7px;
  }

  .hall-player-row {
    grid-template-columns: 38px minmax(0, 1fr) 26px 20px;
    min-height: 54px;
    gap: 6px;
    padding: 7px 5px;
  }

  .hall-player-row small {
    font-size: 9px;
  }

  .hall-player-discipline {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .hall-invite-toggle {
    min-height: 42px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .hall-invite-toggle i {
    width: 40px;
    height: 21px;
  }

  .hall-invite-toggle i::after {
    width: 15px;
    height: 15px;
  }

  .hall-invite-toggle input:checked + i::after {
    transform: translateX(18px);
  }

  .hall-edge-button {
    position: absolute;
    top: 10px;
    z-index: 10;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #f0cd70;
    background: rgba(6, 20, 16, 0.9);
    border: 1px solid rgba(228, 181, 71, 0.65);
    border-radius: 50%;
    backdrop-filter: blur(8px);
  }

  .hall-edge-chat {
    left: max(9px, env(safe-area-inset-left));
  }

  .hall-edge-players {
    right: max(9px, env(safe-area-inset-right));
  }

  .hall-edge-button svg {
    width: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .hall-edge-button span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 4px;
    color: #fff;
    font-size: 9px;
    background: #d43b44;
    border: 2px solid #08110e;
    border-radius: 99px;
  }

  .hall-room:has(.hall-side.is-open) .hall-drawer-scrim,
  .hall-training-room:has(.hall-side.is-open) .hall-drawer-scrim {
    position: fixed;
    inset: var(--hall-landscape-header) 0 var(--hall-landscape-nav);
    z-index: 41;
    display: block;
    background: rgba(0, 0, 0, 0.58);
    border: 0;
  }

  .hall-match-setup {
    width: min(100%, 1120px);
    max-height: 100%;
    padding: 9px 14px;
    overflow: hidden;
  }

  .hall-match-setup > small,
  .hall-match-setup > p {
    display: none;
  }

  .hall-match-setup fieldset {
    margin-top: 0;
  }

  .hall-choice-grid {
    grid-template-columns: 1.25fr 1fr 0.9fr;
    gap: 6px;
  }

  .hall-discipline-group {
    padding: 5px;
  }

  .hall-discipline-group > header {
    min-height: 24px;
    margin-bottom: 4px;
    padding-bottom: 4px;
  }

  .hall-discipline-list {
    gap: 3px;
  }

  .hall-choice {
    min-height: 42px;
    padding: 5px;
    font-size: 10px;
  }

  .hall-discipline-mark {
    width: 27px;
    height: 27px;
  }

  .hall-segment {
    min-height: 30px;
    font-size: 10px;
  }

  .hall-match-setup .hall-play-button {
    width: min(100%, 280px);
    min-height: 40px;
    font-size: 21px;
  }

  .hall-search-footer {
    grid-template-columns: 1fr;
    margin-top: 6px;
    padding-top: 5px;
  }

  .hall-bottom-nav {
    overflow: hidden;
  }

  .hall-bottom-nav button {
    display: grid;
    align-content: center;
    gap: 1px;
    padding: 3px 2px;
  }

  .hall-bottom-nav svg {
    width: clamp(23px, 5vh, 29px);
    height: clamp(23px, 5vh, 29px);
    margin: auto;
  }

  .hall-bottom-nav span {
    min-height: 12px;
    font-size: clamp(8px, 1.15vw, 13px);
    line-height: 1.05;
    white-space: normal;
  }

  .hall-bottom-nav button > i {
    top: 2px;
    right: 22%;
    width: 17px;
    height: 17px;
    font-size: 9px;
  }

  .hall-training {
    grid-template-columns: minmax(300px, 43%) minmax(0, 1fr);
    padding: clamp(12px, 3vh, 20px) max(64px, calc(env(safe-area-inset-left) + 52px));
    gap: 18px;
  }

  .hall-training::before {
    background: linear-gradient(90deg, rgba(4, 10, 8, 0.94) 0 44%, rgba(4, 9, 7, 0.12) 72%);
  }

  .hall-training-copy > small,
  .hall-training-copy > p,
  .hall-promo,
  .hall-training-table {
    display: none;
  }

  .hall-training-copy {
    align-self: center;
  }

  .hall-training-copy h1 {
    margin: 0 0 7px;
    font-size: clamp(32px, 8vh, 46px);
  }

  .hall-training-modes {
    gap: 5px;
    margin-bottom: 8px;
  }

  .hall-training-modes button {
    min-height: 39px;
    grid-template-columns: 27px 1fr;
    padding: 5px 7px;
    font-size: 10px;
  }

  .hall-training-modes i {
    width: 25px;
    height: 25px;
  }

  .hall-training-copy .hall-play-button {
    min-height: 42px;
    font-size: 22px;
  }
}

/* Keep matchmaking filters and the primary action visible on short phones in landscape. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .hall-match-setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(188px, 25%);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 7px 12px 8px;
    overflow: hidden;
  }

  .hall-match-setup .hall-discipline-fieldset {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 0;
    margin-top: 0;
    padding-right: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .hall-match-setup .hall-discipline-fieldset > legend {
    margin-bottom: 4px;
  }

  .hall-option-grid {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 3px;
  }

  .hall-option-grid fieldset {
    margin-top: 0;
  }

  .hall-option-grid legend {
    margin-bottom: 3px;
    font-size: 8px;
  }

  .hall-segment {
    min-height: 25px;
    padding: 2px;
    font-size: 8px;
  }

  .hall-search-footer {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 4px;
    padding-top: 4px;
  }

  .hall-search-footer p {
    display: none;
  }

  .hall-match-setup .hall-play-button {
    width: 100%;
    min-height: 34px;
    font-size: 18px;
  }
}

/* Portrait training composition: a dedicated mobile selector, not a cropped desktop layout. */
@media (max-width: 860px) and (orientation: portrait) {
  .hall-training-room > .hall-training {
    display: flex;
    align-items: flex-end;
    padding: 0 12px 14px;
    background-position: 65% bottom;
    background-size: auto 145%;
  }

  .hall-training::before {
    background:
      linear-gradient(180deg, rgba(2, 6, 5, 0.08) 0 28%, rgba(2, 7, 5, 0.34) 48%, rgba(2, 7, 5, 0.91) 76%, #030806 100%),
      linear-gradient(90deg, rgba(3, 8, 6, 0.28), transparent 36% 70%, rgba(3, 8, 6, 0.3));
  }

  .hall-training-copy {
    position: relative;
    width: 100%;
    align-self: auto;
    padding: 17px 15px 15px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(9, 23, 18, 0.92), rgba(4, 11, 9, 0.965));
    border: 1px solid rgba(222, 176, 69, 0.48);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 247, 215, 0.07);
    backdrop-filter: blur(12px);
  }

  .hall-training-copy::before {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #e7ba51 20% 80%, transparent);
  }

  .hall-training-copy > small {
    display: flex;
    color: #ddb456;
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  .hall-training-copy > small i {
    flex: 1 1 auto;
  }

  .hall-training-copy h1 {
    margin: 7px 0 3px;
    font-size: clamp(35px, 10.5vw, 43px);
    font-weight: 570;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  .hall-training-copy > p {
    display: block;
    max-width: none;
    margin: 0 0 13px;
    color: #c9c5bb;
    font-size: 12px;
    line-height: 1.35;
  }

  .hall-training-modes {
    gap: 8px;
    margin-bottom: 12px;
  }

  .hall-training-modes button {
    min-height: 58px;
    grid-template-columns: 39px minmax(0, 1fr);
    gap: 9px;
    padding: 7px 28px 7px 9px;
    color: #d7d2c7;
    font-size: 15px;
    font-weight: 420;
    line-height: 1.15;
    background: linear-gradient(150deg, rgba(13, 25, 21, 0.94), rgba(5, 13, 11, 0.96));
    border-color: rgba(211, 161, 52, 0.32);
    border-radius: 8px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  }

  .hall-training-modes button.is-selected {
    color: #fff6df;
    background: linear-gradient(135deg, rgba(18, 91, 62, 0.98), rgba(7, 45, 33, 0.98));
    border-color: #dfb24b;
    box-shadow: inset 3px 0 #edc464, inset 0 1px rgba(255, 249, 218, 0.08), 0 8px 20px rgba(0, 0, 0, 0.22);
  }

  .hall-training-mark {
    width: 38px;
    height: 38px;
  }

  .hall-training-copy .hall-play-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 12px;
    font-size: clamp(21px, 6.1vw, 25px);
    background: linear-gradient(180deg, #f0d27f 0%, #ddb158 52%, #b77b25 100%);
    border: 1px solid #f6de94;
    border-radius: 9px;
    box-shadow: inset 0 1px rgba(255, 250, 214, 0.9), inset 0 -1px rgba(89, 50, 8, 0.45), 0 10px 24px rgba(0, 0, 0, 0.38);
  }

  .hall-bottom-nav span {
    min-height: 20px;
    overflow: visible;
    font-size: clamp(7.5px, 2.15vw, 9px);
    line-height: 1.02;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 860px) and (max-height: 700px) and (orientation: portrait) {
  .hall-training-room > .hall-training {
    padding: 0 9px 8px;
  }

  .hall-training-copy {
    padding: 10px;
  }

  .hall-training-copy h1 {
    margin-top: 4px;
    font-size: 30px;
  }

  .hall-training-copy > p {
    display: none;
  }

  .hall-training-modes {
    gap: 5px;
    margin: 7px 0;
  }

  .hall-training-modes button {
    min-height: 44px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 23px 4px 7px;
    font-size: 12px;
  }

  .hall-training-mark {
    width: 29px;
    height: 29px;
  }

  .hall-training-modes button::after {
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .hall-training-copy .hall-play-button {
    min-height: 44px;
    font-size: 18px;
  }
}

/* Final cascade guard for the shared game utility rail. */
.game-room-fullscreen .game-save-replay-button,
.game-room-fullscreen .game-lobby-button,
.game-room-fullscreen .visualizer-game-settings {
  top: auto;
  bottom: var(--kott-game-hud-bottom);
}

.game-room-fullscreen .game-lobby-button {
  right: max(8px, env(safe-area-inset-right));
  width: 68px;
  min-width: 68px;
  min-height: var(--kott-game-utility-height);
}

.game-room-fullscreen .visualizer-game-settings {
  right: calc(max(8px, env(safe-area-inset-right)) + 76px);
  width: var(--kott-game-utility-height);
  min-height: var(--kott-game-utility-height);
}

.game-room-fullscreen .visualizer-settings-panel {
  top: auto;
  bottom: calc(100% + 8px);
  max-height: calc(100dvh - var(--kott-game-hud-bottom) - var(--kott-game-utility-height) - 20px);
  overflow-y: auto;
}

.game-room-fullscreen .ball-in-hand-hint {
  top: auto;
  bottom: calc(var(--kott-game-hud-bottom) + 122px);
}

@media (max-width: 980px) and (orientation: landscape),
  (max-height: 520px) and (orientation: landscape) {
  .game-room-fullscreen .mobile-top-actions {
    top: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: var(--kott-game-hud-bottom);
    left: auto;
    z-index: 13;
    grid-template-columns: repeat(3, 44px);
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .game-room-fullscreen .mobile-top-actions .mobile-icon-button {
    width: 44px;
    height: var(--kott-game-utility-height);
  }

  .game-room-fullscreen .mobile-menu-sheet {
    top: auto;
    right: calc(max(10px, env(safe-area-inset-right)) + 76px);
    bottom: calc(var(--kott-game-hud-bottom) + var(--kott-game-utility-height) + 8px);
    left: auto;
    z-index: 13;
  }

  .game-room-fullscreen .game-save-replay-button {
    top: auto;
    right: auto;
    bottom: var(--kott-game-hud-bottom);
    left: calc(max(10px, env(safe-area-inset-left)) + 136px);
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    min-height: var(--kott-game-utility-height);
    padding: 0 8px;
  }

  .game-room-fullscreen .game-save-replay-button span:last-child {
    display: none;
  }

  .game-room-fullscreen .game-lobby-button {
    top: auto;
    right: calc(max(10px, env(safe-area-inset-right)) + 152px);
    bottom: var(--kott-game-hud-bottom);
    width: 66px;
    min-width: 66px;
    min-height: var(--kott-game-utility-height);
    padding: 0 6px;
    font-size: 9px;
  }

  .game-room-fullscreen .visualizer-game-settings {
    top: auto;
    right: calc(max(10px, env(safe-area-inset-right)) + 226px);
    bottom: var(--kott-game-hud-bottom);
    width: var(--kott-game-utility-height);
    min-height: var(--kott-game-utility-height);
  }

  .game-room-fullscreen .visualizer-settings-panel {
    top: auto;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(246px, calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right))));
    max-height: calc(100dvh - var(--kott-game-hud-bottom) - var(--kott-game-utility-height) - 20px);
    overflow-y: auto;
  }

  .game-room-fullscreen .ball-in-hand-hint {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    bottom: auto;
  }

  .game-room-fullscreen .mobile-cue-tilt input[data-elevation-range] {
    cursor: ew-resize;
    touch-action: none;
  }
}

/* Game settings replace the old always-visible graphics selector. */
.visualizer-game-settings {
  position: absolute;
  display: block;
  top: 92px;
  right: 16px;
  z-index: 28;
  width: 46px;
  min-height: 44px;
  color: #f4f0e8;
}

.visualizer-settings-button {
  display: grid;
  width: 46px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: #f2c766;
  background: linear-gradient(180deg, rgba(25, 25, 22, 0.96), rgba(6, 8, 7, 0.96));
  border: 1px solid rgba(212, 166, 58, 0.46);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(10px);
}

.visualizer-settings-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.visualizer-game-settings.is-open .visualizer-settings-button {
  color: #fff1bd;
  border-color: rgba(242, 199, 102, 0.88);
}

.visualizer-settings-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  display: grid;
  width: 246px;
  gap: 12px;
  padding: 13px;
  background: linear-gradient(180deg, rgba(24, 23, 18, 0.98), rgba(5, 8, 7, 0.98));
  border: 1px solid rgba(212, 166, 58, 0.55);
  border-radius: 11px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(14px);
}

.visualizer-settings-panel[hidden] {
  display: none;
}

.visualizer-settings-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f2c766;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visualizer-settings-panel header button {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #ddd3bd;
  font-size: 22px;
  background: transparent;
  border: 0;
}

.visualizer-settings-panel label {
  display: grid;
  gap: 5px;
  color: #bbb19d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.visualizer-settings-panel > p { margin: 0; color: #8f8980; font-size: 10px; line-height: 1.4; }
.visualizer-settings-range input { width: 100%; accent-color: #d4a63a; }
.visualizer-settings-range output { color: #f2c766; float: right; font-variant-numeric: tabular-nums; }

.visualizer-settings-panel select {
  width: 100%;
  min-height: 38px;
  padding: 0 28px 0 10px;
  color: #f7efd9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  background: #10140f;
  border: 1px solid rgba(212, 166, 58, 0.48);
  border-radius: 7px;
}

.visualizer-settings-panel .visualizer-settings-toggle {
  display: flex;
  min-height: 40px;
  gap: 10px;
  align-items: center;
  color: #eee6d6;
}

.visualizer-settings-toggle input {
  width: 19px;
  height: 19px;
  accent-color: #d4a63a;
}

.visualizer-fps-counter {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  width: max-content;
  padding: 4px 7px;
  color: #f2d98e;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(3, 10, 7, 0.86);
  border: 1px solid rgba(212, 166, 58, 0.38);
  border-radius: 6px;
  pointer-events: none;
}

.visualizer-fps-counter small:not([hidden]) {
  display: block;
  margin-top: 4px;
  font: inherit;
}

.visualizer-fps-counter[hidden] {
  display: none;
}

/* The mobile cue-elevation rail intentionally occupies only half its old width. */
@media (max-width: 980px) and (orientation: landscape),
  (max-height: 520px) and (orientation: landscape) {
  .game-room-fullscreen .mobile-cue-tilt {
    width: 184px;
    min-width: 184px;
    grid-template-columns: 40px 82px 34px;
    gap: 5px;
    padding: 7px 8px;
  }

  .game-room-fullscreen .mobile-cue-tilt input[data-elevation-range] {
    width: 82px;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .game-room-fullscreen .mobile-cue-tilt {
    right: auto;
    left: 50%;
    width: 196px;
    min-width: 196px;
    grid-template-columns: 42px 96px 36px;
    transform: translateX(-50%);
  }

  .game-room-fullscreen .mobile-cue-tilt input[data-elevation-range] {
    width: 96px;
  }

  .game-room-fullscreen .visualizer-settings-panel {
    right: 0;
    bottom: calc(100% + 8px);
    top: auto;
    width: min(246px, calc(100vw - 20px));
  }
}

/* Keep identity and currencies collision-free in constrained browser/tablet shells. */
@media (max-width: 1360px) and (min-width: 861px) {
  body[data-view="lobby"] .hall-topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(410px, auto);
  }

  body[data-view="lobby"] .hall-brand {
    display: none;
  }
}

/* Extremely narrow or short portrait devices keep a real discipline viewport. */
@media (max-width: 360px) and (orientation: portrait),
  (max-width: 420px) and (max-height: 620px) and (orientation: portrait) {
  .hall-room:has(.hall-match-setup) > .hall-stage {
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  }

  .hall-match-setup {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow: hidden;
  }

  .hall-match-setup .hall-discipline-fieldset {
    min-height: 120px;
    flex: 1 1 auto;
    padding-inline-end: 3px;
    overflow-y: auto;
  }

  .hall-match-setup .hall-discipline-fieldset > legend,
  .hall-option-grid legend {
    margin-bottom: 3px;
    font-size: 9px;
  }

  .hall-option-grid {
    flex: 0 0 auto;
    gap: 3px;
    padding-inline-end: 34px;
  }

  .hall-option-grid fieldset {
    margin-top: 0;
  }

  .hall-segment {
    min-height: 31px;
    padding: 3px 5px;
    font-size: 10px;
  }

  .hall-search-footer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    padding-top: 4px;
  }

  .hall-search-footer p {
    min-width: 34px;
    gap: 4px;
  }

  .hall-search-footer p strong {
    font-size: 22px;
  }

  .hall-search-footer p span {
    display: none;
  }

  .hall-match-setup .hall-play-button {
    min-height: 42px;
    font-size: 20px;
  }
}

/* Live spectating: warm match state in the hall and an explicit read-only badge. */
.hall-player-row.is-busy .hall-player-avatar i {
  background: #d58a35;
  box-shadow: 0 0 8px rgba(213, 138, 53, 0.62);
}

.hall-player-card-status.is-busy {
  color: #e3a04d;
}

.hall-player-card.is-live {
  background: linear-gradient(180deg, rgba(84, 48, 16, 0.16), rgba(7, 18, 13, 0));
}

.hall-live-match {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  padding: 10px 11px;
  background: rgba(20, 16, 10, 0.86);
  border: 1px solid rgba(213, 138, 53, 0.52);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(255, 225, 164, 0.06);
}

.hall-live-match header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.hall-live-match header span,
.hall-live-match header em {
  color: #e9a957;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hall-live-match header span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.hall-live-match header i,
.spectator-live-banner i {
  width: 7px;
  height: 7px;
  background: #d58a35;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(213, 138, 53, 0.72);
}

.hall-live-match > strong {
  color: #f7e9c4;
  font-size: 13px;
}

.hall-live-match > p {
  color: #bfb6a5;
  font-size: 10px;
  line-height: 1.35;
}

.hall-watch-live {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.hall-watch-live:not(:disabled) {
  box-shadow: 0 7px 20px rgba(125, 74, 18, 0.28);
}

@media (max-width: 860px) and (orientation: portrait),
  (max-height: 540px) and (orientation: landscape) {
  .hall-players > .hall-invite-toggle {
    position: static;
    z-index: 1;
  }

  .hall-player-card.is-live .hall-watch-live {
    min-height: 44px;
  }
}

.spectator-live-banner {
  position: absolute;
  top: max(126px, calc(env(safe-area-inset-top) + 126px));
  left: 50%;
  z-index: 11;
  display: flex;
  min-height: 30px;
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  color: #f5ead5;
  background: rgba(8, 10, 8, 0.88);
  border: 1px solid rgba(213, 138, 53, 0.5);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.spectator-live-banner > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #e9a957;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.spectator-live-banner > b,
.spectator-live-banner > em {
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.spectator-live-banner > em {
  color: #bfb6a5;
}

@media (orientation: portrait) and (max-width: 700px) {
  .spectator-live-banner {
    top: max(10px, env(safe-area-inset-top));
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .spectator-live-banner {
    top: max(90px, calc(env(safe-area-inset-top) + 90px));
  }
}

/* King of the Table — tournament hall */
.hall-tournaments-page {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 1.6vw, 28px) clamp(18px, 2.2vw, 42px) clamp(24px, 2.4vw, 44px);
  overflow-x: hidden;
  overflow-y: auto;
  color: #eee7d8;
  background:
    linear-gradient(90deg, rgba(2, 10, 8, 0.98), rgba(5, 17, 13, 0.89) 48%, rgba(2, 9, 7, 0.97)),
    radial-gradient(circle at 72% 0, rgba(184, 131, 39, 0.18), transparent 38%),
    var(--hall-club-background) center / cover no-repeat;
  scrollbar-color: #9f782d rgba(2, 7, 5, 0.78);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.hall-tournaments-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.012) 8px 9px),
    radial-gradient(circle at 50% 16%, transparent, rgba(0, 0, 0, 0.52) 82%);
  pointer-events: none;
}

.tournament-page-hero {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) minmax(340px, auto);
  gap: clamp(15px, 1.7vw, 28px);
  align-items: center;
  max-width: 1780px;
  margin: 0 auto clamp(15px, 1.4vw, 24px);
  padding: 0 clamp(3px, 0.6vw, 10px) clamp(15px, 1.4vw, 24px);
  border-bottom: 1px solid rgba(222, 179, 79, 0.24);
}

.tournament-crest {
  position: relative;
  display: grid;
  width: clamp(58px, 5vw, 84px);
  aspect-ratio: 1;
  place-items: center;
  color: #e7c86f;
  background: radial-gradient(circle, rgba(33, 82, 56, 0.94), rgba(5, 18, 14, 0.97) 68%);
  border: 1px solid rgba(231, 197, 101, 0.55);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(2, 8, 6, 0.82), 0 12px 28px rgba(0, 0, 0, 0.4);
}

.tournament-crest::before,
.tournament-crest::after,
.tournament-crest > i {
  position: absolute;
  width: 5px;
  height: 5px;
  content: "";
  background: #d7a842;
  border-radius: 50%;
}

.tournament-crest::before { top: -3px; }
.tournament-crest::after { bottom: -3px; }
.tournament-crest > i { right: -3px; }
.tournament-crest > span { display: grid; width: 54%; place-items: center; }
.tournament-crest svg { width: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }

.tournament-page-hero small,
.tournament-launch-card header small,
.tournament-panel-title small,
.tournament-control-panel header small,
.tournament-champion small,
.tournament-round-column > header small {
  color: #c79b40;
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tournament-page-hero h1 {
  margin: 1px 0 4px;
  color: #f2e2b3;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(28px, 3vw, 54px);
  font-weight: 630;
  letter-spacing: 0.025em;
  line-height: 1;
}

.tournament-page-hero p {
  max-width: 720px;
  margin: 0;
  color: #aaa597;
  font-size: clamp(12px, 0.92vw, 16px);
  line-height: 1.35;
}

.tournament-page-hero ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  color: #d8cfbd;
  font-size: clamp(11px, 0.78vw, 14px);
  list-style: none;
}

.tournament-page-hero li {
  position: relative;
  padding-inline-start: 17px;
}

.tournament-page-hero li::before {
  position: absolute;
  top: 0.42em;
  inset-inline-start: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: #d9a740;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(217, 167, 64, 0.5);
}

.tournament-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  max-width: 1780px;
  margin: 0 auto;
  gap: clamp(14px, 1.4vw, 24px);
  align-items: start;
}

.tournament-page-grid > .tournament-primary {
  display: grid;
  min-width: 0;
  gap: clamp(14px, 1.4vw, 23px);
}

.tournament-launch-card,
.tournament-bracket-panel,
.tournament-bracket-empty,
.tournament-control-panel {
  background:
    linear-gradient(145deg, rgba(12, 28, 22, 0.96), rgba(5, 13, 10, 0.97)),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, 0.012) 4px 5px);
  border: 1px solid rgba(209, 164, 64, 0.25);
  border-radius: 6px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.025);
}

.tournament-launch-card {
  position: relative;
  display: grid;
  padding: clamp(15px, 1.4vw, 24px);
  gap: 13px;
  overflow: hidden;
}

.tournament-launch-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #dcb34f);
}

.tournament-launch-card > header,
.tournament-panel-title,
.tournament-control-panel > header {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.tournament-launch-card h2,
.tournament-panel-title h2,
.tournament-control-panel h2 {
  margin: 2px 0 0;
  color: #f0e2bd;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(19px, 1.5vw, 27px);
  font-weight: 600;
}

.tournament-launch-card > header > span {
  padding: 6px 10px;
  color: #e4c36b;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(164, 113, 28, 0.12);
  border: 1px solid rgba(218, 173, 69, 0.28);
  border-radius: 99px;
}

.tournament-kind-switch,
.tournament-rule-grid fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 3px;
  gap: 3px;
  background: rgba(1, 7, 5, 0.68);
  border: 1px solid rgba(211, 169, 70, 0.16);
  border-radius: 5px;
}

.tournament-kind-switch button,
.tournament-rule-grid fieldset button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  color: #9e9a90;
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 720;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
}

.tournament-kind-switch button.is-selected,
.tournament-rule-grid fieldset button.is-selected {
  color: #f1daa0;
  background: linear-gradient(180deg, rgba(38, 91, 64, 0.72), rgba(17, 50, 37, 0.78));
  border-color: rgba(217, 173, 72, 0.4);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.tournament-rule-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(290px, 1.3fr);
  gap: 12px;
  align-items: end;
}

.tournament-rule-grid > label,
.tournament-rule-grid fieldset {
  min-width: 0;
  margin: 0;
}

.tournament-rule-grid label > span,
.tournament-rule-grid legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: #b4aa97;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tournament-rule-grid label select {
  width: 100%;
  min-height: 50px;
  padding: 0 40px 0 13px;
  color: #eee2c4;
  font-size: clamp(12px, 0.9vw, 15px);
  background: #07120e;
  border: 1px solid rgba(211, 169, 70, 0.3);
  border-radius: 4px;
}

.tournament-rule-grid fieldset {
  border: 1px solid rgba(211, 169, 70, 0.16);
}

.tournament-rule-grid legend {
  position: static;
  width: 100%;
  margin-top: -27px;
}

.tournament-format-description {
  margin: 0;
  color: #aaa394;
  font-size: clamp(11px, 0.8vw, 14px);
}

.tournament-launch-card > footer {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(220px, 0.55fr);
  gap: 14px;
  align-items: stretch;
  justify-content: space-between;
}

.tournament-launch-card > footer > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tournament-launch-card > footer > div strong {
  color: #edc665;
  font-family: "KottDisplay", Georgia, serif;
  font-size: 31px;
  font-weight: 580;
}

.tournament-launch-card > footer > div span {
  max-width: 100px;
  color: #938f85;
  font-size: 10px;
  line-height: 1.15;
  text-transform: uppercase;
}

.tournament-launch-card > footer > button,
.tournament-pairing footer button {
  min-height: 48px;
  padding: 10px 16px;
  color: #1b1205;
  font-size: clamp(12px, 0.88vw, 15px);
  font-weight: 830;
  letter-spacing: 0.035em;
  background: linear-gradient(180deg, #efd47c, #b98529);
  border: 1px solid rgba(255, 227, 144, 0.52);
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(81, 47, 10, 0.3);
}

.tournament-launch-card button:disabled,
.tournament-control-panel button:disabled {
  cursor: wait;
  filter: grayscale(0.48);
  opacity: 0.58;
}

.tournament-error {
  margin: 0;
  padding: 9px 11px;
  color: #f3b4aa;
  font-size: 12px;
  background: rgba(111, 30, 25, 0.19);
  border: 1px solid rgba(220, 96, 80, 0.24);
  border-radius: 4px;
}

.tournament-bracket-panel {
  min-width: 0;
  padding: clamp(14px, 1.3vw, 22px);
  overflow: hidden;
}

.tournament-panel-title {
  margin-bottom: 14px;
}

.tournament-panel-title > span,
.tournament-instance > span {
  padding: 5px 8px;
  color: #aea99e;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}

.tournament-panel-title > span.is-running,
.tournament-instance > span.is-running {
  color: #e7b84d;
  background: rgba(173, 113, 22, 0.13);
  border-color: rgba(225, 173, 61, 0.28);
}

.tournament-panel-title > span.is-completed,
.tournament-instance > span.is-completed {
  color: #90cf9e;
  background: rgba(38, 114, 65, 0.14);
  border-color: rgba(90, 171, 112, 0.25);
}

.tournament-bracket-scroll {
  display: flex;
  min-width: 0;
  padding: 3px 3px 13px;
  gap: 13px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-color: #9f782d rgba(2, 7, 5, 0.78);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.tournament-round-column {
  width: clamp(240px, 21vw, 315px);
  min-width: clamp(240px, 21vw, 315px);
  scroll-snap-align: start;
}

.tournament-round-column > header {
  display: grid;
  min-height: 57px;
  padding: 0 4px 10px;
  align-content: end;
  border-bottom: 1px solid rgba(218, 173, 69, 0.2);
}

.tournament-round-column > header strong {
  color: #e8d5a6;
  font-size: 15px;
  line-height: 1.1;
}

.tournament-round-column > header span {
  color: #77786f;
  font-size: 10px;
  text-transform: uppercase;
}

.tournament-round-column > div {
  display: grid;
  padding-top: 10px;
  gap: 10px;
}

.tournament-pairing {
  min-width: 0;
  padding: 10px;
  background: rgba(2, 8, 6, 0.72);
  border: 1px solid rgba(223, 180, 78, 0.14);
  border-radius: 4px;
}

.tournament-pairing.is-live {
  background: linear-gradient(145deg, rgba(18, 51, 35, 0.92), rgba(4, 13, 10, 0.92));
  border-color: rgba(232, 178, 59, 0.52);
  box-shadow: 0 0 0 1px rgba(228, 169, 50, 0.08), 0 8px 22px rgba(0, 0, 0, 0.3);
}

.tournament-pairing > header,
.tournament-pairing > footer {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.tournament-pairing > header {
  margin-bottom: 7px;
  color: #77796f;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tournament-pairing > header em {
  color: #a89d87;
  font-style: normal;
}

.tournament-pairing.is-live > header em { color: #f1bb48; }

.tournament-pairing-player {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 22px;
  min-height: 34px;
  align-items: center;
  color: #b6b1a7;
  border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.tournament-pairing-player i {
  color: #817b6f;
  font-size: 10px;
  font-style: normal;
}

.tournament-pairing-player strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-pairing-player b {
  color: #dfc275;
  font-family: "KottDisplay", Georgia, serif;
  font-size: 15px;
  text-align: end;
}

.tournament-pairing-player.is-winner { color: #f1dfaf; }
.tournament-pairing-player.is-winner strong::after { margin-inline-start: 5px; color: #68aa75; content: "✓"; }

.tournament-pairing > footer {
  min-height: 24px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.tournament-pairing > footer small { color: #8d887e; font-size: 10px; }
.tournament-pairing footer button { display: inline-flex; min-height: 44px; gap: 6px; align-items: center; padding: 6px 11px; font-size: 11px; }

.tournament-champion {
  display: flex;
  min-height: 54px;
  margin: 0 0 14px;
  padding: 9px 13px;
  gap: 11px;
  align-items: center;
  color: #edcf79;
  background: linear-gradient(90deg, rgba(131, 86, 18, 0.16), transparent);
  border: 1px solid rgba(222, 174, 62, 0.24);
  border-radius: 4px;
}

.tournament-champion strong { color: #f0e1bc; font-size: 16px; }
.tournament-champion span { display: grid; width: 30px; margin-inline-start: auto; place-items: center; }
.tournament-champion svg { width: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.tournament-bracket-empty {
  display: grid;
  min-height: 170px;
  padding: 30px;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #77786f;
  text-align: center;
}

.tournament-bracket-empty span,
.tournament-empty-state span { display: grid; width: 42px; color: #90712d; place-items: center; }
.tournament-bracket-empty svg,
.tournament-empty-state svg { width: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.tournament-bracket-empty p,
.tournament-empty-state p { max-width: 290px; margin: 0; font-size: 12px; line-height: 1.35; }

.tournament-control-panel {
  position: sticky;
  top: 0;
  display: grid;
  min-width: 0;
  max-height: calc(100svh - 280px);
  padding: clamp(14px, 1.25vw, 20px);
  gap: 12px;
  overflow: hidden;
}

.tournament-control-panel > header > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.tournament-control-panel > header strong {
  color: #e7bb54;
  font-family: "KottDisplay", Georgia, serif;
  font-size: 25px;
}

.tournament-control-panel > header button {
  display: inline-flex;
  min-height: 44px;
  padding: 7px 9px;
  gap: 6px;
  align-items: center;
  color: #c3ad7c;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(214, 168, 65, 0.19);
  border-radius: 4px;
}

.tournament-control-panel > header button svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.tournament-control-panel h2 { font-size: 19px; }

.tournament-instance-list {
  display: grid;
  min-height: 0;
  padding-inline-end: 3px;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #876823 transparent;
}

.tournament-instance {
  display: grid;
  min-width: 0;
  min-height: 92px;
  padding: 11px;
  gap: 3px;
  color: #aaa69c;
  text-align: start;
  background: rgba(1, 7, 5, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 4px;
}

.tournament-instance.is-selected {
  background: linear-gradient(145deg, rgba(29, 73, 51, 0.72), rgba(5, 16, 12, 0.82));
  border-color: rgba(221, 176, 70, 0.42);
}

.tournament-instance > span { width: max-content; }
.tournament-instance strong { overflow: hidden; color: #eee1bf; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.tournament-instance small { overflow: hidden; color: #9d978a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tournament-instance em { color: #c6a85f; font-size: 10px; font-style: normal; }

.tournament-empty-state {
  display: grid;
  min-height: 180px;
  padding: 24px;
  place-items: center;
  align-content: center;
  gap: 11px;
  color: #77786f;
  text-align: center;
  border: 1px dashed rgba(211, 169, 70, 0.16);
  border-radius: 4px;
}

.hall-tournaments-page button:not(:disabled) { cursor: pointer; }
.hall-tournaments-page button:focus-visible,
.hall-tournaments-page select:focus-visible {
  outline: 2px solid #f0c966;
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .tournament-page-hero { grid-template-columns: auto minmax(0, 1fr); }
  .tournament-page-hero ul { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tournament-page-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); }
  .tournament-rule-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 860px) and (orientation: portrait) {
  .hall-tournaments-page {
    padding: 14px max(13px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom));
  }

  .tournament-page-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 13px;
    padding-bottom: 13px;
  }

  .tournament-crest { width: 54px; }
  .tournament-page-hero h1 { font-size: clamp(25px, 8vw, 38px); }
  .tournament-page-hero p { font-size: 12px; }
  .tournament-page-hero ul { grid-template-columns: 1fr; gap: 4px; }
  .tournament-page-grid { grid-template-columns: 1fr; }
  .tournament-rule-grid { grid-template-columns: 1fr; gap: 28px; }
  .tournament-launch-card > header { align-items: flex-start; }
  .tournament-launch-card > header > span { max-width: 46%; text-align: center; }
  .tournament-launch-card > footer { grid-template-columns: 1fr; }
  .tournament-launch-card > footer > button { width: 100%; min-height: 50px; }
  .tournament-round-column { width: min(78vw, 285px); min-width: min(78vw, 285px); }
  .tournament-control-panel { position: static; max-height: none; }
  .tournament-instance-list { max-height: none; overflow: visible; }
}

@media (max-width: 430px) and (orientation: portrait) {
  .tournament-page-hero ul { display: none; }
  .tournament-launch-card { padding: 13px; }
  .tournament-launch-card > header { display: grid; }
  .tournament-launch-card > header > span { max-width: none; width: max-content; }
  .tournament-kind-switch button,
  .tournament-rule-grid fieldset button { padding-inline: 6px; font-size: 11px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hall-tournaments-page { padding: 9px max(52px, calc(env(safe-area-inset-right) + 42px)) 14px; }
  .tournament-page-hero { grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 9px; padding-bottom: 8px; }
  .tournament-crest { width: 43px; }
  .tournament-page-hero h1 { font-size: 25px; }
  .tournament-page-hero p { display: none; }
  .tournament-page-hero ul { display: flex; grid-column: auto; gap: 14px; font-size: 9px; }
  .tournament-page-hero li:nth-child(3) { display: none; }
  .tournament-page-grid { grid-template-columns: minmax(0, 1fr) minmax(230px, 27%); gap: 10px; }
  .tournament-page-grid > .tournament-primary { gap: 9px; }
  .tournament-launch-card { grid-template-columns: minmax(200px, 0.85fr) minmax(360px, 1.4fr); padding: 10px 12px; gap: 8px 12px; }
  .tournament-launch-card > header { grid-column: 1; }
  .tournament-launch-card > header > span,
  .tournament-format-description { display: none; }
  .tournament-kind-switch { grid-column: 1; }
  .tournament-rule-grid { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 0.8fr 1.2fr; gap: 10px; }
  .tournament-launch-card > footer { grid-column: 1 / -1; grid-template-columns: auto minmax(200px, 280px); }
  .tournament-launch-card > footer > div strong { font-size: 23px; }
  .tournament-bracket-panel { padding: 9px; }
  .tournament-panel-title { margin-bottom: 7px; }
  .tournament-round-column { width: 230px; min-width: 230px; }
  .tournament-round-column > header { min-height: 38px; padding-bottom: 5px; }
  .tournament-pairing { padding: 7px; }
  .tournament-control-panel { position: static; max-height: none; padding: 10px; }
  .tournament-instance-list { max-height: 370px; }
}

@media (max-width: 900px) and (max-height: 540px) and (orientation: landscape) {
  .hall-tournaments-page {
    padding-inline-start: max(14px, calc(env(safe-area-inset-left) + 10px));
    padding-inline-end: max(14px, calc(env(safe-area-inset-right) + 10px));
  }

  .tournament-page-grid { grid-template-columns: minmax(0, 1fr); }
  .tournament-launch-card { grid-template-columns: minmax(0, 1fr); }
  .tournament-launch-card > header,
  .tournament-kind-switch,
  .tournament-rule-grid,
  .tournament-launch-card > footer { grid-column: 1; grid-row: auto; }
  .tournament-rule-grid { grid-template-columns: minmax(190px, 0.8fr) minmax(290px, 1.2fr); }
  .tournament-control-panel { position: static; max-height: none; }
  .tournament-instance-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
}

[dir="rtl"] .tournament-page-hero,
[dir="rtl"] .tournament-instance,
[dir="rtl"] .tournament-launch-card,
[dir="rtl"] .tournament-bracket-panel,
[dir="rtl"] .tournament-control-panel { text-align: right; }

[dir="rtl"] .tournament-rule-grid label select { padding: 0 13px 0 40px; }

@media (prefers-reduced-motion: reduce) {
  .hall-tournaments-page *,
  .hall-tournaments-page *::before,
  .hall-tournaments-page *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Tournament browser v2: operator-published events and connected brackets. */
.hall-tournaments-page {
  --tournament-gold: #d8ae4e;
  --tournament-gold-soft: #a98435;
  --tournament-ink: #080b09;
  --tournament-green: #0b2a1e;
  --tournament-line: rgb(200 161 70 / 42%);
  display: block;
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 2.1vw, 32px) clamp(18px, 2.5vw, 40px) calc(104px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  color: #f3ead5;
  background:
    radial-gradient(circle at 73% 4%, rgb(179 132 43 / 10%), transparent 32%),
    linear-gradient(180deg, rgb(4 12 9 / 96%), rgb(5 8 7 / 98%));
  scrollbar-gutter: stable;
}

.hall-tournaments-page .tournament-page-hero {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(220px, auto);
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgb(197 157 67 / 22%);
}

.hall-tournaments-page .tournament-page-hero h1 {
  margin: 1px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: .96;
  text-transform: uppercase;
}

.hall-tournaments-page .tournament-page-hero small,
.hall-tournaments-page .tournament-event-card small,
.hall-tournaments-page .tournament-entrants-panel small,
.hall-tournaments-page .tournament-panel-title small {
  color: #b99445;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hall-tournaments-page .tournament-page-hero p {
  max-width: 760px;
  margin: 0;
  color: #aaa496;
  font-size: 13px;
  line-height: 1.45;
}

.hall-tournaments-page .tournament-page-hero > em {
  max-width: 310px;
  padding: 10px 13px;
  border: 1px solid rgb(206 166 75 / 24%);
  border-radius: 8px;
  color: #cbbd9d;
  background: rgb(19 24 20 / 75%);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .08em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.hall-tournaments-page .tournament-crest {
  position: relative;
  display: grid;
  width: 62px;
  aspect-ratio: 1;
  border: 1px solid #8b6b28;
  border-radius: 50%;
  color: #ddb75b;
  background: radial-gradient(circle, #153c2b, #07110d 68%);
  box-shadow: inset 0 0 0 5px rgb(4 8 6 / 78%), 0 8px 28px rgb(0 0 0 / 38%);
  place-items: center;
}

.hall-tournaments-page .tournament-crest::before,
.hall-tournaments-page .tournament-crest::after,
.hall-tournaments-page .tournament-crest > i { display: none; }
.hall-tournaments-page .tournament-crest > span { display: grid; width: 33px; place-items: center; }
.hall-tournaments-page .tournament-crest svg { width: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.tournament-status-tabs {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid rgb(183 145 61 / 18%);
  border-radius: 10px;
  background: rgb(6 11 8 / 76%);
}

.tournament-status-tabs button {
  display: inline-flex;
  min-height: 44px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #8e8b84;
  background: transparent;
  font: 700 12px/1 var(--font-ui);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.tournament-status-tabs button b {
  display: grid;
  min-width: 22px;
  min-height: 22px;
  padding: 0 5px;
  border-radius: 50%;
  color: #d7c498;
  background: #17231c;
  font-size: 10px;
  place-items: center;
}

.tournament-status-tabs button.is-selected {
  border-color: rgb(213 173 75 / 45%);
  color: #f0dfb7;
  background: linear-gradient(180deg, rgb(49 57 40 / 88%), rgb(18 28 22 / 92%));
  box-shadow: inset 0 -2px #b48a34;
}

.tournament-status-tabs .tournament-refresh {
  margin-inline-start: auto;
  color: #c5aa6b;
}

.tournament-browser-layout {
  display: grid;
  grid-template-columns: minmax(248px, 300px) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 14px;
  align-items: start;
}

.hall-tournaments-page .tournament-control-panel {
  position: sticky;
  top: 0;
  display: block;
  min-width: 0;
  max-height: calc(100dvh - 238px);
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgb(190 150 64 / 20%);
  border-radius: 10px;
  background: linear-gradient(145deg, rgb(16 22 18 / 96%), rgb(7 11 9 / 96%));
  box-shadow: 0 16px 42px rgb(0 0 0 / 28%);
}

.hall-tournaments-page .tournament-instance-list {
  display: grid;
  max-height: calc(100dvh - 256px);
  gap: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hall-tournaments-page .tournament-instance {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 124px;
  gap: 6px 10px;
  align-content: center;
  padding: 13px 13px 12px 16px;
  overflow: hidden;
  border: 1px solid rgb(177 145 73 / 14%);
  border-radius: 8px;
  color: #bdb7aa;
  background: rgb(10 16 12 / 88%);
  text-align: start;
}

.hall-tournaments-page .tournament-instance::before {
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 2px;
  background: transparent;
  content: "";
}

.hall-tournaments-page .tournament-instance.is-selected {
  border-color: rgb(215 175 79 / 48%);
  background: linear-gradient(110deg, rgb(28 48 34 / 94%), rgb(13 19 15 / 96%));
  box-shadow: inset 0 0 24px rgb(121 93 33 / 10%);
}
.hall-tournaments-page .tournament-instance.is-selected::before { background: #d7aa48; }

.hall-tournaments-page .tournament-instance > span {
  display: inline-flex;
  width: max-content;
  gap: 6px;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid rgb(198 158 68 / 25%);
  border-radius: 999px;
  color: #cbae6e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hall-tournaments-page .tournament-instance > span i,
.tournament-event-card > header > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2a53b;
  box-shadow: 0 0 9px #e2a53b;
}
.hall-tournaments-page .tournament-instance strong { grid-column: 1 / -1; overflow: visible; color: #f0e5ca; font: 600 16px/1.12 var(--font-display); letter-spacing: .025em; white-space: normal; }
.hall-tournaments-page .tournament-instance small { grid-column: 1 / -1; overflow: visible; color: #918c82; font-size: 10px; line-height: 1.25; white-space: normal; }
.hall-tournaments-page .tournament-instance em { color: #c1a45d; font-size: 10px; font-style: normal; }
.hall-tournaments-page .tournament-instance time { color: #817c73; font-size: 9px; text-align: end; }

.tournament-primary,
.tournament-detail { display: grid; min-width: 0; gap: 12px; }

.tournament-event-card,
.tournament-entrants-panel,
.hall-tournaments-page .tournament-bracket-panel,
.hall-tournaments-page .tournament-bracket-empty {
  min-width: 0;
  padding: clamp(15px, 1.6vw, 22px);
  border: 1px solid rgb(194 154 67 / 22%);
  border-radius: 10px;
  background: linear-gradient(145deg, rgb(18 25 20 / 96%), rgb(8 12 10 / 97%));
  box-shadow: 0 18px 46px rgb(0 0 0 / 25%);
}

.tournament-event-card > header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.tournament-event-card h1 { margin: 4px 0 6px; color: #f4e8ca; font: 600 clamp(25px, 2.4vw, 38px)/1.04 var(--font-display); letter-spacing: .02em; }
.tournament-event-card p { max-width: 780px; margin: 0; color: #a7a196; font-size: 12px; line-height: 1.45; }
.tournament-event-card > header > span,
.hall-tournaments-page .tournament-panel-title > span {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 30px;
  gap: 7px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgb(208 169 78 / 32%);
  border-radius: 999px;
  color: #e0bd6c;
  background: rgb(35 33 21 / 82%);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tournament-event-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgb(198 158 67 / 15%);
  border-radius: 8px;
  background: rgb(190 151 61 / 12%);
}
.tournament-event-facts article { display: grid; gap: 5px; min-height: 68px; align-content: center; padding: 11px 13px; background: #0b110e; }
.tournament-event-facts strong { color: #ddd2b9; font-size: 12px; line-height: 1.25; }

.tournament-prizes { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 14px; }
.tournament-prizes > div { display: flex; min-width: 0; gap: 7px; flex-wrap: wrap; }
.tournament-prizes article { display: inline-flex; min-height: 38px; gap: 8px; align-items: center; padding: 7px 11px 7px 7px; border: 1px solid rgb(198 157 67 / 22%); border-radius: 7px; background: rgb(23 29 23 / 85%); }
.tournament-prizes article i { display: grid; width: 25px; height: 25px; border-radius: 50%; color: #211706; background: linear-gradient(#ebc469, #a77b25); font-size: 11px; font-style: normal; font-weight: 900; place-items: center; }
.tournament-prizes article span { color: #d8ccb0; font-size: 11px; }
.tournament-prizes p { margin: 0; color: #89857b; font-size: 11px; }

.tournament-entrants-panel > header { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.tournament-entrants-panel > header > div { display: grid; gap: 3px; }
.tournament-entrants-panel > header strong { color: #ebd8a8; font-size: 22px; }
.tournament-entrants-panel > header button,
.hall-tournaments-page .tournament-pairing footer button {
  display: inline-flex;
  min-height: 44px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid #c69d43;
  border-radius: 7px;
  color: #151006;
  background: linear-gradient(180deg, #e0bd65, #a77c28);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.tournament-entrants-panel > header button.is-secondary { color: #d5ba78; background: transparent; }
.tournament-entrants-panel > header button:disabled { border-color: #34342d; color: #67665f; background: #161814; }
.tournament-registration-confirm { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: #8bbf94; font-size: 11px; }
.tournament-registration-confirm i { display: grid; width: 20px; height: 20px; border: 1px solid #668d6c; border-radius: 50%; font-style: normal; place-items: center; }
.tournament-entrant-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.tournament-entrant-list article { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; padding: 8px; border: 1px solid rgb(171 142 79 / 13%); border-radius: 7px; background: #0b110e; }
.tournament-entrant-list article.is-you { border-color: rgb(205 166 75 / 50%); background: #12241a; }
.tournament-entrant-list article > span { display: grid; width: 38px; height: 38px; overflow: hidden; border: 1px solid #8c6d2c; border-radius: 50%; color: #dec47f; background: #18241d; font-size: 10px; font-weight: 800; place-items: center; }
.tournament-entrant-list img { width: 100%; height: 100%; object-fit: cover; }
.tournament-entrant-list article div { display: grid; min-width: 0; gap: 2px; }
.tournament-entrant-list article strong { overflow: hidden; color: #ddd3bb; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tournament-entrant-list article small { font-size: 8px; }
.tournament-entrant-list article b { color: #aa965f; font-size: 10px; }
.tournament-entrant-list > p { grid-column: 1 / -1; margin: 4px 0; color: #88847b; font-size: 11px; }

.hall-tournaments-page .tournament-panel-title { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin: 0 0 12px; }
.hall-tournaments-page .tournament-panel-title h2 { margin: 3px 0 0; color: #eee2c6; font: 600 23px/1.05 var(--font-display); }
.hall-tournaments-page .tournament-champion { display: flex; width: 100%; min-height: 58px; gap: 12px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgb(222 180 77 / 44%); border-radius: 8px; color: #e3bd5b; background: linear-gradient(90deg, #102a1e, #17160e); }
.hall-tournaments-page .tournament-champion > span { display: grid; width: 34px; place-items: center; }
.hall-tournaments-page .tournament-champion svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hall-tournaments-page .tournament-champion > div { display: grid; gap: 2px; }
.hall-tournaments-page .tournament-champion strong { color: #f1e1b8; font: 600 17px/1 var(--font-display); }

.hall-tournaments-page .tournament-bracket-scroll {
  display: grid;
  max-width: 100%;
  gap: 16px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: #735d2c #0c110e;
}

.tournament-bracket-lane { min-width: max-content; padding: 11px 12px 15px; border: 1px solid rgb(187 150 68 / 13%); border-radius: 9px; background: rgb(4 9 7 / 58%); }
.tournament-bracket-lane > header { position: sticky; left: 0; display: flex; width: min(100%, calc(100vw - 390px)); min-width: 230px; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.tournament-bracket-lane > header strong { color: #d7bd7c; font: 600 14px/1 var(--font-display); letter-spacing: .045em; }
.tournament-bracket-lane > header span { color: #6f736d; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.tournament-lane-board { display: flex; height: var(--board-height); min-height: 360px; gap: 48px; align-items: stretch; }

.hall-tournaments-page .tournament-round-column {
  position: relative;
  flex: 0 0 272px;
  width: 272px;
  min-width: 272px;
  height: var(--board-height);
}
.hall-tournaments-page .tournament-round-column > header { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; min-height: 36px; align-items: baseline; justify-content: space-between; padding: 0 3px 7px; border-bottom: 1px solid rgb(180 145 67 / 16%); }
.hall-tournaments-page .tournament-round-column > header small { color: #716f68; font-size: 8px; }
.hall-tournaments-page .tournament-round-column > header strong { color: #d6c493; font: 600 13px/1 var(--font-display); }
.tournament-round-matches { position: absolute; inset: 40px 0 0; }
.tournament-match-slot { position: absolute; z-index: 1; top: calc((var(--slot) + .5) * 100% / var(--slots)); right: 0; left: 0; transform: translateY(-50%); }
.tournament-match-slot.has-previous::before,
.tournament-match-slot.has-next::after { position: absolute; top: 50%; width: 25px; height: 1px; background: var(--tournament-line); content: ""; }
.tournament-match-slot.has-previous::before { left: -25px; }
.tournament-match-slot.has-next::after { right: -25px; }
.tournament-round-connector { position: absolute; z-index: 0; top: calc((var(--pair) + .5) * 100% / var(--slots)); right: -25px; width: 25px; height: calc(100% / var(--slots)); border: solid var(--tournament-line); border-width: 1px 1px 1px 0; }

.hall-tournaments-page .tournament-pairing {
  display: grid;
  gap: 0;
  padding: 7px;
  border: 1px solid rgb(166 139 77 / 20%);
  border-radius: 8px;
  background: linear-gradient(155deg, rgb(19 27 21 / 98%), rgb(8 12 10 / 98%));
  box-shadow: 0 8px 20px rgb(0 0 0 / 25%);
}
.hall-tournaments-page .tournament-pairing.is-live { border-color: #bc8e34; box-shadow: 0 0 0 1px rgb(222 174 65 / 16%), 0 8px 24px rgb(0 0 0 / 34%); }
.hall-tournaments-page .tournament-pairing > header { display: flex; min-height: 22px; gap: 7px; align-items: center; justify-content: flex-end; padding: 0 4px 5px; border-bottom: 1px solid rgb(177 147 77 / 12%); }
.hall-tournaments-page .tournament-pairing > header span { color: #7f8079; font-size: 8px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.hall-tournaments-page .tournament-pairing > header i { width: 6px; height: 6px; border-radius: 50%; background: #e4a33a; box-shadow: 0 0 9px #d88d25; }
.hall-tournaments-page .tournament-pairing-player { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 25px; min-height: 31px; gap: 7px; align-items: center; padding: 3px 5px; border-bottom: 1px solid rgb(177 147 77 / 9%); color: #aaa69c; }
.hall-tournaments-page .tournament-pairing-player i { display: grid; width: 19px; height: 19px; border: 1px solid #5c5237; border-radius: 50%; color: #918366; font-size: 8px; font-style: normal; place-items: center; }
.hall-tournaments-page .tournament-pairing-player strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hall-tournaments-page .tournament-pairing-player em { display: grid; width: 18px; height: 18px; border-radius: 4px; color: #07120b; background: #6cab79; font-size: 8px; font-style: normal; font-weight: 900; place-items: center; }
.hall-tournaments-page .tournament-pairing-player em.is-loss { color: #d0c9b9; background: #4a4740; }
.hall-tournaments-page .tournament-pairing-player b { color: #d5bd82; font-size: 13px; text-align: end; }
.hall-tournaments-page .tournament-pairing-player.is-winner { color: #f1e2bb; background: rgb(48 86 58 / 20%); }
.hall-tournaments-page .tournament-pairing-player.is-loser { color: #6f6d68; }
.hall-tournaments-page .tournament-pairing > footer { display: flex; min-height: 30px; gap: 8px; align-items: center; justify-content: space-between; padding: 5px 3px 0; }
.hall-tournaments-page .tournament-pairing > footer small { color: #77756f; font-size: 8px; }
.hall-tournaments-page .tournament-pairing footer button { min-height: 34px; padding: 5px 9px; font-size: 9px; }

.hall-tournaments-page .tournament-bracket-empty { display: flex; min-height: 180px; gap: 16px; align-items: center; justify-content: center; color: #88847a; text-align: start; }
.hall-tournaments-page .tournament-bracket-empty > span,
.hall-tournaments-page .tournament-empty-state > span { display: grid; width: 44px; flex: 0 0 auto; color: #9b782d; place-items: center; }
.hall-tournaments-page .tournament-bracket-empty svg,
.hall-tournaments-page .tournament-empty-state svg { width: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.hall-tournaments-page .tournament-bracket-empty strong { display: block; margin-bottom: 6px; color: #d4c39a; font: 600 17px/1 var(--font-display); }
.hall-tournaments-page .tournament-bracket-empty p { max-width: 400px; margin: 0; font-size: 11px; line-height: 1.45; }
.hall-tournaments-page .tournament-empty-state { display: flex; min-height: 170px; gap: 12px; align-items: center; justify-content: center; padding: 20px; color: #858178; text-align: center; }
.hall-tournaments-page .tournament-empty-state p { margin: 0; font-size: 11px; line-height: 1.4; }
.hall-tournaments-page .tournament-error { margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgb(177 73 52 / 45%); border-radius: 7px; color: #dc9a8d; background: rgb(66 24 18 / 55%); font-size: 11px; }

@media (max-width: 1024px) {
  .hall-tournaments-page { padding-inline: 16px; }
  .hall-tournaments-page .tournament-page-hero { grid-template-columns: 58px minmax(0, 1fr); }
  .hall-tournaments-page .tournament-page-hero > em { display: none; }
  .hall-tournaments-page .tournament-crest { width: 54px; }
  .tournament-browser-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .tournament-event-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tournament-entrant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hall-tournaments-page .tournament-round-column { flex-basis: 252px; width: 252px; min-width: 252px; }
}

@media (max-width: 860px) and (orientation: portrait) {
  .hall-tournaments-page { padding: 16px 14px calc(102px + env(safe-area-inset-bottom)); }
  .hall-tournaments-page .tournament-page-hero { gap: 12px; margin-bottom: 12px; padding-bottom: 12px; }
  .hall-tournaments-page .tournament-page-hero h1 { font-size: clamp(28px, 7vw, 42px); }
  .hall-tournaments-page .tournament-page-hero p { font-size: 12px; }
  .tournament-status-tabs { position: sticky; z-index: 8; top: -16px; overflow-x: auto; background: rgb(5 11 8 / 96%); }
  .tournament-status-tabs button { flex: 0 0 auto; padding-inline: 14px; }
  .tournament-status-tabs .tournament-refresh span { display: none; }
  .tournament-browser-layout { grid-template-columns: minmax(0, 1fr); }
  .hall-tournaments-page .tournament-control-panel { position: static; max-height: none; }
  .hall-tournaments-page .tournament-instance-list { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .hall-tournaments-page .tournament-instance { flex: 0 0 min(78vw, 300px); }
  .tournament-prizes { grid-template-columns: 1fr; }
  .tournament-bracket-lane > header { width: min(100%, calc(100vw - 70px)); }
}

@media (max-width: 520px) and (orientation: portrait) {
  .hall-tournaments-page .tournament-page-hero { grid-template-columns: 46px minmax(0, 1fr); }
  .hall-tournaments-page .tournament-crest { width: 44px; }
  .hall-tournaments-page .tournament-page-hero p { display: none; }
  .tournament-status-tabs { padding: 4px; }
  .tournament-status-tabs button { min-height: 44px; padding: 8px 10px; font-size: 10px; }
  .tournament-status-tabs .tournament-refresh { display: none; }
  .tournament-event-card > header { display: grid; }
  .tournament-event-card > header > span { width: max-content; }
  .tournament-event-facts { grid-template-columns: 1fr 1fr; }
  .tournament-event-facts article { min-height: 62px; }
  .tournament-entrant-list { grid-template-columns: 1fr; }
  .tournament-entrants-panel > header { align-items: flex-start; }
  .tournament-entrants-panel > header button { max-width: 58%; padding-inline: 10px; }
  .hall-tournaments-page .tournament-panel-title { display: grid; }
  .hall-tournaments-page .tournament-panel-title > span { width: max-content; }
  .hall-tournaments-page .tournament-round-column { flex-basis: min(76vw, 260px); width: min(76vw, 260px); min-width: min(76vw, 260px); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hall-tournaments-page { padding: 9px max(56px, calc(env(safe-area-inset-right) + 46px)) 78px max(56px, calc(env(safe-area-inset-left) + 46px)); }
  .hall-tournaments-page .tournament-page-hero { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; margin-bottom: 8px; padding-bottom: 8px; }
  .hall-tournaments-page .tournament-crest { width: 39px; }
  .hall-tournaments-page .tournament-page-hero h1 { font-size: 25px; }
  .hall-tournaments-page .tournament-page-hero p,
  .hall-tournaments-page .tournament-page-hero > em { display: none; }
  .tournament-status-tabs { margin-bottom: 8px; }
  .tournament-status-tabs button { min-height: 40px; padding: 6px 12px; font-size: 10px; }
  .tournament-browser-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 8px; }
  .hall-tournaments-page .tournament-control-panel { position: static; max-height: none; }
  .hall-tournaments-page .tournament-instance-list { max-height: none; }
  .hall-tournaments-page .tournament-instance { min-height: 104px; padding: 9px 10px 8px 13px; }
  .tournament-event-card,
  .tournament-entrants-panel,
  .hall-tournaments-page .tournament-bracket-panel { padding: 11px; }
  .tournament-event-card h1 { font-size: 24px; }
  .tournament-event-card p { display: none; }
  .tournament-event-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 9px; }
  .tournament-event-facts article { min-height: 50px; padding: 7px 8px; }
  .tournament-prizes { display: none; }
  .tournament-entrant-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 132px; overflow-y: auto; }
  .hall-tournaments-page .tournament-round-column { flex-basis: 240px; width: 240px; min-width: 240px; }
}

[dir="rtl"] .tournament-page-hero,
[dir="rtl"] .tournament-instance,
[dir="rtl"] .tournament-event-card,
[dir="rtl"] .tournament-entrants-panel,
[dir="rtl"] .tournament-bracket-panel { text-align: right; }

[dir="rtl"] .tournament-match-slot.has-previous::before { right: -25px; left: auto; }
[dir="rtl"] .tournament-match-slot.has-next::after { right: auto; left: -25px; }
[dir="rtl"] .tournament-round-connector { right: auto; left: -25px; border-width: 1px 0 1px 1px; }

/* Daily Lucky Shot: the table and physics remain the normal game visualizer. */
.hall-stage-actions {
  display: grid;
  grid-template-columns: minmax(0, 350px) minmax(0, 350px);
  gap: 14px;
  justify-content: center;
  align-items: stretch;
}

.hall-stage-hero .hall-stage-actions .hall-play-button {
  width: 100%;
}

.hall-lucky-shot-button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: clamp(64px, 8vh, 82px);
  padding: 10px 16px;
  color: #f5edda;
  text-align: left;
  background:
    radial-gradient(circle at 16% 0%, rgba(229, 187, 78, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(20, 25, 22, 0.97), rgba(4, 7, 6, 0.98));
  border: 1px solid rgba(219, 177, 66, 0.7);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 237, 181, 0.1);
}

.hall-lucky-shot-button:hover,
.hall-lucky-shot-button:focus-visible {
  border-color: #f0ce72;
  transform: translateY(-1px);
}

.hall-lucky-shot-button > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hall-lucky-shot-button strong {
  color: #f2d27b;
  font: 700 clamp(18px, 1.45vw, 25px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hall-lucky-shot-button small {
  overflow: hidden;
  color: #c8c1b5;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-lucky-shot-button > b {
  color: #e5bf57;
  font-size: 12px;
  text-transform: uppercase;
}

.hall-lucky-target,
.lucky-shot-panel__target {
  position: relative;
  display: block;
  width: 52px;
  aspect-ratio: 1;
  background: radial-gradient(circle, #f7dd65 0 14%, #c89a25 15% 31%, #6d1c2b 32% 52%, #2d6c68 53% 72%, rgba(239, 236, 220, 0.86) 73% 82%, transparent 83%);
  border-radius: 50%;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.46));
}

.hall-lucky-target i,
.lucky-shot-panel__target i {
  position: absolute;
  inset: 44%;
  background: #fff2a3;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 223, 96, 0.8);
}

.game-room-lucky-shot.is-lucky-shot-selection .engine-room-stage {
  background: #030806;
}

body:has(.game-room-lucky-shot.is-lucky-shot-selection) .game-orientation-lock {
  display: none !important;
}

.game-room-lucky-shot.is-lucky-shot-selection .engine-room-backdrop {
  background:
    linear-gradient(90deg, rgba(1, 5, 4, 0.82), rgba(2, 9, 7, 0.26) 32%, rgba(2, 9, 7, 0.26) 68%, rgba(1, 5, 4, 0.82)),
    linear-gradient(180deg, rgba(1, 5, 4, 0.42), rgba(1, 4, 3, 0.82)),
    var(--hall-club-background) center 58% / cover no-repeat,
    var(--hall-club-preview) center 58% / cover no-repeat;
  opacity: 1;
  filter: saturate(0.82) contrast(1.05);
}

.game-room-lucky-shot.is-lucky-shot-selection .game-lobby-button {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  bottom: auto;
  width: auto;
  min-width: 92px;
  min-height: 46px;
  color: #dec06e;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(9, 22, 17, 0.94), rgba(3, 10, 8, 0.96));
  border-color: rgba(222, 181, 79, 0.54);
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 244, 203, 0.05);
}

.game-room-lucky-shot.is-lucky-shot-selection .game-lobby-button:hover,
.game-room-lucky-shot.is-lucky-shot-selection .game-lobby-button:focus-visible {
  color: #f3d982;
  border-color: rgba(243, 211, 125, 0.82);
}

.lucky-shot-selection {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  min-width: 0;
  min-height: 100dvh;
  align-content: center;
  justify-items: center;
  gap: clamp(18px, 2.5vh, 28px);
  padding: max(22px, env(safe-area-inset-top)) clamp(26px, 4vw, 72px) max(26px, env(safe-area-inset-bottom));
  overflow: auto;
  color: #f3ecdc;
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.009) 8px 9px),
    radial-gradient(circle at 50% 38%, rgba(23, 79, 52, 0.12), transparent 46%);
  scrollbar-color: #a37a2b rgba(2, 8, 6, 0.7);
  isolation: isolate;
}

.lucky-shot-selection::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, rgba(3, 10, 8, 0.18), rgba(1, 5, 4, 0.6)),
    radial-gradient(ellipse at 50% 44%, transparent 0 24%, rgba(0, 0, 0, 0.48) 78%);
  pointer-events: none;
}

html[dir="rtl"] .lucky-shot-selection {
  direction: rtl;
}

.lucky-shot-selection__brand {
  display: grid;
  min-height: 66px;
  place-items: center;
}

.lucky-shot-selection__brand .hall-brand {
  position: static;
  display: grid;
  width: min(280px, 52vw);
  transform: none;
}

.lucky-shot-selection__brand .hall-brand > svg {
  display: block;
  width: 38px;
  height: 22px;
}

.lucky-shot-selection__brand .hall-brand > strong {
  font-size: clamp(20px, 2vw, 31px);
}

.lucky-shot-selection__brand .hall-brand > span {
  display: flex;
  margin-top: 4px;
  font-size: 9px;
}

.lucky-shot-selection__content {
  position: relative;
  display: grid;
  width: min(1120px, 100%);
  gap: clamp(18px, 2.4vh, 27px);
  padding: clamp(24px, 2.4vw, 36px);
  background:
    linear-gradient(90deg, rgba(83, 48, 17, 0.1), transparent 18%, transparent 82%, rgba(83, 48, 17, 0.1)),
    linear-gradient(180deg, rgba(7, 21, 16, 0.94), rgba(3, 11, 8, 0.965));
  border: 1px solid rgba(209, 167, 66, 0.42);
  border-radius: 5px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.68), inset 0 1px rgba(255, 241, 191, 0.055);
  backdrop-filter: blur(17px) saturate(0.92);
}

.lucky-shot-selection__content::before,
.lucky-shot-selection__content::after {
  position: absolute;
  left: 8%;
  width: 84%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(232, 190, 91, 0.72), transparent);
  pointer-events: none;
}

.lucky-shot-selection__content::before { top: -1px; }
.lucky-shot-selection__content::after { bottom: -1px; opacity: 0.58; }

.lucky-shot-selection__hero {
  display: flex;
  min-width: 0;
  gap: clamp(18px, 2vw, 28px);
  align-items: center;
  justify-content: center;
  text-align: left;
}

html[dir="rtl"] .lucky-shot-selection__hero {
  text-align: right;
}

.lucky-shot-selection__hero > div {
  min-width: 0;
}

.lucky-shot-selection__hero small {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6ad4e;
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lucky-shot-selection__hero small::after {
  width: clamp(46px, 5vw, 72px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(224, 181, 76, 0.75), transparent);
}

html[dir="rtl"] .lucky-shot-selection__hero small::after {
  background: linear-gradient(270deg, rgba(224, 181, 76, 0.75), transparent);
}

.lucky-shot-selection h1 {
  max-width: 850px;
  margin: 5px 0 0;
  color: #f5edda;
  font: 520 clamp(38px, 4.3vw, 66px)/0.94 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.018em;
  text-wrap: balance;
  text-transform: uppercase;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.56);
}

.lucky-shot-selection__target {
  position: relative;
  display: block;
  width: clamp(74px, 6.4vw, 98px);
  flex: 0 0 auto;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, #f4d95d 0 11%, #be8c25 12% 25%, #792130 26% 43%, #2a6961 44% 61%, rgba(232, 225, 202, 0.78) 62% 70%, rgba(5, 15, 12, 0.92) 71% 100%);
  border: 1px solid rgba(240, 204, 110, 0.62);
  border-radius: 50%;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.46), inset 0 0 0 5px rgba(4, 13, 10, 0.82), 0 0 28px rgba(215, 166, 54, 0.13);
}

.lucky-shot-selection__target i {
  position: absolute;
  inset: 46%;
  background: #fff0a2;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 227, 122, 0.88);
}

.lucky-shot-selection__target b {
  position: absolute;
  top: -11%;
  left: 31%;
  width: 38%;
  height: 23%;
  background: linear-gradient(180deg, #f4d276, #aa731c);
  clip-path: polygon(0 100%, 7% 22%, 29% 55%, 50% 0, 71% 55%, 93% 22%, 100% 100%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}

.lucky-shot-family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
}

.lucky-shot-family-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 255px;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  color: #f4ead4;
  text-align: inherit;
  background: #06100d;
  border: 1px solid rgba(211, 169, 70, 0.26);
  border-radius: 4px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.03);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.lucky-shot-family-card::before {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: 42%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(229, 184, 78, 0.92));
  opacity: 0.52;
  transition: width 180ms ease, opacity 180ms ease;
}

.lucky-shot-family-card:hover,
.lucky-shot-family-card:focus-visible {
  border-color: rgba(238, 201, 109, 0.76);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 247, 215, 0.05);
  transform: translateY(-3px);
}

.lucky-shot-family-card:hover::before,
.lucky-shot-family-card:focus-visible::before {
  width: 82%;
  opacity: 1;
}

.lucky-shot-family-card:active {
  transform: translateY(1px);
}

.lucky-shot-family-card:focus-visible {
  outline: 2px solid #f1d47c;
  outline-offset: 3px;
}

.lucky-shot-family-card__scene {
  position: relative;
  display: block;
  min-height: 185px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 12, 9, 0.16), rgba(2, 7, 5, 0.83)),
    var(--hall-club-background) center 62% / 155% auto no-repeat,
    #0a1b15;
}

.lucky-shot-family-card.is-pool .lucky-shot-family-card__scene { background-position: center, 34% 62%, center; }
.lucky-shot-family-card.is-snooker .lucky-shot-family-card__scene { background-position: center, 52% 58%, center; }
.lucky-shot-family-card.is-pyramid .lucky-shot-family-card__scene { background-position: center, 68% 61%, center; }

.lucky-shot-family-card__scene::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 10, 8, 0.66), transparent 46%, rgba(3, 10, 8, 0.18)),
    linear-gradient(180deg, transparent 42%, rgba(2, 8, 6, 0.74));
  pointer-events: none;
}

.lucky-shot-family-card__number {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 4;
  color: rgba(245, 227, 177, 0.52);
  font: 400 12px/1 "KottDisplay", Georgia, serif;
  letter-spacing: 0.14em;
}

html[dir="rtl"] .lucky-shot-family-card__number {
  right: 14px;
  left: auto;
}

.lucky-shot-family-card__table {
  position: absolute;
  inset: 20% 7% 8%;
  z-index: 2;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(180deg, rgba(18, 87, 56, 0.88), rgba(7, 48, 30, 0.94));
  border: 4px solid rgba(91, 45, 18, 0.94);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(220, 170, 66, 0.56), inset 0 0 28px rgba(0, 0, 0, 0.48), 0 13px 22px rgba(0, 0, 0, 0.54);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  transform: perspective(380px) rotateX(10deg);
  transform-origin: 50% 100%;
}

.lucky-shot-family-card.is-snooker .lucky-shot-family-card__table {
  background: linear-gradient(180deg, rgba(24, 107, 59, 0.9), rgba(9, 61, 35, 0.96));
}

.lucky-shot-family-card.is-pyramid .lucky-shot-family-card__table {
  background: linear-gradient(180deg, rgba(25, 107, 66, 0.9), rgba(8, 58, 37, 0.96));
}

.lucky-shot-family-card__table::before,
.lucky-shot-family-card__table::after {
  position: absolute;
  z-index: 4;
  width: 9px;
  height: 9px;
  content: "";
  background: #020504;
  border: 1px solid rgba(222, 171, 68, 0.3);
  border-radius: 50%;
}

.lucky-shot-family-card__table::before {
  top: -4px;
  left: -3px;
}

.lucky-shot-family-card__table::after {
  right: -3px;
  bottom: -4px;
}

.lucky-shot-family-card__guide {
  position: absolute;
  top: 49%;
  right: 28%;
  z-index: 2;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, rgba(218, 191, 116, 0.12), rgba(240, 217, 151, 0.76));
  transform: rotate(-14deg);
  transform-origin: right center;
}

.lucky-shot-family-card__target {
  position: absolute;
  top: 30%;
  right: 13%;
  z-index: 3;
  display: block;
  width: clamp(36px, 3.7vw, 54px);
  aspect-ratio: 1;
  background: radial-gradient(circle, #efd453 0 15%, #b88928 16% 31%, #77202e 32% 49%, #2f6b62 50% 67%, rgba(229, 222, 202, 0.76) 68% 76%, rgba(4, 15, 11, 0.54) 77%);
  border-radius: 50%;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.38);
}

.lucky-shot-family-card__target i {
  position: absolute;
  inset: 45%;
  background: #fff0a0;
  border-radius: 50%;
}

.lucky-shot-family-card__discipline {
  position: absolute;
  bottom: 9%;
  left: 9%;
  z-index: 3;
  display: grid;
  width: clamp(52px, 5vw, 74px);
  aspect-ratio: 1;
  place-items: center;
  color: #e7c467;
  background: rgba(2, 13, 9, 0.76);
  border: 1px solid rgba(227, 188, 91, 0.54);
  border-radius: 50%;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.42), inset 0 0 0 4px rgba(1, 8, 6, 0.74);
  backdrop-filter: blur(6px);
}

.lucky-shot-family-card__discipline .hall-training-mark {
  width: 70%;
  height: 70%;
}

.lucky-shot-family-card__copy {
  position: relative;
  z-index: 5;
  display: grid;
  min-height: 69px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 15px 13px;
  background:
    linear-gradient(90deg, rgba(48, 85, 66, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(9, 23, 18, 0.98), rgba(3, 11, 8, 0.99));
  border-top: 1px solid rgba(215, 172, 69, 0.24);
}

.lucky-shot-family-card__copy > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.lucky-shot-family-card__copy strong {
  overflow: hidden;
  color: #f2e7cb;
  font: 560 clamp(20px, 1.75vw, 28px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lucky-shot-family-card__copy em {
  color: #9b9588;
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lucky-shot-family-card__copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  color: #e3c365;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(180, 126, 31, 0.1);
  border: 1px solid rgba(218, 173, 69, 0.24);
  border-radius: 2px;
}

.lucky-shot-family-card__copy small i {
  display: block;
  width: 5px;
  height: 5px;
  background: #dfb94f;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(223, 185, 79, 0.58);
}

.lucky-shot-family-card__copy > b {
  color: #d8b354;
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  transition: transform 180ms ease;
}

.lucky-shot-family-card:hover .lucky-shot-family-card__copy > b,
.lucky-shot-family-card:focus-visible .lucky-shot-family-card__copy > b {
  transform: translateX(3px);
}

html[dir="rtl"] .lucky-shot-family-card__copy > b {
  transform: scaleX(-1);
}

html[dir="rtl"] .lucky-shot-family-card:hover .lucky-shot-family-card__copy > b,
html[dir="rtl"] .lucky-shot-family-card:focus-visible .lucky-shot-family-card__copy > b {
  transform: scaleX(-1) translateX(3px);
}

.lucky-shot-family-card.is-recommended {
  border-color: rgba(227, 183, 78, 0.54);
}

.lucky-shot-selection__content > footer {
  display: flex;
  min-width: 0;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 1px;
}

.lucky-shot-selection__content > footer p {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #aaa496;
  font-size: clamp(10px, 0.85vw, 13px);
  line-height: 1.3;
  text-wrap: pretty;
}

.lucky-shot-selection__content > footer p > span {
  position: relative;
  display: block;
  width: 12px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid #bc9740;
  border-radius: 1px;
}

.lucky-shot-selection__content > footer p > span::before {
  position: absolute;
  top: -7px;
  left: 2px;
  width: 6px;
  height: 7px;
  content: "";
  border: 1px solid #bc9740;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.lucky-shot-selection__content > footer > b {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  color: rgba(225, 198, 127, 0.52);
  font: 500 9px/1 "KottDisplay", Georgia, serif;
  letter-spacing: 0.14em;
}

.lucky-shot-selection__content > footer > b i {
  width: 3px;
  height: 3px;
  background: #b98b2c;
  border-radius: 50%;
}

@media (max-width: 920px) {
  .lucky-shot-selection {
    gap: 13px;
    padding-inline: 18px;
  }

  .lucky-shot-selection__content {
    gap: 15px;
    padding: 20px;
  }

  .lucky-shot-family-card {
    min-height: 220px;
  }

  .lucky-shot-family-card__scene {
    min-height: 154px;
  }

  .lucky-shot-family-card__copy {
    min-height: 62px;
    padding: 10px 12px;
  }

  .lucky-shot-family-card__copy small {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 4px 6px;
  }

  html[dir="rtl"] .lucky-shot-family-card__copy small {
    right: auto;
    left: 7px;
  }
}

/* KOTT profile center: identity, replays, statistics, achievements and trophies. */
.hall-bottom-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hall-profile {
  min-height: 48px;
  border-radius: 4px;
  transition: background 160ms ease-out, box-shadow 160ms ease-out;
}

.hall-profile:focus-visible {
  outline: 2px solid #f1d486;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .hall-profile:hover {
    background: linear-gradient(90deg, rgba(25, 65, 48, .38), transparent 86%);
    box-shadow: inset 3px 0 #d2a94b;
  }
}

.hall-profile-center {
  --profile-gold: #d4a63a;
  --profile-gold-bright: #f1d486;
  --profile-ivory: #f4f0e8;
  --profile-muted: #a9a191;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: clamp(260px, 23vw, 340px) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  color: var(--profile-ivory);
  background:
    linear-gradient(90deg, rgba(3, 11, 8, .98), rgba(5, 18, 13, .92) 42%, rgba(4, 11, 8, .98)),
    radial-gradient(circle at 72% 0%, rgba(211, 162, 55, .13), transparent 36rem),
    repeating-linear-gradient(115deg, transparent 0 11px, rgba(255, 255, 255, .012) 11px 12px),
    #030806;
  font-family: "KottCondensed", "Arial Narrow", sans-serif;
}

.profile-identity-card {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(18px, 2.2vw, 34px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 35, 26, .97), rgba(4, 13, 9, .99)),
    radial-gradient(circle at 50% 4%, rgba(213, 166, 58, .15), transparent 18rem);
  border-inline-end: 1px solid rgba(216, 174, 77, .28);
  box-shadow: 18px 0 42px rgba(0, 0, 0, .28);
}

.profile-identity-card::before,
.profile-workspace__head::after {
  position: absolute;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(237, 199, 107, .58), transparent);
}

.profile-identity-card::before {
  inset: 0 18% auto;
  height: 1px;
}

.profile-identity-card__avatar {
  position: relative;
  display: block;
  width: min(184px, 74%);
  aspect-ratio: 1;
  align-self: center;
  padding: 5px;
  background: linear-gradient(145deg, #fff0a8, #8b591b 48%, #edc55f 82%, #5a350d);
  border: 1px solid #f1cf75;
  border-radius: 5px;
  box-shadow: 0 24px 44px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .4);
}

.profile-identity-card__avatar::after {
  position: absolute;
  inset: 8px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255, 229, 157, .44);
}

.profile-identity-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #17221d;
  border-radius: 2px;
}

.profile-identity-card__avatar > button {
  position: absolute;
  right: -8px;
  top: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  color: #f1d486;
  background: #0a1610;
  border: 1px solid #b9892f;
  border-radius: 4px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .42);
}

.profile-identity-card__avatar > i {
  position: absolute;
  right: -10px;
  bottom: -10px;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #191106;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(#f6df99, #bd8428);
  border: 3px solid #06100b;
  clip-path: polygon(50% 0, 90% 20%, 100% 66%, 72% 100%, 28% 100%, 0 66%, 10% 20%);
}

.profile-identity-card__name {
  margin-top: clamp(18px, 2.8vh, 30px);
  text-align: center;
}

.profile-identity-card__name small,
.profile-workspace__head small,
.profile-record-panel header small,
.profile-cue-panel small,
.profile-discipline-ledger > header small,
.profile-metric small,
.profile-identity-details dt,
.profile-level-track small {
  color: #c99c44;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.profile-identity-card__name h1 {
  margin: 6px 0 5px;
  overflow-wrap: anywhere;
  color: #fff4dc;
  font: 580 clamp(30px, 3vw, 48px)/.94 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .015em;
}

.profile-identity-card__name p {
  margin: 0;
  color: #d8bb74;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profile-level-track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  margin: clamp(18px, 3vh, 30px) 0 0;
  padding: 15px 0;
  border-top: 1px solid rgba(213, 171, 76, .18);
  border-bottom: 1px solid rgba(213, 171, 76, .18);
}

.profile-level-track > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.profile-level-track > span b {
  color: #f0d181;
  font-size: 19px;
}

.profile-level-track > i {
  display: block;
  height: 6px;
  overflow: hidden;
  background: #020604;
  border: 1px solid rgba(211, 168, 68, .22);
  border-radius: 99px;
  box-shadow: inset 0 1px 3px #000;
}

.profile-level-track > i b {
  display: block;
  width: calc(var(--profile-progress) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #8f6420, #f1cf74);
}

.profile-level-track > strong {
  color: #bdb4a2;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.profile-identity-details {
  display: grid;
  margin: 0;
}

.profile-identity-details > div {
  display: grid;
  grid-template-columns: minmax(72px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid rgba(213, 171, 76, .14);
}

.profile-identity-details dd {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  overflow-wrap: anywhere;
  color: #ece1c9;
  font-size: 14px;
  text-align: end;
}

.profile-identity-details dd span {
  font-family: system-ui, sans-serif;
  font-size: 20px;
}

.profile-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.profile-workspace__head {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(92px, 14vh, 142px);
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  padding: clamp(18px, 2.3vw, 34px) clamp(20px, 3.2vw, 52px) 18px;
}

.profile-workspace__head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.profile-workspace__head::after {
  right: clamp(20px, 3.2vw, 52px);
  bottom: 0;
  left: clamp(20px, 3.2vw, 52px);
  height: 1px;
}

.profile-workspace__head h2 {
  margin: 3px 0 5px;
  color: #fff2d4;
  font: 580 clamp(32px, 4vw, 58px)/.94 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.profile-workspace__head p {
  max-width: 760px;
  margin: 0;
  overflow-wrap: anywhere;
  color: #a9a191;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.35;
  text-wrap: pretty;
}

.profile-workspace__head > span {
  display: grid;
  min-width: 132px;
  gap: 5px;
  padding: 13px 16px;
  text-align: end;
  background: rgba(4, 12, 9, .72);
  border: 1px solid rgba(210, 168, 68, .2);
}

.profile-workspace__head > span b {
  color: #f0cf78;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
}

.hall-profile-center .hall-profile-tabs {
  display: flex;
  width: auto;
  min-width: 0;
  gap: 1px;
  margin: 0;
  padding: 7px clamp(20px, 3.2vw, 52px);
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(3, 10, 7, .68);
  border: 0;
  border-bottom: 1px solid rgba(210, 168, 68, .16);
  scrollbar-width: none;
}

.hall-profile-center .hall-profile-tabs::-webkit-scrollbar { display: none; }

.hall-profile-center .hall-profile-tabs button {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  min-height: 50px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(14px, 1.6vw, 24px);
  color: #a8a08e;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 720;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: color 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out;
}

.hall-profile-center .hall-profile-tabs svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.hall-profile-center .hall-profile-tabs button.is-active {
  color: #f2d584;
  background: linear-gradient(180deg, rgba(31, 72, 53, .32), transparent);
  border-bottom-color: #d4a63a;
}

.hall-profile-center .hall-profile-tabs button:focus-visible {
  outline: 2px solid #f0d486;
  outline-offset: -3px;
}

.profile-tab-panel {
  min-width: 0;
  min-height: 0;
  padding: clamp(14px, 2vw, 28px) clamp(20px, 3.2vw, 52px) max(34px, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(215, 170, 68, .38) transparent;
}

.profile-tab-panel:focus { outline: 0; }

.profile-tab-panel > .progression-page,
.profile-tab-panel > .hall-replay-page {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.profile-tab-panel > .progression-page .progression-head {
  min-height: 86px;
}

.profile-tab-panel .replay-library {
  width: 100%;
  padding: 0 0 32px;
}

.profile-tab-panel .hall-replay-page::before { display: none; }

.profile-metric-strip {
  display: grid;
  grid-template-columns: 1.14fr repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(211, 169, 72, .22);
  background: rgba(5, 16, 11, .84);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
}

.profile-metric-strip--extended {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-metric {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px clamp(13px, 1.7vw, 24px);
  border-inline-end: 1px solid rgba(211, 169, 72, .14);
}

.profile-metric:nth-child(4n) { border-inline-end: 0; }

.profile-metric.is-primary {
  background: linear-gradient(110deg, rgba(47, 87, 63, .42), rgba(13, 32, 23, .3));
  box-shadow: inset 3px 0 #d4a63a;
}

[dir="rtl"] .profile-metric.is-primary { box-shadow: inset -3px 0 #d4a63a; }

.profile-metric b {
  overflow-wrap: anywhere;
  color: #f1d383;
  font-size: clamp(22px, 2.4vw, 34px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.profile-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr);
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(14px, 2vw, 24px);
}

.profile-record-panel,
.profile-section-doors,
.profile-cue-panel,
.profile-discipline-ledger {
  min-width: 0;
  background: linear-gradient(145deg, rgba(16, 32, 24, .92), rgba(4, 11, 8, .96));
  border: 1px solid rgba(211, 169, 72, .2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.profile-record-panel > header,
.profile-discipline-ledger > header {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(211, 169, 72, .14);
}

.profile-record-panel h3,
.profile-cue-panel h3,
.profile-discipline-ledger h3 {
  margin: 4px 0 0;
  color: #f1e6ce;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 620;
  line-height: 1;
  text-transform: uppercase;
}

.profile-family-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(76px, auto) minmax(76px, auto);
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(211, 169, 72, .11);
}

.profile-family-row:last-child { border-bottom: 0; }

.profile-family-row__mark,
.profile-discipline-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #d7b35c;
  border: 1px solid rgba(215, 178, 85, .5);
  border-radius: 50%;
  background: #0b1711;
}

.profile-family-row__mark::before,
.profile-discipline-mark::before {
  content: "8";
  font-size: 16px;
  font-weight: 800;
}

.profile-family-row[data-family="snooker"] .profile-family-row__mark::before,
.profile-discipline-mark[data-family="snooker"]::before { content: "S"; }
.profile-family-row[data-family="pyramid"] .profile-family-row__mark::before,
.profile-discipline-mark[data-family="pyramid"]::before { content: "P"; }

.profile-family-row > div {
  display: grid;
  gap: 3px;
}

.profile-family-row > div strong { color: #eee3ca; font-size: 17px; }
.profile-family-row > div small,
.profile-family-row > span small,
.profile-discipline-row > span small,
.profile-discipline-ratings small {
  color: #8f897c;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.profile-family-row > span,
.profile-discipline-row > span:not(.profile-discipline-mark) {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.profile-family-row > span b,
.profile-discipline-row > span b {
  color: #e4c477;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.profile-section-doors {
  display: grid;
  align-content: stretch;
}

.profile-section-doors button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 10px 16px;
  color: #c8bfae;
  text-align: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(211, 169, 72, .12);
  transition: color 150ms ease-out, background 150ms ease-out;
}

.profile-section-doors button:last-child { border-bottom: 0; }
.profile-section-doors svg { width: 30px; height: 30px; fill: none; stroke: #cba34c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.profile-section-doors button > span { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 10px; }
.profile-section-doors button strong { overflow-wrap: anywhere; font-size: 14px; text-transform: uppercase; }
.profile-section-doors button small { color: #d9b863; font-size: 12px; font-variant-numeric: tabular-nums; }
.profile-section-doors button > b { color: #d6ac4d; font-size: 24px; transition: transform 150ms ease-out; }

@media (hover: hover) and (pointer: fine) {
  .profile-section-doors button:hover { color: #f2dfaf; background: rgba(31, 69, 51, .34); }
  .profile-section-doors button:hover > b { transform: translateX(3px); }
  [dir="rtl"] .profile-section-doors button:hover > b { transform: translateX(-3px); }
}

.profile-section-doors button:focus-visible {
  outline: 2px solid #efcf78;
  outline-offset: -3px;
}

.profile-cue-panel {
  position: relative;
  display: grid;
  min-height: 112px;
  grid-template-columns: minmax(230px, .55fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: clamp(14px, 2vw, 24px);
  padding: 18px 22px;
  overflow: hidden;
}

.profile-cue-panel p { margin: 7px 0 0; color: #9b9485; font-size: 11px; }

.profile-cue-silhouette {
  position: relative;
  display: block;
  height: 58px;
}

.profile-cue-silhouette :is(i, b, em) {
  position: absolute;
  top: 25px;
  height: 8px;
  transform: rotate(-3deg);
  border-radius: 7px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, .52);
}

.profile-cue-silhouette i { right: 7%; left: 5%; background: linear-gradient(90deg, #e7d7af, #99734b 48%, #2d1d13); }
.profile-cue-silhouette b { right: 6%; left: 61%; height: 13px; top: 22px; background: linear-gradient(90deg, #26150e, #bb8b38, #17100b); }
.profile-cue-silhouette em { left: 4%; width: 3%; height: 11px; top: 23px; background: #ded8c9; }

.profile-statistics-v2,
.profile-overview-v2 { min-width: 0; }

.profile-discipline-ledger { margin-top: clamp(14px, 2vw, 24px); }
.profile-discipline-ledger > div { min-width: 0; }

.profile-discipline-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) repeat(4, minmax(74px, .4fr));
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(211, 169, 72, .1);
}

.profile-discipline-row:last-child { border-bottom: 0; }
.profile-discipline-mark { width: 36px; height: 36px; }
.profile-discipline-mark::before { font-size: 14px; }
.profile-discipline-name { display: grid; min-width: 0; gap: 4px; }
.profile-discipline-name > strong { color: #e9dfc8; font-size: 15px; overflow-wrap: anywhere; }
.profile-discipline-ratings { display: flex; flex-wrap: wrap; gap: 5px; }
.profile-discipline-ratings i { display: inline-flex; gap: 5px; align-items: center; font-style: normal; }
.profile-discipline-ratings b { color: #c8aa61; font-size: 10px; }

[dir="rtl"] .profile-section-doors button,
[dir="rtl"] .profile-workspace__head,
[dir="rtl"] .profile-record-panel,
[dir="rtl"] .profile-discipline-ledger,
[dir="rtl"] .profile-cue-panel { text-align: start; }

@media (max-width: 1024px) {
  .hall-profile-center { grid-template-columns: clamp(230px, 28vw, 286px) minmax(0, 1fr); }
  .profile-identity-card { padding: 18px; }
  .profile-identity-card__avatar { width: min(142px, 70%); }
  .profile-workspace__head { min-height: 104px; }
  .profile-workspace__head p { max-width: 540px; }
  .profile-overview-grid { grid-template-columns: 1fr; }
  .profile-section-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-section-doors button:nth-child(2n-1) { border-inline-end: 1px solid rgba(211, 169, 72, .12); }
  .profile-cue-panel { grid-template-columns: minmax(190px, .62fr) minmax(220px, 1fr); }
  .profile-discipline-row { grid-template-columns: 38px minmax(150px, 1fr) repeat(4, minmax(62px, .35fr)); gap: 8px; padding-inline: 12px; }
}

@media (max-width: 780px) and (orientation: portrait) {
  .hall-profile-center {
    display: block;
    overflow: auto;
  }

  .profile-identity-card {
    display: grid;
    min-height: 188px;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 18px;
    padding: 18px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
    overflow: visible;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(216, 174, 77, .28);
  }

  .profile-identity-card__avatar { width: 112px; grid-row: 1 / 3; align-self: start; }
  .profile-identity-card__avatar > button { right: -5px; top: 8px; width: 44px; height: 44px; }
  .profile-identity-card__avatar > i { right: -7px; bottom: -8px; width: 36px; height: 36px; }
  .profile-identity-card__name { align-self: end; margin: 0; text-align: start; }
  .profile-identity-card__name h1 { font-size: clamp(27px, 8vw, 40px); }
  .profile-level-track { align-self: start; margin-top: 10px; padding: 10px 0; }
  .profile-identity-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
  .profile-identity-details > div { display: block; min-height: 0; padding: 8px 10px; border: 0; border-inline-end: 1px solid rgba(213, 171, 76, .14); }
  .profile-identity-details > div:last-child { border-inline-end: 0; }
  .profile-identity-details dd { justify-content: flex-start; margin-top: 5px; text-align: start; }

  .profile-workspace {
    display: grid;
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  .profile-workspace__head { min-height: 100px; align-items: center; padding: 15px 16px 12px; }
  .profile-workspace__head h2 { font-size: 34px; }
  .profile-workspace__head p { font-size: 12px; }
  .profile-workspace__head > span { min-width: 94px; padding: 9px; }
  .profile-workspace__head > span b { font-size: 21px; }
  .profile-workspace__head::after { right: 16px; left: 16px; }
  .hall-profile-center .hall-profile-tabs { position: sticky; z-index: 5; top: 0; padding-inline: 8px; background: rgba(3, 10, 7, .96); backdrop-filter: blur(12px); }
  .hall-profile-center .hall-profile-tabs button { min-height: 48px; padding-inline: 14px; }
  .profile-tab-panel { padding: 14px 12px max(84px, calc(62px + env(safe-area-inset-bottom))); overflow: visible; }
  .profile-metric-strip,
  .profile-metric-strip--extended { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-metric:nth-child(2n) { border-inline-end: 0; }
  .profile-metric { min-height: 66px; }
  .profile-overview-grid { grid-template-columns: 1fr; }
  .profile-section-doors { grid-template-columns: 1fr; }
  .profile-section-doors button:nth-child(n) { border-inline-end: 0; }
  .profile-cue-panel { grid-template-columns: 1fr; }
  .profile-cue-silhouette { min-height: 52px; }
  .profile-discipline-row {
    grid-template-columns: 38px minmax(0, 1fr) repeat(2, minmax(60px, auto));
    min-height: 78px;
  }
  .profile-discipline-row > span:nth-last-child(-n+2) { display: none; }
  .profile-tab-panel > .progression-page { padding-bottom: 0; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .hall-bottom-nav {
    display: flex;
    overflow: hidden;
  }

  .hall-bottom-nav button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    padding-inline: 2px;
  }

  .hall-bottom-nav span {
    display: block;
    font-size: clamp(6px, 1.85vw, 8px);
    line-height: 1.05;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .profile-identity-card { grid-template-columns: 92px minmax(0, 1fr); min-height: 164px; gap: 0 14px; padding-inline: 12px; }
  .profile-identity-card__avatar { width: 90px; }
  .profile-identity-card__avatar > button { top: 6px; width: 40px; height: 40px; font-size: 12px; }
  .profile-identity-card__name h1 { font-size: 28px; }
  .profile-identity-card__name p { font-size: 9px; }
  .profile-level-track { grid-template-columns: auto minmax(30px, 1fr); }
  .profile-level-track > strong { grid-column: 1 / -1; }
  .profile-identity-details { margin-inline: -6px; }
  .profile-identity-details > div { padding-inline: 6px; }
  .profile-identity-details dt { font-size: 8px; }
  .profile-identity-details dd { font-size: 11px; }
  .profile-identity-details dd span { font-size: 16px; }
  .profile-workspace__head > span { display: none; }
  .profile-workspace__head h2 { font-size: 30px; }
  .profile-workspace__head p { display: none; }
  .hall-profile-center .hall-profile-tabs button { min-height: 48px; gap: 6px; padding-inline: 12px; font-size: 10px; }
  .hall-profile-center .hall-profile-tabs svg { width: 21px; height: 21px; }
  .profile-family-row { grid-template-columns: 38px minmax(0, 1fr) minmax(62px, auto); padding-inline: 12px; }
  .profile-family-row > span:last-child { display: none; }
  .profile-discipline-row { grid-template-columns: 34px minmax(0, 1fr) minmax(55px, auto); }
  .profile-discipline-row > span:nth-child(n+4) { display: none; }
  .profile-discipline-ratings { display: none; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1180px) {
  .hall-profile-center { grid-template-columns: 220px minmax(0, 1fr); }
  .profile-identity-card {
    padding: 10px 14px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .profile-identity-card__avatar { width: min(88px, 50%); }
  .profile-identity-card__avatar > button { right: -14px; top: 4px; width: 38px; height: 38px; }
  .profile-identity-card__avatar > i { width: 31px; height: 31px; }
  .profile-identity-card__name { margin-top: 9px; }
  .profile-identity-card__name small { display: none; }
  .profile-identity-card__name h1 { margin: 0 0 3px; font-size: 25px; }
  .profile-identity-card__name p { font-size: 8px; }
  .profile-level-track { margin-top: 9px; padding: 8px 0; }
  .profile-level-track > strong { display: none; }
  .profile-identity-details > div { min-height: 38px; }
  .profile-identity-details dt { font-size: 7px; }
  .profile-identity-details dd { font-size: 10px; }
  .profile-workspace__head { min-height: 61px; padding: 8px 16px 7px; align-items: center; }
  .profile-workspace__head small,
  .profile-workspace__head p,
  .profile-workspace__head > span { display: none; }
  .profile-workspace__head h2 { margin: 0; font-size: 28px; }
  .profile-workspace__head::after { right: 16px; left: 16px; }
  .hall-profile-center .hall-profile-tabs { padding: 3px 12px; }
  .hall-profile-center .hall-profile-tabs button { min-height: 40px; padding-inline: 11px; font-size: 9px; }
  .hall-profile-center .hall-profile-tabs svg { width: 19px; height: 19px; }
  .profile-tab-panel { padding: 8px 12px 20px; }
  .profile-metric { min-height: 54px; padding-block: 7px; }
  .profile-metric small { font-size: 8px; }
  .profile-metric b { font-size: 21px; }
  .profile-overview-grid { grid-template-columns: minmax(0, 1fr) minmax(224px, .68fr); gap: 8px; margin-top: 8px; }
  .profile-record-panel > header { display: none; }
  .profile-family-row { min-height: 48px; grid-template-columns: 32px minmax(0, 1fr) 62px 62px; padding: 5px 10px; }
  .profile-family-row__mark { width: 30px; height: 30px; }
  .profile-family-row > div strong { font-size: 13px; }
  .profile-family-row > div small,
  .profile-family-row > span small { font-size: 7px; }
  .profile-section-doors { grid-template-columns: 1fr; align-content: start; }
  .profile-section-doors button:nth-child(n) { border-inline-end: 0; }
  .profile-section-doors button { min-height: 48px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; padding: 5px 9px; }
  .profile-section-doors svg { width: 22px; height: 22px; }
  .profile-section-doors button strong { font-size: 10px; }
  .profile-cue-panel { min-height: 64px; grid-template-columns: 190px minmax(0, 1fr); margin-top: 8px; padding: 8px 12px; }
  .profile-cue-panel h3 { font-size: 18px; }
  .profile-cue-panel p { margin-top: 3px; }
  .profile-cue-silhouette { height: 42px; }
  .profile-discipline-row { min-height: 48px; grid-template-columns: 30px minmax(130px, 1fr) repeat(4, minmax(54px, .35fr)); padding: 4px 9px; }
  .profile-discipline-mark { width: 28px; height: 28px; }
  .profile-discipline-name > strong { font-size: 11px; }
  .profile-discipline-ratings { display: none; }
  .profile-tab-panel > .progression-page .progression-head { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .hall-profile,
  .hall-profile-center .hall-profile-tabs button,
  .profile-section-doors button,
  .profile-section-doors button > b {
    transition-duration: 1ms !important;
  }
}

/* Final profile navigation authority after Store/Progression compatibility rules. */
.hall-bottom-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 520px) and (orientation: portrait) {
  .hall-bottom-nav {
    display: flex;
    justify-content: stretch;
    overflow-x: hidden;
  }

  .hall-bottom-nav button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    padding-inline: 2px;
    scroll-snap-align: none;
  }

  .hall-bottom-nav span {
    display: block;
    overflow: visible;
    font-size: clamp(6px, 1.85vw, 8px);
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  .game-room-lucky-shot.is-lucky-shot-selection .game-lobby-button {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    min-width: 72px;
    min-height: 42px;
    padding: 0 10px;
    font-size: 10px;
  }

  .lucky-shot-selection {
    display: block;
    padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  }

  .lucky-shot-selection__brand {
    min-height: 56px;
    margin-bottom: 10px;
  }

  .lucky-shot-selection__brand .hall-brand {
    width: min(188px, 52vw);
  }

  .lucky-shot-selection__brand .hall-brand > svg,
  .lucky-shot-selection__brand .hall-brand > span {
    display: none;
  }

  .lucky-shot-selection__brand .hall-brand > strong {
    font-size: 18px;
  }

  .lucky-shot-selection__content {
    width: 100%;
    gap: 14px;
    padding: 17px;
  }

  .lucky-shot-selection__hero {
    justify-content: flex-start;
    gap: 13px;
  }

  .lucky-shot-selection__target {
    width: 60px;
  }

  .lucky-shot-selection h1 {
    margin-top: 3px;
    font-size: clamp(29px, 9vw, 38px);
  }

  .lucky-shot-selection__hero small {
    font-size: 8px;
  }

  .lucky-shot-selection__hero small::after {
    display: none;
  }

  .lucky-shot-family-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .lucky-shot-family-card {
    min-height: 126px;
    grid-template-columns: minmax(124px, 42%) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .lucky-shot-family-card__scene {
    min-height: 126px;
  }

  .lucky-shot-family-card__table {
    inset: 22% 5% 8%;
  }

  .lucky-shot-family-card__discipline {
    width: 48px;
  }

  .lucky-shot-family-card__target {
    width: 36px;
  }

  .lucky-shot-family-card__copy {
    min-height: 100%;
    align-content: center;
    border-top: 0;
    border-inline-start: 1px solid rgba(215, 172, 69, 0.24);
  }

  .lucky-shot-family-card__copy strong {
    font-size: 23px;
  }

  .lucky-shot-family-card__copy small {
    position: static;
    width: fit-content;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lucky-shot-selection__content > footer {
    display: block;
  }

  .lucky-shot-selection__content > footer > b {
    display: none;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .game-room-lucky-shot.is-lucky-shot-selection .game-lobby-button {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    min-width: 68px;
    min-height: 38px;
    padding: 0 8px;
    font-size: 9px;
  }

  .lucky-shot-selection {
    gap: 7px;
    padding: max(7px, env(safe-area-inset-top)) 72px max(7px, env(safe-area-inset-bottom));
  }

  .lucky-shot-selection__brand {
    min-height: 30px;
  }

  .lucky-shot-selection__brand .hall-brand {
    width: min(170px, 31vw);
  }

  .lucky-shot-selection__brand .hall-brand > svg,
  .lucky-shot-selection__brand .hall-brand > span {
    display: none;
  }

  .lucky-shot-selection__brand .hall-brand > strong {
    font-size: clamp(15px, 3.6vh, 20px);
  }

  .lucky-shot-selection__content {
    gap: 8px;
    padding: 10px 12px;
  }

  .lucky-shot-selection__hero {
    gap: 10px;
  }

  .lucky-shot-selection__target {
    width: clamp(42px, 11vh, 56px);
  }

  .lucky-shot-selection__hero small {
    font-size: 7px;
  }

  .lucky-shot-selection h1 {
    margin-top: 2px;
    font-size: clamp(24px, 7.5vh, 34px);
  }

  .lucky-shot-family-grid {
    gap: 7px;
  }

  .lucky-shot-family-card {
    min-height: 122px;
  }

  .lucky-shot-family-card__scene {
    min-height: 82px;
  }

  .lucky-shot-family-card__copy {
    min-height: 38px;
    padding: 6px 9px;
  }

  .lucky-shot-family-card__copy strong {
    font-size: clamp(15px, 4.3vh, 20px);
  }

  .lucky-shot-family-card__copy em,
  .lucky-shot-family-card__copy small {
    display: none;
  }

  .lucky-shot-family-card__copy > b {
    font-size: 19px;
  }

  .lucky-shot-family-card__discipline {
    width: 39px;
  }

  .lucky-shot-family-card__target {
    width: 31px;
  }

  .lucky-shot-selection__content > footer {
    min-height: 15px;
  }

  .lucky-shot-selection__content > footer p {
    font-size: 8px;
  }

  .lucky-shot-selection__content > footer > b {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lucky-shot-family-card,
  .lucky-shot-family-card::before,
  .lucky-shot-family-card__copy > b {
    transition: none;
  }
}

.lucky-shot-panel {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  z-index: 11;
  display: grid;
  width: min(324px, calc(100vw - 36px));
  max-height: calc(100dvh - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  gap: 13px;
  padding: 18px 17px 16px 21px;
  overflow: auto;
  color: #f5efe4;
  background:
    linear-gradient(105deg, rgba(87, 46, 18, 0.16), transparent 34%),
    radial-gradient(circle at 16% -8%, rgba(211, 166, 52, 0.17), transparent 44%),
    linear-gradient(180deg, rgba(17, 20, 18, 0.96), rgba(5, 8, 7, 0.96));
  border: 1px solid rgba(216, 173, 65, 0.56);
  border-radius: 10px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 244, 204, 0.07);
  transition: opacity 240ms ease-out, transform 280ms ease-out, filter 240ms ease-out;
  backdrop-filter: blur(16px) saturate(1.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 157, 55, 0.56) transparent;
}

.lucky-shot-panel::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 7px;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, transparent, #e7bf62 18% 82%, transparent);
  box-shadow: 0 0 12px rgba(224, 184, 78, 0.18);
}

.kott-visualizer-host[data-lucky-shot="true"]:not([data-lucky-intro]) + .lucky-shot-panel,
.kott-visualizer-host[data-lucky-intro="playing"] + .lucky-shot-panel {
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
  transform: translateX(-18px);
}

.lucky-shot-panel header {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.lucky-shot-panel__target { width: 54px; }

.lucky-shot-panel header small,
.lucky-shot-panel section > small {
  color: #c9a64c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lucky-shot-panel header small {
  display: flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
}

.lucky-shot-panel header small span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-shot-panel header small b {
  padding: 3px 5px 2px;
  color: #e9d092;
  background: rgba(156, 110, 28, 0.14);
  border: 1px solid rgba(214, 172, 69, 0.24);
  border-radius: 3px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.lucky-shot-panel h2 {
  margin: 2px 0 0;
  color: #f0d687;
  font: 690 30px/0.94 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.lucky-shot-panel > p {
  margin: 0;
  padding: 0 2px 1px;
  color: #d7d0c3;
  font-size: 12px;
  line-height: 1.42;
}

.lucky-shot-panel > .lucky-shot-preview-note {
  padding: 7px 9px;
  color: #d9c78f;
  background: rgba(137, 99, 27, 0.16);
  border: 1px solid rgba(218, 177, 69, 0.23);
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.35;
}

.lucky-shot-attempt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  color: #bdb6a9;
  border-top: 1px solid rgba(222, 179, 69, 0.18);
  border-bottom: 1px solid rgba(222, 179, 69, 0.18);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lucky-shot-attempt strong {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #171107;
  background: linear-gradient(180deg, #f0d477, #b98528);
  border: 1px solid rgba(255, 232, 151, 0.88);
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255, 248, 211, 0.78), 0 5px 12px rgba(0, 0, 0, 0.34);
  font: 800 15px/1 "KottCondensed", "Arial Narrow", sans-serif;
}

.lucky-shot-panel section {
  display: grid;
  gap: 7px;
}

.lucky-shot-panel ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lucky-shot-panel li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 36px;
  padding: 5px 1px;
  color: #eee6d8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  font-size: 11px;
}

.lucky-shot-panel li:last-child { border-bottom: 0; }

.lucky-shot-zone-swatch {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #f6df68 0 18%, #c99a28 19% 38%, #7b2230 39% 59%, #397472 60% 78%, #e7e2d4 79% 88%, transparent 89%);
  border-radius: 50%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.42));
}

.lucky-shot-panel li[data-zone="bullseye"] .lucky-shot-zone-swatch { clip-path: circle(18%); }
.lucky-shot-panel li[data-zone="gold"] .lucky-shot-zone-swatch { clip-path: circle(38%); }
.lucky-shot-panel li[data-zone="burgundy"] .lucky-shot-zone-swatch { clip-path: circle(59%); }
.lucky-shot-panel li[data-zone="outer"] .lucky-shot-zone-swatch { clip-path: circle(88%); }

.lucky-shot-reward-value,
.lucky-shot-currency {
  display: flex;
  min-width: 0;
  align-items: center;
}

.lucky-shot-reward-value {
  gap: 6px;
  justify-content: flex-end;
}

.lucky-shot-currency {
  gap: 6px;
}

.lucky-shot-currency .hall-currency-art {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
}

.lucky-shot-currency strong {
  color: #f2e7ca;
  font: 780 15px/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.025em;
}

.lucky-shot-currency.is-champion-box em {
  max-width: 92px;
  overflow: hidden;
  color: #d7c7ed;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucky-shot-champion-box {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}

.lucky-shot-currency-plus { color: #817969; font-size: 10px; }

.lucky-shot-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 11px;
  background: linear-gradient(90deg, rgba(119, 85, 19, 0.28), rgba(41, 30, 11, 0.14));
  border: 1px solid rgba(232, 193, 87, 0.38);
  border-radius: 6px;
}

.lucky-shot-result small { color: #d9c99d; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lucky-shot-result > strong { display: flex; gap: 7px; align-items: center; justify-content: flex-end; color: #ffe08a; font-size: 20px; }
.lucky-shot-result.is-miss { background: rgba(52, 48, 43, 0.52); border-color: rgba(255, 255, 255, 0.12); }

.lucky-shot-panel footer,
.lucky-shot-purchase-actions {
  display: grid;
  gap: 8px;
}

.lucky-shot-primary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 10px;
  align-items: center;
  min-height: 50px;
  padding: 8px 14px;
  color: #171006;
  background: linear-gradient(180deg, #f0d783 0%, #d0a344 52%, #a66d18 100%);
  border: 1px solid #f7dc82;
  border-radius: 7px;
  box-shadow: inset 0 1px rgba(255, 249, 214, 0.78), inset 0 -1px rgba(82, 48, 7, 0.52), 0 9px 22px rgba(0, 0, 0, 0.42);
  font-weight: 900;
  transition: filter 130ms ease, transform 130ms ease;
}

.lucky-shot-primary:hover,
.lucky-shot-primary:focus-visible { filter: brightness(1.07); }
.lucky-shot-primary:focus-visible { outline: 2px solid #ffe69b; outline-offset: 2px; }
.lucky-shot-primary:active { transform: scale(.975); }

.lucky-shot-primary--pack > strong {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}

.lucky-shot-primary--pack > strong b {
  font: 850 18px/1 "KottCondensed", "Arial Narrow", sans-serif;
}

.lucky-shot-primary > small {
  grid-column: 1 / -1;
  color: #4a310b;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lucky-shot-tomorrow {
  margin: 0;
  color: #c7b98e;
  font-size: 12px;
  text-align: center;
}

.kott-visualizer-host[data-lucky-shot="true"] [data-power-text],
.kott-visualizer-host[data-lucky-shot="true"] [data-mobile-power-text] {
  display: none !important;
}

.kott-visualizer-host[data-lucky-shot="true"] .kott-shot-hud-desktop {
  grid-template-columns: 178px 104px 402px;
  width: min(710px, calc(100% - 360px));
}

.kott-visualizer-host[data-lucky-shot="true"] .kott-shot-hud-desktop .shot-panel-power,
.kott-visualizer-host[data-lucky-shot="true"] .kott-shot-hud-desktop .strike-button {
  display: none !important;
}

@media (max-width: 720px), (max-height: 540px) {
  .hall-stage-actions {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 350px);
    margin-inline: auto;
  }

  .hall-lucky-shot-button {
    min-height: 56px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 7px 11px;
  }

  .hall-lucky-target { width: 42px; }

  .lucky-shot-panel {
    top: max(7px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    width: min(258px, 38vw);
    max-height: calc(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    gap: 6px;
    padding: 9px 9px 8px 14px;
    border-radius: 8px;
  }

  .lucky-shot-panel::before { left: 5px; }
  .lucky-shot-panel header { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
  .lucky-shot-panel__target { width: 38px; }
  .lucky-shot-panel header small { gap: 4px; font-size: 7px; }
  .lucky-shot-panel header small b { padding: 2px 3px; font-size: 6px; }
  .lucky-shot-panel h2 { font-size: 21px; }
  .lucky-shot-panel > p { display: none; }
  .lucky-shot-panel > .lucky-shot-preview-note {
    display: block;
    padding: 4px 6px;
    font-size: 7px;
    line-height: 1.25;
  }
  .lucky-shot-attempt { padding: 3px 0; font-size: 8px; }
  .lucky-shot-attempt strong { width: 24px; height: 24px; font-size: 12px; }
  .lucky-shot-panel section { gap: 3px; }
  .lucky-shot-panel section > small { font-size: 7px; }
  .lucky-shot-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .lucky-shot-panel li { grid-template-columns: 16px minmax(0, 1fr); gap: 4px; min-height: 30px; padding: 2px 0; }
  .lucky-shot-zone-swatch { width: 16px; height: 16px; }
  .lucky-shot-reward-value { gap: 3px; }
  .lucky-shot-currency { gap: 2px; }
  .lucky-shot-currency .hall-currency-art { width: 18px; height: 18px; }
  .lucky-shot-currency strong { font-size: 11px; }
  .lucky-shot-currency.is-champion-box em { display: none; }
  .lucky-shot-currency-plus { display: none; }
  .lucky-shot-result { padding: 5px; }
  .lucky-shot-result small { font-size: 7px; }
  .lucky-shot-result > strong { font-size: 14px; }
  .lucky-shot-primary { min-height: 44px; padding: 5px 9px; }
  .lucky-shot-primary > small { font-size: 7px; }
  .lucky-shot-purchase-actions { gap: 5px; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .hall-stage-actions {
    width: 100%;
  }

  .hall-lucky-shot-button {
    min-height: 64px;
  }

  .lucky-shot-panel {
    top: max(58px, env(safe-area-inset-top));
    width: calc(100vw - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lucky-shot-panel,
  .lucky-shot-primary {
    transition-duration: 1ms !important;
  }
}

/* Local commerce shell: navigation and honest payment-preview surfaces. */
.hall-bottom-nav {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.commerce-page {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 2.2vw, 38px) clamp(18px, 3vw, 54px) clamp(32px, 5vh, 62px);
  overflow-x: hidden;
  overflow-y: auto;
  color: #f5efdf;
  background:
    linear-gradient(90deg, rgba(1, 9, 7, 0.94), rgba(6, 17, 13, 0.78) 46%, rgba(2, 10, 8, 0.94)),
    radial-gradient(circle at 50% -20%, rgba(221, 172, 63, 0.2), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 9px),
    #07100d;
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 174, 70, 0.5) rgba(0, 0, 0, 0.25);
}

.commerce-page::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 0;
  height: 42%;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(100, 58, 20, 0.09), transparent);
}

.commerce-page > * {
  position: relative;
  z-index: 1;
}

.commerce-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  gap: clamp(22px, 4vw, 70px);
  align-items: end;
  max-width: 1700px;
  margin: 0 auto clamp(18px, 2.6vh, 28px);
}

.commerce-hero small,
.commerce-offer-card__copy small,
.commerce-offer-modal__head small {
  color: #d6ad53;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.commerce-hero h1 {
  margin: 2px 0 4px;
  color: #fff5dc;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(34px, 4.1vw, 68px);
  font-weight: 560;
  letter-spacing: 0.035em;
  line-height: 1;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.62);
}

.commerce-hero p {
  max-width: 720px;
  margin: 0;
  color: #c9c2b2;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.4;
}

.commerce-preview-seal {
  display: grid;
  gap: 3px;
  padding: 13px 16px;
  color: #e7d5a7;
  background: linear-gradient(135deg, rgba(23, 63, 47, 0.7), rgba(7, 23, 18, 0.84));
  border: 1px solid rgba(215, 174, 78, 0.36);
  border-inline-start: 4px solid #d8aa43;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.commerce-preview-seal b {
  color: #f3d98e;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commerce-preview-seal span {
  color: #aea997;
  font-size: 12px;
  line-height: 1.3;
}

.commerce-wallet {
  display: flex;
  max-width: 1700px;
  align-items: stretch;
  margin: 0 auto 14px;
  overflow: hidden;
  color: #dfd7c4;
  background: linear-gradient(180deg, rgba(12, 27, 22, 0.98), rgba(7, 17, 14, 0.98));
  border: 1px solid rgba(216, 175, 76, 0.25);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.commerce-wallet > strong {
  display: grid;
  min-width: 120px;
  place-items: center;
  padding: 12px 20px;
  color: #f2dda2;
  font-family: "KottDisplay", Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(216, 175, 76, 0.07);
  border-inline-end: 1px solid rgba(216, 175, 76, 0.18);
}

.commerce-wallet > span {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: 34px auto;
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  padding: 8px 18px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.075);
}

.commerce-page img.hall-currency-art {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.commerce-wallet .hall-currency-art {
  width: 29px;
  height: 29px;
  grid-row: 1 / 3;
}

.commerce-wallet b {
  color: #fff4d2;
  font-size: 18px;
  line-height: 1;
}

.commerce-wallet small {
  color: #928e82;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.commerce-category-tabs {
  position: sticky;
  top: -1px;
  z-index: 12;
  display: grid;
  max-width: 1700px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0 auto clamp(16px, 2.3vh, 24px);
  padding: 6px;
  background: rgba(5, 14, 11, 0.94);
  border: 1px solid rgba(222, 183, 88, 0.24);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.commerce-category-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 7px;
  color: #bdb7a8;
  font-size: clamp(11px, 0.9vw, 15px);
  font-weight: 500;
  background: transparent;
  border: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.commerce-category-tabs button.is-active {
  color: #f8dfa0;
  background: linear-gradient(180deg, rgba(36, 92, 67, 0.78), rgba(14, 46, 34, 0.78));
  box-shadow: inset 0 -2px #d9aa45;
}

.commerce-offer-grid {
  display: grid;
  max-width: 1700px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  margin: 0 auto;
}

.commerce-offer-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 320px;
  grid-template-rows: minmax(135px, 1fr) auto auto 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(202, 156, 65, 0.12), transparent 42%),
    linear-gradient(165deg, #14251f, #09120f 62%, #060b09);
  border: 1px solid rgba(202, 161, 69, 0.28);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.035);
}

.commerce-offer-card::after {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(241, 217, 158, 0.055);
}

.commerce-offer-card--cues { background-color: #16100c; }
.commerce-offer-card--rubies { background: radial-gradient(circle at 50% 24%, rgba(197, 24, 53, 0.26), transparent 36%), linear-gradient(165deg, #241217, #0d0c0d 65%); }
.commerce-offer-card--chips { background: radial-gradient(circle at 50% 24%, rgba(222, 168, 51, 0.18), transparent 36%), linear-gradient(165deg, #201b10, #0c0d0b 65%); }
.commerce-offer-card--club { background: radial-gradient(circle at 50% 24%, rgba(170, 128, 42, 0.22), transparent 36%), linear-gradient(165deg, #1b1710, #0b0d0b 65%); }
.commerce-offer-card--hints { background: radial-gradient(circle at 50% 24%, rgba(62, 135, 100, 0.22), transparent 36%), linear-gradient(165deg, #10231c, #09100e 65%); }

.commerce-offer-card__flag {
  position: absolute;
  top: 13px;
  inset-inline-start: 0;
  z-index: 3;
  padding: 5px 11px;
  color: #18130a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #c58e29, #f1d078);
}

.commerce-art {
  position: relative;
  display: block;
  width: 100%;
  min-height: 135px;
}

.commerce-art--cue i,
.commerce-art--cue b,
.commerce-art--cue em {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 7px;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-17deg);
}

.commerce-art--cue i {
  width: 76%;
  background: linear-gradient(90deg, #e8d1a4 0 6%, #301e13 6% 46%, #b57629 46% 51%, #120d0a 51% 96%, #e5c77d 96%);
  box-shadow: 0 8px 9px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(246, 214, 150, 0.3);
}

.commerce-art--cue b {
  width: 36%;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(234, 184, 65, 0.75) 14px 17px);
}

.commerce-art--cue em {
  width: 18%;
  height: 2px;
  background: rgba(255, 236, 178, 0.66);
  transform: translate(50%, -330%) rotate(-17deg);
}

.commerce-art--currency,
.commerce-art--chalk,
.commerce-art--club {
  display: grid;
  place-items: center;
}

.commerce-art--currency i,
.commerce-art--chalk i,
.commerce-art--club i {
  position: absolute;
  width: 82px;
  height: 82px;
  background: radial-gradient(circle at 33% 27%, #ffe69a, #b16f16 38%, #4a2a08 70%);
  border: 4px solid #e0b65b;
  border-radius: 50%;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.55), inset 0 0 0 5px rgba(14, 18, 15, 0.72);
}


.commerce-art--currency b,
.commerce-art--chalk b,
.commerce-art--club b {
  position: relative;
  z-index: 2;
  color: #fff0c1;
  font-family: Georgia, serif;
  font-size: 30px;
  text-shadow: 0 2px 5px #000;
}

.commerce-art--club i {
  display: grid;
  place-items: center;
  color: #f6d47d;
  font-style: normal;
  font-size: 30px;
  background: radial-gradient(circle, #143a2c, #07110d);
}

.commerce-art--chalk i {
  width: 72px;
  height: 68px;
  background: linear-gradient(145deg, #183f67, #07182b);
  border: 3px solid #b58c43;
  border-radius: 5px;
}

.commerce-art--hint {
  display: grid;
  place-items: center;
}

.commerce-art--hint img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  filter: drop-shadow(0 16px 15px rgba(0, 0, 0, .68));
}

.commerce-offer-card__copy {
  padding: 0 18px 10px;
  text-align: center;
}

.commerce-offer-card__copy h3 {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #f7ebce;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(18px, 1.45vw, 25px);
  font-weight: 560;
  letter-spacing: 0.035em;
}

.commerce-offer-card__prices {
  display: flex;
  min-height: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px 12px;
}

.commerce-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f6d986;
  white-space: nowrap;
}

.commerce-price .hall-currency-art {
  width: 21px;
  height: 21px;
}

.commerce-price--real {
  color: #fff1c2;
  font-size: 18px;
}

.commerce-price-or {
  color: #6f6c62;
  font-size: 11px;
}

.commerce-offer-card > button {
  position: relative;
  z-index: 4;
  min-height: 46px;
  color: #0c100d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f0d38a, #be8125);
  border: 0;
  border-top: 1px solid #f8e8ba;
}

.commerce-offer-card > button:hover,
.commerce-offer-card > button:focus-visible {
  background: linear-gradient(180deg, #ffe6a2, #d89a35);
}

.commerce-offer-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.commerce-offer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 5, 4, 0.82);
  border: 0;
  backdrop-filter: blur(8px);
}

.commerce-offer-modal {
  position: relative;
  display: grid;
  width: min(720px, 96vw);
  max-height: min(790px, 92dvh);
  grid-template-columns: 39% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: auto;
  color: #efe8d7;
  background: linear-gradient(150deg, #14261f, #09110e 58%, #070b09);
  border: 1px solid rgba(233, 194, 99, 0.54);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.74), inset 0 1px rgba(255, 255, 255, 0.055);
}

.commerce-offer-modal::before {
  position: absolute;
  inset: 7px;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(237, 213, 153, 0.08);
}

.commerce-offer-modal__close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 4;
  width: 44px;
  height: 44px;
  color: #d8c8a0;
  font-size: 28px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(226, 184, 84, 0.3);
}

.commerce-offer-modal__art {
  grid-row: 1 / 3;
  display: grid;
  min-height: 330px;
  place-items: center;
  background: radial-gradient(circle, rgba(201, 154, 55, 0.16), transparent 53%), rgba(0, 0, 0, 0.13);
  border-inline-end: 1px solid rgba(226, 184, 84, 0.16);
}

.commerce-offer-modal__art .commerce-art {
  min-height: 250px;
}

.commerce-offer-modal__head {
  padding: 44px 42px 10px 30px;
  text-align: start;
}

.commerce-offer-modal__head h2 {
  margin: 5px 0 5px;
  color: #fff1cb;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 560;
  line-height: 1.06;
}

.commerce-offer-modal__head .commerce-offer-card__prices {
  justify-content: flex-start;
  padding: 8px 0;
}

.commerce-offer-modal__body {
  padding: 8px 30px 24px;
}

.commerce-offer-modal__body h3 {
  margin: 0 0 6px;
  color: #d7b45f;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.commerce-offer-modal__body ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.commerce-offer-modal__body li {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.commerce-offer-modal__body li span {
  color: #969184;
  font-size: 12px;
}

.commerce-offer-modal__body li strong {
  color: #efe1bb;
  font-size: 14px;
  text-align: end;
}

.commerce-preview-note,
.commerce-fair-play-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: #aaa697;
  font-size: 11px;
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.23);
  border-inline-start: 3px solid #b98835;
}

.commerce-fair-play-note {
  color: #d6dfd6;
  background: rgba(26, 80, 58, 0.28);
  border-inline-start-color: #58a478;
}

.commerce-checkout {
  grid-column: 1 / -1;
  min-height: 56px;
  color: #85857d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #20231f;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  cursor: not-allowed;
}

[dir="rtl"] .commerce-offer-modal__head,
[dir="rtl"] .commerce-offer-modal__body {
  text-align: start;
}

html[dir="rtl"] .commerce-page {
  direction: rtl;
}

@media (max-width: 1180px) {
  .commerce-offer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-category-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(8, minmax(108px, 1fr));
  }

  .hall-bottom-nav span {
    font-size: clamp(11px, 1vw, 15px);
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  .commerce-page {
    padding: 14px 12px 32px;
  }

  .commerce-hero {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .commerce-hero h1 {
    font-size: clamp(30px, 10vw, 44px);
  }

  .commerce-hero p {
    font-size: 13px;
  }

  .commerce-preview-seal {
    padding: 9px 11px;
  }

  .commerce-wallet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-wallet > strong {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 7px;
    border: 0;
    border-bottom: 1px solid rgba(216, 175, 76, 0.18);
  }

  .commerce-wallet > span {
    grid-template-columns: 25px minmax(0, 1fr);
    padding: 8px 6px;
  }

  .commerce-wallet .hall-currency-art {
    width: 23px;
    height: 23px;
  }

  .commerce-wallet b { font-size: 14px; }
  .commerce-wallet small { font-size: 7px; }

  .commerce-category-tabs {
    margin-inline: -12px;
    padding: 5px 12px;
    border-inline: 0;
    grid-template-columns: repeat(8, minmax(94px, 1fr));
  }

  .commerce-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .commerce-offer-card {
    min-height: 278px;
    grid-template-rows: minmax(110px, 1fr) auto auto 44px;
  }

  .commerce-art { min-height: 110px; }
  .commerce-offer-card__copy { padding-inline: 9px; }
  .commerce-offer-card__copy h3 { font-size: 16px; }
  .commerce-offer-card__prices { padding-inline: 5px; gap: 4px; }
  .commerce-price--real { font-size: 15px; }
  .commerce-price .hall-currency-art { width: 18px; height: 18px; }

  .commerce-offer-modal {
    width: min(520px, 94vw);
    grid-template-columns: 1fr;
    grid-template-rows: 150px auto auto auto;
  }

  .commerce-offer-modal__art {
    grid-row: 1;
    min-height: 150px;
    border: 0;
    border-bottom: 1px solid rgba(226, 184, 84, 0.16);
  }

  .commerce-offer-modal__art .commerce-art { min-height: 140px; }
  .commerce-offer-modal__head { padding: 18px 24px 4px; }
  .commerce-offer-modal__body { padding: 8px 24px 18px; }
  .commerce-checkout { grid-column: 1; }

  .hall-bottom-nav {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .hall-bottom-nav span {
    font-size: 6px;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .commerce-offer-grid {
    grid-template-columns: 1fr;
  }

  .commerce-offer-card {
    min-height: 270px;
  }

  .hall-bottom-nav span {
    display: none;
  }

  .hall-bottom-nav button {
    min-height: 52px;
    padding: 5px 1px;
  }

  .hall-bottom-nav svg {
    width: 23px;
    height: 23px;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  .commerce-page {
    padding: 10px 16px 26px;
  }

  .commerce-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.45fr);
    gap: 18px;
    margin-bottom: 8px;
  }

  .commerce-hero h1 { font-size: clamp(28px, 5.7vh, 42px); }
  .commerce-hero p { display: none; }
  .commerce-preview-seal { padding: 7px 10px; }
  .commerce-preview-seal span { display: none; }

  .commerce-wallet {
    margin-bottom: 7px;
  }

  .commerce-wallet > strong,
  .commerce-wallet > span {
    padding-block: 5px;
  }

  .commerce-category-tabs {
    min-height: 42px;
    margin-bottom: 9px;
    padding: 3px;
  }

  .commerce-category-tabs button {
    min-height: 36px;
    padding-block: 4px;
  }

  .commerce-offer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }

  .commerce-offer-card {
    min-height: 230px;
    grid-template-rows: minmax(86px, 1fr) auto auto 42px;
  }

  .commerce-art { min-height: 86px; }
  .commerce-art--currency i,
  .commerce-art--chalk i,
  .commerce-art--club i { width: 58px; height: 58px; }
  .commerce-offer-card__copy { padding-bottom: 3px; }
  .commerce-offer-card__copy h3 { font-size: 16px; }
  .commerce-offer-card__prices { min-height: 30px; padding-bottom: 5px; }

  .commerce-offer-modal {
    width: min(680px, 94vw);
    max-height: 90dvh;
  }

  .commerce-offer-modal__art { min-height: 250px; }
  .commerce-offer-modal__head { padding-top: 28px; }

  .hall-bottom-nav {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .commerce-hero {
    grid-template-columns: 1fr auto;
  }

  .commerce-hero small,
  .commerce-preview-seal span,
  .commerce-wallet small {
    display: none;
  }

  .commerce-hero h1 { margin: 0; font-size: 26px; }
  .commerce-preview-seal { align-self: center; }
  .commerce-wallet > strong { min-width: 86px; padding-inline: 9px; font-size: 11px; }
  .commerce-wallet > span { grid-template-columns: 24px auto; padding-inline: 8px; }
  .commerce-wallet .hall-currency-art { width: 21px; height: 21px; }
  .commerce-category-tabs { grid-template-columns: repeat(8, minmax(86px, 1fr)); overflow-x: auto; }
  .commerce-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .commerce-offer-modal {
    width: min(720px, 96vw);
    grid-template-columns: 31% minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .commerce-offer-modal__art {
    grid-row: 1 / 3;
    min-height: 210px;
  }

  .commerce-offer-modal__head { padding: 25px 55px 2px 20px; }
  .commerce-offer-modal__head h2 { font-size: 23px; }
  .commerce-offer-modal__body { padding: 2px 20px 12px; }
  .commerce-offer-modal__body li { min-height: 31px; padding-block: 4px; }
  .commerce-preview-note { margin-top: 7px; padding: 6px 8px; }
  .commerce-checkout { grid-column: 1 / -1; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-offer-card,
  .commerce-category-tabs button,
  .commerce-offer-modal {
    scroll-behavior: auto;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  body[data-view="lobby"] .hall-topbar {
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 3px;
    padding-inline: 8px;
  }

  body[data-view="lobby"] .hall-profile {
    width: 58px;
    min-width: 58px;
  }

  body[data-view="lobby"] .hall-profile-copy,
  body[data-view="lobby"] .hall-language,
  body[data-view="lobby"] .hall-notifications-button,
  body[data-view="lobby"] .hall-currency > span {
    display: none;
  }

  body[data-view="lobby"] .hall-toolbar {
    min-width: 0;
    justify-content: flex-end;
    gap: 2px;
  }

  body[data-view="lobby"] .hall-currency,
  body[data-view="lobby"] .hall-currency + .hall-currency {
    gap: 1px;
    padding-inline: 2px;
  }

  body[data-view="lobby"] .hall-currency .hall-currency-art {
    width: 22px;
    height: 22px;
  }

  body[data-view="lobby"] .hall-currency strong {
    font-size: 11px;
  }

  body[data-view="lobby"] .hall-settings-button {
    width: 36px;
    height: 36px;
    margin-inline-start: 1px;
  }
}

/* King's Treasury: one exact runtime asset, sold separately by sporting family. */
.commerce-cue-showcase {
  display: grid;
  min-height: 570px;
  grid-template-columns: minmax(360px, 0.92fr) minmax(460px, 1.08fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(131, 17, 39, 0.25), transparent 36%),
    linear-gradient(128deg, #0c1713, #050a08 62%, #110b09);
  border: 1px solid rgba(225, 181, 80, 0.34);
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 246, 218, 0.045);
}

.commerce-cue-showcase__visual {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  background: #080908;
  border-inline-end: 1px solid rgba(225, 181, 80, 0.18);
}

.commerce-cue-showcase__visual::after {
  position: absolute;
  inset: 14px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(239, 205, 128, 0.12);
}

.commerce-cue-showcase__glow {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(157, 21, 52, 0.18), rgba(185, 135, 39, 0.06) 42%, transparent 68%);
  filter: blur(12px);
}

.commerce-cue-showcase__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 570px;
  object-fit: contain;
  object-position: center;
}

.commerce-cue-showcase__edition {
  position: absolute;
  z-index: 2;
  inset-inline: 28px;
  bottom: 24px;
  padding-top: 10px;
  color: #c9ac74;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-align: center;
  border-top: 1px solid rgba(224, 180, 80, 0.24);
}

.commerce-cue-showcase__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 3vw, 44px);
}

.commerce-cue-showcase__body > header small,
.commerce-cue-family h3,
.commerce-cue-stats h3 {
  color: #d2a84e;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.commerce-cue-showcase__body > header h2 {
  margin: 5px 0 9px;
  color: #f7e8c7;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 540;
  line-height: 0.98;
}

.commerce-cue-showcase__body > header p {
  max-width: 760px;
  margin: 0;
  color: #aaa497;
  font-size: 13px;
  line-height: 1.48;
}

.commerce-cue-family {
  margin-top: 22px;
}

.commerce-cue-family h3 {
  margin: 0 0 8px;
}

.commerce-cue-family > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.commerce-cue-family button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  color: #b4afa2;
  font-size: 12px;
  font-weight: 680;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(208, 169, 81, 0.16);
}

.commerce-cue-family button:hover,
.commerce-cue-family button:focus-visible,
.commerce-cue-family button.is-active {
  color: #f5dfaa;
  background: linear-gradient(180deg, rgba(42, 92, 68, 0.55), rgba(15, 40, 30, 0.42));
  border-color: rgba(225, 181, 81, 0.52);
}

.commerce-cue-family button i {
  color: #68bc88;
  font-style: normal;
}

.commerce-cue-family > p,
.commerce-cue-training-note {
  margin: 7px 0 0;
  color: #77766f;
  font-size: 10px;
  line-height: 1.35;
}

.commerce-cue-specs {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(150px, 0.65fr);
  gap: 22px;
  margin-top: 22px;
  padding-top: 19px;
  border-top: 1px solid rgba(218, 176, 80, 0.16);
}

.commerce-cue-stats > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.commerce-cue-stats h3 {
  margin: 0;
}

.commerce-cue-stats > header span {
  color: #6f716c;
  font-size: 9px;
  letter-spacing: 0.07em;
}

.commerce-cue-disciplines {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.commerce-cue-specs aside dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.commerce-cue-specs aside dl > div {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid rgba(214, 173, 79, 0.11);
}

.commerce-cue-specs dt {
  color: #828078;
  font-size: 10px;
}

.commerce-cue-specs dd {
  margin: 0;
  color: #f0d595;
  font-size: 12px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.commerce-cue-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.commerce-cue-disciplines li {
  padding: 4px 6px;
  color: #8c958d;
  font-size: 8px;
  line-height: 1.15;
  background: rgba(24, 68, 49, 0.26);
  border: 1px solid rgba(91, 138, 108, 0.16);
}

.commerce-cue-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.commerce-cue-actions button {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.035em;
}

.commerce-cue-preview {
  color: #f1dba6;
  background: #17382a;
  border: 1px solid rgba(224, 181, 84, 0.34);
}

.commerce-cue-buy {
  color: #181006;
  background: linear-gradient(180deg, #f0d894, #bb7924);
  border: 1px solid #f5dfa0;
}

.commerce-cue-buy .commerce-cue-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.commerce-cue-buy svg {
  width: 22px;
  height: 22px;
}

.commerce-cue-buy.is-owned {
  color: #d0ead8;
  background: #17442f;
  border-color: rgba(101, 184, 130, 0.45);
  opacity: 1;
}

.commerce-cue-status {
  margin: 9px 0 0;
  color: #83c69a;
  font-size: 11px;
  text-align: center;
}

.commerce-cue-status.is-error {
  color: #ff9d9d;
}

.cue-preview-overlay {
  position: absolute;
  z-index: 18;
  top: max(16px, env(safe-area-inset-top));
  inset-inline-start: max(16px, env(safe-area-inset-left));
  display: grid;
  max-width: min(440px, calc(100vw - 140px));
  gap: 3px;
  padding: 13px 16px;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(4, 13, 10, 0.93), rgba(14, 30, 22, 0.78));
  border: 1px solid rgba(225, 183, 84, 0.38);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.cue-preview-overlay small {
  color: #d0a64b;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cue-preview-overlay strong {
  color: #f6e5bf;
  font-family: "KottDisplay", Georgia, serif;
  font-size: 21px;
  font-weight: 560;
}

.cue-preview-overlay span {
  color: #a7a295;
  font-size: 10px;
  line-height: 1.35;
}

.kott-visualizer-host[data-cue-preview="true"] .kott-shot-hud {
  display: none !important;
}

@media (max-width: 1120px) {
  .commerce-cue-showcase {
    grid-template-columns: minmax(280px, 0.76fr) minmax(430px, 1.24fr);
  }

  .commerce-cue-showcase__visual img {
    object-position: 58% center;
  }
}

@media (max-width: 820px) {
  .commerce-cue-showcase {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .commerce-cue-showcase__visual {
    min-height: 270px;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(225, 181, 80, 0.18);
  }

  .commerce-cue-showcase__visual img {
    height: 270px;
    min-height: 270px;
    object-position: center;
  }

  .commerce-cue-showcase__body {
    padding: 22px;
  }
}

@media (max-width: 540px) {
  .commerce-cue-showcase__visual,
  .commerce-cue-showcase__visual img {
    height: 220px;
    min-height: 220px;
  }

  .commerce-cue-showcase__body {
    padding: 18px 14px 20px;
  }

  .commerce-cue-showcase__body > header h2 {
    font-size: 31px;
  }

  .commerce-cue-specs {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .commerce-cue-actions {
    grid-template-columns: 1fr;
  }

  .cue-preview-overlay {
    top: max(8px, env(safe-area-inset-top));
    inset-inline-start: max(8px, env(safe-area-inset-left));
    max-width: calc(100vw - 112px);
    padding: 9px 11px;
  }

  .cue-preview-overlay span {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .commerce-cue-showcase {
    min-height: 0;
    grid-template-columns: 34% minmax(0, 1fr);
  }

  .commerce-cue-showcase__visual,
  .commerce-cue-showcase__visual img {
    height: 330px;
    min-height: 330px;
  }

  .commerce-cue-showcase__body {
    padding: 14px 16px;
  }

  .commerce-cue-showcase__body > header h2 {
    margin-block: 2px 4px;
    font-size: 27px;
  }

  .commerce-cue-showcase__body > header p,
  .commerce-cue-family > p,
  .commerce-cue-training-note,
  .commerce-cue-disciplines {
    display: none;
  }

  .commerce-cue-family,
  .commerce-cue-specs {
    margin-top: 9px;
  }

  .commerce-cue-specs {
    gap: 12px;
    padding-top: 8px;
  }

  .cue-stat-matrix--showcase { gap: 4px; padding-block: 7px; }
  .cue-stat-matrix--showcase .cue-stat-row { min-height: 17px; }
  .cue-stat-matrix--showcase .cue-stat-cell { height: 11px; }

  .commerce-cue-actions {
    padding-top: 9px;
  }

  .commerce-cue-actions button {
    min-height: 42px;
  }
}

/* Commerce storefront v2: compact desktop showroom with the game's real currency language. */
.commerce-page {
  padding: 14px clamp(16px, 2vw, 32px) 28px;
  background:
    radial-gradient(circle at 72% -18%, rgba(199, 148, 50, 0.12), transparent 38%),
    linear-gradient(105deg, rgba(2, 10, 8, 0.97), rgba(8, 22, 17, 0.94) 54%, rgba(3, 11, 9, 0.97)),
    #06100d;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}

.commerce-page::before {
  position: absolute;
  height: 180px;
  background:
    linear-gradient(180deg, rgba(117, 72, 22, 0.08), transparent),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 10px);
}

.commerce-toolbar {
  display: grid;
  width: min(1560px, 100%);
  min-height: 64px;
  grid-template-columns: auto minmax(260px, 600px);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(214, 170, 69, 0.18);
}

.commerce-toolbar small,
.commerce-section-head small,
.commerce-cue-empty small,
.commerce-offer-card__copy small,
.commerce-offer-modal__head small {
  color: #c99c42;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.commerce-toolbar h1 {
  margin: 0;
  color: #f7ead0;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 560;
  letter-spacing: 0.025em;
  line-height: 1;
}

.commerce-toolbar p {
  margin: 0;
  color: #aaa597;
  font-size: 12px;
  line-height: 1.35;
  text-align: end;
}

.commerce-shell {
  display: grid;
  width: min(1560px, 100%);
  min-width: 0;
  grid-template-columns: 194px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
  margin: 0 auto;
}

.commerce-category-tabs {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 0;
  padding: 7px;
  overflow: visible;
  background: linear-gradient(180deg, rgba(12, 28, 22, 0.98), rgba(5, 15, 12, 0.98));
  border: 1px solid rgba(215, 174, 78, 0.22);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.commerce-category-tabs button {
  display: grid;
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  color: #aaa596;
  font-size: 12px;
  font-weight: 640;
  text-align: start;
  background: transparent;
  border: 0;
  border-inline-start: 2px solid transparent;
}

.commerce-category-tabs button:hover,
.commerce-category-tabs button:focus-visible {
  color: #f0d994;
  background: rgba(212, 167, 64, 0.06);
}

.commerce-category-tabs button.is-active {
  color: #f5dfa2;
  background: linear-gradient(90deg, rgba(34, 92, 66, 0.72), rgba(15, 47, 35, 0.28));
  border-inline-start-color: #dcaf4b;
  box-shadow: none;
}

.commerce-category-tabs .hall-currency-art,
.commerce-category-mark {
  width: 26px;
  height: 26px;
}

.commerce-category-mark {
  display: grid;
  place-items: center;
  color: #d4aa4b;
  font-family: Georgia, serif;
  font-size: 18px;
}

.commerce-catalog {
  min-width: 0;
}

.commerce-department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.commerce-department {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  color: #eee0bd;
  text-align: start;
  background: linear-gradient(145deg, rgba(18, 38, 30, .98), rgba(6, 15, 11, .98));
  border: 1px solid rgba(205, 164, 71, .2);
  box-shadow: inset 0 1px rgba(255, 240, 196, .035), 0 9px 20px rgba(0, 0, 0, .2);
  cursor: pointer;
}

.commerce-department:hover,
.commerce-department:focus-visible {
  color: #fff0c1;
  border-color: rgba(230, 188, 87, .58);
  background: linear-gradient(145deg, rgba(27, 68, 49, .98), rgba(8, 23, 16, .98));
}

.commerce-department__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #dfb759;
}

.commerce-department__icon .hall-currency-art,
.commerce-department__icon .commerce-category-mark,
.commerce-department__icon .commerce-category-chalk,
.commerce-department__icon .commerce-category-hint,
.commerce-department__icon .commerce-category-tip,
.commerce-department__icon .commerce-category-extension,
.commerce-department__icon .commerce-category-glove {
  width: 32px;
  height: 32px;
}

.commerce-department__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.commerce-department__copy small {
  overflow: hidden;
  color: #9d906f;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.commerce-department__copy strong {
  overflow: hidden;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  letter-spacing: .035em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.commerce-department > b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  color: #d9bd78;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(214, 174, 79, .18);
  border-radius: 50%;
}

.commerce-section-head {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.commerce-section-head h2 {
  margin: 0;
  color: #f6ead0;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 560;
  line-height: 1.05;
}

.commerce-section-balance {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: #f4dfab;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(213, 170, 72, 0.2);
  font-variant-numeric: tabular-nums;
}

.commerce-section-balance .hall-currency-art {
  width: 30px;
  height: 30px;
}

.commerce-offer-grid {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

@media (min-width: 1321px) {
  .commerce-offer-grid[data-commerce-category="chalk"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.commerce-offer-card {
  min-height: 284px;
  grid-template-rows: minmax(126px, 1fr) auto auto 48px;
  background: linear-gradient(160deg, #10221b, #08130f 66%, #060b09);
  border: 1px solid rgba(200, 158, 63, 0.22);
  border-radius: 2px;
  box-shadow: 0 15px 28px rgba(0, 0, 0, 0.29), inset 0 1px rgba(255, 255, 255, 0.035);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.commerce-offer-card:hover {
  border-color: rgba(229, 188, 88, 0.48);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.commerce-offer-card::after {
  inset: 5px;
  border-color: rgba(240, 215, 154, 0.045);
}

.commerce-offer-card--rubies {
  background: radial-gradient(circle at 50% 26%, rgba(205, 30, 59, 0.23), transparent 35%), linear-gradient(160deg, #241116, #0c0c0c 68%);
}

.commerce-offer-card--chips {
  background: radial-gradient(circle at 50% 25%, rgba(205, 158, 53, 0.17), transparent 36%), linear-gradient(160deg, #211b0e, #0b0d0b 68%);
}

.commerce-offer-card--cases,
.commerce-offer-card--club {
  background: radial-gradient(circle at 50% 25%, rgba(194, 142, 44, 0.15), transparent 38%), linear-gradient(160deg, #1c180f, #0a0e0b 70%);
}

.commerce-offer-card--hints {
  background: radial-gradient(circle at 50% 24%, rgba(45, 121, 87, 0.2), transparent 39%), linear-gradient(160deg, #10251c, #07100c 70%);
}

.commerce-offer-card--chalk {
  background:
    radial-gradient(circle at 50% 27%, rgba(48, 105, 78, .24), transparent 42%),
    linear-gradient(160deg, #10231b, #07110d 70%);
}

.commerce-art {
  min-height: 126px;
}

.commerce-art--official-currency {
  display: grid;
  place-items: center;
}

.commerce-art--official-currency img.hall-currency-art {
  width: 94px;
  height: 94px;
  filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.55));
}

.commerce-art--case {
  display: grid;
  place-items: center;
}

.commerce-art--case img {
  display: block;
  width: min(100%, 180px);
  height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 15px 14px rgb(0 0 0 / 58%));
}

.commerce-art--chalk {
  display: grid;
  place-items: center;
}

.commerce-art--chalk img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px 8px;
  object-fit: contain;
  filter: drop-shadow(0 16px 13px rgba(0, 0, 0, .58));
}

.commerce-art--chalk i {
  width: 76px;
  height: 72px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(145deg, #1d5278, #071d31 72%);
  border: 3px solid #a97a31;
  border-radius: 4px;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.24), 0 16px 18px rgba(0, 0, 0, 0.45);
}

.commerce-art--chalk b {
  position: absolute;
  z-index: 2;
  color: #f0d48b;
  font-family: "KottDisplay", Georgia, serif;
  font-size: 23px;
}

.commerce-art--club {
  display: grid;
  place-items: center;
}

.commerce-art--club i {
  width: 88px;
  height: 88px;
  border: 2px solid #d0a244;
  background: radial-gradient(circle, #15402e, #07110d 72%);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.34), 0 16px 20px rgba(0, 0, 0, 0.48);
}

.commerce-art--club b {
  color: #f1d27a;
  font-size: 28px;
}

.commerce-offer-grid[data-commerce-category="hints"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commerce-art--avatar {
  display: grid;
  place-items: center;
}

.commerce-art--avatar img {
  width: 94px;
  height: 94px;
  object-fit: cover;
  border: 2px solid #d0a64b;
  border-radius: 50%;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(0, 0, 0, 0.3);
}

.commerce-art--frame {
  display: grid;
  place-items: center;
}

.commerce-art--frame i {
  width: 92px;
  height: 92px;
  border: 7px double #d3a548;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.55), 0 14px 20px rgba(0, 0, 0, 0.45);
}

.commerce-art--frame b {
  position: absolute;
  color: #e3bb62;
  font-size: 28px;
}

.commerce-art--messages {
  display: grid;
  grid-template-columns: repeat(3, auto);
  place-content: center;
  gap: 7px;
}

.commerce-art--messages i,
.commerce-art--messages b,
.commerce-art--messages em {
  min-width: 50px;
  padding: 10px 9px;
  color: #f0ddb0;
  font-style: normal;
  font-size: 13px;
  text-align: center;
  background: #173429;
  border: 1px solid rgba(217, 176, 78, 0.36);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
}

.commerce-offer-card__copy {
  padding: 0 14px 6px;
}

.commerce-offer-card__copy h3 {
  margin-top: 2px;
  color: #f5e6c5;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.12;
}

.commerce-offer-card__prices {
  min-height: 36px;
  gap: 5px;
  padding: 3px 10px 9px;
}

.commerce-price {
  font-variant-numeric: tabular-nums;
}

.commerce-price .hall-currency-art {
  width: 20px;
  height: 20px;
}

.commerce-earned-price {
  color: #b9cdbf;
  font-size: 12px;
  font-weight: 650;
}

.commerce-offer-card > button {
  min-height: 48px;
  color: #151006;
  font-size: 13px;
  letter-spacing: 0.07em;
  background: linear-gradient(180deg, #efd48d, #bd8028);
  border-top-color: #f7e7b4;
}

.commerce-cue-empty {
  display: grid;
  min-height: 360px;
  grid-template-columns: minmax(260px, 0.7fr) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(28px, 5vw, 72px);
  background:
    linear-gradient(120deg, rgba(24, 62, 46, 0.55), rgba(5, 14, 11, 0.85)),
    repeating-linear-gradient(90deg, rgba(217, 174, 78, 0.025) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(217, 174, 78, 0.025) 0 1px, transparent 1px 34px);
  border: 1px solid rgba(216, 174, 78, 0.22);
}

.commerce-cue-empty__bay {
  display: grid;
  min-height: 230px;
  place-items: center;
  background: radial-gradient(circle, rgba(213, 168, 64, 0.12), transparent 62%);
  border: 1px solid rgba(213, 168, 64, 0.12);
}

.commerce-cue-empty__bay span {
  color: #cda347;
  font-size: 68px;
  opacity: 0.76;
}

.commerce-cue-empty h2 {
  margin: 4px 0 8px;
  color: #f3e5c7;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 560;
}

.commerce-cue-empty p {
  max-width: 520px;
  margin: 0;
  color: #aaa598;
  font-size: 14px;
  line-height: 1.5;
}

.commerce-offer-modal {
  width: min(780px, 94vw);
  max-height: min(730px, 91dvh);
  grid-template-columns: 37% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border-radius: 2px;
}

.commerce-offer-modal__art {
  grid-row: 1 / 3;
  min-height: 350px;
}

.commerce-offer-modal__art .commerce-art {
  min-height: 280px;
}

.commerce-offer-modal__art .commerce-art--chalk img {
  padding: 10px;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .64));
}

.commerce-offer-modal__art .commerce-art--official-currency img.hall-currency-art {
  width: 142px;
  height: 142px;
}

.commerce-offer-modal__head {
  padding: 42px 54px 8px 28px;
}

.commerce-offer-modal__head h2 {
  font-size: clamp(25px, 2.5vw, 36px);
}

.commerce-offer-modal__body {
  padding: 4px 28px 18px;
}

.commerce-offer-modal__body li strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.commerce-offer-modal__body li svg {
  width: 22px;
  height: 22px;
}

.commerce-fair-play-note,
.commerce-local-selection {
  margin: 10px 0 0;
  padding: 9px 11px;
  color: #d5e2d8;
  font-size: 11px;
  line-height: 1.4;
  background: rgba(25, 77, 56, 0.28);
  border-inline-start: 3px solid #58a478;
}

.commerce-local-selection {
  color: #f0dcaa;
  background: rgba(115, 78, 21, 0.25);
  border-inline-start-color: #d2a341;
}

.commerce-checkout {
  display: flex;
  min-height: 58px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #151006;
  cursor: pointer;
  background: linear-gradient(180deg, #f0d58c, #bc7e27);
  border-top: 1px solid #f8e7b2;
}

.commerce-checkout strong,
.commerce-checkout .commerce-price {
  display: inline-flex;
  align-items: center;
  color: #151006;
}

.commerce-checkout .hall-currency-art {
  width: 21px;
  height: 21px;
}

.commerce-checkout--secondary {
  color: #e7d6ad;
  background: #12231c;
  border-top-color: rgba(224, 182, 83, 0.2);
}

.commerce-local-note {
  display: block;
  grid-column: 1 / -1;
  padding: 8px 18px;
  color: #7f8179;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  background: #080d0b;
}

[dir="rtl"] .commerce-toolbar p { text-align: start; }

@media (max-width: 1320px) {
  .commerce-shell { grid-template-columns: 176px minmax(0, 1fr); }
  .commerce-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .commerce-page { padding: 10px 12px 24px; }
  .commerce-toolbar {
    min-height: 50px;
    grid-template-columns: 1fr;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .commerce-toolbar p { display: none; }
  .commerce-toolbar h1 { font-size: 28px; }
  .commerce-shell { grid-template-columns: 1fr; gap: 10px; }
  .commerce-category-tabs {
    position: sticky;
    top: -1px;
    z-index: 20;
    display: flex;
    margin-inline: -12px;
    padding: 5px 12px;
    overflow-x: auto;
    border-inline: 0;
    scrollbar-width: none;
  }
  .commerce-category-tabs::-webkit-scrollbar { display: none; }
  .commerce-category-tabs button {
    min-width: 104px;
    grid-template-columns: 24px auto;
    gap: 6px;
    padding: 6px 8px;
    border-inline-start: 0;
    border-bottom: 2px solid transparent;
  }
  .commerce-category-tabs button.is-active { border-bottom-color: #dcaf4b; }
  .commerce-category-tabs .hall-currency-art,
  .commerce-category-mark,
  .commerce-category-tabs .commerce-category-chalk,
  .commerce-category-tabs .commerce-category-hint,
  .commerce-category-tabs .commerce-category-tip,
  .commerce-category-tabs .commerce-category-extension,
  .commerce-category-tabs .commerce-category-glove { width: 22px; height: 22px; }
  .commerce-section-head { min-height: 46px; margin-bottom: 8px; }
  .commerce-section-head h2 { font-size: 27px; }
  .commerce-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .commerce-offer-card { min-height: 260px; grid-template-rows: minmax(108px, 1fr) auto auto 48px; }
  .commerce-art { min-height: 108px; }
  .commerce-art--official-currency img.hall-currency-art { width: 78px; height: 78px; }
  .commerce-cue-empty { grid-template-columns: 1fr; min-height: 320px; padding: 28px; }
  .commerce-cue-empty__bay { display: none; }
  .commerce-offer-modal {
    width: min(540px, 94vw);
    grid-template-columns: 1fr;
    grid-template-rows: 150px auto auto auto auto;
  }
  .commerce-offer-modal__art { grid-row: 1; min-height: 150px; }
  .commerce-offer-modal__art .commerce-art { min-height: 140px; }
  .commerce-offer-modal__art .commerce-art--official-currency img.hall-currency-art { width: 94px; height: 94px; }
  .commerce-offer-modal__head { padding: 16px 54px 2px 22px; }
  .commerce-offer-modal__body { padding: 6px 22px 15px; }
}

@media (max-width: 420px) and (orientation: portrait) {
  .commerce-toolbar { min-height: 44px; }
  .commerce-toolbar small { font-size: 8px; }
  .commerce-toolbar h1 { font-size: 26px; }
  .commerce-department-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
  .commerce-department { min-height: 72px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .commerce-department__icon { width: 30px; height: 30px; }
  .commerce-department__icon .hall-currency-art,
  .commerce-department__icon .commerce-category-mark,
  .commerce-department__icon .commerce-category-chalk,
  .commerce-department__icon .commerce-category-hint,
  .commerce-department__icon .commerce-category-tip,
  .commerce-department__icon .commerce-category-extension,
  .commerce-department__icon .commerce-category-glove { width: 27px; height: 27px; }
  .commerce-department__copy strong { font-size: 11px; }
  .commerce-offer-grid { grid-template-columns: 1fr; }
  .commerce-offer-card {
    min-height: 230px;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto 48px;
  }
  .commerce-offer-card .commerce-art { grid-row: 1 / 3; min-height: 160px; }
  .commerce-offer-card__copy { align-self: end; padding: 20px 12px 4px; text-align: start; }
  .commerce-offer-card__prices { align-self: start; justify-content: flex-start; padding: 3px 12px 10px; }
  .commerce-offer-card > button { grid-column: 1 / -1; }
  .commerce-art--official-currency img.hall-currency-art { width: 72px; height: 72px; }
  .commerce-art--messages { grid-template-columns: 1fr; gap: 3px; }
  .commerce-art--messages i,
  .commerce-art--messages b,
  .commerce-art--messages em { min-width: 40px; padding: 5px; }
}

@media (max-width: 340px) and (orientation: portrait) {
  .commerce-department { grid-template-columns: 29px minmax(0, 1fr); }
  .commerce-department > b { display: none; }
  .commerce-department__copy strong { font-size: 10px; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .commerce-page { padding: 6px 10px 18px; }
  .commerce-toolbar { display: none; }
  .commerce-shell { gap: 6px; }
  .commerce-category-tabs { margin-inline: -10px; padding-block: 3px; }
  .commerce-category-tabs button { min-width: 96px; min-height: 40px; }
  .commerce-section-head { min-height: 38px; margin-bottom: 5px; }
  .commerce-section-head small { display: none; }
  .commerce-section-head small[data-storefront-status] { display: block; }
  .commerce-section-head h2 { font-size: 23px; }
  .commerce-section-balance { min-height: 36px; padding-block: 3px; }
  .commerce-section-balance .hall-currency-art { width: 25px; height: 25px; }
  .commerce-department-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 7px; }
  .commerce-department { min-height: 58px; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 5px; padding: 6px; }
  .commerce-department__icon,
  .commerce-department__icon .hall-currency-art,
  .commerce-department__icon .commerce-category-mark,
  .commerce-department__icon .commerce-category-chalk,
  .commerce-department__icon .commerce-category-hint,
  .commerce-department__icon .commerce-category-tip,
  .commerce-department__icon .commerce-category-extension,
  .commerce-department__icon .commerce-category-glove { width: 24px; height: 24px; }
  .commerce-department__copy small { display: none; }
  .commerce-department__copy strong { font-size: 10px; }
  .commerce-department > b { min-width: 20px; height: 20px; font-size: 8px; }
  .commerce-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .commerce-offer-card { min-height: 210px; grid-template-rows: minmax(76px, 1fr) auto auto 44px; }
  .commerce-art { min-height: 76px; }
  .commerce-art--official-currency img.hall-currency-art { width: 58px; height: 58px; }
  .commerce-offer-card__copy h3 { font-size: 15px; }
  .commerce-offer-card__prices { min-height: 27px; padding-bottom: 4px; }
  .commerce-offer-card > button { min-height: 44px; }
  .commerce-offer-modal {
    width: min(700px, 95vw);
    grid-template-columns: 30% minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 46px 28px;
  }
  .commerce-offer-modal__art { grid-row: 1 / 3; min-height: 190px; }
  .commerce-offer-modal__head { padding: 24px 52px 0 18px; }
  .commerce-offer-modal__body { padding: 0 18px 8px; }
  .commerce-offer-modal__body li { min-height: 29px; padding-block: 3px; }
  .commerce-checkout { min-height: 46px; }
  .commerce-local-note { padding: 4px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-offer-card { transform: none !important; transition-duration: 1ms !important; }
}

/* Authoritative economy, tasks, achievements, cases and cue inventory. */
.progression-page {
  --progression-gold: #d2a94b;
  --progression-gold-bright: #f1d489;
  --progression-ink: #07100c;
  min-height: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: clamp(18px, 2.4vw, 34px) clamp(18px, 3vw, 46px) 48px;
  color: #eee6d2;
  background:
    radial-gradient(circle at 85% 0%, rgba(176, 128, 39, .12), transparent 30%),
    linear-gradient(145deg, rgba(5, 20, 14, .98), rgba(4, 10, 8, .99) 55%, #090c0a);
}

.cue-center-nav {
  position: sticky;
  z-index: 4;
  top: -1px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  padding: 6px;
  background: rgba(4, 12, 9, .94);
  border: 1px solid rgba(210, 169, 73, .22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
  backdrop-filter: blur(14px);
}

.cue-family-selector,
.commerce-cue-family-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 12px;
  padding: 5px;
  border: 1px solid rgba(209, 168, 74, .23);
  background: rgba(4, 12, 9, .94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}

.cue-family-selector button,
.commerce-cue-family-tabs button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  color: #bfb397;
  border: 1px solid rgba(203, 158, 60, .16);
  border-radius: 3px;
  background: #09140f;
  font: 800 12px/1 "KottCondensed", "Oswald", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out, background 160ms ease-out, transform 120ms ease-out;
}

.cue-family-selector button b,
.commerce-cue-family-tabs button b {
  color: #d4ad56;
  font-size: 15px;
}

.cue-family-selector button:hover,
.cue-family-selector button:focus-visible,
.commerce-cue-family-tabs button:hover,
.commerce-cue-family-tabs button:focus-visible {
  color: #f1e4c6;
  border-color: rgba(222, 181, 84, .5);
}

.cue-family-selector button:active,
.commerce-cue-family-tabs button:active { transform: translateY(1px); }

.cue-family-selector button.is-active,
.commerce-cue-family-tabs button.is-active {
  color: #181006;
  border-color: #e0b95f;
  background: linear-gradient(#efd486, #bd8d35);
}

.cue-family-selector button.is-active b,
.commerce-cue-family-tabs button.is-active b { color: #2f210b; }

.cue-center-nav button {
  min-height: 42px;
  color: #d7c49b;
  background: #0a1510;
  border: 1px solid rgba(203, 158, 60, .18);
  font: 800 11px/1 "Oswald", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

.cue-center-nav button:hover,
.cue-center-nav button:focus-visible {
  color: #1a1206;
  background: linear-gradient(#f0d68d, #bc8b31);
  border-color: #e5bd62;
}

.cue-center-section {
  scroll-margin-top: 64px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(209, 168, 74, .2);
}

.cue-center-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cue-center-section__head small {
  color: #c89b42;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cue-center-section__head h2 {
  margin: 4px 0 5px;
  color: #f0e5cc;
  font: 700 30px/1 "Oswald", sans-serif;
  text-transform: uppercase;
}

.cue-center-section__head p,
.cue-family-banner p {
  max-width: 720px;
  margin: 0;
  color: rgba(234, 228, 212, .58);
  font-size: 12px;
  line-height: 1.45;
}

.cue-flagship {
  display: grid;
  min-height: 430px;
  grid-template-columns: minmax(320px, .9fr) minmax(440px, 1.1fr);
  overflow: hidden;
  margin: 18px 0 6px;
  border: 1px solid rgba(225, 181, 80, .38);
  background: radial-gradient(circle at 18% 15%, rgba(135, 17, 43, .24), transparent 36%), linear-gradient(130deg, #0c1713, #050a08 64%, #110b09);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 246, 218, .04);
}

.cue-flagship__visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #080908;
  border-inline-end: 1px solid rgba(225, 181, 80, .18);
}

.cue-flagship__visual img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: contain;
}

.cue-flagship__visual span {
  position: absolute;
  inset-inline: 22px;
  bottom: 18px;
  padding-top: 9px;
  color: #c9ac74;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .16em;
  text-align: center;
  border-top: 1px solid rgba(224, 180, 80, .24);
}

.cue-flagship__body {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
}

.cue-flagship__body header small {
  color: #d2a84e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.cue-flagship__body header h2 {
  margin: 5px 0 8px;
  color: #f7e8c7;
  font-family: "KottDisplay", Georgia, serif;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 540;
  line-height: .98;
}

.cue-flagship__body header p {
  margin: 0;
  color: #aaa497;
  font-size: 12px;
  line-height: 1.5;
}

.cue-flagship__body > .cue-stat-matrix { min-width: 0; }
.cue-flagship__price { display: flex; align-items: baseline; gap: 10px; }
.cue-flagship__price strong { color: #f1d486; font: 700 19px/1 "Oswald", sans-serif; text-transform: uppercase; }
.cue-flagship__price span { color: #888174; font-size: 11px; }

.trophy-cabinet-stage {
  display: grid;
  min-height: 430px;
  grid-template-columns: minmax(0, 1fr) 260px;
  overflow: hidden;
  border: 1px solid rgba(205, 164, 69, .24);
  background: radial-gradient(circle at 34% 24%, rgba(195, 147, 45, .14), transparent 30%), linear-gradient(145deg, #132018, #060c09 65%);
  box-shadow: inset 0 1px rgba(255, 235, 178, .04), 0 20px 42px rgba(0, 0, 0, .28);
}

.trophy-cabinet-stage article {
  display: grid;
  place-items: center;
  align-content: center;
  padding: 38px;
  text-align: center;
}

.trophy-cabinet-stage__cup {
  display: grid;
  width: 120px;
  height: 120px;
  place-items: center;
  margin-bottom: 18px;
  color: #d6ae55;
  border: 1px solid rgba(218, 176, 77, .34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 182, 87, .12), rgba(5, 13, 9, .7) 68%);
  font: 700 58px/1 serif;
}

.trophy-cabinet-stage article small { color: #c59b47; font-size: 9px; letter-spacing: .16em; }
.trophy-cabinet-stage article h2 { margin: 8px 0; color: #f0e5cc; font: 700 28px/1.05 "Oswald", sans-serif; text-transform: uppercase; }
.trophy-cabinet-stage article p { max-width: 560px; margin: 0; color: #9b9587; font-size: 12px; line-height: 1.5; }
.trophy-cabinet-stage aside { display: grid; align-content: center; gap: 1px; padding: 22px; background: rgba(3, 9, 6, .72); border-inline-start: 1px solid rgba(203, 159, 65, .16); }
.trophy-cabinet-stage aside span { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 12px; background: #09120e; border: 1px solid rgba(194, 151, 61, .12); }
.trophy-cabinet-stage aside small { color: #8f8775; font-size: 9px; letter-spacing: .1em; }
.trophy-cabinet-stage aside b { color: #e1c370; font: 700 19px/1 "Oswald", sans-serif; }

.progression-head {
  min-height: 116px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(211, 174, 84, .26);
}

.progression-head small,
.progression-contract small,
.achievement-card small,
.cue-inventory-copy small,
.case-slot small,
.progression-summary small,
.cue-family-banner small {
  color: #c89b42;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.progression-head h1 {
  margin: 4px 0 3px;
  color: #f0e4c8;
  font: 700 clamp(30px, 4vw, 54px)/.92 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.progression-head p {
  max-width: 720px;
  margin: 0;
  color: rgba(235, 228, 210, .62);
  font-size: 13px;
}

.progression-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0;
  border: 1px solid rgba(212, 174, 80, .23);
  background: rgba(7, 17, 13, .86);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.progression-summary > span {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
  border-right: 1px solid rgba(212, 174, 80, .16);
}

.progression-summary > span:last-child { border-right: 0; }
.progression-summary b { color: #f1d486; font: 700 18px/1 "Oswald", sans-serif; }

.progression-contracts,
.case-grid,
.cue-inventory-grid,
.achievement-grid {
  display: grid;
  gap: 12px;
}

.progression-contracts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.achievement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cue-inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.progression-contract,
.achievement-card,
.case-slot,
.cue-inventory-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 72, .24);
  background:
    linear-gradient(150deg, rgba(21, 31, 24, .98), rgba(7, 13, 10, .98) 70%),
    #0b100d;
  box-shadow: inset 0 1px rgba(255, 237, 185, .04), 0 14px 32px rgba(0, 0, 0, .25);
}

.progression-contract,
.achievement-card {
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto auto;
  gap: 9px 14px;
  padding: 20px;
}

.progression-contract__index,
.achievement-card > span,
.case-slot > span {
  position: absolute;
  top: 12px;
  right: 14px;
  color: rgba(229, 198, 119, .2);
  font: 700 28px/1 "Oswald", sans-serif;
}

.progression-contract h2,
.achievement-card h2,
.case-slot h2,
.cue-inventory-card h2,
.cue-family-banner h2 {
  margin: 5px 0 7px;
  color: #f0e5cc;
  font: 700 22px/1 "Oswald", sans-serif;
  text-transform: uppercase;
}

.progression-contract p,
.achievement-card p,
.case-slot p,
.cue-inventory-card p {
  margin: 0;
  color: rgba(234, 228, 212, .58);
  font-size: 12px;
  line-height: 1.45;
}

.progression-contract > strong,
.achievement-card > strong { align-self: end; color: #d8b768; font-size: 12px; }
.progression-contract > em,
.achievement-card > em { grid-column: 1 / -1; color: #b6ab90; font-size: 10px; font-style: normal; }

.progression-bar {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #020604;
  box-shadow: inset 0 1px 2px #000;
}

.progression-bar i {
  display: block;
  width: calc(var(--progress) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #7d5a1e, #efcd79);
  box-shadow: 0 0 10px rgba(229, 190, 89, .35);
}

.progression-contract button,
.achievement-card button,
.case-slot button,
.cue-inventory-actions button,
.progression-page--loading button,
.achievement-filters button {
  min-height: 40px;
  border: 1px solid #8b6725;
  color: #171106;
  background: linear-gradient(#f0d68d, #bc8b31);
  font: 800 12px/1 "Oswald", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.progression-contract button,
.achievement-card button { grid-column: 1 / -1; }
.progression-contract button:disabled,
.achievement-card button:disabled,
.case-slot button:disabled,
.cue-inventory-actions button:disabled { opacity: .46; cursor: default; }
.is-complete { border-color: rgba(227, 184, 74, .58); }
.is-claimed { opacity: .68; }

.achievement-filters {
  display: flex;
  gap: 7px;
  margin: 0 0 14px;
  overflow-x: auto;
}

.achievement-filters button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 15px;
  color: #bcae8e;
  border-color: rgba(188, 145, 55, .22);
  background: #0a120e;
}

.achievement-filters button.is-active { color: #171006; background: #d8b357; }

.case-rules {
  display: flex;
  gap: 1px;
  margin: 18px 0;
  background: rgba(197, 155, 64, .16);
}

.case-rules span {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 14px;
  background: #09120e;
}
.case-rules b { color: #e4c16c; font: 700 25px/1 "Oswald", sans-serif; }
.case-rules small { color: #958d7a; font-size: 10px; }

.case-slot { min-height: 330px; padding: 18px; text-align: center; }
.case-slot__vault {
  position: relative;
  width: 112px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 14px auto 16px;
  color: #a37b2f;
  border: 2px solid #7d5d23;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(145deg, #3b2c15, #100e0a 60%);
  box-shadow: 0 14px 22px #0008, inset 0 0 0 4px #090806;
  font: 700 34px/1 serif;
}
.case-slot__vault::before { content: ""; position: absolute; inset: -12px 14px auto; height: 18px; border: 2px solid #7d5d23; border-bottom: 0; border-radius: 10px 10px 0 0; }
.case-slot--master_gold .case-slot__vault { border-color: #c39a44; background: linear-gradient(145deg, #8b682b, #171006 62%); }
.case-slot--champion_black .case-slot__vault { border-color: #b9a56e; background: linear-gradient(145deg, #2c312e, #070807 62%); }
.case-slot--crown .case-slot__vault { border-color: #e0ba5b; box-shadow: 0 0 24px #c18a2740, inset 0 0 0 4px #090806; }
.case-slot.is-ready { border-color: #d5ad4f; box-shadow: 0 0 28px rgba(202, 153, 44, .16); }
.case-slot select { width: 100%; min-height: 38px; margin: 14px 0 8px; color: #e9ddc1; border: 1px solid #5c4923; background: #07100c; }
.case-slot button { width: 100%; }

.cue-family-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 108px;
  margin: 18px 0 14px;
  padding: 18px 24px;
  border: 1px solid rgba(210, 168, 70, .25);
  background: linear-gradient(100deg, #17140d, #07120d 64%);
}

.cue-family-banner__identity {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
}

.cue-family-banner__identity img {
  display: block;
  width: 100%;
  height: 76px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .58));
}

.cue-inventory-card {
  min-height: 480px;
  display: grid;
  grid-template-rows: 118px auto auto auto auto;
  padding: 16px;
}
.cue-inventory-card.is-equipped { border-color: #dfb95d; box-shadow: 0 0 22px rgba(221, 175, 63, .14); }
.cue-inventory-art { position: relative; overflow: hidden; margin: -16px -16px 14px; background: radial-gradient(circle at 50% 30%, #5d472245, transparent 38%), #0a0d0b; }
.cue-inventory-art i,
.cue-inventory-art b,
.cue-inventory-art em,
.cue-inventory-art > span { position: absolute; left: 8%; right: 8%; top: 56%; height: 7px; transform: rotate(-8deg); transform-origin: center; border-radius: 5px; }
.cue-inventory-art i { background: linear-gradient(90deg, #c5ad77, #6f4f2e 55%, #19130e); box-shadow: 0 2px 7px #000; }
.cue-inventory-art b { left: 61%; height: 11px; top: 54%; background: linear-gradient(90deg, #171717, #ad7e2e, #19150e); }
.cue-inventory-art em { right: auto; left: 7%; width: 4%; height: 10px; top: 54.5%; background: #e7ded0; }
.cue-inventory-art > span { left: 57%; right: auto; width: 5%; height: 12px; top: 53.5%; background: #aa7d2f; box-shadow: 0 0 0 1px #241a0a; }
.cue-family-snooker .cue-inventory-art i,
.cue-inventory-art.cue-family-snooker i { background: linear-gradient(90deg, #efe0b6, #a48b5d 62%, #2b2116); }
.cue-family-snooker .cue-inventory-art b,
.cue-inventory-art.cue-family-snooker b { background: linear-gradient(90deg, #151713, #d8c8a2, #4f3822); }
.cue-family-pyramid .cue-inventory-art i,
.cue-inventory-art.cue-family-pyramid i { height: 9px; background: linear-gradient(90deg, #d8bb82, #79502f 46%, #21120d); }
.cue-family-pyramid .cue-inventory-art b,
.cue-inventory-art.cue-family-pyramid b { height: 13px; background: linear-gradient(90deg, #32100f, #b38a48, #160b08); }
.cue-lane-fantasy .cue-inventory-art > span { width: 8%; background: linear-gradient(90deg, #6f1127, #d63b63 48%, #5d0b1d); box-shadow: 0 0 0 2px #b7903d, 0 0 12px rgba(185, 36, 72, .3); }
.cue-inventory-card.is-family-flagship { border-color: rgba(225, 182, 80, .5); }
.cue-inventory-art--flagship { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(142, 20, 48, .24), transparent 42%), #070908; }
.cue-inventory-art--flagship img { width: 100%; height: 100%; object-fit: contain; }
.cue-flagship__visual--planned { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(204, 167, 76, .12), transparent 36%), #070b08; }
.cue-flagship__visual--planned .cue-inventory-art { width: min(90%, 620px); height: 210px; margin: 0; overflow: visible; background: transparent; }
.cue-flagship__visual--planned .cue-inventory-art :is(i, b, em, span) { transform: rotate(-5deg); }
.commerce-cue-card.is-kings-treasury { border-color: rgba(224, 180, 79, .52); box-shadow: 0 0 30px rgba(151, 24, 49, .12), inset 0 1px rgba(255, 237, 185, .05); }
.cue-inventory-copy { min-height: 72px; }

.cue-stat-matrix {
  display: grid;
  gap: 7px;
  min-width: min(530px, 58vw);
  padding: 10px 12px;
  border: 1px solid rgba(213, 171, 73, .2);
  background:
    linear-gradient(100deg, rgba(13, 30, 22, .96), rgba(5, 12, 9, .98)),
    #07100c;
  box-shadow: inset 0 1px rgba(255, 237, 184, .035);
}

.cue-stat-row {
  display: grid;
  min-width: 0;
  min-height: 20px;
  grid-template-columns: minmax(72px, .72fr) minmax(120px, 1.7fr) 38px;
  align-items: center;
  gap: 9px;
}

.cue-stat-row__label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #c6baa0;
  font: 700 10px/1.05 "Oswald", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cue-stat-row__cells {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(10, minmax(5px, 1fr));
  gap: 3px;
}

.cue-stat-cell {
  display: block;
  min-width: 0;
  height: 14px;
  border: 1px solid rgba(190, 157, 85, .14);
  background: #07100c;
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.cue-stat-cell.is-filled {
  border-color: rgba(112, 185, 139, .68);
  background: linear-gradient(180deg, #4b9d6b, #245b3c);
  box-shadow: inset 0 1px rgba(225, 250, 230, .18), 0 0 7px rgba(54, 137, 88, .18);
}

.cue-stat-cell.is-potential {
  border-color: rgba(211, 166, 69, .54);
  background: linear-gradient(180deg, rgba(202, 157, 60, .3), rgba(89, 65, 23, .22));
  box-shadow: inset 0 1px rgba(255, 226, 156, .08);
}

.cue-stat-row strong {
  color: #f0d58e;
  font: 700 13px/1 "Oswald", sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.cue-stat-row strong small {
  color: #746f64;
  font-size: 9px;
}

.cue-stat-matrix--card {
  min-width: 0;
  gap: 5px;
  margin: 10px 0 14px;
  padding: 9px;
}

.cue-stat-matrix--card .cue-stat-row {
  min-height: 18px;
  grid-template-columns: minmax(60px, .62fr) minmax(105px, 1.65fr) 33px;
  gap: 7px;
}

.cue-stat-matrix--card .cue-stat-row__label { font-size: 9px; }
.cue-stat-matrix--card .cue-stat-cell { height: 12px; }
.cue-stat-matrix--card .cue-stat-row strong { font-size: 11px; }
.cue-stat-matrix--showcase { min-width: 0; margin-top: 12px; }
.cue-inventory-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 12px; }
.cue-inventory-progress span { padding: 7px; color: #8f8775; border: 1px solid #28291f; background: #070c09; font-size: 9px; text-transform: uppercase; }
.cue-inventory-progress b { display: block; margin-top: 4px; color: #e1c370; font-size: 11px; }
.cue-inventory-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cue-inventory-actions button:only-child { grid-column: 1 / -1; }
.cue-inventory-actions button.is-secondary { color: #d4b765; border-color: #6c5222; background: #11150f; }

.commerce-cue-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  color: #b9ae93;
}
.commerce-cue-summary > div { display: flex; align-items: baseline; gap: 12px; }
.commerce-cue-summary b { color: #f2cf72; font: 700 30px/1 "Oswald", sans-serif; }
.commerce-cue-summary button {
  min-height: 42px;
  padding: 0 18px;
  color: #171106;
  background: linear-gradient(#f0d68d, #bc8b31);
  border: 1px solid #e2bc65;
  font: 800 11px/1 "Oswald", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.commerce-cue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commerce-cue-grid.commerce-cue-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.commerce-server-price { display: inline-flex; align-items: center; gap: 6px; }
.commerce-server-price > strong {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.commerce-server-price :is(svg, .hall-currency-art) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.commerce-checkout-stack { display: grid; grid-column: 1 / -1; gap: 8px; }
.commerce-hint-purchase {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(170px, .62fr) minmax(0, 1.38fr);
  gap: 10px;
  padding: 10px 18px 12px;
  background: rgba(4, 12, 9, .76);
  border-top: 1px solid rgba(214, 170, 71, .16);
}
.commerce-hint-purchase .commerce-family-choice { margin: 0; align-content: center; }
.commerce-hint-option {
  min-height: 54px;
  justify-content: space-between;
  padding: 7px 14px;
  text-align: start;
}
.commerce-hint-option > span { display: grid; gap: 3px; min-width: 0; }
.commerce-hint-option > span b { font-size: 12px; }
.commerce-hint-option > span small {
  overflow: hidden;
  font-size: 9px;
  font-weight: 620;
  letter-spacing: .025em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.commerce-hint-option > span small i { font-style: normal; }
.commerce-hint-option > span small i::after { content: " · "; }
.commerce-hint-option > span small time { font: inherit; }
.commerce-hint-option > strong { flex: 0 0 auto; }
.commerce-checkout--disabled { cursor: not-allowed; opacity: .55; }
.commerce-family-choice {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  color: #c7b995;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.commerce-family-choice select {
  min-height: 46px;
  border: 1px solid rgba(211, 171, 76, .4);
  border-radius: 8px;
  background: #07130e;
  color: #f4dfaa;
  padding: 0 12px;
}

.progression-page--loading { display: grid; place-content: center; place-items: center; gap: 14px; text-align: center; }
.progression-spinner { width: 42px; height: 42px; border: 2px solid #3b321f; border-top-color: #e3bd61; border-radius: 50%; animation: progression-spin .8s linear infinite; }
@keyframes progression-spin { to { transform: rotate(360deg); } }

@media (max-width: 1150px) {
  .achievement-grid,
  .cue-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) and (orientation: portrait) {
  .cue-flagship { grid-template-columns: 1fr; }
  .cue-flagship__visual { border-inline-end: 0; border-bottom: 1px solid rgba(225, 181, 80, .18); }
  .cue-flagship__visual img { height: 280px; min-height: 280px; }
}

@media (max-width: 760px) {
  .progression-page { padding: 14px 12px 90px; }
  .progression-head { min-height: 88px; align-items: center; }
  .progression-head h1 { font-size: 32px; }
  .progression-head p { display: none; }
  .progression-summary { grid-template-columns: repeat(2, 1fr); }
  .progression-summary > span:nth-child(2n) { border-right: 0; }
  .progression-contracts,
  .achievement-grid,
  .case-grid,
  .cue-inventory-grid { grid-template-columns: 1fr; }
  .progression-contract,
  .achievement-card { min-height: 220px; }
  .cue-family-banner { display: block; }
  .cue-family-banner__identity { grid-template-columns: 1fr; gap: 8px; }
  .cue-family-banner__identity img { height: 64px; }
  .cue-family-banner .cue-stat-matrix { min-width: 0; margin-top: 14px; }
  .cue-center-nav { top: -1px; }
  .cue-flagship { grid-template-columns: 1fr; }
  .cue-flagship__visual img { height: 250px; min-height: 250px; }
  .trophy-cabinet-stage { grid-template-columns: 1fr; }
  .trophy-cabinet-stage aside { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; border-inline-start: 0; border-top: 1px solid rgba(203, 159, 65, .16); }
  .trophy-cabinet-stage aside span { min-height: 62px; flex-direction: column; justify-content: center; }
  .commerce-cue-summary { align-items: stretch; flex-direction: column; }
  .commerce-cue-summary button { width: 100%; }
  .case-rules { display: grid; grid-template-columns: 1fr; }
  .commerce-cue-grid { grid-template-columns: 1fr; }
  .cue-family-selector,
  .commerce-cue-family-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; }
  .cue-family-selector button,
  .commerce-cue-family-tabs button { min-height: 44px; padding-inline: 8px; font-size: 11px; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .progression-page { padding: 8px 12px 44px; }
  .progression-head { min-height: 54px; padding-bottom: 8px; }
  .progression-head small,
  .progression-head p { display: none; }
  .progression-head h1 { font-size: 28px; }
  .progression-summary { margin: 8px 0; }
  .progression-summary > span { min-height: 44px; padding-block: 5px; }
  .progression-contracts,
  .achievement-grid,
  .cue-inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .progression-contract,
  .achievement-card { min-height: 205px; padding: 12px; }
  .case-rules { margin: 7px 0; }
  .case-slot { min-height: 270px; padding: 10px; }
  .case-slot__vault { width: 78px; height: 58px; margin-block: 8px; }
  .cue-family-banner { min-height: 68px; margin-block: 8px; padding: 8px 14px; }
  .cue-center-nav { position: static; margin-bottom: 8px; padding: 3px; }
  .cue-center-nav button { min-height: 34px; }
  .cue-flagship { min-height: 300px; grid-template-columns: 34% minmax(0, 1fr); }
  .cue-flagship__visual img { height: 300px; min-height: 300px; }
  .cue-flagship__body { gap: 6px; padding: 12px 16px; }
  .cue-flagship__body header h2 { font-size: 28px; }
  .cue-flagship__body header p { display: none; }
  .trophy-cabinet-stage { min-height: 280px; grid-template-columns: minmax(0, 1fr) 220px; }
  .trophy-cabinet-stage article { padding: 18px; }
  .trophy-cabinet-stage__cup { width: 78px; height: 78px; margin-bottom: 8px; font-size: 36px; }
  .cue-inventory-card { min-height: 420px; grid-template-rows: 82px auto auto auto auto; padding: 10px; }
  .cue-inventory-art { margin: -10px -10px 8px; }
  .cue-family-selector,
  .commerce-cue-family-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 6px; padding: 3px; }
  .cue-family-selector button,
  .commerce-cue-family-tabs button { min-height: 38px; padding-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .progression-spinner { animation: none; }
  .cue-family-selector button,
  .commerce-cue-family-tabs button { transition-duration: 1ms; }
}

/* Cue center: one focused workspace per tab, exact-GLB product art and explicit prices. */
.progression-page--cue {
  --cue-surface: rgba(6, 19, 14, .94);
  --cue-surface-raised: rgba(9, 27, 20, .96);
  padding-top: clamp(16px, 1.8vw, 26px);
}

.progression-page--cue .progression-head {
  min-height: 90px;
  padding-bottom: 16px;
}

.progression-page--cue .progression-head h1 {
  font-size: clamp(34px, 3.4vw, 48px);
}

.progression-page--cue .cue-family-selector {
  margin-top: 16px;
}

.progression-page--cue .cue-center-nav {
  position: static;
  margin-bottom: 0;
  padding: 4px;
  box-shadow: none;
}

.progression-page--cue .cue-center-nav button {
  position: relative;
  min-height: 48px;
  color: var(--kott-text-muted, #c7c0b4);
  border-color: transparent;
  background: transparent;
  font-family: var(--font-ui);
  transition: color var(--kott-motion-fast, 150ms) ease-out, background var(--kott-motion-fast, 150ms) ease-out, transform 120ms ease-out;
}

.progression-page--cue .cue-center-nav button::after {
  position: absolute;
  inset-inline: 18%;
  bottom: 3px;
  height: 2px;
  content: "";
  background: transparent;
}

.progression-page--cue .cue-center-nav button:hover,
.progression-page--cue .cue-center-nav button:focus-visible {
  color: var(--kott-text-primary, #f4f0e8);
  background: rgba(211, 167, 67, .07);
}

.progression-page--cue .cue-center-nav button.is-active {
  color: var(--kott-gold-bright, #f2c766);
  background: rgba(12, 38, 27, .8);
}

.progression-page--cue .cue-center-nav button.is-active::after {
  background: var(--kott-gold, #d4a63a);
}

.cue-account-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(118px, .72fr));
  margin: 12px 0 20px;
  border-block: 1px solid rgba(212, 166, 58, .17);
  background: rgba(3, 13, 9, .54);
}

.cue-account-strip > span {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-inline-end: 1px solid rgba(212, 166, 58, .12);
}

.cue-account-strip > span:last-child { border-inline-end: 0; }

.cue-account-strip small {
  color: var(--kott-text-dim, #8f8980);
  font: 680 9px/1 var(--font-ui);
  letter-spacing: .11em;
}

.cue-account-strip b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--kott-text-primary, #f4f0e8);
  font: 600 15px/1.15 var(--font-ui);
  text-align: end;
}

.cue-account-strip > span:first-child b { color: var(--kott-gold-bright, #f2c766); }

.cue-center-panel {
  min-width: 0;
  min-height: 420px;
}

.cue-active-stage {
  display: grid;
  min-height: 430px;
  grid-template-columns: minmax(420px, 1.18fr) minmax(360px, .82fr);
  overflow: hidden;
  border: 1px solid rgba(212, 166, 58, .25);
  border-radius: var(--kott-radius-md, 4px);
  background:
    radial-gradient(circle at 18% 0%, rgba(212, 166, 58, .12), transparent 34%),
    linear-gradient(135deg, #07150f, #030907 70%);
  box-shadow: var(--kott-shadow-medium, 0 18px 36px rgba(0, 0, 0, .42));
}

.cue-active-stage__visual {
  position: relative;
  min-width: 0;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 34px 28px;
  border-inline-end: 1px solid rgba(212, 166, 58, .14);
  background:
    radial-gradient(ellipse at 50% 53%, rgba(68, 107, 82, .18), transparent 54%),
    linear-gradient(160deg, rgba(11, 28, 20, .78), rgba(2, 7, 5, .94));
}

.cue-active-stage__visual::before {
  position: absolute;
  inset: 13% 8%;
  content: "";
  border: 1px solid rgba(225, 193, 116, .08);
  background: linear-gradient(90deg, transparent, rgba(244, 240, 232, .025), transparent);
}

.cue-active-stage__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 13px 12px rgba(0, 0, 0, .72));
}

.cue-active-stage__visual > span {
  position: absolute;
  inset-inline: 28px;
  bottom: 18px;
  z-index: 2;
  padding-top: 9px;
  color: #bfa66c;
  border-top: 1px solid rgba(212, 166, 58, .16);
  font: 680 9px/1 var(--font-ui);
  letter-spacing: .14em;
  text-align: center;
}

.cue-active-stage__visual--planned .cue-inventory-art {
  width: 100%;
  height: 210px;
  margin: 0;
  background: transparent;
}

.cue-active-stage__body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(24px, 3vw, 38px);
}

.cue-active-stage__body header small {
  color: var(--kott-gold, #d4a63a);
  font: 700 10px/1 var(--font-ui);
  letter-spacing: .15em;
}

.cue-active-stage__body header h2 {
  margin: 7px 0 8px;
  color: var(--kott-text-primary, #f4f0e8);
  font: 620 clamp(30px, 3.2vw, 46px)/.96 var(--font-ui);
  text-transform: uppercase;
}

.cue-active-stage__body header p {
  max-width: 470px;
  margin: 0;
  color: var(--kott-text-muted, #c7c0b4);
  font-size: 13px;
  line-height: 1.4;
}

.cue-active-stage .cue-stat-matrix { min-width: 0; }
.progression-page--cue .cue-inventory-actions button { min-height: 48px; }

.cue-center-section--collection {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cue-center-section--collection .cue-flagship { margin: 18px 0 24px; }

.progression-page--cue .cue-inventory-grid { gap: 16px; }

.progression-page--cue .cue-inventory-grid.cue-inventory-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.progression-page--cue .cue-inventory-card {
  min-height: 432px;
  grid-template-rows: 132px auto auto auto auto;
  border-radius: var(--kott-radius-sm, 3px);
  box-shadow: inset 0 1px rgba(255, 237, 185, .035), 0 10px 24px rgba(0, 0, 0, .22);
}

.progression-page--cue .cue-inventory-card--horizontal,
.commerce-cue-card--horizontal {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(164px, 15vw, 214px) auto;
  padding: 0;
  background:
    radial-gradient(circle at 72% 0%, rgba(212, 166, 58, .085), transparent 31%),
    linear-gradient(145deg, rgba(12, 29, 21, .98), rgba(4, 11, 8, .99) 72%);
}

.progression-page--cue .cue-inventory-card--horizontal.is-equipped,
.commerce-cue-card--horizontal.is-equipped {
  box-shadow: inset 4px 0 #d4a63a, inset 0 1px rgba(255, 237, 185, .05), 0 15px 32px rgba(0, 0, 0, .28);
}

.cue-inventory-card--horizontal > .cue-inventory-art {
  position: relative;
  width: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(212, 166, 58, .15);
  border-radius: 0;
}

.cue-inventory-card--horizontal > .cue-inventory-art--runtime img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cue-inventory-card--horizontal > .cue-inventory-art:not(.cue-inventory-art--runtime) {
  background:
    linear-gradient(90deg, transparent 5%, rgba(244, 240, 232, .025) 50%, transparent 95%),
    radial-gradient(ellipse at 50% 55%, rgba(86, 119, 92, .16), transparent 60%),
    #050b08;
}

.cue-inventory-card--horizontal > .cue-inventory-art :is(i, b, em, span) {
  left: 4%;
  right: 4%;
  top: 51%;
  transform: rotate(-1.4deg);
}

.cue-inventory-card--horizontal > .cue-inventory-art b { left: 62%; }
.cue-inventory-card--horizontal > .cue-inventory-art em { left: 3.5%; width: 2%; }
.cue-inventory-card--horizontal > .cue-inventory-art > span { left: 59%; width: 3%; }

.cue-inventory-card__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(350px, 1.35fr) minmax(260px, .92fr);
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
  padding: 18px clamp(18px, 2.4vw, 30px) 20px;
}

.cue-inventory-card--horizontal .cue-inventory-copy {
  min-height: 0;
}

.cue-inventory-card--horizontal .cue-inventory-copy h2 {
  margin-block: 7px 10px;
  color: var(--kott-text-primary, #f4f0e8);
  font: 680 clamp(24px, 2.4vw, 34px)/.95 var(--font-ui);
  letter-spacing: .01em;
}

.cue-inventory-card--horizontal .cue-inventory-price {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.cue-inventory-card--horizontal .cue-inventory-price strong {
  color: var(--kott-gold-bright, #f2c766);
  font-size: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cue-price-option { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.commerce-cue-card--horizontal .cue-inventory-card__body {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr);
}
.commerce-cue-card--horizontal .cue-construction-note {
  margin: 0 0 10px;
  color: var(--kott-text-secondary, #c7c0b4);
  font: 400 15px/1.4 var(--font-ui);
}
.commerce-cue-card--horizontal .cue-inventory-progress {
  grid-template-columns: minmax(0, 1fr);
}

.commerce-cue-card--horizontal .cue-inventory-actions button { min-height: 44px; }

@media (max-width: 1250px) {
  .commerce-cue-card--horizontal .cue-inventory-card__body {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
  .commerce-cue-card--horizontal .cue-inventory-card__utility {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
}

@media (max-width: 760px) {
  .commerce-cue-card--horizontal .cue-inventory-card__body,
  .commerce-cue-card--horizontal .cue-inventory-card__utility {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cue-inventory-card--horizontal .cue-stat-matrix--card {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.cue-inventory-card__utility {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.cue-inventory-card--horizontal .cue-inventory-progress {
  margin: 0;
}

.cue-inventory-card--horizontal .cue-inventory-actions {
  align-self: end;
}

.cue-inventory-art--runtime {
  display: grid;
  place-items: center;
  padding: 4px 10px;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(86, 119, 92, .18), transparent 58%),
    #050b08;
}

.cue-inventory-art--runtime img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .7));
}

.cue-inventory-card--horizontal .cue-inventory-art--runtime.is-full-cue-photo img {
  object-fit: contain;
  object-position: center 50%;
}

/* Accepted T6–T10 side portraits are centred on the image axis. Scale by
   card width; excess studio background can fall outside the banner height. */
.cue-inventory-card--horizontal .cue-inventory-art--runtime.is-full-cue-photo:is([data-cue-id="pyramid_senior_master"], [data-cue-id="pyramid_princely_standard"], [data-cue-id="pyramid_million_svoyak"], [data-cue-id="pyramid_manufactory_magnate"], [data-cue-id="pyramid_tsar_treasurer"]) img {
  inset: 50% 0 auto;
  height: auto;
  max-height: none;
  transform: translateY(-50%);
}

.cue-inventory-card--horizontal .cue-inventory-art--runtime.is-ceremonial-cue-photo img {
  object-fit: cover;
  object-position: center 53%;
}

.cue-inventory-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
}

.cue-inventory-price span {
  color: var(--kott-text-dim, #8f8980);
  font: 650 9px/1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cue-inventory-price strong {
  overflow-wrap: anywhere;
  color: var(--kott-text-primary, #f4f0e8);
  font: 650 13px/1.15 var(--font-ui);
  text-align: end;
  text-transform: uppercase;
}

.progression-page--cue .cue-stat-matrix--card,
.commerce-cue-card--horizontal .cue-stat-matrix--card {
  border-inline: 0;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}

.cue-purchase-button {
  min-height: 52px !important;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 7px 10px;
}

.cue-purchase-button span {
  font-size: 10px;
  letter-spacing: .1em;
}

.cue-purchase-button strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font: 800 12px/1.1 var(--font-ui);
  letter-spacing: .035em;
}

/* Large test and live balances stay inside the Hall header. The exact value
   opens below the compact amount, leaving both the currency icon and brand intact. */
.hall-currency { position: relative; }

.hall-currency-amount {
  position: relative;
  display: inline-grid;
  min-width: 2.7ch;
  place-items: center;
  isolation: isolate;
}

.hall-currency-amount__compact {
  transition: opacity 140ms ease;
}

.hall-currency-amount__exact {
  position: absolute;
  z-index: 8;
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: min(180px, 50vw);
  padding: 5px 8px;
  color: var(--kott-text-primary, #f4f0e8);
  font-size: .78em;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, #11251d, #07100d);
  border: 1px solid rgba(224, 173, 61, .72);
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .58);
  transform: translate(-50%, -4px) scale(.96);
  transition: opacity 140ms ease, transform 140ms ease;
}

.hall-currency:hover .hall-currency-amount__compact,
.hall-currency:focus-visible .hall-currency-amount__compact {
  opacity: 1;
}

.hall-currency:hover .hall-currency-amount__exact,
.hall-currency:focus-visible .hall-currency-amount__exact {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (min-width: 861px) and (max-width: 1360px) {
  .hall-toolbar { gap: clamp(5px, .7vw, 10px); }
  .hall-currency { gap: 5px; }
  .hall-currency + .hall-currency { padding-inline-start: 7px; }
  .hall-currency > span { font-size: 16px; }
}

/* Compact Hall currencies preserve the centred wordmark on laptop and desktop
   widths. The 12 px minimum measured gap is the visual collision contract. */
@media (min-width: 1361px) and (max-width: 1800px) {
  body[data-view="lobby"] .hall-brand {
    width: min(100%, 310px);
  }

  body[data-view="lobby"] .hall-toolbar {
    gap: clamp(6px, .55vw, 9px);
  }

  body[data-view="lobby"] .hall-currency {
    gap: 5px;
  }

  body[data-view="lobby"] .hall-currency + .hall-currency {
    padding-inline-start: 8px;
  }

  body[data-view="lobby"] .hall-currency .hall-currency-art {
    width: 32px;
    height: 32px;
  }

  body[data-view="lobby"] .hall-currency strong {
    font-size: clamp(16px, 1.15vw, 19px);
  }

  body[data-view="lobby"] .hall-currency > span {
    font-size: 16px;
  }

  body[data-view="lobby"] .hall-language {
    padding-inline: 9px 22px;
  }

  body[data-view="lobby"] .hall-language select {
    max-width: 72px;
    font-size: 14px;
  }

  body[data-view="lobby"] .hall-icon-button {
    width: 40px;
    height: 40px;
  }
}

.hall-profile-alert { font-family: var(--font-ui); }

@media (max-width: 980px) {
  .cue-account-strip {
    grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(100px, .7fr));
  }

  .cue-account-strip > span { align-items: flex-start; flex-direction: column; gap: 5px; }
  .cue-account-strip b { text-align: start; }
  .cue-active-stage { grid-template-columns: minmax(0, 1fr); }
  .cue-active-stage__visual { min-height: 290px; border-inline-end: 0; border-bottom: 1px solid rgba(212, 166, 58, .14); }
  .cue-active-stage__body { align-content: start; }
  .cue-inventory-card__body {
    grid-template-columns: minmax(180px, .68fr) minmax(320px, 1.32fr);
    align-items: start;
  }
  .cue-inventory-card__utility {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr);
    align-items: center;
  }
}

@media (max-width: 760px) {
  .progression-page--cue { padding: 12px 12px 92px; }
  .progression-page--cue .progression-head { min-height: 74px; padding-bottom: 10px; }
  .progression-page--cue .progression-head h1 { font-size: 30px; }
  .progression-page--cue .cue-family-selector { margin-top: 10px; }
  .progression-page--cue .cue-center-nav { position: sticky; top: -1px; z-index: 5; }
  .progression-page--cue .cue-center-nav button { min-height: 46px; padding-inline: 6px; font-size: 10px; }
  .cue-account-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 9px 0 14px; }
  .cue-account-strip > span { min-height: 50px; border-bottom: 1px solid rgba(212, 166, 58, .1); }
  .cue-account-strip > span:nth-child(2n) { border-inline-end: 0; }
  .cue-active-stage { min-height: 0; }
  .cue-active-stage__visual { min-height: 220px; padding: 24px 14px; }
  .cue-active-stage__visual img { height: 175px; }
  .cue-active-stage__visual > span { inset-inline: 16px; bottom: 12px; }
  .cue-active-stage__body { gap: 13px; padding: 18px 16px; }
  .cue-active-stage__body header h2 { font-size: 31px; }
  .cue-active-stage__body header p { font-size: 12px; }
  .progression-page--cue .cue-inventory-card { min-height: 410px; grid-template-rows: 126px auto auto auto auto; }
  .progression-page--cue .cue-inventory-card--horizontal,
  .commerce-cue-card--horizontal {
    min-height: 0;
    grid-template-rows: 170px auto;
  }
  .cue-inventory-card__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 16px;
  }
  .cue-inventory-card__utility {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .cue-inventory-card--horizontal .cue-inventory-copy h2 { font-size: 28px; }
  .cue-inventory-card--horizontal .cue-inventory-art--runtime.is-ceremonial-cue-photo img {
    width: 100%;
    object-fit: contain;
  }
  .cue-inventory-card--horizontal .cue-inventory-art--runtime.is-full-cue-photo img {
    object-fit: contain;
  }
  .cue-center-section__head h2 { font-size: 26px; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .progression-page--cue .progression-head { display: none; }
  .progression-page--cue .cue-family-selector { margin-top: 0; }
  .progression-page--cue .cue-family-selector button { min-height: 44px; }
  .progression-page--cue .cue-center-nav { position: static; }
  .cue-account-strip { grid-template-columns: minmax(170px, 1.4fr) repeat(3, minmax(96px, .7fr)); }
  .cue-account-strip > span { min-height: 42px; padding: 7px 9px; }
  .cue-account-strip small { display: none; }
  .cue-active-stage { min-height: 280px; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); }
  .cue-active-stage__visual { min-height: 280px; padding: 16px; border-inline-end: 1px solid rgba(212, 166, 58, .14); border-bottom: 0; }
  .cue-active-stage__visual img { height: 190px; }
  .cue-active-stage__body { gap: 8px; padding: 12px 14px; }
  .cue-active-stage__body header h2 { margin-block: 4px; font-size: 27px; }
  .cue-active-stage__body header p { display: none; }
  .cue-active-stage .cue-stat-matrix { gap: 4px; padding-block: 7px; }
  .cue-active-stage .cue-stat-row { min-height: 16px; }
  .cue-active-stage .cue-stat-cell { height: 10px; }
  .progression-page--cue .cue-inventory-card--horizontal,
  .commerce-cue-card--horizontal {
    grid-template-rows: 124px auto;
  }
  .cue-inventory-card__body {
    grid-template-columns: minmax(150px, .64fr) minmax(280px, 1.36fr) minmax(220px, .82fr);
    gap: 14px;
    padding: 12px 14px;
  }
  .cue-inventory-card__utility {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .cue-inventory-card--horizontal .cue-inventory-copy h2 { font-size: 23px; }
  .cue-inventory-card--horizontal .cue-inventory-progress span { padding: 5px; }
  .cue-inventory-card--horizontal .cue-inventory-actions button { min-height: 42px; }
}

/* Phone navigation stays readable instead of reducing destinations to anonymous icons. */
@media (max-width: 520px) and (orientation: portrait) {
  .hall-bottom-nav {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .hall-bottom-nav::-webkit-scrollbar { display: none; }

  .hall-bottom-nav button {
    flex: 0 0 72px;
    min-width: 72px;
    min-height: 62px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px 5px;
    scroll-snap-align: center;
  }

  .hall-bottom-nav svg { width: 22px; height: 22px; }

  .hall-bottom-nav span {
    display: block;
    width: 100%;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1.05;
    text-align: center;
  }

  .hall-bottom-nav button > i {
    top: 3px;
    right: 9px;
    width: 16px;
    height: 16px;
    font-size: 8px;
  }
}

/* Five permanent destinations remain in the bottom club navigation. */
.hall-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 520px) and (orientation: portrait) {
  .hall-bottom-nav {
    display: flex;
    justify-content: stretch;
    overflow-x: hidden;
  }

  .hall-bottom-nav button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    padding-inline: 2px;
    scroll-snap-align: none;
  }

  .hall-bottom-nav span {
    display: block;
    overflow: visible;
    font-size: clamp(6px, 1.85vw, 8px);
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
  }
}

/* iPhone landscape safe-area final authority. Keep the club artwork full-bleed
   while moving every shared Hall control and destination clear of either
   physical display cutout and the home indicator. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  body[data-view="lobby"] .hall-app {
    --hall-safe-top: env(safe-area-inset-top, 0px);
    --hall-safe-right: env(safe-area-inset-right, 0px);
    --hall-safe-bottom: env(safe-area-inset-bottom, 0px);
    --hall-safe-left: env(safe-area-inset-left, 0px);
  }

  body[data-view="lobby"] .hall-app > [data-hall-app-root] {
    grid-template-rows:
      calc(var(--hall-landscape-header) + var(--hall-safe-top))
      minmax(0, 1fr)
      calc(var(--hall-landscape-nav) + var(--hall-safe-bottom));
  }

  body[data-view="lobby"] .hall-topbar {
    padding-top: max(5px, var(--hall-safe-top));
    padding-right: max(10px, var(--hall-safe-right));
    padding-left: max(10px, var(--hall-safe-left));
  }

  body[data-view="lobby"] .hall-bottom-nav {
    box-sizing: border-box;
    padding-right: var(--hall-safe-right);
    padding-bottom: var(--hall-safe-bottom);
    padding-left: var(--hall-safe-left);
  }

  body[data-view="lobby"] .hall-content {
    margin-right: var(--hall-safe-right);
    margin-left: var(--hall-safe-left);
  }

  /* Page-specific landscape rules keep only their visual gutter. The shared
     Hall frame above owns physical safe-area clearance. */
  body[data-view="lobby"] .hall-stage {
    padding-right: 58px;
    padding-left: 58px;
  }

  body[data-view="lobby"] .hall-training {
    padding-right: 64px;
    padding-left: 64px;
  }

  body[data-view="lobby"] .hall-tournaments-page {
    padding-right: clamp(18px, 2.5vw, 40px);
    padding-left: clamp(18px, 2.5vw, 40px);
  }

  body[data-view="lobby"] .hall-chat {
    left: var(--hall-safe-left);
  }

  body[data-view="lobby"] .hall-players {
    right: var(--hall-safe-right);
  }

  body[data-view="lobby"] .hall-edge-chat {
    left: 9px;
  }

  body[data-view="lobby"] .hall-edge-players {
    right: 9px;
  }

  body[data-view="lobby"] :is(.hall-room, .hall-training-room):has(.hall-side.is-open) .hall-drawer-scrim {
    right: var(--hall-safe-right);
    left: var(--hall-safe-left);
  }
}

/* Hall chat removal and shared player-list collapse authority. Training no
   longer reserves a side column, while desktop reuses the compact drawer's
   close/open state with a calm 200 ms layout transition. */
.hall-training-room {
  grid-template-columns: minmax(0, 1fr);
}

.hall-players > .hall-side-title button {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  color: var(--kott-color-gold-bright);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--kott-radius-sm);
  cursor: pointer;
  transition:
    color var(--kott-motion-micro) ease-out,
    border-color var(--kott-motion-micro) ease-out,
    background-color var(--kott-motion-micro) ease-out;
}

.hall-players > .hall-side-title button:hover {
  color: var(--kott-color-ivory);
  background: rgb(212 166 58 / 8%);
  border-color: rgb(212 166 58 / 42%);
}

.hall-players > .hall-side-title button:active {
  transform: translateY(1px);
}

.hall-players > .hall-side-title button:focus-visible,
.hall-room.is-players-collapsed > .hall-edge-players:focus-visible {
  outline: 0;
  box-shadow: var(--kott-focus-ring);
}

@media (min-width: 861px) and (min-height: 541px) {
  .hall-room {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 22%);
    transition: grid-template-columns var(--kott-motion-normal) ease-in-out;
  }

  .hall-room:has(.hall-match-setup) {
    grid-template-columns: minmax(0, 1fr);
  }

  .hall-room > .hall-players {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity var(--kott-motion-micro) ease-out,
      transform var(--kott-motion-normal) ease-in-out,
      visibility var(--kott-motion-normal);
  }

  .hall-room.is-players-collapsed {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0%);
  }

  .hall-room.is-players-collapsed > .hall-players {
    min-width: 0;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
  }

  .hall-room.is-players-collapsed > .hall-edge-players {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--kott-color-gold-bright);
    background: rgb(6 20 16 / 92%);
    border: 1px solid rgb(228 181 71 / 65%);
    border-radius: var(--kott-radius-pill);
    box-shadow: var(--kott-shadow-low);
    cursor: pointer;
    backdrop-filter: blur(8px);
  }

  .hall-room.is-players-collapsed > .hall-edge-players:hover {
    color: var(--kott-color-ivory);
    border-color: var(--kott-color-gold-bright);
  }

  .hall-room.is-players-collapsed > .hall-edge-players:active {
    transform: translateY(1px);
  }

  .hall-room.is-players-collapsed > .hall-edge-players svg {
    width: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .hall-room.is-players-collapsed > .hall-edge-players span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 var(--kott-space-1);
    color: var(--kott-color-ivory);
    font-size: 10px;
    background: var(--kott-color-error);
    border: 2px solid var(--kott-color-surface);
    border-radius: var(--kott-radius-pill);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-room,
  .hall-room > .hall-players,
  .hall-players > .hall-side-title button {
    transition: none;
  }
}

/* Approved Play gallery: one framed hero destination and four receding club
   scenes. Live type and interaction stay separate from the generated artwork. */
.hall-stage-card.hall-stage-hero.hall-play-hub {
  display: grid;
  width: min(100%, 1240px);
  min-height: min(100%, 540px);
  grid-template-rows: minmax(0, 1fr);
  align-self: center;
  align-content: center;
  margin: 0;
  text-align: start;
}

body[data-view="lobby"] .hall-stage:has(.hall-play-hub) {
  place-items: center;
  padding-block: clamp(14px, 2.3vh, 24px);
}

.hall-play-destinations {
  position: relative;
  display: flex;
  width: 100%;
  height: clamp(292px, 42vh, 394px);
  min-width: 0;
  gap: clamp(8px, .72vw, 12px);
  align-self: center;
  align-items: flex-end;
  overflow: visible;
  perspective: 1200px;
  user-select: none;
}

.hall-play-destinations::after {
  position: absolute;
  right: 2%;
  bottom: -17px;
  left: 2%;
  height: 28px;
  z-index: -1;
  content: "";
  background: radial-gradient(ellipse, rgb(0 0 0 / 74%), transparent 69%);
  filter: blur(6px);
  pointer-events: none;
}

.hall-play-destinations.is-dragging,
.hall-play-destinations.is-dragging .hall-play-destination {
  cursor: grabbing;
}

.hall-play-destination {
  position: relative;
  display: block;
  height: 86%;
  min-width: 0;
  flex: .78 1 0;
  padding: 0;
  overflow: hidden;
  color: var(--kott-color-ivory);
  text-align: start;
  background: #020604;
  border: 1px solid rgb(128 104 61 / 72%);
  border-radius: 4px;
  box-shadow:
    0 18px 34px rgb(0 0 0 / 52%),
    0 3px 8px rgb(0 0 0 / 58%),
    inset 0 0 0 1px rgb(0 0 0 / 76%);
  cursor: pointer;
  isolation: isolate;
  transform: translateY(9px) scale(.985);
  transform-origin: center bottom;
  transition:
    flex-grow 220ms cubic-bezier(.2, .72, .22, 1),
    height 220ms cubic-bezier(.2, .72, .22, 1),
    opacity 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 220ms ease-out,
    transform 220ms cubic-bezier(.2, .72, .22, 1);
  -webkit-tap-highlight-color: transparent;
}

.hall-play-destination::before {
  position: absolute;
  inset: 5px;
  z-index: 4;
  content: "";
  border: 1px solid rgb(232 196 111 / 22%);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 54%);
  pointer-events: none;
  transition: border-color 180ms ease-out, box-shadow 220ms ease-out;
}

.hall-play-destination::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  border-top: 1px solid rgb(255 228 155 / 24%);
  background:
    linear-gradient(90deg, rgb(255 228 155 / 13%), transparent 9%, transparent 91%, rgb(0 0 0 / 42%)),
    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 14%);
  pointer-events: none;
}

.hall-play-destination.is-selected {
  height: 100%;
  z-index: 3;
  flex-grow: 1.86;
  border-color: #d7ae55;
  box-shadow:
    0 0 0 1px rgb(47 31 11 / 94%),
    0 0 0 3px rgb(212 166 58 / 54%),
    0 24px 44px rgb(0 0 0 / 64%),
    0 5px 13px rgb(0 0 0 / 72%),
    inset 0 1px rgb(255 235 177 / 25%);
  transform: translateY(0) scale(1);
}

.hall-play-destination.is-selected::before {
  border-color: rgb(245 210 126 / 62%);
  box-shadow:
    inset 0 0 0 1px rgb(65 39 10 / 84%),
    inset 0 0 16px rgb(231 181 66 / 8%);
}

.hall-play-destination.is-launching {
  transform: translateY(1px) scale(.992);
}

.hall-play-destination__art,
.hall-play-destination__shade {
  position: absolute;
  inset: 0;
}

.hall-play-destination__art {
  z-index: -2;
  background-color: #06100c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(.88) brightness(.78) contrast(1.06);
  transform: scale(1.035);
  transition: filter 220ms ease-out, transform 240ms cubic-bezier(.2, .72, .22, 1);
}

.hall-play-destination--play .hall-play-destination__art {
  background-image: url("./assets/hall_play/gallery/play_hero.jpg?v=20260821a");
  background-position: center 43%;
}

.hall-play-destination--events .hall-play-destination__art {
  background-image: url("./assets/hall_play/gallery/events.jpg?v=20260821a");
  background-position: center 50%;
}

.hall-play-destination--tournaments .hall-play-destination__art {
  background-image: url("./assets/hall_play/gallery/tournaments.jpg?v=20260821a");
  background-position: center 48%;
}

.hall-play-destination--minigames .hall-play-destination__art {
  background-image: url("./assets/hall_play/gallery/destination_sprite.jpg?v=20260821a");
  background-size: 400% auto;
  background-position: 66.667% 48%;
}

.hall-play-destination--friends .hall-play-destination__art {
  background-image: url("./assets/hall_play/gallery/friends.jpg?v=20260821a");
  background-position: center 47%;
}

.hall-play-destination.is-selected .hall-play-destination__art {
  filter: saturate(1) brightness(.98) contrast(1.03);
  transform: scale(1.005);
}

.hall-play-destination__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 4%) 35%, rgb(0 0 0 / 50%) 67%, rgb(0 0 0 / 94%) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 18%), transparent 28%, transparent 72%, rgb(0 0 0 / 24%));
  transition: opacity 180ms ease-out;
}

.hall-play-destination.is-selected .hall-play-destination__shade {
  opacity: .78;
}

.hall-play-destination__label {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 3;
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 7px;
  align-items: center;
  padding: 8px 8px 9px 12px;
  background:
    linear-gradient(180deg, rgb(10 14 12 / 86%), rgb(3 7 6 / 96%)),
    radial-gradient(circle at 18% 0%, rgb(212 166 58 / 8%), transparent 44%);
  border-top: 1px solid rgb(215 177 91 / 32%);
  box-shadow: 0 -8px 22px rgb(0 0 0 / 38%), inset 0 1px rgb(255 245 213 / 4%);
  transition:
    min-height 220ms cubic-bezier(.2, .72, .22, 1),
    padding 220ms cubic-bezier(.2, .72, .22, 1),
    background-color 180ms ease-out,
    border-color 180ms ease-out;
}

.hall-play-destination.is-selected .hall-play-destination__label {
  min-height: 68px;
  padding: 9px 11px 10px 16px;
  background:
    radial-gradient(circle at 22% -50%, rgb(203 126 62 / 27%), transparent 58%),
    linear-gradient(180deg, rgb(87 36 24 / 96%), rgb(41 15 12 / 98%));
  border-top-color: rgb(236 194 104 / 66%);
  box-shadow:
    0 -9px 24px rgb(0 0 0 / 48%),
    inset 0 1px rgb(255 225 173 / 12%),
    inset 0 -1px rgb(0 0 0 / 72%);
}

.hall-play-destination strong {
  display: block;
  min-width: 0;
  color: #f4ecd8;
  font-size: clamp(16px, 1.18vw, 21px);
  font-weight: 620;
  letter-spacing: .015em;
  line-height: 1.02;
  overflow-wrap: normal;
  text-shadow: 0 2px 5px #000;
  text-transform: uppercase;
}

.hall-play-destination.is-selected strong {
  color: #fff4d9;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 600;
  letter-spacing: .01em;
}

.hall-play-destination__label > i {
  display: grid;
  width: 28px;
  height: 38px;
  place-items: center;
  color: #d8ae4d;
  font-size: 30px;
  font-style: normal;
  line-height: 1;
  transition: color 160ms ease-out, transform 180ms ease-out;
}

.hall-play-destination.is-selected .hall-play-destination__label > i {
  color: #f0c766;
  transform: translateX(2px);
}

.hall-play-destination:focus-visible,
.hall-play-back:focus-visible,
.hall-minigame-feature:focus-visible {
  outline: 0;
  box-shadow: var(--kott-focus-ring), 0 22px 42px rgb(0 0 0 / 62%);
}

@media (hover: hover) and (pointer: fine) {
  .hall-play-destination:hover::before {
    border-color: rgb(245 210 126 / 64%);
  }

  .hall-play-destination:hover .hall-play-destination__label > i {
    color: #f1ce79;
    transform: translateX(3px);
  }
}

.hall-play-destination:active {
  transform: translateY(1px) scale(.992);
}

.hall-play-destination.is-selected[data-destination="play"] { view-transition-name: hall-play-play; }
.hall-play-destination.is-selected[data-destination="events"] { view-transition-name: hall-play-events; }
.hall-play-destination.is-selected[data-destination="tournaments"] { view-transition-name: hall-play-tournaments; }
.hall-play-destination.is-selected[data-destination="minigames"] { view-transition-name: hall-play-minigames; }
.hall-play-destination.is-selected[data-destination="friends"] { view-transition-name: hall-play-friends; }
.hall-match-setup { view-transition-name: hall-play-play; }
.hall-play-page--events { view-transition-name: hall-play-events; }
.hall-play-fullscreen--tournaments { view-transition-name: hall-play-tournaments; }
.hall-play-page--minigames { view-transition-name: hall-play-minigames; }
.hall-play-page--friends { view-transition-name: hall-play-friends; }

::view-transition-group(hall-play-play),
::view-transition-group(hall-play-events),
::view-transition-group(hall-play-tournaments),
::view-transition-group(hall-play-minigames),
::view-transition-group(hall-play-friends) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.2, .72, .22, 1);
}

html[data-hall-nav-direction="back"]::view-transition-old(root) {
  animation-duration: 150ms;
}

html[data-hall-nav-direction="back"]::view-transition-new(root) {
  animation-duration: 220ms;
}

.hall-play-fullscreen {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hall-play-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--kott-space-4);
  padding: clamp(16px, 2.2vw, 36px) clamp(18px, 3vw, 52px) clamp(24px, 3vw, 48px);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--kott-color-ivory);
  background:
    radial-gradient(circle at 76% 4%, rgb(212 166 58 / 10%), transparent 34%),
    linear-gradient(90deg, rgb(3 12 9 / 97%), rgb(7 22 16 / 91%) 52%, rgb(3 10 8 / 97%)),
    var(--hall-club-background) center / cover no-repeat;
  overscroll-behavior: contain;
  scrollbar-color: var(--kott-color-gold-deep) rgb(2 7 5 / 78%);
  -webkit-overflow-scrolling: touch;
}

.hall-play-back {
  position: relative;
  z-index: 8;
  display: inline-flex;
  width: max-content;
  min-width: 48px;
  min-height: 48px;
  gap: var(--kott-space-2);
  align-items: center;
  justify-content: center;
  padding: 0 var(--kott-space-4);
  color: var(--kott-color-parchment);
  background: rgb(5 18 13 / 92%);
  border: 1px solid rgb(212 166 58 / 34%);
  border-radius: var(--kott-radius-sm);
  cursor: pointer;
  transition:
    color var(--kott-motion-micro) ease-out,
    border-color var(--kott-motion-micro) ease-out,
    transform var(--kott-motion-micro) ease-out;
}

.hall-play-back > span {
  color: var(--kott-color-gold-bright);
  font-size: 26px;
  line-height: 1;
}

.hall-play-back > strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hall-play-back:hover {
  color: var(--kott-color-ivory);
  border-color: rgb(242 199 102 / 68%);
}

.hall-play-back:active {
  transform: translateY(1px);
}

.hall-play-page__hero,
.hall-play-page__body {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.hall-play-page__hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--kott-space-4);
  align-items: center;
  padding-bottom: var(--kott-space-6);
  border-bottom: 1px solid rgb(212 166 58 / 24%);
}

.hall-play-page__hero > span {
  display: grid;
  width: 72px;
  height: 72px;
  color: var(--kott-color-gold-bright);
  background: rgb(8 35 24 / 84%);
  border: 1px solid rgb(212 166 58 / 46%);
  border-radius: var(--kott-radius-md);
  place-items: center;
}

.hall-play-page__hero svg {
  width: 42px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.hall-play-page__hero small {
  color: var(--kott-color-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hall-play-page__hero h1 {
  margin: var(--kott-space-1) 0 0;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 560;
  letter-spacing: .02em;
  line-height: .96;
  text-transform: uppercase;
}

.hall-play-page__body {
  display: grid;
  min-height: 0;
  align-content: start;
  padding-block: var(--kott-space-2);
}

.hall-play-page__empty {
  display: grid;
  min-height: clamp(220px, 38vh, 420px);
  grid-template-columns: 64px minmax(0, 520px);
  gap: var(--kott-space-6);
  align-items: center;
  justify-content: center;
  color: var(--kott-color-parchment);
  border-top: 1px solid rgb(212 166 58 / 14%);
  border-bottom: 1px solid rgb(212 166 58 / 14%);
}

.hall-play-page__empty svg {
  width: 64px;
  fill: none;
  stroke: var(--kott-color-gold-deep);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.hall-play-page__empty p {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.35;
}

.hall-minigames-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(280px, 620px);
  align-content: start;
}

.hall-minigame-feature.hall-lucky-shot-button {
  min-height: 128px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  padding: var(--kott-space-4) var(--kott-space-6);
  border-radius: var(--kott-radius-md);
}

.hall-minigame-feature .hall-lucky-target {
  width: 68px;
}

.hall-minigame-feature.hall-lucky-shot-button strong {
  font-size: clamp(24px, 2.2vw, 34px);
}

.hall-minigame-feature.hall-lucky-shot-button small {
  font-size: clamp(12px, 1vw, 15px);
}

.hall-play-fullscreen--tournaments > .hall-play-back {
  position: absolute;
  top: clamp(14px, 1.6vw, 24px);
  left: clamp(16px, 2vw, 34px);
}

body[data-view="lobby"] .hall-play-fullscreen--tournaments > .hall-tournaments-page {
  padding-top: clamp(82px, 7.5vw, 104px);
}

html[dir="rtl"] .hall-play-destination__label > i {
  transform: rotate(180deg);
}

html[dir="rtl"] .hall-play-fullscreen--tournaments > .hall-play-back {
  right: clamp(16px, 2vw, 34px);
  left: auto;
}

html[dir="rtl"] .hall-play-back > span {
  transform: rotate(180deg);
}

@media (max-width: 900px) and (orientation: portrait),
       (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
  .hall-stage-card.hall-stage-hero.hall-play-hub {
    width: 100%;
    min-height: 0;
    align-content: center;
  }

  .hall-play-destinations {
    display: grid;
    height: clamp(320px, 52dvh, 430px);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(244px, 76vw, 350px);
    gap: clamp(10px, 3vw, 16px);
    align-items: stretch;
    padding-block: 6px 14px;
    padding-inline: 3px max(12vw, 34px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    perspective: none;
    scroll-padding-inline: 3px max(12vw, 34px);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .hall-play-destinations::-webkit-scrollbar {
    display: none;
  }

  .hall-play-destination {
    width: auto;
    height: 100%;
    min-height: 0;
    flex: none;
    opacity: .76;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: scale(.955);
    transform-origin: center;
  }

  .hall-play-destination.is-selected {
    height: 100%;
    opacity: 1;
    transform: scale(1);
  }

  .hall-play-destination.is-launching,
  .hall-play-destination:active {
    transform: scale(.985);
  }

  .hall-play-destination strong {
    font-size: clamp(18px, 4.4vw, 24px);
  }

  .hall-play-destination.is-selected strong {
    font-size: clamp(27px, 7vw, 36px);
  }

  .hall-play-page {
    gap: var(--kott-space-3);
    padding: var(--kott-space-3) var(--kott-space-3) calc(var(--kott-space-6) + env(safe-area-inset-bottom));
  }

  .hall-play-page__hero {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--kott-space-3);
    padding-bottom: var(--kott-space-3);
  }

  .hall-play-page__hero > span {
    width: 52px;
    height: 52px;
  }

  .hall-play-page__hero svg {
    width: 30px;
  }

  .hall-play-page__hero h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .hall-play-page__empty {
    min-height: 220px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--kott-space-4);
  }

  .hall-play-page__empty svg {
    width: 48px;
  }

  .hall-minigame-feature.hall-lucky-shot-button {
    min-height: 112px;
    grid-template-columns: 54px minmax(0, 1fr);
    padding: var(--kott-space-3);
  }

  .hall-minigame-feature .hall-lucky-target {
    width: 52px;
  }

  .hall-minigame-feature.hall-lucky-shot-button > b {
    grid-column: 2;
    justify-self: start;
  }

  body[data-view="lobby"] .hall-play-fullscreen--tournaments > .hall-tournaments-page {
    padding-top: 74px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) and (min-height: 541px) {
  .hall-play-destination:not(.is-selected) .hall-play-destination__label {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 2px;
    padding-inline: 8px 4px;
  }

  .hall-play-destination:not(.is-selected) strong {
    font-size: clamp(12px, 1.35vw, 15px);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .hall-play-destination:not(.is-selected) .hall-play-destination__label > i {
    width: 18px;
    font-size: 22px;
  }
}

@media (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
  body[data-view="lobby"] .hall-stage:has(.hall-play-hub) {
    place-items: center;
    padding-block: 10px;
  }

  .hall-play-destinations {
    --hall-play-landscape-card: clamp(220px, 32vw, 256px);

    height: clamp(150px, 48dvh, 214px);
    grid-auto-columns: var(--hall-play-landscape-card);
    gap: 9px;
    padding-block: 3px 9px;
    padding-inline: max(42px, calc((100% - var(--hall-play-landscape-card)) / 2));
    scroll-padding-inline: max(42px, calc((100% - var(--hall-play-landscape-card)) / 2));
    touch-action: pan-x;
  }

  .hall-play-destination,
  .hall-play-destination.is-selected {
    height: 100%;
    min-height: 0;
    opacity: 1;
    scroll-snap-align: center;
    transform: none;
  }

  .hall-play-destination--events .hall-play-destination__art {
    background-position: center bottom;
    background-size: auto 185%;
  }

  .hall-play-destination__label,
  .hall-play-destination.is-selected .hall-play-destination__label {
    min-height: 50px;
    padding: 6px 7px 7px 10px;
  }

  .hall-play-destination strong,
  .hall-play-destination.is-selected strong {
    font-size: clamp(18px, 4.2vh, 24px);
  }

  .hall-play-destination__label > i {
    height: 32px;
    font-size: 26px;
  }

  .hall-play-page {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--kott-space-4);
    padding-right: 58px;
    padding-left: 58px;
  }

  .hall-play-page > .hall-play-back {
    grid-row: 1;
  }

  .hall-play-page__hero {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 0 0 var(--kott-space-2);
  }

  .hall-play-page__hero > span {
    width: 44px;
    height: 44px;
  }

  .hall-play-page__hero svg {
    width: 27px;
  }

  .hall-play-page__hero small {
    display: none;
  }

  .hall-play-page__hero h1 {
    margin: 0;
    font-size: clamp(27px, 7vh, 38px);
  }

  .hall-play-page__body {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .hall-play-page__empty {
    min-height: 130px;
  }

  .hall-minigame-feature.hall-lucky-shot-button {
    min-height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-play-destinations,
  .hall-play-destination,
  .hall-play-destination::before,
  .hall-play-destination__art,
  .hall-play-destination__shade,
  .hall-play-destination__label,
  .hall-play-destination__label > i,
  .hall-play-back,
  .hall-minigame-feature {
    scroll-behavior: auto;
    transition: none;
  }

  ::view-transition-group(hall-play-play),
  ::view-transition-group(hall-play-events),
  ::view-transition-group(hall-play-tournaments),
  ::view-transition-group(hall-play-minigames),
  ::view-transition-group(hall-play-friends) {
    animation-duration: 1ms;
  }
}

/* Earned chest loop: four lobby slots, exact reward disclosure and a
   disciplined collection reveal. All four tiers share one manufactured chest
   silhouette; material and trim become progressively more premium. */
.hall-stage-card.hall-stage-hero.hall-play-hub {
  min-height: min(100%, 540px);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.hall-case-dock {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-rows: 28px minmax(86px, auto);
  overflow: hidden;
  color: var(--kott-color-ivory, #f5ead0);
  background:
    linear-gradient(180deg, rgb(10 25 19 / 96%), rgb(3 10 8 / 98%)),
    radial-gradient(circle at 50% 0%, rgb(212 166 58 / 10%), transparent 58%);
  border: 1px solid rgb(204 163 70 / 42%);
  border-radius: var(--kott-radius-sm, 4px);
  box-shadow: 0 14px 34px rgb(0 0 0 / 44%), inset 0 1px rgb(255 239 196 / 6%);
}

.hall-case-dock > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid rgb(201 159 66 / 20%);
  background: rgb(2 9 7 / 62%);
}

.hall-case-dock > header > span {
  display: flex;
  min-width: 0;
  gap: 9px;
  align-items: baseline;
}

.hall-case-dock > header small {
  color: rgb(202 178 121 / 48%);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .16em;
}

.hall-case-dock > header strong {
  overflow: hidden;
  color: #e6cf96;
  font: 600 13px/1 var(--font-display, "Oswald", sans-serif);
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hall-case-dock > header button {
  display: inline-flex;
  min-height: 26px;
  gap: 5px;
  align-items: center;
  padding: 0 4px 0 8px;
  color: #c7aa65;
  background: transparent;
  border: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.hall-case-dock > header button i {
  color: #e3bd5c;
  font-size: 18px;
  font-style: normal;
}

.hall-case-dock__slots {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hall-case-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-columns: clamp(58px, 5.4vw, 82px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 28px;
  align-items: center;
  padding: 4px 7px 5px 4px;
  border-inline-end: 1px solid rgb(207 168 76 / 16%);
  background:
    radial-gradient(circle at 18% 42%, rgb(180 137 55 / 10%), transparent 45%),
    linear-gradient(125deg, rgb(13 29 22 / 82%), rgb(4 11 9 / 94%));
}

.hall-case-slot:last-child { border-inline-end: 0; }
.hall-case-slot.is-ready { box-shadow: inset 0 0 0 1px rgb(227 181 70 / 46%), inset 0 0 28px rgb(201 149 41 / 8%); }

.hall-case-slot__tier {
  position: absolute;
  top: 6px;
  left: 7px;
  z-index: 2;
  color: rgb(221 190 117 / 48%);
  font: 700 8px/1 var(--font-display, "Oswald", sans-serif);
  letter-spacing: .12em;
}

.hall-case-slot[data-case-tier="1"] { --case-tier-accent: #77694e; }
.hall-case-slot[data-case-tier="2"] { --case-tier-accent: #9f7d3d; }
.hall-case-slot[data-case-tier="3"] { --case-tier-accent: #c39c4e; }
.hall-case-slot[data-case-tier="4"] { --case-tier-accent: #e1bd67; }
.hall-case-slot:not(.is-empty) { box-shadow: inset 0 -2px var(--case-tier-accent, #77694e); }

.hall-case-slot__asset {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 74px;
  grid-row: 1 / -1;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  place-items: center;
}

.hall-case-slot__asset img {
  display: block;
  width: 100%;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgb(0 0 0 / 64%));
  transform: scale(.94);
  transform-origin: center;
}

.hall-case-slot__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  align-self: end;
  padding-bottom: 5px;
}

.hall-case-slot__copy strong,
.hall-case-slot__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-case-slot__copy strong {
  display: -webkit-box;
  max-height: 2.1em;
  overflow: hidden;
  color: #eee0be;
  font: 600 clamp(10px, .76vw, 13px)/1.05 var(--font-display, "Oswald", sans-serif);
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hall-case-slot__copy small {
  color: #a79d88;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.hall-case-slot__action {
  min-width: 0;
  min-height: 26px;
  padding: 0 7px;
  overflow: hidden;
  color: #181105;
  background: linear-gradient(180deg, #ead187, #ad7d29);
  border: 1px solid #c8993d;
  border-radius: 2px;
  font: 750 9px/1 var(--font-ui, sans-serif);
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.hall-case-slot__action:disabled { opacity: .48; cursor: default; }

.hall-case-slot.is-empty {
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: 1fr;
  color: #7d786d;
  background: linear-gradient(130deg, rgb(8 19 15 / 82%), rgb(3 9 7 / 92%));
}

.hall-case-slot__empty {
  position: relative;
  display: grid;
  width: 42px;
  height: 30px;
  margin-inline: auto;
  border: 1px dashed rgb(175 146 83 / 32%);
  border-radius: 5px;
  place-items: center;
}

.hall-case-slot__empty::before,
.hall-case-slot__empty::after {
  position: absolute;
  content: "";
  background: rgb(181 147 72 / 38%);
}

.hall-case-slot__empty::before { width: 12px; height: 1px; }
.hall-case-slot__empty::after { width: 1px; height: 12px; }

.hall-case-slot.is-empty > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.hall-case-slot.is-empty strong {
  color: #a49a84;
  font-size: 10px;
  text-transform: uppercase;
}

.hall-case-slot.is-empty small {
  color: #66675f;
  font-size: 8px;
  line-height: 1.25;
}

.case-workbench { min-width: 0; }
.case-workbench__integrity {
  margin: -4px 0 14px;
  padding: 9px 12px;
  color: #a89d87;
  border-inline-start: 2px solid #9f782a;
  background: rgb(8 20 15 / 72%);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.case-workbench .case-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.case-workbench .case-slot {
  display: grid;
  min-width: 0;
  min-height: 470px;
  grid-template-rows: 156px auto auto auto auto;
  align-content: start;
  padding: 14px;
  text-align: start;
}

.case-slot__number {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  color: rgb(225 190 105 / 28%);
  font: 700 24px/1 var(--font-display, "Oswald", sans-serif);
}

.case-slot__art {
  position: relative;
  display: grid;
  height: 156px;
  margin: -14px -14px 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 74%, rgb(183 140 49 / 15%), transparent 54%),
    linear-gradient(180deg, #0a1611, #050b08);
  border-bottom: 1px solid rgb(199 158 67 / 18%);
  place-items: center;
}

.case-slot__art::after {
  position: absolute;
  right: 10%;
  bottom: 13px;
  left: 10%;
  height: 18px;
  content: "";
  background: radial-gradient(ellipse, rgb(0 0 0 / 74%), transparent 68%);
  filter: blur(5px);
}

.case-slot__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgb(0 0 0 / 58%));
  transform: scale(.94);
}

.case-slot__tier {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 2;
  padding: 4px 7px;
  color: #cdb276;
  background: rgb(3 10 8 / 76%);
  border: 1px solid rgb(204 167 82 / 24%);
  font: 700 8px/1 var(--font-ui, sans-serif);
  letter-spacing: .12em;
}

.case-slot[data-case-tier="1"] { --case-tier-accent: #77694e; }
.case-slot[data-case-tier="2"] { --case-tier-accent: #9f7d3d; }
.case-slot[data-case-tier="3"] { --case-tier-accent: #c39c4e; }
.case-slot[data-case-tier="4"] { --case-tier-accent: #e1bd67; }
.case-slot:not(.is-empty) { border-bottom-color: var(--case-tier-accent, #77694e); }

.case-slot__art--empty i {
  position: relative;
  width: 94px;
  height: 58px;
  border: 1px dashed rgb(190 157 82 / 31%);
  border-radius: 8px;
}

.case-slot__art--empty i::before,
.case-slot__art--empty i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: rgb(190 157 82 / 36%);
  transform: translate(-50%, -50%);
}

.case-slot__art--empty i::before { width: 22px; height: 1px; }
.case-slot__art--empty i::after { width: 1px; height: 22px; }

.case-workbench .case-slot > header {
  display: grid;
  min-height: 79px;
  gap: 3px;
  align-content: start;
}

.case-workbench .case-slot > header small {
  padding-inline-end: 35px;
  overflow: hidden;
  color: #968a71;
  font-size: 8px;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-workbench .case-slot h3 {
  margin: 2px 0 0;
  color: #f0e4c9;
  font: 650 20px/1 var(--font-display, "Oswald", sans-serif);
  text-transform: uppercase;
}

.case-workbench .case-slot > header p {
  color: #d1b86f;
  font-variant-numeric: tabular-nums;
}

.case-slot__rewards {
  display: grid;
  gap: 1px;
  margin: 10px 0;
  background: rgb(187 150 69 / 16%);
}

.case-slot__rewards > span {
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: #07100c;
}

.case-slot__rewards small {
  color: #817b6e;
  font-size: 8px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.case-slot__rewards b {
  overflow: hidden;
  color: #e2c677;
  font-size: 10px;
  font-weight: 700;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-slot__target {
  display: grid;
  gap: 5px;
  margin: 3px 0 10px;
  color: #a79c83;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.case-slot__target select {
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding-inline: 8px;
  color: #e9ddc1;
  border: 1px solid #5c4923;
  background: #07100c;
}

.case-slot__target select:disabled { color: #857f72; opacity: .76; }

.case-slot__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.case-slot__actions button {
  min-height: 40px;
  padding: 7px;
  color: #171106;
  border: 1px solid #a77c2a;
  background: linear-gradient(#f0d68d, #bc8b31);
  font: 800 10px/1.1 var(--font-ui, sans-serif);
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
}

.case-slot__actions button:only-child { grid-column: 1 / -1; }
.case-slot__actions button.is-secondary { color: #d6ba70; background: #0b1510; }
.case-slot__actions button:disabled { opacity: .42; cursor: default; }
.case-workbench .case-slot > footer { margin-top: 9px; color: #595c55; font-size: 7px; letter-spacing: .04em; }
.case-workbench .case-slot.is-empty h3 { margin: 0 0 7px; }

.case-receipt {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  place-items: center;
}

.case-receipt__scrim {
  position: absolute;
  inset: 0;
  background: rgb(1 5 4 / 86%);
  backdrop-filter: blur(9px);
}

.case-receipt__panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(960px, 100%);
  max-height: min(720px, 100%);
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(20px, 3vw, 42px);
  padding: clamp(20px, 3vw, 42px);
  overflow: auto;
  color: #f0e5cc;
  background:
    radial-gradient(circle at 18% 22%, rgb(176 126 44 / 17%), transparent 34%),
    linear-gradient(135deg, #0b1e16, #040b08 72%);
  border: 1px solid rgb(220 177 75 / 62%);
  box-shadow: 0 32px 90px #000, inset 0 1px rgb(255 236 181 / 8%);
}

.case-receipt__panel::before {
  position: absolute;
  inset: 7px;
  content: "";
  border: 1px solid rgb(217 176 78 / 16%);
  pointer-events: none;
}

.case-receipt__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  width: 42px;
  height: 42px;
  color: #cbb679;
  background: #07100c;
  border: 1px solid rgb(203 163 73 / 30%);
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  place-items: center;
}

.case-receipt__hero {
  position: relative;
  display: grid;
  min-height: 360px;
  grid-column: 1;
  grid-row: 1 / -1;
  place-items: center;
}

.case-receipt__hero > span {
  position: absolute;
  width: 90%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(211 167 64 / 16%), transparent 64%);
  border: 1px solid rgb(205 164 73 / 12%);
  border-radius: 50%;
}

.case-receipt__hero img {
  position: relative;
  z-index: 1;
  width: 112%;
  height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgb(0 0 0 / 68%));
  transform: scale(.94);
}

.case-receipt__panel > header {
  align-self: end;
  padding: 16px 52px 14px 0;
  border-bottom: 1px solid rgb(206 164 73 / 23%);
}

.case-receipt__panel > header small {
  color: #c7a85b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.case-receipt__panel > header h2 {
  margin: 5px 0 7px;
  color: #f4e6c3;
  font: 650 clamp(34px, 4vw, 56px)/.92 var(--font-display, "Oswald", sans-serif);
  letter-spacing: .015em;
  text-transform: uppercase;
}

.case-receipt__panel > header p { margin: 0; color: #aaa28f; font-size: 12px; }

.case-receipt__rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 14px 0;
}

.case-receipt__rewards article {
  display: grid;
  min-width: 0;
  min-height: 166px;
  align-content: center;
  gap: 5px;
  padding: 12px;
  text-align: center;
  background: rgb(5 15 11 / 92%);
  border: 1px solid rgb(193 156 72 / 20%);
}

.case-receipt__rewards small { color: #807b70; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.case-receipt__rewards strong { color: #ebce79; font: 650 30px/1 var(--font-display, "Oswald", sans-serif); }
.case-receipt__rewards span { overflow: hidden; color: #c9bea5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.case-receipt__rewards b { color: #72b481; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }

.cue-blueprint-track {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 9px 10px;
  color: #bdb093;
  background: rgb(4 14 10 / 88%);
  border: 1px solid rgb(185 151 76 / 20%);
}

.cue-blueprint-track > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cue-blueprint-track > header > span {
  overflow: hidden;
  color: #9e947f;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cue-blueprint-track > header > b {
  flex: 0 0 auto;
  color: #e4c979;
  font: 700 11px/1 var(--font-display, "Oswald", sans-serif);
}

.cue-blueprint-track.is-unlocking > div,
.cue-blueprint-track.is-complete > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.cue-blueprint-track.is-unlocking > div > i,
.cue-blueprint-track.is-complete > div > i {
  position: relative;
  display: block;
  height: 19px;
  overflow: hidden;
  background: linear-gradient(135deg, #111a16, #07100c);
  border: 1px solid #3e4239;
  transform: skewX(-8deg);
}

.cue-blueprint-track.is-unlocking > div > i::before,
.cue-blueprint-track.is-complete > div > i::before {
  position: absolute;
  inset: 3px 6px;
  content: "";
  border-top: 1px solid rgb(167 153 116 / 26%);
  border-bottom: 1px solid rgb(167 153 116 / 18%);
}

.cue-blueprint-track.is-unlocking > div > i.is-collected,
.cue-blueprint-track.is-complete > div > i.is-collected {
  background: linear-gradient(135deg, #1d633f, #0d2f20 72%);
  border-color: #b3944e;
  box-shadow: inset 0 0 10px rgb(215 177 84 / 18%);
}

.cue-blueprint-track.is-unlocking > div > i span,
.cue-blueprint-track.is-complete > div > i span {
  position: absolute;
  right: 3px;
  bottom: 1px;
  color: rgb(231 210 157 / 42%);
  font: 700 6px/1 var(--font-ui, sans-serif);
  transform: skewX(8deg);
}

.cue-blueprint-track__upgrade {
  height: 6px;
  overflow: hidden;
  background: #101712;
  border: 1px solid #343b33;
}

.cue-blueprint-track__upgrade i {
  display: block;
  width: calc(var(--blueprint-progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #2f7751, #d0aa55);
}

.cue-inventory-card__utility > .cue-blueprint-track,
.cue-active-stage__body > .cue-blueprint-track { margin-bottom: 8px; }

.case-receipt__rewards .cue-blueprint-track {
  width: 100%;
  margin-top: 3px;
  padding: 6px;
}

.case-receipt__rewards .cue-blueprint-track > header > span {
  color: #8f8777;
  font-size: 6px;
}

.case-receipt__rewards .cue-blueprint-track > header > b {
  color: #e2c777;
  font-size: 9px;
}

.case-receipt__rewards .cue-blueprint-track.is-unlocking > div > i,
.case-receipt__rewards .cue-blueprint-track.is-complete > div > i { height: 13px; }

.case-receipt__collection {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgb(54 42 18 / 26%);
  border: 1px solid rgb(205 164 71 / 20%);
}

.case-receipt__collection span { display: grid; gap: 3px; }
.case-receipt__collection small { color: #898172; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.case-receipt__collection strong { color: #e4c36c; font: 650 17px/1 var(--font-display, "Oswald", sans-serif); }

.case-receipt__panel > footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 14px;
}

.case-receipt__panel > footer button {
  min-height: 48px;
  color: #171106;
  background: linear-gradient(#f0d68d, #bc8b31);
  border: 1px solid #d6aa4c;
  font: 800 11px/1 var(--font-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.case-receipt__panel > footer button.is-secondary { color: #d7bb72; background: #09140f; }

@media (max-width: 900px) and (orientation: portrait) {
  .hall-stage-card.hall-stage-hero.hall-play-hub {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .hall-case-dock { grid-template-rows: 24px 82px; }
  .hall-case-dock > header { padding-inline: 7px; }
  .hall-case-dock > header small { display: none; }
  .hall-case-dock > header strong { font-size: 10px; }
  .hall-case-dock > header button { font-size: 8px; }
  .hall-case-slot {
    min-height: 82px;
    grid-template-columns: 1fr;
    grid-template-rows: 48px 26px;
    padding: 2px 3px 4px;
  }
  .hall-case-slot__asset { min-height: 48px; grid-row: 1; }
  .hall-case-slot__asset img { height: 52px; }
  .hall-case-slot__copy { position: absolute; top: 2px; left: 3px; z-index: 2; padding: 0; }
  .hall-case-slot__copy strong { display: none; }
  .hall-case-slot__copy small { padding: 2px 3px; color: #d0ba80; background: rgb(2 9 6 / 66%); font-size: 7px; }
  .hall-case-slot__action { min-height: 25px; padding: 0 3px; font-size: 7px; }
  .hall-case-slot.is-empty { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 4px; }
  .hall-case-slot.is-empty > span:last-child { display: none; }
  .hall-case-slot__empty { width: 40px; }

  .case-receipt__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 190px auto auto auto auto;
    gap: 0;
    padding: 18px;
  }
  .case-receipt__hero { min-height: 190px; grid-column: 1; grid-row: 1; }
  .case-receipt__hero img { width: 100%; height: 210px; }
  .case-receipt__panel > header { padding-top: 4px; }
  .case-receipt__panel > header h2 { font-size: 34px; }
  .case-receipt__rewards article { min-height: 100px; padding: 8px; }
  .case-receipt__rewards strong { font-size: 24px; }
  .case-receipt__rewards span { font-size: 8px; }
}

@media (max-width: 620px) and (orientation: portrait) {
  .case-workbench .case-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-workbench .case-slot { min-height: 448px; }
  .case-receipt__rewards { gap: 3px; }
  .case-receipt__rewards article { padding: 6px 3px; }
  .case-receipt__collection { align-items: start; flex-direction: column; }
  .case-receipt__panel > footer { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
  .hall-stage-card.hall-stage-hero.hall-play-hub {
    height: min(100%, 220px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }
  .hall-case-dock { height: 100%; grid-template-rows: 23px minmax(0, 1fr); }
  .hall-case-dock > header { padding-inline: 6px; }
  .hall-case-dock > header small { display: none; }
  .hall-case-dock > header strong { font-size: 9px; }
  .hall-case-dock > header button { font-size: 0; }
  .hall-case-dock > header button i { font-size: 17px; }
  .hall-case-dock__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .hall-case-slot {
    min-height: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 23px;
    padding: 2px 4px 3px 1px;
    border-bottom: 1px solid rgb(207 168 76 / 12%);
  }
  .hall-case-slot:nth-child(2n) { border-inline-end: 0; }
  .hall-case-slot__asset { min-height: 54px; }
  .hall-case-slot__asset img { height: 54px; }
  .hall-case-slot__copy { gap: 1px; padding-bottom: 2px; }
  .hall-case-slot__copy strong { font-size: 8px; }
  .hall-case-slot__copy small { font-size: 7px; }
  .hall-case-slot__action { min-height: 21px; padding: 0 3px; font-size: 6px; }
  .hall-case-slot.is-empty { grid-template-columns: 39px minmax(0, 1fr); }
  .hall-case-slot__empty { width: 31px; height: 23px; }
  .hall-case-slot.is-empty strong { font-size: 7px; }
  .hall-case-slot.is-empty small { display: none; }

  .case-receipt__panel {
    width: min(820px, 100%);
    max-height: 100%;
    grid-template-columns: 230px minmax(0, 1fr);
    column-gap: 18px;
    padding: 14px 18px;
  }
  .case-receipt__hero { min-height: 260px; }
  .case-receipt__hero img { height: 260px; }
  .case-receipt__panel > header { padding: 5px 44px 8px 0; }
  .case-receipt__panel > header h2 { margin-block: 3px; font-size: 30px; }
  .case-receipt__panel > header p { display: none; }
  .case-receipt__rewards { padding: 8px 0; }
  .case-receipt__rewards article { min-height: 78px; padding: 6px; }
  .case-receipt__rewards strong { font-size: 22px; }
  .case-receipt__collection { padding: 6px 8px; }
  .case-receipt__panel > footer { padding-top: 8px; }
  .case-receipt__panel > footer button { min-height: 36px; }
}

[dir="rtl"] .case-slot__number { right: auto; left: 14px; }
[dir="rtl"] .case-receipt__close { right: auto; left: 10px; }

@media (prefers-reduced-motion: reduce) {
  .hall-case-slot__asset img,
  .case-slot__art img,
  .case-receipt__hero img { transition: none; }
}

/* Final matchmaking cascade guard — keep the approved ceremony above legacy layout rules. */
.hall-match-setup.hall-match-ceremony {
  display: grid;
  width: min(100%, 1240px);
  height: min(100%, 716px);
  max-height: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.hall-match-search { view-transition-name: hall-play-play; }

@media (max-width: 780px) and (orientation: portrait) {
  .hall-match-setup.hall-match-ceremony { width: 100%; height: 100%; }
  .hall-match-setup.hall-match-ceremony .hall-play-button { min-height: 49px; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .hall-match-setup.hall-match-ceremony { width: 100%; height: 100%; }
  .hall-match-setup.hall-match-ceremony .hall-play-button { width: 100%; min-height: 48px; font-size: 17px; }
}

/* Matchmaking reference fidelity correction — 2026-08-23. */
@media (min-width: 861px) and (min-height: 541px) {
  .hall-room:has(.hall-match-reference) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 22.5%);
  }

  .hall-room:has(.hall-match-reference) > .hall-stage {
    grid-column: 1;
  }

  .hall-room:has(.hall-match-reference) > .hall-side {
    display: flex;
    grid-column: 2;
    overflow: hidden;
    visibility: visible;
  }

  .hall-room:has(.hall-match-reference) > .hall-edge-button,
  .hall-room:has(.hall-match-reference) > .hall-drawer-scrim {
    display: none;
  }
}

.hall-room:has(.hall-match-reference) > .hall-stage {
  place-items: center;
  padding: clamp(12px, 2vw, 28px);
  background:
    radial-gradient(ellipse at 50% 39%, rgb(20 60 42 / 18%), transparent 48%),
    linear-gradient(180deg, rgb(1 7 5 / 19%), rgb(1 6 4 / 52%)),
    var(--hall-club-background) center / cover no-repeat,
    var(--hall-club-preview) center / cover no-repeat;
}

.hall-match-setup.hall-match-reference {
  display: grid;
  width: min(100%, 826px);
  height: auto;
  max-height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  overflow: hidden;
  color: #f4ead2;
  background:
    linear-gradient(155deg, rgb(8 27 19 / 96%), rgb(3 13 9 / 98%)),
    radial-gradient(circle at 50% 0%, rgb(194 147 51 / 9%), transparent 46%);
  border: 1px solid rgb(221 178 77 / 72%);
  border-radius: 5px;
  box-shadow:
    0 34px 90px rgb(0 0 0 / 68%),
    0 0 0 1px rgb(0 0 0 / 72%),
    inset 0 1px rgb(255 239 190 / 8%),
    inset 0 0 70px rgb(0 0 0 / 24%);
}

.hall-match-setup.hall-match-reference::before,
.hall-match-setup.hall-match-reference::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hall-match-setup.hall-match-reference::before {
  inset: 7px;
  z-index: 3;
  border: 1px solid rgb(226 189 102 / 9%);
}

.hall-match-setup.hall-match-reference::after {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgb(255 255 255 / 1.5%) 50%, transparent 50.2%),
    repeating-linear-gradient(90deg, transparent 0 5px, rgb(255 255 255 / .6%) 5px 6px);
}

.hall-match-reference > .hall-match-room-plaque {
  grid-column: 1;
  grid-row: 1;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 15px;
  background:
    linear-gradient(90deg, rgb(2 10 7 / 88%), rgb(2 10 7 / 71%) 56%, rgb(2 10 7 / 90%)),
    var(--hall-match-room) center 58% / cover no-repeat;
  border-bottom-color: rgb(221 179 82 / 27%);
  box-shadow: inset 0 -18px 30px rgb(0 0 0 / 31%);
}

.hall-match-reference .hall-match-room-plaque__number {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.hall-match-reference .hall-match-room-plaque__identity {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.hall-match-reference .hall-match-room-plaque__identity small {
  font-size: 8px;
}

.hall-match-reference .hall-match-room-plaque__identity strong {
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .06em;
}

.hall-match-reference .hall-match-room-plaque__economy {
  grid-template-columns: auto 1px auto;
  gap: 10px;
  padding: 4px 8px;
  background: rgb(2 9 6 / 54%);
  border-color: rgb(214 172 75 / 14%);
}

.hall-match-reference .hall-match-room-plaque__economy > span {
  grid-auto-flow: column;
  align-items: center;
  gap: 5px;
}

.hall-match-reference .hall-match-room-plaque__economy small {
  font-size: 7px;
}

.hall-match-reference .hall-match-room-plaque__economy strong {
  gap: 4px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.hall-match-reference .hall-match-room-plaque .hall-currency-art {
  width: 18px;
  height: 18px;
}

.hall-match-reference > .hall-match-setup__body {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 17px;
  padding: 20px 34px 17px;
  overflow: visible;
}

.hall-match-reference .hall-match-setup__heading {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(26px, 1fr) auto minmax(26px, 1fr);
  gap: 17px;
}

.hall-match-reference .hall-match-setup__heading h1 {
  color: #f3dfaa;
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 600;
  letter-spacing: .1em;
}

.hall-match-reference .hall-discipline-fieldset {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: auto auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
}

.hall-match-reference legend {
  width: 100%;
  margin: 0 0 9px;
  color: #c5a354;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .18em;
  text-align: center;
}

.hall-match-reference .hall-choice-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hall-match-reference .hall-match-discipline-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 148px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(82px, 1fr) auto;
  place-items: center;
  gap: 7px;
  padding: 15px 8px 17px;
  overflow: visible;
  color: #d4cbb8;
  background:
    radial-gradient(circle at 50% 31%, rgb(35 77 57 / 23%), transparent 45%),
    linear-gradient(155deg, rgb(17 37 28 / 93%), rgb(5 17 12 / 98%));
  border: 1px solid rgb(205 164 70 / 25%);
  border-radius: 3px;
  box-shadow: inset 0 1px rgb(255 242 205 / 4%), 0 10px 24px rgb(0 0 0 / 20%);
  transition: color 150ms ease-out, border-color 150ms ease-out, background 170ms ease-out, box-shadow 170ms ease-out, transform 120ms ease-out;
}

.hall-match-reference .hall-match-discipline-card::before,
.hall-match-reference .hall-match-discipline-card::after {
  position: absolute;
  width: 13px;
  height: 13px;
  content: "";
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.hall-match-reference .hall-match-discipline-card::before {
  top: 5px;
  left: 5px;
  border-top: 1px solid #e5c16a;
  border-left: 1px solid #e5c16a;
}

.hall-match-reference .hall-match-discipline-card::after {
  right: 5px;
  bottom: 5px;
  border-right: 1px solid #e5c16a;
  border-bottom: 1px solid #e5c16a;
}

.hall-match-reference .hall-match-discipline-card:hover {
  color: #f6ead0;
  border-color: rgb(226 183 83 / 56%);
  transform: translateY(-1px);
}

.hall-match-reference .hall-match-discipline-card:active {
  transform: translateY(1px);
}

.hall-match-reference .hall-match-discipline-card.is-selected {
  color: #fff4d5;
  background:
    radial-gradient(circle at 50% 32%, rgb(63 116 84 / 31%), transparent 47%),
    linear-gradient(155deg, rgb(23 62 44 / 96%), rgb(6 27 18 / 99%));
  border-color: #d8ad4d;
  box-shadow:
    inset 0 0 24px rgb(37 116 75 / 14%),
    0 0 0 1px rgb(5 13 9 / 86%),
    0 12px 27px rgb(0 0 0 / 31%);
}

.hall-match-reference .hall-match-discipline-card.is-selected::before,
.hall-match-reference .hall-match-discipline-card.is-selected::after {
  opacity: 1;
}

.hall-match-reference .hall-match-discipline-card > span:not(.hall-match-discipline-art) {
  overflow: hidden;
  color: inherit;
  font: 650 14px/1.05 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .075em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hall-match-reference .hall-match-discipline-card > em {
  position: absolute;
  right: auto;
  bottom: -10px;
  left: 50%;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: transparent;
  font-size: 11px;
  font-style: normal;
  background: #07130e;
  border: 1px solid rgb(213 174 80 / 43%);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgb(0 0 0 / 55%);
  transform: translateX(-50%);
}

.hall-match-reference .hall-match-discipline-card.is-selected > em {
  color: #17301f;
  background: linear-gradient(180deg, #f1d37e, #bd862e);
  border-color: #f6dda0;
  transform: translateX(-50%);
}

.hall-match-discipline-art {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  filter: drop-shadow(0 9px 8px rgb(0 0 0 / 52%));
}

.hall-match-discipline-art.is-pool_8,
.hall-match-discipline-art.is-pool_9 {
  color: #090b0a;
  font: 800 21px/1 Arial, sans-serif;
  background:
    radial-gradient(circle at 34% 29%, rgb(255 255 255 / 38%) 0 5%, transparent 11%),
    radial-gradient(circle at 50% 50%, #f3eee0 0 27%, #d9d0bd 28% 35%, transparent 36%),
    radial-gradient(circle at 36% 29%, #424641 0, #151816 43%, #030504 75%);
  border: 1px solid rgb(234 214 165 / 26%);
  border-radius: 50%;
  box-shadow: inset -9px -11px 16px rgb(0 0 0 / 71%), inset 7px 7px 12px rgb(255 255 255 / 7%);
}

.hall-match-discipline-art.is-pool_9 {
  background:
    radial-gradient(circle at 34% 29%, rgb(255 255 255 / 45%) 0 5%, transparent 11%),
    radial-gradient(circle at 50% 50%, #f4efe1 0 27%, #d9d0bd 28% 35%, transparent 36%),
    linear-gradient(180deg, #e7dcc6 0 26%, #d8a526 27% 72%, #e7dcc6 73% 100%);
  box-shadow: inset -10px -11px 17px rgb(0 0 0 / 39%), inset 7px 7px 12px rgb(255 255 255 / 17%);
}

.hall-match-discipline-art.is-pool_8 > i,
.hall-match-discipline-art.is-pool_9 > i {
  font-style: normal;
}

.hall-match-discipline-art.is-snooker,
.hall-match-discipline-art.is-pyramid {
  width: 81px;
  height: 67px;
  grid-template-columns: repeat(3, 23px);
  grid-template-rows: repeat(2, 23px);
  align-content: center;
  justify-content: center;
  gap: 3px;
}

.hall-match-discipline-art.is-snooker > i,
.hall-match-discipline-art.is-pyramid > i {
  display: block;
  width: 23px;
  height: 23px;
  background:
    radial-gradient(circle at 33% 27%, rgb(255 255 255 / 62%) 0 6%, transparent 15%),
    radial-gradient(circle at 36% 30%, #d94b47, #6c1211 68%, #250504);
  border: 1px solid rgb(255 235 205 / 20%);
  border-radius: 50%;
  box-shadow: inset -4px -5px 7px rgb(0 0 0 / 48%);
}

.hall-match-discipline-art.is-snooker > i:nth-child(2) { background: radial-gradient(circle at 33% 27%, #fff 0 5%, transparent 14%), radial-gradient(circle at 36% 30%, #ebcf42, #806515 70%); }
.hall-match-discipline-art.is-snooker > i:nth-child(3) { background: radial-gradient(circle at 33% 27%, #fff 0 5%, transparent 14%), radial-gradient(circle at 36% 30%, #2e7c48, #123c27 70%); }
.hall-match-discipline-art.is-snooker > i:nth-child(4) { background: radial-gradient(circle at 33% 27%, #fff 0 5%, transparent 14%), radial-gradient(circle at 36% 30%, #4c77ad, #203a60 70%); }
.hall-match-discipline-art.is-snooker > i:nth-child(5) { background: radial-gradient(circle at 33% 27%, #fff 0 5%, transparent 14%), radial-gradient(circle at 36% 30%, #6a3f28, #321b11 70%); }
.hall-match-discipline-art.is-snooker > i:nth-child(6) { background: radial-gradient(circle at 33% 27%, #fff 0 5%, transparent 14%), radial-gradient(circle at 36% 30%, #202421, #050706 70%); }

.hall-match-discipline-art.is-pyramid > i {
  background:
    radial-gradient(circle at 33% 27%, #fff 0 8%, transparent 18%),
    radial-gradient(circle at 36% 30%, #f3ead2, #c6b99c 69%, #766b55);
  border-color: rgb(255 245 216 / 46%);
  box-shadow: inset -4px -5px 7px rgb(66 50 25 / 27%);
}

.hall-match-reference .hall-option-grid {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 0;
}

.hall-match-reference .hall-option-grid fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.hall-match-reference .hall-option-grid legend {
  text-align: start;
}

.hall-match-reference .hall-segment-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  background: rgb(2 10 7 / 68%);
  border: 1px solid rgb(209 168 76 / 24%);
  border-radius: 3px;
  box-shadow: inset 0 4px 12px rgb(0 0 0 / 33%);
}

.hall-match-reference .hall-segment {
  min-width: 0;
  min-height: 45px;
  gap: 6px;
  padding: 6px 8px;
  color: #aaa89e;
  font: 650 11px/1.12 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .035em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
}

.hall-match-reference .hall-segment:first-child,
.hall-match-reference .hall-segment:last-child {
  border-radius: 2px;
}

.hall-match-reference .hall-segment em {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  color: transparent;
  font-size: 9px;
  font-style: normal;
  background: rgb(4 14 10 / 76%);
  border: 1px solid rgb(208 169 79 / 26%);
  border-radius: 2px;
}

.hall-match-reference .hall-segment.is-selected {
  color: #241904;
  background: linear-gradient(180deg, #f0d27b, #b57d29);
  border-color: #f5dda2;
  box-shadow: inset 0 1px #fff1b4, 0 3px 10px rgb(0 0 0 / 28%);
}

.hall-match-reference .hall-segment.is-selected em {
  color: #ead082;
  background: #173725;
  border-color: #0a1d13;
}

.hall-match-reference > .hall-search-footer {
  display: grid;
  min-width: 0;
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 34px 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hall-match-reference .hall-play-button {
  width: min(100%, 392px);
  min-height: 60px;
  margin: 0;
  color: #1c1406;
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 800;
  letter-spacing: .08em;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 24%), transparent 33%),
    linear-gradient(180deg, #f0d27a, #b57926);
  border: 1px solid #f7dfa1;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff3bd, 0 10px 22px rgb(0 0 0 / 38%);
}

.hall-match-reference .hall-play-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.hall-match-reference .hall-match-back {
  width: auto;
  min-height: 30px;
  padding: 2px 17px;
  color: #c9b98f;
  font-size: 11px;
  letter-spacing: .13em;
  background: transparent;
  border: 0;
}

.hall-match-reference .hall-match-back:hover {
  color: #f2d88d;
  background: transparent;
}

.hall-match-reference .hall-search-footer p {
  display: grid;
  gap: 1px;
  margin: 0;
  color: #817e73;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.hall-match-reference .hall-search-footer p small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[dir="rtl"] .hall-match-reference .hall-match-room-plaque__identity,
html[dir="rtl"] .hall-match-reference .hall-option-grid legend {
  text-align: start;
}

@media (max-width: 860px), (max-height: 540px) {
  .hall-room:has(.hall-match-reference) {
    grid-template-columns: minmax(0, 1fr);
  }

  .hall-room:has(.hall-match-reference) > .hall-side,
  .hall-room:has(.hall-match-reference) > .hall-edge-button,
  .hall-room:has(.hall-match-reference) > .hall-drawer-scrim {
    display: none;
  }

  .hall-room:has(.hall-match-reference) > .hall-stage {
    grid-column: 1;
  }
}

@media (max-width: 780px) and (orientation: portrait) {
  .hall-room:has(.hall-match-reference) > .hall-stage {
    padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  }

  .hall-match-setup.hall-match-reference {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .hall-match-reference > .hall-match-room-plaque {
    min-height: 49px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 5px 8px;
  }

  .hall-match-reference .hall-match-room-plaque__number {
    width: 29px;
    height: 29px;
    font-size: 13px;
  }

  .hall-match-reference .hall-match-room-plaque__identity {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hall-match-reference .hall-match-room-plaque__identity small {
    display: none;
  }

  .hall-match-reference .hall-match-room-plaque__identity strong {
    font-size: clamp(15px, 4vw, 20px);
  }

  .hall-match-reference .hall-match-room-plaque__economy {
    gap: 6px;
    padding: 3px 5px;
  }

  .hall-match-reference .hall-match-room-plaque__economy small {
    display: none;
  }

  .hall-match-reference .hall-match-room-plaque__economy strong {
    font-size: 12px;
  }

  .hall-match-reference .hall-match-room-plaque .hall-currency-art {
    width: 16px;
    height: 16px;
  }

  .hall-match-reference > .hall-match-setup__body {
    align-content: start;
    gap: 11px;
    padding: 12px 12px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .hall-match-reference .hall-match-setup__heading {
    gap: 9px;
  }

  .hall-match-reference .hall-match-setup__heading h1 {
    font-size: clamp(21px, 6vw, 28px);
  }

  .hall-match-reference .hall-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 9px;
  }

  .hall-match-reference .hall-match-discipline-card {
    min-height: 113px;
    grid-template-rows: minmax(59px, 1fr) auto;
    padding: 9px 6px 13px;
  }

  .hall-match-reference .hall-match-discipline-card > span:not(.hall-match-discipline-art) {
    font-size: 12px;
  }

  .hall-match-reference .hall-match-discipline-art {
    width: 54px;
    height: 54px;
  }

  .hall-match-reference .hall-match-discipline-art.is-snooker,
  .hall-match-reference .hall-match-discipline-art.is-pyramid {
    width: 65px;
    height: 52px;
    grid-template-columns: repeat(3, 18px);
    grid-template-rows: repeat(2, 18px);
  }

  .hall-match-reference .hall-match-discipline-art.is-snooker > i,
  .hall-match-reference .hall-match-discipline-art.is-pyramid > i {
    width: 18px;
    height: 18px;
  }

  .hall-match-reference .hall-option-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hall-match-reference .hall-segment {
    min-height: 44px;
    font-size: 10px;
  }

  .hall-match-reference > .hall-search-footer {
    gap: 4px;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgb(4 14 10 / 85%), rgb(2 9 6 / 97%));
    border-top: 1px solid rgb(207 166 74 / 17%);
  }

  .hall-match-reference .hall-play-button {
    min-height: 51px;
    font-size: clamp(19px, 5.6vw, 24px);
  }

  .hall-match-reference .hall-match-back {
    min-height: 34px;
  }
}

@media (max-width: 420px) and (orientation: portrait) {
  .hall-match-reference > .hall-match-setup__body {
    gap: 8px;
    padding: 9px 9px 7px;
  }

  .hall-match-reference .hall-match-setup__heading h1 {
    font-size: 20px;
  }

  .hall-match-reference legend {
    margin-bottom: 6px;
    font-size: 8px;
  }

  .hall-match-reference .hall-choice-grid {
    gap: 9px 7px;
  }

  .hall-match-reference .hall-match-discipline-card {
    min-height: 102px;
    grid-template-rows: 52px auto;
    padding-block: 7px 12px;
  }

  .hall-match-reference .hall-match-discipline-card > span:not(.hall-match-discipline-art) {
    font-size: 10px;
  }

  .hall-match-reference .hall-match-discipline-art {
    width: 48px;
    height: 48px;
  }

  .hall-match-reference .hall-match-discipline-art.is-snooker,
  .hall-match-reference .hall-match-discipline-art.is-pyramid {
    transform: scale(.88);
  }

  .hall-match-reference .hall-option-grid {
    gap: 7px;
  }

  .hall-match-reference .hall-segment {
    min-height: 41px;
    padding: 4px;
    font-size: 9px;
  }

  .hall-match-reference .hall-search-footer p {
    display: none;
  }
}

@media (min-width: 600px) and (max-width: 780px) and (orientation: portrait) {
  .hall-match-setup.hall-match-reference {
    height: auto;
    max-height: 100%;
    grid-template-rows: auto auto auto;
  }

  .hall-match-reference .hall-option-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .hall-room:has(.hall-match-reference) > .hall-stage {
    padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
  }

  .hall-match-setup.hall-match-reference {
    width: 100%;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 41px minmax(0, 1fr);
  }

  .hall-match-reference > .hall-match-room-plaque {
    min-height: 41px;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    padding: 4px 9px;
  }

  .hall-match-reference .hall-match-room-plaque__number {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  .hall-match-reference .hall-match-room-plaque__identity {
    grid-template-columns: auto 1fr;
  }

  .hall-match-reference .hall-match-room-plaque__identity small,
  .hall-match-reference .hall-match-room-plaque__economy small {
    display: none;
  }

  .hall-match-reference .hall-match-room-plaque__identity strong {
    font-size: 17px;
  }

  .hall-match-reference .hall-match-room-plaque__economy {
    gap: 7px;
    padding: 2px 5px;
  }

  .hall-match-reference .hall-match-room-plaque__economy strong {
    font-size: 12px;
  }

  .hall-match-reference .hall-match-room-plaque .hall-currency-art {
    width: 15px;
    height: 15px;
  }

  .hall-match-reference > .hall-match-setup__body {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 64%) minmax(238px, 36%);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px;
    padding: 7px 8px;
  }

  .hall-match-reference .hall-match-setup__heading {
    display: grid;
    grid-row: 1;
    gap: 9px;
  }

  .hall-match-reference .hall-match-setup__heading h1 {
    font-size: 19px;
  }

  .hall-match-reference .hall-discipline-fieldset {
    grid-row: 2;
  }

  .hall-match-reference legend {
    margin-bottom: 4px;
    font-size: 7px;
  }

  .hall-match-reference .hall-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .hall-match-reference .hall-match-discipline-card {
    min-height: 0;
    grid-template-rows: minmax(44px, 1fr) auto;
    gap: 2px;
    padding: 5px 3px 9px;
  }

  .hall-match-reference .hall-match-discipline-card > span:not(.hall-match-discipline-art) {
    font-size: 8px;
  }

  .hall-match-reference .hall-match-discipline-card > em {
    bottom: -7px;
    width: 15px;
    height: 15px;
    font-size: 8px;
  }

  .hall-match-reference .hall-match-discipline-art {
    width: 43px;
    height: 43px;
  }

  .hall-match-reference .hall-match-discipline-art.is-snooker,
  .hall-match-reference .hall-match-discipline-art.is-pyramid {
    transform: scale(.7);
  }

  .hall-match-reference .hall-option-grid {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 7px;
    padding: 7px 8px 65px 0;
  }

  .hall-match-reference .hall-option-grid legend {
    margin-bottom: 3px;
  }

  .hall-match-reference .hall-segment-row {
    padding: 2px;
  }

  .hall-match-reference .hall-segment {
    min-height: 37px;
    padding: 3px;
    font-size: 8px;
  }

  .hall-match-reference .hall-segment em {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
    font-size: 7px;
  }

  .hall-match-reference > .hall-search-footer {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: calc(36% - 14px);
    gap: 0;
    padding: 0;
  }

  .hall-match-reference .hall-play-button {
    width: 100%;
    min-height: 47px;
    font-size: 16px;
  }

  .hall-match-reference .hall-match-back,
  .hall-match-reference .hall-search-footer p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-match-reference,
  .hall-match-reference .hall-match-discipline-card,
  .hall-match-reference .hall-segment,
  .hall-match-reference .hall-play-button {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Owner-approved 11-discipline matchmaking reference — 2026-08-23. */
.hall-room:has(.hall-match-reference-list) {
  grid-template-columns: minmax(0, 1fr);
}

.hall-room:has(.hall-match-reference-list) > .hall-stage {
  grid-column: 1;
  place-items: center;
  padding: clamp(9px, 1.5vw, 22px);
  background:
    radial-gradient(ellipse at 50% 42%, rgb(10 42 29 / 13%), transparent 48%),
    linear-gradient(180deg, rgb(1 7 5 / 12%), rgb(1 6 4 / 43%)),
    var(--hall-club-background) center / cover no-repeat,
    var(--hall-club-preview) center / cover no-repeat;
}

.hall-room:has(.hall-match-reference-list) > .hall-side,
.hall-room:has(.hall-match-reference-list) > .hall-edge-button,
.hall-room:has(.hall-match-reference-list) > .hall-drawer-scrim {
  display: none !important;
}

.hall-match-setup.hall-match-reference-list {
  display: grid;
  width: min(100%, 960px);
  height: auto;
  max-height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: #f4ead2;
  background:
    linear-gradient(155deg, rgb(7 25 18 / 97%), rgb(3 13 9 / 99%)),
    radial-gradient(circle at 50% 0%, rgb(194 147 51 / 8%), transparent 44%);
  border: 1px solid rgb(221 178 77 / 71%);
  border-radius: 5px;
  box-shadow:
    0 32px 82px rgb(0 0 0 / 67%),
    0 0 0 1px rgb(0 0 0 / 76%),
    inset 0 1px rgb(255 239 190 / 7%),
    inset 0 0 64px rgb(0 0 0 / 22%);
}

.hall-match-setup.hall-match-reference-list::before {
  inset: 7px;
  z-index: 4;
  border-color: rgb(226 189 102 / 8%);
}

.hall-match-reference-list > .hall-match-room-plaque {
  grid-column: 1;
  grid-row: 1;
  min-height: 51px;
  grid-template-columns: minmax(190px, 1fr) auto;
  gap: 16px;
  padding: 6px 24px;
  background:
    linear-gradient(90deg, rgb(2 10 7 / 91%), rgb(2 10 7 / 72%) 48%, rgb(2 10 7 / 91%)),
    var(--hall-match-room) center 58% / cover no-repeat;
  border-bottom: 1px solid rgb(221 179 82 / 29%);
  box-shadow: inset 0 -17px 27px rgb(0 0 0 / 32%);
}

.hall-match-reference-list .hall-match-room-plaque__number {
  display: none;
}

.hall-match-reference-list .hall-match-room-plaque__identity {
  display: block;
  min-width: 0;
  text-align: center;
}

.hall-match-reference-list .hall-match-room-plaque__identity small {
  display: none;
}

.hall-match-reference-list .hall-match-room-plaque__identity strong {
  display: block;
  overflow: hidden;
  color: #eee0bf;
  font: 600 clamp(18px, 1.8vw, 24px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hall-match-reference-list .hall-match-room-plaque__economy {
  display: grid;
  grid-template-columns: auto 1px auto;
  gap: 12px;
  padding: 3px 8px;
  background: rgb(2 9 6 / 56%);
  border-color: rgb(214 172 75 / 15%);
}

.hall-match-reference-list .hall-match-room-plaque__economy > span {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 5px;
}

.hall-match-reference-list .hall-match-room-plaque__economy small {
  font-size: 7px;
  letter-spacing: .14em;
}

.hall-match-reference-list .hall-match-room-plaque__economy strong {
  gap: 4px;
  color: #ebc65f;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.hall-match-reference-list .hall-match-room-plaque .hall-currency-art {
  width: 18px;
  height: 18px;
}

.hall-match-reference-list > .hall-match-setup__body {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 9px;
  padding: 12px 27px 10px;
  overflow: visible;
}

.hall-match-reference-list .hall-match-setup__heading {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
  align-items: center;
  gap: 17px;
}

.hall-match-reference-list .hall-match-setup__heading::before,
.hall-match-reference-list .hall-match-setup__heading > span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(213 171 77 / 49%));
}

.hall-match-reference-list .hall-match-setup__heading > span {
  background: linear-gradient(90deg, rgb(213 171 77 / 49%), transparent);
}

.hall-match-reference-list .hall-match-setup__heading h1 {
  margin: 0;
  color: #f0dfb6;
  font: 560 clamp(24px, 2vw, 31px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .075em;
  text-shadow: 0 3px 11px #000;
  text-transform: uppercase;
}

.hall-match-reference-list .hall-discipline-fieldset {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
}

.hall-match-reference-list .hall-discipline-fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hall-match-reference-list .hall-choice-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.16fr);
  align-items: start;
  gap: 17px;
}

.hall-match-reference-list .hall-discipline-group {
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hall-match-reference-list .hall-discipline-group > header {
  display: grid;
  min-height: 20px;
  grid-template-columns: minmax(22px, 1fr) auto minmax(22px, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  padding: 0;
  color: #c9a854;
  border: 0;
}

.hall-match-reference-list .hall-discipline-group > header::before,
.hall-match-reference-list .hall-discipline-group > header::after {
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(204 162 68 / 31%));
}

.hall-match-reference-list .hall-discipline-group > header::after {
  background: linear-gradient(90deg, rgb(204 162 68 / 31%), transparent);
}

.hall-match-reference-list .hall-discipline-group > header strong {
  overflow: hidden;
  color: #c5a454;
  font: 700 9px/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .16em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hall-match-reference-list .hall-discipline-list {
  display: grid;
  gap: 5px;
}

.hall-match-reference-list .hall-choice {
  display: grid;
  min-width: 0;
  min-height: 36px;
  grid-template-columns: 28px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  overflow: hidden;
  color: #aaa9a2;
  text-align: start;
  background: rgb(10 20 16 / 76%);
  border: 1px solid rgb(195 159 76 / 20%);
  border-radius: 3px;
  box-shadow: inset 0 1px rgb(255 244 213 / 2%);
  transition: color 140ms ease-out, border-color 150ms ease-out, background 160ms ease-out, transform 120ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .hall-match-reference-list .hall-choice:hover {
    color: #eee5d1;
    background: rgb(16 31 24 / 88%);
    border-color: rgb(222 181 83 / 47%);
  }
}

.hall-match-reference-list .hall-choice:active {
  transform: translateY(1px);
}

.hall-match-reference-list .hall-choice.is-selected {
  color: #f8edd3;
  background: linear-gradient(90deg, rgb(16 52 37 / 92%), rgb(8 29 21 / 91%));
  border-color: #cda23f;
  box-shadow: inset 2px 0 #d8af50, inset 0 0 14px rgb(37 122 78 / 11%);
}

.hall-match-reference-list .hall-choice span {
  overflow: hidden;
  font: 520 10px/1.12 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-match-reference-list .hall-choice > em {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: transparent;
  font-size: 9px;
  font-style: normal;
  background: rgb(2 9 6 / 69%);
  border: 1px solid rgb(208 169 79 / 28%);
  border-radius: 50%;
  box-shadow: none;
}

.hall-match-reference-list .hall-choice.is-selected > em {
  color: #18311f;
  background: linear-gradient(180deg, #efd078, #b97e28);
  border-color: #f5dda0;
  box-shadow: 0 2px 6px rgb(0 0 0 / 42%);
}

.hall-match-reference-list .hall-discipline-mark {
  width: 26px;
  height: 26px;
  transform: scale(.82);
  transform-origin: center;
}

.hall-match-reference-list .hall-option-grid {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  padding: 1px 0 0;
}

.hall-match-reference-list .hall-option-grid fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.hall-match-reference-list .hall-option-grid legend {
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  color: #c5a454;
  font: 700 9px/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
}

.hall-match-reference-list .hall-segment-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hall-match-reference-list .hall-segment {
  display: grid;
  min-width: 0;
  min-height: 31px;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  color: #94978f;
  font: 520 10px/1.08 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
  text-align: start;
  background: rgb(9 19 15 / 76%);
  border: 1px solid rgb(196 160 76 / 19%);
  border-radius: 3px;
  box-shadow: none;
}

.hall-match-reference-list .hall-segment:first-child,
.hall-match-reference-list .hall-segment:last-child {
  border-radius: 3px;
}

.hall-match-reference-list .hall-segment > span {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-match-reference-list .hall-segment > em {
  display: grid;
  width: 15px;
  height: 15px;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  color: transparent;
  font-size: 8px;
  font-style: normal;
  background: rgb(2 9 6 / 70%);
  border: 1px solid rgb(208 169 79 / 27%);
  border-radius: 50%;
}

.hall-match-reference-list .hall-segment.is-selected {
  color: #efdfb8;
  background: linear-gradient(90deg, rgb(15 48 35 / 88%), rgb(8 27 20 / 90%));
  border-color: #be9130;
  box-shadow: inset 2px 0 #d0a54a;
}

.hall-match-reference-list .hall-segment.is-selected > em {
  color: #17301f;
  background: linear-gradient(180deg, #efd078, #b77d28);
  border-color: #f1d58e;
}

.hall-match-reference-list > .hall-search-footer {
  position: static;
  right: auto;
  bottom: auto;
  display: grid;
  min-width: 0;
  width: 100%;
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: minmax(185px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 7px 27px 10px;
  background: linear-gradient(180deg, rgb(4 14 10 / 76%), rgb(2 9 6 / 96%));
  border-top: 1px solid rgb(207 166 74 / 17%);
  box-shadow: none;
}

.hall-match-reference-list .hall-search-footer p {
  display: block;
  justify-self: start;
  margin: 0;
  color: #9f947a;
  font: 700 9px/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  text-align: start;
  text-transform: uppercase;
}

.hall-match-reference-list .hall-match-back {
  width: auto;
  min-height: 38px;
  justify-self: center;
  padding: 4px 18px;
  color: #c5b68e;
  font-size: 10px;
  letter-spacing: .13em;
  background: transparent;
  border: 0;
}

.hall-match-reference-list .hall-match-back:hover {
  color: #f2d88d;
  background: transparent;
}

.hall-match-reference-list .hall-play-button {
  width: min(100%, 254px);
  min-height: 46px;
  justify-self: end;
  margin: 0;
  color: #1c1406;
  font: 800 clamp(18px, 1.55vw, 23px)/1 "KottCondensed", "Arial Narrow", sans-serif;
  letter-spacing: .07em;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 23%), transparent 33%),
    linear-gradient(180deg, #efd079, #b77a26);
  border: 1px solid #f6dda0;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff2b8, 0 8px 19px rgb(0 0 0 / 34%);
}

.hall-match-reference-list button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #07130e, 0 0 0 4px #e7c46e;
}

html[dir="rtl"] .hall-match-reference-list .hall-choice,
html[dir="rtl"] .hall-match-reference-list .hall-segment,
html[dir="rtl"] .hall-match-reference-list .hall-search-footer p {
  text-align: start;
}

@media (max-width: 1040px) and (min-height: 541px) {
  .hall-match-setup.hall-match-reference-list {
    width: min(100%, 930px);
  }

  .hall-match-reference-list > .hall-match-setup__body {
    gap: 7px;
    padding: 10px 20px 8px;
  }

  .hall-match-reference-list .hall-choice-grid {
    gap: 11px;
  }

  .hall-match-reference-list .hall-discipline-list {
    gap: 4px;
  }

  .hall-match-reference-list .hall-choice {
    min-height: 34px;
    grid-template-columns: 25px minmax(0, 1fr) 16px;
    gap: 5px;
    padding-inline: 5px;
  }

  .hall-match-reference-list .hall-choice span {
    font-size: 9px;
  }

  .hall-match-reference-list .hall-option-grid {
    gap: 25px;
  }

  .hall-match-reference-list > .hall-search-footer {
    padding-inline: 20px;
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  .hall-room:has(.hall-match-reference-list) > .hall-stage {
    padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  .hall-match-setup.hall-match-reference-list {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .hall-match-reference-list > .hall-match-room-plaque {
    min-height: 45px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 4px 8px;
  }

  .hall-match-reference-list .hall-match-room-plaque__identity {
    text-align: start;
  }

  .hall-match-reference-list .hall-match-room-plaque__identity strong {
    font-size: 16px;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy {
    gap: 6px;
    padding: 2px 4px;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy small {
    display: none;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy strong {
    font-size: 11px;
  }

  .hall-match-reference-list .hall-match-room-plaque .hall-currency-art {
    width: 15px;
    height: 15px;
  }

  .hall-match-reference-list > .hall-match-setup__body {
    display: block;
    align-content: start;
    padding: 10px 10px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(204 161 67 / 48%) rgb(2 9 6 / 52%);
    scrollbar-width: thin;
  }

  .hall-match-reference-list .hall-match-setup__heading {
    gap: 9px;
    margin-bottom: 10px;
  }

  .hall-match-reference-list .hall-match-setup__heading h1 {
    font-size: clamp(21px, 6vw, 27px);
  }

  .hall-match-reference-list .hall-choice-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .hall-match-reference-list .hall-discipline-group > header strong {
    font-size: 10px;
  }

  .hall-match-reference-list .hall-discipline-list {
    gap: 5px;
  }

  .hall-match-reference-list .hall-choice {
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 8px;
    padding: 6px 9px;
  }

  .hall-match-reference-list .hall-choice span {
    font-size: 11px;
  }

  .hall-match-reference-list .hall-choice > em {
    width: 19px;
    height: 19px;
  }

  .hall-match-reference-list .hall-discipline-mark {
    width: 32px;
    height: 32px;
    transform: none;
  }

  .hall-match-reference-list .hall-option-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
  }

  .hall-match-reference-list .hall-segment {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 20px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .hall-match-reference-list .hall-segment > em {
    width: 19px;
    height: 19px;
  }

  .hall-match-reference-list > .hall-search-footer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    padding: 7px 10px max(8px, env(safe-area-inset-bottom));
  }

  .hall-match-reference-list .hall-search-footer p {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    font-size: 8px;
  }

  .hall-match-reference-list .hall-match-back {
    grid-column: 1;
    grid-row: 2;
    min-width: 88px;
    min-height: 48px;
  }

  .hall-match-reference-list .hall-play-button {
    width: 100%;
    min-height: 50px;
    grid-column: 2;
    grid-row: 2;
    font-size: clamp(18px, 5vw, 23px);
  }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .hall-room:has(.hall-match-reference-list) > .hall-stage {
    padding: 4px max(7px, env(safe-area-inset-right)) 4px max(7px, env(safe-area-inset-left));
  }

  .hall-match-setup.hall-match-reference-list {
    width: 100%;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 35px minmax(0, 1fr) 37px;
  }

  .hall-match-reference-list > .hall-match-room-plaque {
    min-height: 35px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 2px 8px;
  }

  .hall-match-reference-list .hall-match-room-plaque__identity strong {
    font-size: 15px;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy {
    gap: 7px;
    padding: 1px 4px;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy small {
    display: none;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy strong {
    font-size: 11px;
  }

  .hall-match-reference-list .hall-match-room-plaque .hall-currency-art {
    width: 14px;
    height: 14px;
  }

  .hall-match-reference-list > .hall-match-setup__body {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 21px minmax(0, 1fr) 38px;
    gap: 3px;
    padding: 3px 8px;
  }

  .hall-match-reference-list .hall-match-setup__heading {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    gap: 9px;
  }

  .hall-match-reference-list .hall-match-setup__heading h1 {
    font-size: 17px;
  }

  .hall-match-reference-list .hall-discipline-fieldset {
    grid-column: 1;
    grid-row: 2;
  }

  .hall-match-reference-list .hall-choice-grid {
    grid-template-columns: 1fr .96fr 1.18fr;
    gap: 8px;
  }

  .hall-match-reference-list .hall-discipline-group > header {
    min-height: 11px;
    gap: 4px;
    margin-bottom: 2px;
  }

  .hall-match-reference-list .hall-discipline-group > header strong {
    font-size: 7px;
    letter-spacing: .12em;
  }

  .hall-match-reference-list .hall-discipline-list {
    gap: 2px;
  }

  .hall-match-reference-list .hall-choice {
    min-height: 18px;
    grid-template-columns: 18px minmax(0, 1fr) 12px;
    gap: 3px;
    padding: 0 4px;
  }

  .hall-match-reference-list .hall-choice span {
    font-size: 7px;
  }

  .hall-match-reference-list .hall-choice > em {
    width: 11px;
    height: 11px;
    font-size: 6px;
  }

  .hall-match-reference-list .hall-discipline-mark {
    width: 18px;
    height: 18px;
    transform: scale(.55);
  }

  .hall-match-reference-list .hall-option-grid {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 0;
  }

  .hall-match-reference-list .hall-option-grid legend {
    margin-bottom: 2px;
    font-size: 6px;
  }

  .hall-match-reference-list .hall-segment-row {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }

  .hall-match-reference-list .hall-segment {
    min-height: 25px;
    grid-template-columns: minmax(0, 1fr) 11px;
    gap: 3px;
    padding: 1px 4px;
    font-size: 7px;
  }

  .hall-match-reference-list .hall-segment > em {
    width: 10px;
    height: 10px;
    font-size: 5px;
  }

  .hall-match-reference-list > .hall-search-footer {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(120px, 1fr) auto minmax(180px, 1fr);
    gap: 8px;
    padding: 2px 8px 3px;
  }

  .hall-match-reference-list .hall-search-footer p {
    font-size: 7px;
  }

  .hall-match-reference-list .hall-match-back {
    display: inline-grid;
    min-height: 32px;
    place-items: center;
    padding: 2px 12px;
    font-size: 8px;
  }

  .hall-match-reference-list > .hall-search-footer .hall-play-button {
    width: min(100%, 220px);
    min-height: 32px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-match-reference-list,
  .hall-match-reference-list .hall-choice,
  .hall-match-reference-list .hall-segment,
  .hall-match-reference-list .hall-play-button {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Exact calibration to the owner-supplied 1280 × 720 matchmaking master. */
.hall-match-reference-list .hall-choice {
  grid-template-columns: 30px minmax(0, 1fr) 18px;
}

.hall-match-reference-list .hall-choice > span:not(.hall-discipline-mark) {
  text-transform: uppercase;
}

.hall-match-reference-list .hall-discipline-mark {
  width: 26px;
  height: 26px;
  transform: none;
}

.hall-match-reference-list .hall-discipline-mark-pool {
  width: 23px;
  height: 23px;
  justify-self: center;
}

.hall-match-reference-list .hall-discipline-mark-pool::before {
  inset: 5px;
}

.hall-match-reference-list .hall-discipline-mark-pool_9 {
  background: linear-gradient(180deg, #c99724 0 34%, #f2ead3 35% 64%, #c99724 65% 100%);
}

.hall-match-reference-list .hall-discipline-mark-pool_10 {
  background: linear-gradient(180deg, #244c99 0 34%, #f2ead3 35% 64%, #244c99 65% 100%);
}

.hall-match-reference-list .hall-discipline-mark-pool_8_german {
  background: #0a1713;
  border-color: #526159;
  box-shadow: inset 0 0 7px rgb(0 0 0 / 54%);
}

.hall-match-reference-list .hall-discipline-mark-pool_8_german::before,
.hall-match-reference-list .hall-discipline-mark-pool_8_german i {
  display: none;
}

.hall-match-reference-list .hall-discipline-mark-snooker,
.hall-match-reference-list .hall-discipline-mark-pyramid {
  position: relative;
  display: block;
  width: 26px;
  height: 24px;
  justify-self: center;
  filter: drop-shadow(0 2px 2px #000);
}

.hall-match-reference-list .hall-discipline-mark-snooker i,
.hall-match-reference-list .hall-discipline-mark-pyramid i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hall-match-reference-list .hall-discipline-mark-snooker i {
  background: radial-gradient(circle at 35% 28%, #ee4f46, #8a160f 76%);
  border: 1px solid #bd5d50;
}

.hall-match-reference-list .hall-discipline-mark-pyramid i {
  background: radial-gradient(circle at 35% 28%, #fffef9, #d8d2c3 72%, #8b8170);
  border: 1px solid #b7ab92;
}

.hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(1),
.hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(1) { top: 0; right: auto; bottom: auto; left: 9px; }
.hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(2),
.hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(2) { top: 7px; right: auto; bottom: auto; left: 5px; }
.hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(3),
.hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(3) { top: 7px; right: auto; bottom: auto; left: 13px; }
.hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(4),
.hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(4) { top: 14px; right: auto; bottom: auto; left: 1px; }
.hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(5),
.hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(5) { top: 14px; right: auto; bottom: auto; left: 9px; }
.hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(6),
.hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(6) { top: 14px; right: auto; bottom: auto; left: 17px; }

.hall-match-reference-list .hall-choice.is-selected > em,
.hall-match-reference-list .hall-segment.is-selected > em {
  color: #edc964;
  background: #0a2118;
  border-color: #d4a747;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 58%);
}

@media (min-width: 1100px) and (min-height: 650px) {
  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-app > [data-hall-app-root] {
    grid-template-rows: 73px minmax(0, 1fr) 75px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-topbar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 7px 10px 6px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-room:has(.hall-match-reference-list) > .hall-stage {
    padding: 16px 0 15px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-profile {
    width: max-content;
    min-width: 0;
    height: 58px;
    justify-self: start;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-avatar-frame {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-profile-copy {
    gap: 0;
    margin-inline-start: 8px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-profile-copy > strong {
    font-size: 18px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-rank-row,
  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-xp-row {
    display: none;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-brand {
    display: grid;
    width: min(100%, 220px);
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-brand > svg,
  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-brand > span {
    display: none;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-brand > strong {
    font-size: 19px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-toolbar {
    gap: 8px;
    justify-self: end;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-currency {
    gap: 5px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-currency + .hall-currency {
    padding-inline-start: 8px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-currency .hall-currency-art {
    width: 28px;
    height: 28px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-currency strong {
    font-size: 16px;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-currency > span,
  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-notifications-button {
    display: none;
  }

  body[data-view="lobby"]:has(.hall-match-reference-list) .hall-language {
    padding-inline: 8px 20px;
  }

  .hall-match-setup.hall-match-reference-list {
    width: min(71.25vw, 1080px);
    height: auto;
    aspect-ratio: 912 / 542;
    grid-template-rows: 15.13% minmax(0, 1fr) 10.15%;
  }

  .hall-match-reference-list > .hall-match-room-plaque {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0;
    padding: 7px 12px;
  }

  .hall-match-reference-list .hall-match-room-plaque__identity strong {
    font-size: clamp(18px, 1.55vw, 23px);
  }

  .hall-match-reference-list .hall-match-room-plaque__economy {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 10px;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy > span {
    justify-content: center;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy small {
    font-size: 9px;
  }

  .hall-match-reference-list .hall-match-room-plaque__economy strong {
    font-size: clamp(15px, 1.3vw, 19px);
  }

  .hall-match-reference-list > .hall-match-setup__body {
    align-content: start;
    gap: 12px;
    padding: 20px 42px 0 28px;
  }

  .hall-match-reference-list .hall-choice-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.32fr);
    gap: 32px;
  }

  .hall-match-reference-list .hall-discipline-list {
    gap: 4px;
  }

  .hall-match-reference-list .hall-choice {
    min-height: 37px;
    gap: 13px;
    padding: 3px 9px 3px 13px;
  }

  .hall-match-reference-list .hall-choice span {
    font-size: 10px;
  }

  .hall-match-reference-list .hall-option-grid {
    grid-template-columns: minmax(0, .677fr) minmax(0, 1fr);
    gap: 8.55%;
    margin-top: 7px;
  }

  .hall-match-reference-list .hall-option-grid fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  .hall-match-reference-list .hall-option-grid legend,
  .hall-match-reference-list .hall-segment-row {
    width: 100%;
    grid-column: 1;
  }

  .hall-match-reference-list .hall-option-grid legend {
    margin-bottom: 14px;
  }

  .hall-match-reference-list .hall-segment {
    min-height: 32px;
  }

  .hall-match-reference-list > .hall-search-footer {
    padding: 5px 42px 7px 28px;
  }

  .hall-match-reference-list .hall-search-footer p {
    font-size: 10px;
  }

  .hall-match-reference-list .hall-match-back {
    min-height: 38px;
    font-size: 11px;
  }

  .hall-match-reference-list > .hall-search-footer .hall-play-button {
    width: min(100%, 256px);
    min-height: 38px;
    font-size: 20px;
  }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .hall-match-setup.hall-match-reference-list {
    width: min(100%, 780px);
  }

  .hall-match-reference-list .hall-discipline-mark {
    width: 18px;
    height: 18px;
  }

  .hall-match-reference-list .hall-discipline-mark-pool {
    width: 16px;
    height: 16px;
  }

  .hall-match-reference-list .hall-discipline-mark-pool::before {
    inset: 3px;
  }

  .hall-match-reference-list .hall-discipline-mark-pool i {
    font-size: 6px;
  }

  .hall-match-reference-list .hall-discipline-mark-snooker,
  .hall-match-reference-list .hall-discipline-mark-pyramid {
    width: 18px;
    height: 17px;
  }

  .hall-match-reference-list .hall-discipline-mark-snooker i,
  .hall-match-reference-list .hall-discipline-mark-pyramid i {
    width: 6px;
    height: 6px;
  }

  .hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(1),
  .hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(1) { top: 0; left: 6px; }
  .hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(2),
  .hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(2) { top: 5px; left: 3px; }
  .hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(3),
  .hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(3) { top: 5px; left: 9px; }
  .hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(4),
  .hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(4) { top: 10px; left: 0; }
  .hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(5),
  .hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(5) { top: 10px; left: 6px; }
  .hall-match-reference-list .hall-discipline-mark-snooker i:nth-child(6),
  .hall-match-reference-list .hall-discipline-mark-pyramid i:nth-child(6) { top: 10px; left: 12px; }
}

/* Native content preparation — deliberately restrained Hall materials. */
.native-cache {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  box-sizing: border-box;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background:
    linear-gradient(90deg, rgba(4, 8, 6, 0.98), rgba(8, 14, 10, 0.94) 50%, rgba(4, 8, 6, 0.98)),
    radial-gradient(circle at 50% 38%, rgba(161, 126, 52, 0.16), transparent 42%),
    #030605;
}

.native-cache[hidden] {
  display: none;
}

.native-cache__frame {
  position: relative;
  width: min(560px, 100%);
  margin-block: auto;
  box-sizing: border-box;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(203, 169, 91, 0.58);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 32%),
    linear-gradient(180deg, rgba(15, 24, 19, 0.98), rgba(6, 11, 8, 0.99));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.native-cache__frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(203, 169, 91, 0.13);
}

.native-cache__mark {
  display: block;
  width: clamp(72px, 18vw, 104px);
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.54));
}

.native-cache__eyebrow {
  margin: 0 0 10px;
  color: #c9a75a;
  font: 700 12px/1.2 "Roboto Condensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.28em;
}

.native-cache h1 {
  margin: 0;
  color: #f4eddb;
  font: 700 clamp(30px, 7vw, 46px)/0.98 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.native-cache__stage {
  min-height: 1.4em;
  margin: 28px 0 12px;
  color: rgba(244, 237, 219, 0.84);
  font: 600 16px/1.4 "Roboto Condensed", sans-serif;
}

.native-cache__meter {
  position: relative;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(201, 167, 90, 0.4);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
}

.native-cache__meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #8c6428, #d7b966 58%, #f0dc9d);
  box-shadow: 0 0 16px rgba(215, 185, 102, 0.36);
  transition: width 180ms ease-out;
}

.native-cache__detail {
  margin: 11px 0 0;
  color: #d7bd7a;
  font: 650 13px/1.35 ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.native-cache__note {
  max-width: 420px;
  margin: 22px auto 0;
  color: rgba(232, 228, 214, 0.56);
  font: 400 13px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.native-cache__start,
.native-cache__retry {
  display: none;
  min-height: 48px;
  margin: 22px auto 0;
  padding: 0 26px;
  border: 1px solid #d6b764;
  border-radius: 4px;
  background: linear-gradient(180deg, #d7b963, #9e742c);
  color: #07100b;
  font: 750 15px/1 "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.native-cache__start.is-visible,
.native-cache__retry.is-visible {
  display: block;
}

.native-cache.has-error .native-cache__meter span {
  background: #8b2f2f;
}

@media (max-width: 420px) and (orientation: portrait) {
  .native-cache {
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  }

  .native-cache__frame {
    padding: 30px 22px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .native-cache {
    padding-block: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom));
  }

  .native-cache__frame {
    width: min(760px, 100%);
    padding: 18px 32px;
  }

  .native-cache__mark {
    width: 56px;
    margin-bottom: 8px;
  }

  .native-cache h1 {
    font-size: 25px;
  }

  .native-cache__stage {
    margin-top: 13px;
  }

  .native-cache__note {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .native-cache__meter span {
    transition: none;
  }
}

/* Owner-approved Inventory v6/v7: the equipped loadout is one premium surface
   above a clearly separate horizontal inventory. Mobile landscape keeps this
   exact hierarchy in a vertically scrollable page. */
.progression-page--inventory {
  --inventory-panel: #07110d;
  --inventory-gold: #dcae4d;
  --inventory-gold-bright: #ffd67b;
  --inventory-line: rgba(220, 174, 77, .56);
  display: grid;
  align-content: start;
  gap: clamp(16px, 1.65vw, 24px);
  padding: clamp(14px, 1.6vw, 24px) clamp(18px, 2vw, 32px) 28px;
  background:
    radial-gradient(circle at 50% -20%, rgba(26, 75, 52, .24), transparent 38%),
    linear-gradient(180deg, #050b09, #020605 72%);
  scrollbar-color: #b88735 #101611;
}

.inventory-equipped-panel,
.inventory-owned-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--inventory-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 56% 24%, rgba(42, 112, 77, .18), transparent 48%),
    linear-gradient(145deg, rgba(8, 31, 22, .98), rgba(3, 12, 9, .99));
  box-shadow:
    0 22px 48px rgba(0, 0, 0, .46),
    inset 0 0 0 4px rgba(2, 7, 5, .86),
    inset 0 0 0 5px rgba(225, 179, 77, .14),
    inset 0 1px rgba(255, 235, 180, .11);
}

.inventory-equipped-panel::before,
.inventory-owned-panel::before {
  position: absolute;
  inset: 6px;
  z-index: 0;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(238, 196, 100, .13);
  border-radius: 11px;
}

.inventory-equipped-panel > *,
.inventory-owned-panel > * { position: relative; z-index: 1; }

.inventory-equipped-panel__head {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(224, 177, 71, .2);
  background: linear-gradient(180deg, rgba(3, 12, 9, .96), rgba(4, 16, 11, .82));
}

.inventory-equipped-panel__head > div,
.inventory-owned-panel__head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
}

.inventory-equipped-panel__head h1,
.inventory-owned-panel__head h2 {
  margin: 0;
  color: var(--inventory-gold-bright);
  font-family: var(--font-ui);
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 720;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-equipped-panel__head > div > span,
.inventory-owned-panel__head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #bda66e;
  border: 1px solid rgba(224, 177, 71, .43);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.inventory-family-tabs,
.inventory-category-tabs {
  display: flex;
  min-width: 0;
  align-items: stretch;
  justify-content: center;
  gap: clamp(18px, 4.4vw, 70px);
}

.inventory-family-tabs button,
.inventory-category-tabs button {
  position: relative;
  min-width: 112px;
  min-height: 48px;
  padding: 0 10px;
  color: #8f8d84;
  background: transparent;
  border: 0;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.inventory-family-tabs button::after,
.inventory-category-tabs button::after {
  position: absolute;
  right: 18%;
  bottom: 1px;
  left: 18%;
  height: 3px;
  content: "";
  background: transparent;
  border-radius: 3px;
}

.inventory-family-tabs button:hover,
.inventory-family-tabs button:focus-visible,
.inventory-category-tabs button:hover,
.inventory-category-tabs button:focus-visible,
.inventory-family-tabs button.is-active,
.inventory-category-tabs button.is-active { color: var(--inventory-gold-bright); }

.inventory-family-tabs button.is-active::after,
.inventory-category-tabs button.is-active::after {
  background: #f2bb4b;
  box-shadow: 0 0 11px rgba(242, 187, 75, .36);
}

.inventory-equipped-cue {
  position: relative;
  display: grid;
  min-height: clamp(132px, 14vw, 172px);
  grid-template-columns: minmax(250px, 27%) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 14px 32px 12px;
  padding: 40px 22px 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(29, 84, 58, .28), transparent 55%),
    rgba(4, 21, 15, .88);
  border: 1px solid rgba(218, 169, 65, .56);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255, 234, 179, .04);
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background 150ms ease-out;
}

.inventory-equipped-cue-slot__label {
  position: absolute;
  top: 10px;
  right: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e1d9c9;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: .05em;
  line-height: 1.15;
  text-transform: uppercase;
}

.inventory-equipped-cue-slot__label strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-equipped-cue-slot__label span {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #efd179;
  border: 1px solid #d9a83f;
  border-radius: 50%;
  font-size: 12px;
}

.inventory-equipped-cue__meta { align-self: start; padding-top: 4px; }

.inventory-equipped-cue__meta > small {
  display: block;
  margin-bottom: 7px;
  color: var(--inventory-gold-bright);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.inventory-equipped-cue__meta > strong {
  display: block;
  overflow: hidden;
  color: #efe7d6;
  font-family: var(--font-ui);
  font-size: clamp(21px, 1.9vw, 31px);
  font-weight: 560;
  letter-spacing: .04em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-equipped-cue__art {
  min-width: 0;
  height: clamp(82px, 8vw, 112px);
  align-self: end;
}

.inventory-equipped-cue__art > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .58));
}

.inventory-equipped-cue__art > .inventory-equipped-cue__full-art {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.inventory-equipped-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 32px 18px;
}

.inventory-service-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 32px 16px;
  color: #aaa18f;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.inventory-service-row button {
  min-height: 34px;
  padding: 0 16px;
  color: #241607;
  background: linear-gradient(180deg, #f4cf75, #bd8228);
  border: 1px solid #f5d88d;
  border-radius: 4px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 7px 16px rgba(0, 0, 0, .32);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.inventory-service-row button:disabled {
  color: #817967;
  background: #121b16;
  border-color: rgba(204, 161, 69, .22);
  box-shadow: none;
  cursor: default;
}

.inventory-equipped-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: clamp(160px, 15vw, 194px);
  grid-template-rows: 30px minmax(76px, 1fr) auto;
  padding: 10px 16px 12px;
  overflow: hidden;
  border: 1px solid rgba(218, 169, 65, .56);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 32%, rgba(29, 84, 58, .28), transparent 55%),
    rgba(4, 21, 15, .88);
  box-shadow: inset 0 1px rgba(255, 234, 179, .04);
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background 150ms ease-out;
}

.inventory-equipped-slot header {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: center;
}

.inventory-equipped-slot header strong {
  overflow: hidden;
  color: #e1d9c9;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: .05em;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-equipped-slot header span {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #efd179;
  border: 1px solid #d9a83f;
  border-radius: 50%;
  font-size: 12px;
}

.inventory-product-art,
.inventory-item-card__art {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
}

.inventory-product-art > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .62));
  transform: scale(var(--inventory-art-scale, .88));
  transition: transform 170ms ease-out, filter 170ms ease-out;
}

.inventory-product-art--tip { --inventory-art-scale: .78; }
.inventory-product-art--extension { --inventory-art-scale: .9; }
.inventory-product-art--glove { --inventory-art-scale: .93; }
.inventory-product-art--chalk { --inventory-art-scale: .76; }
.inventory-product-art--hint { --inventory-art-scale: .96; }

.inventory-condition {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #d9d0bd;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
}

.inventory-condition > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-condition > span:first-child b { color: #f2dec1; font-weight: 580; }
.inventory-condition > span:first-child i { padding: 0 5px; color: #8c8472; font-style: normal; }

.inventory-condition__rail {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #17231c;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
}

.inventory-condition__rail > i {
  display: block;
  width: calc(var(--condition) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #d48b28, #ffd268);
  box-shadow: 0 0 8px rgba(247, 185, 72, .3);
}

.inventory-condition small {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 8;
  padding: 7px 9px;
  opacity: 0;
  pointer-events: none;
  color: #f6e6bd;
  background: #030806;
  border: 1px solid rgba(228, 180, 74, .55);
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
  white-space: nowrap;
  transform: translateY(4px);
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}

:is(.inventory-equipped-slot, .inventory-item-card, .inventory-equipped-cue):is(:hover, :focus-visible) .inventory-condition small {
  opacity: 1;
  transform: translateY(0);
}

.inventory-equipped-slot.is-drop-target,
.inventory-equipped-cue.is-drop-target {
  border-color: #ffd46d;
  background: rgba(22, 75, 50, .9);
  box-shadow: 0 0 0 2px rgba(255, 207, 99, .24), 0 0 28px rgba(209, 151, 43, .32);
}

.inventory-equipped-slot.is-drop-invalid,
.inventory-equipped-cue.is-drop-invalid { border-color: rgba(122, 64, 43, .72); }

.inventory-loadout-jump {
  position: sticky;
  top: -1px;
  z-index: 14;
  display: grid;
  width: 100%;
  min-height: 34px;
  grid-template-columns: 1fr auto 1fr;
  place-items: center;
  padding: 0;
  color: #a69d8b;
  background: rgba(3, 9, 7, .94);
  border: 0;
  border-block: 1px solid rgba(218, 169, 65, .16);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.inventory-loadout-jump span {
  grid-column: 2;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inventory-loadout-jump i {
  grid-column: 3;
  justify-self: start;
  margin-inline-start: 13px;
  color: var(--inventory-gold-bright);
  font-size: 19px;
  font-style: normal;
}

.inventory-owned-panel { padding-bottom: 14px; background: linear-gradient(160deg, rgba(4, 15, 11, .98), rgba(2, 8, 6, .99)); }
.inventory-owned-panel__head { min-height: 54px; padding: 0 28px; }
.inventory-owned-panel__head h2 { color: #eee5d2; }
.inventory-owned-panel__head > span { padding: 0; border: 0; color: #908b7f; }

.inventory-category-tabs {
  justify-content: center;
  gap: clamp(10px, 3vw, 46px);
  padding: 0 26px 4px;
  border-bottom: 1px solid rgba(218, 169, 65, .18);
}

.inventory-category-tabs button { min-width: 76px; min-height: 42px; font-size: 13px; }
.inventory-carousel-shell { position: relative; min-width: 0; padding: 12px 30px 2px; }

.inventory-carousel {
  display: flex;
  min-width: 0;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}

.inventory-carousel::-webkit-scrollbar { display: none; }

.inventory-item-card {
  position: relative;
  display: grid;
  min-width: clamp(210px, 15.8vw, 286px);
  min-height: clamp(224px, 17vw, 286px);
  flex: 0 0 clamp(210px, 15.8vw, 286px);
  grid-template-rows: minmax(108px, 1fr) auto auto;
  gap: 8px;
  padding: 10px 14px 13px;
  overflow: hidden;
  color: #e6ddca;
  background:
    radial-gradient(circle at 50% 22%, rgba(32, 69, 51, .28), transparent 52%),
    #07110d;
  border: 1px solid rgba(208, 157, 54, .42);
  border-radius: 8px;
  outline: none;
  scroll-snap-align: start;
  cursor: grab;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 120ms ease-out;
}

.inventory-item-card:hover,
.inventory-item-card:focus-visible,
.inventory-item-card.is-equipped {
  border-color: #f2bd50;
  box-shadow: 0 0 0 1px rgba(255, 215, 119, .26), 0 0 20px rgba(216, 155, 39, .2);
}

.inventory-item-card:active { cursor: grabbing; transform: translateY(1px); }
.inventory-item-card.is-dragging { opacity: .44; }
.inventory-item-card--utility { cursor: default; grid-template-rows: minmax(108px, 1fr) auto; }
.inventory-item-card--utility:active { cursor: default; transform: none; }
.inventory-utility-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #d9b55f;
  background: rgba(3, 12, 9, .82);
  border: 1px solid rgba(220, 174, 77, .5);
  border-radius: 50%;
  font-size: 12px;
}
.inventory-item-card__art { min-height: 108px; margin: -10px -14px 0; }
.inventory-item-card__art--cue { padding: 12px 8px 4px; }

.inventory-item-card__art--cue img {
  width: 145%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .62));
}

.inventory-item-card__copy { display: grid; gap: 5px; min-width: 0; }

.inventory-item-card__copy strong {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #e8deca;
  font-size: 14px;
  font-weight: 510;
  letter-spacing: .025em;
  line-height: 1.24;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inventory-item-card__copy span {
  color: #aca696;
  font-size: 11px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.inventory-item-card__drag {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 4;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  overflow: hidden;
  opacity: 0;
  color: #efbd55;
  background: rgba(5, 14, 10, .91);
  border: 1px solid rgba(225, 172, 65, .52);
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: .05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -5px);
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}

.inventory-item-card:is(:hover, :focus-visible) .inventory-item-card__drag { opacity: 1; transform: translate(-50%, 0); }

.inventory-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 7;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--inventory-gold-bright);
  background: #06100c;
  border: 1px solid #bf8932;
  border-radius: 50%;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .55);
  font: 300 33px/1 sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
}

.inventory-carousel-arrow.is-previous { left: 7px; }
.inventory-carousel-arrow.is-next { right: 7px; }
.inventory-carousel-arrow:hover,
.inventory-carousel-arrow:focus-visible { color: #fff0bd; border-color: #f0be56; }

.inventory-carousel-range {
  display: block;
  width: min(72%, 720px);
  height: 18px;
  margin: 0 auto;
  appearance: none;
  accent-color: #c89235;
  background: transparent;
  cursor: ew-resize;
}

.inventory-carousel-range::-webkit-slider-runnable-track {
  height: 5px;
  background: #17201b;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .75);
}

.inventory-carousel-range::-webkit-slider-thumb {
  width: 34px;
  height: 9px;
  margin-top: -2px;
  appearance: none;
  background: linear-gradient(90deg, #9e6a24, #efbe58);
  border: 0;
  border-radius: 8px;
}

.inventory-carousel-range:disabled { opacity: .22; }

.inventory-cue-fallback { position: relative; display: block; width: 94%; height: 34px; }
.inventory-cue-fallback :is(i, b, em) {
  position: absolute;
  top: 50%;
  display: block;
  height: 9px;
  border-radius: 5px;
  transform: translateY(-50%);
}

.inventory-cue-fallback i { left: 1%; width: 66%; background: linear-gradient(90deg, #e7d2a1, #b38a52); }
.inventory-cue-fallback b { right: 4%; width: 32%; height: 13px; background: linear-gradient(90deg, #20130d, #966d35, #100c09); }
.inventory-cue-fallback em { right: 35%; width: 5%; height: 14px; background: #d6a642; }
.inventory-cue-fallback--snooker i { background: linear-gradient(90deg, #eee1ba, #8d744e); }
.inventory-cue-fallback--pyramid i { background: linear-gradient(90deg, #cfaa69, #5f3923); }

.inventory-drag-ghost {
  position: fixed;
  top: -54px;
  left: -54px;
  z-index: 180;
  width: 108px;
  height: 108px;
  overflow: hidden;
  pointer-events: none;
  opacity: .93;
  background: #07110d;
  border: 1px solid #e0aa42;
  border-radius: 10px;
  box-shadow: 0 15px 36px rgba(0, 0, 0, .72), 0 0 0 2px rgba(239, 188, 82, .17);
  will-change: transform;
}

.inventory-drag-ghost img,
.inventory-drag-ghost svg { width: 100%; height: 100%; object-fit: contain; }
[dir="rtl"] .inventory-equipped-slot header span { right: auto; left: 9px; }
[dir="rtl"] .inventory-equipped-cue-slot__label span { right: auto; left: 0; }
[dir="rtl"] .inventory-carousel-arrow.is-previous { right: 7px; left: auto; }
[dir="rtl"] .inventory-carousel-arrow.is-next { right: auto; left: 7px; }

@media (max-width: 1040px) and (orientation: portrait) {
  .inventory-equipped-panel__head { grid-template-columns: 1fr; gap: 4px; padding-block: 10px; }
  .inventory-equipped-panel__head > div { justify-content: center; }
  .inventory-family-tabs { width: 100%; }
  .inventory-equipped-cue { grid-template-columns: 1fr; }
  .inventory-equipped-cue__meta { text-align: center; }
  .inventory-equipped-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-equipped-slot:last-child { grid-column: 1 / -1; }
  .inventory-category-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  .progression-page--inventory { display: block; padding: 8px 18px 16px; scroll-padding-top: 38px; }
  .inventory-equipped-panel { min-height: 218px; }
  .inventory-equipped-panel__head {
    min-height: 44px;
    grid-template-columns: minmax(250px, .72fr) minmax(380px, 1.28fr);
    gap: 8px;
    padding: 0 18px;
  }

  .inventory-equipped-panel__head h1 { font-size: clamp(16px, 3.2vh, 22px); }
  .inventory-equipped-panel__head > div > span { padding: 5px 8px; font-size: 8px; }
  .inventory-family-tabs { gap: clamp(12px, 4vw, 48px); }
  .inventory-family-tabs button { min-width: 84px; min-height: 38px; font-size: clamp(14px, 3vh, 18px); }
  .inventory-equipped-cue {
    min-height: 67px;
    grid-template-columns: minmax(180px, 25%) minmax(0, 1fr);
    padding: 6px 22px 0;
  }

  .inventory-equipped-cue__meta { padding: 0; }
  .inventory-equipped-cue__meta > small { display: none; }
  .inventory-equipped-cue__meta > strong { font-size: clamp(16px, 3.4vh, 22px); }
  .inventory-equipped-cue__meta .inventory-condition { margin-top: 6px; }
  .inventory-equipped-cue__art { height: 56px; }
  .inventory-equipped-slots { gap: 7px; padding: 0 20px 10px; }
  .inventory-equipped-slot {
    min-height: 96px;
    grid-template-rows: 21px 50px auto;
    padding: 5px 9px 7px;
    border-radius: 7px;
  }

  .inventory-equipped-slot header strong { font-size: clamp(9px, 2vh, 11px); }
  .inventory-equipped-slot header span { top: 5px; right: 5px; width: 17px; height: 17px; font-size: 9px; }
  .inventory-product-art > img { --inventory-art-scale: .84; }
  .inventory-product-art--tip > img,
  .inventory-product-art--chalk > img { --inventory-art-scale: .7; }
  .inventory-product-art--hint > img { --inventory-art-scale: .9; }
  .inventory-condition { gap: 4px; font-size: clamp(8px, 1.72vh, 10px); }
  .inventory-condition__rail { height: 3px; }
  .inventory-condition small { display: none; }
  .inventory-loadout-jump { min-height: 34px; margin: 18px 0 12px; }
  .inventory-owned-panel { min-height: 260px; padding-bottom: 9px; }
  .inventory-owned-panel__head { min-height: 48px; padding: 0 20px; }
  .inventory-owned-panel__head h2 { font-size: clamp(18px, 3.6vh, 24px); }
  .inventory-owned-panel__head > span { font-size: 8px; }
  .inventory-category-tabs {
    justify-content: flex-start;
    gap: clamp(11px, 3vw, 34px);
    padding-inline: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .inventory-category-tabs::-webkit-scrollbar { display: none; }
  .inventory-category-tabs button { min-width: 68px; min-height: 36px; font-size: clamp(10px, 2.25vh, 13px); }
  .inventory-carousel-shell { padding: 9px 31px 0; }
  .inventory-item-card {
    min-width: clamp(190px, 22vw, 250px);
    min-height: 204px;
    flex-basis: clamp(190px, 22vw, 250px);
    grid-template-rows: minmax(92px, 1fr) auto auto;
    gap: 6px;
    padding: 8px 11px 10px;
  }

  .inventory-item-card__art { min-height: 92px; margin: -8px -11px 0; }
  .inventory-item-card__copy strong { min-height: 29px; font-size: 12px; }
  .inventory-item-card__copy span { font-size: 9px; }
  .inventory-item-card__drag { font-size: 8px; }
  .inventory-carousel-arrow { width: 38px; height: 38px; }
  .inventory-carousel-arrow.is-previous { left: 8px; }
  .inventory-carousel-arrow.is-next { right: 8px; }
  .inventory-carousel-range { height: 13px; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .progression-page--inventory { padding-inline: 10px; }
  .inventory-equipped-panel__head { grid-template-columns: minmax(220px, .72fr) minmax(330px, 1.28fr); padding-inline: 12px; }
  .inventory-equipped-panel__head h1 { font-size: 17px; }
  .inventory-equipped-cue { grid-template-columns: minmax(155px, 23%) minmax(0, 1fr); padding-inline: 15px; }
  .inventory-equipped-slots { padding-inline: 12px; }
  .inventory-owned-panel__head,
  .inventory-category-tabs { padding-inline: 16px; }
  .inventory-item-card { min-width: clamp(176px, 22vw, 214px); flex-basis: clamp(176px, 22vw, 214px); }
}

@media (prefers-reduced-motion: reduce) {
  .inventory-carousel,
  .progression-page--inventory,
  .inventory-product-art > img,
  .inventory-item-card,
  .inventory-equipped-slot,
  .inventory-condition small { scroll-behavior: auto; transition-duration: 1ms !important; }
}

/* Live-reference correction: prevent the Hall grid from compressing product
   content, run the equipped cue across the full panel width, and feather the
   temporary product-render backplates into the green card surface. */
.inventory-equipped-panel { min-height: 420px; }
.inventory-owned-panel { min-height: 312px; }

.inventory-equipped-cue {
  min-height: 118px;
  grid-template-columns: minmax(0, 1fr);
  padding: 68px 22px 8px;
}

.inventory-equipped-cue__meta {
  position: absolute;
  top: 38px;
  left: 22px;
  z-index: 2;
  width: min(360px, 31%);
  padding: 0;
}

.inventory-equipped-cue__art {
  display: grid;
  width: 100%;
  height: 74px;
  place-items: end center;
}

.inventory-equipped-slot {
  min-height: 144px;
  grid-template-rows: 28px minmax(68px, 1fr) auto;
}

.inventory-product-art > img {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 63% 54% at 50% 54%, #000 52%, rgba(0, 0, 0, .92) 69%, transparent 100%);
  mask-image: radial-gradient(ellipse 63% 54% at 50% 54%, #000 52%, rgba(0, 0, 0, .92) 69%, transparent 100%);
}

.inventory-product-art--glove > img {
  -webkit-mask-image: none;
  mask-image: none;
}

.inventory-item-card { min-height: 220px; }
.inventory-item-card__art { min-height: 94px; }

.inventory-cue-fallback::before,
.inventory-cue-fallback::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  content: "";
  transform: translateY(-50%);
}

.inventory-cue-fallback::before {
  right: 18%;
  width: 18%;
  height: 13px;
  background:
    linear-gradient(135deg, transparent 0 18%, #d3ac62 19% 26%, #15110e 27% 43%, #e4c078 44% 50%, #1b1510 51% 68%, #c99b4d 69% 76%, transparent 77%);
  border-radius: 4px;
}

.inventory-cue-fallback::after {
  right: 3%;
  width: 2.2%;
  height: 16px;
  background: linear-gradient(90deg, #a9792c, #f0c768, #1a120c);
  border-radius: 3px;
  box-shadow: -8px 0 0 #18120d;
}

@media (min-height: 701px), (min-width: 1401px) {
  .inventory-loadout-jump {
    position: relative;
    min-height: 0;
    height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    backdrop-filter: none;
  }

  .inventory-loadout-jump span { display: none; }
  .inventory-loadout-jump i { grid-column: 2; justify-self: center; margin: 0; transform: rotate(180deg); }
}

@media (min-width: 1041px) and (min-height: 701px) {
  .progression-page--inventory {
    padding-top: 0;
    row-gap: 0;
  }

  .inventory-equipped-cue {
    height: 154px;
    min-height: 154px;
  }

  .inventory-equipped-slot {
    height: 185px;
    min-height: 0;
    grid-template-rows: 28px 112px 21px;
  }

  .inventory-loadout-jump {
    height: 18px;
    min-height: 18px;
  }

  .inventory-owned-panel {
    min-height: 316px;
  }

  .inventory-owned-panel__head {
    border-bottom: 1px solid rgba(218, 169, 65, .18);
  }

  .inventory-category-tabs {
    position: absolute;
    top: 1px;
    right: 24px;
    left: 310px;
    z-index: 3;
    min-height: 53px;
    padding: 0;
    border-bottom: 0;
  }

  .inventory-item-card {
    height: 224px;
    min-height: 0;
    grid-template-rows: 108px 52px 21px;
  }
}

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  .inventory-equipped-panel { min-height: 218px; }
  .inventory-owned-panel { min-height: 260px; }
  .inventory-equipped-cue {
    min-height: 82px;
    grid-template-columns: minmax(180px, 25%) minmax(0, 1fr);
    margin: 8px 20px;
    padding: 30px 14px 4px;
  }

  .inventory-equipped-cue__meta {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .inventory-equipped-cue__art { width: auto; height: 56px; }
  .inventory-equipped-cue-slot__label { top: 4px; }
  .inventory-service-row { min-height: 36px; padding: 0 20px 8px; }
  .inventory-equipped-slot { min-height: 96px; grid-template-rows: 21px 50px auto; }
  .inventory-item-card {
    height: 140px;
    min-height: 140px;
    grid-template-rows: 58px 38px 18px;
    gap: 4px;
    padding: 6px 10px 7px;
  }

  .inventory-item-card__art {
    min-height: 58px;
    margin: -6px -10px 0;
  }

  .inventory-item-card__copy strong { min-height: 24px; font-size: 10px; }
  .inventory-item-card__copy span { font-size: 8px; }
}

@media (orientation: portrait) and (max-width: 1040px) {
  .progression-page--inventory {
    display: block;
  }

  .inventory-equipped-panel {
    min-height: 0;
    height: auto;
  }

  .inventory-equipped-panel__head {
    min-height: 108px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 46px;
    gap: 4px;
    padding: 10px 18px 0;
  }

  .inventory-equipped-panel__head > div {
    justify-content: center;
  }

  .inventory-family-tabs {
    width: 100%;
    gap: 0;
  }

  .inventory-family-tabs button {
    min-width: 0;
    flex: 1 1 0;
    min-height: 44px;
    font-size: clamp(15px, 3.2vw, 18px);
  }

  .inventory-equipped-cue {
    height: 166px;
    min-height: 166px;
    grid-template-columns: minmax(0, 1fr);
    margin: 12px;
    padding: 76px 12px 6px;
  }

  .inventory-equipped-cue__meta {
    top: 40px;
    right: 12px;
    left: 12px;
    width: auto;
    text-align: center;
  }

  .inventory-equipped-cue__art {
    width: 100%;
    height: 72px;
  }

  .inventory-equipped-slots {
    display: flex;
    gap: 8px;
    padding: 0 18px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #b88735 #101611;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }

  .inventory-service-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 14px;
    text-align: center;
  }

  .inventory-loadout-jump {
    position: sticky;
    min-height: 34px;
    height: 34px;
    margin: 8px 0;
    overflow: hidden;
    background: rgba(3, 9, 7, .94);
    border-block: 1px solid rgba(218, 169, 65, .16);
    backdrop-filter: blur(12px);
  }

  .inventory-loadout-jump span {
    display: block;
  }

  .inventory-loadout-jump i {
    grid-column: 3;
    justify-self: start;
    margin-inline-start: 13px;
    transform: none;
  }

  .inventory-equipped-slot,
  .inventory-equipped-slot:last-child {
    min-width: clamp(156px, 42vw, 230px);
    height: 160px;
    min-height: 160px;
    flex: 0 0 clamp(156px, 42vw, 230px);
    grid-template-rows: 26px 88px 21px;
    padding: 10px 12px 12px;
    scroll-snap-align: start;
  }
}

@media (orientation: portrait) and (max-width: 620px) {
  .progression-page--inventory {
    padding-inline: 10px;
  }

  .inventory-equipped-panel__head {
    padding-inline: 12px;
  }

  .inventory-equipped-panel__head > div {
    flex-direction: column;
    gap: 6px;
  }

  .inventory-equipped-panel__head h1 {
    max-width: 100%;
    font-size: clamp(18px, 6.1vw, 23px);
    white-space: normal;
    text-align: center;
  }

  .inventory-equipped-panel__head > div > span {
    padding: 5px 8px;
    font-size: 8px;
  }

  .inventory-equipped-slots {
    padding-inline: 12px;
  }
}

/* V6 permanent tip, glove and extension catalogs: transparent product renders,
   with one visual ladder shared by the three discipline-specific SKU families. */
.commerce-category-tip,
.commerce-category-extension,
.commerce-category-glove {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .58));
}

.commerce-glove-card__art img {
  width: min(88%, 230px);
}

.commerce-category-chalk {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .58));
}

.commerce-category-hint {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .58));
}

@media (max-width: 900px) {
  .commerce-offer-grid[data-commerce-category="hints"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (orientation: portrait) and (max-width: 620px) {
  .commerce-offer-grid[data-commerce-category="hints"] { grid-template-columns: minmax(0, 1fr); }
  .commerce-hint-purchase { grid-template-columns: minmax(0, 1fr); }
  .commerce-hint-option > span small { white-space: normal; }
}

@media (orientation: portrait) and (max-width: 420px) {
  .commerce-offer-card--hints { grid-template-columns: 148px minmax(0, 1fr); }
  .commerce-offer-card--hints .commerce-art--hint img { padding: 2px; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .commerce-offer-grid[data-commerce-category="hints"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commerce-offer-card--hints {
    min-height: 210px;
    align-self: start;
    grid-template-rows: 76px auto auto 44px;
  }
  .commerce-offer-card--hints .commerce-art--hint {
    height: 76px;
    min-height: 76px;
    overflow: hidden;
  }
  .commerce-offer-card--hints .commerce-art--hint img { min-height: 0; padding: 0; }
  .commerce-offer-modal--hints {
    grid-template-rows: auto minmax(0, 1fr) 62px 28px;
  }
  .commerce-offer-modal--hints .commerce-hint-purchase {
    height: 62px;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 7px;
    padding: 6px 10px;
  }
  .commerce-offer-modal--hints .commerce-family-choice { gap: 3px; font-size: 9px; }
  .commerce-offer-modal--hints .commerce-family-choice select { min-height: 38px; }
  .commerce-offer-modal--hints .commerce-checkout-stack { grid-column: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .commerce-offer-modal--hints .commerce-hint-option { min-height: 48px; grid-column: auto; gap: 5px; padding: 5px 7px; }
  .commerce-offer-modal--hints .commerce-hint-option > span b { font-size: 10px; }
  .commerce-offer-modal--hints .commerce-hint-option > span small { font-size: 7px; }
  .commerce-offer-modal--hints .commerce-hint-option > span small i { display: none; }
  .commerce-offer-modal--hints .commerce-hint-option > span small i::after { content: none; }
}

.commerce-tip-family-tabs { margin-bottom: 12px; }

.commerce-tip-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  color: #b9ae93;
}

.commerce-tip-summary b {
  color: #f2cf72;
  font: 700 30px/1 "Oswald", sans-serif;
}

.commerce-tip-summary span {
  font-size: 12px;
  letter-spacing: .035em;
}

.commerce-tip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 18px;
}

.commerce-tip-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 430px;
  grid-template-rows: minmax(190px, 1fr) auto auto auto 48px;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  color: #e7deca;
  background:
    radial-gradient(circle at 50% 24%, rgba(49, 93, 69, .25), transparent 48%),
    linear-gradient(160deg, #0d1c15, #050b08 72%);
  border: 1px solid rgba(205, 159, 61, .32);
  border-radius: 8px;
  box-shadow: inset 0 1px rgba(255, 235, 178, .035), 0 14px 28px rgba(0, 0, 0, .22);
}

.commerce-tip-card.is-owned { border-color: rgba(116, 175, 128, .55); }
.commerce-tip-card.is-equipped { border-color: #e7bc58; box-shadow: 0 0 0 1px rgba(241, 202, 112, .16), 0 16px 34px rgba(0, 0, 0, .3); }

.commerce-tip-card__art {
  display: grid;
  min-height: 190px;
  place-items: center;
  overflow: hidden;
}

.commerce-tip-card__art img {
  display: block;
  width: min(100%, 260px);
  height: 100%;
  max-height: 236px;
  object-fit: contain;
  filter: drop-shadow(0 15px 13px rgba(0, 0, 0, .62));
  transition: transform 170ms ease-out, filter 170ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .commerce-tip-card:hover .commerce-tip-card__art img {
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .68));
    transform: translateY(-2px);
  }
}

.commerce-tip-card__copy { min-width: 0; }
.commerce-tip-card__copy small { color: #bda96f; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.commerce-tip-card__copy h3 { margin: 5px 0 7px; color: #f0e5cc; font: 700 18px/1.08 "Oswald", sans-serif; text-transform: uppercase; }
.commerce-tip-card__copy p { margin: 0; color: rgba(233, 226, 209, .62); font-size: 11px; line-height: 1.4; }

.commerce-tip-card__condition,
.commerce-tip-card__prices {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #918a79;
  font-size: 10px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.commerce-tip-card__condition b { color: #d8cba9; font-variant-numeric: tabular-nums; }
.commerce-tip-card__prices { justify-content: flex-start; min-height: 28px; }
.commerce-tip-card__prices > span { display: inline-flex; align-items: center; gap: 5px; color: #e6cf8a; }
.commerce-tip-card__prices :is(svg, .hall-currency-art) { width: 18px; height: 18px; flex: 0 0 18px; }
.commerce-tip-card__prices i { color: #605a4d; font-style: normal; }
.commerce-tip-card__free { color: #9fc0a8 !important; }

.commerce-tip-card__actions {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.commerce-tip-card__actions button,
.commerce-tip-owned,
.inventory-item-card__store {
  min-width: 0;
  min-height: 48px;
  border: 1px solid #9c722b;
  color: #181105;
  background: linear-gradient(#edd184, #ba8730);
  font: 800 11px/1 "Oswald", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.commerce-tip-card__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.commerce-tip-card__actions button :is(svg, .hall-currency-art) { width: 19px; height: 19px; flex: 0 0 19px; }
.commerce-tip-owned { width: 100%; color: #a8c7b0; border-color: rgba(116, 175, 128, .32); background: #0a1711; cursor: default; }
.commerce-tip-owned span { margin-inline-end: 7px; color: #dcb75c; }

.inventory-item-card.is-catalog-preview {
  height: 280px;
  min-height: 280px;
  grid-template-rows: minmax(108px, 1fr) auto auto 48px;
  cursor: default;
  border-color: rgba(201, 158, 67, .23);
}

.inventory-item-card.is-catalog-preview:active { transform: none; }
.inventory-item-card__store { width: 100%; }

@media (orientation: landscape) and (max-height: 700px) and (max-width: 1400px) {
  .inventory-item-card.is-catalog-preview {
    height: 196px;
    min-height: 196px;
    grid-template-rows: 58px 38px 18px 48px;
  }
}

@media (max-width: 1320px) {
  .commerce-tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .commerce-tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (orientation: portrait) and (max-width: 620px) {
  .commerce-tip-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .commerce-tip-card { min-height: 402px; grid-template-rows: minmax(174px, 1fr) auto auto auto 48px; }
  .commerce-tip-card__art { min-height: 174px; }
  .commerce-tip-card__art img { max-height: 220px; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .commerce-tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .commerce-tip-card { min-height: 360px; grid-template-rows: minmax(130px, 1fr) auto auto auto 48px; padding: 9px; }
  .commerce-tip-card__art { min-height: 130px; }
  .commerce-tip-card__art img { max-height: 158px; }
  .commerce-tip-card__copy h3 { font-size: 15px; }
  .commerce-tip-card__copy p { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-tip-card__art img { transition-duration: 1ms !important; }
}

/* Low-cost gameplay panels keep their authored surfaces without recapturing
   the moving WebGL canvas for backdrop blur each frame. */
[data-kott-performance-ui="true"] :is(.kott-shot-hud-desktop,.kott-shot-hud-mobile,.visualizer-controls,.visualizer-quality,.visualizer-settings-button,.visualizer-engine-status,.visualizer-badge){
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Apple sandbox actions inherit the Hall controls; visible only to test builds. */
.commerce-apple-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px; margin-block-end: 16px; border: 1px solid rgba(194,157,88,.3); border-radius: 4px; background: var(--kott-color-surface-raised); }
.commerce-apple-panel p { margin: 6px 0 0; overflow-wrap: anywhere; }
.commerce-apple-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.commerce-apple-panel button { min-height: 44px; padding: 8px 12px; border: 1px solid rgba(194,157,88,.4); border-radius: 4px; background: var(--kott-color-surface); color: var(--kott-color-gold-bright); font: inherit; cursor: pointer; }
.commerce-apple-panel button:focus-visible { outline: 2px solid #e2c286; outline-offset: 2px; }
.commerce-apple-panel button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 920px) { .commerce-apple-panel { grid-template-columns: minmax(0, 1fr); } }

.commerce-apple-panel button:not(:disabled):hover { border-color: var(--kott-color-gold-bright); }
.commerce-apple-panel button:not(:disabled):active { transform: translateY(1px); }

.commerce-checkout[data-action="commerce-apple-purchase"]:disabled { cursor: not-allowed; opacity: .55; }
.commerce-local-note.commerce-apple-note { font-size: 12px; color: var(--kott-color-ivory, #efe8d7); }

.commerce-offer-modal--apple { grid-template-rows: auto auto; grid-auto-rows: auto; }
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .commerce-offer-modal--apple .commerce-offer-modal__art { min-height: 150px; }
}