@font-face {
  font-family: "Rounds";
  src: url("./assets/Rounds-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Rounds";
  src: url("./assets/Rounds-Black.otf") format("opentype");
  font-display: swap;
  font-weight: 900;
}

:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #aab4dc;
  --navy: #0b0c45;
  --blue: #2576e8;
  --cyan: #38dcff;
  --pink: #d82ec4;
  --violet: #752edc;
  --yellow: #ffea38;
  --green: #4bf2aa;
  --app-viewport-width: 100vw;
  --app-viewport-height: 100vh;
  --app-viewport-left: 0px;
  --app-viewport-top: 0px;
  font-family: "Rounds", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

@supports (height: 100svh) {
  :root { --app-viewport-height: 100svh; }
}

.game-version {
  position: fixed;
  right: 10px;
  bottom: max(5px, env(safe-area-inset-bottom));
  z-index: 30;
  color: rgba(183, 195, 232, 0.38);
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}

body {
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(82, 42, 225, 0.38), transparent 34rem),
    radial-gradient(circle at 85% 70%, rgba(22, 164, 237, 0.22), transparent 34rem),
    linear-gradient(155deg, #171057, #080b42 55%, #08103b);
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button.is-server-pending {
  position: relative;
  color: transparent !important;
  cursor: wait !important;
  pointer-events: none;
}

button.is-server-pending:disabled {
  opacity: 1;
}

button.is-server-pending > * {
  visibility: hidden;
}

button.is-server-pending::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.05);
  content: "";
}

button.is-server-pending::after {
  position: absolute;
  width: 15px;
  height: 15px;
  inset: 50% auto auto 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  translate: -50% -50%;
  animation: server-button-spin 650ms linear infinite;
}

@keyframes server-button-spin {
  to { rotate: 1turn; }
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.12;
  pointer-events: none;
}

.ambient-a {
  top: -12vw;
  left: -8vw;
  background: #7d35ff;
}

.ambient-b {
  right: -12vw;
  bottom: -14vw;
  background: #22c8ff;
}

.game-shell {
  --menu-controls-top: max(20px, calc(env(safe-area-inset-top) + 10px));
  --menu-controls-bottom: calc(var(--menu-controls-top) + 38px);
  width: min(var(--app-viewport-width), 520px);
  height: var(--app-viewport-height);
  min-height: 0;
  margin: 0;
  position: fixed;
  top: var(--app-viewport-top);
  left: calc(var(--app-viewport-left) + (var(--app-viewport-width) / 2));
  translate: -50% 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(40, 30, 126, 0.23) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 30, 126, 0.18) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(65, 60, 195, 0.28), transparent 42%),
    linear-gradient(180deg, #17145c 0%, #0f145f 45%, #080d48 100%);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.42);
}

body.is-keyboard-open .game-shell {
  height: var(--app-viewport-height);
}

body.is-keyboard-open .menu-screen {
  padding:
    max(8px, env(safe-area-inset-top))
    12px
    max(8px, env(safe-area-inset-bottom));
  align-content: start;
  gap: 0;
}

body.is-keyboard-open .menu-screen > .brand-lockup,
body.is-keyboard-open .menu-screen > .menu-orbit,
body.is-keyboard-open .fullscreen-hint {
  display: none;
}

body.is-keyboard-open .menu-card {
  --menu-card-padding: 12px;
  --menu-card-lift: 0px;
  width: 100%;
  top: 0;
  margin-bottom: 0;
  border-radius: 18px;
}

body.is-keyboard-open .menu-tab-panel {
  height: calc(var(--app-viewport-height) - 70px);
  max-height: none;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  scroll-padding-block: 20px;
}

body.is-keyboard-open .profile-modal {
  height: 100%;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  place-items: start center;
}

body.is-keyboard-open .profile-dialog {
  max-height: calc(100% - 16px);
  padding: 16px;
  scroll-padding-block: 20px;
}

.screen {
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.menu-screen {
  padding:
    calc(var(--menu-controls-bottom) + clamp(8px, 1.5dvh, 14px))
    28px
    max(clamp(10px, 2.6dvh, 22px), env(safe-area-inset-bottom));
  display: grid;
  align-content: center;
  gap: clamp(9px, 2dvh, 18px);
  isolation: isolate;
}

.menu-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 52% 28%, rgba(55, 219, 255, 0.2), transparent 25%),
    linear-gradient(145deg, transparent 50%, rgba(210, 34, 195, 0.12));
}

.brand-lockup {
  position: relative;
  top: 0;
  z-index: 0;
  pointer-events: none;
  scale: var(--menu-brand-scale, 1);
  text-align: center;
  transform-origin: center;
  translate: 0 var(--menu-brand-shift, 0);
}

.brand-kicker {
  color: var(--cyan);
  font-size: 9px;
  letter-spacing: 0.24em;
}

h1 {
  margin: clamp(5px, 1dvh, 8px) 0 clamp(6px, 1.2dvh, 10px);
  font-size: clamp(
    38px,
    min(15vw, calc((100dvh - var(--menu-controls-bottom)) * 0.095)),
    70px
  );
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.72;
  text-shadow: 0 13px 28px rgba(0, 0, 0, 0.28);
}

h1 em {
  color: var(--yellow);
  font-style: normal;
  -webkit-text-stroke: 2px rgba(255, 192, 0, 0.2);
  text-shadow: 0 6px 0 #f19d11, 0 18px 26px rgba(0, 0, 0, 0.25);
}

.brand-lockup p {
  max-width: 240px;
  margin: 16px auto;
  color: #c6ccec;
  font-family: system-ui, sans-serif;
  font-size: clamp(10px, 1.45dvh, 12px);
  line-height: 1.35;
}

.menu-orbit {
  width: var(--menu-orbit-size, 220px);
  height: var(--menu-orbit-size, 220px);
  position: absolute;
  top: var(--menu-decoration-center-y, calc(var(--menu-controls-bottom) + 110px));
  left: 50%;
  z-index: 0;
  translate: -50% -50%;
  border: 1px solid rgba(91, 224, 255, 0.1);
  border-radius: 50%;
  animation: orbit 35s linear infinite;
  container-type: size;
  pointer-events: none;
}

.menu-orbit span {
  width: 14.5%;
  aspect-ratio: 1;
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(76, 226, 255, 0.22);
  border-radius: 50%;
  background: rgba(22, 28, 104, 0.75);
  color: rgba(255, 255, 255, 0.3);
  font-size: clamp(12px, 5.5cqw, 16px);
  box-shadow: 0 0 28px rgba(50, 221, 255, 0.12);
}

.menu-orbit span:nth-child(1) { left: 4.1%; top: 30.3%; }
.menu-orbit span:nth-child(2) { left: 42.1%; top: -7.2%; }
.menu-orbit span:nth-child(3) { right: -2.4%; top: 31.7%; }
.menu-orbit span:nth-child(4) { right: 16.2%; bottom: 4.1%; }
.menu-orbit span:nth-child(5) { left: 14.8%; bottom: 3.1%; }

@keyframes orbit {
  to { rotate: 360deg; }
}

.menu-card {
  --menu-card-padding: clamp(16px, 3dvh, 24px);
  --menu-card-lift: 56px;
  --menu-tabs-saved-space: 60px;
  top: calc(-1 * var(--menu-card-lift));
  margin-bottom: calc(-1 * var(--menu-card-lift));
  padding: var(--menu-card-padding);
  position: relative;
  z-index: 3;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
}

.menu-tabs {
  margin:
    calc(0px - var(--menu-card-padding))
    calc(0px - var(--menu-card-padding))
    12px;
  padding: 4px 5px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.menu-tab {
  min-width: 0;
  min-height: 29px;
  padding: 4px 3px 3px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: rgba(8, 12, 65, 0.24);
  color: #8994c5;
  cursor: pointer;
  font-size: clamp(7px, 1.8vw, 9px);
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, translate 180ms ease;
}

.menu-tab.is-active {
  border-color: rgba(75, 221, 255, 0.24);
  background: linear-gradient(180deg, rgba(43, 224, 255, 0.2), rgba(42, 38, 128, 0.42));
  color: #f4fcff;
  translate: 0 1px;
}

.menu-tab.has-active-events {
  position: relative;
}

.menu-tab.has-active-events::after {
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  border-radius: 50%;
  background: #ffe46f;
  box-shadow: 0 0 8px #ffc837;
}

.menu-tab-badge {
  min-width: 16px;
  height: 16px;
  margin-left: 3px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #ff4fa6;
  color: white;
  font-size: 8px;
  letter-spacing: 0;
  vertical-align: middle;
}

.menu-tab-panel {
  height: min(
    calc(44dvh + var(--menu-card-lift) + var(--menu-tabs-saved-space)),
    466px
  );
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation: menu-tab-enter 220ms ease-out;
}

#duel-tab-panel {
  height: auto;
  overflow-y: visible;
}

.drag-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.drag-scroll:not(input):not(select):not(textarea) {
  cursor: grab;
}

@keyframes menu-tab-enter {
  from {
    opacity: 0;
    translate: 0 5px;
  }
}

.friends-panel {
  overflow: hidden;
}

.friends-locked-view {
  height: 100%;
  min-height: 0;
  padding: 8px 10px 2px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

#friends-content {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#friends-list-view {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.friends-lock-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 13px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(56, 220, 255, 0.25);
  border-radius: 19px;
  background:
    radial-gradient(circle at 35% 20%, rgba(56, 220, 255, 0.22), transparent 48%),
    linear-gradient(145deg, rgba(40, 114, 219, 0.22), rgba(117, 46, 220, 0.2));
  box-shadow: 0 14px 34px rgba(4, 7, 48, 0.28);
}

.friends-lock-icon::before {
  content: "";
  width: 19px;
  height: 15px;
  position: absolute;
  top: 13px;
  border: 3px solid var(--cyan);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.friends-lock-icon span {
  width: 31px;
  height: 25px;
  position: relative;
  top: 8px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--cyan), #6e72ff);
  box-shadow: 0 6px 17px rgba(56, 220, 255, 0.22);
}

.friends-lock-icon span::after {
  content: "";
  width: 5px;
  height: 9px;
  position: absolute;
  top: 8px;
  left: 13px;
  border-radius: 4px;
  background: #15165f;
}

.friends-lock-kicker {
  color: var(--cyan);
  font-size: 8px;
  letter-spacing: 0.17em;
}

.friends-locked-view h2 {
  margin: 8px 0 7px;
  font-size: 21px;
}

.friends-locked-view p {
  max-width: 305px;
  margin: 0;
  color: #aeb8dc;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

.friends-locked-view .primary-button {
  width: min(100%, 285px);
  min-height: 45px;
  margin-top: 17px;
}

.friend-invite-tools {
  min-height: 0;
  padding-top: 9px;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
}

.friend-invite-create-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#friend-invite-generate,
.friend-invite-card,
.friend-invite-form {
  min-height: 34px;
}

#friend-invite-generate,
.friend-invite-actions button,
.friend-invite-form button {
  border: 1px solid rgba(56, 220, 255, 0.2);
  border-radius: 10px;
  background: rgba(56, 220, 255, 0.08);
  color: var(--cyan);
  cursor: pointer;
  font: 700 8px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
}

#friend-invite-generate {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
}

.friend-invite-card {
  padding: 11px;
  border: 1px solid rgba(75, 242, 170, 0.25);
  border-radius: 10px;
  display: grid;
  gap: 9px;
  background: rgba(75, 242, 170, 0.07);
  text-align: center;
}

.friend-invite-card strong {
  color: white;
  font: 700 18px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
}

.friend-invite-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.friend-invite-actions button {
  min-height: 32px;
  padding: 5px 7px;
}

.friend-invite-card p {
  margin: 0;
  color: #aeb8dc;
  font: 500 9px/1.4 system-ui, sans-serif;
}

.friend-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.friend-invite-form input {
  min-width: 0;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  outline: none;
  background: rgba(5, 8, 52, 0.6);
  color: white;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.friend-invite-form input:focus {
  border-color: rgba(56, 220, 255, 0.58);
}

.friend-invite-form button {
  min-width: 72px;
  padding: 0 9px;
  background: linear-gradient(135deg, rgba(38, 121, 232, 0.9), rgba(117, 46, 220, 0.9));
  color: white;
}

.friend-invite-tools button:disabled {
  cursor: default;
  opacity: 0.45;
}

.friend-invite-status {
  margin: 0;
  color: #96a3d3;
  font: 500 9px/1.35 system-ui, sans-serif;
  text-align: center;
}

.friend-invite-status.is-error {
  color: #ff9aba;
}

.friends-subtabs {
  margin-bottom: 9px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(7, 10, 61, 0.5);
}

.friends-subtab {
  min-width: 0;
  min-height: 31px;
  padding: 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #818cbf;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: 0.07em;
}

.friends-subtab span {
  margin-left: 2px;
  color: inherit;
  letter-spacing: 0;
}

.friends-subtab.is-active {
  background: linear-gradient(135deg, rgba(43, 224, 255, 0.16), rgba(127, 58, 226, 0.22));
  color: #f4fcff;
}

.friends-subtab-add {
  color: var(--cyan);
  font-family: system-ui, sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 0.7;
  letter-spacing: 0;
}

.suspended-duels-summary {
  width: 100%;
  min-height: 34px;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 204, 80, 0.3);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255, 174, 38, 0.13), rgba(126, 55, 218, 0.15));
  color: #ffe8a8;
  cursor: pointer;
  font: 600 9px/1.35 system-ui, sans-serif;
  text-align: left;
}

.friends-list {
  min-height: 0;
  padding-right: 2px;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
}

.friend-card.has-suspended-duel {
  border-color: rgba(255, 196, 66, 0.32);
  background: linear-gradient(135deg, rgba(57, 39, 105, 0.65), rgba(17, 27, 92, 0.58));
}

.friend-card.is-suspended-your_turn,
.friend-card.is-suspended-result {
  border-color: rgba(59, 224, 255, 0.52);
  box-shadow: 0 0 18px rgba(48, 211, 255, 0.08);
}

.friend-card {
  min-height: 52px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(7, 10, 61, 0.42);
  transition: border-color 160ms ease, background 160ms ease;
}

.friend-card.is-expanded {
  border-color: rgba(56, 220, 255, 0.27);
  background: rgba(26, 35, 115, 0.58);
}

.friend-avatar-wrap {
  position: relative;
}

.friend-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #2b75df, #7b36dc);
  color: white;
  font-size: 13px;
}

.friend-presence {
  width: 9px;
  height: 9px;
  position: absolute;
  right: -2px;
  bottom: -1px;
  border: 2px solid #12145c;
  border-radius: 50%;
  background: #64709e;
}

.friend-presence.is-available { background: var(--green); }
.friend-presence.is-playing { background: var(--yellow); }

.friend-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.friend-copy strong {
  overflow: hidden;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-copy small {
  overflow: hidden;
  color: #8f9ac8;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-card.has-suspended-duel .friend-copy small {
  line-height: 1.25;
  white-space: normal;
}

.friend-copy small b {
  color: var(--yellow);
  font-weight: 600;
}

.friend-action,
.friend-mini-action {
  border: 0;
  cursor: pointer;
}

.friend-action {
  min-width: 38px;
  height: 34px;
  padding: 0 10px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(38, 121, 232, 0.9), rgba(117, 46, 220, 0.9));
  color: white;
  font-size: 15px;
}

.friend-action:disabled {
  cursor: default;
  opacity: 0.38;
}

.friend-duel-actions,
.suspended-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.friend-duel-actions .friend-action {
  min-width: 34px;
  padding: 0 8px;
}

.suspended-actions button {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  font-size: 8px;
}

.suspended-actions .is-accept {
  min-width: 58px;
}

.competitor.opponent.is-suspended-waiting {
  border-color: rgba(255, 198, 73, 0.24);
  opacity: 0.78;
}

