:root {
  color-scheme: dark;
  --ui-font: Roboto, "Segoe UI", Arial, sans-serif;
  font-family: var(--ui-font);
  background: #02132d;
  color: #f4f8ff;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

html, body { height: 100%; min-height: 100%; margin: 0; overflow: hidden; max-width: 100%; }

body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

button { font: inherit; cursor: pointer; }
.app-build { color: #a6bddb; font-size: 11px; }

.app-shell {
  isolation: isolate;
  position: relative;
  height: 100svh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  background: #03142e;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.backdrop, .backdrop-tint { position: fixed; inset: 0; z-index: -2; }

.backdrop {
  background: #03142e url("./assets/gelendzhik-menu.webp") center top / cover no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.backdrop-tint {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(1, 10, 30, .2) 0%, rgba(1, 12, 33, .04) 22%, rgba(1, 10, 27, .47) 66%, rgba(1, 12, 30, .77) 100%),
    radial-gradient(circle at 55% 45%, rgba(16, 102, 212, .18), transparent 37%);
}

.page {
  width: min(100%, 520px);
  min-height: calc(100svh + 1px);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 20px calc(106px + env(safe-area-inset-bottom));
}

.page::after {
  content: "";
  display: block;
  height: 25svh;
}

.topbar { display: flex; align-items: center; gap: 7px; min-height: 48px; }
.back-button { width: 32px; padding: 0; border: 0; color: #f0f6ff; background: none; font-size: 49px; line-height: 25px; font-weight: 200; }
.brand { min-width: 0; flex: 1; }
.brand p { margin: 0; }
.brand__title { font-size: 17px; font-weight: 760; letter-spacing: -.4px; white-space: nowrap; }
.brand__subtitle { color: #91b8ec; font-size: 14px; font-weight: 500; }
.rules-button {
  display: flex; align-items: center; gap: 6px; padding: 10px 13px; border: 1px solid rgba(130, 195, 255, .36);
  border-radius: 12px; color: #eaf5ff; background: rgba(5, 24, 54, .42); font-weight: 700; font-size: 14px;
}
.rules-button span { color: #ffca24; font-size: 21px; line-height: 10px; }
.channel-button { position: relative; display: flex; align-items: center; width: 132px; padding: 5px; border: 1px solid rgba(130, 195, 255, .5); border-radius: 13px; color: #eaf5ff; background: rgba(5, 24, 54, .5); font-size: 10px; font-weight: 760; white-space: nowrap; }
.channel-button img { width: 48px; height: 48px; border: 1px solid rgba(130, 220, 255, .72); border-radius: 11px; object-fit: cover; box-shadow: 0 0 11px rgba(49, 192, 255, .42); }
.channel-label { position: absolute; right: 0; left: 59px; font-size: 9px; letter-spacing: -.2px; text-align: center; }

.app-shell.subscription-locked > :not(.subscription-gate):not(.backdrop):not(.backdrop-tint) { visibility: hidden; pointer-events: none; }
.subscription-gate { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(24, 120, 225, .28), transparent 44%), rgba(0, 12, 43, .84); backdrop-filter: blur(7px); }
.subscription-gate[hidden] { display: none; }
.subscription-gate > img { width: 88px; height: 88px; margin-bottom: 14px; border: 2px solid #45d8ff; border-radius: 22px; box-shadow: 0 0 24px rgba(36, 201, 255, .66); object-fit: cover; }
.subscription-gate h1 { margin: 8px 0 11px; font-family: var(--ui-font); font-size: clamp(30px, 9vw, 48px); font-weight: 400; line-height: .94; color: #f7fbff; text-shadow: 0 0 18px rgba(72, 195, 255, .52); }
.subscription-gate > p:not(.dialog-kicker) { max-width: 330px; margin: 0; color: #c5daf5; font-size: clamp(15px, 4.3vw, 20px); line-height: 1.25; }
.subscription-gate-actions { display: grid; width: min(100%, 340px); gap: 10px; margin-top: 24px; }
.subscription-gate-actions button { width: 100%; }
.secondary-button { min-height: 49px; border: 2px solid #38d7ff; border-radius: 13px; color: #eefdff; background: rgba(3, 53, 129, .68); box-shadow: inset 0 0 16px rgba(48, 220, 255, .18), 0 0 12px rgba(0, 189, 255, .25); font-size: clamp(15px, 4.4vw, 21px); font-weight: 800; text-shadow: 0 2px 5px #002b78; }
.secondary-button:disabled { opacity: .52; }

.intro { padding: 9px 0 17px; text-align: center; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.eyebrow { display: none; }
.intro h1 { margin: 0; font-family: var(--ui-font); font-size: clamp(38px, 7vw, 49px); letter-spacing: .15px; line-height: .96; color: #f5f8ff; }
.intro p:last-child { margin: 7px 0 0; color: #b5caec; font-size: clamp(16px, 3.3vw, 20px); letter-spacing: -.35px; line-height: 1.15; }

.games { display: grid; gap: 14px; }
.game-card {
  isolation: isolate; position: relative; overflow: hidden; min-height: 0; aspect-ratio: 1.95 / 1; padding: 10px 11px;
  border: 1px solid rgba(45, 185, 255, .95); border-radius: 27px;
  background: linear-gradient(117deg, rgba(2, 35, 91, .94) 0%, rgba(1, 37, 91, .86) 52%, rgba(3, 20, 61, .69) 100%);
  box-shadow: inset 0 0 25px rgba(3, 121, 255, .33), 0 0 18px rgba(0, 159, 255, .38), 0 14px 28px rgba(0, 0, 22, .32);
}
.game-card::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: .9;
  background: radial-gradient(circle at 76% 20%, rgba(19, 147, 255, .43), transparent 32%), linear-gradient(155deg, rgba(94, 210, 255, .12), transparent 35%);
}
.quiz-card { background: linear-gradient(117deg, rgba(2, 35, 91, .93), rgba(3, 31, 79, .8)); }
.coming-soon-card { display: grid; place-items: center; border-color: rgba(163, 177, 193, .48); background: linear-gradient(132deg, rgba(45, 54, 70, .94), rgba(20, 27, 41, .94)); box-shadow: inset 0 0 23px rgba(180, 194, 209, .08), 0 10px 22px rgba(0, 0, 20, .22); filter: saturate(.34); pointer-events: none; }
.coming-soon-card::before { opacity: .38; background: radial-gradient(circle at 50% 45%, rgba(209, 219, 229, .17), transparent 38%), linear-gradient(155deg, rgba(255, 255, 255, .06), transparent 55%); }
.coming-soon-copy { position: relative; z-index: 1; color: #b7c0ca; text-align: center; }
.coming-soon-plus { display: block; margin-bottom: 3px; color: #aeb7c1; font-size: clamp(45px, 12vw, 78px); font-weight: 200; line-height: .8; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.coming-soon-copy p { margin: 0; color: #b6bec7; font-size: clamp(13px, 3.5vw, 20px); font-weight: 600; line-height: 1.16; text-shadow: 0 1px 4px rgba(0, 0, 0, .65); }
.invite-friends-banner { position: fixed; z-index: 1; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; width: min(calc(100% - 40px), 480px); margin: 0; line-height: 0; pointer-events: none; transform: translate(-50%, calc(100% + 2px)); transition: transform .32s cubic-bezier(.22, .72, .25, 1); will-change: transform; }
.invite-friends-banner.is-docked { pointer-events: auto; transform: translate(-50%, 0); }
.invite-friends-banner img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 22, .42)); }
.invite-friends-banner button { position: absolute; z-index: 1; top: 14%; right: 2.2%; width: 11%; height: 72%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; }
.invite-friends-banner button:active { transform: scale(.94); filter: brightness(1.35); }
.invite-friends-banner button:focus-visible { outline: 2px solid #d9f7ff; outline-offset: -3px; }
.card-copy { position: relative; z-index: 1; width: 61%; min-width: 0; }
.game-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 4px; padding: 4px 6px; border: 1px solid rgba(62, 173, 255, .36); border-radius: 7px; color: #b7d0f4; background: rgba(1, 22, 64, .36); font-size: clamp(8px, 2.2vw, 12px); line-height: 1.1; white-space: nowrap; }
.game-chip span { color: #ffbb15; font-size: clamp(12px, 3.4vw, 20px); }
.quiz-chip span { color: #38bffc; font-size: clamp(9px, 2.4vw, 15px); }
.game-card h2 { margin: 0; font-family: var(--ui-font); font-size: clamp(22px, 6.2vw, 43px); letter-spacing: .2px; line-height: .99; text-shadow: 0 3px 13px rgba(0, 0, 15, .55); }
.quiz-card h2 { font-size: clamp(21px, 5.8vw, 40px); letter-spacing: .25px; }
.game-description { margin: 5px 0 0; max-width: 100%; color: #cbdbf5; font-size: clamp(10px, 2.8vw, 15px); line-height: 1.2; }
.game-meta { margin: 4px 0 0; color: #a6c1ea; font-size: clamp(9px, 2.5vw, 13px); }
.primary-button {
  display: flex; align-items: center; justify-content: center; gap: 23px; width: min(100%, 165px); min-width: 0; height: clamp(35px, 9.8vw, 51px); margin-top: clamp(7px, 2vw, 13px); border: 2px solid #34d6ff; border-radius: 11px;
  color: white; background: linear-gradient(180deg, #1379ed, #0751bd); box-shadow: inset 0 0 18px rgba(48, 220, 255, .4), 0 0 17px rgba(0, 189, 255, .63);
  font-size: clamp(16px, 4.6vw, 24px); font-weight: 850; letter-spacing: -.4px; text-shadow: 0 2px 5px #002b78;
  transition: transform .14s ease, filter .14s ease;
}
.primary-button:hover { filter: brightness(1.12); }
.primary-button:active { transform: scale(.96); }
.primary-button span { margin-top: -3px; font-size: clamp(27px, 7.5vw, 42px); font-weight: 300; line-height: 0; }
.game-art { position: absolute; z-index: 0; pointer-events: none; object-fit: contain; object-position: bottom right; }
.battle-art { right: 8%; bottom: -7px; width: 49%; height: 99%; }
.quiz-art { right: -1%; bottom: 17px; width: 53%; height: 101%; object-fit: contain; object-position: bottom right; }

.screen[hidden] { display: none; }

.battle-screen { padding-top: max(16px, env(safe-area-inset-top)); }
.battle-intro { padding: 9px 0 10px; text-shadow: 0 2px 16px rgba(0, 0, 0, .54); }
.battle-intro h1 { margin: 0; font-family: var(--ui-font); font-size: clamp(30px, 7.2vw, 43px); font-weight: 800; line-height: .94; letter-spacing: -.8px; white-space: nowrap; }
.battle-intro h1 span { font-size: .82em; filter: drop-shadow(0 0 10px rgba(255, 79, 17, .7)); }
.battle-intro p { margin: 7px 0 0; color: #a7cef9; font-size: clamp(15px, 4vw, 22px); font-weight: 600; line-height: 1.08; }
.battle-controls { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .65fr); gap: 8px; align-items: center; }
.battle-tabs { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 43px; overflow: hidden; border: 1px solid rgba(87, 172, 255, .55); border-radius: 13px; background: rgba(1, 24, 72, .5); }
.battle-tab { padding: 5px 2px; border: 0; color: #b8d6fa; background: transparent; font-size: clamp(8px, 2.35vw, 13px); font-weight: 650; line-height: 1.02; white-space: normal; }
.battle-tab.is-active { color: #071833; background: linear-gradient(135deg, #79c5ff, #acd8ff); box-shadow: 0 0 15px rgba(105, 194, 255, .56); font-weight: 850; }
.battle-timer { display: flex; align-items: center; gap: 6px; min-height: 51px; padding: 6px; border: 1px solid rgba(90, 180, 255, .55); border-radius: 13px; background: linear-gradient(135deg, rgba(2, 40, 98, .76), rgba(1, 23, 65, .67)); box-shadow: inset 0 0 17px rgba(33, 138, 255, .13); }
.timer-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid #a7d4ff; border-radius: 50%; color: #cdf0ff; font-size: 23px; line-height: 1; }
.battle-timer small, .battle-timer strong { display: block; white-space: nowrap; }
.battle-timer small { color: #b9d4f7; font-size: clamp(8px, 2.3vw, 11px); line-height: 1.1; }
.battle-timer strong { margin-top: 3px; color: #f4f8ff; font-size: clamp(11px, 3.1vw, 17px); line-height: 1.08; }
.battle-pulse, .battle-cta { display: flex; align-items: center; width: 100%; border: 1px solid rgba(58, 181, 255, .72); color: #eaf6ff; background: linear-gradient(120deg, rgba(4, 46, 109, .85), rgba(2, 24, 69, .72)); box-shadow: inset 0 0 17px rgba(21, 130, 255, .18); text-align: left; }
.battle-pulse { justify-content: space-between; min-height: 49px; margin: 8px 0 10px; padding: 6px 10px 6px 12px; border-radius: 14px; }
.battle-pulse span, .battle-cta span:not(.battle-target) { min-width: 0; }
.battle-pulse b, .battle-pulse small, .battle-cta b, .battle-cta small { display: block; }
.battle-pulse b { overflow: hidden; font-size: clamp(12px, 3.4vw, 17px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.battle-pulse small { margin-top: 3px; color: #adcaef; font-size: clamp(10px, 2.7vw, 14px); }
.battle-pulse i, .battle-cta > i, .district-card > em { flex: 0 0 auto; color: #23caff; font-size: 42px; font-style: normal; font-weight: 300; line-height: .6; text-shadow: 0 0 11px rgba(28, 203, 255, .85); }
.district-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.district-card { isolation: isolate; position: relative; display: block; min-width: 0; min-height: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 2px solid var(--district-color); border-radius: 20px; color: #fff; background: #05266a; box-shadow: inset 0 0 22px color-mix(in srgb, var(--district-color) 35%, transparent), 0 0 16px color-mix(in srgb, var(--district-color) 58%, transparent), 0 12px 23px rgba(0, 0, 23, .32); text-align: left; }
.district-card::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2, 12, 42, .02) 14%, rgba(1, 13, 47, .1) 35%, rgba(1, 12, 43, .98) 76%); }
.district-card > img:not(.district-crown) { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; transform: none; }
.district-card:hover { filter: brightness(1.07); }
.district-card:active { transform: scale(.98); }
.district-gelendzhik { --district-color: #18cfff; }
.district-kabardinka { --district-color: #e750f8; }
.district-divnomorskoe { --district-color: #ffc047; }
.district-arkhipo { --district-color: #4be88b; }
.district-rank { position: absolute; z-index: 1; top: 9px; left: 9px; display: grid; place-items: center; min-width: 42px; min-height: 29px; padding: 3px 7px; border-radius: 10px; color: #07132d; background: linear-gradient(135deg, #fff2b3, #f7bf3e); box-shadow: 0 3px 9px rgba(0, 0, 0, .25); font-size: clamp(16px, 4.6vw, 24px); font-weight: 900; line-height: 1; }
.district-kabardinka .district-rank { background: linear-gradient(135deg, #e0dcff, #988cf1); }
.district-arkhipo .district-rank { background: linear-gradient(135deg, #d1ffdc, #65e8a2); }
.district-crown { display: none; position: absolute; z-index: 10; top: -6%; right: -10%; width: 31%; height: auto; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 190, 27, .82)) drop-shadow(0 0 15px rgba(32, 197, 255, .56)); transform: rotate(7deg); }
.district-card.is-leader { z-index: 5; overflow: visible; }
.district-card.is-leader > img:not(.district-crown) { transform: none; }
.district-card.is-leader .district-crown { display: block; }
.district-copy { position: absolute; z-index: 1; right: 8px; bottom: 10px; left: 10px; }
.district-copy b, .district-copy strong, .district-copy small { display: block; }
.district-copy b { overflow: hidden; font-family: var(--ui-font); font-size: clamp(12px, 3.35vw, 20px); font-weight: 900; line-height: 1; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 7px #001034; }
.district-copy b i { color: #b8d9ff; font-size: .78em; font-style: normal; text-shadow: none; }
.district-copy strong { margin-top: 6px; font-size: clamp(16px, 4.2vw, 26px); line-height: 1; letter-spacing: -.4px; text-shadow: 0 2px 7px #001034; }
.district-copy small { min-height: 20px; margin-top: 6px; padding-right: 15px; color: #c5dcfa; font-size: clamp(8px, 2.2vw, 12px); line-height: 1.08; }
.district-contribution { min-height: 31px !important; text-transform: uppercase; }
.district-contribution span, .district-contribution b { display: block; }
.district-contribution span { color: #b9d3f5; font-size: .87em; letter-spacing: .025em; }
.district-contribution b { margin-top: 2px; color: #ffffff; font-size: clamp(10px, 2.7vw, 14px); letter-spacing: -.01em; text-shadow: 0 2px 7px #001034; }
.district-card > em { position: absolute; z-index: 1; right: 8px; bottom: 14px; font-size: clamp(31px, 8.4vw, 47px); }
.battle-cta { gap: 9px; min-height: 66px; margin-top: 13px; padding: 8px 10px; border-radius: 15px; }
.battle-target { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 3px solid #edf9ff; border-radius: 50%; color: #edf9ff; font-size: 31px; font-weight: 900; line-height: 1; filter: drop-shadow(0 0 8px rgba(79, 208, 255, .72)); }
.battle-cta b { font-size: clamp(14px, 3.8vw, 21px); line-height: 1.03; }
.battle-cta small { margin-top: 5px; color: #a9cdf6; font-size: clamp(11px, 2.9vw, 15px); line-height: 1.08; }
.battle-invite-cta { cursor: pointer; text-align: left; touch-action: manipulation; transition: transform .14s ease, filter .14s ease; }
.battle-invite-cta:active { transform: scale(.985); filter: brightness(1.14); }

.battle-season-view { margin-top: 13px; }
.season-week-list { display: grid; gap: 10px; }
.season-week-card { position: relative; display: grid; grid-template-columns: 50px 62px minmax(0, 1fr) 66px 17px; gap: 4px; align-items: center; min-height: 104px; overflow: hidden; padding: 9px 7px 9px 10px; border: 1px solid #1fc9ff; border-radius: 17px; color: #eef8ff; background: linear-gradient(115deg, rgba(2, 47, 116, .94), rgba(2, 24, 69, .87)); box-shadow: inset 0 0 20px rgba(0, 128, 255, .22), 0 0 12px rgba(0, 169, 255, .28); }
.season-week-card.is-current { border-color: #ffc65c; background: linear-gradient(115deg, rgba(64, 53, 63, .95), rgba(4, 28, 70, .9)); box-shadow: inset 0 0 22px rgba(255, 191, 53, .18), 0 0 15px rgba(255, 183, 38, .4); }
.season-week-card.is-not-started { border-color: #34d8ff; background: linear-gradient(115deg, rgba(3, 60, 130, .96), rgba(2, 25, 73, .89)); box-shadow: inset 0 0 22px rgba(18, 188, 255, .26), 0 0 16px rgba(27, 200, 255, .47); }
.season-week-card.is-not-started { grid-template-columns: 50px minmax(0, 1fr) 66px 17px; }
.season-week-card.is-not-started .season-week-art { display: none; }
.season-week-number { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.season-week-number small, .season-week-winner small, .season-week-score small { display: block; color: #a8cef9; font-size: clamp(7px, 2vw, 10px); font-weight: 800; line-height: 1.08; }
.season-week-number b { display: block; margin: 3px 0 2px; font-size: clamp(27px, 7.5vw, 42px); line-height: .86; }
.season-week-number span { color: #b8d7f8; font-size: clamp(7px, 1.85vw, 9px); line-height: 1.05; white-space: nowrap; }
.season-week-art { align-self: stretch; overflow: hidden; border-radius: 9px; background: radial-gradient(circle, rgba(27, 144, 255, .24), transparent 72%); }
.season-week-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.season-week-winner { min-width: 0; }
.season-week-winner b { display: block; overflow: hidden; margin: 4px 0; font-family: var(--ui-font); font-size: clamp(9px, 2.8vw, 16px); font-weight: 900; letter-spacing: -.035em; line-height: .98; text-overflow: ellipsis; white-space: nowrap; }
.season-week-winner span { display: -webkit-box; overflow: hidden; color: #aed0f6; font-size: clamp(8px, 2.2vw, 12px); line-height: 1.1; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.season-week-score { min-width: 0; text-align: right; }
.season-week-score strong { display: block; color: #f6fbff; font-size: clamp(13px, 3.7vw, 21px); line-height: 1; white-space: nowrap; text-shadow: 0 0 8px rgba(40, 183, 255, .4); }
.season-week-score small { margin-top: 5px; font-size: clamp(7px, 1.9vw, 10px); font-weight: 500; }
.season-empty-score { color: #74dfff !important; }
.season-week-card > i { color: #2bcfff; font-size: 37px; font-style: normal; font-weight: 300; line-height: .6; text-shadow: 0 0 9px rgba(19, 205, 255, .8); }
.player-leaderboard-card .player-avatar { display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(111, 224, 255, .72); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #78ddff, #0956ba 65%, #031d60); box-shadow: 0 0 11px rgba(47, 203, 255, .52); aspect-ratio: 1; align-self: center; }
.player-leaderboard-card { grid-template-columns: 42px 43px minmax(0, 1fr) 63px 15px; min-height: 55px; gap: 4px; padding: 5px 6px 5px 8px; border-radius: 13px; }
.player-leaderboard-card .season-week-number b { margin: 1px 0; font-size: clamp(20px, 5.8vw, 30px); }
.player-leaderboard-card .season-week-number small, .player-leaderboard-card .season-week-number span { font-size: clamp(6px, 1.7vw, 8px); }
.player-leaderboard-card .season-week-winner b { margin: 2px 0 0; font-size: clamp(11px, 3.1vw, 16px); }
.player-leaderboard-card .season-week-winner span { display: none; }
.player-leaderboard-card .season-week-score strong { font-size: clamp(11px, 3.1vw, 16px); }
.player-leaderboard-card .season-week-score small { display: none; }
.player-leaderboard-card > i { font-size: 29px; }
.player-leaderboard-card .player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-leaderboard-card .player-avatar span { color: #f4fbff; font-family: var(--ui-font); font-size: clamp(21px, 6vw, 32px); text-shadow: 0 0 8px rgba(255, 255, 255, .7); }
.player-leaderboard-card .season-week-winner span { color: #bcdaf9; }
.player-leaderboard-card.is-current { border-color: #ffd36a; box-shadow: inset 0 0 22px rgba(255, 195, 44, .2), 0 0 16px rgba(255, 177, 25, .45); }
.player-leaderboard-empty { padding: 22px 14px; border: 1px solid #36d4ff; border-radius: 17px; color: #cce9ff; background: rgba(2, 37, 96, .83); text-align: center; }
.year-player-champion { position: relative; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(255, 202, 70, .88); border-radius: 17px; background: linear-gradient(155deg, rgba(6, 56, 138, .96), rgba(1, 18, 57, .97)); box-shadow: inset 0 0 25px rgba(251, 185, 25, .19), 0 0 15px rgba(255, 181, 25, .37); }
.year-player-champion-header { display: block; width: 100%; height: auto; margin-top: 2px; object-fit: contain; }
.year-player-champion-info { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 57px; padding: 5px 10px 8px; border-top: 1px solid rgba(255, 214, 91, .34); background: linear-gradient(90deg, rgba(4, 41, 109, .82), rgba(1, 20, 63, .76)); }
.year-player-champion-avatar { display: grid; place-items: center; overflow: hidden; width: 42px; aspect-ratio: 1; border: 1px solid #ffd76b; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff1a7, #cc7910 60%, #542003); box-shadow: 0 0 12px rgba(255, 189, 39, .75); }
.year-player-champion-avatar img { width: 100%; height: 100%; object-fit: cover; }
.year-player-champion-avatar span { color: #fff9de; font-family: var(--ui-font); font-size: 25px; text-shadow: 0 0 7px #ff9d00; }
.year-player-champion-info small { display: block; color: #ffdc7a; font-size: clamp(7px, 1.9vw, 10px); font-weight: 900; line-height: 1; }
.year-player-champion-info b { display: block; overflow: hidden; margin-top: 3px; color: #fff6d5; font-family: var(--ui-font); font-size: clamp(13px, 3.6vw, 19px); line-height: 1; text-overflow: ellipsis; text-shadow: 0 2px 7px #5d2700; white-space: nowrap; }
.year-player-champion-info strong { color: #fff2b8; font-size: clamp(12px, 3.4vw, 18px); line-height: .95; text-align: right; text-shadow: 0 0 9px rgba(255, 177, 24, .85); white-space: nowrap; }
.year-player-champion-info strong em { display: block; margin-top: 3px; color: #c8e2ff; font-size: clamp(6px, 1.7vw, 8px); font-style: normal; font-weight: 500; text-shadow: none; }
.year-player-champion-empty { padding: 8px 13px 12px; color: #d6eaff; font-size: 12px; text-align: center; }
.player-season-divider { display: flex; align-items: center; gap: 9px; margin: 11px 2px 9px; color: #ffdb7a; font-family: var(--ui-font); font-size: clamp(12px, 3.3vw, 17px); text-transform: uppercase; white-space: nowrap; }
.player-season-divider::before, .player-season-divider::after { width: 100%; height: 1px; content: ''; background: linear-gradient(90deg, transparent, rgba(255, 202, 65, .9)); box-shadow: 0 0 6px rgba(255, 189, 45, .65); }
.player-season-divider::after { background: linear-gradient(90deg, rgba(255, 202, 65, .9), transparent); }

.app-shell:has(.attack-screen:not([hidden])) { overflow-y: hidden; }
.attack-screen { position: relative; height: 100svh; min-height: 100svh; overflow: hidden; padding: 0 12px calc(80px + env(safe-area-inset-bottom)); background-image: var(--attack-scene); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.attack-screen::after { display: none; }
.attack-screen .topbar { display: flex; min-height: 48px; }
.attack-intro { position: static; padding: 0; }
.attack-info-stack { position: absolute; z-index: 3; top: calc(52px + env(safe-area-inset-top)); right: 2.4%; display: grid; width: 22%; gap: 7px; align-content: start; }
.attack-info { display: flex; align-items: center; gap: 5px; min-height: 46px; padding: 5px; border: 1px solid rgba(82, 213, 255, .92); border-radius: 12px; background: rgba(2, 30, 79, .94); box-shadow: inset 0 0 14px rgba(20, 128, 255, .28), 0 0 11px rgba(30, 202, 255, .45); }
.attack-info > span { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #abd7ff; border-radius: 50%; color: #d9f3ff; font-size: 18px; line-height: 1; }
.attack-charge-info > span { color: #ffdf6a; border-color: #ffd85a; box-shadow: 0 0 9px rgba(255, 188, 25, .72); font-size: 15px; }
.attack-info small, .attack-info b { display: block; }
.attack-info small { color: #bad3f3; font-size: clamp(7px, 1.9vw, 10px); line-height: 1; }
.attack-info b { margin-top: 2px; color: #f7fbff; font-size: clamp(9px, 2.6vw, 13px); line-height: 1.03; }
.attack-score-card { position: absolute; z-index: 4; top: 37.3%; left: 50%; width: min(55%, 310px); margin: 0; overflow: hidden; padding: 7px 11px; border: 2px solid #2fd5ff; border-radius: 17px; background: linear-gradient(145deg, rgba(4, 55, 138, .96), rgba(2, 24, 76, .94)); box-shadow: inset 0 0 24px rgba(25, 155, 255, .31), 0 0 17px rgba(0, 185, 255, .5); text-align: center; transform: translateX(-50%); }
.attack-time-inline { margin: 0 0 5px; text-align: left; }
.attack-time-inline small { display: flex; justify-content: space-between; color: #b9d7f7; font-size: clamp(9px, 2.5vw, 12px); }
.attack-time-inline small b { color: #ecf8ff; font-weight: 800; }
.attack-time-inline i { display: block; height: 6px; margin-top: 3px; overflow: hidden; border-radius: 99px; background: rgba(42, 87, 151, .72); }
.attack-time-inline i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #21c7ff, #52edff); box-shadow: 0 0 12px #38d9ff; }
.attack-score-card small { display: block; color: #c6ddf9; font-size: clamp(11px, 3.1vw, 16px); }
.attack-score-card strong { display: block; margin-top: 1px; font-family: var(--ui-font); color: #f9fdff; font-size: clamp(47px, 13vw, 78px); font-weight: 900; line-height: .84; letter-spacing: -.07em; text-shadow: 0 0 17px rgba(75, 209, 255, .75); }
.attack-score-card p { margin: 5px 0 0; color: #b7d5f5; font-size: clamp(10px, 2.8vw, 14px); }
.attack-score-card p:first-letter { color: #ffd343; }
.attack-score-card::before, .attack-score-card::after { position: absolute; z-index: 1; top: 53%; color: #7beeff; font-family: Arial, sans-serif; font-size: clamp(38px, 10vw, 62px); font-weight: 900; line-height: 1; opacity: .65; pointer-events: none; text-shadow: 0 0 8px #20d9ff, 0 0 20px rgba(32, 171, 255, .9); }
.attack-score-card::before { content: "ϟ"; left: 18%; transform: translateY(-50%) rotate(-16deg); }
.attack-score-card::after { content: "ϟ"; right: 18%; transform: translateY(-50%) scaleX(-1) rotate(-16deg); }
.attack-score-card.score-tap-pulse::before, .attack-score-card.score-tap-pulse::after { animation: score-lightning-pulse .18s ease-out both; }
.attack-score-card.score-tap-pulse #attack-score { animation: score-number-pulse .18s ease-out both; }
@keyframes score-lightning-pulse { from { opacity: .35; filter: brightness(1); } 38% { opacity: 1; filter: brightness(2.8); text-shadow: 0 0 10px #fff, 0 0 25px #24d9ff, 0 0 42px #2d80ff; } to { opacity: .65; filter: brightness(1); } }
@keyframes score-number-pulse { 50% { transform: scale(1.08); text-shadow: 0 0 14px #fff, 0 0 28px #27dcff; } }
.attack-score-card.score-milestone::before, .attack-score-card.score-milestone::after { content: "✦"; color: #ffe26b; opacity: 0; text-shadow: 0 0 8px #fff9c2, 0 0 22px #ffbd14, 0 0 45px #ff7b00; animation: score-milestone-spark .5s ease-out both; }
.attack-score-card.score-milestone #attack-score { position: relative; z-index: 2; color: #fff4b0; animation: score-milestone-number .5s cubic-bezier(.15,.9,.22,1) both !important; }
@keyframes score-milestone-number { 0% { transform: scale(1); color: #f9fdff; text-shadow: 0 0 17px rgba(75, 209, 255, .75); } 34% { transform: scale(2); color: #fff9cf; text-shadow: 0 0 5px #fff, 0 0 16px #fff0a0, 0 0 35px #ffd21e, 0 0 70px #ff9400; } 66% { transform: scale(1.72); color: #fff6ba; text-shadow: 0 0 5px #fff, 0 0 27px #ffd31d, 0 0 55px #ff9800; } 100% { transform: scale(1); color: #f9fdff; text-shadow: 0 0 17px rgba(75, 209, 255, .75); } }
@keyframes score-milestone-spark { 0% { opacity: 0; transform: translateY(-50%) scale(.15) rotate(0deg); } 28% { opacity: 1; transform: translateY(-50%) scale(1.65) rotate(35deg); } 100% { opacity: 0; transform: translateY(-50%) scale(2.2) rotate(90deg); } }
.attack-reward { position: absolute; z-index: 4; inset: 0; display: none; overflow: hidden; pointer-events: none; isolation: isolate; }
.attack-reward.is-visible { display: block; animation: attack-reward-stage 2s cubic-bezier(.15,.78,.2,1) both; }
.attack-reward::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #fff5b5; box-shadow: 0 0 20px 18px rgba(255, 193, 26, .98), 0 0 65px 36px rgba(255, 120, 0, .75); transform: translate(-50%, -50%); animation: attack-reward-flare 2s ease-out both; }
.attack-reward img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 0 6px rgba(255, 235, 116, .88)) drop-shadow(0 0 17px rgba(255, 137, 0, .82)); animation: attack-reward-character 2s cubic-bezier(.1,.8,.2,1) both; }
.attack-tap-button .attack-reward img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.attack-reward-confetti { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.attack-reward-confetti i { position: absolute; top: 50%; left: 50%; width: 8px; height: 13px; border-radius: 2px; background: #ffd327; box-shadow: 0 0 6px rgba(255, 195, 17, .95); animation: attack-reward-confetti 2s cubic-bezier(.14,.65,.3,1) both; }
.attack-reward-confetti i:nth-child(3n) { background: #38d9ff; }.attack-reward-confetti i:nth-child(4n) { background: #fff7c6; }
.attack-reward-confetti i:nth-child(1) { --x:-108px; --y:-91px; --r:160deg; }.attack-reward-confetti i:nth-child(2) { --x:-39px; --y:-134px; --r:78deg; }.attack-reward-confetti i:nth-child(3) { --x:34px; --y:-130px; --r:210deg; }.attack-reward-confetti i:nth-child(4) { --x:111px; --y:-75px; --r:34deg; }.attack-reward-confetti i:nth-child(5) { --x:135px; --y:2px; --r:241deg; }.attack-reward-confetti i:nth-child(6) { --x:104px; --y:91px; --r:97deg; }.attack-reward-confetti i:nth-child(7) { --x:32px; --y:130px; --r:301deg; }.attack-reward-confetti i:nth-child(8) { --x:-45px; --y:126px; --r:12deg; }.attack-reward-confetti i:nth-child(9) { --x:-120px; --y:78px; --r:199deg; }.attack-reward-confetti i:nth-child(10) { --x:-135px; --y:0px; --r:61deg; }.attack-reward-confetti i:nth-child(11) { --x:-83px; --y:-106px; --r:293deg; }.attack-reward-confetti i:nth-child(12) { --x:83px; --y:106px; --r:142deg; }
@keyframes attack-reward-stage { from { opacity: 0; } 12% { opacity: 1; } 74% { opacity: 1; } to { opacity: 0; } }
@keyframes attack-reward-flare { from { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(2.9); } to { opacity: 0; transform: translate(-50%, -50%) scale(4.4); } }
@keyframes attack-reward-character { from { opacity: 0; transform: scale(.55) translateY(15%); } 16% { opacity: 1; transform: scale(1.06) translateY(0); } 70% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.08) translateY(-4%); } }
@keyframes attack-reward-confetti { from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); } 13% { opacity: 1; } 74% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(.55); } }
.attack-arena { position: absolute; z-index: 4; top: 57%; left: 50%; display: grid; justify-items: center; margin: 0; transform: translateX(-50%); }
.attack-tap-button { position: relative; display: grid; place-items: center; width: min(54vw, 27svh, 234px); aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 50%; padding: 0; background: transparent; box-shadow: none; transition: filter .1s ease; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; }
.attack-tap-button::before, .attack-tap-button::after { display: none; }
.attack-tap-button img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.07); }
.attack-tap-button .attack-tap-art { position: absolute; z-index: 1; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; transform: none !important; filter: drop-shadow(0 0 9px rgba(255, 74, 0, .9)) drop-shadow(0 0 20px rgba(255, 176, 20, .56)); pointer-events: none; }
.attack-tap-button > #attack-district-art { display: none; }
.attack-tap-button:disabled { filter: brightness(.73) saturate(.78); }
.attack-tap-button.tap-flash { animation: attack-tap-flash 115ms ease-out both; }
@keyframes attack-tap-flash { 0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 8px rgba(255, 72, 0, .75)); } 42% { transform: scale(1.055); filter: brightness(1.36) drop-shadow(0 0 15px #fff6bd) drop-shadow(0 0 30px #ff6a00); } 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 8px rgba(255, 72, 0, .75)); } }
.attack-stars { position: absolute; z-index: 2; top: 0; right: 0; left: 0; height: 44%; overflow: hidden; pointer-events: none; }
.attack-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #eef9ff; box-shadow: 0 0 4px 1px rgba(142, 215, 255, .8), 0 0 9px rgba(89, 163, 255, .45); opacity: .3; animation: attack-star-twinkle 2.6s ease-in-out infinite alternate; }
.attack-stars i:nth-child(1) { top: 5%; left: 7%; animation-delay: -.3s; }.attack-stars i:nth-child(2) { top: 10%; left: 17%; animation-delay: -1.8s; }.attack-stars i:nth-child(3) { top: 4%; left: 28%; animation-delay: -.9s; }.attack-stars i:nth-child(4) { top: 14%; left: 38%; animation-delay: -2.4s; }.attack-stars i:nth-child(5) { top: 7%; left: 49%; animation-delay: -1.1s; }.attack-stars i:nth-child(6) { top: 17%; left: 57%; animation-delay: -.5s; }.attack-stars i:nth-child(7) { top: 3%; left: 68%; animation-delay: -2.1s; }.attack-stars i:nth-child(8) { top: 12%; left: 78%; animation-delay: -1.4s; }.attack-stars i:nth-child(9) { top: 6%; left: 89%; animation-delay: -.7s; }.attack-stars i:nth-child(10) { top: 23%; left: 10%; animation-delay: -2.6s; }.attack-stars i:nth-child(11) { top: 30%; left: 22%; animation-delay: -.2s; }.attack-stars i:nth-child(12) { top: 20%; left: 32%; animation-delay: -1.9s; }.attack-stars i:nth-child(13) { top: 34%; left: 44%; animation-delay: -1.3s; }.attack-stars i:nth-child(14) { top: 26%; left: 52%; animation-delay: -.8s; }.attack-stars i:nth-child(15) { top: 40%; left: 63%; animation-delay: -2.2s; }.attack-stars i:nth-child(16) { top: 30%; left: 73%; animation-delay: -.4s; }.attack-stars i:nth-child(17) { top: 21%; left: 84%; animation-delay: -1.6s; }.attack-stars i:nth-child(18) { top: 37%; left: 94%; animation-delay: -2.5s; }.attack-stars i:nth-child(19) { top: 46%; left: 5%; animation-delay: -1s; }.attack-stars i:nth-child(20) { top: 51%; left: 16%; animation-delay: -2s; }.attack-stars i:nth-child(21) { top: 43%; left: 27%; animation-delay: -.6s; }.attack-stars i:nth-child(22) { top: 55%; left: 37%; animation-delay: -1.5s; }.attack-stars i:nth-child(23) { top: 48%; left: 58%; animation-delay: -2.3s; }.attack-stars i:nth-child(24) { top: 58%; left: 70%; animation-delay: -.1s; }.attack-stars i:nth-child(25) { top: 46%; left: 81%; animation-delay: -1.2s; }
.attack-stars i:nth-child(3n) { width: 3px; height: 3px; }.attack-stars i:nth-child(5n) { animation-duration: 1.8s; }
@keyframes attack-star-twinkle { from { opacity: .14; transform: scale(.55); } 55% { opacity: .95; transform: scale(1.35); } to { opacity: .32; transform: scale(.76); } }
.attack-embers { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.attack-embers i { position: absolute; bottom: 10%; width: 4px; height: 4px; border-radius: 50%; background: #ffdf84; box-shadow: 0 0 5px 2px rgba(255, 95, 0, .9), 0 0 11px rgba(255, 172, 30, .58); opacity: 0; animation: attack-ember-rise 2.9s linear infinite; }
.attack-embers i:nth-child(1) { left: 8%; --drift: 16px; --lift: 122px; animation-delay: -1.1s; }.attack-embers i:nth-child(2) { left: 19%; --drift: -21px; --lift: 186px; animation-delay: -3.4s; }.attack-embers i:nth-child(3) { left: 30%; --drift: 13px; --lift: 95px; animation-delay: -2.2s; }.attack-embers i:nth-child(4) { left: 44%; --drift: -15px; --lift: 158px; animation-delay: -.4s; }.attack-embers i:nth-child(5) { left: 57%; --drift: 22px; --lift: 130px; animation-delay: -3.8s; }.attack-embers i:nth-child(6) { left: 70%; --drift: -11px; --lift: 202px; animation-delay: -1.8s; }.attack-embers i:nth-child(7) { left: 83%; --drift: 18px; --lift: 112px; animation-delay: -2.9s; }.attack-embers i:nth-child(8) { left: 92%; --drift: -19px; --lift: 172px; animation-delay: -.9s; }.attack-embers i:nth-child(9) { left: 36%; --drift: 8px; --lift: 75px; animation-delay: -4.2s; }.attack-embers i:nth-child(10) { left: 65%; --drift: -7px; --lift: 92px; animation-delay: -2.7s; }
.attack-embers i:nth-child(11) { left: 12%; --drift: -9px; --lift: 80px; animation-delay: -2.5s; }.attack-embers i:nth-child(12) { left: 24%; --drift: 25px; --lift: 153px; animation-delay: -1.7s; }.attack-embers i:nth-child(13) { left: 39%; --drift: -18px; --lift: 207px; animation-delay: -2.1s; }.attack-embers i:nth-child(14) { left: 51%; --drift: 11px; --lift: 110px; animation-delay: -.8s; }.attack-embers i:nth-child(15) { left: 61%; --drift: -23px; --lift: 165px; animation-delay: -2.6s; }.attack-embers i:nth-child(16) { left: 76%; --drift: 14px; --lift: 95px; animation-delay: -1.2s; }.attack-embers i:nth-child(17) { left: 87%; --drift: -14px; --lift: 190px; animation-delay: -2.3s; }.attack-embers i:nth-child(18) { left: 95%; --drift: 7px; --lift: 128px; animation-delay: -1.5s; }
@keyframes attack-ember-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); } 14% { opacity: .7; } 72% { opacity: .42; } 100% { opacity: 0; transform: translate3d(var(--drift), calc(-1 * var(--lift)), 0) scale(1); } }
.attack-countdown { position: absolute; z-index: 5; display: grid; place-items: center; inset: 0; color: #fff; font-family: var(--ui-font); font-size: clamp(70px, 21vw, 128px); font-weight: 900; text-shadow: 0 0 18px #0acfff, 0 4px 12px #00163e; }
.attack-countdown.is-hidden { display: none; }
.attack-finish-overlay { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 12px; background: rgba(0, 7, 25, .78); backdrop-filter: blur(3px); }
.attack-finish-overlay[hidden] { display: none; }
.attack-finish-art { position: relative; width: min(96vw, 520px); aspect-ratio: 720 / 763; animation: attack-finish-arrive .38s cubic-bezier(.18,.88,.24,1) both; }
.attack-finish-art > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .65)); }
.attack-finish-score { position: absolute; top: 70.5%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 14px); width: 77%; transform: translate(-50%, -50%); color: #fff4b2; font-family: var(--ui-font); font-size: clamp(30px, 8.6vw, 52px); font-weight: 900; line-height: .9; letter-spacing: -.045em; text-shadow: 0 2px 0 #914000, 0 0 5px #fff, 0 0 15px #ffe66c, 0 0 28px #ff9f00; }
.attack-finish-score b { min-width: 0; white-space: nowrap; }
.attack-finish-score span { color: #fff4a8; font-family: Arial, sans-serif; font-size: 1.25em; font-weight: 900; text-shadow: 0 0 7px #fff, 0 0 18px #ffc414, 0 0 34px #ff8700; transform: rotate(-15deg); }
.attack-finish-score span:last-child { transform: scaleX(-1) rotate(-15deg); }
.attack-finish-art button { position: absolute; z-index: 3; bottom: 2.1%; left: 18%; width: 64%; height: 18%; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.attack-finish-art button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.battle-charges-overlay { position: fixed; z-index: 61; inset: 0; display: grid; place-items: center; padding: 10px; background: rgba(0, 7, 25, .8); backdrop-filter: blur(4px); }
.battle-charges-overlay[hidden] { display: none; }
.battle-charges-card { display: grid; justify-items: center; gap: 8px; width: min(94vw, 500px); max-height: 96svh; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .7)); animation: attack-finish-arrive .38s cubic-bezier(.18,.88,.24,1) both; }
.battle-charges-close { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; }
.battle-charges-close img { display: block; width: 100%; max-height: 68svh; object-fit: contain; }
.battle-charges-recovery { display: grid; gap: 5px; width: min(100%, 455px); padding: 10px 12px; border: 1px solid rgba(67, 206, 255, .8); border-radius: 14px; color: #d4ecff; background: linear-gradient(135deg, rgba(4, 52, 122, .95), rgba(1, 24, 69, .95)); box-shadow: inset 0 0 16px rgba(32, 144, 255, .2), 0 0 12px rgba(24, 188, 255, .28); font-size: clamp(12px, 3.2vw, 16px); line-height: 1.2; text-align: center; }
.battle-charges-recovery span { display: block; }
.battle-charges-recovery b { color: #ffe17a; font-weight: 850; text-shadow: 0 0 10px rgba(255, 190, 31, .72); white-space: nowrap; }
.battle-scout-button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(100%, 455px); padding: 11px 13px; border: 1px solid rgba(78, 212, 255, .95); border-radius: 15px; color: #e8f8ff; background: linear-gradient(135deg, rgba(4, 91, 180, .98), rgba(2, 38, 110, .98)); box-shadow: inset 0 0 18px rgba(75, 212, 255, .25), 0 0 16px rgba(27, 183, 255, .38); font: inherit; font-size: clamp(12px, 3.25vw, 16px); font-weight: 800; line-height: 1.15; text-align: left; }
.battle-scout-button b { color: #ffe36c; font-size: 1.14em; text-shadow: 0 0 11px rgba(255, 190, 31, .88); white-space: nowrap; }
.battle-scout-button:disabled { border-color: rgba(118, 150, 189, .55); color: rgba(209, 228, 246, .7); background: rgba(17, 54, 108, .75); box-shadow: none; }
.battle-scout-button:disabled b { color: rgba(255, 226, 108, .62); text-shadow: none; }
.battle-scout-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.battle-charges-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes attack-finish-arrive { from { opacity: 0; transform: scale(.78) translateY(6%); } to { opacity: 1; transform: scale(1) translateY(0); } }
.attack-countdown.countdown-pop { animation: attack-countdown-pop .68s ease-out both; }
.attack-countdown.is-go { font-size: clamp(28px, 8.5vw, 49px); letter-spacing: -.8px; }
@keyframes attack-countdown-pop { from { opacity: 0; transform: scale(.58); } 35% { opacity: 1; transform: scale(1.12); } to { opacity: 0; transform: scale(1); } }
.attack-tap-label { display: none; }
.attack-bottom-grid { display: none; }
.attack-status-card { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 4px; align-items: center; min-height: 54px; padding: 6px; border: 1px solid rgba(42, 196, 255, .72); border-radius: 11px; background: linear-gradient(135deg, rgba(3, 48, 115, .86), rgba(2, 25, 71, .75)); box-shadow: inset 0 0 15px rgba(14, 131, 255, .17); }
.attack-status-card > span { color: #90d4ff; font-size: 21px; letter-spacing: -4px; line-height: 1; }
.attack-status-card small, .attack-status-card b, .attack-status-card p { display: block; }
.attack-status-card small { overflow: hidden; color: #bed8f8; font-size: clamp(9px, 2.4vw, 12px); text-overflow: ellipsis; white-space: nowrap; }
.attack-status-card b { margin-top: 2px; font-size: clamp(12px, 3.3vw, 17px); line-height: 1; white-space: nowrap; }
.attack-status-card p { display: none; }
.attack-status-card i { color: #2bd3ff; font-size: 27px; font-style: normal; font-weight: 300; line-height: .7; }
.attack-bottom-grid .attack-status-card:last-child { grid-template-columns: 25px minmax(0, 1fr); }
.attack-footnote { display: none; }

@media (max-height: 620px) {
  .attack-bottom-grid { display: none; }
  .attack-info-stack { top: calc(48px + env(safe-area-inset-top)); }
  .attack-score-card { top: 37%; }
  .attack-tap-button { width: min(51vw, 27svh, 217px); }
}


.difficulty-intro { padding: 15px 0 20px; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.difficulty-intro h1 { margin: 0; font-family: var(--ui-font); font-size: clamp(38px, 7vw, 49px); font-weight: 400; line-height: .96; letter-spacing: .15px; }
.difficulty-intro p { margin: 8px 0 0; color: #a9c8f3; font-size: clamp(17px, 4.4vw, 25px); line-height: 1.08; }
.difficulty-list { display: grid; gap: 15px; }
.difficulty-card { isolation: isolate; position: relative; overflow: hidden; min-height: 0; aspect-ratio: 1.95 / 1; padding: 9px 10px; border: 1px solid #22caff; border-radius: 19px; background: linear-gradient(120deg, rgba(3, 46, 116, .95), rgba(3, 25, 73, .79)); box-shadow: inset 0 0 27px rgba(0, 133, 255, .33), 0 0 18px rgba(0, 159, 255, .34), 0 14px 28px rgba(0, 0, 22, .32); }
.difficulty-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 76% 25%, rgba(20, 145, 255, .42), transparent 36%), linear-gradient(145deg, rgba(104, 212, 255, .11), transparent 40%); }
.difficulty-copy { position: relative; z-index: 1; width: 61%; }
.difficulty-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 0 4px; padding: 3px 5px; border: 1px solid rgba(75, 190, 255, .4); border-radius: 7px; color: #c0d9f7; background: rgba(2, 26, 73, .4); font-size: clamp(8px, 2.2vw, 12px); white-space: nowrap; }
.regular-chip span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 6px; color: #092e24; background: #89e55a; font-size: 0; }
.regular-chip span::after { content: "✓"; font-size: 12px; font-weight: 900; }
.hard-chip span { color: #ff711e; font-size: 14px; line-height: 1; }
.difficulty-card h2 { margin: 0; font-family: var(--ui-font); font-size: clamp(22px, 6.2vw, 43px); font-weight: 400; line-height: .99; letter-spacing: .2px; text-shadow: 0 3px 13px rgba(0, 0, 15, .55); }
.difficulty-copy > p:not(.difficulty-chip) { margin: 4px 0 0; color: #d1e2fb; font-size: clamp(10px, 2.8vw, 15px); line-height: 1.14; }
.difficulty-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #c5dbf9; font-size: clamp(9px, 2.5vw, 13px); white-space: nowrap; }
.difficulty-meta span { display: grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border: 1px solid #6bcaff; border-radius: 50%; color: #b9ecff; font-size: 11px; font-weight: 800; }
.difficulty-meta span:first-child { margin-left: 0; }
.difficulty-button { display: flex; align-items: center; justify-content: center; gap: 19px; width: min(100%, 155px); height: 34px; margin-top: 7px; border: 2px solid #2ce3ff; border-radius: 10px; color: #fff; background: linear-gradient(180deg, #147eed, #0755c5); box-shadow: inset 0 0 16px rgba(50, 223, 255, .38), 0 0 14px rgba(0, 189, 255, .58); font-size: clamp(15px, 4.3vw, 23px); font-weight: 850; line-height: 1; }
.difficulty-button:active { transform: scale(.96); }
.difficulty-button b { margin-top: -3px; font-size: 27px; font-weight: 300; line-height: 0; }
.difficulty-art { position: absolute; z-index: 0; right: -3px; bottom: -4px; width: 58%; height: 112%; object-fit: contain; object-position: right bottom; pointer-events: none; }
.hard-card { border-color: #ffbb38; background: linear-gradient(120deg, rgba(42, 41, 65, .95), rgba(20, 25, 58, .82)); box-shadow: inset 0 0 27px rgba(255, 166, 28, .22), 0 0 18px rgba(255, 173, 38, .36), 0 14px 28px rgba(0, 0, 22, .34); }
.hard-card::before { background: radial-gradient(circle at 75% 30%, rgba(249, 167, 44, .33), transparent 38%), linear-gradient(145deg, rgba(255, 203, 104, .1), transparent 42%); }
.hard-card h2 { color: #fff5e0; text-shadow: 0 0 12px rgba(255, 159, 22, .55), 0 3px 13px rgba(0, 0, 15, .55); }
.hard-card .difficulty-meta span { border-color: #ffc347; color: #ffe4a8; }
.hard-card .difficulty-button { border-color: #ffca55; background: linear-gradient(180deg, #b87223, #7c3c17); box-shadow: inset 0 0 16px rgba(255, 204, 97, .35), 0 0 14px rgba(255, 163, 23, .55); }

.test-screen { padding-top: max(16px, env(safe-area-inset-top)); }
.test-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 9px 0 18px; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.test-intro > div { min-width: 0; flex: 1; }
.test-intro h1 { margin: 0; font-family: var(--ui-font); font-size: clamp(30px, 7.2vw, 47px); letter-spacing: .1px; line-height: .96; }
.test-intro p { max-width: 245px; margin: 7px 0 0; color: #b5caec; font-size: clamp(14px, 3.2vw, 19px); line-height: 1.18; }
.progress-card { display: flex; align-items: center; gap: 7px; width: clamp(117px, 33vw, 170px); margin-top: 1px; padding: 9px 9px; border: 1px solid rgba(45, 185, 255, .55); border-radius: 13px; background: rgba(2, 25, 72, .62); box-shadow: inset 0 0 18px rgba(5, 105, 218, .2); }
.progress-target { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid #a3d9ff; border-radius: 50%; color: #dff6ff; font-size: 27px; line-height: 1; }
.progress-card small { display: block; color: #b7c9e8; font-size: clamp(9px, 2.5vw, 12px); line-height: 1.1; }
.progress-card strong { display: block; margin-top: 3px; color: #fff; font-size: clamp(16px, 4vw, 22px); line-height: 1; }

.question-card { padding: 13px; border: 1px solid rgba(43, 197, 255, .94); border-radius: 24px; background: linear-gradient(135deg, rgba(3, 37, 98, .94), rgba(3, 22, 68, .84)); box-shadow: inset 0 0 28px rgba(0, 128, 255, .28), 0 0 18px rgba(0, 159, 255, .35), 0 14px 28px rgba(0, 0, 22, .32); }
.question-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: #c5dafa; font-size: clamp(10px, 2.8vw, 14px); }
.question-status > span:first-child, .question-status > span:last-child { padding: 7px 9px; border: 1px solid rgba(52, 181, 255, .37); border-radius: 9px; background: rgba(2, 23, 66, .35); white-space: nowrap; }
.question-status > span:last-child { color: #e7f3ff; }
.question-dots { display: flex; justify-content: center; gap: 4px; min-width: 0; }
.question-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(68, 135, 227, .48); }
.question-dots i.active { background: #34d8ff; box-shadow: 0 0 10px #11c7ff; }
.question-card h2 { margin: 13px 1px 14px; font-family: var(--ui-font); font-size: clamp(25px, 6.8vw, 39px); font-weight: 400; line-height: 1.02; letter-spacing: .1px; }
.question-card h2, .answer-list button { overflow-wrap: anywhere; }
.answer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.answer-list button { display: flex; align-items: center; min-height: 47px; padding: 8px 9px; border: 1px solid #2ac5ff; border-radius: 11px; color: #eaf5ff; background: linear-gradient(135deg, rgba(5, 51, 124, .9), rgba(2, 27, 78, .85)); box-shadow: inset 0 0 14px rgba(0, 137, 255, .21); font-size: clamp(12px, 3.4vw, 16px); font-weight: 680; text-align: left; line-height: 1.1; }
.answer-list button::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; margin-right: 8px; border: 2px solid #a8d6ff; border-radius: 50%; }
.answer-list button.selected { border-color: #b2c4dd; background: linear-gradient(135deg, rgba(85, 108, 145, .92), rgba(47, 66, 105, .9)); box-shadow: inset 0 0 16px rgba(184, 207, 237, .18); }
.answer-list button.selected::before { border-color: white; background: radial-gradient(circle, white 0 35%, transparent 40%); }
.answer-list button.correct-answer { border-color: #57f6bd; background: linear-gradient(135deg, rgba(8, 139, 102, .9), rgba(2, 76, 75, .84)); box-shadow: inset 0 0 16px rgba(54, 255, 183, .32), 0 0 12px rgba(37, 255, 178, .35); }
.answer-list button.correct-answer::before { border-color: white; background: radial-gradient(circle, white 0 35%, transparent 40%); }
.answer-list button.answer-correct { animation: answer-correct 1s ease-in-out both; }
.answer-list button.answer-incorrect { animation: answer-incorrect 1s ease-in-out both; }
@keyframes answer-correct { 0%, 100% { border-color: #57f6bd; background: linear-gradient(135deg, rgba(8, 139, 102, .9), rgba(2, 76, 75, .84)); box-shadow: inset 0 0 16px rgba(54, 255, 183, .32), 0 0 12px rgba(37, 255, 178, .35); } 50% { border-color: #e7fff5; background: linear-gradient(135deg, #39dba3, #087a72); box-shadow: 0 0 24px rgba(37, 255, 178, .92); } }
@keyframes answer-incorrect { 0%, 100% { border-color: #ff6f7e; background: linear-gradient(135deg, rgba(168, 42, 65, .93), rgba(88, 22, 52, .88)); box-shadow: inset 0 0 16px rgba(255, 64, 96, .3), 0 0 12px rgba(255, 44, 81, .32); } 50% { border-color: #ffe7ea; background: linear-gradient(135deg, #f3425d, #ad1748); box-shadow: 0 0 24px rgba(255, 54, 95, .9); } }
.answer-explanation { display: flex; align-items: center; min-height: 50px; margin: 10px 0 0; padding: 9px 10px 9px 49px; border: 1px solid rgba(81, 184, 255, .35); border-radius: 12px; color: #afc8ed; background: rgba(0, 24, 70, .38); font-size: clamp(11px, 3vw, 14px); line-height: 1.2; position: relative; }
.answer-explanation::before { content: "i"; position: absolute; left: 14px; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #7bd8ff; border-radius: 50%; color: #dff7ff; font: 800 18px/1 var(--ui-font); }
.question-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.question-footer > div { flex: 1; }
.question-footer strong { display: block; font-size: 13px; }
.question-progress { display: block; height: 8px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(35, 83, 153, .65); }
.question-progress i { display: block; width: 5%; height: 100%; border-radius: inherit; background: #25ceff; box-shadow: 0 0 11px #1fbfff; }
.next-button { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 42px; padding: 6px 11px; border: 2px solid #34d6ff; border-radius: 11px; color: white; background: linear-gradient(180deg, #1379ed, #0751bd); box-shadow: inset 0 0 15px rgba(48, 220, 255, .35), 0 0 13px rgba(0, 189, 255, .5); font-size: clamp(12px, 3.4vw, 16px); font-weight: 800; white-space: nowrap; }
.next-button span { margin-top: -2px; font-size: 29px; font-weight: 300; line-height: 0; }
.next-button:disabled { cursor: default; opacity: .52; filter: saturate(.6); }
.quiz-result { text-align: center; padding: 28px 18px; }
.quiz-result h2 { margin: 8px 0; }
.quiz-result > p:not(.dialog-kicker) { margin: 0; color: #c7dcf8; font-size: clamp(16px, 4vw, 21px); }
.quiz-result .primary-button { margin: 19px auto 0; }

.result-screen { position: relative; }
.result-screen::after { height: 12svh; }
.result-intro { padding: 12px 0 16px; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.result-intro h1 { margin: 0; font-family: var(--ui-font); font-size: clamp(36px, 8.3vw, 54px); font-weight: 400; line-height: .96; letter-spacing: .1px; }
.result-intro p { margin: 8px 0 0; color: #a9cdf9; font-size: clamp(17px, 4.5vw, 24px); font-weight: 650; line-height: 1.08; }
.result-panel { isolation: isolate; position: relative; overflow: hidden; padding: 18px 14px 14px; border: 1px solid #29ccff; border-radius: 25px; background: linear-gradient(142deg, rgba(3, 44, 111, .96), rgba(2, 22, 68, .89)); box-shadow: inset 0 0 29px rgba(0, 137, 255, .32), 0 0 19px rgba(0, 176, 255, .44), 0 14px 28px rgba(0, 0, 22, .38); }
.result-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 76% 13%, rgba(20, 158, 255, .47), transparent 31%), linear-gradient(135deg, rgba(75, 204, 255, .12), transparent 37%); }
.result-panel::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 74%; height: 52%; opacity: .42; pointer-events: none; background: linear-gradient(180deg, rgba(3, 24, 71, .05), rgba(1, 12, 38, .5)), url("./assets/gelendzhik-menu.webp") center bottom / cover no-repeat; mask-image: linear-gradient(180deg, transparent 0%, #000 28%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%); }
.hard-result .result-panel { border-color: #ffbf45; background: linear-gradient(142deg, rgba(49, 40, 64, .96), rgba(22, 23, 58, .9)); box-shadow: inset 0 0 29px rgba(255, 171, 32, .24), 0 0 19px rgba(255, 176, 43, .4), 0 14px 28px rgba(0, 0, 22, .38); }
.hard-result .result-panel::before { background: radial-gradient(circle at 76% 13%, rgba(255, 171, 38, .39), transparent 31%), linear-gradient(135deg, rgba(255, 215, 124, .1), transparent 37%); }
.hard-result .result-panel::after { opacity: .28; }
.hard-result .result-intro h1 { color: #fff6e4; text-shadow: 0 0 14px rgba(255, 172, 35, .46); }
.result-art { position: absolute; z-index: -1; right: -7px; top: 27px; width: 63%; height: 43%; object-fit: contain; object-position: right top; filter: drop-shadow(0 8px 13px rgba(0, 0, 25, .6)); }
.result-copy { width: 55%; min-height: 248px; }
.result-copy > p:first-child { margin: 0; color: #bed9fb; font-size: clamp(16px, 4.4vw, 24px); }
.result-copy > strong { display: block; margin-top: 5px; font-family: var(--ui-font); font-size: clamp(68px, 19vw, 116px); font-weight: 900; letter-spacing: -.085em; line-height: .82; color: #f7fbff; text-shadow: 0 0 18px rgba(71, 198, 255, .67), 0 3px 10px rgba(0, 15, 52, .7); }
.result-copy > b { display: block; margin-top: 10px; color: #e9f4ff; font-size: clamp(20px, 5.8vw, 32px); line-height: 1; }
.result-dots { display: flex; gap: 4px; margin: 12px 0; }
.result-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(51, 127, 187, .55); }
.result-dots i.active { background: #49edb4; box-shadow: 0 0 10px rgba(52, 255, 186, .82); }
.rank-badge { display: inline-flex; flex-direction: column; padding: 8px 12px; border: 1px solid rgba(46, 190, 255, .8); border-radius: 13px; color: #eef8ff; background: rgba(2, 29, 80, .64); box-shadow: inset 0 0 16px rgba(0, 139, 255, .15); }
.rank-badge small { margin-bottom: 3px; color: #8ec8f8; font-size: clamp(8px, 2.2vw, 11px); font-weight: 800; letter-spacing: .6px; }
.rank-badge b { font-size: clamp(16px, 4.3vw, 23px); line-height: 1.06; }
.rank-description { width: min(100%, 300px); margin: 12px 0 12px; color: #b6d4f7; font-size: clamp(13px, 3.4vw, 18px); line-height: 1.18; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 4px; }
.result-stats > div { min-height: 88px; padding: 9px 6px; border: 1px solid rgba(43, 188, 255, .64); border-radius: 13px; background: rgba(1, 28, 75, .62); box-shadow: inset 0 0 17px rgba(0, 115, 255, .14); text-align: center; }
.stat-icon { display: block; width: 23px; height: 23px; margin: 0 auto; fill: none; stroke: #43cdff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.crown-icon { stroke: #ffc432; }
.result-stats small { display: block; min-height: 24px; margin-top: 4px; color: #bcd2f4; font-size: clamp(9px, 2.6vw, 12px); line-height: 1.05; }
.result-stats strong { display: block; color: #fff; font-size: clamp(18px, 5.4vw, 30px); line-height: 1; }
.share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.share-button, .retry-button { border: 2px solid #38d7ff; border-radius: 13px; color: white; background: linear-gradient(180deg, #147aec, #0752bf); box-shadow: inset 0 0 16px rgba(48, 220, 255, .34), 0 0 14px rgba(0, 189, 255, .5); font-weight: 800; text-shadow: 0 2px 5px #002b78; }
.share-button { min-height: 61px; padding: 7px; font-size: clamp(13px, 3.7vw, 20px); line-height: 1.04; }
.action-icon { display: inline-block; width: 26px; height: 26px; margin-right: 4px; fill: none; stroke: #dcfaff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -7px; }
.friend-share { border-color: #54fac3; background: linear-gradient(180deg, #087f73, #075244); box-shadow: inset 0 0 17px rgba(95, 255, 201, .34), 0 0 14px rgba(45, 255, 181, .45); }
.retry-button { display: block; width: 100%; min-height: 49px; margin-top: 10px; font-size: clamp(16px, 4.5vw, 24px); }
.share-button:active, .retry-button:active { transform: scale(.97); }
.confetti { position: fixed; z-index: 4; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.confetti.is-active { display: block; }
.confetti i { position: absolute; top: -7vh; left: var(--x); display: block; width: 9px; height: 17px; border-radius: 1px; background: var(--color); box-shadow: 0 0 8px color-mix(in srgb, var(--color) 72%, transparent); transform: rotate(18deg); animation: confetti-fall var(--duration) linear var(--delay) both; }
@keyframes confetti-fall { from { transform: translate3d(0, -8vh, 0) rotate(0deg); } to { transform: translate3d(var(--drift), 117svh, 0) rotate(var(--spin)); } }

.profile-intro { padding-bottom: 18px; }
.profile-card { position: relative; overflow: hidden; padding: 18px 15px; border: 1px solid #2dccff; border-radius: 20px; background: linear-gradient(142deg, rgba(3, 44, 111, .95), rgba(2, 22, 68, .88)); box-shadow: inset 0 0 28px rgba(0, 137, 255, .28), 0 0 17px rgba(0, 159, 255, .32); }
.profile-card > :not(.profile-card-art) { position: relative; z-index: 1; }
.profile-card-art { position: absolute; z-index: 0; pointer-events: none; object-fit: contain; object-position: top right; filter: drop-shadow(0 7px 8px rgba(0, 0, 21, .42)); }
.profile-card h2 { margin: 6px 0 17px; font-family: var(--ui-font); font-size: clamp(26px, 7vw, 39px); font-weight: 400; line-height: .96; }
.profile-records { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.profile-records > div { padding: 14px 10px; border: 1px solid rgba(70, 191, 255, .54); border-radius: 13px; background: rgba(1, 25, 71, .57); }
.profile-records small { display: block; color: #b7d2f7; font-size: 13px; }
.profile-records strong { display: block; margin-top: 5px; font-size: 29px; }
.profile-battle-card { margin-top: 12px; }
.profile-test-card h2,
.profile-battle-card h2 { width: 58%; margin-bottom: 12px; font-size: clamp(22px, 5.9vw, 33px); }
.profile-test-art,
.profile-battle-art { top: 16px; right: 24px; width: 50%; height: 178px; }
.profile-battle-art { right: 40px; width: 60%; height: 214px; }
.profile-test-attempts,
.profile-battle-sessions { width: 48%; grid-template-columns: 1fr; gap: 0; }
.profile-test-attempts > div,
.profile-battle-sessions > div { padding: 9px 8px; text-align: center; }
.profile-test-attempts small,
.profile-battle-sessions small { font-size: clamp(9px, 2.35vw, 12px); }
.profile-test-attempts strong,
.profile-battle-sessions strong { margin-top: 3px; font-size: clamp(20px, 5.4vw, 29px); }
.profile-test-score-stack,
.profile-battle-score-stack { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 8px; }
.profile-test-score-stack > div,
.profile-battle-score-stack > div { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 8px 13px; border: 1px solid rgba(70, 191, 255, .62); border-radius: 13px; background: rgba(1, 25, 71, .69); box-shadow: inset 0 0 15px rgba(0, 115, 255, .1); }
.profile-test-score-stack small,
.profile-battle-score-stack small { color: #b7d2f7; font-size: clamp(11px, 3vw, 15px); }
.profile-test-score-stack strong,
.profile-battle-score-stack strong { overflow: hidden; min-width: 0; margin-left: 10px; color: #f4fbff; font-size: clamp(25px, 7.4vw, 42px); letter-spacing: -.045em; line-height: 1; text-align: right; text-overflow: ellipsis; text-shadow: 0 0 9px rgba(42, 187, 255, .45); white-space: nowrap; }
.bottom-nav {
  position: fixed; z-index: 2; bottom: 0; left: 50%; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; width: min(100%, 520px); height: calc(76px + env(safe-area-inset-bottom)); padding: 9px 36px calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  border: 1px solid rgba(152, 207, 255, .25); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(1, 19, 47, .91); box-shadow: 0 -12px 34px rgba(0, 0, 20, .3); backdrop-filter: blur(12px);
}
.bottom-nav button { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; color: #c8d9f7; background: transparent; font-size: 28px; line-height: 24px; }
.bottom-nav button[hidden] { display: none; }
.bottom-nav small { font-size: 12px; font-weight: 540; }
.bottom-nav .active { color: #12befe; filter: drop-shadow(0 0 7px rgba(4, 181, 255, .55)); }
.bottom-nav.has-admin { grid-template-columns: repeat(3, 1fr); padding-right: 24px; padding-left: 24px; }

.admin-intro { padding-bottom: 15px; }
.admin-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-stats article { min-height: 88px; padding: 13px; border: 1px solid rgba(70, 191, 255, .56); border-radius: 15px; background: rgba(2, 30, 82, .8); box-shadow: inset 0 0 18px rgba(0, 147, 255, .14); }
.admin-stats article:last-child { grid-column: span 2; }
.admin-stats small { display: block; color: #b7d2f7; font-size: 13px; }
.admin-stats strong { display: block; margin-top: 8px; color: #fff; font-size: clamp(29px, 8vw, 43px); line-height: 1; text-shadow: 0 0 9px rgba(42, 187, 255, .52); }
.admin-refresh { width: 100%; margin-top: 15px; }

.game-dialog { width: min(calc(100% - 40px), 430px); border: 1px solid #37cfff; border-radius: 22px; padding: 26px; color: #eff8ff; background: linear-gradient(135deg, #05296b, #021639); box-shadow: 0 0 38px rgba(0, 172, 255, .42); }
.game-dialog::backdrop { background: rgba(0, 8, 26, .68); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; top: 8px; right: 13px; border: 0; background: transparent; color: #c9ddf8; font-size: 30px; }
.dialog-kicker { margin: 0; color: #6cd8ff; font-weight: 750; font-size: 12px; letter-spacing: 1px; }
.game-dialog h2 { margin: 9px 0; font-family: var(--ui-font); font-size: 33px; font-weight: 400; }
.game-dialog p:not(.dialog-kicker) { color: #bfd3f2; line-height: 1.45; }
.dialog-action { width: 100%; margin-top: 8px; }

@media (max-width: 380px) {
  .page { padding-right: 14px; padding-left: 14px; }
  .rules-button { padding-right: 9px; padding-left: 9px; }
  .channel-button { width: 126px; padding: 5px; font-size: 9px; }
  .channel-button img { width: 43px; height: 43px; }
  .channel-label { left: 53px; }
  .brand__title { font-size: 15px; }
  .game-card { border-radius: 19px; }
  .invite-friends-banner { width: calc(100% - 28px); }
}