:root {
  --c-space: #050816;
  --c-panel: #0c1a34;
  --c-panel-deep: #0a1430;
  --c-line: rgba(77, 227, 255, .35);
  --c-line-soft: rgba(77, 227, 255, .18);
  --c-text: #e8f6ff;
  --c-text-muted: #8fb3cf;
  --c-action: #4de3ff;
  --c-action-ink: #04223a;
  --c-action-base: #1b8ab0;
  --c-reward: #ff9a3d;
  --c-reward-ink: #2c1406;
  --c-danger: #ff7a60;
  --c-mate: #6dffa8;
}

.diamond { margin-right: 12px; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--c-action); transform: rotate(45deg); flex: none; }


.hub { background: transparent; }
.hub-head { padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); align-items: center; }
.hub-brand { gap: 14px; }
.hub-logo { width: 44px; height: 44px; border-radius: 0; box-shadow: none; }
.hub-title { font-size: 22px; letter-spacing: 1px; line-height: 1.1; }
.hub-sub { font-size: 13px; color: var(--c-text-muted); }
.hub-wallet { display: flex; align-items: center; gap: 0; font-size: 13px; font-weight: 800; color: var(--c-text); white-space: nowrap; }
.hub-wallet b { font-weight: 900; }


.hub-orbit { --u: min(1vh, .46vw); position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
.orb-ellipse { position: absolute; left: 50%; top: 54.4%; border: 1px solid var(--c-line-soft); border-radius: 50%; pointer-events: none; }
.orb-ellipse.e1 { width: calc(var(--u) * 150); height: calc(var(--u) * 52); transform: translate(-56%, -42%) rotate(-7deg); }
.orb-ellipse.e2 { width: calc(var(--u) * 128); height: calc(var(--u) * 40); transform: translate(-44%, -60%) rotate(5deg); }
.orb-play { left: 50%; top: 54.4%; width: calc(var(--u) * 45); height: calc(var(--u) * 45); padding: 0 8px; gap: calc(var(--u) * 3);
  background: var(--c-action); color: var(--c-action-ink); border-radius: 22px; box-shadow: 0 6px 0 var(--c-action-base); }
.orb-play:active { box-shadow: 0 2px 0 var(--c-action-base); }
.orb-play-title { font-size: calc(var(--u) * 7.5); letter-spacing: 0; text-transform: none; }
.orb-play-sub { font-size: calc(var(--u) * 2.8); font-weight: 800; opacity: 1; white-space: nowrap; text-align: center; line-height: 1.2; }
.orb-sat { min-width: 0; min-height: 0; border-radius: 18px; background: var(--c-panel); border: 1.5px solid var(--c-line); box-shadow: 0 5px 12px rgba(0,0,0,.2); gap: calc(var(--u) * 1.2); }
.orb-sat svg { width: calc(var(--u) * 7); color: var(--c-action); }
.orb-sat-title { font-size: calc(var(--u) * 4.4); color: var(--c-text); }
.orb-sat-sub { font-size: calc(var(--u) * 3); color: var(--c-text-muted); display: block; }
.orb-profile { left: calc(50% - var(--u) * 45.6); top: 57.4%; width: calc(var(--u) * 33); height: calc(var(--u) * 33); }
.orb-profile canvas { width: calc(var(--u) * 11); }
.orb-profile .orb-sat-sub { color: var(--c-text-muted); font-size: calc(var(--u) * 3.6); }
.orb-xp-sat { width: 70%; height: calc(var(--u) * 2.2); margin-top: calc(var(--u) * .6); background: #173148; }
.orb-xp-sat i { background: var(--c-action); box-shadow: none; }
.orb-shop, .orb-rank { width: calc(var(--u) * 26.5); height: calc(var(--u) * 26.5); }
.orb-shop { left: calc(50% + var(--u) * 43.6); top: 37.9%; }
.orb-rank { left: calc(50% + var(--u) * 43.6); top: 68.7%; }
.orb-badge { top: 8px; right: 8px; min-width: 24px; height: 24px; border-radius: 8px; background: var(--c-reward); color: var(--c-reward-ink); box-shadow: none; }
@media (max-height: 520px) { .orb-sat-sub, .orb-profile .orb-sat-sub { display: block; } .hub-title { font-size: 20px; } }
@media (orientation: portrait) {
  .hub-orbit { --u: .55vw; }
  .orb-ellipse { display: none; }
}


.sq-btn { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 18px;
  border: 1.5px solid var(--c-line); background: var(--c-panel-deep); color: var(--c-text); font: 900 30px/1 Nunito, system-ui, sans-serif; }
.sq-btn svg { width: 24px; height: 24px; color: var(--c-action); }
.screen-title { flex: 1; margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; color: var(--c-text); }
.perles { display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; color: var(--c-text); white-space: nowrap; }
.perles b { font-weight: 900; }
.c-panel { background: var(--c-panel); border: 1.5px solid var(--c-line); border-radius: 18px; box-shadow: 0 5px 12px rgba(0,0,0,.2); }
.c-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 18px;
  border: 1.5px solid var(--c-line); background: var(--c-panel-deep); color: var(--c-text); font: 900 14px/1.2 Nunito, system-ui, sans-serif; text-align: center; box-shadow: none; text-shadow: none; }
.c-btn:active { transform: scale(.97); }
.c-btn.c-primary { background: var(--c-action); color: var(--c-action-ink); border-color: var(--c-action); box-shadow: 0 4px 0 var(--c-action-base); }
.c-btn.c-reward { background: var(--c-reward); color: var(--c-reward-ink); border-color: var(--c-reward); }
.c-field { height: 44px; width: 100%; min-width: 0; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--c-line); background: var(--c-panel-deep);
  color: var(--c-text); font: 800 15px Nunito, system-ui, sans-serif; text-align: left; box-shadow: none; }
.c-field::placeholder { color: var(--c-text-muted); }
.c-choice { display: flex; gap: 8px; min-width: 0; }
.c-choice .mode-btn { flex: 1; min-height: 44px; border-radius: 18px; border: 1.5px solid var(--c-line); background: var(--c-panel-deep); color: var(--c-text);
  font: 900 14px Nunito, system-ui, sans-serif; box-shadow: none; }
