:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --blue: #4ebeff;
  --deep-blue: #305bb9;
  --gold: #ffd52c;
  --ink: #31466e;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #7bbfff; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.screen { position: fixed; inset: 0; display: none; overflow: hidden; }
.screen.is-active { display: block; }

#lobby {
  color: white;
  background:
    linear-gradient(115deg, rgba(76, 146, 248, .89), rgba(104, 181, 252, .68) 56%, rgba(88, 136, 237, .9)),
    url("assets/arena-grid.png") center / cover;
}
#lobby::before, #lobby::after { content: ""; position: absolute; border-radius: 50%; filter: blur(3px); opacity: .48; }
#lobby::before { width: 42vw; height: 42vw; left: 18%; top: 12%; background: radial-gradient(circle, white 0 3%, #8cf2ff 10%, transparent 65%); }
#lobby::after { width: 30vw; height: 30vw; right: -10%; bottom: -18%; background: radial-gradient(circle, #cf8bff, transparent 66%); }
.lobby-glow { position: absolute; inset: 0; background: radial-gradient(circle at 42% 55%, rgba(235, 253, 255, .85), rgba(122, 204, 255, .12) 28%, transparent 54%); }
.lobby-header { position: absolute; z-index: 3; inset: 0 0 auto; height: 9vh; display: flex; align-items: center; justify-content: space-between; padding: max(8px, env(safe-area-inset-top)) 3.4vw 0; background: linear-gradient(180deg, rgba(57, 112, 215, .48), transparent); }
.profile { display: flex; align-items: center; gap: .8vw; text-shadow: 0 1px 3px #24509b; }
.profile span:last-child { display: grid; line-height: 1.25; }
.profile small { color: #d9efff; font-size: .72rem; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: linear-gradient(#ff786f, #e23542); box-shadow: 0 3px 10px #3262a8; font-weight: 900; }
.currencies { display: flex; gap: .8vw; align-items: center; }
.currencies > span { min-width: 72px; padding: 6px 12px; display: flex; align-items: center; gap: 7px; border-radius: 18px; background: rgba(44, 98, 190, .48); box-shadow: inset 0 1px rgba(255,255,255,.4); color: #ffe95a; }
.currency-token { width: 13px; height: 13px; display: inline-block; box-shadow: inset 0 2px 2px rgba(255,255,255,.68), 0 1px 3px rgba(27,64,137,.4); }
.coin-token { border-radius: 50%; background: linear-gradient(145deg,#fff064,#eeb615); }
.gem-token { transform: rotate(45deg); border-radius: 3px; background: linear-gradient(145deg,#96fbff,#46bee8); }
.circle-button { width: 36px; height: 36px; display: grid; place-items: center; color: white; border-radius: 50%; background: rgba(44, 98, 190, .48); }
.settings-icon { width: 18px; height: 16px; display: block; background: radial-gradient(circle at 5px 3px, white 0 2px, transparent 2.5px), radial-gradient(circle at 13px 8px, white 0 2px, transparent 2.5px), radial-gradient(circle at 7px 13px, white 0 2px, transparent 2.5px), linear-gradient(white,white) 0 2px / 18px 2px no-repeat, linear-gradient(white,white) 0 7px / 18px 2px no-repeat, linear-gradient(white,white) 0 12px / 18px 2px no-repeat; }
.glass-panel { z-index: 2; border: 1px solid rgba(255,255,255,.52); border-radius: 13px; background: linear-gradient(135deg, rgba(68,102,191,.56), rgba(66,132,219,.25)); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 20px rgba(26,69,151,.16); backdrop-filter: blur(6px); }
.missions { position: absolute; left: 3vw; top: 13vh; width: 20vw; min-width: 230px; padding: 12px 16px; }
.missions h2 { margin: 0 0 6px; font-size: 1rem; display: flex; justify-content: space-between; }
.chevron-up { width: 8px; height: 8px; margin: 6px 2px 0 0; border-left: 2px solid white; border-top: 2px solid white; transform: rotate(45deg); }
.missions p { position: relative; margin: 5px 0; padding-left: 16px; font-size: clamp(11px, 1.05vw, 15px); color: #e9f6ff; }
.missions p::before { content: ""; position: absolute; left: 1px; top: .48em; width: 7px; height: 7px; border-radius: 50%; background: white; box-shadow: 0 0 6px #bce9ff; }
.missions b { float: right; color: #ffe35d; }
.lobby-mascot { position: absolute; z-index: 3; left: 27vw; top: 17vh; width: 20vw; height: 69vh; display: flex; align-items: center; flex-direction: column; }
.mascot-stack { position: relative; width: 100%; height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 4.6vh; filter: drop-shadow(0 13px 14px rgba(38,58,137,.22)); }
.mascot-stack i { display: block; flex: none; width: clamp(58px, 6.7vw, 98px); height: clamp(58px, 6.7vw, 98px); margin-top: clamp(-12px, -1.3vw, -20px); border-radius: 50%; background: radial-gradient(circle at 38% 27%, #ff665f, #eb233d 52%, #b70e2b 88%); box-shadow: inset -8px -11px 12px rgba(117,0,28,.18), inset 7px 6px 9px rgba(255,255,255,.15); }
.mascot-eyes { position: absolute; z-index: 5; top: 3.5vh; display: flex; gap: .4vw; }
.mascot-eyes i { width: clamp(28px, 3.15vw, 44px); height: clamp(28px, 3.15vw, 44px); background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(83,11,25,.28); }
.mascot-eyes i::after { content: ""; display: block; width: 42%; height: 42%; margin: 43% 0 0 41%; border-radius: 50%; background: #1a1d2b; box-shadow: inset 2px 2px white; }
.pedestal { position: absolute; bottom: 3.8vh; width: 16vw; height: 6vh; border-radius: 50%; background: radial-gradient(ellipse, white 0 9%, #47ecff 30%, #5272ce 64%, rgba(40,69,170,.1) 68%); box-shadow: 0 0 35px #8bf4ff; }
.lobby-mascot strong { position: absolute; bottom: 0; text-shadow: 0 2px 6px #3658a8; }
.mode-board { position: absolute; z-index: 3; left: 50vw; top: 15vh; width: 32vw; }
.main-mode { min-height: 20vh; display: flex; gap: 1.2vw; align-items: center; padding: 1.4vw; color: #815206; border: 4px solid #ffe165; border-radius: 17px; background: linear-gradient(135deg, #ffdb35, #ffad26); box-shadow: 0 7px 0 #dd7a20, 0 14px 26px rgba(30,66,146,.24), inset 0 3px rgba(255,255,255,.56); transform: rotate(-.4deg); }
.mode-face { position: relative; width: 6.5vw; height: 6.5vw; min-width: 66px; min-height: 66px; display: block; border-radius: 13px; color: #213869; background: linear-gradient(135deg,#adf749,#67d92e); box-shadow: inset 0 0 0 5px rgba(255,255,255,.22); }
.mode-face i { position: absolute; top: 21%; width: 29%; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: inset 0 0 0 6px #283b68; }
.mode-face i:first-child { left: 18%; }
.mode-face i:nth-child(2) { right: 18%; }
.mode-face em { position: absolute; width: 39%; height: 20%; left: 31%; bottom: 20%; border-bottom: 5px solid #30547b; border-radius: 50%; transform: rotate(-8deg); }
.main-mode h1 { margin: 0; color: white; font-size: clamp(25px, 3vw, 45px); text-shadow: 0 3px #b96318; }
.main-mode p, .main-mode small { margin: 0; font-weight: 700; }
.main-mode p { white-space: nowrap; font-size: clamp(10px, 1.05vw, 15px); }
.mini-modes { display: flex; gap: 1vw; margin-top: 2.6vh; }
.mini-modes article { flex: 1; min-height: 10vh; display: grid; place-items: center; align-content: center; border-radius: 13px; background: linear-gradient(140deg,#7b6af0,#4e50bd); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 6px 15px rgba(40,54,135,.22); }
.mini-modes article:last-child { background: linear-gradient(140deg,#31beaa,#2686ce); }
.mini-modes span { font-size: .7rem; color: #d9ecff; }
.primary-button { width: 100%; margin-top: 3vh; padding: 1.9vh 2vw; border-radius: 999px; color: #9a5800; font-weight: 900; font-size: clamp(18px, 2vw, 28px); letter-spacing: .1em; background: linear-gradient(#fff671, #ffc524); box-shadow: 0 6px 0 #e08a18, 0 10px 24px rgba(34,68,153,.35), inset 0 3px white; transition: transform .13s; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #e08a18; }
.control-copy { margin: 2vh 0 0; text-align: center; color: #dff4ff; font-size: .8rem; text-shadow: 0 2px #4167ad; }
.events { position: absolute; z-index: 3; right: 2.5vw; top: 16vh; width: 13vw; min-width: 130px; padding: 8px; }
.events div { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.2); }
.events div:last-child { border: 0; }
.events small { color: #d8efff; font-size: .68rem; }
.event-dot { grid-row: 1 / 3; width: 30px; height: 30px; align-self: center; border: 3px solid white; border-radius: 50%; box-shadow: 0 3px 8px rgba(31,58,133,.3); }
.cyan { background: linear-gradient(#6ff7ff,#21a5e4); } .gold { background: linear-gradient(#fff268,#ffb421); } .violet { background: linear-gradient(#ef98ff,#875ae9); }
.lobby-nav { position: absolute; z-index: 4; inset: auto 0 0; height: 8vh; display: flex; justify-content: space-evenly; align-items: center; border-top: 1px solid rgba(255,255,255,.5); background: rgba(47,98,190,.35); color: #d6eaff; font-size: .82rem; }
.lobby-nav .selected { color: white; font-weight: 900; text-shadow: 0 0 10px white; }

#game { background: #f3f7fb; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.top-left-hud { position: absolute; z-index: 5; left: 8vw; top: 3vh; display: grid; grid-template-columns: 9.3vw 14vw; grid-template-rows: auto auto; color: white; text-shadow: 0 1px 2px #4b5c7d; pointer-events: none; }
.best-card, .leaderboard { background: rgba(66,72,84,.43); backdrop-filter: blur(3px); }
.best-card { padding: 8px 10px; border-radius: 8px 0 0 0; display: flex; flex-direction: column; }
.best-card small { opacity: .9; }
.best-card b { color: #ffe83c; font-size: 1.2rem; }
.score-card { display: flex; flex-direction: column; padding: 4px 8px; font-size: clamp(15px, 1.55vw, 23px); }
.leaderboard { grid-column: 1; grid-row: 2; margin: 0; padding: 6px 8px 8px 28px; width: 14.7vw; min-width: 150px; border-radius: 0 0 8px 8px; font-size: clamp(9px, .95vw, 14px); line-height: 1.36; white-space: nowrap; overflow: hidden; }
.leaderboard li { padding-left: 2px; }
.leaderboard li.player-rank { color: #ffea3f; font-weight: 800; }
.top-right-hud { position: absolute; z-index: 5; top: 4vh; right: 4vw; display: flex; flex-direction: column; align-items: flex-end; gap: 1.5vh; }
.mini-shell { width: 12.3vw; min-width: 116px; height: 11.8vh; min-height: 80px; border-radius: 6px; background: rgba(67,75,87,.42); padding: 3px; }
#miniMap { width: 100%; height: 100%; }
.hud-button { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 50%; color: white; font-weight: 900; background: rgba(65,71,79,.5); border: 3px solid rgba(255,255,255,.72); box-shadow: 0 3px 8px rgba(36,47,65,.22); }
.hud-button i { width: 4px; height: 15px; border-radius: 2px; background: white; }
.spawn-badge { position: absolute; z-index: 5; left: 50%; top: 5.6vh; transform: translateX(-50%) translateY(-12px); opacity: 0; padding: 7px 14px; border: 2px solid #76e8f5; border-radius: 999px; color: #237ca2; background: rgba(235,255,255,.92); box-shadow: 0 0 20px #76e8f5; transition: .2s; }
.spawn-badge.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.sparkle-icon { position: relative; display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; transform: rotate(45deg); background: #34cddd; border-radius: 2px; box-shadow: 0 0 9px #34cddd; }
.sparkle-icon::after { content: ""; position: absolute; inset: 3px -3px; background: #eaffff; border-radius: 1px; }
.hint { position: absolute; z-index: 6; left: 50%; bottom: 4vh; transform: translateX(-50%); padding: 8px 18px; color: #506482; background: rgba(255,255,255,.85); border-radius: 999px; box-shadow: 0 3px 13px rgba(50,74,110,.14); opacity: 0; transition: opacity .35s; pointer-events: none; }
.hint.is-visible { opacity: 1; }
.joystick { position: absolute; z-index: 7; left: 14.6vw; bottom: 9.7vh; width: clamp(104px, 11.6vw, 168px); aspect-ratio: 1; border-radius: 50%; background: rgba(74,79,84,.61); border: 2px solid rgba(255,255,255,.5); box-shadow: inset 0 0 0 2px rgba(39,43,51,.15), 0 4px 10px rgba(47,54,67,.13); touch-action: none; }
.joystick span { position: absolute; width: 45%; height: 45%; left: 27.5%; top: 27.5%; border-radius: 50%; background: rgba(205,211,216,.8); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 4px 8px rgba(35,42,53,.22); transform: translate(0,0); }
.boost-button { position: absolute; z-index: 7; right: 14.7vw; bottom: 10.1vh; width: clamp(98px, 10.7vw, 154px); aspect-ratio: 1; display: grid; place-items: center; align-content: center; border-radius: 50%; color: rgba(82,87,92,.74); background: rgba(185,191,196,.62); border: 2px solid rgba(255,255,255,.5); box-shadow: 0 5px 11px rgba(42,51,64,.13), inset 0 2px rgba(255,255,255,.6); touch-action: none; transition: transform .1s, background .1s, box-shadow .1s; }
.boost-button svg { width: 39%; height: 48%; overflow: visible; filter: drop-shadow(0 2px 1px rgba(255,255,255,.5)); }
.boost-button svg path { fill: currentColor; }
.boost-button small { font-weight: 800; opacity: .7; }
.boost-button.is-active { color: white; background: radial-gradient(circle at 38% 30%, #fff8a5, #ffbd2e 53%, #ee7621); box-shadow: 0 0 28px #ffd440, inset 0 2px white; transform: scale(.94); }
.boost-button.is-disabled { opacity: .44; }
.back-button { position: absolute; z-index: 6; left: 1.5vw; top: 3vh; padding: 8px 14px; color: #f4f8ff; border-radius: 999px; background: rgba(62,70,83,.42); }
.overlay { position: absolute; z-index: 20; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(13,21,48,.62); backdrop-filter: blur(3px); }
.overlay.is-visible { display: flex; }
.modal, .revive-modal { color: white; text-align: center; border: 2px solid rgba(255,255,255,.43); background: radial-gradient(circle at 50% 20%, #686eea, #3f399f 69%, #302674); box-shadow: 0 0 80px rgba(89,111,255,.55), inset 0 0 45px rgba(109,202,255,.18); }
.modal { width: min(430px, 72vw); border-radius: 25px; padding: 28px; }
.modal h2 { font-size: 2rem; margin: 0; }
.modal p { color: #dce3ff; }
.modal .primary-button { margin: 14px 0; }
.secondary-button { width: 100%; padding: 12px; border-radius: 999px; color: white; background: rgba(255,255,255,.16); }
.revive-modal { width: min(720px, 76vw); min-height: 68vh; border-radius: 50% 50% 22px 22px / 16% 16% 22px 22px; padding: 4vh 5vw 3vh; }
.revive-modal h2 { margin: 0 0 2vh; font-size: clamp(27px, 3.4vw, 50px); text-shadow: 0 0 14px #88bfff; }
.countdown-ring { position: relative; isolation: isolate; width: clamp(105px, 13vw, 185px); height: clamp(105px, 13vw, 185px); display: grid; place-items: center; margin: auto; border-radius: 50%; font-size: clamp(45px, 6vw, 80px); color: #ffe650; background: conic-gradient(rgba(255,255,255,.8) var(--timer, 100%), rgba(255,255,255,.13) 0); box-shadow: inset 0 0 0 8px rgba(101,113,222,.8), 0 0 24px rgba(127,194,255,.7); }
.countdown-ring::before { content: ""; position: absolute; width: clamp(81px, 10.3vw, 146px); height: clamp(81px, 10.3vw, 146px); border-radius: 50%; background: #5355bc; z-index: -1; }
.death-stats { margin: 2vh auto; display: flex; justify-content: center; gap: 4vw; color: #dce7ff; }
.death-stats b { color: #fff477; font-size: 1.2em; }
.death-actions { display: flex; justify-content: center; gap: 4vw; }
.yellow-button, .blue-button { min-width: 210px; padding: 2vh 2.4vw; border-radius: 999px; color: white; font-size: clamp(16px, 1.8vw, 25px); font-weight: 900; box-shadow: 0 6px rgba(34,34,100,.32), inset 0 3px rgba(255,255,255,.5); }
.yellow-button { color: #9a5a00; background: linear-gradient(#fff05b,#ffbd19); }
.blue-button { background: linear-gradient(#70e2ff,#36a9ee); }
.text-button { margin-top: 2vh; color: #d8dcff; background: none; text-decoration: underline; }
.rotate-tip { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; align-content: center; gap: 12px; color: white; background: linear-gradient(145deg,#579cf0,#6fcce8); }
.rotate-phone { width: 42px; height: 70px; border: 4px solid white; border-radius: 9px; box-shadow: inset 0 -7px rgba(255,255,255,.18); animation: rotate 2s infinite; }
.rotate-tip p { font-weight: 800; letter-spacing: .1em; }
@keyframes rotate { 50%, 100% { transform: rotate(90deg); } }

@media (orientation: portrait) and (max-width: 900px) { .rotate-tip { display: grid; } }
@media (max-height: 520px) {
  .missions { top: 11vh; padding: 8px 12px; }
  .events { top: 13vh; }
  .mode-board { top: 12vh; }
  .main-mode { min-height: 18vh; }
  .mini-modes { margin-top: 2vh; }
  .primary-button { margin-top: 2vh; }
  .lobby-mascot { top: 11vh; }
  .profile small, .control-copy, .boost-button small { display: none; }
}