/* Reference-first visual system. Decorative artwork is generated raster art; CSS only handles layout and interaction. */
:root {
  --bg: #02040b;
  --bg2: #050b15;
  --panel: #06111c;
  --panel2: #081523;
  --line: #16465a;
  --line-hi: #00dff2;
  --cyan: #00e7f5;
  --cyan-soft: #91fbff;
  --magenta: #e73bff;
  --text: #f4f6fc;
  --muted: #9ba8bb;
  --subtle: #74869d;
  --nav-height: 68px;
}

html, body { background: #02040b; }
body { background: #02040b; }
html:lang(zh),html:lang(hi),html:lang(ar) { --display: system-ui, sans-serif; --body: system-ui, sans-serif; }
.icon-art { display: inline-block; width: 1.35em; height: 1.35em; flex: 0 0 auto; object-fit: contain; vertical-align: middle; }
.streak-symbol .icon-art,.reward-symbol .icon-art,.mission-symbol .icon-art { width: 25px; height: 25px; }
.route-back .icon-art,.arena-tournament .icon-art { width: 24px; height: 24px; }
.app-shell { width: min(100%, 760px); max-width: 760px; min-height: 100dvh; padding: 0 18px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom)); overflow: clip; background: transparent; }
.app-backdrop { position: fixed; inset: 0 auto 0 50%; width: min(100vw, 760px); height: 100dvh; transform: translateX(-50%); opacity: .88; background: #02040b url('/assets/backgrounds/neon-arena.webp?v=20260924-scene') center / 100% 100% no-repeat; mask-image: none; }

.topbar { max-width: 720px; width: 100%; height: 90px; border: 0; }
.arena-topbar { justify-content: space-between; gap: 16px; padding: 3px 6px; }
.arena-player { display: flex; min-width: 0; align-items: center; gap: 11px; }
.arena-brand-mark { display: grid; width: 76px; height: 76px; flex: 0 0 auto; place-items: center; }
.arena-brand-mark .brand-symbol { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px #00dff24a); }
.arena-player-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.arena-player-name { overflow: hidden; color: #f1f5ff; font-size: 17px; font-weight: 700; letter-spacing: 1.1px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.arena-player-name b { margin-left: 7px; font-size: 16px; }
.arena-player-trix { color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.arena-player-trix strong { margin-left: 5px; color: #dcefff; font-size: 14px; letter-spacing: 1px; }
.arena-settings { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; background: transparent; color: var(--cyan); }
.arena-settings img { width: 100%; height: 100%; object-fit: contain; }

.route-topbar { display: grid; grid-template-columns: minmax(44px,1fr) auto minmax(44px,1fr); gap: 9px; height: 66px; padding: 4px 0; border-bottom: 1px solid #66e8ff15; }
.route-back, .route-settings { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #173d51; background: #07111d; color: var(--cyan); }
.route-back { justify-self: start; }
.route-settings, .route-action, .route-balance { justify-self: end; }
.route-back svg { width: 21px; height: 21px; }
.route-brand { display: flex; min-width: 0; align-items: center; justify-self: center; gap: 8px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.route-brand .brand-symbol { width: 35px; height: 35px; object-fit: contain; }
.route-brand i { color: #e8f2ff; font-size: 12px; font-style: normal; letter-spacing: 2px; }
.route-settings { font-size: 24px; }
.route-settings img { display: block; width: 100%; height: 100%; object-fit: contain; }
.birthday-privacy-note { color: #8b9db3; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.birthday-saved-state { display: flex; min-height: 45px; align-items: center; gap: 9px; margin-top: 6px; padding: 9px 11px; border: 1px solid #1c665b; background: #06231d; color: #a7c8bd; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.birthday-saved-state i { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 1px solid #2ed99b; border-radius: 50%; color: #5becae; font-size: 12px; font-style: normal; }
.route-action, .route-balance { min-height: 37px; padding: 0 10px; border: 1px solid #00cde14d; background: #07111e; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.route-balance small { margin-left: 3px; color: #dcefff; font-size: 8px; }

/* Shop treatment follows the supplied TRIX store reference. Artwork is generated raster content. */
.route-state-shop .app-backdrop { opacity: 1; background: #02040b; }
.route-shop { grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.route-shop .route-back { display: none; }
.route-shop .shop-route-brand { justify-self: start; gap: 6px; }
.route-shop .route-wordmark { display: block; width: clamp(125px,31vw,220px); height: auto; max-height: 48px; object-fit: contain; }
.route-shop .shop-route-brand i { color: #f4f6fc; font: 700 clamp(12px,2.5vw,19px)/1 var(--display); letter-spacing: 2px; }
.route-shop .route-balance { display: flex; min-height: 38px; align-items: center; gap: 5px; padding: 2px 8px; white-space: nowrap; }
.route-shop .route-balance img { width: 29px; height: 29px; object-fit: contain; }
.shop-bottom-nav { height: calc(82px + env(safe-area-inset-bottom)); gap: 0; justify-content: space-around; padding: 4px max(8px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border: 1px solid #263544; border-bottom: 0; border-radius: 8px 8px 0 0; background: #02040bf7; }
.shop-bottom-nav::before { top: 0; right: 12px; left: 12px; background: linear-gradient(90deg,transparent,#00e6f5 17%,#00e6f5 48%,#ab35f3 84%,transparent); }
.shop-bottom-nav .nav-item { position: relative; width: 33.333%; max-width: 33.333%; min-width: 0; height: 72px; flex: 1 1 33.333%; gap: 1px; padding: 2px 4px 4px; font-size: 8px; line-height: 1.05; text-align: center; }
.shop-bottom-nav .nav-item:not(:last-child)::after { position: absolute; top: 10px; right: 0; bottom: 10px; width: 1px; background: #33404c; content: ''; }
.shop-bottom-nav .nav-item.active::before { top: auto; bottom: 1px; width: min(70%,82px); height: 2px; border-radius: 0; }
.shop-bottom-nav .nav-art { width: 39px; height: 39px; }
.shop-bottom-nav .inventory-nav-art { width: 35px; height: 35px; margin-block: 2px; }
.shop-screen { gap: 0; margin-top: clamp(22px,4.5svh,58px); }
.shop-screen .store-heading { display: none; }
.store-list { gap: clamp(9px,1.3svh,17px); }
.store-product { min-height: clamp(178px,23svh,300px); grid-template-columns: minmax(104px,34%) minmax(0,1fr); gap: clamp(10px,2.7vw,22px); padding: clamp(10px,2.3vw,18px); }
.store-product::after { inset: 6px; }
.store-art-frame { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; background: #020a12; }
.store-art { width: 100%; height: 100%; object-fit: contain; filter: none; }
.store-boost .store-art { filter: none; }
.store-details { gap: clamp(5px,1.15svh,11px); padding: 5px 0; }
.store-details>.eyebrow { font-size: clamp(8px,1.2vw,11px); }
.store-name-row h2 { font-size: clamp(20px,4.4vw,34px); letter-spacing: 1.2px; }
.store-name-row>b { font-size: clamp(17px,3.8vw,28px); }
.store-details>p { font-size: clamp(10px,1.4vw,13px); letter-spacing: .7px; }
.store-product .power-choice { gap: 6px; }
.store-product .power-choice button { min-height: 44px; padding: 0 10px; font-size: 9px; }
.store-price-button { min-height: clamp(36px,4.5svh,49px); padding-inline: clamp(11px,2.2vw,20px); font-size: clamp(12px,1.8vw,16px); letter-spacing: 1px; }
.store-price-button small { font-size: .8em; }
.store-power { border-color: #00ddeb; }
.store-boost { border-color: #e73bff; }
.store-shield { border-color: #00cde1; }
.store-supply { min-height: 120px; }
.shop-screen .shop-footnote { margin-top: 10px; }
.route-shop + .screen .store-product { animation: store-card-enter .46s cubic-bezier(.2,.75,.25,1) both; }
.route-shop + .screen .store-product:nth-child(2) { animation-delay: 70ms; }
.route-shop + .screen .store-product:nth-child(3) { animation-delay: 140ms; }
@keyframes store-card-enter { from { opacity: 0; transform: translate3d(0,14px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

.arena-screen { display: flex; width: min(100%, 680px); flex-direction: column; gap: 13px; margin: 4px auto 0; }
.arena-stage { position: relative; display: flex; min-height: clamp(520px, 55svh, 720px); flex-direction: column; align-items: center; padding: clamp(85px, 14svh, 185px) 4px 0; text-align: center; }
.arena-season { margin: 0; color: #00ddec; font-size: 9px; font-weight: 700; letter-spacing: 2.1px; text-transform: uppercase; }
.arena-wordmark { margin: 15px 0 0; color: #19dff0; font: clamp(59px, 15vw, 104px)/.92 var(--display); letter-spacing: 5px; text-shadow: 0 0 8px #00eaffb8, 0 0 24px #00dafa73; }
.arena-wordmark img { display: block; width: min(66vw, 450px); max-height: 145px; object-fit: contain; filter: drop-shadow(0 0 21px #00ddf73d); }
.arena-tagline { max-width: 90%; margin: 9px 0 0; color: #d6e2f2; font-size: 11px; letter-spacing: .45px; }
.play-panel { position: relative; display: flex; width: min(83%, 530px); min-height: clamp(142px, 19svh, 245px); align-items: center; justify-content: center; gap: 17px; margin: clamp(35px, 7svh, 65px) auto 0; padding: 15px 18px; overflow: hidden; border: 1px solid #00def2; border-radius: 2px; background: linear-gradient(112deg,#071521f5,#050a13f5); color: #24eafa; box-shadow: inset 0 0 24px #00dbf219, 0 0 26px #00deef26; }
.play-panel::before { position: absolute; inset: 6px; border: 1px solid #39d8e923; content: ''; pointer-events: none; }
.play-panel::after { display: none; }
.play-panel { border: 0; background: url('/assets/play-frame.webp?v=20261020') center / 100% 100% no-repeat; box-shadow: none; }
.play-panel::before { display: none; }
.play-panel:focus-visible { outline: 2px solid #f1fdff; outline-offset: 2px; }
.play-panel:active { transform: scale(.975); }
.play-emblem { z-index: 1; display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid #00e7f5; border-radius: 50%; background: #06121d; color: #00e7f5; font-size: 17px; box-shadow: 0 0 18px #00e7f543; }
.play-label { z-index: 1; color: #8cf7ff; font: 700 clamp(33px, 10.8vw, 69px)/1 var(--display); letter-spacing: .02em; text-shadow: none; }
.play-arrow { z-index: 1; position: absolute; right: 19px; display: grid; color: #74f7ff; }
.play-arrow svg { width: 23px; height: 23px; }
.arena-highlight-list { display: grid; width: min(100%, 400px); gap: 13px; margin: 0 auto; }
.streak-panel, .reward-panel { position: relative; display: grid; min-height: 86px; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; overflow: hidden; border: 1px solid #00b9d480; background: linear-gradient(110deg,#06121dF2,#050a13f2); box-shadow: inset 0 0 20px #00dff10c, 0 6px 20px #0007; }
.streak-panel::before, .reward-panel::before { position: absolute; inset: 3px; border: 1px solid #22dff41c; content: ''; pointer-events: none; }
.streak-symbol, .reward-symbol { z-index: 1; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid #00dff375; background: #061522; color: var(--cyan); }
.streak-symbol svg, .reward-symbol svg { width: 25px; height: 25px; }
.streak-copy, .reward-copy { z-index: 1; display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.streak-copy small, .reward-copy small { color: #c6d1e1; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.streak-copy strong, .reward-copy strong { color: #13dbea; font: 700 25px/1.05 var(--display); letter-spacing: 1px; }
.streak-copy strong i, .reward-copy strong i { margin-left: 4px; color: #c8d9ed; font-size: 11px; font-style: normal; letter-spacing: .9px; }
.streak-chain { z-index: 1; display: flex; align-items: end; gap: 4px; padding-right: 3px; }
.streak-chain i { width: 5px; height: 14px; border: 1px solid #236276; background: #0a1925; transform: skew(-15deg); }
.streak-chain i:nth-child(even) { height: 21px; }
.streak-chain i.lit { border-color: #00e7f5; background: #00d9ed; box-shadow: 0 0 10px #00dbef9c; }
.reward-claim { z-index: 1; min-width: 84px; min-height: 37px; padding: 0 10px; border: 1px solid #00dcf1; background: #00ddef19; color: #00e9f4; font-size: 9px; font-weight: 700; letter-spacing: .7px; }
.reward-claim:disabled { border-color: #2f5260; color: #71879a; }
.arena-data, .lower-grid { width: 100%; margin-top: clamp(150px, 22svh, 280px); }
.arena-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 11px 0; padding: 0 2px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.arena-section-title small { color: #73849b; font-size: 8px; letter-spacing: 1px; }
.arena-data .stat-grid { margin: 0 0 10px; }
.arena-data .stat-card { min-height: 80px; padding: 10px; border-radius: 2px; background: #06101bde; }
.arena-data .stat-value { font-size: 21px; }
.arena-economy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.arena-economy-grid .wallet-card, .arena-economy-grid .inventory-card { min-width: 0; grid-column: auto; border-radius: 2px; }
.arena-economy-grid .inventory-card { padding: 11px; }
.arena-economy-grid .artifact-stock { min-width: 0; }
.arena-data .card, .arena-screen .lower-grid .card { border-radius: 2px; background-color: #050d17ee; }
.arena-screen .lower-grid { display: grid; gap: 10px; margin: 0 0 10px; }
.history-symbol.has-avatar { overflow: hidden; border-radius: 50%; background: transparent; }
.history-symbol.has-avatar .avatar-art { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.rules-list b { font-size: 12px; }
.rules-list p { font-size: 12px; line-height: 1.45; }

.bottom-nav { width: min(100vw,760px); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding-inline: 9px; border: 1px solid #15384b; border-bottom: 0; border-radius: 0; background: #030812f5; box-shadow: 0 -5px 18px #00dff20a; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bottom-nav::before { position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg,transparent,#00e6f5 15%,#00e6f5 42%,#9c34f2 68%,transparent); content: ''; }
.nav-item { min-width: 52px; color: #8393a9; }
.nav-item.active { color: var(--cyan); }
.nav-item.active::before { top: -1px; background: var(--cyan); box-shadow: 0 0 12px #00e7f5; }
.nav-item svg { stroke-width: 1.7; }
.nav-item .nav-art { display: block; width: 34px; height: 34px; object-fit: contain; opacity: .72; filter: saturate(.75); transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.nav-item.active .nav-art { opacity: 1; filter: drop-shadow(0 0 7px #00e7f566); transform: scale(1.08); }

.rank-screen .screen-heading { align-items: center; margin: 18px 0 12px; }
.rank-screen .screen-heading .eyebrow { color: #00ddec; }
.rank-screen .screen-heading h1 { color: #0fe4f4; font-size: clamp(27px,7vw,42px); letter-spacing: 2px; text-shadow: 0 0 16px #00dff23b; }
.rank-screen .screen-heading p { color: #94a5bb; }
.rank-screen .rank-hero { border: 1px solid #00c4dc85; border-radius: 2px; background: linear-gradient(118deg,#061521ed,#070d17ed); box-shadow: inset 0 0 24px #00dbf213; }
.rank-screen .rank-number { color: #f2f5fb; }
.rank-screen .rank-number b { color: var(--cyan); text-shadow: 0 0 16px #00dff24a; }
.rank-screen .rank-cup { border-color: #00d7eb7a; border-radius: 2px; background: #051421; color: #00e7f5; box-shadow: 0 0 20px #00dff21a; }
.rank-screen .rank-cup svg { filter: drop-shadow(0 0 9px #00dff25c); }
.rank-screen .rank-table { border-color: #204559; border-radius: 2px; background: #040b15ed; }
.rank-screen .table-top { border-bottom: 1px solid #1d4053; }
.rank-screen .segment-tabs button { border-radius: 0; }
.rank-screen .segment-tabs button.selected { background: #00dff31a; box-shadow: inset 0 -2px #00e7f5; color: var(--cyan); }
.rank-screen .player-row { border-top-color: #1b3343; }
.rank-screen .player-row.self-row { background: #00dff30d; box-shadow: inset 0 0 0 1px #00dff261,0 0 18px #00dff20e; }

.clan-screen .clan-banner, .profile-screen .profile-hero, .shop-screen .shop-feature, .shop-screen .shop-item { border-radius: 2px; }
.clan-screen .clan-emblem { border-radius: 14px; }
.clan-screen .clan-banner { border-color: #00b9d480; background-color: #06101bE8; }
.clan-screen .member-card, .clan-screen .clan-chat { border-radius: 2px; background-color: #050c16ed; }
.profile-screen .profile-hero { border-color: #25576b; background-color: #07111ced; }
.shop-screen .shop-item { background-color: #06111ded; }

.route-profile .route-brand { color: #ffcb45; font: 700 26px/1 var(--display); letter-spacing: 4px; text-shadow: 0 0 14px #ffd24935; }
.route-profile .route-profile-brand { width: clamp(96px,30vw,124px); }
.route-profile .route-wordmark { display: block; width: 100%; max-height: 38px; object-fit: contain; filter: drop-shadow(0 0 10px #ffd24945); }
.route-profile .route-brand i { display: none; }
.route-profile .route-action { border-color: #d4a72b76; color: #ffd653; font-size: 11px; letter-spacing: 1.4px; }
.route-profile .route-action::before { content: '♛ '; }
.profile-screen { gap: 10px; margin-top: 12px; }
.profile-screen .profile-hero { display: grid; min-height: 154px; grid-template-columns: 122px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 15px; border: 1px solid #c5962e; border-radius: 2px; background: linear-gradient(115deg,#0d0d12ee,#070a12ec); box-shadow: inset 0 0 24px #f4ba2410; }
.profile-screen .profile-avatar-wrap { width: 116px; height: 116px; padding: 5px; border: 1px solid #ffcf42; background: #080b13; box-shadow: 0 0 17px #f8c52c42; }
.profile-screen .profile-avatar { position: relative; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #0a1019; box-shadow: none; clip-path: polygon(11% 0,89% 0,100% 11%,100% 89%,89% 100%,11% 100%,0 89%,0 11%); }
.profile-screen .profile-avatar .avatar-art { width: 100%; height: 100%; object-position: 50% 33%; }
.profile-screen .online-indicator { right: -5px; bottom: 5px; border-color: #02040b; }
.profile-screen .profile-identity { min-width: 0; align-self: center; }
.profile-screen .profile-identity h1 { margin: 0 0 5px; overflow: hidden; color: #f1f2f8; font: 700 clamp(20px,5.3vw,34px)/1 var(--display); letter-spacing: 1px; text-overflow: ellipsis; text-transform: uppercase; }
.profile-country { display: block; color: #c3cfdd; font-size: 12px; }
.profile-country:first-letter { font-size: 16px; }
.profile-rank-line { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; color: #ffd347; text-transform: uppercase; }
.profile-rank-line small { font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.profile-rank-line strong { font: 700 24px/1 var(--display); letter-spacing: 1px; }
.profile-rank-line span { font-size: 22px; }
.profile-edit-button { align-self: start; padding: 3px 5px; border: 1px solid #edc3394d; background: #f8cf3010; color: #e3bc45; font-size: 8px; letter-spacing: .8px; }
.profile-progress-panel { padding: 12px 15px 10px; border: 1px solid #d2a73785; border-radius: 2px; background: #080a12ed; }
.profile-progress-heading, .profile-progress-range { display: flex; align-items: center; justify-content: space-between; }
.profile-progress-heading { margin-bottom: 8px; color: #ffc934; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.profile-progress-heading span { color: #c2c9d5; }
.profile-progress-heading > span, .profile-progress-range { direction: ltr; unicode-bidi: isolate; }
.profile-progress-range > bdi { display: flex; width: 100%; justify-content: space-between; }
.rank-screen .league-progress > div > span:nth-child(2), .rank-screen .league-progress > small { direction: ltr; unicode-bidi: isolate; }
.clan-screen .clan-meta > .eyebrow, .clan-screen .clan-chat .section-heading .eyebrow, .mission-count { direction: ltr; unicode-bidi: isolate; }
.profile-progress-panel .progress-track { height: 7px; border: 1px solid #7b642d; border-radius: 0; background: #171a23; }
.profile-progress-panel .progress-track i { background: #ffcb32; box-shadow: 0 0 10px #e8b5269a; }
.profile-progress-range { margin-top: 7px; color: #d7af32; font: 700 10px var(--display); }
.profile-progress-range span { color: #8b95a7; }
.profile-record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-record { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #3e3d48; background: #0b0d14ed; }
.profile-record .record-icon { display: grid; width: 46px; height: 46px; place-items: center; color: #ffcc35; }
.profile-record .record-icon svg { width: 43px; height: 43px; fill: #e6a800; stroke: #ffe36a; }
.profile-record .record-icon .icon-art { width: 43px; height: 43px; }
.profile-record.losses-record .record-icon { color: #b4a0ff; font-size: 42px; }
.profile-record.losses-record .record-icon svg { fill: #8a4cf6; stroke: #bc85ff; }
.profile-record.losses-record .record-icon .icon-art { width: 43px; height: 43px; }
.profile-record div { display: grid; gap: 1px; }
.profile-record small { color: #bdc3d0; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.profile-record strong { color: #f4f4f8; font: 700 30px/1 var(--display); }
.profile-usage { padding: 12px 13px; border: 1px solid #33343e; border-radius: 2px; background: #080b12ed; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #f1c437; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.profile-section-heading .text-button { color: #8e9aad; font-size: 8px; }
.usage-row { display: grid; min-height: 48px; grid-template-columns: 35px 76px minmax(40px,1fr) 38px; align-items: center; gap: 8px; border-top: 1px solid #27303d; color: #dce1ea; font-size: 10px; text-transform: uppercase; }
.usage-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid currentColor; background: #090d15; }
.usage-icon .artifact-art { width: 27px; height: 27px; object-fit: contain; }
.usage-rock .usage-icon,.usage-rock strong { color: #ffce38; }
.usage-scissors .usage-icon,.usage-scissors strong { color: #bf79ff; }
.usage-paper .usage-icon,.usage-paper strong { color: #10dce9; }
.usage-row .progress-track { height: 7px; border-radius: 0; background: #171a22; }
.usage-row .progress-track i { background: currentColor; box-shadow: 0 0 8px currentColor; }
.usage-rock .progress-track { color: #ffca31; }
.usage-scissors .progress-track { color: #bc5ef9; }
.usage-paper .progress-track { color: #00ddea; }
.usage-row strong { text-align: right; }
.profile-streak-panel { display: grid; min-height: 74px; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #b88e2c7d; border-radius: 2px; background: #0a0c13ec; }
.streak-flame { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #d2a634; color: #ffd038; font-size: 24px; }
.profile-streak-copy { display: flex; flex-direction: column; gap: 1px; }
.profile-streak-copy small { color: #f0c43a; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.profile-streak-copy strong { color: #f2f1f3; font: 700 23px/1 var(--display); }
.profile-streak-copy strong i { color: #f1c433; font-size: 11px; font-style: normal; }
.profile-streak-copy span { color: #9ea8b7; font-size: 8px; }
.streak-checks { display: flex; gap: 3px; }
.streak-checks i { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #8f762c; border-radius: 50%; color: #ffda52; font-size: 10px; font-style: normal; }
.streak-checks i.complete { background: #d5a91819; box-shadow: 0 0 8px #ffd03a36; }
.profile-screen .profile-grid { grid-template-columns: 1fr; }
.profile-screen .achievement-card, .profile-screen .preferences-card { border-radius: 2px; background: #080b12ed; }
.profile-screen .achievement-row:not(.is-complete) > em { color: #8b9bae; }
.achievement-row b { font-size: 12px; }
.achievement-row small { color: #aab7c8; font-size: 11px; }
.achievement-row > em { font-size: 11px; }
.streak-checks { align-items: center; }
.streak-checks i { width: 19px; height: 19px; flex: 0 0 19px; border-color: #3b536a; background: #101a27; color: #8ea2b6; font: 700 8px/1 var(--display); }
.streak-checks i.complete { border-color: #00c9dd; background: #00d8e51c; color: #71f4ff; box-shadow: 0 0 9px #00d8e52a; }
.mission-status { display: inline-flex; min-width: 43px; min-height: 29px; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; border: 1px solid #38526a; border-radius: 999px; background: #122033; color: #a8bbce; font: 700 9px/1 var(--display); letter-spacing: .2px; opacity: 1; }
.mission-status.locked { border-color: #405365; background: #101822; color: #c2d0dd; }
.mission-status.locked i { color: #8395a7; font: inherit; font-style: normal; }
.mission-status.ready { border-color: #d7a62e; background: #edb9361a; color: #ffdc73; }
.mission-status.done:disabled { border-color: #3b806d; background: #1a493b3d; color: #65e2b0; opacity: 1; }
.reward-claim:disabled { opacity: 1; }
.route-profile .route-brand .brand-symbol { filter: drop-shadow(0 0 9px #ffd24955); }

.store-heading { margin: 5px 0 10px; }
.store-heading .eyebrow { display: block; color: #00ddeb; font-size: 8px; }
.store-heading p { margin: 5px 0; color: #99a8bb; font-size: 10px; }
.store-list { display: grid; gap: 10px; }
.store-product { position: relative; display: grid; min-height: 138px; grid-template-columns: 105px minmax(0,1fr); gap: 12px; padding: 11px; overflow: hidden; border: 1px solid #00b7d283; background: linear-gradient(112deg,#061521f0,#090d19f2); box-shadow: inset 0 0 20px #00dbf213; }
.store-product::after { position: absolute; inset: 5px; border: 1px solid #00dff11c; content: ''; pointer-events: none; }
.store-boost { border-color: #c23bea9a; background: linear-gradient(112deg,#1a0e28f0,#0b0d1af2); }
.store-boost::after { border-color: #e339ff27; }
.store-shield { border-color: #247cc58c; }
.store-supply { border-color: #536b8790; }
.store-art-frame { z-index: 1; display: grid; width: 105px; height: 114px; place-items: center; border: 1px solid #00cde14c; background: radial-gradient(ellipse at center,#0b3545,#07101beF 72%); }
.store-boost .store-art-frame { border-color: #bb39e179; background: radial-gradient(ellipse at center,#381649,#100c1def 72%); }
.store-shield .store-art-frame { border-color: #3377c588; background: radial-gradient(ellipse at center,#0c2e4b,#07101bea 72%); }
.store-art { width: 94px; height: 104px; object-fit: contain; filter: drop-shadow(0 0 12px #00dff34a); }
.store-boost .store-art { filter: drop-shadow(0 0 12px #dd37fa6b); }
.store-details { z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.store-details>.eyebrow { color: #9bafc3; font-size: 7px; letter-spacing: 1.3px; }
.store-name-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; }
.store-name-row h2 { margin: 0; color: #eff6ff; font: 700 18px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; }
.store-name-row>b { color: var(--cyan); font: 700 17px var(--display); }
.store-boost .store-name-row>b { color: #e454fb; }
.store-details>p { margin: 0; color: #91a2b7; font-size: 9px; text-transform: uppercase; }
.store-product .power-choice { display: flex; width: 100%; gap: 4px; margin: 0; }
.store-product .power-choice button { min-height: 25px; padding: 0 6px; font-size: 7px; }
.store-price-button { min-height: 30px; padding: 0 10px; border: 1px solid #00ddeb; background: #00ddeb18; color: #10e7f5; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.store-price-button small { color: #d8e9f5; font-size: 8px; }
.store-boost .store-price-button { border-color: #d741f4; background: #d741f41a; color: #eb5bfd; }
.shop-screen .shop-footnote { margin: 12px 0 0; color: #77889e; font-size: 8px; line-height: 1.45; }

.registration-overlay { background: #02040bf2 url('/assets/backgrounds/neon-arena.webp?v=20260924-scene') center / cover fixed no-repeat; }
.registration-overlay::before, .registration-overlay::after { opacity: .09; }
.registration-brand { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; }
.registration-brand-lockup { display: flex; min-width: 0; align-items: center; gap: 8px; }
.registration-brand-lockup img { flex: 0 0 auto; }
.registration-brand-lockup .registration-wordmark { width: 58px; height: auto; max-height: 19px; object-fit: contain; }
.registration-brand-lockup > span { flex: 0 0 auto; }
.registration-brand-lockup small { margin-left: 2px; white-space: nowrap; }
.registration-language { display: flex; min-width: 0; min-height: 44px; flex: 0 0 auto; align-items: center; padding: 0 8px; border: 1px solid #23425b; background: #060e19e8; color: #dce8f5; }
.registration-language select { width: 94px; min-width: 0; height: 42px; padding: 6px 13px 6px 2px; border: 0; background-color: transparent; color: #dce8f5; font: 600 9px/1.1 var(--body); letter-spacing: .1px; }
.registration-language option { background: #07101b; color: #e5edf8; }
.birthday-label { min-width: 0; }
.date-parts { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; direction: ltr; }
.date-parts input { min-width: 0; padding-inline: 5px; text-align: center; font: 600 12px var(--display); letter-spacing: .8px; }

@media (max-width: 640px) {
  .app-shell { padding: 0 12px calc(var(--nav-height) + 23px + env(safe-area-inset-bottom)); }
  .arena-topbar { height: 82px; padding-inline: 4px; }
  .arena-brand-mark { width: 64px; height: 64px; }
  .arena-player-name { max-width: 190px; font-size: 15px; }
  .arena-settings { width: 43px; height: 43px; }
  .route-topbar { height: 61px; }
  .route-back { width: 36px; height: 36px; }
  .route-brand { gap: 6px; font-size: 10px; letter-spacing: 2px; }
  .route-brand .brand-symbol { width: 30px; height: 30px; }
  .route-profile .route-brand .brand-symbol { width: 30px; height: 30px; flex-basis: 30px; }
  .route-brand i { font-size: 11px; }
  .route-action, .route-balance { max-width: 112px; min-height: 33px; padding-inline: 7px; font-size: 8px; }
  .arena-screen { gap: 13px; margin-top: 0; }
  .arena-stage { min-height: clamp(420px, 55svh, 590px); padding-top: clamp(70px, 12svh, 175px); }
  .arena-season { font-size: 8px; }
  .arena-wordmark { margin-top: 30px; font-size: clamp(62px,17vw,76px); letter-spacing: 4px; }
  .arena-tagline { margin-top: 12px; font-size: 9px; }
  .play-panel { width: 83%; min-height: clamp(126px, 19svh, 210px); gap: 12px; margin-top: clamp(38px, 6svh, 55px); padding: 11px 18px; }
  .play-emblem { width: 39px; height: 39px; font-size: 14px; }
  .play-label { font-size: clamp(31px, 10vw, 52px); letter-spacing: .02em; }
  .play-arrow { right: 13px; }
  .arena-highlight-list { gap: 8px; }
  .streak-panel, .reward-panel { min-height: 65px; grid-template-columns: 39px minmax(0,1fr) auto; gap: 9px; padding: 7px 10px; }
  .streak-symbol, .reward-symbol { width: 37px; height: 37px; }
  .streak-symbol svg, .reward-symbol svg { width: 21px; height: 21px; }
  .streak-copy small, .reward-copy small { font-size: 8px; }
  .streak-copy strong, .reward-copy strong { font-size: 22px; }
  .reward-claim { min-width: 76px; min-height: 34px; padding-inline: 7px; font-size: 8px; }
  .arena-data { margin-top: clamp(145px, 22svh, 220px); }
  .arena-data .stat-grid { gap: 6px; }
  .arena-data .stat-card { min-height: 72px; padding: 8px 7px; }
  .arena-data .stat-value { font-size: 18px; }
  .arena-data .stat-card small { font-size: 6px; }
  .arena-economy-grid { grid-template-columns: 1fr; gap: 8px; }
  .arena-economy-grid .wallet-card { grid-column: auto; }
  .arena-economy-grid .inventory-card { padding: 10px; }
  .arena-screen .lower-grid { grid-template-columns: 1fr; }
  .rank-screen .screen-heading { margin-top: 13px; }
  .rank-screen .screen-heading h1 { font-size: clamp(26px,7.2vw,34px); }
  .rank-screen .rank-hero { padding: 13px; }
  .rank-screen .rank-table { padding: 11px 9px; }
  .rank-screen .table-top { flex-direction: column; align-items: stretch; }
  .rank-screen .table-top h2 { display: none; }
  .rank-screen .segment-tabs { margin: 0; }
  .rank-screen .table-header,.rank-screen .player-row { grid-template-columns: 24px minmax(0,1fr) 53px 47px; column-gap: 4px; }
  .bottom-nav { height: calc(66px + env(safe-area-inset-bottom)); }
  .nav-item { height: 50px; font-size: 8px; }
  .nav-item svg { width: 18px; height: 18px; }
  .nav-item .nav-art { width: 30px; height: 30px; }
  .registration-overlay { background-attachment: scroll; }
  .registration-brand { margin-bottom: 21px; }
  .registration-brand-lockup { gap: 6px; }
  .registration-brand-lockup small { margin-left: 0; font-size: 6px; }
  .registration-language { min-height: 44px; padding-inline: 5px; }
  .registration-language select { width: 88px; height: 42px; font-size: 8px; }
  .date-parts { gap: 4px; }
  .date-parts input { padding-inline: 2px; font-size: 10px; letter-spacing: .3px; }
  .profile-screen { gap: 8px; margin-top: 9px; }
  .profile-screen .profile-hero { position: relative; grid-template-columns: 118px minmax(0,1fr); gap: 10px; min-height: 148px; padding: 10px; }
  .profile-screen .profile-avatar-wrap { width: 114px; height: 114px; padding: 4px; }
  .profile-screen .profile-identity h1 { max-width: 190px; font-size: clamp(17px,5.3vw,25px); }
  .profile-screen .profile-country { font-size: 10px; }
  .profile-screen .profile-rank-line { gap: 6px; margin-top: 6px; }
  .profile-screen .profile-rank-line strong { font-size: 20px; }
  .profile-edit-button { position: absolute; top: 8px; right: 9px; }
  .profile-progress-panel { padding: 10px 11px 8px; }
  .profile-progress-heading { font-size: 9px; }
  .profile-progress-heading span { font-size: 8px; }
  .profile-record { min-height: 64px; gap: 8px; padding: 8px; }
  .profile-record .record-icon { width: 35px; height: 35px; }
  .profile-record .record-icon svg { width: 33px; height: 33px; }
  .profile-record strong { font-size: 25px; }
  .profile-usage { padding: 9px; }
  .usage-row { min-height: 42px; grid-template-columns: 31px 61px minmax(30px,1fr) 32px; gap: 6px; font-size: 8px; }
  .usage-icon { width: 29px; height: 29px; }
  .usage-icon .artifact-art { width: 25px; height: 25px; }
  .profile-streak-panel { min-height: 62px; grid-template-columns: 34px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
  .streak-flame { width: 32px; height: 32px; font-size: 19px; }
  .profile-streak-copy strong { font-size: 19px; }
  .streak-checks { gap: 2px; }
  .streak-checks i { width: 15px; height: 15px; font-size: 8px; }
  .store-heading { margin-top: 5px; }
  .store-list { gap: 8px; }
  .store-product { min-height: 130px; grid-template-columns: 94px minmax(0,1fr); gap: 9px; padding: 9px; }
  .store-art-frame { width: 94px; height: 110px; }
  .store-art { width: 86px; height: 102px; }
  .store-name-row h2 { font-size: 15px; }
  .store-name-row>b { font-size: 14px; }
  .store-price-button { min-height: 27px; padding-inline: 8px; font-size: 9px; }
}
@media (max-width: 360px) {
  .arena-player-name { max-width: 155px; font-size: 13px; }
  .arena-stage { min-height: 328px; padding-top: 26px; }
  .arena-wordmark { margin-top: 27px; }
  .arena-tagline { margin-top: 9px; }
  .play-panel { min-height: 122px; margin-top: 37px; }
  .streak-panel, .reward-panel { min-height: 60px; }
  .route-action, .route-balance { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .arena-stage *, .arena-highlight-list * { scroll-behavior: auto; }
}

.route-clan-title { justify-self: center; color: #eaf3ff; font: 700 22px/1 var(--display); letter-spacing: 3px; text-transform: uppercase; }
.route-clan-brand { justify-self: center; gap: 8px; }
.route-clan-brand .route-wordmark { display: block; width: clamp(98px, 27vw, 132px); }
.route-clan-brand i { color: #eaf3ff; font: 700 clamp(12px, 3.4vw, 19px)/1 var(--display); letter-spacing: 1.4px; }
.clan-screen:not(.clan-guest) .screen-heading { display: none; }
.clan-screen .clan-emblem { display: grid; place-items: center; overflow: hidden; border: 0; background: transparent; box-shadow: 0 0 0 1px #20dcef,0 0 24px #00ddeb4a; }
.clan-logo-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.clan-guest .rank-table { border-radius: 2px; background: #050c16ed; }
.clan-guest .member-row { display: grid; height: auto; min-height: 78px; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.clan-guest .clan-emblem > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.clan-guest .clan-emblem { width: 58px; height: 58px; }
.route-clan .clan-header-invite { display: inline-flex; align-items: center; gap: 6px; }
.route-clan .clan-header-invite .icon-art { width: 16px; height: 16px; flex: 0 0 16px; }
.clan-actions .small-primary { gap: 5px; padding-inline: 7px; font-size: 9px; letter-spacing: .5px; }
.clan-actions .small-primary .icon-art { width: 18px; height: 18px; flex: 0 0 18px; }
@media (max-width: 640px) {
  .route-clan-title { font-size: 20px; }
  .clan-screen:not(.clan-guest) .clan-banner { grid-template-columns: 73px minmax(0,1fr); min-height: 150px; }
  .clan-screen .clan-emblem { width: 68px; height: 68px; }
  .clan-screen:not(.clan-guest) .clan-score { grid-column: 2; }
  .clan-screen:not(.clan-guest) .clan-actions { grid-column: 1/-1; }
}

.duel-overlay { z-index: 80; align-items: stretch; justify-content: center; padding: 0; background: #02040b url('/assets/backgrounds/neon-arena.webp?v=20260924-scene') center / 100% 100% no-repeat; }
.duel-modal.result-modal { display: flex; width: min(760px,100%); height: 100dvh; max-height: 100dvh; flex-direction: column; padding: 0 20px calc(14px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.result-modal .duel-head { position: sticky; top: 0; z-index: 3; display: flex; min-height: 64px; align-items: center; gap: 8px; margin: 0 -20px 12px; padding: 0 17px; border-bottom: 1px solid #08c5dc55; background: #030812ed; }
.result-modal .duel-head::before { margin-right: auto; color: #edf5ff; content: 'TRIX'; font: 700 25px/1 var(--display); letter-spacing: 2px; }
.result-modal .duel-head .live-dot { width: 6px; height: 6px; background: #eb36fb; box-shadow: 0 0 10px #eb36fb; }
.result-modal .duel-head>span:nth-child(2) { color: #ed48f8; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.result-modal .close-duel { width: 33px; height: 33px; margin-left: 3px; }
.result-content { display: flex; width: min(100%,680px); flex: 1; flex-direction: column; align-items: center; align-self: center; gap: 8px; padding: 0 0 14px; }
.result-round { align-self: center; color: #b69bf7; font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.result-vs { position: relative; display: flex; width: min(100%,600px); min-height: clamp(210px,34vh,345px); align-items: center; justify-content: space-around; gap: 7%; margin: 0; }
.result-vs::before { position: absolute; top: 50%; right: 13%; left: 13%; height: 1px; background: linear-gradient(90deg,#00e5ef00,#00eff0c9,#eb36fbd9,#eb36fb00); content: ''; box-shadow: 0 0 18px #00dff04a; }
.result-artifact { z-index: 1; width: clamp(112px,30vw,225px); height: clamp(112px,30vw,225px); margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.result-item-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 19px #00ecf382); }
.result-artifact.scissors .result-item-art { filter: drop-shadow(0 0 20px #e735f2a0); }
.result-vs-mark { z-index: 1; color: #eaf4ff; font: 700 17px var(--display); text-shadow: 0 0 14px #eb3afba0; }
.result-badge { gap: 0; margin: 0; color: #45ff64; font: 700 clamp(42px,11vw,76px)/.95 var(--display); letter-spacing: 4px; text-shadow: 0 0 10px #39ff5c,0 0 32px #28ff727e; }
.result-badge svg { display: none; }
.result-badge.loss { color: #ff597c; text-shadow: 0 0 12px #ff4778,0 0 28px #ff47786b; }
.result-badge.draw { color: #ffd25a; text-shadow: 0 0 12px #ffd25a,0 0 28px #ffd25a5c; }
.result-score { margin: 1px 0 0; color: #f3f6fc; font: 700 clamp(38px,10vw,64px)/1 var(--display); letter-spacing: 5px; text-shadow: 0 0 20px #ffffff24; }
.result-score i { color: #77869a; font-style: normal; }
.result-player-cards { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.result-player-card { display: grid; min-height: 74px; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid #00dff280; background: #07141fea; box-shadow: inset 0 0 16px #00dff211; }
.result-player-card.player-two { border-color: #e33af18a; box-shadow: inset 0 0 16px #e33af211; }
.result-player-avatar { width: 45px; height: 45px; overflow: hidden; border: 1px solid #00dff2; border-radius: 50%; }
.player-two .result-player-avatar { border-color: #e441f2; }
.result-player-avatar .avatar-art { width: 100%; height: 100%; object-fit: cover; }
.result-player-card>div { display: flex; min-width: 0; flex-direction: column; }
.result-player-card b { overflow: hidden; color: #f2f7ff; font-size: 10px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.result-player-card small { color: #a2b1c5; font-size: 8px; }
.result-player-card>div>span { margin-top: 3px; color: #00e3f0; font-size: 7px; text-transform: uppercase; }
.player-two.result-player-card>div>span { color: #e946f6; }
.result-player-card strong { display: block; min-width: 0; margin-left: 3px; overflow-wrap: anywhere; word-break: break-word; font-size: 9px; line-height: 1.05; }
.result-reward { width: min(100%,390px); margin: 1px 0; padding: 6px 11px; border: 1px solid #ffd04a55; background: #f5c4340d; }
.result-explainer { max-width: 420px; margin: 0; color: #9caabe; font-size: 8px; text-align: center; }
.result-actions { width: min(100%,480px); margin-top: auto; padding-top: 13px; }
.result-actions .primary-button, .result-actions .outline-button { min-height: 47px; }
.reaction-button { margin-top: 3px; color: #aab8ca; }
@media(max-width:640px) {
  .duel-modal.result-modal { padding: 0 13px calc(10px + env(safe-area-inset-bottom)); }
  .result-modal .duel-head { margin-inline: -13px; padding-inline: 13px; }
  .result-vs { min-height: clamp(185px,28vh,250px); }
  .result-artifact { width: clamp(102px,29vw,138px); height: clamp(102px,29vw,138px); }
  .result-player-cards { gap: 6px; }
  .result-player-card { min-height: 66px; grid-template-columns: 34px minmax(0,1fr); gap: 6px; padding: 6px; }
  .result-player-avatar { width: 34px; height: 34px; }
  .result-player-card b { font-size: 8px; }
  .result-player-card strong { font-size: 8px; }
  .result-player-card small { font-size: 7px; }
  .result-actions { grid-template-columns: 1fr 1fr; }
}

/* Full-screen championship destination, composed against the generated map art. */
.tournament-overlay { z-index: 70; align-items: stretch; justify-content: center; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; background: #02040bf5; }
.tournament-sheet { display: flex; width: min(760px,100vw); max-width: 100vw; min-width: 0; height: 100dvh; max-height: 100dvh; flex-direction: column; padding: 0 22px max(20px,env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: hidden; border: 0; border-radius: 0; background: #02040b; box-shadow: none; animation: none; }
.tournament-sheet .sheet-handle { display: none; }
.championship-header { position: relative; z-index: 4; display: flex; min-height: clamp(205px,25svh,285px); flex: 0 0 auto; align-items: center; justify-content: center; margin: 0 -22px; padding: max(20px,env(safe-area-inset-top)) 20px 0; background: #02040b; }
.championship-header > div { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; }
.championship-header > div > img { display: block; width: min(59vw,450px); max-height: 142px; object-fit: contain; }
.championship-header h1 { margin: 0; color: #f7f8ff; font: 700 clamp(28px,6vw,53px)/1 var(--display); letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.championship-header .icon-button { position: absolute; top: max(9px,env(safe-area-inset-top)); left: 12px; width: 40px; height: 40px; border: 0; background: #07101d80; color: #d8e6f4; }
.tournament-sheet .sheet-content { display: flex; width: min(100%,680px); max-width: 100%; min-width: 0; flex: 1; flex-direction: column; align-self: center; gap: 0; padding: 0 0 22px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.tournament-sheet .sheet-content::-webkit-scrollbar { display: none; }
.championship-map { position: relative; width: calc(100% + 44px); max-width: 100vw; flex: 0 0 auto; align-self: center; overflow: hidden; aspect-ratio: 1.65; margin-top: clamp(42px,6svh,78px); border: 0; background: transparent; box-shadow: none; clip-path: none; }
.championship-map::after { display: none; }
.championship-map img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 1; filter: none; }
.region-label { position: absolute; z-index: 1; padding: 0; border: 0; background: transparent; color: #f7f7fb; font: 700 clamp(9px,2vw,18px)/1 var(--display); letter-spacing: .2px; text-transform: uppercase; box-shadow: none; text-shadow: 0 1px 3px #000; }
.europe-label { top: 44%; left: 51%; }
.asia-label { top: 42%; right: 19%; }
.africa-label { top: 61%; left: 48%; }
.north-america-label { top: 42%; left: 13%; max-width: 78px; text-align: center; }
.south-america-label { top: 66%; left: 30%; max-width: 78px; text-align: center; }
.australia-label { top: 70%; right: 8%; }
.championship-next { position: relative; display: flex; width: min(84%,560px); min-height: 145px; flex: 0 0 auto; flex-direction: column; align-self: center; align-items: center; justify-content: center; gap: 7px; margin-top: clamp(28px,4svh,48px); padding: 18px; border: 1px solid #34566b; background: #040911f5; box-shadow: inset 0 0 20px #b7eaff0d; text-align: center; clip-path: polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px); }
.championship-next::before { position: absolute; inset: 7px; border: 1px solid #6b9db72d; content: ''; pointer-events: none; clip-path: inherit; }
.championship-next .eyebrow { color: #ffd43b; font-size: clamp(13px,2vw,21px); letter-spacing: 1.2px; }
.championship-next h2 { margin: 0; color: #f7f8ff; font: 700 clamp(20px,4vw,37px)/1.1 var(--display); letter-spacing: .4px; text-transform: uppercase; }
.championship-next p { margin: 0; color: #8fa6b9; font-size: 10px; letter-spacing: .3px; }
.championship-events { flex: 0 0 auto; gap: 7px; margin-top: 28px; }
.championship-events:empty { display: none; }
.championship-events article { min-height: 58px; border: 1px solid #204457; border-radius: 0; background: #050d17ed; }
.championship-events .event-date { flex: 0 0 39px; border-radius: 0; }
.championship-events .outline-button { min-height: 35px; padding-inline: 10px; border-radius: 0; font-size: 8px; }
.championship-events article > div { min-width: 0; }
.championship-events article > div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[dir="rtl"] .championship-header > div { direction: rtl; }
html[dir="rtl"] .championship-next { border-right: 2px solid #e63cf4; border-left: 1px solid #e63cf477; }
.championship-events .event-date small { color: #9ba8bb; font-size: 9px; }
.championship-events article > div small { color: #9ba8bb; font-size: 10px; font-weight: 500; }
@media (max-width:640px) {
  .tournament-sheet { padding-inline: 13px; }
  .championship-header { min-height: clamp(172px,25svh,235px); margin-inline: -13px; padding-inline: 10px; }
  .championship-header > div > img { width: min(63vw,350px); }
  .championship-header h1 { font-size: clamp(22px,6vw,35px); }
  .championship-header .icon-button { width: 35px; height: 35px; }
  .championship-map { width: calc(100% + 26px); aspect-ratio: 1.35; margin-top: clamp(30px,6svh,60px); }
  .region-label { font-size: clamp(8px,2.4vw,12px); }
  .europe-label { top: 44%; left: 50%; }
  .asia-label { top: 42%; right: 17%; }
  .north-america-label { top: 40%; left: 8%; max-width: 56px; }
  .south-america-label { top: 64%; left: 26%; max-width: 64px; }
  .australia-label { top: 70%; right: 5%; }
  .africa-label { top: 61%; left: 48%; }
  .championship-next { width: min(88%,490px); min-height: 116px; margin-top: 24px; padding: 13px; }
  .championship-next h2 { font-size: clamp(17px,5vw,25px); }
  .championship-events { margin-top: 24px; }
  .championship-events article { gap: 7px; padding: 7px; }
  .championship-events article > div small { line-height: 1.35; }
  .championship-events .outline-button { min-height: 32px; padding-inline: 7px; }
}
@media(max-width:360px) {
  .registration-brand-lockup small { display: none; }
  .registration-language { min-height: 42px; padding-inline: 4px; }
  .registration-language select { width: 82px; height: 40px; }
  .championship-map { aspect-ratio: 1.35; }
  .championship-events article > div small { font-size: 7px; }
}

/* Narrow phones, tall/short viewports and browser safe areas. */
.bot-tag { display: inline-flex; width: fit-content; align-items: center; padding: 2px 5px; border: 1px solid #00dff267; background: #00dff212; color: #7ff6ff !important; font: 700 7px/1.2 var(--display) !important; letter-spacing: .7px; }
.duel-player .bot-tag { margin-top: 2px; }
.result-player-card .bot-tag { margin: 2px 0; }
@media (max-width: 420px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .app-shell { padding-left: max(10px,env(safe-area-inset-left)); padding-right: max(10px,env(safe-area-inset-right)); }
  .arena-topbar { gap: 7px; }
  .arena-brand-mark { width: 58px; height: 58px; }
  .arena-player { flex: 1 1 auto; gap: 7px; }
  .arena-player-name { max-width: min(44vw,155px); }
  .arena-player-trix { font-size: 10px; letter-spacing: 1.4px; }
  .arena-settings { width: 40px; height: 40px; }
  .route-topbar { grid-template-columns: minmax(44px,1fr) auto minmax(44px,1fr); gap: 6px; }
  .route-back { width: 34px; height: 34px; }
  .route-brand { gap: 4px; letter-spacing: 1px; }
  .route-brand i { overflow: hidden; font-size: 9px; letter-spacing: .7px; text-overflow: ellipsis; white-space: nowrap; }
  .route-action, .route-balance { max-width: 94px; min-width: 0; padding-inline: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .arena-stage { min-height: clamp(420px,55svh,590px); }
  .play-panel { width: min(83%,410px); min-height: clamp(126px,19svh,210px); padding-inline: 18px; }
  .play-label { font-size: clamp(30px,10vw,43px); letter-spacing: .02em; }
  .streak-panel, .reward-panel { grid-template-columns: 35px minmax(0,1fr) auto; gap: 6px; padding-inline: 7px; }
  .streak-symbol, .reward-symbol { width: 34px; height: 34px; }
  .streak-chain { gap: 3px; }
  .streak-chain i { width: 4px; }
  .reward-claim { min-width: 66px; padding-inline: 5px; }
  .arena-data { margin-top: clamp(145px,22svh,220px); }
  .arena-data .stat-card { min-width: 0; overflow-wrap: anywhere; }
  .arena-data .stat-label { letter-spacing: .25px; }
  .rank-screen .table-header, .rank-screen .player-row { grid-template-columns: 21px minmax(0,1fr) 48px 43px; column-gap: 3px; }
  .rank-screen .table-player { gap: 4px; }
  .rank-screen .table-player .avatar { width: 27px; height: 27px; }
  .rank-screen .table-player b { font-size: 9px; }
  .rank-screen .table-league { font-size: 7px; }
  .rank-screen .table-points { font-size: 9px; }
  .clan-screen .clan-banner { grid-template-columns: 49px minmax(0,1fr) auto; gap: 6px; padding: 9px; }
  .clan-screen .clan-emblem { width: 46px; height: 46px; }
  .clan-screen .clan-meta { min-width: 0; }
  .clan-screen .clan-meta h2 { overflow: hidden; font-size: clamp(12px,4vw,16px); text-overflow: ellipsis; white-space: nowrap; }
  .clan-screen .clan-score { grid-column: 2 / 4; display: flex; align-items: baseline; gap: 6px; }
  .clan-screen .clan-score span { margin-left: auto; }
  .clan-screen .clan-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
  .clan-screen .clan-actions button { flex: 1 1 0; min-width: 0; }
  .profile-screen .profile-hero { grid-template-columns: 112px minmax(0,1fr); gap: 8px; }
  .profile-screen .profile-avatar-wrap { width: 108px; height: 108px; }
  .profile-screen .profile-identity h1 { max-width: 100%; font-size: clamp(18px,5.7vw,22px); }
  .profile-screen .profile-rank-line strong { font-size: 22px; }
  .profile-screen .profile-edit-button { max-width: 64px; padding-inline: 6px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
  .store-product { grid-template-columns: 78px minmax(0,1fr); gap: 7px; padding: 8px; }
  .store-art-frame { width: 78px; height: 100px; }
  .store-art { width: 72px; height: 92px; }
  .store-details, .store-name-row { min-width: 0; }
  .store-name-row { gap: 3px; }
  .store-name-row h2 { overflow: hidden; font-size: clamp(12px,4vw,15px); text-overflow: ellipsis; }
  .store-product .power-choice { flex-wrap: wrap; }
  .tournament-sheet { padding-left: max(10px,env(safe-area-inset-left)); padding-right: max(10px,env(safe-area-inset-right)); }
  .championship-header { margin-inline: -10px; padding-inline: 7px; }
  .championship-header > div > span { font-size: 14px; }
  .championship-header h1 { font-size: clamp(21px,6vw,27px); }
}
@media (max-width: 360px) {
  .registration-overlay { padding-left: max(10px,env(safe-area-inset-left)); padding-right: max(10px,env(safe-area-inset-right)); }
  .registration-brand { gap: 4px; }
  .registration-brand img { width: 36px; height: 36px; }
  .registration-brand > span { font-size: 27px; letter-spacing: 3px; }
  .registration-language select { width: 78px; font-size: 7px; }
  .avatar-picker { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .rank-screen .table-header, .rank-screen .player-row { grid-template-columns: 18px minmax(0,1fr) 43px 38px; column-gap: 2px; }
  .rank-screen .table-player .avatar { width: 24px; height: 24px; }
  .rank-screen .table-player b { font-size: 8px; }
  .route-brand .brand-symbol { width: 26px; height: 26px; }
  .route-profile .route-brand .brand-symbol { width: 26px; height: 26px; flex-basis: 26px; }
  .clan-guest .member-row { grid-template-columns: 46px minmax(0,1fr); gap: 8px; padding: 10px; }
  .clan-guest .clan-emblem { width: 44px; height: 44px; }
  .clan-guest .member-name { grid-column: 2; grid-row: 1; min-width: 0; width: auto; flex: none; overflow-wrap: anywhere; }
  .clan-guest .member-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clan-guest .member-name small { display: block; line-height: 1.4; }
  .clan-guest .member-row > button { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 40px; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 641px) {
  .arena-screen { margin-top: 0; }
  .arena-stage { min-height: 0; height: calc(100svh - 92px); max-height: 330px; padding: 16px 4px 10px; }
  .arena-season { font-size: 9px; }
  .arena-wordmark { margin-top: 8px; }
  .arena-wordmark img { width: min(38vw,300px); max-height: 62px; }
  .arena-tagline { margin-top: 5px; font-size: 9px; }
  .play-panel { width: min(60%,450px); height: 76px; min-height: 76px; margin-top: 8px; padding-block: 0; }
  .arena-highlight-list { gap: 6px; margin-top: 4px; }
  .streak-panel,.reward-panel { min-height: 44px; }
  .bottom-nav { position: fixed; left: 50%; bottom: 0; width: min(100%,760px); height: 64px; margin: 0; transform: translateX(-50%); }
}
@media (max-height: 720px) and (max-width: 640px) {
  .arena-stage { min-height: clamp(305px, 52svh, 360px); padding-top: clamp(25px, 7svh, 50px); }
  .arena-wordmark { margin-top: 15px; }
  .play-panel { min-height: clamp(118px, 20svh, 142px); margin-top: clamp(25px, 5svh, 38px); }
  .arena-highlight-list { gap: 6px; }
  .streak-panel, .reward-panel { min-height: 58px; }
  .arena-data { margin-top: 145px; }
  .registration-overlay { align-items: flex-start; }
  .registration-modal { min-height: 0; padding-top: max(10px,env(safe-area-inset-top)); }
  .registration-brand { margin-bottom: 12px; }
  .registration-subtitle { margin-bottom: 10px; }
  .registration-form { gap: 8px; }
  .registration-modal .avatar-picker { gap: 5px; }
  .registration-modal .avatar-choice { aspect-ratio: 1.18; }
}

@media (max-width: 360px) and (max-height: 720px) {
  .arena-topbar { height: 64px; }
  .arena-stage { min-height: clamp(284px,50svh,320px); padding-top: 0; }
  .arena-wordmark { margin-top: 32px; }
  .arena-tagline { margin-top: 9px; }
  .play-panel { width: 83%; min-height: clamp(135px,23.8svh,150px); margin-top: 15px; }
  .streak-panel, .reward-panel { min-height: clamp(48px,8.5svh,56px); grid-template-columns: 32px minmax(0,1fr) auto; gap: 7px; padding: 5px 8px; }
  .streak-symbol, .reward-symbol { width: 30px; height: 30px; }
  .streak-symbol .icon-art, .reward-symbol .icon-art { width: 19px; height: 19px; }
  .streak-copy small, .reward-copy small { font-size: 7px; letter-spacing: .8px; }
  .streak-copy strong, .reward-copy strong { font-size: 18px; }
  .reward-claim { min-width: 66px; min-height: 30px; padding-inline: 5px; font-size: 7px; }
}

@media (min-height: 721px) and (max-width: 640px) and (orientation: portrait) {
  .arena-stage { min-height: clamp(360px,52svh,500px); padding-top: clamp(45px,6.5svh,60px); }
  .arena-wordmark { margin-top: 30px; }
  .play-panel { margin-top: clamp(60px,7.3svh,70px); }
}
@media (min-height: 721px) and (max-width: 400px) and (orientation: portrait) {
  .play-panel { min-height: clamp(220px,26svh,235px); margin-top: clamp(30px,3.7svh,38px); margin-bottom: -60px; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .bottom-nav { bottom: max(env(safe-area-inset-bottom),3.2svh); height: calc(clamp(58px,10.2svh,96px) + env(safe-area-inset-bottom)); }
  .bottom-nav .nav-art { width: clamp(18px,6.3vw,34px); height: clamp(18px,6.3vw,34px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .registration-overlay { align-items: flex-start; }
  .registration-modal { width: min(100%,620px); min-height: 0; margin-block: 0; }
  .registration-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
  .registration-form > label:first-child, .registration-form .avatar-field, .registration-form .age-note, .registration-form .register-submit { grid-column: 1 / -1; }
  .registration-form .avatar-picker { grid-template-columns: repeat(12,minmax(0,1fr)); }
}

/* Duel motion stays on compositor-friendly opacity/transform properties. */
.arena-header-actions { display:flex;align-items:center;gap:7px }
.arena-tournament { width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffc85745;border-radius:10px;background:#ffc8570d;color:#ffd56a }
.arena-tournament svg { width:18px;height:18px }
.duel-overlay { backdrop-filter:none;-webkit-backdrop-filter:none;background:#03060de8 }
.duel-modal { animation:duel-enter .28s cubic-bezier(.2,.75,.25,1) both }
.result-timeout { display:grid;place-items:center;width:100%;height:100%;color:#9fb0c3 }
.result-timeout svg { width:34px;height:34px }
.result-artifact.timeout { border-color:#8292a33d;background:#8292a30a }
.duel-invite-card { margin-bottom:13px;padding:13px;border:1px solid #23e6ef3d;border-radius:12px;background:linear-gradient(125deg,#0c2530,#101a2a 70%); }
.duel-invite-heading { display:flex;align-items:center;gap:10px }
.duel-invite-heading .tournament-symbol { flex:0 0 38px;width:38px;height:38px;margin:0 }
.duel-invite-heading>span:last-child { display:flex;flex-direction:column;gap:3px;min-width:0 }
.duel-invite-heading b { font-size:11px;color:#ecf6ff }
.duel-invite-heading small,.duel-invite-status { color:#93a7bb;font-size:9px;line-height:1.5 }
.duel-invite-create { width:100%;min-height:37px;margin-top:11px;font-size:9px }
.duel-invite-link { display:block;margin-top:10px;padding:9px;overflow-wrap:anywhere;border:1px solid #ffffff12;border-radius:7px;background:#060c15;color:#61e9f4;font:9px/1.45 ui-monospace,monospace }
.duel-invite-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px }
.duel-invite-actions .outline-button,.duel-invite-actions .primary-button { min-height:36px;font-size:9px }
.duel-invite-status { display:block;margin-top:8px }
@keyframes duel-enter { from { opacity:0;transform:translateY(9px) scale(.985) } to { opacity:1;transform:translateY(0) scale(1) } }
@media (max-width:720px) {
  .bottom-nav { backdrop-filter:none;-webkit-backdrop-filter:none;background:#050a13f5 }
  .arena-tournament { width:33px;height:33px }
}
.chat-messages { scrollbar-width: none; }
.chat-messages::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion:reduce) {
  .duel-modal { animation:none }
}

/* Keep the reference scale on narrow phones after the legacy compact layout rules. */
@media (max-width:640px) {
  .route-shop { grid-template-columns: minmax(0,1fr) auto; gap: 4px; }
  .route-shop .route-wordmark { width: clamp(112px,35vw,164px); max-height: 42px; }
  .route-shop .shop-route-brand { gap: 4px; }
  .route-shop .shop-route-brand i { font-size: clamp(11px,3vw,16px); letter-spacing: 1.1px; }
  .route-shop .route-balance { gap: 3px; padding-inline: 6px; font-size: 9px; }
  .route-shop .route-balance img { width: 24px; height: 24px; }
  .shop-bottom-nav { height: calc(78px + env(safe-area-inset-bottom)); }
  .shop-bottom-nav .nav-item { height: 69px; font-size: 7.5px; }
  .shop-bottom-nav .nav-art { width: 35px; height: 35px; }
  .shop-bottom-nav .inventory-nav-art { width: 32px; height: 32px; }
  .shop-screen { margin-top: clamp(17px,3.2svh,34px); }
  .store-list { gap: 8px; }
  .store-product { min-height: clamp(172px,22svh,230px); grid-template-columns: minmax(88px,34%) minmax(0,1fr); gap: 9px; padding: 9px; }
  .store-art-frame { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; }
  .store-art { width: 100%; height: 100%; }
  .store-details { gap: 5px; padding: 4px 0; }
  .store-details>.eyebrow { font-size: 8px; }
  .store-name-row h2 { font-size: clamp(17px,5.1vw,23px); }
  .store-name-row>b { font-size: clamp(15px,4.5vw,20px); }
  .store-details>p { font-size: 9px; }
  .store-product .power-choice { gap: 4px; }
  .store-product .power-choice button { min-height: 44px; padding-inline: 7px; font-size: 8px; }
  .store-price-button { min-height: 34px; padding-inline: 9px; font-size: 11px; }
}
@media (max-width:360px) {
  .route-shop .route-wordmark { width: 108px; }
  .route-shop .route-balance { padding-inline: 4px; font-size: 8px; }
  .route-shop .route-balance img { width: 20px; height: 20px; }
  .store-product { grid-template-columns: minmax(80px,32%) minmax(0,1fr); gap: 7px; padding: 7px; }
  .store-name-row h2 { font-size: 16px; }
  .store-product .power-choice button { padding-inline: 5px; font-size: 7px; }
}
@media (prefers-reduced-motion:reduce) {
  .route-shop + .screen .store-product { animation: none; }
}

/* Keep the artifact pack available with the other store products. */
.store-product.store-supply { display: grid; }

/* Registration matches the supplied framed onboarding card, with no stretched empty panel. */
.registration-overlay {
  background:
    radial-gradient(ellipse 28% 20% at 15% 41%, #07334952, transparent 100%),
    radial-gradient(ellipse 25% 25% at 83% 47%, #27103962, transparent 100%),
    radial-gradient(ellipse 52% 35% at 50% 100%, #05202b55, transparent 100%),
    linear-gradient(180deg,#02040bfa,#030711f7);
}
.registration-overlay::before,.registration-overlay::after { display:none; }
.registration-modal {
  width: min(100%,520px);
  min-height: 0;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #2c4660;
  border-radius: 18px;
  padding: 23px 22px 18px;
  background: radial-gradient(ellipse at 50% 0,#172c40 0,transparent 46%),linear-gradient(150deg,#131d2e,#0d1420);
  box-shadow: 0 0 58px #22e8f116,0 24px 80px #000b;
}
@media(max-width:640px) {
  .registration-overlay { align-items:center; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
  .registration-modal { width:100%; padding:17px 16px 15px; }
}
@media(max-width:360px) {
  .avatar-picker { grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
  .registration-modal { padding:13px 13px 12px; }
  .registration-brand { margin-bottom:12px; }
  .registration-modal>h2 { font-size:21px; }
  .registration-subtitle { margin-bottom:10px; }
  .registration-form { gap:8px; }
  .avatar-field { gap:6px; }
  .avatar-choice { min-height:42px; }
  .age-note { font-size:7px; }
  .register-submit { min-height:44px; }
  .registration-demo-note { margin-top:8px; }
}

@media (max-width:640px) and (max-height:720px) and (orientation:portrait) {
  .store-product { min-height: clamp(126px,21.5svh,132px); }
  .store-details { gap: 2px; }
  .store-price-button { min-height: 44px; }
}

.power-picker-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 12px 0 14px; }
.power-picker-choice { display: grid; min-width: 0; min-height: 92px; place-items: center; gap: 6px; padding: 8px 4px; border: 1px solid #31506a; background: #081421; color: #d6e4f2; }
.power-picker-choice.selected { border-color: #10e4ee; background: #08dbe91a; box-shadow: inset 0 0 16px #00e7f014,0 0 14px #00dfea25; color: #22e6ef; }
.power-picker-art { display: block; width: 48px; height: 48px; object-fit: contain; }
.power-picker-choice b { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; }
.power-picker-confirm { width: 100%; min-height: 48px; justify-content: center; }
.power-picker-confirm small { margin-left: 4px; font-size: .8em; }

.reserve-details{margin-top:6px;border-top:1px solid #ffffff12;color:var(--muted);font-size:9px}.reserve-details summary{display:flex;justify-content:space-between;gap:8px;padding:7px 1px;cursor:pointer;list-style:none}.reserve-details summary::-webkit-details-marker{display:none}.reserve-details summary::before{content:'+';color:var(--cyan);font-weight:700}.reserve-details[open] summary::before{content:'−'}.reserve-details summary b{color:var(--cyan)}.reserve-breakdown{display:grid;gap:3px;padding:0 0 6px}.reserve-breakdown>div{display:grid;grid-template-columns:20px 58px minmax(0,1fr);align-items:center;gap:6px;min-height:24px}.reserve-breakdown img{width:20px;height:20px;object-fit:contain}.reserve-breakdown span{color:#c5d0df;font-size:8px}.reserve-breakdown strong{color:#dbe5f2;font-size:8px;text-align:right;overflow-wrap:anywhere}.reserve-breakdown i{color:var(--subtle);font-size:7px;font-style:normal}

/* Compact onboarding for short landscape phone viewports. */
@media (orientation:landscape) and (max-height:520px) {
  .registration-overlay { align-items:flex-start; padding:5px 12px; }
  .registration-modal { max-height:calc(100dvh - 10px); padding:8px 14px 10px; }
  .registration-brand { margin-bottom:4px; }
  .registration-brand img { width:28px; height:28px; }
  .registration-language { min-height:30px; }
  .registration-language select { height:28px; }
  .registration-modal > .eyebrow { font-size:8px; }
  .registration-modal > h2 { margin:4px 0; font-size:19px; }
  .registration-subtitle { margin-bottom:5px; font-size:9px; line-height:1.2; }
  .registration-form { gap:5px; }
  .registration-form label { gap:3px; font-size:8px; }
  .registration-form input,.registration-form select { height:32px; padding-inline:8px; font-size:10px; }
  .form-split { gap:6px; }
  .avatar-field { gap:4px; font-size:8px; }
  .registration-modal .avatar-picker { gap:3px; }
  .registration-modal .avatar-choice { min-height:30px; aspect-ratio:auto; }
  .registration-modal .avatar-choice .avatar-art { width:29px; height:29px; }
  .registration-modal .age-note { font-size:7px; line-height:1.1; }
  .registration-modal .telegram-login { min-height:34px; font-size:10px; }
  .registration-modal .auth-required-note > p { margin:2px 0; font-size:8px; }
  .registration-demo-note { margin-top:4px; font-size:8px; }
}
/* Keep the name and edit action in separate slots on narrow screens. */
@media (max-width: 640px) {
  .profile-screen .profile-hero { grid-template-rows: auto auto; }
  .profile-screen .profile-avatar-wrap { grid-row: 1 / 3; }
  .profile-screen .profile-identity { align-self: end; }
  .profile-screen .profile-identity h1 { overflow-wrap: anywhere; }
  .profile-screen .profile-edit-button {
    position: static;
    grid-column: 2;
    justify-self: start;
    max-width: none;
    overflow: visible;
    padding-inline: 10px;
  }
}
@media (max-width: 460px) {
  .registration-form .form-split { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) and (max-height: 640px) and (orientation: portrait) {
  .registration-modal { padding: 12px 16px 10px; }
  .registration-brand { margin-bottom: 8px; }
  .registration-modal > h2 { margin: 4px 0; }
  .registration-subtitle { margin-bottom: 8px; }
  .registration-form { gap: 6px; }
  .registration-form label { gap: 4px; }
  .registration-form input, .registration-form select { height: 36px; }
  .registration-form .form-split { gap: 8px; }
  .registration-modal .avatar-field { gap: 6px; }
  .registration-modal .avatar-picker { gap: 4px; }
  .registration-modal .avatar-choice { aspect-ratio: 1.2; }
  .registration-modal .avatar-choice .avatar-art { width: 40px; height: 40px; }
  .registration-modal .register-submit { min-height: 44px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 640px) {
  .arena-screen { gap: 4px; margin-top: 0; }
  .arena-stage { min-height: 0; height: calc(100svh - 132px); max-height: 188px; padding: 6px 4px; }
  .arena-season { font-size: 7px; }
  .arena-wordmark { margin-top: 3px; }
  .arena-wordmark img { width: min(36vw, 210px); max-height: 52px; }
  .arena-tagline { margin-top: 2px; font-size: 8px; }
  .play-panel { width: min(58%, 320px); height: 60px; min-height: 60px; margin: 3px auto 0; padding-block: 0; }
  .arena-highlight-list { gap: 4px; margin-top: 2px; }
  .streak-panel, .reward-panel { min-height: 42px; padding: 4px 7px; }
  .bottom-nav { position: fixed; left: 50%; bottom: 0; width: min(100%,760px); height: 62px; margin: 0; transform: translateX(-50%); }
}


/* Keep the clan emblem upright and the support affordance clear of the live chat composer. */
.clan-screen .clan-emblem { transform: none; }
.route-state-clan .help-fab { display: none; }
.route-profile .route-profile-brand { display: flex; width: auto; min-width: 0; align-items: center; justify-content: center; gap: 7px; }
.route-profile .route-profile-brand .brand-symbol { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.route-profile .route-profile-brand .route-wordmark { width: 82px; max-height: 29px; }
.route-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; }
.route-actions .route-help, .arena-header-actions .route-help { position: static; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 1px solid #245169; background: #07111dcc; }
.route-actions .route-help img, .arena-header-actions .route-help img { width: 17px; height: 17px; object-fit: contain; }
.event-empty, .event-loading { padding: 6px 8px; color: var(--muted); font-size: 10px; text-align: center; }
.event-empty[role="alert"] { color: #ffc0cc; }
.event-empty .text-button { min-height: 32px; margin-inline-start: 6px; }
.clan-screen .clan-glow { display: none; }
.championship-events article > div b { font-size: 12px; }
.championship-events article > div small { font-size: 9px; }
.championship-events .outline-button { font-size: 9px; }
.tournament-overlay { overflow: hidden; }
.tournament-sheet { min-height: 0; }
.tournament-sheet > .sheet-content { min-height: 0; }
.clan-guest .empty-state { display: grid; justify-items: center; gap: 8px; padding: 24px 12px; text-align: center; }

/* Clear creation paths and stable profile icon boxes. */
.clan-create-intro { display: grid; gap: 8px; margin: 0 0 14px; padding: 13px; border: 1px solid #16465a; background: #07111be8; }
.clan-create-intro p,.championship-explainer { margin: 0; color: #b9c8d8; font-size: 13px; line-height: 1.55; }
.clan-create-intro small { color: #a4b4c6; line-height: 1.45; }
.clan-create-form { display: grid; gap: 14px; }
.clan-create-form label { display: grid; gap: 6px; color: #b9c8d8; font-size: 12px; }
.clan-create-form input,.clan-create-form textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #315166; border-radius: 4px; background: #060c14; color: #f4f6fc; font: inherit; }
.clan-create-form textarea { resize: vertical; }
.championship-explainer { margin: 0 0 14px; padding: 11px 13px; border-left: 2px solid #00dff2; background: #07111be8; }
@media (prefers-reduced-motion: no-preference) { .screen-entering > .screen { animation-duration: 180ms; } }
:root { --nav-height: 68px; --nav-content-gap: 28px; --nav-offset: env(safe-area-inset-bottom); }
.app-shell { padding-bottom: calc(var(--nav-height) + var(--nav-content-gap) + var(--nav-offset)); }
.bottom-nav { bottom: 0; z-index: 12; height: calc(var(--nav-height) + var(--nav-offset)); background: #030812; }
.bottom-nav .nav-item .nav-art { width: 30px; height: 30px; transform: none; transition: opacity .18s ease, filter .18s ease; }
.bottom-nav .nav-item.active .nav-art { transform: none; }
.arena-header-actions > button { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; padding: 0; }
.arena-tournament .icon-art { width: 22px; height: 22px; }
.arena-settings img,.route-settings img { display: block; width: 32px; height: 32px; object-fit: contain; }
.route-back .icon-art,.route-help .icon-art,.icon-button .icon-art { width: 20px; height: 20px; }
.profile-record.losses-record .loss-glyph { display: block; width: 43px; color: #b4a0ff; font: 44px/1 system-ui, "Apple Symbols", sans-serif; text-align: center; }
.toggle { display: flex; width: 48px; height: 28px; flex: 0 0 48px; align-items: center; padding: 3px; border: 1px solid #53657a; border-radius: 999px; background: #151e2c; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.toggle i { display: block; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #a6b1bf; transform: translateX(0); transition: background-color .16s ease, transform .16s ease; }
.toggle.on { border-color: #18d9e6; background: #087b89; }
.toggle.on i { background: #f4ffff; transform: translateX(20px); }
@media (max-width: 640px) {
  :root { --nav-height: 66px; }
  .arena-header-actions > button { width: 36px; height: 36px; flex-basis: 36px; }
  .route-profile .route-action { display: none; }
  .route-clan .clan-header-invite { display: none; }
  .route-clan .clan-header-guest-brand .route-wordmark { width: 112px; min-width: 112px; }
  .route-clan .clan-header-guest-invite { display: inline-flex; align-items: center; gap: 4px; max-width: none; min-width: max-content; padding-inline: 6px; overflow: visible; text-overflow: clip; }
  .route-clan .clan-header-guest-invite .icon-art { width: 14px; height: 14px; flex: 0 0 14px; }
  .profile-screen .profile-identity h1 { font-size: clamp(16px,4.8vw,21px); overflow-wrap: normal; white-space: nowrap; }
}
@media (max-width: 400px) {
  .route-clan .route-clan-brand { gap: 4px; }
  .route-clan .route-clan-brand .route-wordmark { width: 64px; min-width: 64px; }
  .route-clan .route-action { max-width: none; min-width: max-content; padding-inline: 4px; overflow: visible; font-size: 7px; letter-spacing: 0; text-overflow: clip; }
  .profile-screen .profile-rank-line { display: grid; grid-template-columns: minmax(0,1fr) 22px; align-items: center; gap: 3px 6px; }
  .profile-screen .profile-rank-line small { grid-column: 1 / -1; }
  .profile-screen .profile-rank-line strong { min-width: 0; max-width: 100%; overflow: hidden; font-size: clamp(14px,4.5vw,17px); letter-spacing: .4px; text-overflow: ellipsis; white-space: nowrap; }
  .profile-screen .profile-rank-line span { grid-column: 2; grid-row: 2; justify-self: end; font-size: 18px; }
}
@media (max-width: 340px) {
  .route-clan .clan-header-guest-invite { width: 44px; height: 44px; min-width: 44px; max-width: 44px; flex: 0 0 44px; justify-content: center; padding: 0; overflow: hidden; font-size: 0; }
  .route-clan .clan-header-guest-invite .clan-header-invite-label { display: none; }
}
@media (max-width: 640px) and (orientation: portrait) {
  :root { --nav-height: clamp(58px, 10.2svh, 96px); --nav-offset: max(env(safe-area-inset-bottom), 3.2svh); }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --nav-height: 60px; --nav-offset: 0px; }
  .app-shell { padding-bottom: 28px; }
  .bottom-nav { position: sticky; bottom: auto; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .toggle,.toggle i { transition: none; } }
html { scrollbar-gutter: stable; }
html:has(.overlay), body:has(.overlay) { overflow: hidden; overscroll-behavior: none; }
.registration-overlay { align-items: center; overflow: hidden; padding: max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom)); }