.c-choice .mode-btn.selected { border-color: var(--c-action); background: #102e47; color: var(--c-action); box-shadow: none; }
.c-choice .mode-btn:disabled { opacity: .45; }


.play-screen { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 12px max(32px, env(safe-area-inset-left)); }
.play-head { display: flex; align-items: center; gap: 12px; flex: none; }
.play-head .sq-btn + .screen-title { margin-left: 4px; }
.play-head .perles { margin-left: 8px; }
.play-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.play-settings { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.play-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
.play-row > label { font-size: 13px; font-weight: 800; color: var(--c-text); }
.play-row[hidden] { display: none; }
.play-mass { display: flex; align-items: center; gap: 10px; }
.play-mass input[type=range] { flex: 1; accent-color: var(--c-action); min-height: 44px; }
.play-mass-num { width: 84px; text-align: right; }
.play-settings .skin-bar { min-height: 52px; width: 100%; justify-content: center; border-radius: 18px; border: 1.5px solid var(--c-line); background: var(--c-panel-deep); box-shadow: none; }
.play-settings .skin-bar canvas { width: 36px; height: 36px; }
.play-settings .server-name { margin: 0; font-size: 11px; color: var(--c-text-muted); text-align: left; }
.play-actions { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.play-main { min-height: 48px; font-size: 15px; }
.play-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.play-join { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.play-join[hidden] { display: none; }
.play-join .code-input { text-align: center; letter-spacing: 4px; }
.play-myserver { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; }
.play-myserver[hidden] { display: none; }
.play-myserver span { flex: 1; }
.play-ranked { flex-direction: column; gap: 2px; }
.play-ranked .tile-sub { color: var(--c-text-muted); font-size: 11px; }
.play-lobbies { padding: 12px 16px; flex: none; }
.play-lobbies h2 { margin: 0 0 4px; font-size: 15px; font-weight: 900; color: var(--c-text); text-align: left; }
.lobby-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid rgba(77,227,255,.15); }
.lobby-row:last-child { border-bottom: 0; }
.lobby-row > div { flex: 1; }
.lobby-row strong { display: block; font-size: 14px; color: var(--c-text); }
.lobby-row small { display: block; font-size: 11px; color: var(--c-text-muted); }
.lobby-empty { margin: 4px 0; font-size: 12px; color: var(--c-text-muted); }
.play-screen .error { margin: 0; text-align: left; }
@media (orientation: portrait) { .play-cols { grid-template-columns: 1fr; overflow-y: auto; } .play-settings, .play-actions { overflow: visible; } }
.play-head .screen-title { flex: 1 1 auto; margin-right: auto; }
.play-settings .skin-bar-name { font-size: 15px; font-weight: 900; color: var(--c-text); }
.play-settings .skin-bar canvas { flex: none; }
.play-join .code-input { font-size: 15px; letter-spacing: 3px; padding: 8px; }
.play-join .code-input::placeholder { letter-spacing: 0; }
.play-screen * { scrollbar-width: thin; scrollbar-color: var(--c-action-base) transparent; }
.play-screen ::-webkit-scrollbar { width: 4px; } .play-screen ::-webkit-scrollbar-thumb { background: var(--c-action-base); border-radius: 4px; }
#home.play-screen { align-items: stretch; } .play-head, .play-cols { width: 100%; }


.c-screen { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; overflow: hidden; background: transparent;
  padding: max(24px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 16px max(32px, env(safe-area-inset-left)); }
.c-screen[hidden] { display: none; }
.c-head { display: flex; align-items: center; gap: 12px; flex: none; width: 100%; }
.c-head .screen-title { flex: 1 1 auto; margin: 0 auto 0 4px; }
.c-screen ::-webkit-scrollbar { width: 4px; } .c-screen ::-webkit-scrollbar-thumb { background: var(--c-action-base); border-radius: 4px; }
.c-screen * { scrollbar-width: thin; scrollbar-color: var(--c-action-base) transparent; }


.profile-cols { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.profile-id-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.profile-id-card .profile-top { display: flex; align-items: center; gap: 12px; }
.profile-id-card canvas { width: 72px; height: 72px; flex: none; border-radius: 50%; filter: none; }
.profile-name { font-size: 22px; font-weight: 900; color: var(--c-text); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.profile-account { font-size: 13px; color: var(--c-text-muted); }
.profile-id-card .xp-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-text-muted); }
.profile-id-card .xp-row b { color: var(--c-text); }
.profile-id-card .xp-bar { height: 8px; background: #173148; margin-top: 6px; }
.profile-id-card .xp-bar i { background: var(--c-action); box-shadow: none; }
.profile-account-btn { margin-top: auto; width: 100%; }
.profile-note { margin: 0; font-size: 11px; color: var(--c-text-muted); }
.profile-main { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.profile-main .profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.profile-main .profile-stats > div { text-align: center; background: var(--c-panel); border: 0; border-radius: 14px; padding: 6px 4px; }
.profile-main .profile-stats b { display: block; font-size: 20px; color: var(--c-text); }
.profile-main .profile-stats span { font-size: 11px; color: var(--c-text-muted); }
.profile-main .chest-box { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 0; background: var(--c-panel); border: 1.5px solid var(--c-line); }
.profile-main .chest-box::before { display: none; }
.profile-main .chest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-main #chest-count { font-size: 15px; color: var(--c-reward); }
.profile-main .chest-next { font-size: 12px; color: var(--c-text-muted); }
.profile-tabs { justify-content: flex-start; } .profile-tabs .mode-btn { flex: 0 0 auto; padding: 0 16px; }
.profile-inv { flex: 1; min-height: 0; overflow-y: auto; }
.profile-inv .inv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.profile-inv .skin-card { background: var(--c-panel-deep); border: 1.5px solid rgba(77,227,255,.25); border-radius: 18px; padding: 6px; box-shadow: none; }
.profile-inv .skin-card.selected { border-color: var(--c-action); }
.profile-inv .skin-card canvas { width: 44px; height: 44px; }
.profile-inv .skin-card span { font-size: 11px; color: var(--c-text); }
.profile-inv .inv-emote { background: var(--c-panel-deep); border: 1.5px solid rgba(77,227,255,.25); border-radius: 14px; color: var(--c-text); }
.profile-inv .inv-emote img { width: 40px; height: 40px; }
.profile-inv .inv-grid.inv-emotes { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
@media (orientation: portrait) { .profile-cols { grid-template-columns: 1fr; overflow-y: auto; } }

.c-screen, #home.play-screen { background-color: var(--c-space);
  background-image: radial-gradient(rgba(200,225,255,.52) .7px, transparent .9px), radial-gradient(rgba(200,225,255,.33) .5px, transparent .8px);
  background-size: 83px 77px, 127px 111px; background-position: 17px 32px, 59px 68px; }


.road-screen { gap: 8px; }
.road-badge { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; color: var(--c-text-muted); white-space: nowrap; }
.road-badge.ready { background: var(--c-reward); color: var(--c-reward-ink); }
.road-xpbox { width: 180px; flex: none; }
.road-xpbox-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-text-muted); }
.road-xpbox-row b { color: var(--c-text); }
.road-xpbox-bar { height: 8px; margin-top: 4px; border-radius: 8px; background: #173148; overflow: hidden; }
.road-xpbox-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-action); }
.road-screen .road-scroll { flex: 1; min-height: 150px; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0; background: none; border: 0; }
.road-screen .road-track { position: relative; }
.road-screen .rn-path { position: absolute; left: 0; top: 0; }
.rn-isle { position: absolute; width: 112px; height: 79px; transform: translate(-50%, -24%); background: url(ilot.webp) center / contain no-repeat; opacity: .55; pointer-events: none; }
.rn-isle.done { opacity: 1; }
.rn-tile { position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 2px solid #36516e; background: rgba(12,26,52,.92); color: var(--c-text-muted); font: 900 20px Nunito, system-ui, sans-serif; padding: 0; }
.rn-tile.done { border-color: var(--c-action); color: var(--c-text); }
.rn-tile.here { box-shadow: 0 0 0 3px rgba(77,227,255,.25); }
.rn-tile.sel { box-shadow: 0 0 14px rgba(77,227,255,.55); }
.rn-reward { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1.5px solid #36516e; background: rgba(12,26,52,.92); }
.rn-reward.sel { border-color: var(--c-action); box-shadow: 0 0 12px rgba(77,227,255,.5); }
.rn-chest { color: var(--c-reward); border-color: rgba(255,154,61,.55); }
.rn-chest svg { width: 26px; height: 26px; }
.rn-chest.tier-gold { color: #ffd34d; border-color: rgba(255,211,77,.6); }
.rn-chest.tier-rare { color: #ff9a3d; border-width: 2.5px; }
.rn-chest.ready { background: rgba(255,154,61,.18); animation: rn-pulse 1.6s ease-in-out infinite; }
.rn-chest.opened { color: var(--c-mate); border-color: rgba(109,255,168,.5); opacity: .8; }
.rn-chest.locked { opacity: .55; }
@keyframes rn-pulse { 50% { box-shadow: 0 0 14px rgba(255,154,61,.7); } }
@media (prefers-reduced-motion: reduce) { .rn-chest.ready { animation: none; } }
.rn-skin canvas { width: 36px; height: 36px; border-radius: 50%; }
.rn-skin:not(.got) canvas { filter: grayscale(.85) brightness(.6); }
.road-screen .rn-me { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.road-screen .rn-me canvas { width: 40px; height: 40px; border-radius: 50%; }
.road-screen .rn-me span { font-size: 11px; font-weight: 900; color: var(--c-action); }
.road-detail { flex: none; width: 100%; display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.road-detail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.road-detail-txt b { font-size: 15px; color: var(--c-text); }
.road-detail-txt span { font-size: 12px; color: var(--c-text-muted); }
.road-d-skin { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.road-d-skin[hidden] { display: none; }
.road-d-skin canvas { width: 40px; height: 40px; border-radius: 50%; }
.road-d-skin span { font-size: 11px; font-weight: 800; color: var(--c-text-muted); }
.road-detail .c-btn { min-width: 112px; }
.road-detail .c-btn:disabled { opacity: .6; }
.road-detail .c-btn.road-opened { color: var(--c-mate); border-color: rgba(109,255,168,.5); opacity: 1; }
#road { z-index: 20; } 
.road-screen .road-scroll { scrollbar-width: none; } .road-screen .road-scroll::-webkit-scrollbar { display: none; }


#chest-result { z-index: 30; }
.chest-win { --metal: var(--c-reward); width: min(560px, 100%); padding: 14px 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chest-win[data-kind=gold] { --metal: #ffd34d; }
.chest-win[data-kind=rare] { --metal: #ff7a3d; }
.chest-win h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--c-text); text-transform: uppercase; letter-spacing: 1px; }
.chest-level { margin: 0; font-size: 13px; color: var(--c-text-muted); }
.chest-scene { position: relative; width: 100%; height: 150px; perspective: 700px; }
.chest-aura { position: absolute; left: 50%; top: 62%; width: 240px; height: 140px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, color-mix(in srgb, var(--metal) 24%, transparent), transparent 68%); opacity: .3; transition: opacity .4s; }
.chest3d { position: absolute; left: 50%; bottom: 6px; width: 176px; height: 128px; transform: translateX(-50%) scale(.72); transform-origin: center bottom; transform-style: preserve-3d; }
.chest3d .body { position: absolute; bottom: 0; width: 176px; height: 86px; border-radius: 12px 12px 16px 16px; background: linear-gradient(120deg, #234365, #0a1830 70%); border: 3px solid var(--metal); box-shadow: 0 14px 0 -9px #020611, 0 20px 22px #0009; overflow: hidden; box-sizing: border-box; }
.chest3d .body::before, .chest3d .body::after { content: ''; position: absolute; top: 0; bottom: 0; width: 16px; background: var(--metal); opacity: .55; }
.chest3d .body::before { left: 18px; } .chest3d .body::after { right: 18px; }
.chest3d .lid { position: absolute; left: 0; bottom: 86px; width: 176px; height: 43px; border: 3px solid var(--metal); border-radius: 18px 18px 4px 4px; background: linear-gradient(#294b6d, #11243c); transform-origin: center bottom; transition: transform .65s cubic-bezier(.2,.9,.3,1); z-index: 3; box-sizing: border-box; }
.chest3d .lid::after { content: ''; position: absolute; inset: 10px 20px; border-top: 3px solid var(--metal); opacity: .6; }
.chest3d .clasp { position: absolute; left: 72px; top: 42px; width: 34px; height: 40px; background: var(--metal); border-radius: 6px; box-shadow: 0 0 16px color-mix(in srgb, var(--metal) 45%, transparent); z-index: 4; transition: opacity .2s; }
.chest3d .clasp::after { content: ''; position: absolute; background: #27180f; width: 6px; height: 17px; left: 14px; top: 11px; border-radius: 4px; }
.chest3d .inside { position: absolute; bottom: 76px; left: 8px; width: 164px; height: 26px; background: #ffdd91; border-radius: 50%; opacity: 0; filter: blur(5px); transition: opacity .35s; z-index: 2; }
.chest3d .ray { position: absolute; bottom: 98px; left: 30px; width: 120px; height: 140px; background: linear-gradient(transparent, color-mix(in srgb, var(--metal) 60%, transparent)); clip-path: polygon(0 0,100% 0,75% 100%,25% 100%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.chest3d .armor { display: none; position: absolute; bottom: 15px; left: -9px; right: -9px; height: 52px; border: 6px solid var(--metal); clip-path: polygon(0 0,30% 0,40% 20%,60% 20%,70% 0,100% 0,100% 100%,70% 100%,60% 80%,40% 80%,30% 100%,0 100%); z-index: 5; pointer-events: none; }
.chest-win[data-kind=gold] .lid { border-width: 6px; width: 182px; height: 52px; border-radius: 12px 12px 4px 4px; }
.chest-win[data-kind=gold] .body { border-width: 6px; width: 182px; height: 92px; }
.chest-win[data-kind=rare] .armor { display: block; }
.chest-win[data-kind=rare] .lid { border-radius: 4px; border-width: 5px; clip-path: polygon(0 25%,15% 25%,22% 0,78% 0,85% 25%,100% 25%,100% 100%,0 100%); height: 58px; width: 182px; }
.chest-win[data-phase=charge] .chest3d { animation: chest-shake .45s ease-in-out; }
.chest-win[data-phase=open] .lid, .chest-win[data-phase=done] .lid { transform: rotateX(-115deg) translateY(-8px); }
.chest-win[data-phase=open] .clasp, .chest-win[data-phase=done] .clasp { opacity: 0; }
.chest-win[data-phase=open] .inside, .chest-win[data-phase=done] .inside { opacity: 1; }
.chest-win[data-phase=open] .ray { opacity: .8; }
.chest-win[data-phase=open] .chest-aura, .chest-win[data-phase=done] .chest-aura { opacity: 1; }
.chest-loot { position: absolute; left: calc(50% - 48px); top: 82px; width: 96px; opacity: 0; z-index: 8; color: var(--c-text); font-size: 12px; font-weight: 900; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.loot-mark { display: grid; place-items: center; width: 44px; height: 44px; background: var(--c-panel); border: 2px solid var(--c-action); border-radius: 14px; color: var(--c-action); font-weight: 900; font-size: 20px; }
.loot-mark .gem { width: 22px; height: 22px; background: var(--c-action); transform: rotate(45deg); border: 3px solid #92f1ff; box-sizing: border-box; }
.chest-loot.fly { animation: chest-loot 1s cubic-bezier(.2,.7,.3,1) forwards; }
.chest-win[data-phase=done] .chest-loot { opacity: 1; transform: translate(var(--lx), -78px); animation: none; }
.chest-status { margin: 0; font-size: 13px; color: var(--c-text-muted); min-height: 18px; }
.chest-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 13px; color: var(--c-text); min-height: 18px; }
.chest-win .c-btn { min-width: 148px; margin-top: 4px; }
.chest-win .c-btn:disabled { opacity: .55; }
@keyframes chest-shake { 0%,100% { transform: translateX(-50%) scale(.72) rotate(0); } 25% { transform: translateX(-52%) scale(.72) rotate(-3deg); } 75% { transform: translateX(-48%) scale(.72) rotate(3deg); } }
@keyframes chest-loot { 0% { opacity: 0; transform: translate(0, 0) scale(.25); } 20% { opacity: 1; } 75%, 100% { opacity: 1; transform: translate(var(--lx), -78px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .chest-win *, .chest-win *::before, .chest-win *::after { animation: none !important; transition: none !important; } }


.rank-season { font-size: 13px; font-weight: 800; color: var(--c-text-muted); white-space: nowrap; }
.rank-screen .rank-tabs { width: 100%; flex: none; }
.rank-help { margin: 0; font-size: 13px; font-weight: 800; color: var(--c-text-muted); flex: none; }
.rank-screen .rank-me { flex: none; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; font-size: 15px; color: var(--c-text); background: var(--c-panel); }
.rank-screen .rank-me:empty { display: none; }
.rank-screen .rank-me span { font-weight: 900; }
.rank-screen .rank-list { flex: 1; min-height: 0; width: 100%; overflow-y: auto; margin: 0; padding: 4px 16px; gap: 0; }
.rank-screen .rank-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-radius: 0; background: none; border-bottom: 1px solid rgba(77,227,255,.15); }
.rank-screen .rank-list li:last-child { border-bottom: 0; }
.rank-screen .rank-list li.me { background: rgba(77,227,255,.1); outline: 0; }
.rank-screen .rank-list li.empty { display: block; color: var(--c-text-muted); font-size: 13px; }
.rank-screen .rank-list .rk { text-align: left; font-size: 16px; color: var(--c-text-muted); }
.rank-screen .rank-list li:nth-child(-n+3) .rk { color: var(--c-reward); }
.rank-screen .rank-list .nm b { display: block; font-size: 15px; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; }
.rank-screen .rank-list .nm small { display: block; font-size: 12px; color: var(--c-text-muted); }
.rank-screen .rank-list .lv { font-size: 15px; font-weight: 900; color: var(--c-text); }


.shop-screen { gap: 8px; }
.shop-head-gap { flex: 1; }
.shop-screen .c-head .screen-title { flex: 0 0 auto; }
.shop-count { flex: 1; font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.shop-tabs { flex: none; width: 100%; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs .skin-tab { flex: none; min-height: 40px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--c-line); background: var(--c-panel-deep); color: var(--c-text);
  font: 900 13px Nunito, system-ui, sans-serif; box-shadow: none; white-space: nowrap; }
.shop-tabs .skin-tab.selected { background: var(--c-action); color: var(--c-action-ink); border-color: var(--c-action); }
.shop-cols { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
.shop-screen .shop-grid { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; padding: 2px; margin: 0; }
.shop-screen .skin-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 18px; border: 1.5px solid rgba(77,227,255,.25);
  background: var(--c-panel); box-shadow: none; }
.shop-screen .skin-card canvas { width: 46px; height: 46px; }
.shop-screen .skin-card > span { font-size: 12px; font-weight: 900; color: var(--c-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-screen .skin-card .skin-state { font-size: 11px; font-weight: 800; color: var(--c-text-muted); }
.shop-screen .skin-card.selected { border-color: var(--c-action); box-shadow: 0 0 10px rgba(77,227,255,.3); }
.shop-screen .skin-card.locked canvas { filter: saturate(.55) brightness(.8); }
.shop-screen .skin-card.previewing { border-color: var(--c-reward); }
.shop-screen .skin-duo { grid-column: span 2; }
.shop-preview { min-height: 0; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; overflow: hidden; }
.shop-preview canvas { width: 96px; height: 96px; flex: none; }
.shop-preview b { font-size: 16px; color: var(--c-text); margin-top: 4px; }
.shop-preview span { font-size: 12px; color: var(--c-text-muted); }
.shop-preview .shop-msg { margin: 2px 0 0; font-size: 11px; min-height: 0; }
.shop-preview .c-btn { margin-top: auto; width: 100%; }
@media (orientation: portrait) { .shop-cols { grid-template-columns: 1fr; } .shop-preview { display: none; } }
.shop-screen .skin-card { aspect-ratio: auto; height: auto; }
.shop-screen .skin-card > * { flex-shrink: 0; line-height: 1.25; }
.shop-screen .skin-grid.color-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px; }
.shop-screen .color-swatch { width: 48px; justify-self: center; }
.shop-screen .shop-grid { grid-auto-rows: max-content; }


#account { z-index: 22; }
.account-cols { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.account-main, .account-admin { padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.account-who { display: flex; align-items: center; gap: 12px; }
.account-who canvas { width: 60px; height: 60px; border-radius: 50%; flex: none; }
.account-who b { display: block; font-size: 20px; color: var(--c-text); }
.account-who span { font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.account-desc { margin: 0; font-size: 13px; font-weight: 800; color: var(--c-text-muted); text-align: left; }
.account-screen .account-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.account-screen .account-form[hidden] { display: none; }
.account-fields, .account-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.account-screen .account-btns .c-btn[hidden] { display: none; }
.account-screen .account-msg { margin: 0; font-size: 12px; min-height: 0; }
.account-admin h2 { margin: 0; font-size: 16px; font-weight: 900; color: var(--c-text); text-align: left; }
.c-btn.c-danger { color: var(--c-danger); border-color: rgba(255,122,96,.45); }
.c-btn[hidden] { display: none; }
@media (orientation: portrait) { .account-cols { grid-template-columns: 1fr; overflow-y: auto; } }


.dead-screen { z-index: 15; }
.dead-panel { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.dead-panel h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--c-text); }
.dead-stats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; }
.dead-stats > div { text-align: center; background: var(--c-panel-deep); border-radius: 14px; padding: 10px 6px; }
.dead-stats > div[hidden] { display: none; }
.dead-stats b { display: block; font-size: 22px; color: var(--c-text); }
.dead-stats span { font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.dead-btns { display: flex; gap: 16px; }
.dead-btns .c-btn { min-width: 96px; }


.hub-orbit { --s: calc(var(--u) * 31); }
.orb-play, .orb-profile, .orb-shop, .orb-rank { width: var(--s); height: var(--s); }
.orb-play { gap: calc(var(--u) * 2); }
.orb-play-title { font-size: calc(var(--u) * 6.5); }
.orb-play-sub { white-space: normal; font-size: calc(var(--u) * 2.7); }
.orb-profile { left: calc(50% - var(--s) - var(--u) * 7); top: 54.4%; }
.orb-shop { left: calc(50% + var(--s) + var(--u) * 7); top: calc(54.4% - var(--s) / 2 - var(--u) * 2); }
.orb-rank { left: calc(50% + var(--s) + var(--u) * 7); top: calc(54.4% + var(--s) / 2 + var(--u) * 2); }
.orb-profile canvas { width: calc(var(--u) * 9); }
.orb-sat-title { font-size: calc(var(--u) * 4); }


.hub-orbit { --s: min(calc(var(--u) * 36), 42vw); --g: calc(var(--u) * 3.5); }
.orb-play, .orb-profile, .orb-shop, .orb-rank { width: var(--s); height: var(--s); }
.orb-play { background: var(--c-panel); color: var(--c-text); border: 1.5px solid var(--c-line); box-shadow: 0 5px 12px rgba(0,0,0,.2); gap: calc(var(--u) * 1.4); }
.orb-play:active { box-shadow: 0 5px 12px rgba(0,0,0,.2); }
.orb-play svg { width: calc(var(--u) * 8.5); height: auto; color: var(--c-action); }
.orb-play-title { font-size: calc(var(--u) * 5); }
.orb-play-sub { color: var(--c-text-muted); font-size: calc(var(--u) * 3); }
.orb-sat-title { font-size: calc(var(--u) * 5); }
.orb-sat-sub { font-size: calc(var(--u) * 3.2); }
.orb-sat svg { width: calc(var(--u) * 8.5); }
.orb-profile canvas { width: calc(var(--u) * 10); }
.orb-profile { left: calc(50% - var(--s) / 2 - var(--g) / 2); top: calc(55% - var(--s) / 2 - var(--g) / 2); }
.orb-play { left: calc(50% + var(--s) / 2 + var(--g) / 2); top: calc(55% - var(--s) / 2 - var(--g) / 2); }
.orb-shop { left: calc(50% - var(--s) / 2 - var(--g) / 2); top: calc(55% + var(--s) / 2 + var(--g) / 2); }
.orb-rank { left: calc(50% + var(--s) / 2 + var(--g) / 2); top: calc(55% + var(--s) / 2 + var(--g) / 2); }
.orb-ellipse { display: none; }


#welcome { z-index: 21; align-items: center; justify-content: center; }
.welcome-box { width: min(320px, 100%); display: flex; flex-direction: column; gap: 10px; }
.welcome-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.welcome-brand img { width: 64px; height: 64px; }
.welcome-brand h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--c-text); }
.welcome-brand p { margin: 0; font-size: 14px; font-weight: 800; color: var(--c-text-muted); }
.welcome-box .c-btn { width: 100%; }
.welcome-note { margin: 4px 0 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--c-text-muted); }


.shop-cols { grid-template-columns: minmax(0, 1fr); }
.shop-preview { display: none; }
.shop-screen .shop-grid { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; align-items: stretch; padding: 4px 2px 8px;
  scroll-snap-type: x proximity; touch-action: pan-x; overscroll-behavior-x: contain; }
.shop-screen .shop-grid .skin-card { flex: 0 0 auto; width: clamp(140px, 22vw, 190px); justify-content: center; gap: 8px; padding: 12px 8px; scroll-snap-align: start; }
.shop-screen .shop-grid .skin-card canvas { width: clamp(96px, 34vh, 150px); height: clamp(96px, 34vh, 150px); }
.shop-screen .shop-grid .skin-card > span { font-size: 15px; }
.shop-screen .shop-grid .skin-card .skin-state { font-size: 12px; }
.shop-screen .shop-grid .skin-duo { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.shop-screen .shop-grid .skin-duo-pair { display: flex; gap: 8px; flex: 1; }
.shop-screen .shop-grid .skin-duo-title { font-size: 13px; font-weight: 900; color: var(--c-text-muted); text-align: center; }
.shop-screen .shop-grid.color-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 64px); grid-auto-columns: 64px; grid-template-columns: none; gap: 12px; align-content: center; }
.shop-screen .shop-grid.color-grid .color-swatch { width: 64px; }
.shop-screen .shop-grid::-webkit-scrollbar { height: 4px; } .shop-screen .shop-grid::-webkit-scrollbar-thumb { background: var(--c-action-base); border-radius: 4px; }
.shop-bar { flex: none; width: 100%; display: flex; align-items: center; gap: 12px; }
.shop-bar .shop-msg { flex: 1; margin: 0; font-size: 12px; min-height: 0; text-align: left; }
.shop-bar .c-btn { min-width: 160px; }
.shop-screen .shop-grid .color-note { display: none; }
.shop-screen .shop-grid.color-grid { grid-template-rows: repeat(3, 54px); grid-auto-columns: 54px; }
.shop-screen .shop-grid.color-grid .color-swatch { width: 54px; }
.shop-screen .shop-grid .skin-duo .skin-card { width: clamp(118px, 17vw, 150px); padding: 8px 6px; gap: 4px; }
.shop-screen .shop-grid .skin-duo .skin-card canvas { width: clamp(70px, 22vh, 104px); height: clamp(70px, 22vh, 104px); }
.shop-screen .shop-grid .skin-duo { padding: 6px; border-radius: 18px; border: 1px solid rgba(77,227,255,.2); background: none; }


.play-settings { justify-content: space-between; gap: 10px; padding: 14px; }
.play-row { flex: 1 1 0; grid-template-columns: 84px minmax(0, 1fr); max-height: 76px; }
.play-row .c-field, .play-row .c-choice .mode-btn, .play-settings .skin-bar, .play-mass-num { height: 100%; min-height: 48px; max-height: 64px; font-size: 16px; }
.play-row > label { font-size: 15px; }
.play-settings .skin-bar canvas { width: 44px; height: 44px; }
.play-settings .server-name { flex: none; }
.play-actions { gap: 10px; overflow: hidden; }
.play-actions .play-main { flex: 1.3 1 0; min-height: 56px; max-height: 96px; font-size: 20px; border-radius: 22px; }
.play-actions .play-pair { flex: 1 1 0; min-height: 52px; max-height: 80px; }
.play-actions .play-pair .c-btn, .play-actions .play-ranked { font-size: 15px; height: 100%; }
.play-actions .play-ranked { flex: 1 1 0; min-height: 52px; max-height: 80px; }
.play-actions .play-ranked .tile-sub { font-size: 12px; }
.play-actions .play-join { flex: none; }
.play-actions .play-lobbies { flex: 1.4 1 0; min-height: 0; overflow-y: auto; }
.play-actions .error:empty { display: none; }
.play-actions .play-main { flex: 1 1 0; }
.play-actions .play-lobbies { flex: 2 1 0; min-height: 96px; }


#br-group { z-index: 18; }
.duo-modes { flex: none; width: 100%; }
.duo-none { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-none[hidden] { display: none; }
.duo-box { padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.duo-box h2 { margin: 0; font-size: 20px; font-weight: 900; color: var(--c-text); }
.duo-box p { margin: 0; font-size: 13px; font-weight: 800; color: var(--c-text-muted); }
.duo-box .c-field, .duo-box .c-btn { width: 100%; }
.duo-box .code-input { text-align: center; letter-spacing: 3px; }
.duo-box .code-input::placeholder { letter-spacing: 0; }
.duo-in { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.duo-in[hidden] { display: none; }
.duo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-slot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 84px; }
.duo-slot.ready { border-color: rgba(109,255,168,.45); }
.duo-slot.empty { border-style: dashed; justify-content: center; text-align: center; }
.duo-slot canvas { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.duo-slot b { display: block; font-size: 20px; color: var(--c-text); }
.duo-slot b small { font-size: 12px; color: var(--c-text-muted); }
.duo-slot span { display: block; font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.duo-slot em { display: block; font-style: normal; font-size: 14px; font-weight: 900; color: var(--c-reward); }
.duo-slot.ready em { color: var(--c-mate); }
.duo-invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 800; color: var(--c-text); }
.duo-invite strong { letter-spacing: 2px; }
.duo-queue { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.duo-queue[hidden] { display: none; }
.duo-queue > div { flex: 1; }
.duo-queue b { display: block; font-size: 16px; color: var(--c-text); }
.duo-queue span { font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.duo-actions { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.duo-actions[hidden] { display: none; }
.duo-actions .c-btn { flex: 1; }
.duo-actions #br-leave { flex: 0 0 auto; min-width: 160px; }
.duo-note { font-size: 12px; font-weight: 800; color: var(--c-text-muted); max-width: 90px; }
.duo-note[hidden] { display: none; }
.duo-msg { flex: none; margin: 0; font-size: 12px; min-height: 0; }
@media (orientation: portrait) { .duo-none, .duo-slots { grid-template-columns: 1fr; } }


.br-end-screen { z-index: 16; }
.br-end-sub-row { flex: none; width: 100%; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--c-text); }
.br-end-sub-row span { font-weight: 800; color: var(--c-text-muted); }
.br-end-body { flex: 1; min-height: 0; width: 100%; display: flex; gap: 12px; }
.br-end-screen .br-end-list { flex: 1; min-height: 0; max-height: none; margin: 0; padding: 8px 16px; overflow-y: auto; }
.br-end-screen .br-end-list li { padding: 8px 10px; border-radius: 12px; font-size: 15px; font-weight: 800; justify-content: space-between; border-bottom: 1px solid rgba(77,227,255,.12); }
.br-end-screen .br-end-list li.me { background: rgba(77,227,255,.14); border: 1px solid var(--c-line); }
.br-end-screen .br-end-list li span:nth-child(2) { flex: 1; }
.br-end-screen .br-rp { width: 260px; flex: none; justify-content: center; }
.br-end-screen .br-rp[hidden] { display: none; }
.br-end-btns { flex: none; width: 100%; display: flex; gap: 12px; }
.br-end-btns .c-primary { flex: 1; }
.br-end-btns .c-btn:not(.c-primary) { min-width: 120px; }


.br-status { padding: 8px 16px; border-radius: 14px; background: var(--c-panel); border: 1.5px solid rgba(255,122,96,.45); font-size: 14px; }
.br-mate { display: flex; gap: 24px; justify-content: space-between; min-width: 180px; padding: 6px 14px; border-radius: 14px; background: var(--c-panel); border: 1.5px solid rgba(109,255,168,.45); color: var(--c-mate); font-size: 14px; }


.hub-orbit { --s: min(calc((100vh - 44px) / 2), 31vw); --g: 12px; }
.orb-profile, .orb-play, .orb-shop, .orb-rank { --cy: 50%; }
.orb-profile, .orb-shop { left: calc(50% - var(--s) / 2 - var(--g) / 2); }
.orb-play, .orb-rank { left: calc(50% + var(--s) / 2 + var(--g) / 2); }
.orb-profile, .orb-play { top: calc(50% - var(--s) / 2 - var(--g) / 2); }
.orb-shop, .orb-rank { top: calc(50% + var(--s) / 2 + var(--g) / 2); }
.orb-sat-title, .orb-play-title { font-size: calc(var(--s) * .14); }
.orb-sat-sub, .orb-play-sub { font-size: calc(var(--s) * .085); }
.orb-sat svg, .orb-play svg { width: calc(var(--s) * .24); }
.orb-profile canvas { width: calc(var(--s) * .28); }
.orb-xp-sat { height: calc(var(--s) * .05); }
.hub-head { pointer-events: none; }


.play-skin { display: flex; gap: 8px; min-width: 0; height: 100%; }
.play-skin .skin-bar { flex: 1; min-width: 0; }
.play-skin .skin-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-noskin { flex: none; height: 100%; min-height: 48px; max-height: 64px; padding: 0 12px; font-size: 14px; }
.play-noskin.selected { border-color: var(--c-action); background: #102e47; color: var(--c-action); }

.hub-orbit { --s: min(calc((100vh - 44px) / 2 * .86), 27vw); }


#modes { z-index: 12; }
.modes-row { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.mode-tile { --t: min(calc(100vh - 150px), 28vw); width: var(--t); height: var(--t); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; color: var(--c-text); font-family: Nunito, system-ui, sans-serif; text-align: center; }
.mode-tile:active { transform: scale(.97); }
.mode-tile svg { width: calc(var(--t) * .26); color: var(--c-action); }
.mode-tile b { font-size: calc(var(--t) * .12); font-weight: 900; }
.mode-tile span { font-size: calc(var(--t) * .065); font-weight: 800; color: var(--c-text-muted); line-height: 1.3; }
.mode-tile .tile-sub { font-size: calc(var(--t) * .06); font-weight: 800; color: var(--c-reward); }
@media (orientation: portrait) { .modes-row { flex-direction: column; } .mode-tile { --t: min(26vh, 70vw); } }


.play-cols { display: block; overflow-y: auto; overscroll-behavior: contain; }
.play-settings, .play-actions { width: min(560px, 100%); margin: 0 auto; overflow: visible; }
.play-settings { justify-content: flex-start; gap: 10px; }
.play-row { flex: none; max-height: none; }
.play-row .c-field, .play-row .c-choice .mode-btn, .play-settings .skin-bar, .play-mass-num, .play-noskin { height: 52px; max-height: none; }
.play-skin { height: auto; }
.play-actions { margin-top: 12px; padding-bottom: 12px; }
.play-actions .play-main { flex: none; height: 60px; max-height: none; }
.play-actions .play-pair, .play-actions .play-ranked { flex: none; height: 56px; max-height: none; }
.play-actions .play-lobbies { flex: none; min-height: 0; overflow: visible; }
.play-settings .server-name { text-align: center; }


#ranked-modes { z-index: 14; }
.mode-tile.off { opacity: .5; }
.mode-tile.off svg { color: var(--c-text-muted); }
.mode-tile.off .tile-sub { color: var(--c-text-muted); }
#br-modes { display: none; }


#br-group { overflow-y: auto; overscroll-behavior: contain; }
#br-group > :not(.c-head) { width: min(560px, 100%); margin-left: auto; margin-right: auto; flex: none; }
#br-group .duo-none { display: flex; flex-direction: column; gap: 12px; }
#br-group .duo-none[hidden], #br-group .duo-in[hidden] { display: none; }
#br-group .duo-box { padding: 14px 16px; gap: 10px; }
#br-group .duo-in { gap: 12px; }
#br-group .duo-slots { grid-template-columns: 1fr; gap: 10px; }
#br-group .duo-queue, #br-group .duo-actions { margin-top: 0; }
#br-group .duo-actions { flex-wrap: wrap; }
#br-group .duo-actions .c-btn { min-height: 52px; }
#br-group .duo-actions #br-leave { flex: 1 1 100%; }
#br-group .rank-help { text-align: center; }
#br-group, .play-cols { scrollbar-width: thin; scrollbar-color: var(--c-action-base) transparent; }
#br-group::-webkit-scrollbar, .play-cols::-webkit-scrollbar { width: 4px; }
#br-group::-webkit-scrollbar-thumb, .play-cols::-webkit-scrollbar-thumb { background: var(--c-action-base); border-radius: 4px; }


.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shop-screen .shop-grid .emote-card img { width: clamp(96px, 34vh, 150px); height: clamp(96px, 34vh, 150px); object-fit: contain; }
.shop-screen .shop-grid .emote-card.locked img { filter: saturate(.55) brightness(.8); }


#hud .emote-panel { grid-template-columns: 54px; max-height: calc(var(--sh) - 80px); padding: 8px; gap: 6px; background: var(--c-panel); border: 1.5px solid var(--c-line); }
body.small-screen #hud .emote-panel { grid-template-columns: 44px; }

.profile-inv .inv-emote { cursor: pointer; font: inherit; }
.profile-inv .inv-emote.equipped { border-color: var(--c-action); background: #102e47; box-shadow: 0 0 10px rgba(77,227,255,.3); }
.profile-inv .inv-emote span { font-size: 11px; line-height: 1.2; } .profile-inv .inv-grid.inv-emotes { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.shop-soon { margin: auto; font-size: 16px; font-weight: 800; color: var(--c-text-muted); }


.vote-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.vote-btn { width: 40px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1.5px solid var(--c-line); background: var(--c-panel-deep); color: var(--c-text-muted); font-size: 14px; }
.vote-btn.on { border-color: var(--c-action); color: var(--c-action); background: #102e47; }
.vote-score { min-width: 28px; text-align: center; font-size: 14px; color: var(--c-text-muted); }
.vote-score.pos { color: var(--c-mate); } .vote-score.neg { color: var(--c-danger); }

.shop-screen .shop-grid .skin-card:has(.vote-bar) { gap: 4px; padding: 8px 8px 10px; }
.shop-screen .shop-grid .skin-card:has(.vote-bar) canvas, .shop-screen .shop-grid .skin-card:has(.vote-bar) img { width: clamp(80px, 26vh, 120px); height: clamp(80px, 26vh, 120px); }
.shop-screen .shop-grid .skin-card:has(.vote-bar) > span { font-size: 13px; }


.wait-bar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px;
  border-radius: 16px; background: var(--c-panel); border: 1.5px solid var(--c-line); color: var(--c-text); font-weight: 800; font-size: 14px; white-space: nowrap; }
.wait-bar .c-btn { min-height: 40px; font-size: 13px; }
.wait-bar .c-btn[hidden] { display: none; }
.wait-bar { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }


.shop-screen .shop-grid .empty-slot { border-style: dashed; justify-content: center; }
.shop-screen .shop-grid .empty-slot .slot-ring { width: clamp(96px, 34vh, 150px); height: clamp(96px, 34vh, 150px); border-radius: 50%; border: 2px dashed rgba(77,227,255,.35);
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 900; color: var(--c-text-muted); }
.shop-screen .shop-grid .empty-slot.locked { opacity: .55; }
.shop-screen .skin-card.locked canvas { filter: grayscale(.45) brightness(.45); }


.account-photo { display: flex; align-items: center; gap: 10px; }
.acc-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-line); flex: none; }
.acc-photo[hidden] { display: none; }
.account-photo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.account-photo-txt b { font-size: 14px; color: var(--c-text); }
.account-photo-txt span { font-size: 11px; font-weight: 800; color: var(--c-text-muted); }
.account-photo .c-btn { min-height: 40px; padding: 6px 12px; cursor: pointer; }
.play-pair .c-btn:disabled { opacity: .45; }


.shop-screen .shop-grid .store-card { position: relative; }
.shop-screen .shop-grid .store-card .store-art { width: clamp(84px, 28vh, 130px); height: clamp(84px, 28vh, 130px); flex: none; }
.shop-screen .shop-grid .store-card .store-info { font-size: 11px; font-weight: 800; color: var(--c-text-muted); max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.shop-screen .shop-grid .store-card .store-price { font-size: 15px; font-weight: 900; color: var(--c-action); }
.store-tag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--c-reward); color: var(--c-reward-ink); font-size: 10px; font-style: normal; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.store-bonus { position: absolute; top: 34px; right: 8px; padding: 2px 6px; border-radius: 8px; background: rgba(109,255,168,.18); color: #6dffa8; font-size: 11px; font-style: normal; font-weight: 900; }


.shop-kinds { display: flex; gap: 6px; flex: none; padding: 4px; border-radius: 999px; background: var(--c-panel-deep, #0b1530); border: 1.5px solid rgba(77,227,255,.25); }
.shop-kind-btn { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--c-text-muted); font: 900 15px Nunito, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; white-space: nowrap; }
.shop-kind-btn.selected { background: var(--c-action); color: #04223a; }


.bal-plus { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--c-action); color: #04223a; font: 900 22px/1 Nunito, system-ui, sans-serif; cursor: pointer; flex: none; box-shadow: 0 0 10px rgba(77,227,255,.35); }
.bal-plus:active { transform: scale(.92); }
#store-title { flex: none; }


.hub-head button { pointer-events: auto; }


.chest-mini { --metal: #ff9a3d; --k: .5; position: relative; display: block; width: calc(190px * var(--k)); height: calc(140px * var(--k)); flex: none; }
.chest-mini[data-kind=gold] { --metal: #ffd34d; }
.chest-mini[data-kind=rare] { --metal: #ff7a3d; }
.chest-mini .chest3d { bottom: 0; transform: translateX(-50%) scale(var(--k)); }
.chest-mini .chest3d .body { box-shadow: 0 8px 10px #0007; }
.chest-mini[data-kind=gold] .lid { border-width: 6px; width: 182px; height: 52px; border-radius: 12px 12px 4px 4px; }
.chest-mini[data-kind=gold] .body { border-width: 6px; width: 182px; height: 92px; }
.chest-mini[data-kind=rare] .armor { display: block; }
.chest-mini[data-kind=rare] .lid { border-radius: 4px; border-width: 5px; clip-path: polygon(0 25%,15% 25%,22% 0,78% 0,85% 25%,100% 25%,100% 100%,0 100%); height: 58px; width: 182px; }
.chest-mini.tiny { --k: .2; }
.shop-screen .shop-grid .store-card .chest-mini.store-art { --k: .62; width: clamp(84px, 28vh, 130px); height: clamp(84px, 28vh, 130px); }
.rn-chest .chest-mini { margin-top: 2px; }
.rn-chest.opened .chest-mini, .rn-chest.locked .chest-mini { filter: saturate(.4) brightness(.8); }


.hub-daily { position: absolute; top: calc(max(24px, env(safe-area-inset-top)) + 56px); right: max(32px, env(safe-area-inset-right)); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 8px; border-radius: 999px; border: 1.5px solid rgba(255,211,77,.55); background: rgba(255,211,77,.1); color: var(--c-text); font: 900 14px Nunito, system-ui, sans-serif; cursor: pointer; }
.hub-daily[hidden] { display: none; }
.hub-daily-chest { width: 40px; height: 32px; }
.hub-daily-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-reward); box-shadow: 0 0 10px var(--c-reward); }
.hub-daily-dot[hidden] { display: none; }


#daily { z-index: 29; display: flex; align-items: center; justify-content: center; padding: 12px; }
#daily[hidden] { display: none; }
.daily-win { width: min(760px, 100%); padding: 14px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.daily-win h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--c-text); text-transform: uppercase; letter-spacing: 1px; }
.daily-sub { margin: 0; font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.daily-days { display: grid; grid-template-columns: repeat(6, 1fr) 1.35fr; gap: 8px; width: 100%; margin: 6px 0 2px; }
.daily-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid rgba(77,227,255,.22); background: var(--c-panel-deep, #0b1530); min-height: 118px; }
.daily-day b { font-size: 11px; font-weight: 900; color: var(--c-text-muted); text-transform: uppercase; }
.daily-day > span:last-of-type { font-size: 12px; font-weight: 900; color: var(--c-text); line-height: 1.15; }
.daily-day.big { border-color: rgba(255,211,77,.5); }
.daily-day.today { border-color: var(--c-action); box-shadow: 0 0 14px rgba(77,227,255,.35); }
.daily-day.today b { color: var(--c-action); }
.daily-day.done { opacity: .5; }
.daily-day.today.done { opacity: 1; }
.daily-check { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: #6dffa8; color: #05261a; font-style: normal; font-size: 13px; font-weight: 900; line-height: 20px; }
.daily-art { width: 52px; height: 52px; flex: none; }
.daily-day .chest-mini.daily-art { --k: .36; width: 70px; height: 52px; }
.daily-boost { display: grid; place-items: center; border-radius: 14px; border: 2px solid var(--c-action); color: var(--c-action); font-size: 20px; font-weight: 900; width: 46px; height: 46px; }
.daily-msg { margin: 0; min-height: 18px; font-size: 13px; font-weight: 900; color: #6dffa8; }
.daily-actions { display: flex; gap: 10px; }
.daily-actions .c-btn { min-width: 150px; }
@media (max-width: 560px) { .daily-days { grid-template-columns: repeat(4, 1fr); } .daily-day.big { grid-column: span 2; } }
.chest-mini.hub-daily-chest { --k: .21; }
.chest-mini .chest3d, .chest-mini .chest3d > span:not(.armor) { display: block; }
.chest-mini .chest3d > .body, .chest-mini .chest3d > .lid { left: 0; }
.chest-mini { overflow: visible !important; }


#buy-confirm { z-index: 40; display: flex; align-items: center; justify-content: center; padding: 12px; }
#buy-confirm[hidden] { display: none; }
.buy-confirm { width: min(440px, 100%); padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.buy-confirm canvas, .buy-confirm img { width: 96px; height: 96px; object-fit: contain; }
.buy-confirm canvas[hidden], .buy-confirm img[hidden] { display: none; }
.buy-confirm h2 { margin: 4px 0 0; font-size: 18px; font-weight: 900; color: var(--c-text); }
.buy-confirm-txt { margin: 0 0 6px; font-size: 15px; font-weight: 900; color: var(--c-action); }


.hub-quests { top: calc(max(24px, env(safe-area-inset-top)) + 112px); border-color: rgba(77,227,255,.5); background: rgba(77,227,255,.08); padding: 4px 14px; }
.hub-quests-ico { font-size: 22px; color: var(--c-action); width: 28px; text-align: center; }
.hub-quests b { margin-left: 2px; padding: 2px 8px; border-radius: 999px; background: rgba(77,227,255,.18); color: var(--c-action); font-size: 13px; }
.hub-quests.all-done b { background: rgba(109,255,168,.2); color: #6dffa8; }
.quests-win { width: min(620px, 100%); }
.quests-list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 6px 0; }
.quest { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid rgba(77,227,255,.22); background: var(--c-panel-deep, #0b1530); text-align: left; }
.quest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quest-main b { font-size: 14px; font-weight: 900; color: var(--c-text); }
.quest-main small { font-size: 12px; font-weight: 800; color: var(--c-text-muted); }
.quest-bar { display: block; height: 8px; border-radius: 4px; background: rgba(77,227,255,.15); overflow: hidden; }
.quest-bar i { display: block; height: 100%; background: var(--c-action); border-radius: 4px; }
.quest-reward { flex: none; font-size: 15px; font-weight: 900; color: var(--c-action); min-width: 64px; text-align: right; }
.quest.done { border-color: rgba(109,255,168,.5); }
.quest.done .quest-bar i { background: #6dffa8; }
.quest.done .quest-reward { color: #6dffa8; font-size: 20px; }
.quest-bonus { border-color: rgba(255,122,61,.5); }
.quest-bonus .chest-mini.quest-chest { --k: .26; }
.dead-quests { margin: 6px 0 0; font-size: 13px; font-weight: 900; color: #6dffa8; text-align: center; }
.dead-quests[hidden] { display: none; }
.quests-win { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 10px 16px 12px; gap: 4px; }
.quests-win h2 { font-size: 18px; }
.quests-list { gap: 6px; margin: 4px 0; }
.quest { padding: 6px 12px; gap: 10px; }
.quest-main { gap: 3px; }
.quest-main b { font-size: 13px; }
.quest-main small { font-size: 11px; }
.quest-bar { height: 6px; }
.quest-reward { font-size: 14px; }
.quest-bonus .chest-mini.quest-chest { --k: .2; }
.quests-win .c-btn { min-height: 40px; }
.quest-reward .chest-mini { --k: .2; margin-left: auto; }


#season-end { z-index: 31; display: flex; align-items: center; justify-content: center; padding: 12px; }
#season-end[hidden] { display: none; }
.season-win { width: min(560px, 100%); }
.season-win #season-end-league { font-size: 15px; color: var(--c-action); }
.season-gifts { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.season-gift { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 130px; padding: 10px; border-radius: 14px; border: 1.5px solid rgba(77,227,255,.3); background: var(--c-panel-deep, #0b1530); }
.season-gift b { font-size: 14px; font-weight: 900; color: var(--c-text); }
.season-gift span { font-size: 11px; font-weight: 900; color: #ffd34d; text-transform: uppercase; }
.season-gift.collector { border-color: rgba(255,211,77,.7); box-shadow: 0 0 16px rgba(255,211,77,.3); }
.season-gift canvas { width: 80px; height: 80px; }


.tiers-open { min-height: 40px; padding: 6px 16px; margin-left: auto; }
#tiers { z-index: 31; display: flex; align-items: center; justify-content: center; padding: 12px; }
#tiers[hidden] { display: none; }
.tiers-win { width: min(760px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 10px 16px 12px; gap: 4px; }
.tiers-win h2 { font-size: 18px; }
.tiers-me { margin: 0; font-size: 13px; font-weight: 900; color: var(--c-action); }
.tiers-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin: 4px 0; }
.tier { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--tier) 45%, transparent); background: var(--c-panel-deep, #0b1530); text-align: left; }
.tier b { flex: 1; font-size: 14px; font-weight: 900; color: var(--tier); }
.tier-gem { width: 14px; height: 14px; transform: rotate(45deg); background: var(--tier); box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 60%, transparent); flex: none; }
.tier-from { font-size: 11px; font-weight: 800; color: var(--c-text-muted); }
.tier-reward { min-width: 70px; text-align: right; font-size: 13px; font-weight: 900; color: var(--c-action); }
.tier.mine { box-shadow: 0 0 14px color-mix(in srgb, var(--tier) 55%, transparent); border-width: 2.5px; }
.tier.nova { grid-column: span 2; background: linear-gradient(90deg, rgba(77,227,255,.12), rgba(180,123,255,.12), rgba(255,95,168,.12)); }
.tier.nova b { background: linear-gradient(90deg, #4de3ff, #b47bff, #ff5fa8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tiers-coll-title { margin: 4px 0 2px; font-size: 12px; font-weight: 900; color: #ffd34d; text-transform: uppercase; }
.tiers-coll-row { display: flex; justify-content: center; gap: 14px; }
.tiers-coll { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tiers-coll canvas { width: 54px; height: 54px; }
.tiers-coll b { font-size: 12px; font-weight: 900; color: #ffd34d; }
.tiers-coll span { font-size: 11px; font-weight: 800; color: var(--c-text-muted); }


.account-mail { display: flex; flex-direction: column; gap: 6px; }
.account-mail[hidden] { display: none; }
.account-mail .account-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.account-mail .account-fields[hidden] { display: none; }
.account-mail .c-field { flex: 1 1 160px; min-width: 0; }
.account-mail .code-input { flex: 0 1 150px; letter-spacing: 3px; }
#acc-forgot, #reset-cancel, #mail-change, #mail-resend { align-self: flex-start; font-size: 13px; }
#mail-change[hidden], #acc-forgot[hidden] { display: none; }


.history-list { list-style: none; margin: 4px 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.history-list li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; background: var(--c-panel-deep, #0b1530); text-align: left; }
.history-list .h-date { flex: none; width: 92px; font-size: 11px; font-weight: 800; color: var(--c-text-muted); }
.history-list b { flex: 1; min-width: 0; font-size: 13px; font-weight: 900; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-list .h-delta { flex: none; font-size: 13px; font-weight: 900; color: #6dffa8; }
.history-list .h-delta.neg { color: #ff7b8f; }
.history-list .history-empty { justify-content: center; color: var(--c-text-muted); }
#history { z-index: 31; display: flex; align-items: center; justify-content: center; padding: 12px; }
#history[hidden] { display: none; }
.acc-delete { align-self: flex-start; font-size: 12px; color: #ff7b8f; opacity: .8; }
.acc-delete[hidden] { display: none; }


.chest-mini { --k: .5; width: calc(190px * var(--k)); height: calc(190px * var(--k)); }
.chest-mini > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); pointer-events: none; }
.chest-mini.tiny { --k: .22; }
.rn-chest .chest-mini { margin-top: 0; }
.hub-daily .chest-mini.hub-daily-chest { --k: .22; }
.daily-day .chest-mini.daily-art { --k: .34; width: 64px; height: 64px; }
.quest-reward .chest-mini, .quest-bonus .chest-mini.quest-chest { --k: .22; }
.chest-art { position: absolute; left: 50%; bottom: 0; width: 150px; height: 150px; transform: translateX(-50%); transform-origin: center bottom; }
.chest-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); transition: opacity .25s ease, transform .5s cubic-bezier(.2,.9,.3,1); }
.chest-img.open { opacity: 0; transform: scale(.96); }
.chest-win[data-phase=open] .chest-img.closed, .chest-win[data-phase=done] .chest-img.closed { opacity: 0; }
.chest-win[data-phase=open] .chest-img.open, .chest-win[data-phase=done] .chest-img.open { opacity: 1; transform: scale(1.04); }
.chest-win[data-phase=charge] .chest-art { animation: chest-shake-img .45s ease-in-out; }
@keyframes chest-shake-img { 0%,100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-52%) rotate(-4deg); } 75% { transform: translateX(-48%) rotate(4deg); } }
.chest-scene { height: 200px; }
.chest-art { width: 128px; height: 128px; }
.chest-loot { top: 128px; }
.chest-loot.fly { animation-name: chest-loot-img; }
@keyframes chest-loot-img { 0% { opacity: 0; transform: translate(0, 0) scale(.25); } 20% { opacity: 1; } 75%, 100% { opacity: 1; transform: translate(var(--lx), -126px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .chest-loot.fly { opacity: 1; transform: translate(var(--lx), -126px); } }
.chest-art { width: 104px; height: 104px; }
.chest-loot { top: 140px; }
@keyframes chest-loot-img { 0% { opacity: 0; transform: translate(0, 0) scale(.25); } 20% { opacity: 1; } 75%, 100% { opacity: 1; transform: translate(var(--lx), -140px) scale(1); } }
.rn-chest.opened .chest-mini, .rn-chest.locked .chest-mini { filter: saturate(.7) brightness(.95); }
.chest-win[data-phase=done] .chest-loot { transform: translate(var(--lx), -140px); }


.tier-badge { display: inline-block; vertical-align: middle; object-fit: contain; flex: none; pointer-events: none; }
.tier-row-badge { width: 40px; height: 40px; margin: -6px 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tier) 50%, transparent)); }
.tier.nova .tier-row-badge { width: 48px; height: 48px; }
.tier-inline { width: 22px; height: 22px; margin: -4px 4px -4px 0; }
.tier-me { width: 44px; height: 44px; margin: -8px 8px -8px 0; }
#ranking-me { display: flex; align-items: center; }
.tier-end { width: 56px; height: 56px; margin: -10px 8px -10px 0; }
.tier-end.up { animation: tier-up 1.2s ease-out; }
@keyframes tier-up { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.25) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tier-end.up { animation: none; } }


.mystery { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mystery canvas { filter: blur(6px) grayscale(.6) brightness(.32) !important; }
.skin-lock { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); display: grid; place-items: center; color: #e8f6ff; pointer-events: none; }
.skin-lock svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.rn-skin .mystery canvas { width: 36px; height: 36px; border-radius: 50%; }
.rn-skin .skin-lock { width: 56%; height: 56%; }
.road-d-skin.mystery { position: relative; }
.road-d-skin.mystery canvas { filter: blur(3px) grayscale(.6) brightness(.32) !important; }


.loot-mark.loot-skin { border-color: #ffd34d; box-shadow: 0 0 14px rgba(255,211,77,.6); padding: 2px; }
.loot-mark.loot-skin canvas { width: 100%; height: 100%; border-radius: 50%; }

#buy-yes:disabled { opacity: .45; }
#buy-money[hidden] { display: none; }
.buy-confirm .daily-actions { flex-wrap: wrap; justify-content: center; }


.boost-active { margin: 0; padding: 6px 12px; border-radius: 12px; background: rgba(255,154,61,.14); border: 1.5px solid rgba(255,154,61,.5); color: #ffb672; font-size: 13px; font-weight: 900; }
.boost-active[hidden] { display: none; }


.diamond { width: 22px; height: 22px; border: 0; transform: none; margin-right: 8px; background: url(perles/perle.webp) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(77,227,255,.5)); }
img.store-art, img.daily-art { object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }


.hub-ico { width: 36px; height: 36px; object-fit: contain; flex: none; margin: -4px 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }


.loot-mark.loot-boost { padding: 0; border: 0; background: none; }
.loot-mark.loot-boost img { width: 100%; height: 100%; object-fit: contain; }
img.quest-boost { width: 44px; height: 44px; object-fit: contain; margin-left: auto; display: block; }


:root {
  --c-glow: 0 0 18px rgba(77, 227, 255, .28);
  --c-depth: 0 6px 16px rgba(0, 0, 0, .35);
  --c-edge: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.c-btn, .sq-btn { background: linear-gradient(180deg, #132a52 0%, #0b1836 100%); border: 1.5px solid var(--c-line); color: var(--c-text);
  box-shadow: var(--c-edge), 0 4px 0 #050c1f, var(--c-depth); transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease; }
.c-btn:hover, .sq-btn:hover { border-color: var(--c-action); box-shadow: var(--c-edge), 0 4px 0 #050c1f, var(--c-depth), var(--c-glow); }
.c-btn:active, .sq-btn:active { transform: translateY(3px); box-shadow: var(--c-edge), 0 1px 0 #050c1f, 0 2px 6px rgba(0,0,0,.3); }
.c-btn.c-primary { background: linear-gradient(180deg, #8af0ff 0%, #4de3ff 45%, #1fb8e0 100%); color: #032036; border-color: #9af3ff;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 #11789a, 0 8px 22px rgba(77,227,255,.35); }
.c-btn.c-primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 #11789a, 0 3px 10px rgba(77,227,255,.3); }
.c-btn.c-reward { background: linear-gradient(180deg, #ffc27a 0%, #ff9a3d 50%, #e9721c 100%); color: #2c1406; border-color: #ffc98c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 #a14d10, 0 8px 22px rgba(255,154,61,.35); }
.c-btn.c-danger { background: linear-gradient(180deg, #3a1622 0%, #24101a 100%); color: #ff9b86; border-color: rgba(255,122,96,.55); }
.c-btn:disabled { filter: saturate(.4) brightness(.8); transform: none; }


.c-panel, .orb-sat, .orb-play, .mode-tile { background: linear-gradient(160deg, rgba(25,52,98,.95) 0%, rgba(10,22,50,.95) 60%, rgba(8,16,38,.95) 100%);
  border: 1.5px solid var(--c-line); box-shadow: var(--c-edge), var(--c-depth); }
.orb-sat, .orb-play, .mode-tile { transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease; }
.orb-sat:hover, .orb-play:hover, .mode-tile:hover { border-color: var(--c-action); box-shadow: var(--c-edge), var(--c-depth), var(--c-glow); }
.orb-sat:active, .orb-play:active, .mode-tile:active { transform: scale(.97); }
.orb-sat svg, .orb-play svg, .mode-tile svg { filter: drop-shadow(0 0 8px rgba(77,227,255,.55)); }


.skin-tab.selected, .mode-btn.selected, .shop-kind-btn.selected { background: linear-gradient(180deg, #8af0ff, #3fd6f5); color: #032036;
  border-color: #9af3ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px rgba(77,227,255,.4); }
.skin-card, .store-card { background: linear-gradient(170deg, rgba(22,46,90,.9) 0%, rgba(9,19,44,.95) 100%); }
.skin-card.selected { box-shadow: 0 0 0 2px var(--c-action), 0 0 22px rgba(77,227,255,.45); }





.chest-info-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(77,227,255,.15); border: 1.5px solid var(--c-action); color: var(--c-action); font: 900 16px Georgia, serif; font-style: italic; cursor: pointer; z-index: 2; }
.chest-info-btn:active { transform: scale(.92); }
#chest-info { z-index: 32; display: flex; align-items: center; justify-content: center; padding: 12px; }
#chest-info[hidden] { display: none; }
.chest-info-win { width: min(520px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; }
.chest-info-list { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 4px 0; }
.ci-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: var(--c-panel-deep); text-align: left; }
.ci-row b { flex: 1; font-size: 14px; color: var(--c-text); }
.ci-pct { font-size: 15px; font-weight: 900; color: var(--c-action); }
.ci-ico { width: 40px; height: 40px; object-fit: contain; flex: none; }
.chest-info-skins { margin: 2px 0 4px; font-size: 13px; font-weight: 800; color: #ffd34d; line-height: 1.35; }
.chest-info-skins[hidden] { display: none; }
.tile-sub[hidden] { display: none; }

.pearl-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: .15em; background: url(perles/perle.webp) center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(77,227,255,.45)); }


.hub-lang { position: absolute; top: calc(max(24px, env(safe-area-inset-top)) + 76px); left: max(32px, env(safe-area-inset-left)); display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1.5px solid rgba(77,227,255,.45); background: rgba(5,8,22,.6); pointer-events: auto; }
.hub-lang button { min-width: 44px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--c-text-dim, #9fb3d1); font: 900 14px Nunito, system-ui, sans-serif; cursor: pointer; }
.hub-lang button.selected { background: var(--c-action); color: #05202b; }



@media (orientation: landscape) and (max-height: 430px) and (max-width: 780px) {
  .hub-daily { gap: 4px; min-height: 0; padding: 4px; }
  .hub-daily > span { display: none; }
  .hub-quests { top: calc(max(24px, env(safe-area-inset-top)) + 104px); padding: 4px 8px 4px 4px; }
  .profile-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 10px; }
}

@media (orientation: portrait) {
  .hub-head { flex-direction: row; align-items: flex-start; }
  .hub-daily { top: calc(max(14px, env(safe-area-inset-top)) + 52px); right: max(16px, env(safe-area-inset-right)); gap: 4px; min-height: 0; padding: 4px; }
  .hub-daily > span { display: none; }
  .hub-quests { top: calc(max(14px, env(safe-area-inset-top)) + 104px); padding: 4px 8px 4px 4px; }
  .hub-lang { top: calc(max(14px, env(safe-area-inset-top)) + 64px); left: max(16px, env(safe-area-inset-left)); }
  .hub-orbit { --s: min(42vw, 26vh); --g: 12px; }
}


.lobby-btns { display: flex; gap: 6px; flex: none; }
.lobby-btns .join-btn { padding: 5px 12px; font-size: 13px; min-height: 0; }


.liens-legaux { margin: 8px 0 0; font-size: 12px; color: var(--c-text-dim, #9fb3d1); text-align: center; }
.liens-legaux a { color: inherit; text-decoration: underline; }
.acc-cgu { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 2px; font-size: 13px; line-height: 1.35; color: var(--c-text-dim, #9fb3d1); cursor: pointer; text-align: left; }
.acc-cgu input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--c-action); }
.acc-cgu a { color: var(--c-action); }


.admin-sous-titre { margin: 10px 0 4px; font-size: 16px; }
.admin-bugs { max-height: 40vh; overflow-y: auto; }
.admin-bugs .admin-room div:nth-child(2) { white-space: pre-wrap; margin: 2px 0; }
.tile-small.bug-btn, body.in-game .tile-small.bug-btn { background: transparent; border: 1.5px solid rgba(159, 179, 209, .45); color: var(--c-text-dim, #9fb3d1); box-shadow: none; font-size: 15px; min-height: 0; padding: 8px 12px; }


.dead-killer { margin: 2px 0 0; font-weight: 800; color: #ff9a8a; }
.dead-level { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.dead-level-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dead-level-head small { color: var(--c-text-dim, #9fb3d1); }
.dead-xp-bar { width: 100%; }
.dead-quest-list { width: 100%; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dead-quest { display: flex; justify-content: space-between; gap: 8px; color: var(--c-text-dim, #9fb3d1); }
.dead-quest.done { color: #6dffa8; }