.friend-card-details {
  grid-column: 1 / -1;
  padding: 8px 2px 1px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.friend-versus {
  color: #aab4dc;
  font-family: system-ui, sans-serif;
  font-size: 9px;
}

.friend-versus strong {
  color: white;
}

.friend-mini-action {
  min-height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #aeb8df;
  font-size: 8px;
}

.friend-mini-action.is-danger {
  color: #ff9aba;
}

.friend-request-actions {
  display: flex;
  gap: 5px;
}

.friend-request-actions button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

.friend-request-actions .is-decline {
  background: rgba(255, 91, 145, 0.1);
  color: #ff8db5;
}

.friend-request-actions .is-accept {
  background: rgba(75, 242, 170, 0.13);
  color: var(--green);
}

.friends-status {
  margin: 17px 0 0;
  color: #8e99c8;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.friends-status.is-error {
  color: #ff9aba;
}

.section-panel-heading{margin-bottom:12px}.section-panel-heading .context-section-title{margin:0}.section-panel-heading strong{font-size:17px}

.clubs-panel {
  overflow: hidden;
}

.events-panel {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.events-screen { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; contain: layout paint; }
#events-close{position:absolute;z-index:5;top:12px;right:12px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer}
#events-content .section-panel-heading{padding-right:50px}
#events-content, #events-locked-view { position: absolute; inset: 0; min-width: 0; min-height: 0; padding: 1px 4px max(20px, env(safe-area-inset-bottom)) 2px; overflow-x: hidden; overflow-y: scroll; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#events-content > *, #global-events-list > *, #liveops-preview-list > * { max-width: 100%; }
.showdown-panel{display:grid;gap:10px;margin:0 0 14px;padding:14px;border:1px solid #5e68a8;border-radius:16px;background:linear-gradient(145deg,#202858,#11162f);color:#f7f8ff}.showdown-panel[hidden]{display:none}.showdown-panel header{display:flex;justify-content:space-between;gap:12px;align-items:start}.showdown-panel header div{display:grid;gap:3px}.showdown-panel small,.showdown-panel header span{font-size:10px;line-height:1.3;color:#9eeeff}.showdown-panel strong{font-size:18px;line-height:1.2}.showdown-panel p{margin:0;font-size:15px;line-height:1.35}.showdown-meter{height:8px;overflow:hidden;border-radius:8px;background:#090d20}.showdown-meter i{display:block;height:100%;min-width:0;background:linear-gradient(90deg,#36d5ff,#d178ff)}.showdown-panel button{min-height:42px;white-space:normal;font-size:15px}.showdown-leaderboard{display:grid;gap:6px}.showdown-leaderboard article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;padding:8px;border-radius:10px;background:#111735}.showdown-leaderboard article.is-me{outline:1px solid #5ee7ff}.showdown-leaderboard article b,.showdown-leaderboard article span{font-size:10px;line-height:1.35}.showdown-leaderboard article strong{font-size:15px;overflow-wrap:anywhere}.showdown-leaderboard article span{grid-column:2;color:#aeb8e5;white-space:normal}
.showdown-shop{display:grid;gap:10px;margin-top:4px;padding-top:12px;border-top:1px solid #52609a}.showdown-shop>header{align-items:center}.showdown-shop>header span{padding:6px 9px;border-radius:999px;background:#301d55;color:#f5d6ff;font-size:15px;font-weight:800;overflow-wrap:anywhere}.showdown-shop-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.showdown-shop-offer{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 8px;align-items:center;padding:9px;border:1px solid #4a568d;border-radius:12px;background:#111735}.showdown-shop-offer img{grid-row:1/4;width:52px;height:52px;object-fit:contain;border-radius:10px;background:#090d20}.showdown-shop-offer strong{font-size:15px;overflow-wrap:anywhere}.showdown-shop-offer small{font-size:10px;white-space:normal;overflow-wrap:anywhere}.showdown-shop-offer span{font-size:15px;color:#f3cbff;font-weight:800}.showdown-shop-offer button{grid-column:1/-1;width:100%}.showdown-shop-offer.is-owned,.showdown-shop-offer.is-sold_out,.showdown-shop-offer.is-expired{opacity:.78}.showdown-shop-status{min-height:20px;font-size:15px!important;white-space:normal;overflow-wrap:anywhere}.showdown-shop-status.is-error{color:#ffb4b4}.showdown-shop-status.is-success{color:#9ff3c7}@media(max-width:420px){.showdown-shop-offers{grid-template-columns:1fr}.showdown-shop>header{align-items:flex-start;flex-wrap:wrap}}
.season-showdown{margin:18px 0 0}

.events-panel .club-section-heading { padding-bottom: 9px; }
.events-panel .club-section-heading > div { display: grid; gap: 4px; }
.events-panel .club-section-heading span { color: var(--cyan); font-size: 8px; letter-spacing: .18em; }
.events-panel .club-section-heading strong { font-size: 17px; }
.events-panel .club-section-heading button { min-width: 34px; min-height: 30px; }
.events-description { margin: 0 0 12px; color: #8e99c8; font: 10px/1.4 system-ui, sans-serif; }
.events-panel .club-events-list { min-height: 0; overflow: visible; padding-right: 2px; }
.global-event-card header{flex-wrap:wrap}.global-event-card header strong,.global-event-card header>b,.global-event-standings strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.global-event-standings li{grid-template-columns:24px minmax(0,1fr) auto 38px}
.liveops-list{display:grid;gap:12px;margin-bottom:14px}.liveops-card{display:grid;gap:10px;padding:14px;border:1px solid rgba(89,214,255,.28);border-radius:16px;background:linear-gradient(145deg,rgba(41,61,132,.58),rgba(14,20,67,.82));overflow:visible}.liveops-card header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px;align-items:center}.liveops-card header strong{font-size:17px;min-width:0;white-space:normal;overflow-wrap:anywhere}.liveops-card header>span:last-child{padding:4px 8px;border-radius:999px;background:rgba(57,220,177,.12);color:#8ff5d4;font:700 10px/1.3 system-ui,sans-serif}.liveops-card p{margin:0;white-space:normal;overflow-wrap:anywhere}.liveops-objective{color:#fff;font:700 15px/1.35 system-ui,sans-serif}.liveops-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.liveops-summary>span{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.055)}.liveops-summary small,.liveops-reward small{color:#aeb9e4;font:10px/1.35 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}.liveops-summary strong{font-size:17px}.liveops-policy{color:#aeb9e4;font:10px/1.4 system-ui,sans-serif}.liveops-progress{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}.liveops-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#39dcb1,#6c78ff)}.liveops-actions{display:grid;gap:8px}.liveops-reward{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,auto);gap:8px;align-items:center;padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(4,9,39,.2)}.liveops-reward>span{display:grid;gap:2px;min-width:0}.liveops-reward strong{font:700 15px/1.3 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}.liveops-actions button{min-height:38px;padding:7px 9px;border-radius:10px;background:rgba(72,101,201,.55);color:#fff;font-size:15px;white-space:normal;overflow-wrap:anywhere}.liveops-actions button:disabled{opacity:.65}.liveops-offer{border-color:rgba(177,119,255,.25)}@media(max-width:420px){.liveops-reward{grid-template-columns:1fr}.liveops-actions button{width:100%}}

.global-event-card{margin:0 0 14px;padding:16px;border:1px solid rgba(90,210,255,.2);border-radius:17px;background:radial-gradient(circle at 100% 0,rgba(77,91,255,.24),transparent 44%),rgba(12,18,69,.7)}.global-event-card header{display:flex;justify-content:space-between;gap:9px}.global-event-card header>div{display:grid;gap:4px;min-width:0}.global-event-card header span,.global-event-progress span,.global-event-stats span{color:var(--cyan);font-size:10px;letter-spacing:.12em}.global-event-card header strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-event-card header small{color:#98a6d7;font:10px system-ui}.global-event-card header>b{align-self:start;padding:5px 6px;border-radius:7px;background:rgba(77,242,170,.13);color:var(--green);font-size:10px;white-space:nowrap}.global-event-progress{margin-top:15px;display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:end}.global-event-progress strong{display:block;margin-top:3px;font-size:22px}.global-event-progress strong i{color:#8390c3;font-size:15px;font-style:normal}.global-event-progress small{color:#95a1cf;font:10px system-ui}.global-event-progress-track{grid-column:1/-1;height:7px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}.global-event-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),#7869ff)}.global-event-stats{margin:15px 0 12px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden}.global-event-stats div{padding:9px;text-align:center;background:rgba(255,255,255,.025)}.global-event-stats div+div{border-left:1px solid rgba(255,255,255,.07)}.global-event-stats strong{display:block;margin-top:4px;font-size:15px}.global-event-play{width:100%;min-height:42px;border-radius:11px;background:linear-gradient(90deg,#28c8f4,#6852d6);color:white;font-size:15px;letter-spacing:.06em}.global-event-standings{margin:15px 0 0;padding:0;list-style:none}.global-event-standings h3{margin:0 0 7px;color:#9facda;font-size:10px;letter-spacing:.13em}.global-event-standings li{display:grid;grid-template-columns:24px 1fr auto 38px;gap:7px;align-items:center;padding:7px 3px;border-top:1px solid rgba(255,255,255,.06);font:10px system-ui}.global-event-standings b{color:var(--yellow)}.global-event-standings strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-event-standings span{color:#98a6d7}.global-event-standings em{color:var(--cyan);font-style:normal;text-align:right}

.global-event-card header > b { border: 0; font-weight: 600; -webkit-text-stroke: 0; text-shadow: none; }

#clubs-content,
#club-detail-view {
  height: 100%;
  min-height: 0;
}

#clubs-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#clubs-subtabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#clubs-list-view,
#club-detail-view,
.club-entry-actions {
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
}

#club-detail-view {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.club-detail-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.club-detail-panel {
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
}

#club-events-panel {
  padding-right: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#club-event-form,
#club-events-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#club-event-form {
  padding-right: 15px;
}

#club-events-list {
  padding-right: 2px;
}

.club-detail-header,
.club-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.club-detail-header > div {
  display: grid;
  gap: 4px;
}

.club-detail-header span,
.club-code-card span {
  color: var(--cyan);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.club-detail-header strong {
  font-size: 17px;
}

.club-detail-header > small {
  color: #8994c5;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.club-entry-actions {
  margin: 0;
  padding-top: 9px;
  display: grid;
  align-content: start;
  grid-template-columns: 1fr;
  gap: 7px;
}

.club-inline-form {
  min-width: 0;
}

.club-inline-form .field-label {
  margin-bottom: 5px;
  font-size: 10px;
  text-align: center;
}

.club-inline-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
}

.club-inline-form input,
.club-event-form input,
.club-event-form select {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(56, 220, 255, 0.18);
  outline: none;
  background: rgba(5, 8, 52, 0.66);
  color: #f8fbff;
  font-family: system-ui, sans-serif;
  font-size: 15px;
}

.club-inline-form input {
  border-radius: 10px 0 0 10px;
  font-size: 15px;
}

.club-inline-form button,
.club-event-form button,
.club-event-card header button {
  border: 0;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: white;
  cursor: pointer;
  font-size: 7px;
  letter-spacing: 0.07em;
}

.club-inline-form button {
  width: 92px;
  padding: 0 8px;
  border-radius: 0 10px 10px 0;
  font-size: 10px;
  text-align: center;
}

.clubs-list,
.club-members-list,
.club-events-list {
  display: grid;
  gap: 6px;
}

.club-events-list {
  align-content: start;
  grid-auto-rows: max-content;
}

.club-events-list > .club-event-card {
  min-height: max-content;
}

.club-card {
  width: 100%;
  min-height: 54px;
  padding: 7px 10px 7px 8px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;
  background: rgba(7, 10, 61, 0.42);
  color: white;
  cursor: pointer;
  text-align: left;
}

.club-card-badge,
.club-member-row > span {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2b75df, #7b36dc);
  color: white;
}

.club-card-badge {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.club-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.club-card-copy strong,
.club-card-copy small {
  overflow: hidden;
  font-family: system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-card-copy strong {
  font-size: 12px;
}

.club-card-copy small {
  color: #8f9ac8;
  font-size: 9px;
}

.club-card > i {
  color: var(--cyan);
  font-style: normal;
}

.club-detail-header {
  margin-bottom: 9px;
}

.club-detail-header > button {
  width: 32px;
  height: 32px;
  margin-right: 9px;
  border: 1px solid rgba(56, 220, 255, 0.22);
  border-radius: 10px;
  background: rgba(56, 220, 255, 0.08);
  color: var(--cyan);
  cursor: pointer;
  font-size: 22px;
}

.club-detail-header > div {
  margin-right: auto;
}

.club-code-card {
  margin: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 10px;
  border: 1px solid rgba(56, 220, 255, 0.17);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(43, 224, 255, 0.09), rgba(127, 58, 226, 0.12));
}

.club-code-card strong {
  grid-row: 1;
  grid-column: 2;
  color: var(--yellow);
  font-family: system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: 0.13em;
  cursor: text;
  user-select: text;
}

.club-code-card small {
  color: #8f9ac8;
  font-family: system-ui, sans-serif;
  font-size: 8px;
}

.club-code-card button {
  grid-row: 2;
  grid-column: 2;
  padding: 4px 8px;
  border: 1px solid rgba(56, 220, 255, 0.24);
  border-radius: 7px;
  background: rgba(56, 220, 255, 0.1);
  color: var(--cyan);
  cursor: pointer;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.club-code-card button:hover {
  background: rgba(56, 220, 255, 0.17);
}

.club-section {
  margin-top: 9px;
}

.club-events-tabs {
  margin-bottom: 9px;
  padding: 3px 4px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.club-events-tab {
  min-width: 0;
  min-height: 28px;
  padding: 4px 5px 3px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: rgba(8, 12, 65, 0.24);
  color: #8792c2;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.07em;
  line-height: 1;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, translate 180ms ease;
}

.club-events-tab.is-active {
  border-color: rgba(75, 221, 255, 0.28);
  background: linear-gradient(180deg, rgba(43, 224, 255, 0.2), rgba(42, 38, 128, 0.44));
  color: #f4fcff;
  translate: 0 1px;
}

.club-section-heading {
  margin-bottom: 6px;
}

.club-section-heading strong {
  font-size: 11px;
}

.club-section-heading span {
  color: #8f9ac8;
  font-size: 10px;
}

.club-members-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.club-member-row {
  min-width: 0;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
  border-radius: 11px;
  background: rgba(7, 10, 61, 0.42);
}

.club-member-row > span {
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
  border-radius: 9px;
  font-size: 10px;
}

.club-member-row strong,
.club-member-row small {
  overflow: hidden;
  font-family: system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-member-row strong {
  font-size: 9px;
}

.club-member-row small {
  color: #8792c2;
  font-size: 7px;
}

.club-event-form {
  margin-bottom: 12px;
  padding: 15px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(75, 221, 255, 0.13);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(63, 216, 255, 0.1), transparent 42%),
    rgba(7, 10, 61, 0.48);
}

.club-event-form > header {
  display: grid;
  gap: 3px;
}

.club-event-form > header span,
.club-event-field > span,
.club-event-limit > span {
  color: #8f9ac8;
  font-size: 10px;
  letter-spacing: 0.09em;
}

.club-event-form > header span {
  color: var(--cyan);
}

.club-event-form > header strong {
  color: white;
  font-size: 15px;
}

.club-event-form > header small {
  color: #8f9ac8;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.35;
}

.club-event-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.club-event-select-field {
  position: relative;
}

.club-event-select-field::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 15px;
  bottom: 18px;
  border-top: 6px solid var(--cyan);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(55, 222, 255, 0.28));
  pointer-events: none;
}

.club-event-title-field {
  grid-column: 1 / -1;
}

.club-event-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.club-event-form input,
.club-event-form select {
  width: 100%;
  height: 42px;
  border-radius: 11px;
}

.club-event-form select {
  padding-right: 38px;
  border-color: rgba(75, 221, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(39, 99, 186, 0.22), rgba(105, 50, 175, 0.2)),
    rgba(5, 8, 52, 0.78);
  cursor: pointer;
}

.club-event-limit {
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px 6px 11px;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(56, 220, 255, 0.18);
  border-radius: 11px;
  background: rgba(5, 8, 52, 0.66);
}

.club-event-limit span {
  line-height: 1.25;
}

.club-event-limit input {
  width: 52px;
  height: 30px;
  padding: 0;
  border-color: rgba(56, 220, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.club-event-form > button {
  width: 100%;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 15px;
}

@media (max-width: 360px) {
  .club-event-settings {
    grid-template-columns: 1fr;
  }

  .club-event-limit {
    grid-column: 1;
  }
}

.club-event-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(7, 10, 61, 0.42);
}

.club-event-card header {
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.club-event-card header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.club-event-card header span {
  color: var(--green);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.club-event-card.is-finished header span {
  color: #8f9ac8;
}

.club-event-card header strong {
  font-size: 15px;
  line-height: 1.25;
}

.club-event-card header small {
  color: #8f9ac8;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.35;
}

.club-event-card header button {
  min-height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 10px;
}

.club-event-details-toggle {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: #a8b4dc;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.club-event-details-toggle i {
  width: 0;
  height: 0;
  border-top: 6px solid var(--cyan);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transition: rotate 160ms ease;
}

.club-event-details-toggle[aria-expanded="true"] i { rotate: 180deg; }
.club-standings.is-preview .club-standings-heading { display: none; }

.club-standings > div {
  min-height: 42px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 54px 64px;
  align-items: center;
  gap: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  font-family: system-ui, sans-serif;
}

.club-standings.is-marathon > div {
  grid-template-columns: minmax(0, 1fr) minmax(74px, 0.62fr) minmax(64px, 0.48fr);
}

.club-standings .club-standings-heading {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.club-standings .club-standings-heading small {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.club-standings b {
  color: var(--cyan);
  font-size: 10px;
}

.club-standings strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-standings small {
  color: #8792c2;
  font-size: 10px;
  text-align: center;
}

.club-standings em {
  min-width: 0;
  color: var(--yellow);
  font-size: 15px;
  font-style: normal;
  overflow: visible;
  text-align: right;
  white-space: nowrap;
}

.club-empty {
  margin: 8px 0;
  color: #8e99c8;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  text-align: center;
}

/* POOL-18 technical-preview visuals. Division marks/zones are temporary CSS,
   not approved production club art. */
.club-league-panel { padding: 14px 0 28px; }
#club-league-content { display: grid; gap: 14px; }
.club-league-hero,.club-league-contribution,.club-league-standings,.club-league-members,.club-league-history {
  border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(9,17,31,.84); padding: 16px;
}
.club-league-hero { display: flex; align-items: center; gap: 14px; }
.club-league-badge { flex: 0 0 68px; min-height: 68px; display: grid; place-items: center; padding: 8px; border-radius: 18px; font-size: 15px; font-weight: 900; text-align: center; overflow-wrap: anywhere; background: #815f40; }
.club-league-hero.is-silver .club-league-badge{background:#718096}.club-league-hero.is-gold .club-league-badge{background:#b7791f}.club-league-hero.is-emerald .club-league-badge{background:#16856b}.club-league-hero.is-diamond .club-league-badge{background:#337da0}
.club-league-hero div { min-width: 0; display: grid; gap: 4px; }
.club-league-hero small,.club-league-contribution>span { font-size: 10px; letter-spacing: .08em; color: #8fe6d0; }
.club-league-hero strong,.club-league-contribution strong { font-size: 20px; overflow-wrap: anywhere; }
.club-league-hero p,.club-league-contribution p,.club-league-history p { margin: 0; font-size: 15px; line-height: 1.4; color: #c7d2df; overflow-wrap: anywhere; }
.club-league-contribution { display: grid; gap: 6px; }
.club-league-standings h3,.club-league-members h3,.club-league-history h3 { margin: 0 0 10px; font-size: 18px; }
.club-league-standings>div,.club-league-members>div,.club-league-history>div { display: grid; grid-template-columns: 28px minmax(100px,1fr) auto auto auto; align-items: center; gap: 8px; padding: 10px 6px; border-top: 1px solid rgba(255,255,255,.09); min-width: 0; }
.club-league-standings>div.is-mine,.club-league-members>div.is-mine { background: rgba(50,203,165,.1); }
.club-league-standings>div.is-promotion { border-left: 3px solid #42d89f; }.club-league-standings>div.is-relegation { border-left: 3px solid #ff7b72; }
.club-league-standings strong,.club-league-members strong,.club-league-history strong { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.club-league-standings small,.club-league-standings span,.club-league-members small,.club-league-history small { font-size: 10px; color: #aebccd; overflow-wrap: anywhere; }
.club-league-standings em,.club-league-members em,.club-league-history em { font-size: 15px; font-style: normal; font-weight: 800; white-space: normal; }
.club-league-members>div { grid-template-columns: minmax(100px,1fr) auto auto; }.club-league-history>div { grid-template-columns: minmax(90px,.7fr) minmax(120px,1fr) auto; }
@media(max-width:560px){.club-league-standings>div{grid-template-columns:24px minmax(90px,1fr) auto}.club-league-standings>div small,.club-league-standings>div span{grid-column:2 / -1}.club-league-hero{align-items:flex-start}.club-league-badge{flex-basis:58px;min-height:58px}}

.leaderboard-panel {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#leaderboard-view {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.leaderboard-subtabs {
  margin-bottom: 13px;
  padding: 3px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.65fr);
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(7, 10, 61, 0.5);
}

.leaderboard-subtab {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #818cbf;
  cursor: pointer;
  font: inherit;
  font-size: 8px;
  line-height: 1.25;
  transition: color 180ms ease, background 180ms ease;
}

.leaderboard-subtab.is-active {
  background: linear-gradient(135deg, rgba(43, 224, 255, 0.16), rgba(127, 58, 226, 0.22));
  color: #f4fcff;
}

.leaderboard-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.leaderboard-heading div {
  display: grid;
  gap: 4px;
}

.leaderboard-heading span {
  color: var(--cyan);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.leaderboard-heading strong {
  font-size: 16px;
}

.leaderboard-heading button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: #aab7e6;
  cursor: pointer;
  font-size: 19px;
}

.leaderboard-heading button:disabled {
  opacity: 0.45;
}

.leaderboard-list {
  min-height: 0;
  margin: 0;
  padding: 0 3px 0 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  list-style: none;
}

.leaderboard-list li {
  min-height: 42px;
  padding: 5px 10px 5px 8px;
  display: grid;
  grid-template-columns: 24px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(7, 10, 61, 0.38);
}

.leaderboard-list li.is-player {
  border-color: rgba(56, 220, 255, 0.38);
  background: rgba(36, 175, 224, 0.11);
}

.leaderboard-position {
  color: #7f8abd;
  font-size: 10px;
  text-align: center;
}

.leaderboard-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #2b75df, #7b36dc);
  color: white;
  font-size: 12px;
}

.leaderboard-list strong {
  overflow: hidden;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-list output {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 600;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.leaderboard-status {
  margin: 28px 8px 10px;
  color: #8d97c8;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.league-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding:14px;border:1px solid rgba(91,226,255,.28);border-radius:16px;background:rgba(8,12,66,.62)}
.league-summary[hidden]{display:none}.league-summary strong{font-size:15px}.league-summary span,.league-summary p{font-size:15px;overflow-wrap:anywhere}.league-summary small{flex-basis:100%;font-size:10px;overflow-wrap:anywhere;color:#aeb9dd}.league-emblem-image{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 7px 10px rgba(0,0,0,.35))}.league-emblem{padding:8px 12px;border-radius:999px;color:#fff;background:#7657ff}.league-emblem.is-bronze{background:#915c3c}.league-emblem.is-silver{background:#65758b}.league-emblem.is-gold{background:#ad7c00}.league-emblem.is-emerald{background:#087a58}.league-emblem.is-diamond{background:#3564ad}.leaderboard-list li.is-promotion{box-shadow:inset 4px 0 #58e797}.leaderboard-list li.is-relegation{box-shadow:inset 4px 0 #ff7e8d}.leaderboard-subtabs{flex-wrap:wrap}.leaderboard-subtab{white-space:normal;min-height:42px}.leaderboard-list li:has(.leaderboard-league-emblem:not([hidden])){grid-template-columns:24px 24px 32px minmax(0,1fr) auto}.leaderboard-league-emblem{width:24px;height:24px;object-fit:contain}
.profile-league-history{display:grid;gap:8px}.profile-league-history[hidden]{display:none}#profile-league-medals{display:flex;flex-wrap:wrap;gap:7px}.league-medal{padding:7px 9px;border-radius:10px;background:rgba(255,214,89,.12);font-size:15px;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px}.league-medal img{width:32px;height:32px}.league-medal b{font-size:15px;overflow-wrap:anywhere}
.season-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(var(--app-viewport-height) - 24px);overflow:auto}.season-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.season-summary>div,.season-tier{padding:14px;border:1px solid rgba(137,109,255,.35);border-radius:16px;background:linear-gradient(145deg,rgba(98,73,190,.2),rgba(21,26,72,.75))}.season-summary small,.season-tier small,.season-art-note{font-size:10px;overflow-wrap:anywhere}.season-summary strong,.season-tier strong,.season-tier span,.season-state-copy,.season-history p{font-size:15px;overflow-wrap:anywhere}.season-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.season-tier{display:grid;gap:9px;align-content:start}.season-tier>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.season-tier.is-locked{opacity:.62}.season-tier.is-claimable{border-color:#58e797}.season-tier.is-claimed{border-color:#5be2ff}.season-tier button{min-height:40px;white-space:normal}.season-art-note{margin:14px 0;color:#b9c3e8}.season-history{display:grid;gap:7px}.season-history h3{font-size:15px}.season-history p{margin:0;padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}@media(max-width:520px){.season-track{grid-template-columns:1fr}.season-summary{grid-template-columns:1fr}}
.season-premium-copy{font-size:15px;line-height:1.4;overflow-wrap:anywhere}.season-tier.lane-premium{border-color:rgba(255,203,92,.65);background:linear-gradient(145deg,rgba(126,79,16,.38),rgba(43,30,86,.82))}.season-tier.is-premium_locked{opacity:.72}.season-tier strong,.season-tier span,.season-tier small{white-space:normal;overflow:visible;text-overflow:clip}
.result-season{display:grid;justify-items:center;gap:5px;padding:12px;border:1px solid rgba(137,109,255,.4);border-radius:14px;background:rgba(137,109,255,.1)}.result-season[hidden]{display:none}.result-season small{font-size:10px}.result-season span,.result-season strong{font-size:15px;overflow-wrap:anywhere;text-align:center}

.rules-panel {
  max-height: none;
  display: grid;
  gap: 9px;
  overflow-y: auto;
}

.rules-intro {
  padding: 4px 4px 8px;
  display: grid;
  gap: 5px;
}

.rules-intro > span {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.15em;
}

.rules-intro > strong {
  color: white;
  font-size: 15px;
}

.rules-intro > p {
  margin: 0;
  color: #929dcc;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.45;
}

.rules-panel article {
  padding: 12px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background: rgba(7, 10, 61, 0.5);
}

.rules-panel article > span {
  color: var(--cyan);
  font-size: 10px;
}

.rules-panel article div {
  display: grid;
  gap: 5px;
}

.rules-panel strong {
  color: #f4f7ff;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.25;
}

.rules-panel p {
  margin: 0;
  color: #c0c8e5;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Menu typography: 10px for supporting copy, 15px for meaningful content. */
.menu-tab,
.menu-tab-badge,
.friends-lock-kicker,
.friends-subtab,
.suspended-duels-summary,
.suspended-actions button,
.friend-copy small,
.friend-versus,
.friend-mini-action,
.friend-invite-status,
.club-detail-header span,
.club-detail-header > small,
.club-code-card span,
.club-code-card small,
.club-code-card button,
.club-card-copy small,
.club-member-row small,
.leaderboard-subtab,
.leaderboard-heading span {
  font-size: 10px;
}

#cancel-matchmaking-button,
#friend-invite-generate,
.friend-invite-card button,
.friend-invite-form button {
  font-size: 10px;
}

.friends-locked-view p,
.friend-copy strong,
.friend-invite-card strong,
.friend-invite-form input,
.club-card-copy strong,
.club-member-row strong,
.leaderboard-list strong,
.leaderboard-list output,
.leaderboard-status {
  font-size: 15px;
}

/* The add action stays prominent even under the shared subtab typography. */
.friends-subtab.friends-subtab-add {
  font-size: 27px;
  font-weight: 800;
  line-height: 0.7;
}

.club-member-row > span,
.leaderboard-avatar {
  font-size: 15px;
}

#duel-tab-panel .field-label,
#duel-tab-panel .player-account-status,
#duel-tab-panel .load-status,
#duel-tab-panel .matchmaking-panel div,
#duel-tab-panel .matchmaking-panel small {
  font-size: 10px;
}

#duel-tab-panel input,
#duel-tab-panel select,
#duel-tab-panel .primary-button,
#duel-tab-panel .practice-button,
#duel-tab-panel .matchmaking-panel strong {
  font-size: 15px;
}

#duel-tab-panel .primary-button i,
#duel-tab-panel .practice-button i,
#duel-tab-panel .duel-profile-arrow {
  font-size: 15px;
}

#duel-tab-panel .matchmaking-panel button {
  font-size: 10px;
}

.duel-player-card {
  width: 100%;
  padding: 18px 16px 18px 24px;
  border: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.duel-player-avatar {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #39dcff, #6654e9 62%, #ce42cf);
  box-shadow: 0 8px 24px rgba(49, 158, 239, 0.24);
  color: white;
  font-size: 15px;
}

.duel-player-copy { display: grid; gap: 4px; }
.duel-player-copy strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.duel-player-copy small { color: #98a5d0; font-family: system-ui, sans-serif; font-size: 10px; }
.duel-rating-mark { color: #ffe36d; }
.duel-profile-arrow { color: var(--cyan); font-size: 15px; transition: translate 160ms ease; }
.duel-player-card:hover .duel-profile-arrow { translate: 3px 0; }

.duel-dossier {
  width:min(520px,calc(100vw - 24px));
  margin:0;
  padding:18px;
  border:1px solid rgba(255,255,255,.1);
}

.duel-dossier-heading { display: flex; align-items: center; justify-content: space-between; }
.duel-dossier-heading > span { color: var(--cyan); font-size: 10px; letter-spacing: 0.14em; }
.duel-dossier-heading small { color: #7f8abd; font-size: 10px; }
.duel-dossier h2 { margin: 10px 0 5px; color: #f5f8ff; font-size: 15px; line-height: 1.25; }
.duel-dossier > p { margin: 0; color: #9aa6d0; font-family: system-ui, sans-serif; font-size: 10px; line-height: 1.5; }

.duel-dossier-stats {
  margin: 15px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.duel-dossier-stats div + div { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.duel-dossier-stats div { min-width: 0; padding: 0 10px; text-align: center; }
.duel-dossier-stats div:first-child { padding-left: 0; }
.duel-dossier-stats div:last-child { padding-right: 0; }
.duel-dossier-stats dt { color: white; font-size: 15px; }
.duel-dossier-stats dd { margin: 4px 0 0; color: #7784b7; font-size: 10px; letter-spacing: 0.06em; }

.field-label {
  display: block;
  margin: 0 0 7px 4px;
  color: #8f9ac8;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.field-heading .field-label {
  margin-bottom: 0;
}

.player-account-status {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.player-account-status.is-temporary {
  color: #ffcf70;
}

.player-account-status.is-permanent {
  color: #7af5bf;
}

.player-account-status:hover,
.player-account-status:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.duel-login-button {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid rgba(56, 220, 255, 0.42);
  border-radius: 14px;
  background: rgba(56, 220, 255, 0.08);
  color: var(--cyan);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.1em;
  transition: background 160ms ease, border-color 160ms ease, translate 160ms ease;
}

.duel-login-button:hover,
.duel-login-button:focus-visible {
  border-color: rgba(56, 220, 255, 0.72);
  background: rgba(56, 220, 255, 0.14);
}

.duel-login-button:active {
  translate: 0 1px;
}

.field-label:not(:first-child) {
  margin-top: 16px;
}

input,
select {
  width: 100%;
  height: clamp(42px, 6.5dvh, 48px);
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  outline: none;
  background: rgba(7, 10, 61, 0.56);
  color: white;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

input:focus,
select:focus {
  border-color: rgba(55, 222, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(55, 222, 255, 0.1);
}

input[readonly] {
  cursor: default;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(7, 10, 61, 0.32);
  color: #aeb7d8;
}

input[readonly]:focus {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.select-wrap {
  position: relative;
}

select {
  appearance: none;
}

.select-wrap::after {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  border-top: 6px solid var(--cyan);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  pointer-events: none;
  translate: 0 -35%;
}

.primary-button {
  width: 100%;
  min-height: clamp(48px, 7dvh, 56px);
  margin-top: clamp(12px, 2.5dvh, 20px);
  padding: 0 18px;
  border: 0;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(135deg, #2be0ff, #256be4 56%, #7f3ae2);
  box-shadow: 0 12px 28px rgba(22, 107, 224, 0.34), inset 0 1px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: translate 160ms ease, filter 160ms ease;
}

.primary-button:hover {
  filter: brightness(1.1);
  translate: 0 -2px;
}

.primary-button:active {
  translate: 0 1px;
}

.primary-button:disabled {
  cursor: wait;
  filter: saturate(0.3);
}

.primary-button i {
  font-size: 22px;
  font-style: normal;
}

.practice-button {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid rgba(56, 220, 255, 0.42);
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #dffaff;
  background: rgba(27, 49, 104, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: translate 160ms ease, border-color 160ms ease, background 160ms ease;
}

.practice-button:hover {
  border-color: rgba(56, 220, 255, 0.78);
  background: rgba(35, 66, 137, 0.84);
  translate: 0 -1px;
}

.practice-button:active { translate: 0 1px; }
.practice-button:disabled { cursor: wait; opacity: 0.58; }
.practice-button i { font-style: normal; }

.load-status {
  min-height: 16px;
  margin: 12px 0 0;
  color: #7f8abd;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  text-align: center;
}

.matchmaking-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(56, 220, 255, 0.24);
  border-radius: 15px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(36, 175, 224, 0.08);
  text-align: left;
}

/* POOL-05 arena selection. Atmosphere uses approved tokens and temporary emblems. */
.arena-panel { position:absolute; inset:0; z-index:110; width:min(100%,760px); margin-inline:auto; translate:none; overflow:hidden; }
.arena-dialog { position:relative; width:min(100%,760px); height:min(92%,880px); max-height:calc(var(--app-viewport-height) - 28px); display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; overflow:hidden; border-color:rgba(128,143,255,.34); background:radial-gradient(circle at 14% -5%,rgba(93,225,255,.2),transparent 32%),radial-gradient(circle at 88% 8%,rgba(255,90,189,.16),transparent 30%),linear-gradient(160deg,#252074 0%,#11164d 48%,#090e34 100%); box-shadow:0 30px 90px rgba(2,4,28,.65),inset 0 1px rgba(255,255,255,.14); }
.arena-dialog::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 18% 78%,rgba(105,217,255,.05)); }
.arena-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.arena-panel-heading small, .arena-confirm-sheet > small { color:#8f99c8; font-weight:800; letter-spacing:.12em; }
.arena-panel-heading h2 { margin:2px 0 0; color:white; font-size:clamp(25px,7vw,34px); }
.arena-panel-heading button, .arena-confirm-sheet .profile-close-button { width:42px; height:42px; border:1px solid rgba(155,177,255,.3); border-radius:14px; color:white; background:linear-gradient(145deg,rgba(105,120,235,.34),rgba(24,27,84,.76)); box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 18px rgba(4,7,39,.28); font-size:24px; }
.arena-panel-copy { margin:8px 0 14px; color:#aeb8dc; font-size:14px; line-height:1.4; }
.arena-list { position:relative; z-index:1; display:grid; align-content:start; gap:14px; min-height:0; width:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:#6777e9 rgba(8,12,52,.55); padding:6px 8px 18px 2px; }
.arena-list::-webkit-scrollbar { width:8px; }
.arena-list::-webkit-scrollbar-track { border-radius:999px; background:rgba(8,12,52,.55); }
.arena-list::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:linear-gradient(#70e5ff,#7668ff) padding-box; }
.arena-card { --arena-color:#ffb742; --arena-color-2:#ff5f72; --arena-deep:#51307f; position:relative; isolation:isolate; display:grid; grid-template-columns:82px minmax(0,1fr) 112px; gap:16px; align-items:center; width:100%; min-width:0; min-height:174px; padding:17px; overflow:hidden; border:1px solid rgba(255,255,255,.32); border-radius:25px; background:radial-gradient(circle at 3% 10%,rgba(255,255,255,.32),transparent 27%),radial-gradient(circle at 96% 110%,color-mix(in srgb,var(--arena-color-2) 72%,transparent),transparent 46%),linear-gradient(135deg,color-mix(in srgb,var(--arena-color) 72%,var(--arena-deep)) 0%,var(--arena-deep) 58%,color-mix(in srgb,var(--arena-color-2) 54%,#35256e) 100%); box-shadow:0 18px 36px rgba(2,5,32,.42),0 8px 24px color-mix(in srgb,var(--arena-color) 28%,transparent),inset 0 1px rgba(255,255,255,.28),inset 0 -1px rgba(0,0,0,.2); scroll-snap-align:start; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.arena-card[data-arena-key="paper_courtyard"] { --arena-color:#ffc83d; --arena-color-2:#ff666d; --arena-deep:#684178; }
.arena-card[data-arena-key="copper_rooftops"] { --arena-color:#ff8a3d; --arena-color-2:#ff477e; --arena-deep:#6b316c; }
.arena-card[data-arena-key="indigo_archive"] { --arena-color:#8377ff; --arena-color-2:#c153ff; --arena-deep:#343082; }
.arena-card[data-arena-key="jade_observatory"] { --arena-color:#2de6b1; --arena-color-2:#27a6ff; --arena-deep:#176b78; }
.arena-card[data-arena-key="crimson_foundry"] { --arena-color:#ff4f70; --arena-color-2:#ff7c38; --arena-deep:#79275c; }
.arena-card[data-arena-key="aurora_citadel"] { --arena-color:#3ee7ff; --arena-color-2:#8b66ff; --arena-deep:#245ca0; }
.arena-card::before { content:""; position:absolute; z-index:-1; inset:0 auto 0 0; width:8px; background:linear-gradient(180deg,#fff 0%,var(--arena-color) 28%,var(--arena-color-2) 100%); box-shadow:0 0 24px var(--arena-color); }
.arena-card::after { content:""; position:absolute; z-index:-1; width:210px; height:210px; right:-112px; top:-114px; border:2px solid rgba(255,255,255,.16); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%); box-shadow:0 0 0 22px color-mix(in srgb,var(--arena-color-2) 13%,transparent),0 0 0 47px color-mix(in srgb,var(--arena-color) 8%,transparent); }
.arena-card.is-ready:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--arena-color) 82%,white); box-shadow:0 18px 38px rgba(2,5,32,.46),0 0 24px color-mix(in srgb,var(--arena-color) 18%,transparent),inset 0 1px rgba(255,255,255,.14); }
.arena-card.is-locked { filter:saturate(.7); opacity:.8; }
.arena-card.is-maintenance { filter:grayscale(.75); }
.arena-art { position:relative; z-index:1; width:82px; height:82px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.46); border-radius:24px; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.44),transparent 35%),linear-gradient(145deg,var(--arena-color),var(--arena-color-2)); box-shadow:0 12px 26px color-mix(in srgb,var(--arena-color-2) 38%,transparent),inset 0 1px rgba(255,255,255,.34),inset 0 -5px rgba(39,21,83,.22); transform:rotate(-3deg); }
.arena-art svg { width:64px; height:64px; filter:drop-shadow(0 5px 7px rgba(2,4,26,.35)); }
.arena-lock { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#17152f; font-size:14px; }
.arena-card-copy { position:relative; z-index:1; min-width:0; }
.arena-card-copy header { display:grid; gap:3px; }
.arena-card-copy small { display:block; color:#cbd2ef; font-size:10px; white-space:normal; overflow-wrap:anywhere; }
.arena-card h3 { margin:1px 0 9px; color:white; font-size:22px; line-height:1.08; text-shadow:0 3px 12px rgba(0,0,0,.32); }
.arena-economy { display:flex; flex-wrap:wrap; gap:7px; color:#b8c1e6; font-size:10px; letter-spacing:.05em; }
.arena-economy span { padding:5px 9px; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(22,15,71,.44); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.arena-economy b { color:#ffe46f; font-size:13px; text-shadow:0 0 12px rgba(255,207,67,.34); }
.arena-rule { margin-top:6px; color:#aeb8dc; font-size:11px; }
.arena-trophies { display:grid; grid-template-columns:auto minmax(45px,1fr) auto; align-items:center; gap:7px; margin-top:8px; color:#dbe1ff; font-size:11px; }
.arena-trophies i { height:7px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 3px rgba(0,0,0,.3); }
.arena-trophies i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffe445,#ff8b3d); box-shadow:0 0 14px rgba(255,201,54,.8); }
.arena-medal { color:#8f99c8; font-size:18px; }
.arena-access { display:block; margin-top:6px; color:#78efbd; font-size:11px; }
.arena-card.is-locked .arena-access { color:#ffbd8b; }
.arena-card.is-insufficient .arena-access { color:#ff8c92; }
.arena-card > button { position:relative; z-index:1; align-self:end; justify-self:end; width:auto; min-width:112px; min-height:52px; padding:11px 15px; border:1px solid rgba(255,255,255,.62); border-radius:16px; color:#3b2148; background:linear-gradient(135deg,#fff16a 0%,#ffc43d 42%,#ff6a55 100%); box-shadow:0 0 0 4px rgba(255,207,61,.14),0 12px 28px rgba(255,91,77,.42),inset 0 1px rgba(255,255,255,.62),inset 0 -4px rgba(157,52,48,.18); font-size:15px; font-weight:900; letter-spacing:.045em; text-shadow:none; cursor:pointer; transition:transform .15s ease,filter .15s ease,box-shadow .15s ease; animation:arena-cta-pulse 2.8s ease-in-out infinite; }
.arena-card > button:not(:disabled)::after { content:"  ›"; font-size:20px; line-height:0; }
.arena-card > button:hover { transform:translateY(-2px) scale(1.035); filter:brightness(1.12); box-shadow:0 0 0 5px color-mix(in srgb,var(--arena-color) 15%,transparent),0 16px 34px color-mix(in srgb,var(--arena-color) 46%,transparent),inset 0 1px rgba(255,255,255,.42),inset 0 -4px rgba(9,10,42,.22); }
.arena-card > button:active { transform:translateY(1px) scale(.98); }
.arena-card > button:disabled { border-color:rgba(145,155,205,.18); color:#929bc5; background:linear-gradient(145deg,rgba(75,82,133,.42),rgba(31,35,83,.62)); box-shadow:inset 0 1px rgba(255,255,255,.06); text-shadow:none; }
@keyframes arena-cta-pulse { 0%,100% { box-shadow:0 0 0 4px rgba(255,207,61,.14),0 12px 28px rgba(255,91,77,.34),inset 0 1px rgba(255,255,255,.62),inset 0 -4px rgba(157,52,48,.18); } 50% { box-shadow:0 0 0 7px rgba(255,218,73,.08),0 16px 36px rgba(255,91,77,.55),inset 0 1px rgba(255,255,255,.7),inset 0 -4px rgba(157,52,48,.14); } }
.arena-card > button:disabled { animation:none; cursor:not-allowed; }
.arena-state { display:grid; place-items:center; gap:10px; min-height:150px; padding:20px; border:1px dashed rgba(255,255,255,.17); border-radius:16px; color:white; text-align:center; }
.arena-state span:not(.matchmaking-spinner) { color:#aeb8dc; font-size:13px; }
.arena-state.is-error strong { color:#ff9da3; }
.arena-confirm-modal { z-index:40; }
.arena-confirm-sheet { position:static; max-width:420px; text-align:center; }
.arena-confirm-sheet > #arena-confirm-close { position:absolute; top:max(14px,env(safe-area-inset-top)); right:14px; z-index:3; margin:0; }
.arena-confirm-sheet h2 { margin:8px 0 4px; color:white; font-size:30px; }
.arena-confirm-sheet > p { color:#b9c2e2; }
.arena-confirm-emblem { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 14px; border:2px solid color-mix(in srgb,var(--arena-color) 70%,white); border-radius:24px; color:white; background:var(--arena-color); box-shadow:0 15px 35px color-mix(in srgb,var(--arena-color) 40%,transparent); font-size:38px; font-weight:900; }
.arena-confirm-economy { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.arena-confirm-economy { grid-template-columns:1fr; }
.arena-confirm-economy div:has(#arena-confirm-prize) { display:none; }
.arena-confirm-economy div { padding:12px; border-radius:14px; background:rgba(255,255,255,.07); }
.arena-confirm-economy dt { color:#8f99c8; font-size:11px; }
.arena-confirm-economy dd { margin:5px 0 0; color:#ffe46f; font-size:22px; font-weight:900; }
.arena-reservation-note { font-size:12px; line-height:1.45; }

@media (max-width:560px) {
  .arena-panel { padding:0; place-items:stretch; }
  .arena-dialog { width:100%; height:100%; max-height:100%; min-height:0; border-radius:0; padding:16px 14px max(12px,env(safe-area-inset-bottom)); }
  .arena-card { grid-template-columns:68px minmax(0,1fr); align-items:start; gap:12px; min-height:270px; padding:14px; }
  .arena-card .arena-art { align-self:center; }
  .arena-art { width:68px; height:68px; border-radius:20px; }
  .arena-art svg { width:54px; height:54px; }
  .arena-card > button { grid-column:2; width:auto; min-width:132px; min-height:46px; }
}

@media (max-width:390px) {
  .arena-card { grid-template-columns:58px minmax(0,1fr); gap:10px; min-height:266px; padding:12px; }
  .arena-art { width:58px; height:58px; border-radius:17px; }
  .arena-art svg { width:47px; height:47px; }
  .arena-card h3 { font-size:20px; }
  .arena-card > button { grid-column:1/-1; justify-self:end; min-width:124px; }
}

@media (prefers-reduced-motion:reduce) {
  .arena-card > button { animation:none; transition:none; }
}

.matchmaking-panel:not([hidden]) {
  display: grid;
}

.matchmaking-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(62, 222, 255, 0.18);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: matchmaking-spin 850ms linear infinite;
}

@keyframes matchmaking-spin {
  to { rotate: 1turn; }
}

.matchmaking-panel div {
  display: grid;
  gap: 3px;
}

.matchmaking-panel strong {
  color: #dffaff;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.matchmaking-panel small {
  color: #8490bf;
  font-family: system-ui, sans-serif;
  font-size: 8px;
  line-height: 1.35;
}

.matchmaking-panel button {
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: #ff9acb;
  cursor: pointer;
  font-size: 8px;
}

.load-status.is-loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  animation: dots 1s steps(4, end) infinite;
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

.duel-screen {
  --card-height: 101px;
  --avatar-size: 76px;
  --profile-width: 82px;
  --name-gap: 31px;
  --journal-height: 64px;
  padding-top: max(10px, env(safe-area-inset-top));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.duel-preparation { position: fixed; inset: 0; z-index: 80; padding: 34px 22px; display: grid; grid-template-rows: auto 1fr auto; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(72, 92, 191, .42), transparent 38%), linear-gradient(160deg, #121846, #27135a 58%, #11163f); color: white; text-align: center; transition: opacity 280ms ease, transform 280ms ease; }
.duel-preparation[hidden] { display: none; }
.duel-preparation.is-leaving { opacity: 0; transform: scale(1.025); }
.duel-preparation-kicker { color: var(--yellow); font-size: 13px; letter-spacing: .2em; }
.duel-preparation-fighters { position:relative; width: min(100%, 560px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; transform: translateY(-70px); }
.duel-preparation-fighters > article { min-width: 0; display: grid; justify-items: center; gap: 7px; transition: transform 680ms cubic-bezier(.16,.9,.28,1); }
.duel-preparation-fighters > i { color: var(--yellow); font-size: 24px; font-style: normal; font-weight: 900; }
.wager-badge { display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 12px; border:1px solid rgba(255,216,77,.55); border-radius:999px; background:rgba(14,18,48,.88); color:#fff1a8; font-size:12px; font-weight:900; letter-spacing:.06em; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.wager-badge[hidden] { display:none; }
.duel-preparation-fighters .wager-badge { position:absolute; top:calc(50% + 30px); left:50%; transform:translateX(-50%); white-space:nowrap; }
.scoreboard { position:relative; }
.wager-badge.is-match { position:absolute; z-index:3; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.wager-badge.is-result { width:max-content; max-width:100%; margin:10px auto; }
.xp-widget{display:flex;align-items:center;gap:8px;min-width:0}.xp-level-badge{display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,#5be2ff,#7657ff);font-size:13px;font-weight:1000}.xp-widget-body{min-width:0;flex:1;display:grid;gap:3px}.xp-widget-body strong{font-size:11px}.xp-widget-body small{font-size:9px;color:rgba(255,255,255,.65)}
.xp-track{height:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.12)}.xp-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#5be2ff,#4bf2aa);transition:width .45s ease}.xp-widget.is-loading{opacity:.72}.xp-widget.is-error{border-color:#ff789b}.xp-widget button{border:0;border-radius:8px;padding:5px 7px;background:#ff789b;color:white;font-size:10px;font-weight:900}
.result-xp{margin:12px auto;display:grid;justify-items:center;gap:4px;padding:12px;border:1px solid rgba(91,226,255,.35);border-radius:14px;background:rgba(91,226,255,.08)}.result-xp[hidden]{display:none}.result-xp span{font-size:22px;font-weight:1000;color:#5be2ff}.result-xp em{font-style:normal;font-weight:1000;color:#ffe36c;animation:xp-level-up .7s ease both}@keyframes xp-level-up{from{transform:scale(.6);opacity:0}60%{transform:scale(1.18)}to{transform:scale(1);opacity:1}}
.duel-preparation.is-searching .preparation-fighter.is-player { transform: translateX(calc(50% + 26px)); }
.preparation-versus { opacity: 0; transform: scale(.55); transition: opacity 300ms ease 380ms, transform 480ms cubic-bezier(.16,1.25,.3,1) 380ms; }
.preparation-fighter.is-opponent { opacity: 0; transform: translateX(-28px) scale(.82); transition: opacity 420ms ease 480ms, transform 620ms cubic-bezier(.16,1,.3,1) 480ms !important; }
.duel-preparation.is-matched .preparation-versus { opacity: 1; transform: scale(1); }
.duel-preparation.is-matched .preparation-fighter.is-opponent { opacity: 1; transform: translateX(0) scale(1); }
.preparation-avatar { width: 92px; height: 92px; display: grid; place-items: center; border: 5px solid; border-radius: 50%; font-size: 38px; box-shadow: 0 14px 35px rgba(0,0,0,.3); }
.preparation-avatar.is-player { border-color: #d32fc7; background: linear-gradient(145deg, #f0a13c, #eb4f80); }
.preparation-avatar.is-opponent { border-color: #3489ef; background: linear-gradient(145deg, #2c386d, #17204b); }
.duel-preparation-fighters article > strong { max-width: 150px; overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.duel-preparation-fighters article > span { color: #aab4e4; font-size: 12px; }
.duel-preparation-fighters ul { min-height: 48px; margin: 5px 0 0; padding: 0; display: grid; align-content: start; gap: 5px; list-style: none; }
.duel-preparation-fighters li { color: #eef1ff; font-size: 12px; line-height: 1.25; }
.duel-preparation-fighters li::before { content: "• "; color: var(--yellow); }
.preparation-fighter.is-opponent > strong,
.preparation-fighter.is-opponent > span,
.preparation-fighter.is-opponent li { opacity: 0; transform: translateY(9px); }
.duel-preparation.is-matched .preparation-fighter.is-opponent > strong,
.duel-preparation.is-matched .preparation-fighter.is-opponent > span,
.duel-preparation.is-matched .preparation-fighter.is-opponent li { animation: preparation-line-in 440ms ease both; }
.duel-preparation.is-matched .preparation-fighter.is-opponent > strong { animation-delay: 780ms; }
.duel-preparation.is-matched .preparation-fighter.is-opponent > span { animation-delay: 940ms; }
.duel-preparation.is-matched .preparation-fighter.is-opponent li:nth-child(1) { animation-delay: 1100ms; }
.duel-preparation.is-matched .preparation-fighter.is-opponent li:nth-child(2) { animation-delay: 1260ms; }
@keyframes preparation-line-in { to { opacity: 1; transform: translateY(0); } }
.duel-preparation-ready { color: white; font-size: 15px; letter-spacing: .15em; }
.duel-preparation.is-searching .duel-preparation-ready { animation: rematch-status-pulse 700ms ease-in-out infinite alternate; }
.duel-preparation.is-error .duel-preparation-ready{color:#ffb9b9;max-width:min(90vw,560px);letter-spacing:.08em;white-space:normal}
.duel-preparation.is-error .preparation-fighter.is-opponent{opacity:1;transform:none}
.duel-preparation.is-error .preparation-fighter.is-opponent>span{max-width:min(78vw,420px);overflow:visible;text-overflow:clip;white-space:normal;font-size:max(12px,1em)}
.duel-preparation-footer { position: absolute; top: calc(50% + 68px); right: 0; left: 0; display: grid; justify-items: center; gap: 12px; }
.duel-preparation-error-detail{max-width:min(88vw,620px);margin:0;padding:10px 14px;border:1px solid rgba(255,185,185,.45);border-radius:10px;background:rgba(70,12,28,.72);color:#ffe4e4;font-size:max(15px,1em);line-height:1.35;overflow:visible;text-overflow:clip;white-space:normal}
.duel-preparation-countdown { min-height: 80px; color: var(--yellow); font-size: clamp(64px, 18vw, 104px); line-height: .8; }
.duel-preparation-countdown.is-starting { font-size: clamp(34px, 8vw, 56px); letter-spacing: .05em; line-height: 1; }
.duel-preparation:not(.is-counting-down) .duel-preparation-countdown { visibility: hidden; }
.duel-preparation-footer .text-button { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; width: max-content; color: #aeb8e6; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .duel-preparation-fighters > article,
  .preparation-versus,
  .preparation-fighter.is-opponent { transition-duration: 1ms !important; }
  .duel-preparation.is-matched .preparation-fighter.is-opponent > strong,
  .duel-preparation.is-matched .preparation-fighter.is-opponent > span,
  .duel-preparation.is-matched .preparation-fighter.is-opponent li { animation-duration: 1ms; }
}

.duel-toolbar {
  min-height: 58px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
}

.duel-toolbar .round-label {
  grid-column: 2;
}

.duel-toolbar .duel-coin-balance {
  min-width: 70px;
  position: absolute;
  top: 10px;
  left: 64px;
}

.toolbar-actions {
  display: flex;
  gap: 6px;
}

.global-actions {
  position: absolute;
  top: var(--menu-controls-top);
  right: 18px;
  z-index: 40;
}

.fullscreen-hint {
  width: 142px;
  max-width: calc(100vw - 36px);
  padding: 8px 10px;
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  border: 1px solid rgba(31, 37, 70, 0.12);
  border-radius: 11px;
  background: #f3f4f8;
  box-shadow: 0 9px 24px rgba(4, 6, 34, 0.2);
  color: #34364e;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  animation: fullscreen-hint-in 500ms cubic-bezier(.16, 1, .3, 1) both;
}

.fullscreen-hint::before {
  width: 0;
  height: 0;
  position: absolute;
  top: -6px;
  right: 12px;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #f3f4f8;
  border-left: 7px solid transparent;
  content: "";
}

.fullscreen-button.is-hinted {
  border-color: rgba(255, 221, 69, 0.88);
  background: rgba(255, 221, 69, 0.14);
  box-shadow: 0 0 0 3px rgba(255, 221, 69, 0.14), 0 6px 18px rgba(255, 210, 31, 0.22);
  color: #fff0a0;
  animation: fullscreen-button-hint 1.2s ease-in-out infinite alternate;
}

@keyframes fullscreen-button-hint {
  from { transform: translateY(0); }
  to { transform: translateY(-1px); }
}

.game-shell:has(#menu-screen[hidden]) .fullscreen-hint {
  display: none;
}

.game-shell:has(.profile-modal:not([hidden])) > .global-actions {
  display: none;
}

@keyframes fullscreen-hint-in {
  from { opacity: 0; transform: translateY(-5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-button {
  position: absolute;
  top: var(--menu-controls-top);
  left: 18px;
  z-index: 40;
}

.coin-balance {
  min-width: 70px;
  height: 38px;
  padding: 0 12px 0 9px;
  position: absolute;
  top: var(--menu-controls-top);
  left: 64px;
  z-index: 40;
  border: 1px solid rgba(255, 221, 69, 0.22);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 205, 28, 0.09);
  color: #fff0a0;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.currency-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-block;
  background: center / contain no-repeat;
}
.currency-icon.size-16 { width: 16px; height: 16px; }
.currency-icon.size-20 { width: 20px; height: 20px; }
.currency-icon.size-24 { width: 24px; height: 24px; }
.currency-icon.is-coin {
  background-image: url("/assets/ui/currency-coin-placeholder.svg");
  filter: drop-shadow(0 2px 3px rgba(235, 150, 0, 0.45));
}
.currency-icon.is-crystal { background-image: url("/assets/ui/currency-crystal-placeholder.svg"); }

.profile-economy-compact{width:100%;margin:0 0 18px;padding:10px 12px;display:grid;grid-template-columns:20px minmax(0,1fr) auto 18px;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(7,10,61,.3);color:white;cursor:pointer;text-align:left}.profile-economy-compact:hover{border-color:rgba(91,226,255,.35);background:rgba(91,226,255,.06)}.profile-economy-compact>span:nth-child(2){min-width:0;display:grid;gap:2px}.profile-economy-compact small{color:#8f9cc8;font-size:8px;font-weight:900;letter-spacing:.08em}.profile-economy-compact strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.profile-economy-compact>b{font-family:system-ui,sans-serif;font-size:12px}.profile-economy-compact>b.is-positive{color:#78e69c}.profile-economy-compact>b.is-negative{color:#ff8d82}.profile-economy-compact>i{color:var(--cyan);font-family:system-ui,sans-serif;font-size:24px;font-style:normal;text-align:right}
.profile-economy-list { display: grid; gap: 7px; }
.profile-economy-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.055); font-size: 12px; }
.profile-economy-row.is-positive strong { color: #78e69c; }
.profile-economy-row.is-negative strong { color: #ff8d82; }
.profile-economy-row.is-refunded { box-shadow: inset 3px 0 #70d9ff; }
.profile-economy-row.is-refunded strong { color: #70d9ff; }
.profile-economy-empty { margin: 0; color: rgba(255,255,255,.55); font-size: 12px; }

.profile-glyph {
  width: 17px;
  height: 17px;
  position: relative;
  display: block;
  margin: 0 auto;
}

.profile-glyph::before,
.profile-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50%;
  border: 2px solid currentColor;
}

.profile-glyph::before {
  width: 6px;
  height: 6px;
  top: 0;
  border-radius: 50%;
}

.profile-glyph::after {
  width: 14px;
  height: 7px;
  bottom: 0;
  border-radius: 9px 9px 5px 5px;
}

.icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  color: #bfc9f2;
  font-size: 28px;
  line-height: 1;
}

.profile-modal {
  position: absolute;
  inset: 0;
  z-index: 100;
  padding:
    max(18px, env(safe-area-inset-top))
    18px
    max(18px, env(safe-area-inset-bottom));
  place-items: center;
  overflow-y: auto;
  background: rgba(5, 7, 42, 0.76);
  backdrop-filter: blur(15px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-modal:not([hidden]) {
  display: grid;
  animation: profile-modal-in 180ms ease-out;
}

@keyframes profile-modal-in {
  from { opacity: 0; }
}

.profile-dialog {
  width: min(100%, 720px);
  max-height: 100%;
  padding: clamp(20px, 4dvh, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 25px;
  background:
    radial-gradient(circle at 10% 0%, rgba(55, 219, 255, 0.18), transparent 36%),
    linear-gradient(155deg, rgba(35, 31, 123, 0.98), rgba(13, 16, 75, 0.98));
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.09);
}

.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.profile-header span {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.profile-header h2 {
  margin: 5px 0 0;
  font-size: 28px;
}

.profile-close-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: #aeb8e0;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.profile-player {
  margin: 20px 0;
  width: 100%;
  padding: clamp(14px,3vw,20px);
  display: grid;
  grid-template-columns: clamp(78px,16vw,112px) minmax(0,1fr);
  align-items: stretch;
  gap: clamp(13px,3vw,20px);
  border: 1px solid rgba(91,226,255,.22);
  border-radius: 22px;
  background: linear-gradient(135deg,rgba(19,29,103,.82),rgba(7,10,61,.68));
  box-shadow: inset 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.18);
}

.profile-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #2b75df, #7b36dc);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
  font-size: 28px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.profile-avatar-edit{position:relative;width:100%;height:max-content;padding:0;align-self:center;border:0;border-radius:16px;background:transparent;color:white;cursor:pointer}.profile-avatar-edit:hover .profile-avatar{box-shadow:0 0 0 2px rgba(91,226,255,.55),inset 0 1px rgba(255,255,255,.2)}.profile-avatar-edit:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.profile-avatar-edit-icon{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:30px;height:30px;border:2px solid #20206f;border-radius:10px;background:linear-gradient(145deg,#5be2ff,#7657ff);box-shadow:0 5px 14px rgba(0,0,0,.35);font-family:system-ui,sans-serif;font-size:17px;font-weight:900;line-height:1}

.profile-avatar-shop,
.profile-name-editor,
.profile-economy-history {
  position: fixed;
  z-index: 20;
  inset: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(5,7,42,.82);
  backdrop-filter: blur(16px);
  margin:0;
}

.profile-avatar-shop[hidden],.profile-name-editor[hidden],.profile-economy-history[hidden] { display: none; }

.profile-avatar-picker-card{width:min(100%,680px);max-height:min(820px,calc(var(--app-viewport-height) - 36px));padding:clamp(16px,3vw,24px);overflow:auto;border:1px solid rgba(91,226,255,.28);border-radius:24px;background:linear-gradient(155deg,rgba(35,31,123,.99),rgba(13,16,75,.99));box-shadow:0 28px 75px rgba(0,0,0,.5)}
.profile-name-editor-card{width:min(100%,480px);padding:clamp(18px,4vw,26px);border:1px solid rgba(91,226,255,.28);border-radius:24px;background:linear-gradient(155deg,rgba(35,31,123,.99),rgba(13,16,75,.99));box-shadow:0 28px 75px rgba(0,0,0,.5)}
.profile-economy-history-card{width:min(100%,560px);max-height:min(720px,calc(var(--app-viewport-height) - 36px));padding:clamp(18px,4vw,26px);display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid rgba(91,226,255,.28);border-radius:24px;background:linear-gradient(155deg,rgba(35,31,123,.99),rgba(13,16,75,.99));box-shadow:0 28px 75px rgba(0,0,0,.5)}.profile-economy-history-card .profile-economy-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}

.profile-avatar-shop-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.profile-avatar-shop-heading h3 { margin: 0; }
.profile-avatar-shop-heading small{display:block;margin-bottom:5px;color:var(--cyan);font-size:8px;letter-spacing:.16em}

.profile-avatar-balances {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 4px 9px;
  color: #aeb8e0;
  font-family: system-ui, sans-serif;
  font-size: 9px;
}

.profile-avatar-balances b { color: var(--yellow); }

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  gap: 12px;
}
.inventory-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(92px,100%),1fr));gap:8px;margin:14px 0;padding:2px}.inventory-tabs button{min-width:0;min-height:38px;padding:8px 10px;border:1px solid rgba(91,226,255,.3);border-radius:12px;background:#171956;color:#fff;font-size:10px;font-weight:900;white-space:normal;overflow-wrap:anywhere}.inventory-tabs button.is-active{background:linear-gradient(135deg,#26bfe0,#7752e9);border-color:#8eecff}.inventory-item-card{display:grid;align-content:start;gap:7px;min-width:0;padding:4px;border:0;border-radius:12px;background:transparent;color:#fff;text-align:left}.inventory-item-card img{box-sizing:border-box;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border:2px solid #5560a0;border-radius:16px;background:radial-gradient(circle,#34348d,#111548)}.inventory-item-card strong{font-size:15px;line-height:1.2;overflow-wrap:anywhere}.inventory-item-card small{font-size:10px;line-height:1.25;color:#75f0c5;overflow-wrap:anywhere}.inventory-item-card:disabled{opacity:.7}.inventory-item-card.rarity-rare img{border-color:#39bfff}.inventory-item-card.rarity-epic img{border-color:#b16cff}.inventory-item-card.rarity-legendary img{border-color:#ffd85a;box-shadow:0 0 18px rgba(255,216,90,.15)}
.ring-card-progress{display:grid;gap:5px;min-width:0;padding:7px;border:1px solid rgba(91,226,255,.22);border-radius:10px;background:rgba(14,18,68,.72)}.ring-card-progress>div:first-child{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 6px}.ring-card-progress strong,.ring-card-progress small{font-size:10px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}.ring-card-progress small{color:#b9c5e8}.ring-card-segments{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;min-height:10px}.ring-card-segments i{display:block;min-width:0;height:10px;border:1px solid rgba(126,148,216,.45);border-radius:3px;background:#252b66;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}.ring-card-segments i.is-filled{border-color:#9af7ff;background:linear-gradient(180deg,#9af7ff,#37cbea);box-shadow:0 0 8px rgba(75,226,255,.72)}
.profile-avatar-picker-card .inventory-tabs{position:sticky;top:-2px;z-index:4;padding:6px 2px;background:linear-gradient(180deg,#231f7b 78%,rgba(35,31,123,0))}
.collection-summary{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px;padding:16px;border:1px solid rgba(110,235,255,.35);border-radius:20px;background:linear-gradient(135deg,rgba(36,35,121,.94),rgba(14,99,128,.62))}.collection-summary h4{margin:3px 0;font-size:20px}.collection-summary p{margin:0;font-size:15px}.collection-summary>strong{align-self:start;padding:7px 10px;border-radius:999px;background:#80f3d0;color:#10234a;font-size:10px}.collection-progress-track{grid-column:1/-1;height:10px;overflow:hidden;border-radius:999px;background:rgba(5,9,52,.7)}.collection-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65e8ff,#8cffb9);transition:width .3s ease}.collection-milestones{grid-column:1/-1;display:grid;gap:6px}.collection-milestones span{font-size:10px;color:#b9c5e8;overflow-wrap:anywhere}.collection-milestones span.is-complete{color:#8cffb9}.profile-cosmetic-showcase{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}.profile-cosmetic-showcase span,.profile-cosmetic-showcase strong{padding:4px 7px;border-radius:999px;background:rgba(75,230,255,.14);color:#8ef0ff;font-size:10px;overflow-wrap:anywhere}

.profile-avatar-card {
  min-width: 0;
  padding: 4px;
  display: grid;
  align-content: start;
  align-self: start;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: white;
  cursor: pointer;
}

.profile-avatar-card:hover img { box-shadow:0 0 0 2px rgba(56,220,255,.5); }
.profile-avatar-card.is-selected img { box-shadow:0 0 0 2px var(--green),0 0 18px rgba(75,242,170,.18); }
.profile-avatar-card:disabled { cursor: wait; opacity: 0.62; }

.profile-avatar-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  border-radius: 8px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(5,7,42,.4);
  object-fit: contain;
}

.profile-avatar-card strong,
.profile-avatar-card small {
  overflow: hidden;
  font-family: system-ui, sans-serif;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-avatar-card strong { font-size: 15px; }
.profile-avatar-card small { font-size: 10px; }
.profile-avatar-card small { color: var(--yellow); }
.profile-avatar-card.is-owned small { color: var(--green); }

.profile-avatar-status {
  min-height: 16px;
  margin: 9px 0 0 !important;
  color: #8cddff !important;
  font-family: system-ui, sans-serif;
  font-size: 9px !important;
  text-align: center;
}

.profile-avatar-status.is-error { color: #ff9aba !important; }

.has-avatar-image {
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}

.preparation-showcase{display:block;max-width:100%;color:#8ef0ff;font-size:10px;text-align:center;overflow-wrap:anywhere}
.cosmetic-frame-frame-neon-orbit{position:relative;isolation:isolate;box-shadow:0 0 0 3px #59e7ff,0 0 0 6px #8c57ff,0 0 20px rgba(89,231,255,.7)!important}
.cosmetic-frame-frame-neon-orbit::after{content:"";position:absolute;inset:-12%;z-index:2;border-radius:18%;background:url("./assets/items/frame_neon_orbit.svg") center/contain no-repeat;pointer-events:none}
.cosmetic-frame-frame-showdown-live-test{position:relative;isolation:isolate;overflow:visible!important;box-shadow:0 0 0 3px #7dff78,0 0 0 7px #31c8ff,0 0 24px rgba(49,200,255,.75)!important}.cosmetic-frame-frame-showdown-live-test::after{content:"";position:absolute;inset:-14%;z-index:3;background:url("./assets/items/frame_showdown_live_test.svg") center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 7px rgba(125,255,120,.7))}
.cosmetic-frame-frame-showdown-zero{position:relative;isolation:isolate;overflow:visible!important;box-shadow:0 0 0 3px #f4cb68,0 0 0 7px #7a56ff,0 0 24px rgba(122,86,255,.72)!important}.cosmetic-frame-frame-showdown-zero::after{content:"";position:absolute;inset:-14%;z-index:3;background:url("./assets/items/frame_showdown_zero.svg") center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 7px rgba(244,203,104,.65))}
@keyframes cosmetic-nova-in{from{opacity:0;transform:scale(.65) rotate(-12deg)}to{opacity:.32;transform:scale(1) rotate(0)}}
@keyframes cosmetic-showdown-victory-in{from{opacity:0;transform:scale(.55) rotate(-8deg)}to{opacity:.38;transform:scale(1) rotate(0)}}
.equipped-emote-button{display:flex;align-items:center;gap:7px;min-height:44px;padding:7px 12px;border:1px solid rgba(91,226,255,.55);border-radius:14px;background:#171956;color:#fff;font-size:10px;font-weight:900}.equipped-emote-button[hidden]{display:none}.equipped-emote-button img{width:30px;height:30px}.equipped-emote-bubble{position:absolute;left:50%;top:-18px;z-index:8;translate:-50% -100%;align-items:center;gap:8px;padding:9px 13px;border-radius:18px;background:#fff;color:#24205d;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:15px}.equipped-emote-bubble:not([hidden]){display:flex}.equipped-emote-bubble img{width:38px;height:38px}.equipped-emote-bubble.is-showing{animation:equipped-emote-pop 1.8s ease both}@keyframes equipped-emote-pop{0%{opacity:0;transform:scale(.7) translateY(8px)}15%,75%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.9) translateY(-8px)}}
.competitor-profile{overflow:visible}.duel-avatar-emote-trigger{appearance:none;padding:0;color:inherit;font:inherit;cursor:pointer;transition:filter .3s ease}.duel-avatar-emote-trigger:disabled{cursor:default}.avatar.is-emote-dimmed{filter:brightness(0)}.duel-emote-menu{position:absolute;right:0;bottom:calc(100% + 7px);z-index:18;grid-auto-flow:column;grid-auto-columns:42px;gap:6px;padding:7px;border:1px solid rgba(116,232,255,.45);border-radius:13px;background:rgba(12,15,69,.97);box-shadow:0 10px 26px rgba(0,0,0,.38)}.duel-emote-menu:not([hidden]){display:grid}.duel-emote-menu button{width:42px;height:42px;padding:3px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:#28286f}.duel-emote-menu img{width:100%;height:100%;object-fit:contain}.duel-emote-pop{position:absolute;inset:15%;z-index:19;pointer-events:none;opacity:0;transform:scale(.3);transition:opacity .3s ease,transform .3s ease}.duel-emote-pop img{width:100%;height:100%;object-fit:contain}.duel-emote-pop.is-showing{opacity:1;transform:scale(1)}
.duel-emote-pop.is-fading{opacity:0;transform:scale(.3)}
.duel-emote-pop .emote-atlas-frame{display:block;width:100%;height:100%;background-repeat:no-repeat}
.competitor-profile>.avatar.is-emote-dimmed{filter:none}
.competitor-profile>.avatar::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:#000;opacity:0;pointer-events:none;transition:opacity .3s ease}
.competitor-profile>.avatar.is-emote-dimmed::before{opacity:1}
@media(prefers-reduced-motion:reduce){.equipped-emote-bubble.is-showing,.duel-emote-pop.is-showing{animation:none}.duel-avatar-emote-trigger,.duel-emote-pop{transition:none}.equipped-emote-button img.is-animated-emote,.equipped-emote-bubble img.is-animated-emote,.duel-emote-menu img.is-animated-emote,.duel-emote-pop img.is-animated-emote{display:none}}
@media(prefers-reduced-motion:reduce){.competitor-profile>.avatar::before{transition:none}}
@media(max-width:520px){.profile-avatar-shop,.profile-name-editor,.profile-economy-history{padding:10px}.profile-avatar-picker-card{max-height:calc(var(--app-viewport-height) - 20px);padding:14px;border-radius:19px}.profile-avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}}

.player-card-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
}

.profile-name-edit strong {
  overflow: hidden;
  font-family: system-ui, sans-serif;
  font-size: clamp(16px,3vw,22px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-name-edit{width:100%;min-width:0;padding:7px 9px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid transparent;border-radius:11px;background:rgba(255,255,255,.035);color:#fff;cursor:pointer;text-align:left}.profile-name-edit:hover{border-color:rgba(91,226,255,.35);background:rgba(91,226,255,.07)}.profile-name-edit:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.profile-name-edit>span{flex:0 0 auto;display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(145deg,#5be2ff,#7657ff);font-family:system-ui,sans-serif;font-size:15px;font-weight:900}.profile-name-edit:disabled{cursor:default}.profile-name-edit:disabled>span{display:none}

.player-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.player-card-stats>span{min-width:0;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.055);display:grid;gap:2px}.player-card-stats small{color:#8f9cc8;font-size:8px;font-weight:900;letter-spacing:.08em}.player-card-stats b{overflow:hidden;color:#fff;font-family:system-ui,sans-serif;font-size:13px;text-overflow:ellipsis}
.profile-trophy-showcase{padding:14px;border:1px solid rgba(255,214,89,.22);border-radius:16px;background:linear-gradient(145deg,rgba(255,199,54,.08),rgba(85,68,207,.12));display:grid;gap:12px}.profile-trophy-showcase>header{display:flex;align-items:end;justify-content:space-between;gap:12px}.profile-trophy-showcase>header span{display:grid}.profile-trophy-showcase small{color:#9da8d5;font-size:8px;font-weight:900;letter-spacing:.1em}.profile-trophy-showcase>header strong{font-size:18px}.profile-trophy-showcase>header b{color:var(--yellow);font-size:18px}.profile-trophy-road{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 7px}.trophy-road-node{min-width:82px;padding:8px;border-radius:11px;background:rgba(255,255,255,.05);display:grid;place-items:center;gap:2px;opacity:.48}.trophy-road-node.is-reached{opacity:1;box-shadow:inset 0 0 0 1px rgba(255,214,89,.25)}.trophy-road-node.is-claimed i{color:var(--green)}.trophy-road-node i{font-style:normal}.trophy-road-node b{font-size:12px}.trophy-road-node small{font-size:7px}.profile-medals-label{display:block;margin-bottom:7px}.profile-arena-medals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.arena-medal-card{min-width:0;padding:8px 5px;border-radius:10px;background:rgba(255,255,255,.045);display:grid;place-items:center;gap:3px;text-align:center}.arena-medal-card i{font-size:23px;font-style:normal;color:var(--yellow)}.arena-medal-card.is-locked{filter:grayscale(1);opacity:.46}.arena-medal-card small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arena-medal-card b{font-size:8px}.result-trophies{margin-top:12px;padding:10px 14px;border-radius:13px;background:rgba(255,205,61,.09);display:flex;align-items:center;justify-content:center;gap:10px}.result-trophies[hidden]{display:none}.result-trophies span{color:var(--yellow);font-size:22px;font-weight:900}.result-trophies strong{font-size:10px}.result-trophies em{color:var(--green);font-size:10px;font-style:normal;font-weight:900}
@media(max-width:480px){.profile-dialog{padding:16px}.profile-player{grid-template-columns:68px minmax(0,1fr);gap:12px}.player-card-stats>span{padding:6px}.player-card-stats b{font-size:10px}.player-card-stats small{font-size:6px}.profile-arena-medals{grid-template-columns:repeat(2,minmax(0,1fr))}}

.profile-account-view h3 {
  margin: 12px 0 8px;
  font-size: 18px;
}

.profile-account-view > p {
  margin: 0 0 17px;
  color: #b5bfdf;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

.profile-account-badge {
  width: fit-content;
  padding: 6px 9px;
  display: block;
  border-radius: 8px;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.profile-account-badge.is-temporary {
  background: rgba(255, 194, 61, 0.12);
  color: #ffd36c;
}

.profile-account-badge.is-protected {
  background: rgba(75, 242, 170, 0.12);
  color: var(--green);
}

.profile-account-badge.is-invite {
  background: rgba(56, 220, 255, 0.12);
  color: var(--cyan);
}

#profile-invite-action .primary-button {
  margin-top: 12px;
}

.profile-code-separator {
  margin: 16px 0 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6f7aaa;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.profile-code-separator::before,
.profile-code-separator::after {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.09);
  content: "";
}

.profile-code-copy {
  margin: -2px 3px 8px !important;
  color: #929cc5 !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

.profile-code-form .primary-button {
  margin-top: 12px;
}

.profile-name-form {
  padding-top: 2px;
}

.profile-name-form .primary-button {
  margin-top: 12px;
}

.profile-continue-button {
  min-height: 56px;
  margin-top: 20px;
}

.profile-email-status,
.profile-name-status {
  min-height: 18px;
  margin: 12px 3px 0 !important;
  color: #8cddff !important;
  font-size: 10px !important;
  text-align: center;
}

.profile-email-status.is-error,
.profile-name-status.is-error {
  color: #ff9aba !important;
}

.profile-login-toggle {
  width: 100%;
  margin-top: 4px;
}

.profile-confirmed-email {
  margin: 0 0 9px;
  display: block;
  color: #dffaff;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.friend-challenge-modal {
  position: absolute;
}

.friend-challenge-dialog {
  position: relative;
  width: min(100%, 380px);
  text-align: left;
}

.friend-challenge-dialog > .profile-close-button { position:absolute; top:12px; right:12px; }

.friend-challenge-kicker {
  color: var(--cyan);
  font-size: 8px;
  letter-spacing: 0.2em;
}

.friend-challenge-player {
  margin: 17px 0 21px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.friend-challenge-player > div {
  min-width: 0;
}

.friend-challenge-player h2 {
  margin: 0 0 6px;
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-challenge-player p {
  margin: 0;
  color: #aab4dc;
  font-family: system-ui, sans-serif;
  font-size: 11px;
}

.friend-challenge-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 8px;
}

.friend-challenge-actions .primary-button,
.friend-challenge-actions .secondary-button {
  min-height: 43px;
  margin: 0;
}

.sound-button {
  justify-self: end;
  font-size: 17px;
}

.rules-button {
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 700;
}

.round-label {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.round-label span {
  color: #8d97c8;
  font-size: 15px;
  letter-spacing: 0.19em;
}

.round-label strong {
  color: var(--cyan);
  font-size: 15px;
  letter-spacing: 0.12em;
}

.scoreboard {
  margin: 0 19px;
  position: relative;
}
.competitor {
  height: var(--card-height);
  min-height: var(--card-height);
  padding-top: 13px;
  padding-bottom: 11px;
  position: relative;
  display: block;
  overflow: visible;
  border: 0;
  box-shadow: 0 13px 24px rgba(0, 0, 0, 0.12);
}

.competitor.opponent {
  padding-right: 10px;
  padding-left: 88px;
  margin-top: var(--name-gap);
  border-radius: 16px;
  background: #2475da;
}

.competitor.player {
  padding-right: 88px;
  padding-left: 10px;
  margin-top: 54px;
  border-radius: 16px;
  background: #c321b9;
}

.duel-screen.is-marathon .competitor.opponent {
  display: none;
}

.duel-screen.is-marathon .scoreboard {
  padding-top: 100px;
  margin-bottom: 16px;
}

.duel-screen.is-marathon .competitor.player {
  margin-top: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(64, 224, 255, 0.18), transparent 55%),
    linear-gradient(105deg, #7d2bc9, #d72baa);
}

.duel-screen.is-marathon .timer-wrap {
  box-shadow: none;
}

.context-help-button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(126, 235, 255, .55);
  border-radius: 50%;
  background: rgba(51, 58, 145, .78);
  color: #aaf2ff;
  font: 900 16px/1 system-ui, sans-serif;
  box-shadow: 0 5px 14px rgba(4, 7, 45, .24);
}
.context-help-button:hover,
.context-help-button:focus-visible { background: #4262d1; color: #fff; outline: 2px solid rgba(148, 240, 255, .45); outline-offset: 2px; }
.context-help-title-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; max-width:100%; }
.context-help-title-row > :first-child { min-width:0; margin-block:0; overflow-wrap:anywhere; }
.context-help-title-row > .context-help-button { flex:0 0 30px; width:30px; height:30px; min-width:30px; min-height:30px; padding:0; border:1px solid rgba(126,235,255,.55); border-radius:50%; background:rgba(51,58,145,.78); color:#aaf2ff; font:900 16px/1 system-ui,sans-serif; }
.context-section-title { margin:2px 0 10px; color:#fff; font-size:20px; line-height:1.2; }
.menu-tab-panel > .context-help-title-row { margin:2px 2px 10px; }
.reward-section-heading > .context-help-title-row { flex:0 1 auto; }
.reward-section-heading > :last-child:not(.context-help-title-row) { margin-left:auto; }
#daily-modal .profile-dialog > .context-help-title-row { margin:4px 0 8px; }
.context-help-modal { z-index: 180; }
.context-help-dialog { width: min(100%, 620px); max-height: min(760px, calc(100dvh - 28px)); overflow-y: auto; }
.context-help-body { display: grid; gap: 10px; margin-top: 16px; }
.context-help-body p, .context-help-action p { margin: 0; color: #d8def5; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.context-help-action { display: grid; gap: 8px; margin-top: 18px; padding: 15px; border: 1px solid rgba(104, 238, 194, .34); border-radius: 16px; background: linear-gradient(135deg, rgba(27, 124, 111, .24), rgba(63, 61, 158, .25)); }
.context-help-action h3 { margin: 0; color: #8ff3cf; font-size: 17px; line-height: 1.25; }
@media (max-width: 520px) { .context-help-modal { padding: 10px; } .context-help-dialog { max-height: calc(var(--app-viewport-height) - 20px); padding: 16px; border-radius: 20px; } }

.golden-set-track[hidden] { display: none; }

.golden-set-track {
  --golden-set-rail-height: 49px;
  height: var(--card-height);
  margin-top: var(--name-gap);
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(4px, 1.6vw, 8px);
}

.golden-set-track::before {
  display: none;
}

.golden-set-track::after {
  display: none;
}

.golden-set-rail {
  height: var(--golden-set-rail-height);
  position: absolute;
  top: calc(100% + 5px);
  right: 10%;
  bottom: auto;
  left: 10%;
  z-index: 1;
  translate: 0 -50%;
  overflow: hidden;
  border: 2px solid rgba(139, 190, 255, .72);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: #101b55;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .42), 0 3px 10px rgba(0, 0, 0, .24);
}

.golden-set-rail span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(90deg, #ff9f2f, #ffd84f 58%, #fff4a0);
  box-shadow: 0 0 12px rgba(255, 210, 67, .82);
  transition: width 180ms ease;
}

.golden-set-rail::after {
  display: none;
}

.golden-set-node {
  min-width: 0;
  height: var(--card-height);
  padding: 6px 3px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  overflow: visible;
  border: 2px solid rgba(92, 150, 225, .62);
  border-radius: 16px;
  background: linear-gradient(160deg, #183d93, #20205f);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
  translate: 0 calc(var(--golden-set-rail-height) / -2);
}

.golden-set-node img {
  width: 27px;
  height: 27px;
  min-width: 0;
  max-width: none;
  max-height: calc(var(--card-height) - 27px);
  object-fit: contain;
}

.golden-set-node small {
  min-width: 0;
  color: #fff1a2;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.golden-set-node.is-reached {
  --golden-line-color: #ffe36c;
  border-color: #ffe36c;
  background: linear-gradient(160deg, #a45812, #6b3396);
}

.golden-set-node.is-maximum[data-golden-tier] {
  width: calc(var(--card-height) * .9);
  height: calc(var(--card-height) * .9);
  border-color: rgba(92, 150, 225, .62);
}

.golden-set-node[data-golden-tier] {
  width: calc(var(--card-height) * .6);
  height: calc(var(--card-height) * .6);
  padding: 3px 1px;
  justify-self: center;
  border-radius: 10px;
}

.golden-set-line {
  position: absolute;
  z-index: 0;
  top: calc(50% - var(--golden-set-rail-height) / 2);
  width: 1.6px;
  bottom: calc(-5px - var(--golden-set-rail-height) / 2);
  background: rgba(139, 190, 255, .72);
  pointer-events: none;
}

.golden-set-line[data-golden-line="1"] { left: calc(30% - .8px); }
.golden-set-line[data-golden-line="2"] { left: calc(50% - .8px); }
.golden-set-line[data-golden-line="3"] { left: calc(70% - .8px); }
.golden-set-line[data-golden-line="4"] { left: calc(90% - .8px); }
.golden-set-line.is-reached { background: #ffe36c; }

.golden-set-node.is-timer {
  width: calc(var(--card-height) * .9);
  height: calc(var(--card-height) * .9);
  padding: 0;
  justify-self: center;
  border-radius: 50%;
}

.golden-set-node.is-maximum img {
  width: 40.5px;
  height: 40.5px;
}

.golden-set-node.is-maximum small {
  font-size: 15px;
}

.duel-screen.is-golden-set .competitor.opponent { display: none; }
body.is-golden-set .global-actions { display: none; }
.duel-screen.is-golden-set .duel-toolbar > :not(#exit-button):not(.round-label) { display: none; }
.duel-screen.is-golden-set .round-label span { color: #ffe36c; }
.duel-screen.is-golden-set .round-label strong { display: none; }
.duel-screen.is-golden-set .play-actions { min-height: 55.6px; visibility: hidden; pointer-events: none; }
.duel-screen:not(.is-marathon) > .playfield {
  margin-top: calc(-1 * (var(--card-height) - 31px));
}
.duel-screen.is-golden-set > .playfield { grid-row: 4; }
.duel-screen.is-golden-set > .playfield {
  margin-top: calc(-1 * (var(--card-height) + 17px));
}
.duel-screen.is-result-recap > .playfield { margin-top: 0; }
.duel-screen.is-golden-set .timer-wrap {
  width: calc((100% - clamp(4px, 1.6vw, 8px) * 4) / 5);
  height: var(--card-height);
  top: calc(var(--name-gap) - 24.5px);
  left: 0;
  z-index: 5;
  translate: 0 0;
  border-radius: 16px;
  background: transparent;
  backdrop-filter: none;
}

.duel-screen.is-golden-set .timer-ring { display: none; }
.duel-screen.is-golden-set .timer { font-size: clamp(24px, 7vw, 32.4px); }
.duel-screen.is-golden-set .competitor.player {
  margin-top: 54px;
  padding-right: 101px;
  border: 2px solid rgba(92, 150, 225, .62);
  background: linear-gradient(160deg, #183d93, #20205f);
}
.duel-screen.is-golden-set .competitor.player .competitor-identity,
.duel-screen.is-golden-set .competitor.player .competitor-profile { display: none; }
.duel-screen.is-golden-set .competitor.player .word-journal { color: #ffe36c; }
.duel-screen.is-golden-set .competitor.player .score {
  width: 77px;
  min-width: 77px;
  height: 77px;
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
  border-radius: 16px;
  font-size: 33px;
}
.duel-screen.is-golden-set .avatar-player { border-color: #c321b9; }
.duel-screen.is-golden-set .result-score,
.duel-screen.is-golden-set .result-story-line,
.duel-screen.is-golden-set .result-skip-button { display: none; }
.duel-screen.is-golden-set #result-summary {
  display: block;
  margin: 0;
  color: #ffe36c;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}
.duel-screen.is-golden-set #result-summary:empty { display: none; }

.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  position: relative;
  display: grid;
  place-items: center;
  border: 4px solid;
  border-radius: 50%;
  color: white;
  font-size: 31px;
  box-shadow: none;
}

.avatar::after {
  display: none;
}

.competitor-profile {
  width: var(--profile-width);
  height: var(--profile-width);
  padding: 0;
  position: absolute;
  top: -32px;
  display: grid;
  place-items: center;
  z-index: 3;
}

.competitor.opponent .competitor-profile {
  left: -3px;
}

.competitor.player .competitor-profile {
  right: -3px;
}

.avatar-bot,
.avatar-opponent {
  border-color: #2475da;
  background: linear-gradient(145deg, #2c386d, #17204b);
}

.avatar-player {
  border-color: #c321b9;
  background: linear-gradient(145deg, #f0a13c, #eb4f80);
}

.competitor-copy {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.competitor-identity {
  width: auto;
  position: absolute;
  top: -22px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  pointer-events: none;
  text-align: left;
}

.competitor.opponent .competitor-identity strong {
  order: 1;
  margin-left: 81px;
}

.competitor.opponent .competitor-identity span {
  order: 2;
  margin-left: auto;
}

.competitor.player .competitor-identity span {
  margin-right: auto;
}

.competitor.player .competitor-identity strong {
  margin-right: 81px;
}

.competitor-identity span {
  color: var(--yellow);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.competitor-identity strong {
  max-width: 150px;
  overflow: hidden;
  color: white;
  font-size: 23px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-rating {
  display: none;
  color: var(--yellow);
  font-size: 15px;
  line-height: 1;
}

.competitor-rating::before {
  content: "РЕЙТИНГ ";
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.word-count {
  display: none;
}

.word-journal {
  width: 100%;
  min-height: 0;
  height: var(--journal-height);
  max-height: var(--journal-height);
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  color: white;
  font-size: 15.84px;
  line-height: 1.16;
  overflow-wrap: anywhere;
  text-align: left;
  touch-action: none;
  cursor: default;
  user-select: none;
}

.journal-word {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.journal-word:not(:last-child)::after {
  content: ", ";
}

.journal-word.is-masked {
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.08em;
}

.word-journal-empty {
  display: none;
}

@keyframes word-in {
  from { opacity: 0; translate: 0 5px; }
}

.score {
  width: 59px;
  min-width: 59px;
  height: 40px;
  padding: 0;
  position: absolute;
  bottom: 10px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(49, 36, 130, 0.4);
  color: var(--yellow);
  font-size: 25.6px;
  line-height: 1;
  text-shadow: none;
}

.competitor.opponent .score {
  left: 12px;
}

.competitor.player .score {
  right: 12px;
}

.timer-wrap {
  width: 79.2px;
  height: 79.2px;
  position: absolute;
  top: var(--timer-top, 50%);
  left: 50%;
  z-index: 3;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(125, 174, 238, 0.3);
  box-shadow: none;
  backdrop-filter: blur(3px);
}

.timer-wrap::before {
  display: none;
}

.timer-ring {
  position: absolute;
  inset: 2px;
  width: 75.2px;
  height: 75.2px;
  rotate: -90deg;
}

.timer-track,
.timer-progress {
  fill: none;
  stroke-width: 3;
}

.timer-track {
  stroke: transparent;
}

.timer-progress {
  stroke: transparent;
  stroke-linecap: round;
  transition: stroke-dashoffset 100ms linear;
}

.timer {
  position: relative;
  z-index: 2;
  color: var(--yellow);
  font-size: 32.4px;
  text-shadow: 0 3px 0 rgba(174, 104, 9, 0.45);
}

.timer.is-urgent {
  color: #fff;
  animation: urgent 700ms ease-in-out infinite alternate;
}

@keyframes urgent {
  to { scale: 1.14; }
}

.playfield {
  min-height: 0;
  padding:
    clamp(5px, 1.4dvh, 12px)
    20px
    max(clamp(8px, 2dvh, 18px), env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  position: relative;
}

.word-zone {
  min-height: 0;
  height: 100%;
  position: relative;
  align-self: stretch;
  text-align: center;
}

.word-zone > letter-circle-prefab {
  width: 100%;
  height: 100%;
}

.duel-ring-label {
  max-width: calc(100% - 36px);
  min-height: 20px;
  padding: 2px 8px;
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  z-index: 7;
  border-radius: 10px;
  background: rgba(10, 13, 58, 0.78);
  color: white;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  pointer-events: none;
}

.current-word {
  min-height: clamp(24px, 4dvh, 35px);
  position: absolute;
  top: var(--current-word-center-y, 64px);
  right: 20px;
  left: 20px;
  z-index: 5;
  color: white;
  font-size: 28px;
  letter-spacing: 0.12em;
  text-shadow: 0 0 20px rgba(49, 218, 255, 0.6);
  translate: 0 -50%;
}

.message {
  min-height: 18px;
  position: absolute;
  top: var(--message-center-y, 30px);
  right: 20px;
  left: 20px;
  z-index: 5;
  translate: 0 -50%;
  color: #8f9ac8;
  font-family: system-ui, sans-serif;
  font-size: 16.5px;
}

.message.is-success {
  color: var(--green);
  font-family: "Rounds", system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  text-shadow: 0 0 18px rgba(75, 242, 170, 0.3);
}
.message.is-error { color: #ff8fa8; }
.message.is-hint { color: var(--yellow); }

.letter-wheel {
  width: auto;
  height: min(100%, 400px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  translate: 0 var(--playfield-lift, 0);
  touch-action: none;
  user-select: none;
}

.wheel-glow {
  width: 72%;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(77, 221, 255, 0.08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 214, 255, 0.11), rgba(68, 67, 177, 0.04) 55%, transparent 70%);
  box-shadow: inset 0 0 55px rgba(74, 47, 194, 0.18);
}

#connector-canvas,
.letters {
  position: absolute;
  inset: 0;
}

#connector-canvas {
  z-index: 2;
  pointer-events: none;
}

.letter {
  width: 65px;
  height: 65px;
  position: absolute;
  z-index: 3;
  translate: -50% -50%;
  border: 2px solid rgba(196, 240, 255, 0.76);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.32), transparent 30%),
    #2b65a1;
  box-shadow:
    inset 0 -4px 8px rgba(4, 26, 68, 0.28),
    inset 0 2px 5px rgba(255, 255, 255, 0.18),
    0 4px 0 #174b80,
    0 8px 16px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  color: white;
  font-size: clamp(27px, 7.5vw, 35px);
  text-shadow: 0 2px 0 rgba(11, 54, 94, 0.7);
  transition: scale 110ms ease, filter 110ms ease;
}

.letter.is-selected {
  border-color: rgba(230, 255, 226, 0.9);
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.28), transparent 30%),
    #3ebf3b;
  box-shadow:
    inset 0 -4px 8px rgba(19, 85, 17, 0.25),
    inset 0 2px 5px rgba(255, 255, 255, 0.18),
    0 4px 0 #238421,
    0 8px 16px rgba(0, 0, 0, 0.24);
  scale: 1.06;
}

.wheel-action {
  width: 54px;
  height: 54px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background-color: #296ba5;
  background-image: url("./assets/round-arrow.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 68%;
  box-shadow: 0 4px 0 #174b80, 0 8px 18px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  color: white;
  font-size: 0;
  opacity: 0.5;
  transition: opacity 300ms ease 300ms, scale 120ms ease;
}

.letter-wheel.is-inputting .wheel-action {
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.letter-wheel.is-shuffling .letter,
.letter-wheel.is-shuffling .wheel-action {
  pointer-events: none;
}

.duel-screen.is-golden-set .wheel-glow {
  display: none;
}

.duel-screen.is-golden-set .letter {
  border: 0;
  background: linear-gradient(135deg, #fff4a0, #ffdb6c 42%, #ffc451);
  box-shadow: none;
  color: #101b55;
  text-shadow: none;
}

.duel-screen.is-golden-set .letter.is-selected {
  border: 0;
  background: #fff5c9;
  color: #101b55;
  color: #4b2b05;
  box-shadow: none;
  text-shadow: none;
}

.duel-screen.is-golden-set .wheel-action {
  background-color: transparent;
  box-shadow: none;
  opacity: 1;
}

.play-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 19px 0;
  position: relative;
  z-index: 6;
}

.hint-button {
  min-width: 170px;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: left;
}

.hint-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.hint-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffef4d, #f3a912);
  color: #7c3b00;
  font-size: 17px;
  text-shadow: 0 1px white;
  box-shadow: 0 4px 0 #b95b06;
}

.hint-button > span:last-child {
  display: grid;
  gap: 2px;
}

.hint-button strong {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.hint-button small {
  color: #8f9ac8;
  font-family: system-ui, sans-serif;
  font-size: 9px;
}

.result-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 4dvh, 34px) 26px clamp(12px, 3dvh, 22px);
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(66, 215, 255, 0.22), transparent 38%),
    linear-gradient(160deg, rgba(36, 32, 125, 0.78), rgba(17, 16, 82, 0.72));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  color: white;
  text-align: center;
}
.result-panel:not([hidden]) {
  display: grid;
  place-items: center;
  animation: result-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.result-outcome-view,
.result-recap-view {
  width: min(100%, 420px);
  margin: auto;
}

.game-shell:has(#result-panel:not([hidden])) > .global-actions {
  display: none;
}

.result-outcome-view {
  display: grid;
  justify-items: center;
  gap: 13px;
}

.result-outcome-view[hidden],
.result-recap-view[hidden] { display: none; }
.result-outcome-view #result-summary { display: none; }
.result-outcome-view .result-story-line { max-width: 330px; margin: 3px auto 6px !important; }
.result-outcome-view .primary-button,
.result-outcome-view .secondary-button { width: min(100%, 320px); }

.result-recap-view {
  width: min(100%, 680px);
  padding: clamp(24px, 5dvh, 54px) 0 clamp(20px, 4dvh, 42px);
}
.duel-screen > .duel-toolbar,
.duel-screen > .scoreboard,
.duel-screen > .playfield { transition: opacity 260ms ease, transform 260ms ease; }
.duel-screen.is-result-transition > .duel-toolbar,
.duel-screen.is-result-transition > .scoreboard,
.duel-screen.is-result-transition > .playfield { opacity: 0; transform: translateY(6px) scale(.985); }
.duel-screen.is-result-recap { grid-template-rows: minmax(0, 1fr); }
.duel-screen.is-result-recap > .duel-toolbar,
.duel-screen.is-result-recap > .scoreboard { display: none; }
.duel-screen.is-result-recap > .playfield { grid-row: 1; }

.result-recap-view.is-revealing > :not(.result-story),
.result-recap-view.is-revealing .result-story > * {
  animation: recap-block-in 520ms cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--recap-reveal-delay, 120ms);
}

@keyframes recap-block-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  .duel-screen > .duel-toolbar,
  .duel-screen > .scoreboard,
  .duel-screen > .playfield { transition: none; }
  .result-recap-view.is-revealing > :not(.result-story),
  .result-recap-view.is-revealing .result-story > * { animation: none; }
}

@keyframes result-in {
  from { opacity: 0; transform: scale(0.96) translateY(14px); }
}

.result-burst {
  width: 180px;
  height: 180px;
  position: absolute;
  top: -112px;
  left: 50%;
  translate: -50%;
  border: 1px solid rgba(70, 224, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(59, 220, 255, 0.28);
}

.result-kicker {
  color: var(--cyan);
  font-size: 16px;
  letter-spacing: 0.2em;
}

.result-panel h2 {
  margin: 2px 0 7px;
  font-size: 42px;
  line-height: 1;
}

.result-panel.is-victory h2 {
  color: var(--yellow);
  text-shadow: 0 4px 0 rgba(223, 130, 6, 0.45);
}

.result-panel p {
  margin: 0 auto;
  color: #abb5dc;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

#result-summary {
  color: #9d8fc8;
  font-size: 14px;
}

.result-score {
  margin: 13px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.result-panel.is-marathon-result .result-score {
  display: none;
}

.marathon-result-stats {
  margin: 18px 0 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.marathon-result-stats[hidden] {
  display: none;
}

.marathon-result-stats span {
  min-width: 0;
  padding: 13px 8px 11px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(75, 221, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(41, 49, 137, 0.68), rgba(19, 21, 87, 0.48));
}

.marathon-result-stats small {
  color: #8f99c8;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: 0.1em;
}

.marathon-result-stats strong {
  color: var(--yellow);
  font-size: clamp(24px, 8vw, 36px);
  line-height: 1;
  text-shadow: 0 3px 0 rgba(202, 131, 0, 0.35);
}

.result-score span {
  display: grid;
}

.result-score small {
  color: #8f99c8;
  font-size: 15px;
  letter-spacing: 0.13em;
}

.result-score strong {
  color: white;
  font-size: 38px;
}

.result-score i {
  color: #6b74aa;
  font-style: normal;
  font-size: 24px;
}

.result-story {
  width: 100%;
  margin: 0 auto clamp(34px, 6dvh, 64px);
  display: grid;
  gap: clamp(30px, 5dvh, 54px);
}

.result-story[hidden] { display: none; }
.result-story-line { margin: 0 !important; color: #dce3ff !important; font-size: 14px !important; line-height: 1.35 !important; }
.result-featured-word { padding: 0 clamp(4px, 2vw, 18px); display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 24px; text-align: left; }
.result-featured-word[hidden] { display: none; }
.result-featured-word small { grid-column: 1 / -1; margin-bottom: 8px; color: var(--yellow); font-size: 12px; letter-spacing: .18em; }
.result-featured-word strong { min-width: 0; overflow: hidden; color: white; font-size: clamp(34px, 8vw, 52px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.result-featured-word > span { color: var(--yellow); font-size: clamp(22px, 5vw, 30px); font-weight: 800; }
.result-featured-word em { grid-column: 1 / -1; margin-top: 10px; color: #f7c7ff; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.result-featured-word .result-featured-reason { grid-column: 1 / -1; max-width: 540px; margin: 18px 0 0 !important; color: #dce3ff !important; font-size: 15px !important; line-height: 1.5 !important; text-align: left; }
.result-featured-reason[hidden] { display: none; }
.result-rare-word { padding: 0 clamp(4px, 2vw, 18px); display: grid; grid-template-columns: 1fr auto; align-items: end; text-align: left; }
.result-rare-word[hidden] { display: none; }
.result-rare-word small { grid-column: 1 / -1; margin-bottom: 7px; color: #efb4ff; font-size: 11px; letter-spacing: .16em; }
.result-rare-word strong { color: white; font-size: clamp(25px, 6vw, 34px); line-height: 1; }
.result-rare-word span { color: #b9c2eb; font-size: 12px; }
.result-best-words { padding: clamp(24px, 4dvh, 38px) clamp(4px, 2vw, 18px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 5vw, 44px); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.result-best-words article { min-width: 0; display: grid; gap: 5px; }
.result-best-words small { color: #9fa9d7; font-size: 10px; letter-spacing: .11em; }
.result-best-words strong { min-width: 0; color: white; font-size: clamp(18px, 4vw, 24px); white-space: nowrap; }
.result-best-words span { color: var(--yellow); font-size: 15px; font-weight: 800; }
.result-best-words > i { color: #8d97c8; font-size: 11px; font-style: normal; }

.duel-screen.is-result-recap .result-panel {
  padding-inline: clamp(20px, 6vw, 70px);
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border-color: transparent;
  border-radius: 0;
  background: radial-gradient(circle at 50% 0%, rgba(66, 215, 255, .14), transparent 42%);
  box-shadow: none;
}

.duel-screen.is-result-recap .result-recap-view {
  margin: 0 auto;
  padding-bottom: max(clamp(20px, 4dvh, 42px), env(safe-area-inset-bottom));
}

.result-recap-view > .result-head-to-head,
.result-recap-view > .result-rating,
.result-recap-view > .result-coins {
  margin: clamp(24px, 4dvh, 40px) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.result-recap-view > .primary-button,
.result-recap-view > .secondary-button,
.result-recap-view > .text-button,
.result-recap-view > .rematch-status {
  width: min(100%, 380px);
  margin-right: auto;
  margin-left: auto;
}

.result-recap-view > .primary-button { margin-top: clamp(40px, 7dvh, 72px); }
.result-recap-view > .primary-button ~ .secondary-button { margin-top: 14px; }
.result-recap-view > .text-button { display: block; margin-top: 18px; }

.result-recap-view > .result-rating > small {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .18em;
}

.result-recap-view > .result-rating div { gap: 14px; }
.result-recap-view > .result-rating strong { font-size: clamp(24px, 6vw, 32px); }
.result-recap-view > .result-rating i { font-size: 20px; }
.result-recap-view > .result-rating em { min-width: 46px; font-size: 17px; font-weight: 800; }

.result-recap-view > .result-coins { gap: 11px; }
.result-recap-view > .result-coins .coin-icon { font-size: 22px; }
.result-recap-view > .result-coins strong { font-size: clamp(23px, 5.5vw, 30px); }
.result-recap-view > .result-coins small { font-size: 11px; letter-spacing: .18em; }

@media (max-width: 520px) {
  .result-recap-view { padding-top: 20px; }
  .result-story { gap: 34px; }
  .result-best-words { gap: 13px; }
  .result-best-words > i { font-size: 9px; }
}

@media (max-height: 860px) {
  .result-recap-view {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .result-story {
    margin-bottom: 22px;
    gap: 22px;
  }
  .result-featured-word small { margin-bottom: 5px; }
  .result-featured-word strong { font-size: clamp(30px, 7vw, 42px); }
  .result-featured-word .result-featured-reason { margin-top: 9px !important; font-size: 13px !important; }
  .result-rare-word strong { font-size: clamp(22px, 5vw, 29px); }
  .result-best-words { padding-top: 16px; padding-bottom: 16px; }
  .result-best-words strong { font-size: clamp(17px, 3.6vw, 22px); }
  .result-recap-view > .result-head-to-head,
  .result-recap-view > .result-rating,
  .result-recap-view > .result-coins { margin-top: 15px; }
  .result-recap-view > .result-rating > small { margin-bottom: 5px; }
  .result-recap-view > .result-rating strong { font-size: clamp(21px, 5vw, 27px); }
  .result-recap-view > .primary-button { margin-top: 24px; min-height: 42px; }
  .result-recap-view > .primary-button ~ .secondary-button { min-height: 40px; margin-top: 8px; }
  .result-recap-view > .text-button { margin-top: 8px; padding-block: 5px; }
}


.result-head-to-head {
  width: fit-content;
  min-width: 154px;
  margin: 5px auto 0;
  padding: 7px 13px;
  border: 1px solid rgba(77, 218, 255, 0.2);
  border-radius: 999px;
  background: rgba(12, 21, 83, 0.46);
}

.result-head-to-head > small {
  display: block;
  margin-bottom: 3px;
  color: #8f99c8;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.result-head-to-head strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  font-size: 16px;
}

.result-head-to-head i {
  color: #6b74aa;
  font-style: normal;
}

.result-rating {
  width: fit-content;
  min-width: 210px;
  margin: 8px auto 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(7, 10, 61, 0.38);
}

.result-rating > small {
  display: block;
  margin-bottom: 5px;
  color: #8f99c8;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.result-rating div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.result-rating strong {
  font-size: 17px;
}

.result-rating i {
  color: #6b74aa;
  font-style: normal;
}

.result-rating em {
  min-width: 34px;
  color: #9aa5d2;
  font-style: normal;
  font-size: 12px;
}

.result-rating.is-positive em,
.result-rating.is-positive #result-rating-after {
  color: var(--green);
}

.result-rating.is-negative em,
.result-rating.is-negative #result-rating-after {
  color: #ff8bab;
}

.bot-training-progress {
  width: min(100%, 320px);
  margin: 22px auto 0;
  padding: 0;
  text-align: center;
}

.bot-training-progress > small { color: #8f99c8; font-size: 15px; letter-spacing: .1em; }
.bot-training-level { margin-top: 8px; display: block; color: #42dcff; font-size: clamp(42px, 11vw, 62px); line-height: .95; text-shadow: 0 0 24px rgba(66, 220, 255, .25); transition: color 260ms ease, text-shadow 260ms ease, scale 260ms ease; }
.bot-training-level.is-revealed { color: var(--yellow); text-shadow: 0 0 34px rgba(255, 228, 111, .48); scale: 1.08; }
.bot-training-progress.is-loss .bot-training-level.is-revealed { color: #9aa5b9; text-shadow: 0 0 28px rgba(154, 165, 185, .28); }
.bot-training-progress > p { margin: 8px auto 0; max-width: 300px; color: #aeb8dc; font: 500 15px/1.35 system-ui, sans-serif; }
.bot-training-stats { margin-top: 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bot-training-stats span { display: grid; gap: 4px; }
.bot-training-stats strong { color: white; font-size: clamp(22px, 5vw, 28px); line-height: 1; }
.bot-training-stats small { color: #8f99c8; font-size: 15px; letter-spacing: .04em; }

.result-coins {
  width: fit-content;
  margin: 8px auto 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 221, 69, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 205, 28, 0.08);
}

.result-coins strong {
  color: #fff0a0;
  font-size: 16px;
}

.result-coins small {
  color: #c7ad55;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.text-button {
  margin-top: 3px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #8993c1;
  cursor: pointer;
  font-size: 15px;
}

.secondary-button {
  width: 100%;
  min-height: 45px;
  margin-top: 10px;
  border: 1px solid rgba(63, 221, 255, 0.32);
  border-radius: 15px;
  background: rgba(44, 189, 235, 0.08);
  color: #bcefff;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: background 160ms ease, border-color 160ms ease;
}

.secondary-button:hover {
  border-color: rgba(63, 221, 255, 0.62);
  background: rgba(44, 189, 235, 0.14);
}

.rematch-status {
  min-height: 18px;
  margin-top: 12px !important;
  color: #bcefff !important;
}

.is-rematch-incoming .rematch-status {
  color: var(--yellow) !important;
  animation: rematch-status-pulse 900ms ease-in-out infinite alternate;
}

.is-rematch-incoming #rematch-button,
.is-rematch-incoming #rematch-decline-button {
  animation: rematch-action-in 620ms cubic-bezier(0.16, 1.25, 0.3, 1) both;
}

.is-rematch-incoming #rematch-decline-button {
  animation-delay: 90ms;
}

@keyframes rematch-action-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.88);
  }
  55% {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes rematch-status-pulse {
  to {
    color: white;
    text-shadow: 0 0 18px rgba(255, 218, 74, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-rematch-incoming .rematch-status,
  .is-rematch-incoming #rematch-button,
  .is-rematch-incoming #rematch-decline-button {
    animation: none;
  }
}

.dictionary-view {
  width: 100%;
  min-height: 0;
}

.dictionary-header {
  min-height: 48px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
}

.dictionary-header > div {
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.dictionary-header span {
  color: var(--cyan);
  font-size: 15px;
  letter-spacing: 0.14em;
}

.dictionary-header strong {
  color: #7f8abb;
  font-family: system-ui, sans-serif;
  font-size: 10px;
}

.dictionary-back {
  grid-column: 1;
  grid-row: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #c6cff2;
  cursor: pointer;
  font-size: 26px;
}

.dictionary-list {
  max-height: min(44svh, 420px);
  margin-top: 14px;
  padding: 2px 5px 12px 2px;
  display: grid;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.dictionary-entry {
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(5, 8, 53, 0.34);
}

.dictionary-entry-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dictionary-entry h3 {
  margin: 0;
  color: white;
  font-size: 15px;
  letter-spacing: 0.035em;
}

.dictionary-entry-heading > span {
  min-width: 32px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255, 234, 56, 0.12);
  color: var(--yellow);
  font-size: 10px;
  text-align: center;
}

.dictionary-sides {
  margin-top: 6px;
  display: flex;
  gap: 5px;
}

.dictionary-side {
  padding: 3px 6px;
  border-radius: 6px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
}

.dictionary-side.is-player {
  background: rgba(255, 75, 202, 0.14);
  color: #ff9be4;
}

.dictionary-side.is-opponent {
  background: rgba(50, 194, 255, 0.14);
  color: #8cddff;
}

.dictionary-entry p {
  margin: 8px 0 0;
  color: #aeb8dc;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}

@media (min-width: 700px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  body {
    padding: 28px;
  }

  .game-shell {
    height: calc(var(--app-viewport-height) - 56px);
    top: calc(var(--app-viewport-top) + 28px);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 32px;
  }

  .screen {
    height: 100%;
  }
}

@media (max-height: 760px) {
  .duel-toolbar {
    min-height: 50px;
  }

  .duel-toolbar .duel-coin-balance {
    top: 6px;
  }

  .icon-button {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 24px;
  }

  .toolbar-actions {
    gap: 4px;
  }

  .letter {
    width: 65px;
    height: 65px;
    border-width: 3px;
    font-size: clamp(23px, 4.5dvh, 31px);
  }

  .wheel-action {
    width: 46px;
    height: 46px;
    font-size: 25px;
  }

  .hint-button {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .hint-icon {
    width: 36px;
    height: 36px;
  }

  .result-panel h2 {
    margin: 2px 0 7px;
    font-size: 34px;
  }

  .result-score {
    margin: 13px 0 8px;
  }

  .result-score strong {
    font-size: 32px;
  }

  .result-panel .primary-button {
    min-height: 44px;
    margin-top: 10px;
  }

  .result-panel .secondary-button {
    min-height: 38px;
    margin-top: 6px;
  }

  .result-panel .text-button {
    margin-top: 3px;
  }
}

@media (max-height: 620px) {
  .duel-screen {
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .word-zone {
    line-height: 1;
  }

  .current-word {
    font-size: 22px;
  }

  .message {
    font-size: 13.5px;
  }

  .brand-lockup p {
    display: none;
  }

  .field-label:not(:first-child) {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.ui-autoscale-text{min-width:0;max-width:100%;overflow:visible!important;text-overflow:clip!important}.ui-autoscale-text.is-wrapping-text{height:auto!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}.ui-autoscale-text:not(input):not(select):not(textarea){line-height:max(1.15em,16px)}

/* POOL-09 hub and result shell. Icons and atmospheric surfaces are temporary CSS art. */
.menu-screen { padding-top: calc(var(--menu-controls-bottom) + 8px); align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.menu-screen > .brand-lockup, .menu-screen > .menu-orbit { display: none; }
.menu-card { --menu-card-lift: 0px; height: 100%; min-height: 0; top: 0; margin-bottom: 0; padding: 14px; overflow: hidden; display: grid; grid-template-rows: minmax(0,1fr) auto; border-radius: 24px 24px 0 0; }
.menu-tabs { grid-row: 2; margin: 10px -14px -14px; padding: 7px 6px max(8px,env(safe-area-inset-bottom)); order: 2; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 0; background: rgba(5,8,48,.72); }
.menu-tab { min-height: 42px; border-radius: 12px; white-space: normal; }
.menu-tab.is-active { border: 1px solid rgba(75,221,255,.24); translate: 0; }
.menu-tab-panel { height: 100%; max-height: none; padding: 1px 2px 16px; }
#duel-tab-panel { height: 100%; min-height: 0; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; display: grid; align-content: start; gap: 10px; }
.hub-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.hub-heading > div { min-width: 0; }
.hub-kicker { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.hub-heading h2 { margin: 5px 0 0; min-height: calc(2.3em + 3px); max-width: 320px; font-size: clamp(21px,5.6vw,28px); line-height: 1.15; }
.hub-trophy-total { flex: 0 0 auto; min-height:34px; padding: 8px 10px; border: 1px solid rgba(255,213,67,.25); border-radius: 12px; background: rgba(255,205,61,.09); color: var(--yellow); font-size: 15px!important; font-weight: 900; white-space:normal; }
.hub-trophy-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.hub-trophy-actions>button{min-height:34px;padding:7px 10px;border:1px solid rgba(255,213,67,.25);border-radius:12px;background:rgba(255,205,61,.09);color:var(--yellow);font-size:10px;white-space:normal}.league-modal,.trophy-road-modal{position:absolute;inset:0;width:100%;height:100%;margin:0;place-items:center}.league-dialog{width:min(100%,620px);max-height:100%;overflow:auto}.league-dialog #leaderboard-view{display:grid;gap:10px}.dossier-dialog .arena-panel-heading{margin-bottom:8px}
.trophy-road-modal{z-index:118}.trophy-road-dialog{width:min(100%,680px);max-height:100%;overflow:auto}.trophy-road-dialog .profile-trophy-showcase{margin-top:14px}.trophy-road-dialog .profile-arena-medals{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:420px){.league-modal,.trophy-road-modal{padding:0}.league-dialog,.trophy-road-dialog{width:100%;min-height:100%;max-height:100%;border-radius:0;padding:14px}.trophy-road-dialog .profile-arena-medals{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-golden-circle-card {
  position: relative; width: 100%; min-height: 68px;
  border: 1px solid #ffe36c; border-radius: 17px;
  background: radial-gradient(circle at 12% 0, rgba(255,255,255,.28), transparent 38%), linear-gradient(135deg, #a75a10, #6f3696);
  box-shadow: 0 12px 28px rgba(222,151,30,.22), inset 0 1px rgba(255,255,255,.2);
  color: #fff8d3;
}
.hub-golden-circle-card[hidden] { display: none; }
.hub-golden-circle-main { width:100%; min-height:66px; padding:13px 58px 13px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:0; border-radius:inherit; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.hub-golden-circle-main:disabled { cursor: wait; opacity: .72; }
.hub-golden-circle-main strong { min-width: 0; font-size: 19px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.hub-golden-circle-main span { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,248,193,.45); border-radius: 999px; background: rgba(55,23,69,.34); color: #fff3a0; font-size: 15px; font-weight: 900; white-space: nowrap; }
.hub-golden-circle-help { position:absolute; top:50%; right:14px; z-index:2; translate:0 -50%; }
.hub-progress-grid small, .result-reward-card small { color: #aeb9df; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.hub-progress-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.hub-progress-grid article, .hub-progress-grid button { min-width: 0; min-height: 76px; padding: 8px 5px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.055); color: white; text-align: center; }
.hub-progress-grid button { cursor: pointer; border-color: rgba(255,214,89,.2); background: rgba(255,214,89,.08); }
.hub-progress-grid span { color: var(--yellow); font-size: 19px; }
.hub-progress-grid strong { font-size: 10px; }
#start-button { min-height: 58px; margin-top: 1px; font-size: 19px; box-shadow: 0 15px 36px rgba(52,220,255,.19); }
.hub-secondary-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.hub-language { min-width: 0; min-height: 42px; padding: 5px 9px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.045); }
.hub-language > span { color: #aeb9df; font-size: 10px; font-weight: 900; }
.hub-language select { min-width: 0; min-height: 30px; padding: 0 22px 0 5px; border: 0; background-color: transparent; font-size: 15px; }
.hub-secondary-actions .practice-button { min-height: 42px; margin: 0; }
#load-status { margin: 0; }

.result-panel { overflow-y: auto; }
.result-skip-button { margin-top: 8px; }
.result-reward-flow { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.result-reward-card, .result-xp.result-reward-card, .result-trophies.result-reward-card, .result-coins.result-reward-card { min-width: 0; min-height: 100px; margin: 0; padding: 10px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.055); text-align: center; }
.result-reward-card[hidden] { display: none!important; }
.result-reward-card > span, .result-reward-card > strong { font-size: 15px; }
.result-showdown{background:linear-gradient(145deg,rgba(113,74,255,.18),rgba(255,202,74,.1));border-color:rgba(255,215,103,.3)}.result-showdown>span{color:#ffe06b;font-weight:900}.result-showdown>small,.result-showdown>strong{overflow-wrap:anywhere;text-align:center}
.result-reward-card.is-preview { opacity: .72; }
.result-reward-card.is-preview > span { color: var(--yellow); font-size: 24px; }
.result-chest-image{width:58px;height:58px;object-fit:contain}.result-reward-card.is-unavailable .result-chest-image{filter:grayscale(1);opacity:.45}.chest-modal{position:absolute;inset:0;z-index:110;width:min(100%,520px);margin-inline:auto;translate:none}.chest-dialog{width:min(100%,620px);max-height:min(86%,760px);overflow:auto}.chest-copy{font-size:15px;line-height:1.45}.chest-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.chest-slot{min-width:0;display:grid;place-items:center;gap:8px;padding:14px;border:1px solid rgba(122,224,255,.25);border-radius:18px;background:rgba(15,18,76,.78);text-align:center}.chest-slot img{width:min(100%,150px);aspect-ratio:1;object-fit:contain}.chest-slot small{font-size:10px;color:#aeb9df;font-weight:900}.chest-slot strong{font-size:15px;overflow-wrap:anywhere}.chest-slot button{min-height:40px;padding:9px 14px;border:0;border-radius:12px;background:linear-gradient(135deg,#26bfe0,#7752e9);color:#fff;font-size:15px;font-weight:900}.chest-empty{display:grid;place-items:center;width:92px;aspect-ratio:1;border:2px dashed rgba(174,185,223,.35);border-radius:20px;color:#aeb9df;font-size:32px}@media(max-width:420px){.chest-modal{padding:0;place-items:stretch}.chest-dialog{width:100%;max-height:100%;min-height:100%;border-radius:0;padding:16px}.chest-slots{grid-template-columns:1fr}.chest-slot{grid-template-columns:88px 1fr;justify-items:start;text-align:left}.chest-slot img,.chest-empty{grid-row:1/4;width:80px}.chest-slot button{width:100%}}
.result-recap-view { overflow: visible; }
.game-version { font-size: 10px; }
.xp-level-badge.ui-autoscale-text {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  flex: 0 0 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  white-space: nowrap;
}
.hub-secondary-actions { grid-template-columns: minmax(0, 1fr); }
.settings-button { font-family: system-ui, sans-serif; font-size: 20px; }
.settings-dialog { width: min(100%, 480px); }
.settings-section {
  margin-top: 22px;
  padding: 16px;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(91, 226, 255, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
}
.settings-section > div { display: grid; gap: 5px; }
.settings-section small, .settings-select > span {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.settings-section h3 { margin: 0; font-size: 20px; }
.settings-section p { margin: 0; color: #b9c3e5; font-size: 15px; line-height: 1.4; }
.settings-select { display: grid; gap: 7px; }
.settings-select select { width: 100%; min-height: 48px; font-size: 15px; }
.debug-test-tools { border-color: rgba(255, 126, 126, .5); background: rgba(92, 24, 35, .35); }
.debug-test-tools[hidden] { display: none; }
.debug-test-reset { min-height: 48px; border-color: #ff9f9f; background: linear-gradient(#b83d50, #7a2436); color: #fff; font-size: 15px; }
.debug-test-reset:disabled { opacity: .62; }

/* Tall card collections use the same horizontal interaction on every viewport. */
.rules-cards { display: grid; gap: 9px; }
.rules-intro { grid-template-columns: minmax(0,1fr) auto; }
.rules-intro > div { min-width: 0; display: grid; gap: 5px; }
.rules-intro span { color: var(--cyan); font-size: 10px; letter-spacing: .15em; }
.rules-intro strong { color: white; font-size: 15px; }
.rules-intro > button { grid-column: 2; grid-row: 1; align-self: start; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.08); color: white; font-size: 24px; line-height: 1; }
.rules-intro > p { grid-column: 1 / -1; }

.arena-panel { min-width:0; max-width:100%; }
.arena-dialog { overflow:hidden; }
.arena-list { width:100%; min-width:0; max-width:100%; }
.arena-card { grid-template-columns:82px minmax(0,1fr); align-items:start; align-content:stretch; min-height:232px; scroll-snap-stop:normal; }
.arena-card .arena-art { align-self:center; }
.arena-card > button { grid-column:2; }
.rules-panel { height: max(240px,calc(var(--app-viewport-height) - 180px)); min-height: 0; max-height: max(240px,calc(var(--app-viewport-height) - 180px)); grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.rules-intro { position: relative; z-index: 2; padding: 4px 4px 10px; background: #111344; }
.rules-cards { min-height: 0; grid-template-columns: minmax(0,1fr); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; scrollbar-width: thin; padding: 2px 3px 12px; }

@media (max-width: 380px), (max-height: 680px) {
  .menu-card { padding: 10px; }
  .menu-tabs { margin-inline: -10px; margin-bottom: -10px; }
  .hub-heading h2 { font-size: 20px; }
  .hub-progress-grid article, .hub-progress-grid button { min-height: 66px; padding: 6px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .result-recap-view.is-revealing > :not(.result-story),
  .result-recap-view.is-revealing .result-story > * { opacity: 1; transform: none; }
}

.shop-modal{z-index:115}.shop-dialog{width:min(100%,760px);max-height:min(92dvh,860px);overflow:auto}.shop-dialog .inventory-tabs{position:sticky;top:-2px;z-index:4;padding:6px 2px;background:linear-gradient(180deg,#201d78 78%,rgba(32,29,120,0))}.shop-balances{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.shop-balances span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:15px}.shop-balances span:first-child{color:#ffe46f}.shop-balances span:last-child{color:#74e8ff}.shop-status{min-height:24px;margin:8px 0;color:#b8c5eb;font-size:15px;overflow-wrap:anywhere}.shop-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px}.shop-offer{min-width:0;display:grid;grid-template-rows:auto auto auto auto 1fr;gap:7px;padding:12px;border:2px solid #5560a0;border-radius:18px;background:rgba(15,18,76,.82)}.shop-offer.rarity-rare{border-color:#39bfff}.shop-offer.rarity-epic{border-color:#b16cff}.shop-offer img{box-sizing:border-box;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:12px;background:radial-gradient(circle,#34348d,#111548)}.shop-offer strong{font-size:15px;overflow-wrap:anywhere}.shop-offer-state{color:#9faada;font-size:10px;overflow-wrap:anywhere}.shop-offer.is-available .shop-offer-state{color:#83f3c6}.shop-offer.is-insufficient .shop-offer-state{color:#ffb57c}.shop-price{font-size:15px;font-weight:900}.shop-price.is-coins{color:#ffe46f}.shop-price.is-crystals{color:#74e8ff}.shop-offer button,.shop-confirm-actions button{min-height:42px;padding:9px 12px;border:0;border-radius:12px;background:linear-gradient(135deg,#26bfe0,#7752e9);color:#fff;font-size:15px;font-weight:900}.shop-offer button:disabled{background:#353966;color:#9aa3c8}.shop-confirm{position:sticky;bottom:0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;margin-top:16px;padding:14px;border:1px solid rgba(116,232,255,.45);border-radius:18px;background:rgba(8,12,61,.98);box-shadow:0 -12px 30px rgba(0,0,0,.35)}.shop-confirm[hidden]{display:none}.shop-confirm img{width:96px;height:96px;object-fit:contain}.shop-confirm h3{margin:3px 0;font-size:20px;overflow-wrap:anywhere}.shop-confirm p{margin:4px 0;font-size:15px}.shop-confirm small{font-size:10px;color:#7beccc}.shop-confirm-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.shop-confirm-actions button:first-child{background:#353966}@media(max-width:620px){.shop-dialog{width:100%;min-height:100%;max-height:100%;border-radius:0;padding:14px}.shop-offers{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-confirm{grid-template-columns:72px minmax(0,1fr)}.shop-confirm img{width:72px;height:72px}}@media(max-width:380px){.shop-offers{grid-template-columns:1fr}}
.daily-modal{z-index:116}.daily-dialog{width:min(100%,680px);max-height:min(92dvh,820px);overflow:auto}.daily-countdown{font-size:15px;color:#8feaff;overflow-wrap:anywhere}.daily-tasks{display:grid;gap:12px}.daily-task{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:2px solid rgba(122,224,255,.28);border-radius:18px;background:rgba(15,18,76,.82)}.daily-task-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#26bfe0,#7752e9);font-size:25px}.daily-task-copy{min-width:0}.daily-task-copy strong{display:block;font-size:15px;overflow-wrap:anywhere}.daily-task-copy small{display:block;margin-top:4px;font-size:10px;color:#b8c5eb;overflow-wrap:anywhere}.daily-progress{height:10px;margin-top:9px;border-radius:999px;background:#292e68;overflow:hidden}.daily-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#26d7bc,#73e9ff);transition:width .25s}.daily-reward{display:grid;justify-items:center;gap:6px;min-width:92px;color:#ffe46f;font-size:15px;font-weight:900}.daily-reward button{min-height:40px;padding:8px 12px;border:0;border-radius:12px;background:linear-gradient(135deg,#24c79f,#25a5dc);color:#fff;font-size:15px;font-weight:900}.daily-reward button:disabled{background:#383d70;color:#aab1d2}.daily-task.is-completed{border-color:#56e2aa}.daily-stamp{font-size:10px;color:#63edb4;overflow-wrap:anywhere}@media(max-width:520px){.daily-dialog{width:100%;min-height:100%;max-height:100%;border-radius:0;padding:14px}.daily-task{grid-template-columns:44px minmax(0,1fr)}.daily-task-icon{width:44px;height:44px}.daily-reward{grid-column:1/-1;width:100%;grid-template-columns:1fr auto;justify-items:start}.daily-reward button{justify-self:stretch}}
.reward-badge{position:absolute;top:6px;right:6px;display:grid;place-items:center;min-width:22px;min-height:22px;padding:2px 6px;border-radius:999px;background:#ff4f77;color:#fff;font:900 10px/1 sans-serif}.hub-progress-grid button{position:relative}.reward-center-section{display:grid;gap:10px;margin:14px 0;padding:12px;border:1px solid rgba(122,224,255,.22);border-radius:18px;background:rgba(8,12,54,.58)}.reward-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.reward-section-heading h3,#daily-tasks-title{margin:0;font-size:15px;overflow-wrap:anywhere}.reward-section-heading button,.inbox-item button{min-height:40px;padding:8px 12px;border:0;border-radius:12px;background:linear-gradient(135deg,#24c79f,#25a5dc);color:#fff;font-size:15px;font-weight:900}.reward-section-heading button:disabled,.inbox-item button:disabled{background:#383d70;color:#aab1d2}.login-calendar{display:grid;grid-template-columns:repeat(7,minmax(68px,1fr));gap:7px;overflow-x:auto;padding-bottom:3px}.login-day{min-width:68px;display:grid;place-items:center;gap:4px;padding:9px 5px;border:1px solid #343b78;border-radius:13px;background:#171c59;text-align:center}.login-day small,.login-day em{font-size:10px;overflow-wrap:anywhere}.login-day strong{font-size:15px;overflow-wrap:anywhere}.login-day span{font-size:22px}.login-day.is-today{border-color:#ffe46f;box-shadow:0 0 0 2px rgba(255,228,111,.16)}.login-day.is-claimed{border-color:#56e2aa}.login-day.is-missed,.login-day.is-locked{opacity:.65}.reward-inbox{display:grid;gap:8px}.inbox-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045)}.inbox-item>div{min-width:0;display:grid;gap:3px}.inbox-item small,.inbox-item span{font-size:10px;color:#b8c5eb;overflow-wrap:anywhere}.inbox-item strong{font-size:15px;overflow-wrap:anywhere}.inbox-item.is-expired{opacity:.62}.inbox-empty{min-height:90px;display:grid;place-items:center;margin:0;border:2px dashed rgba(174,185,223,.3);border-radius:14px;font-size:15px;text-align:center;overflow-wrap:anywhere}@media(max-width:520px){.inbox-item{grid-template-columns:1fr}.inbox-item button{width:100%}}
.stake-mode-list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 14px;padding:5px;border:1px solid rgba(136,153,255,.2);border-radius:18px;background:rgba(7,11,48,.58);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.stake-mode-list button,.stake-tier{min-height:58px;padding:8px;border:1px solid transparent;border-radius:14px;background:transparent;color:inherit;white-space:normal}
.stake-mode-list button strong,.stake-mode-list button small,.stake-tier strong,.stake-tier small{display:block;overflow:visible;text-overflow:clip;white-space:normal}
.stake-mode-list button strong,.stake-tier strong{font-size:max(15px,1em)}.stake-mode-list button small,.stake-tier small{font-size:max(10px,.72em)}
.stake-mode-list .is-selected,.stake-tier.is-selected{border-color:rgba(113,231,255,.7);background:linear-gradient(145deg,rgba(60,206,240,.28),rgba(107,83,232,.36));box-shadow:0 7px 18px rgba(5,8,39,.3),inset 0 1px rgba(255,255,255,.16)}
.stake-selector{position:relative;display:grid;align-content:start;gap:12px;min-height:0;padding:16px;border:1px solid rgba(112,226,255,.22);border-radius:22px;background:radial-gradient(circle at 90% 0,rgba(110,77,255,.2),transparent 45%),rgba(8,12,52,.6);overflow-y:auto}.stake-selector>p{margin:0;color:#cbd5f5;font-size:15px;text-align:center}.stake-tier-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stake-tier{position:relative;display:grid;place-items:center;align-content:center;gap:2px;min-height:94px!important;border-color:rgba(129,148,229,.28)!important;background:linear-gradient(145deg,rgba(53,63,153,.82),rgba(21,27,91,.9))!important;box-shadow:0 10px 22px rgba(3,6,35,.28),inset 0 1px rgba(255,255,255,.1);cursor:pointer}.stake-tier:hover{transform:translateY(-2px);border-color:#79e6ff!important;filter:brightness(1.08)}.stake-tier .stake-coin{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:linear-gradient(145deg,#fff07a,#f2a51d);color:#8b5700;font-size:15px;box-shadow:0 4px 12px rgba(255,193,41,.35)}.stake-tier strong{font-size:28px!important;color:#fff}.stake-tier small{color:#aebbea!important}.stake-tier.is-selected{border-color:#ffdf59!important;background:radial-gradient(circle at 50% 10%,rgba(255,225,91,.3),transparent 52%),linear-gradient(145deg,#6753d7,#25328e)!important;box-shadow:0 0 0 3px rgba(255,218,77,.16),0 14px 28px rgba(3,6,35,.38),inset 0 1px rgba(255,255,255,.2)}.stake-selector>.primary-button{min-height:50px;border-radius:15px;background:linear-gradient(135deg,#ffcd3c,#ff7b39);color:#2b1742;box-shadow:0 10px 25px rgba(255,126,54,.3);font-size:15px;text-shadow:none}.stake-selector>.primary-button:disabled{background:#30376f;color:#8993c0;box-shadow:none}.stake-selector.is-all-in{border-color:rgba(255,77,128,.4);background:radial-gradient(circle at 50% 0,rgba(255,61,114,.32),transparent 52%),linear-gradient(155deg,rgba(82,22,102,.82),rgba(17,20,67,.94))}.stake-selector.is-all-in .stake-tier-list{grid-template-columns:1fr}.stake-tier.is-all-in-tier{min-height:178px!important;border-color:rgba(255,107,143,.45)!important;background:radial-gradient(circle at 50% 35%,rgba(255,78,130,.36),transparent 50%),linear-gradient(145deg,#722565,#251c69)!important}.stake-all-in-flare{font-size:38px;filter:drop-shadow(0 0 15px #ffdc59)}.stake-tier.is-all-in-tier strong{font-size:24px!important}.stake-tier.is-all-in-tier small{font-size:10px!important}.stake-tier.is-all-in-tier small b{color:#ffe45f;font-size:15px}.stake-selector.is-all-in>.primary-button{background:linear-gradient(135deg,#ffdf47,#ff426f);box-shadow:0 12px 30px rgba(255,66,111,.35)}
@media(max-width:520px){.stake-mode-list{grid-template-columns:repeat(3,minmax(0,1fr))}.stake-mode-list button{min-height:56px;padding:6px 4px}.stake-mode-list button strong{font-size:15px}.stake-mode-list button small{font-size:10px}.stake-tier-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sandbox-store-dialog{max-width:700px}.sandbox-store-warning{padding:12px;border:2px solid #f4c84a;border-radius:12px;background:#342b0e;color:#fff4bd;font-size:15px;font-weight:800;line-height:1.35}.sandbox-store-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sandbox-store-offer{width:100%;display:flex;gap:16px;align-items:center;padding:16px;border:1px solid #6f79a8;border-radius:14px;background:#202742;color:#fff;text-align:left;white-space:normal}.sandbox-store-offer.is-selected{border-color:#ffd76a;box-shadow:0 0 0 2px rgba(255,215,106,.2)}.sandbox-store-offer>span{flex:0 0 auto;min-width:46px;font-size:24px;font-weight:900;color:#8feaff;text-align:center}.sandbox-store-offer strong,.sandbox-store-offer li,.sandbox-store-offer small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.sandbox-store-offer strong{font-size:20px}.sandbox-store-offer ul{margin:8px 0;padding-left:18px;display:grid;gap:4px}.sandbox-store-offer li{font-size:15px;line-height:1.3}.sandbox-store-offer small{font-size:12px}.sandbox-vip-status{margin:10px 0;padding:12px;border:1px solid rgba(255,215,106,.5);border-radius:12px;background:linear-gradient(135deg,rgba(110,72,14,.65),rgba(45,32,86,.8));font-size:15px;line-height:1.4;overflow-wrap:anywhere}.sandbox-scenario{display:grid;gap:8px;margin:16px 0;font-size:12px}.sandbox-scenario select{min-height:44px;font-size:15px}.sandbox-store-dialog>button{min-height:48px;font-size:15px}.sandbox-receipts{margin-top:18px}.sandbox-receipts h3{font-size:15px}.sandbox-receipts article{padding:10px 0;border-top:1px solid #4d5578;font-size:12px;white-space:normal;overflow-wrap:anywhere}.profile-vip-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border:1px solid rgba(255,215,106,.4);border-radius:11px;background:rgba(94,60,12,.25)}.profile-vip-status[hidden]{display:none}.profile-vip-status>span{padding:3px 7px;border-radius:7px;background:#665328;color:#ffe59b;font-size:10px;font-weight:900}.profile-vip-status>strong{font-size:15px;overflow-wrap:anywhere}.profile-vip-status>small{flex-basis:100%;font-size:10px;line-height:1.35;overflow-wrap:anywhere}.profile-vip-status.is-active{border-color:#ffd76a;background:linear-gradient(135deg,rgba(122,77,12,.35),rgba(68,43,122,.4))}.is-vip-name{color:#ffe082!important;text-shadow:0 0 12px rgba(255,199,68,.38)}@media(max-width:560px){.sandbox-store-offers{grid-template-columns:1fr}}
.profile-trophy-road{overscroll-behavior-x:contain;touch-action:pan-x}
.profile-trophy-road:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}
.login-calendar{overscroll-behavior-x:contain;touch-action:pan-x}
.login-calendar:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}
.reward-history-link{min-height:40px;padding:8px 12px;border:1px solid rgba(122,224,255,.28);border-radius:12px;background:rgba(25,35,92,.72);color:#e9f8ff;font-size:15px;font-weight:900;overflow-wrap:anywhere;width:100%}.reward-history-back{flex:0 0 38px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1}.reward-history .inbox-item{grid-template-columns:1fr}.reward-history .inbox-item span{font-size:10px}.reward-history .inbox-item strong{font-size:15px}
.reward-center-section:has(#login-calendar){gap:8px;padding:10px;background:radial-gradient(circle at 85% 0,rgba(255,215,83,.12),transparent 42%),rgba(8,12,54,.68)}
#login-calendar-title{color:#f8fbff;font-size:15px;letter-spacing:.02em}
.login-calendar{gap:6px;margin:0 -2px;padding:3px 2px 7px;scroll-snap-type:x proximity;scroll-padding-inline:2px}
.login-day{position:relative;min-width:74px;min-height:94px;padding:7px 6px 8px;grid-template-rows:auto 24px auto auto;align-content:center;gap:2px;overflow:visible;border:1px solid rgba(124,142,220,.34);border-radius:14px;background:linear-gradient(155deg,rgba(40,47,122,.92),rgba(20,25,82,.94));box-shadow:inset 0 1px rgba(255,255,255,.055);scroll-snap-align:start;opacity:1}
.login-day small{color:#95a5dc;font-size:10px;font-weight:900;letter-spacing:.12em;line-height:1.1}
.login-day>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(154,169,225,.4);border-radius:50%;color:#aab7e8;font-size:15px;line-height:1}
.login-day strong{color:#fff;font-size:15px;line-height:1.05;overflow:visible;white-space:normal}
.login-day em{min-width:0;padding:3px 2px;border-radius:6px;background:rgba(137,151,210,.1);color:#aeb9df;font-family:system-ui,sans-serif;font-size:10px;font-style:normal;font-weight:800;letter-spacing:-.01em;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.login-day.is-today{min-width:82px;border-color:#ffe46f;background:radial-gradient(circle at 50% 12%,rgba(255,238,125,.2),transparent 45%),linear-gradient(155deg,#5c4897,#32205f);box-shadow:0 0 0 2px rgba(255,228,111,.14),0 8px 18px rgba(0,0,0,.2)}
.login-day.is-today>span{border-color:#ffe46f;background:#ffe46f;color:#3c2857;box-shadow:0 0 14px rgba(255,228,111,.38)}
.login-day.is-today strong{color:#fff0a1}.login-day.is-today em{background:#ffe46f;color:#38264f}
.login-day.is-claimed{border-color:rgba(86,226,170,.52);background:linear-gradient(155deg,rgba(31,104,91,.8),rgba(18,54,72,.95))}
.login-day.is-claimed>span{border-color:#56e2aa;background:#56e2aa;color:#123b3c}.login-day.is-claimed em{background:rgba(86,226,170,.16);color:#8ff1c9}
.login-day.is-available{border-color:rgba(91,226,255,.58);background:linear-gradient(155deg,rgba(34,94,135,.86),rgba(25,42,102,.96))}.login-day.is-available>span{border-color:var(--cyan);color:var(--cyan)}.login-day.is-available em{background:var(--cyan);color:#102650}
.login-day.is-missed{opacity:.72;filter:saturate(.7)}.login-day.is-locked{opacity:.58;filter:saturate(.55)}
.sandbox-store-balance{margin:10px 0;padding:9px 12px;border-radius:12px;background:#182b4d;color:#8feaff;font-size:15px;font-weight:900}
.loot-box-store{margin-top:20px;padding-top:18px;border-top:1px solid #4d5578}.loot-box-store h3{margin:2px 0 8px;font-size:20px}.loot-box-store header small,.loot-box-safety,.loot-box-status{font-size:10px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.loot-box-safety{padding:10px;border-radius:10px;background:#182b4d}.loot-box-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.loot-box-card{padding:12px;border:1px solid #6f79a8;border-radius:12px;background:#202742;color:#fff;white-space:normal}.loot-box-card strong{display:block;font-size:15px}.loot-box-card ul{padding-left:18px}.loot-box-card li,.loot-box-card small{font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.loot-box-card button,.loot-box-reveal button{min-height:44px;width:100%;font-size:15px}.loot-box-reveal{margin-top:12px;padding:14px;border:2px solid #ffd76a;border-radius:12px;background:#342b0e}.loot-box-reveal strong{font-size:20px}.loot-box-reveal p{font-size:15px;overflow-wrap:anywhere}@media(max-width:700px){.loot-box-list{grid-template-columns:1fr}}
.rewarded-ad-store{margin-top:20px;padding-top:18px;border-top:1px solid #4d5578}.rewarded-ad-store h3{margin:2px 0 8px;font-size:20px}.rewarded-ad-store header small,.rewarded-ad-safety,.rewarded-ad-status,.rewarded-ad-scenario span{font-size:10px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.rewarded-ad-safety{padding:10px;border-radius:10px;background:#182b4d}.rewarded-ad-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rewarded-ad-card{padding:12px;border:1px solid #61b5a5;border-radius:12px;background:#183a3a;color:#fff;white-space:normal}.rewarded-ad-card strong{display:block;font-size:15px}.rewarded-ad-card p,.rewarded-ad-card small{font-size:10px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.rewarded-ad-card button{min-height:44px;width:100%;font-size:15px}.rewarded-ad-scenario{display:grid;gap:5px;margin-top:10px}.rewarded-ad-scenario select{min-height:44px;font-size:15px}@media(max-width:700px){.rewarded-ad-list{grid-template-columns:1fr}}
.inventory-item-card>.inventory-item-primary{display:grid;gap:7px;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left}.inventory-item-card>.inventory-item-primary:disabled{opacity:.7}.ring-card-advance{min-width:0;min-height:38px;padding:8px;border:1px solid #59dff3;border-radius:10px;background:linear-gradient(135deg,#206c9a,#6047c9);color:#fff;font-size:10px;font-weight:900;white-space:normal;overflow-wrap:anywhere}.ring-card-advance:disabled{border-color:#414c79;background:#24294f;color:#929bbc}.ring-card-balance{display:block;color:#b9c5e8!important;text-align:center}
.chest-reward-modal{z-index:120}.chest-reward-dialog{width:min(100%,500px)}.chest-reward-content{display:grid;place-items:center;gap:16px;padding-top:18px;text-align:center}.chest-reward-list{display:grid;gap:10px;width:100%}.chest-reward-row{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;padding:10px;border:1px solid rgba(117,229,255,.25);border-radius:16px;background:rgba(11,16,68,.62);text-align:left}.chest-reward-row strong{display:block;min-width:0;margin:0;font-size:15px;overflow-wrap:anywhere}.chest-reward-row small{display:block;margin-top:4px;color:#b8c5eb;font-size:10px;overflow-wrap:anywhere}.chest-reward-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,#ffe886,#db9d2e);color:#191b4c;font-size:34px}.chest-reward-icon.is-ring_cards{background:linear-gradient(145deg,#96f6ff,#5b72e5)}.chest-reward-icon.is-ring_parts{background:linear-gradient(145deg,#c2a5ff,#7041c7)}.chest-reward-claim{min-height:44px;padding:10px 22px;border:0;border-radius:14px;background:#65e6d0;color:#10143f;font-size:15px;font-weight:900;white-space:normal}
.hub-progress-grid .hub-rings-button{border-color:rgba(117,229,255,.58);background:linear-gradient(145deg,rgba(45,199,211,.25),rgba(101,74,222,.28));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 7px 18px rgba(22,14,89,.24)}.hub-rings-button>span{color:#85f4ff;text-shadow:0 0 12px rgba(117,229,255,.8)}
.rings-modal{position:absolute;inset:0;z-index:118;width:min(100%,920px);height:100%;margin-inline:auto;translate:none}.rings-dialog{width:min(100%,900px);max-height:min(94%,940px);overflow:auto;padding:20px}.rings-heading{position:sticky;top:-20px;z-index:6;margin:-20px -20px 14px;padding:20px;background:linear-gradient(180deg,#201d78 82%,rgba(32,29,120,.92))}.rings-status{min-height:24px;margin:4px 0 12px;color:#b8c5eb;font-size:15px;overflow-wrap:anywhere}.rings-selected{display:grid;grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:18px;padding:18px;border:1px solid rgba(117,229,255,.42);border-radius:24px;background:radial-gradient(circle at 90% 20%,rgba(94,91,226,.42),transparent 44%),linear-gradient(135deg,rgba(24,121,144,.62),rgba(26,24,91,.92))}.rings-selected small,.rings-section>header small,.rings-power header small{color:#78eddf;font-size:10px;font-weight:900;letter-spacing:.1em}.rings-selected h3,.rings-section h3,.rings-power h3{margin:3px 0;font-size:clamp(20px,4vw,28px);overflow-wrap:anywhere}.rings-selected p{margin:8px 0 0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}.rings-selected img{width:160px;height:160px;object-fit:contain}.rings-section,.rings-power{display:grid;gap:12px;margin-top:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(8,12,54,.58)}.rings-section>header,.rings-power>header,.rings-collection-card header,.rings-card-body header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px}.rings-card-balance,.rings-section>header>strong{padding:8px 11px;border-radius:999px;background:#74e8ff;color:#10143f;font-size:10px;overflow-wrap:anywhere}.rings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rings-card{min-width:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:12px;border:2px solid #5560a0;border-radius:19px;background:rgba(15,18,76,.84)}.rings-card.rarity-rare{border-color:#39bfff}.rings-card.rarity-epic{border-color:#b16cff}.rings-card.rarity-legendary{border-color:#ffd85a}.rings-card.is-selected{box-shadow:0 0 0 3px rgba(116,232,255,.2)}.rings-card.is-locked img{filter:saturate(.45);opacity:.72}.rings-card>img{width:132px;height:132px;object-fit:contain;border-radius:15px;background:radial-gradient(circle,#34348d,#111548)}.rings-card-body{min-width:0;display:grid;align-content:start;gap:8px}.rings-card-body header strong{font-size:15px;overflow-wrap:anywhere}.rings-card-body header span,.rings-card-body p{margin:0;color:#b8c5eb;font-size:10px;overflow-wrap:anywhere}.rings-card-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:7px}.rings-card-actions button{flex:1 1 110px;min-height:40px;padding:8px;border:0;border-radius:11px;background:linear-gradient(135deg,#26bfe0,#7752e9);color:#fff;font-size:15px;font-weight:900;white-space:normal;overflow-wrap:anywhere}.rings-card-actions button:disabled{background:#353966;color:#9aa3c8}.rings-card-actions small{font-size:10px;color:#aeb9df;overflow-wrap:anywhere}.rings-card .ring-card-progress{margin:0}.rings-card .ring-card-progress strong{font-size:15px}.rings-empty{grid-column:1/-1;min-height:90px;display:grid;place-items:center;margin:0;border:2px dashed rgba(174,185,223,.3);border-radius:14px;font-size:15px;text-align:center}.rings-collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rings-collection-card{display:grid;gap:9px;padding:13px;border:1px solid rgba(117,229,255,.24);border-radius:16px;background:rgba(23,28,89,.76)}.rings-collection-card header strong{font-size:15px;overflow-wrap:anywhere}.rings-collection-card header span{font-size:10px;color:#b8c5eb;overflow-wrap:anywhere}.rings-collection-track,.rings-power-track{height:10px;overflow:hidden;border-radius:999px;background:rgba(5,9,52,.8)}.rings-collection-track span,.rings-power-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65e8ff,#8cffb9);transition:width .25s ease}.rings-collection-milestones{display:grid;gap:4px}.rings-collection-milestones small{font-size:10px;color:#aeb9df;overflow-wrap:anywhere}.rings-collection-milestones small.is-complete{color:#8cffb9}.rings-power{background:linear-gradient(135deg,rgba(53,35,126,.9),rgba(15,94,114,.72))}.rings-power header>strong{padding:7px 11px;border-radius:999px;background:#80f3d0;color:#10234a;font-size:15px}.rings-power p,.rings-power-reward{margin:0;font-size:15px;overflow-wrap:anywhere}.rings-power-reward{color:#8cffb9}
@media(max-width:700px){.rings-modal{padding:0;place-items:stretch}.rings-dialog{width:100%;min-height:100%;max-height:100%;border-radius:0;padding:14px}.rings-heading{top:-14px;margin:-14px -14px 12px;padding:14px}.rings-grid{grid-template-columns:1fr}}

/* Collection Power stays visible; only the ring catalog below it scrolls. */
.rings-dialog{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden}
.rings-heading{position:relative;top:auto;margin-bottom:10px}
.rings-status{margin:0 0 8px}
.rings-power{margin-top:0}
.rings-scroll{min-width:0;min-height:0;margin-top:12px;padding:0 2px max(20px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.rings-scroll>.rings-selected{margin-top:0}
@media(max-width:700px){.rings-dialog{height:100%;min-height:0;max-height:100%}.rings-heading{top:auto;margin-bottom:8px}.rings-scroll{margin-top:10px;padding-bottom:max(24px,env(safe-area-inset-bottom))}}
@media(max-width:460px){.rings-selected{grid-template-columns:minmax(0,1fr) 100px;padding:13px}.rings-selected img{width:100px;height:100px}.rings-card{grid-template-columns:92px minmax(0,1fr);padding:10px}.rings-card>img{width:92px;height:92px}.rings-collections{grid-template-columns:1fr}}

.rings-collections{grid-template-columns:1fr}
.rings-collection-card{padding:0;overflow:hidden}
.rings-collection-card details{min-width:0}
.rings-collection-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:13px;cursor:pointer;list-style:none}
.rings-collection-card summary::-webkit-details-marker{display:none}
.rings-collection-card summary::after{content:"⌄";flex:0 0 auto;color:#78eddf;font-size:20px;line-height:1;transition:transform .18s ease}
.rings-collection-card details[open] summary::after{transform:rotate(180deg)}
.rings-collection-card summary>span{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;flex:1;flex-wrap:wrap;gap:6px 12px}
.rings-collection-card summary strong{font-size:15px;overflow-wrap:anywhere}
.rings-collection-card summary small{color:#b8c5eb;font-size:10px;overflow-wrap:anywhere}
.rings-collection-content{display:grid;gap:10px;padding:0 13px 13px;border-top:1px solid rgba(117,229,255,.16)}
.rings-collection-explain{margin:10px 0 0;color:#dbe3ff;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.rings-collection-subtitle{margin-top:4px;color:#78eddf;font-size:10px;letter-spacing:.08em;overflow-wrap:anywhere}
.rings-collection-ring-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rings-collection-ring{min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:9px;padding:8px;border:1px solid rgba(117,229,255,.22);border-radius:12px;background:rgba(8,12,54,.45)}
.rings-collection-ring.is-missing img{filter:saturate(.45);opacity:.68}
.rings-collection-ring img{width:58px;height:58px;object-fit:contain;border-radius:10px;background:radial-gradient(circle,#34348d,#111548)}
.rings-collection-ring div{min-width:0;display:grid;gap:4px}
.rings-collection-ring strong{font-size:15px;overflow-wrap:anywhere}
.rings-collection-ring span{color:#b8c5eb;font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.rings-collection-milestones{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.rings-collection-milestones article{min-width:0;display:grid;align-content:start;gap:4px;padding:9px;border:1px solid rgba(174,185,223,.2);border-radius:11px;background:rgba(5,9,52,.5)}
.rings-collection-milestones article>strong{color:#fff176;font-size:15px}
.rings-collection-milestones article>span{font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.rings-collection-milestones article>small{color:#aeb9df;font-size:10px;overflow-wrap:anywhere}
.rings-collection-milestones article.is-complete{border-color:rgba(140,255,185,.5);background:rgba(62,171,130,.14)}
.rings-collection-milestones article.is-complete>small{color:#8cffb9}
@media(max-width:620px){.rings-collection-ring-list{grid-template-columns:1fr}.rings-collection-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rings-grid{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.collection-power-frame{position:relative;border-radius:22%!important;overflow:visible!important;box-shadow:0 0 0 2px #c7d1dc,0 0 0 4px #707b89!important}.collection-power-rank{position:absolute;z-index:4;top:-7%;left:-7%;display:grid;place-items:center;min-width:16px;min-height:14px;padding:1px 3px;border:1px solid #f7fbff;border-radius:7px;background:#566474;color:#fff;font-size:10px;font-weight:900;line-height:1;pointer-events:none;white-space:nowrap}.avatar.collection-power-frame .collection-power-rank,.profile-avatar.collection-power-frame .collection-power-rank,.preparation-avatar.collection-power-frame .collection-power-rank,.duel-player-avatar.collection-power-frame .collection-power-rank{font-size:max(10px,.24em)}

/* All player-facing overlays use the app viewport instead of the layout viewport. */
.game-shell > .profile-modal,
.screen > .profile-modal,
.profile-modal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  translate: none;
}

.profile-dialog,
.arena-dialog,
.season-dialog,
.context-help-dialog,
.profile-avatar-picker-card,
.profile-economy-history-card,
.chest-dialog,
.shop-dialog,
.daily-dialog,
.rings-dialog,
.rules-panel {
  max-height: 100%;
}

@media (max-width: 700px), (pointer: coarse) {
  .profile-modal {
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
}
.chest-slot.rarity-rare{border-color:rgba(57,191,255,.72);box-shadow:inset 0 0 24px rgba(57,191,255,.12)}.chest-slot.rarity-epic{border-color:rgba(177,108,255,.78);box-shadow:inset 0 0 28px rgba(177,108,255,.16)}.chest-slot b{font-size:15px;overflow-wrap:anywhere}@media(max-width:420px){.chest-slot img,.chest-empty{grid-row:1/5}}
.rings-card.is-locked img,.rings-collection-ring.is-missing img{filter:none;opacity:1}

/* Full-size, non-interactive production prefab preview inside the Rings collection. */
.rings-card-preview-trigger{width:132px;height:132px;padding:0;border:0;border-radius:15px;background:radial-gradient(circle,#34348d,#111548);cursor:pointer;overflow:hidden}.rings-card-preview-trigger img{display:block;width:100%;height:100%;object-fit:contain}.rings-card-preview-trigger:focus-visible{outline:3px solid #fff176;outline-offset:3px}.rings-card-preview-button{background:linear-gradient(135deg,#168ca8,#5841ba)!important}
.ring-preview-view{grid-row:2/-1;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:auto;overscroll-behavior-y:contain}.ring-preview-toolbar{display:flex;align-items:center;padding:0 0 8px}.ring-preview-back{min-height:40px;padding:8px 13px;border:1px solid rgba(117,229,255,.4);border-radius:12px;background:rgba(10,15,65,.66);color:#fff;font-size:15px;font-weight:900;white-space:normal}.ring-preview-content{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(300px,1fr) minmax(210px,.62fr);align-items:center;gap:18px;padding:12px;border:1px solid rgba(57,191,255,.42);border-radius:22px;background:radial-gradient(circle at 34% 48%,rgba(43,109,172,.36),transparent 42%),linear-gradient(145deg,rgba(9,14,63,.96),rgba(31,22,91,.94));box-shadow:inset 0 0 55px rgba(57,191,255,.08)}.ring-preview-stage{width:100%;height:min(526px,66dvh);min-height:390px}.ring-preview-stage letter-circle-prefab{width:100%;height:100%}.ring-preview-details{min-width:0;display:grid;align-content:center;gap:12px;padding:12px}.ring-preview-details>small,.ring-preview-details>strong{color:#78eddf;font-size:10px;font-weight:900;letter-spacing:.1em;overflow-wrap:anywhere}.ring-preview-details h3{margin:0;font-size:clamp(24px,4vw,38px);line-height:1.05;overflow-wrap:anywhere}.ring-preview-details p{margin:0;color:#dbe3ff;font-size:15px;line-height:1.45;overflow-wrap:anywhere}.ring-preview-levels{display:flex;flex-wrap:wrap;gap:8px}.ring-preview-levels button{min-width:48px;min-height:44px;padding:8px;border:1px solid rgba(117,229,255,.38);border-radius:12px;background:rgba(20,27,91,.88);color:#fff;font-size:15px;font-weight:900}.ring-preview-levels button[aria-pressed="true"]{border-color:#fff176;background:linear-gradient(145deg,#d99d28,#86621a);box-shadow:0 0 18px rgba(255,225,91,.3)}.ring-preview-effect{min-height:46px;padding:10px 14px;border:0;border-radius:13px;background:linear-gradient(135deg,#f0b52d,#dd6c25);color:#25183d;font-size:15px;font-weight:900;white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.rings-card-preview-trigger{width:92px;height:92px}.ring-preview-view{padding-bottom:max(18px,env(safe-area-inset-bottom))}.ring-preview-content{grid-template-columns:1fr;align-items:start}.ring-preview-stage{height:min(440px,57dvh);min-height:330px}.ring-preview-details{padding:4px 6px 10px}.ring-preview-details h3{font-size:26px}}
.ring-preview-content{grid-template-columns:minmax(0,1fr);align-items:start;gap:4px;background:radial-gradient(circle at 50% 34%,rgba(43,109,172,.36),transparent 42%),linear-gradient(145deg,rgba(9,14,63,.96),rgba(31,22,91,.94))}
.ring-preview-stage{height:min(526px,66dvh);min-height:390px;transform:translateY(-145px);margin-bottom:-145px}
@media(max-width:700px){.ring-preview-stage{height:min(526px,66dvh);min-height:390px;transform:translateY(-125px);margin-bottom:-125px}}
.ring-preview-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}.ring-preview-meta small{color:#78eddf;font-size:10px;font-weight:900;letter-spacing:.1em;overflow-wrap:anywhere}
.ring-preview-details #ring-preview-status{color:#ffe36b;font-size:10px;font-weight:900;letter-spacing:.02em}.ring-preview-source{display:block;padding:0 12px 8px;color:#9eacd8;font-size:10px;line-height:1.35;text-align:center;overflow-wrap:anywhere}