:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f6f8;
  color: #f5f7ff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #f5f6f8; }
button, input, select { font: inherit; }
button { color: inherit; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; contain: strict; }
.topbar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 18px max(22px, env(safe-area-inset-left)); pointer-events: none; }
.brand { display: flex; gap: 10px; align-items: center; color: #1c2538; font-weight: 800; font-size: 1rem; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { width: 19px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg,#5ff2f5,#6e79ff 52%,#d762ff); box-shadow: 0 0 25px #665cff88; }
.server-state { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid #ffffff12; border-radius: 999px; background: #0b0e1df2; color: #9fa6c4; font-size: .78rem; }
.server-state span { width: 7px; height: 7px; border-radius: 50%; background: #ffb052; box-shadow: 0 0 10px currentColor; }
.server-state.online span { background: #4ce2a3; }
.server-state.offline span { background: #ff6580; }

.start-panel { position:fixed; z-index:4; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:190px 20px 120px; overflow:hidden; background-color:#f7f8fa; background-image:linear-gradient(#cfd5df80 1px,transparent 1px),linear-gradient(90deg,#cfd5df80 1px,transparent 1px); background-size:40px 40px; transition:opacity .28s ease,visibility .28s ease; }
.start-panel::before { display:none; }
.start-panel.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.game-title { position:absolute; z-index:3; top:42px; left:50%; margin:0; transform:translateX(-50%) rotate(-2deg); color:#6258f4; font-family:"Arial Rounded MT Bold","Trebuchet MS",ui-rounded,sans-serif; font-size:clamp(4rem,7vw,6.6rem); font-weight:900; line-height:.95; letter-spacing:-.075em; white-space:nowrap; -webkit-text-fill-color:#6258f4; -webkit-text-stroke:1px #4137c8; text-shadow:4px 5px 0 #ff9fc7,8px 10px 0 #fff,0 18px 32px #5d68cb42; }
.start-characters { position:absolute; inset:0; pointer-events:none; }
.start-character { position:absolute; z-index:1; display:block; object-fit:contain; filter:drop-shadow(0 24px 24px #49739f2b); user-select:none; }
.start-character-left { left:max(-200px,calc(50% - 875px)); top:44%; width:clamp(500px,48vw,680px); transform:translate(var(--left-parallax-x,0%),calc(-50% + var(--left-parallax-y,0%))) rotate(-2deg); }
.start-character-right { right:max(-200px,calc(50% - 875px)); top:44%; width:clamp(500px,48vw,680px); transform:translate(var(--right-parallax-x,0%),calc(-50% + var(--right-parallax-y,0%))) rotate(2deg); }
.start-center { position:relative; z-index:2; width:min(390px,100%); display:flex; flex-direction:column; align-items:center; }
.start-character-down { position:relative; z-index:1; flex:0 0 auto; width:244px; margin-top:-2px; transform:translate(var(--down-parallax-x,0%),var(--down-parallax-y,0%)); }
.start-card { position:relative; z-index:2; width:min(390px,100%); padding:20px; border:1px solid #d5deea; border-radius:12px; background:#fff; color:#172035; box-shadow:0 18px 55px #607da62e; }
.eyebrow { color:#6678ad; font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.start-card > h2 { margin:6px 0 8px; font-size:clamp(2.35rem,6vw,3.35rem); line-height:.87; letter-spacing:-.07em; }
.game-description { margin:0 0 14px; color:#6e7b91; font-size:.75rem; line-height:1.4; }
.field-label { display:block; margin-bottom:8px; color:#526078; font-size:.82rem; font-weight:700; }
#nickname { width:100%; height:46px; padding:0 14px; border:1px solid #d5dfed; outline:0; border-radius:8px; background:#f8fbff; color:#172035; font-size:.92rem; transition:border-color .2s,box-shadow .2s; }
#nickname::placeholder { color:#96a3b8; }
#nickname:focus { border-color: #727eff; box-shadow: 0 0 0 4px #6878ff20; }
.picker-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:14px; }
.saved-hint { color:#8a96aa; font-size:.7rem; }
.skin-picker-button { width:100%; min-height:58px; display:flex; align-items:center; gap:12px; padding:7px 12px 7px 8px; border:1px solid #d5dfed; border-radius:8px; background:#f8fbff; color:#172035; text-align:left; cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .18s; }
.skin-picker-button:hover { border-color:#6878ff; box-shadow:0 0 0 4px #6878ff17; transform:translateY(-1px); }
.skin-picker-button > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.skin-picker-button small { color:#8190a8; font-size:.68rem; }
.skin-picker-button b { overflow:hidden; color:#263149; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.current-skin-preview { flex:0 0 44px; width:44px; height:44px; padding:3px; border:1px solid #cad5e4; border-radius:50%; background:#fff; box-shadow:0 5px 14px #35486624; }
.current-skin-preview > span { display:block; width:100%; height:100%; overflow:hidden; border-radius:50%; }
.current-skin-preview img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.current-skin-preview.skin-color > span { background:conic-gradient(#ff5c7a,#ffbd4a,#48dc9a,#55c9ff,#7e6aff,#ff5cba,#ff5c7a); }
.skin-picker-arrow { margin-left:auto; color:#6878ff; font-size:1.7rem; line-height:1; }
.skin-dialog { width:min(1220px,calc(100% - 32px)); max-width:none; border-radius:14px; color:#172035; }
.skin-dialog::backdrop { background:#dfe8f2c7; backdrop-filter:blur(8px); }
.skin-dialog-card { padding:34px; border:1px solid #d6e0ed; border-radius:14px; background:#fff; box-shadow:0 30px 100px #536b8b40; }
.skin-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:24px; }
.skin-dialog-head h2 { margin:5px 0 6px; font-size:2.75rem; letter-spacing:-.05em; }
.skin-dialog-head p { margin:0; color:#7a879b; font-size:1rem; }
.skin-dialog-close { flex:0 0 52px; width:52px; height:52px; border:1px solid #d7e0eb; border-radius:8px; background:#f4f7fb; color:#56647a; font-size:2.1rem; cursor:pointer; }
.skin-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:20px; max-height:min(74vh,760px); padding:12px; overflow:auto; scrollbar-width:thin; scrollbar-color:#6878ff66 transparent; }
.skin-option { position:relative; min-width:0; aspect-ratio:1; padding:8px; border:3px solid transparent; border-radius:50%; background:transparent; cursor:pointer; transition:transform .18s,border-color .18s,filter .18s,box-shadow .18s; }
.skin-option:hover { z-index:1; transform:scale(1.1); border-color:#9aa5ff; filter:saturate(1.08); box-shadow:0 12px 24px #344e7a30; }
.skin-option[aria-checked="true"] { border-color:#6878ff; box-shadow:0 0 0 3px #6878ff33; }
.skin-option span { display:block; width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px #ffffff55,0 5px 16px #26364a38; }
.skin-option.imported span { overflow:hidden; background:#edf2f8; }
.skin-option.imported img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.skin-color span { background:conic-gradient(#ff5c7a,#ffbd4a,#48dc9a,#55c9ff,#7e6aff,#ff5cba,#ff5c7a); }
.skin-neon span { background: radial-gradient(circle at 34% 28%,#fff 0 4%,#5cf3ff 12%,#4d67ff 50%,#c552ff 100%); }
.skin-comet span { background: linear-gradient(135deg,#fff 0 5%,#5bf0ff 15%,#426cff 42%,#12162b 43% 52%,#ff4f9b 53% 66%,#5425c8); }
.skin-plasma span { background: conic-gradient(from 30deg,#ff5e88,#7e5cff,#4feaff,#ff5e88); }
.skin-option.skin-grid span { background-color:#15214c; background-image:linear-gradient(#69dcff55 1px,transparent 1px),linear-gradient(90deg,#69dcff55 1px,transparent 1px); background-size:7px 7px; }
.skin-orbit span { background: radial-gradient(circle,#fff 0 5%,#8c78ff 7% 12%,#151a35 13% 35%,#5ee8ff 36% 41%,#11152b 42%); }
.skin-void span { background: radial-gradient(circle at 66% 30%,#6537bf,#141126 28%,#02030a 70%); }
.skin-sun span { background: radial-gradient(circle at 35% 30%,#fffbc1,#ffd55e 18%,#ff7b3b 52%,#ab2048); }
.skin-mint span { background: repeating-linear-gradient(135deg,#8affd5 0 7px,#2bd6bb 7px 14px,#174d69 14px 21px); }
.play-button { width:100%; height:64px; display:flex; justify-content:center; align-items:center; gap:14px; margin-top:18px; border:0; border-radius:9px; background:linear-gradient(135deg,#6579ff,#8d5eff); box-shadow:0 12px 28px #6657ff42; color:#fff; font-size:1.08rem; font-weight:900; cursor:pointer; transition:transform .18s,filter .18s; }
.play-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
kbd { padding: 3px 7px; border: 1px solid #ffffff1f; border-radius: 6px; background: #ffffff12; color: #cbd0e7; font-family: inherit; font-size: .67rem; }
.start-card kbd { border-color:#cad4e3; background:#edf2f8; color:#59667c; }
.play-button kbd { border-color:#ffffff4a; background:#ffffff1f; color:#fff; }
.controls-note { display:flex; justify-content:center; gap:14px; margin-top:10px; color:#7c889c; font-size:.66rem; }
.controls-note span { display: flex; align-items: center; gap: 6px; }
.seo-about { margin-top:11px; border-top:1px solid #e2e8f0; color:#66738a; font-size:.7rem; }
.seo-about summary { padding-top:10px; color:#5f6d84; font-weight:800; text-align:center; cursor:pointer; }
.seo-about > div { max-height:210px; margin-top:9px; padding:10px 12px; overflow:auto; border-radius:8px; background:#f5f8fc; text-align:left; }
.seo-about h2,.seo-about h3 { margin:0 0 5px; color:#28344a; font-size:.78rem; line-height:1.3; letter-spacing:0; }
.seo-about h3 { margin-top:10px; }
.seo-about p { margin:0; line-height:1.45; }
.noscript-message { position:fixed; z-index:20; left:50%; bottom:20px; width:min(560px,calc(100% - 32px)); margin:0; padding:12px 16px; transform:translateX(-50%); border-radius:10px; background:#fff; color:#263149; text-align:center; box-shadow:0 8px 30px #26314933; }

.settings-button { position: fixed; z-index: 7; left: max(20px,env(safe-area-inset-left)); bottom: max(20px,env(safe-area-inset-bottom)); width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #ffffff17; border-radius: 50%; background: #111528f2; cursor: pointer; }
.settings-button svg { width: 20px; fill: #a9b0cd; }
dialog { width: min(430px,calc(100% - 28px)); padding: 0; border: 0; border-radius: 24px; background: transparent; color: #f7f8ff; }
dialog::backdrop { background: #050710b8; backdrop-filter: blur(8px); }
.settings-card { padding: 26px; border: 1px solid #ffffff18; border-radius: 24px; background: #101426; box-shadow: 0 30px 100px #000b; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.dialog-head h2 { margin: 5px 0 8px; font-size: 1.8rem; letter-spacing: -.04em; }
.close-button { width: 36px; height: 36px; border: 1px solid #ffffff16; border-radius: 50%; background: #ffffff08; font-size: 1.5rem; cursor: pointer; }
.setting { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff0d; cursor: pointer; }
.setting span { display: grid; gap: 4px; }
.setting b { font-size: .9rem; }
.setting small { color: #7d85a3; font-size: .72rem; }
.setting input { width: 38px; height: 21px; accent-color: #7476ff; }
.select-setting select { min-width: 110px; padding: 9px 10px; border: 1px solid #ffffff1a; border-radius: 10px; background: #090c19; color: #fff; }
.settings-foot { margin: 14px 0 0; color: #646c8a; font-size: .7rem; line-height: 1.5; }

.leaderboard { position: fixed; z-index: 3; top: 76px; right: max(20px,env(safe-area-inset-right)); width: 214px; padding: 16px; border: 1px solid #ffffff13; border-radius: 18px; background: #0d1121ed; }
.leaderboard-head { display:flex; justify-content:space-between; align-items:center; color:#f5f7ff; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.leaderboard-head small { color:#66708f; font-size:.62rem; }
.leaderboard ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: rank; }
.leaderboard li { counter-increment: rank; display:flex; gap:8px; padding:5px 0; color:#a5acc7; font-size:.72rem; }
.leaderboard li::before { content:counter(rank); width:14px; color:#59617c; font-variant-numeric:tabular-nums; }
.leaderboard li.me { color:#75efff; font-weight:800; }
.leaderboard li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard li b { margin-left:auto; color:#6e7694; font-size:.66rem; font-variant-numeric:tabular-nums; }
.round-banner { position:fixed; z-index:7; inset:0; display:grid; place-items:center; padding:24px; pointer-events:none; background:#080b1426; backdrop-filter:blur(2px); }
.round-banner[hidden] { display:none; }
.round-banner-card { width:min(520px,calc(100vw - 40px)); padding:26px 34px 22px; border:1px solid #ffffff2b; border-radius:18px; background:#0d1121f2; color:#fff; text-align:center; box-shadow:0 24px 80px #03050a66; animation:round-card-in .22s ease-out; }
.round-banner-card span { color:#74e9ff; font-size:.7rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.round-banner-card h2 { margin:8px 0 6px; font-size:clamp(2rem,5vw,3.4rem); line-height:1; letter-spacing:-.045em; }
.round-banner-card p { margin:0; color:#aeb7d1; font-size:.9rem; }
.round-banner-card strong { display:block; margin-top:16px; color:#fff; font-size:1rem; font-variant-numeric:tabular-nums; }
.round-results { margin:18px 0 0; padding:10px 14px; border:1px solid #ffffff12; border-radius:12px; background:#05071166; list-style:none; counter-reset:round-rank; }
.round-results:empty { display:none; }
.round-results li { counter-increment:round-rank; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:25px; color:#aeb7d1; font-size:.75rem; text-align:left; }
.round-results li::before { content:counter(round-rank); color:#59617c; font-variant-numeric:tabular-nums; }
.round-results li:first-child { color:#fff; font-weight:900; }
.round-results li.me { color:#74e9ff; font-weight:900; }
.round-results li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.round-results li b { color:#7f89aa; font-size:.7rem; font-variant-numeric:tabular-nums; }
@keyframes round-card-in { from { opacity:0; transform:translateY(12px) scale(.97); } }
.game-stats { position:fixed; z-index:3; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:8px; }
.game-stats span { padding:7px 10px; border:1px solid #d5dae4; border-radius:999px; background:#fffffff2; color:#525b6b; font-size:.68rem; font-variant-numeric:tabular-nums; box-shadow:0 4px 18px #25304a14; }
.touch-actions { position:fixed; z-index:4; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:none; align-items:flex-end; gap:12px; }
.touch-actions button { width:58px; height:58px; border:1px solid #ffffff2a; border-radius:50%; background:#161b34f2; color:#fff; font-weight:900; }
#split-button { width:72px; height:72px; position:relative; }
#split-button span { position:absolute; width:24px; height:24px; border-radius:50%; background:#7c85ff; }
#split-button span:first-child { left:14px; top:25px; }
#split-button span:last-child { right:14px; top:16px; }

@media (pointer: coarse) { .touch-actions:not([hidden]) { display:flex; } .game-stats { left:20px; transform:none; bottom:max(20px,env(safe-area-inset-bottom)); } }
@media (max-width: 680px) {
  .topbar { padding-inline:16px; }
  .start-panel { padding:142px 12px 126px; }
  .game-title { top:70px; font-size:3.15rem; }
  .start-card { padding:18px; border-radius:10px; }
  .start-character-left { left:-88px; top:48%; width:270px; transform:translate(var(--left-parallax-x,0%),calc(-50% + var(--left-parallax-y,0%))) rotate(-7deg); }
  .start-character-right { right:-96px; top:48%; width:280px; transform:translate(var(--right-parallax-x,0%),calc(-50% + var(--right-parallax-y,0%))) rotate(7deg); }
  .start-character-down { width:170px; margin-top:-1px; transform:translate(var(--down-parallax-x,0%),var(--down-parallax-y,0%)); }
  .start-card > h2 { font-size:3.1rem; }
  .skin-dialog-card { padding:20px 12px 12px; }
  .skin-dialog-head { margin-inline:6px; }
  .skin-dialog-head h2 { font-size:1.6rem; }
  .skin-dialog-head p { display:none; }
  .skin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-height:72vh; }
  .controls-note { display:none; }
  .leaderboard { top:68px; right:12px; width:174px; }
  .settings-button { width:42px; height:42px; }
}