:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:#05061b;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; overflow:hidden; background:#05061b; }
body { display:grid; min-height:100dvh; place-items:center; }
button { margin:0; padding:0; border:0; outline:0; color:inherit; font:inherit; background:none; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; }
img { display:block; max-width:100%; }
svg { display:block; }

.app {
  --scene:url('../assets/backgrounds/space.png');
  --scene-pos:50% 100%;
  position:relative;
  width:min(100vw,560px);
  height:100dvh;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
  background:#0a0a2b;
  box-shadow:0 0 70px rgba(0,0,0,.55);
}
.scene-bg,.scene-vignette,.screen-flash { position:absolute; inset:0; pointer-events:none; }
.scene-bg {
  z-index:0;
  background-image:var(--scene);
  background-position:var(--scene-pos);
  background-size:cover;
  opacity:1;
  transition:background-image .22s ease, opacity .2s ease;
}
.scene-vignette {
  z-index:1;
  background:
    linear-gradient(180deg,rgba(4,5,28,.16),rgba(4,5,28,.04) 40%,rgba(3,4,24,.22)),
    radial-gradient(circle at 50% 43%,transparent 42%,rgba(3,3,22,.16) 100%);
}
.app[data-screen="homeScreen"] .scene-bg,
.app[data-screen="homeScreen"] .scene-vignette { opacity:0; }

.screen {
  position:absolute;
  z-index:2;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.004);
  transition:opacity .17s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s;
}
.screen.active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
  transition-delay:0s;
}

/* ---------------- Home: independent responsive layers ---------------- */
.home-screen {
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 27%,rgba(117,53,255,.35),transparent 31%),
    radial-gradient(circle at 50% 55%,rgba(35,24,115,.25),transparent 55%),
    linear-gradient(180deg,#09082d 0%,#0b0a38 58%,#070724 100%);
}
.home-screen::after {
  content:"";
  position:absolute;
  inset:auto -18% -14% -18%;
  height:42%;
  opacity:.18;
  background:radial-gradient(ellipse at 50% 100%,rgba(82,47,210,.65),transparent 62%);
  pointer-events:none;
}
.home-glow {
  position:absolute;
  left:50%; top:12%;
  width:min(92vw,500px); aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(99,59,255,.20),transparent 68%);
  filter:blur(5px);
}
.home-settings {
  position:absolute;
  z-index:10;
  top:max(14px,env(safe-area-inset-top));
  right:14px;
  display:grid;
  width:52px; height:52px;
  place-items:center;
  border:1px solid rgba(177,157,255,.34);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(150deg,#4c2a94,#25185f);
  box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -3px rgba(26,12,68,.4),0 10px 24px rgba(0,0,0,.32),0 0 18px rgba(142,72,255,.20);
}
.home-settings svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.home-settings:active { transform:translateY(1px) scale(.97); }

.home-logo {
  position:absolute;
  z-index:5;
  left:50%; top:7.2%;
  width:min(74vw,400px);
  transform:translateX(-50%);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.38));
}
.home-tube {
  --home-tube-h:clamp(220px,34vh,320px);
  position:absolute;
  z-index:3;
  top:32%;
  width:calc(var(--home-tube-h) * .30851);
  height:var(--home-tube-h);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.35));
}
.home-tube-left { left:-12px; transform:rotate(-1.5deg); }
.home-tube-right { right:-12px; transform:rotate(1.5deg); }
.home-tube-frame { position:absolute; z-index:3; inset:0; width:100%; height:100%; }
.home-tube-balls { position:absolute; z-index:2; inset:0; }
.home-tube-balls img {
  position:absolute;
  left:50%;
  width:67.24%; aspect-ratio:1;
  transform:translateX(-50%);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.23));
}
.home-tube-balls img:nth-child(1) { bottom:2.7%; }
.home-tube-balls img:nth-child(2) { bottom:25%; }
.home-tube-balls img:nth-child(3) { bottom:47.3%; }
.home-tube-balls img:nth-child(4) { bottom:69.6%; }

.home-center {
  position:absolute;
  z-index:6;
  left:50%;
  top:43.2%;
  display:flex;
  width:min(66vw,330px);
  transform:translateX(-50%);
  align-items:center;
  flex-direction:column;
}
.home-level-card {
  width:min(100%,280px);
  padding:15px 18px 14px;
  border:1px solid rgba(142,95,255,.46);
  border-radius:24px;
  background:linear-gradient(155deg,rgba(33,25,94,.82),rgba(18,15,66,.78));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 15px 30px rgba(0,0,0,.30);
  text-align:center;
  backdrop-filter:blur(8px);
}
.home-crown { display:block; color:#ffd83f; font-size:25px; line-height:1; filter:drop-shadow(0 3px 6px rgba(255,176,0,.28)); }
.home-level-card strong { display:block; margin-top:5px; font-size:clamp(23px,6vw,30px); font-weight:900; letter-spacing:.02em; }
.home-level-card small { display:block; margin-top:5px; color:#bfa4ff; font-size:12px; font-weight:800; letter-spacing:.13em; }
.progress-track { width:100%; height:7px; margin-top:13px; overflow:hidden; border-radius:99px; background:rgba(132,107,255,.26); }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#28e89e,#a4f22d); box-shadow:0 0 9px rgba(52,231,142,.34); transition:width .3s ease; }
.play-btn {
  position:relative;
  display:grid;
  width:min(100%,250px);
  height:clamp(72px,10.2vh,92px);
  margin-top:18px;
  overflow:hidden;
  place-items:center;
  border-radius:28px;
  background:linear-gradient(180deg,#1be8a0,#05ae78);
  box-shadow:inset 0 2px rgba(255,255,255,.37),inset 0 -7px rgba(0,91,63,.33),0 17px 32px rgba(0,20,39,.48),0 0 18px rgba(26,232,157,.18);
}
.play-btn::after { content:""; position:absolute; inset:-90%; background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%); animation:buttonShine 3.8s ease-in-out infinite; }
.play-btn svg { position:relative; z-index:2; width:45px; height:45px; fill:#fff; filter:drop-shadow(0 4px 5px rgba(0,0,0,.24)); }
.play-btn:active { transform:translateY(2px) scale(.992); }
.home-stats { display:flex; margin-top:14px; gap:8px; }
.home-stats span {
  min-width:74px;
  padding:8px 13px;
  border:1px solid rgba(153,128,255,.22);
  border-radius:14px;
  color:#ffe469;
  background:rgba(17,14,67,.74);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
  font-size:15px;
  font-weight:800;
}
.home-stats b { color:#fff; }
.home-actions {
  position:absolute;
  z-index:8;
  left:50%; bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));
  display:grid;
  width:min(82%,390px);
  transform:translateX(-50%);
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.home-action {
  display:flex;
  min-height:62px;
  padding:0 8px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  color:#fff;
  box-shadow:inset 0 2px rgba(255,255,255,.17),inset 0 -5px rgba(50,17,92,.25),0 11px 23px rgba(0,0,0,.30);
  font-size:15px;
  font-weight:850;
}
.home-action.levels { background:linear-gradient(145deg,#f63b82,#c82163); }
.home-action.dress { background:linear-gradient(145deg,#a746ef,#6b2bc0); }
.home-action.rank { background:linear-gradient(145deg,#347bdc,#2852b8); }
.home-action svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.home-action.levels svg { fill:currentColor; stroke:none; }
.home-action:active { transform:translateY(1px) scale(.985); }

/* ---------------- Game header controls ---------------- */
.topbar {
  position:absolute;
  z-index:10;
  top:0; left:0; right:0;
  display:flex;
  height:144px;
  padding:max(12px,env(safe-area-inset-top)) 10px 0;
  align-items:flex-start;
  justify-content:space-between;
}
.game-controls { position:relative; z-index:2; display:flex; gap:6px; align-items:flex-start; }
.game-control {
  position:relative;
  display:flex;
  width:52px; height:60px;
  padding:6px 3px 5px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(176,188,255,.24);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(155deg,rgba(58,62,133,.92),rgba(22,22,72,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -2px rgba(5,8,38,.26),0 8px 18px rgba(0,0,0,.30);
  backdrop-filter:blur(8px);
  transition:transform .12s ease,opacity .12s ease;
}
.game-control:active { transform:translateY(1px) scale(.97); }
.game-control:disabled,.game-control.used { opacity:.43; filter:saturate(.55); }
.control-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; }
.control-label { color:#e2e7ff; font-size:10px; font-weight:800; line-height:1; white-space:nowrap; }
.control-count {
  position:absolute;
  top:-5px; right:-5px;
  display:grid;
  min-width:21px; height:21px;
  padding:0 5px;
  place-items:center;
  border:2px solid #101032;
  border-radius:999px;
  color:#463500;
  background:linear-gradient(#ffe77a,#ffc92b);
  box-shadow:0 4px 9px rgba(0,0,0,.33),inset 0 1px rgba(255,255,255,.55);
  font-size:10px;
  font-weight:950;
}
.level-head {
  position:absolute;
  top:max(15px,calc(env(safe-area-inset-top) + 2px));
  left:50%;
  min-width:122px;
  transform:translateX(-50%);
  text-align:center;
  text-shadow:0 2px 6px rgba(0,0,0,.46);
  pointer-events:none;
}
.level-head>strong { font-size:19px; font-weight:950; letter-spacing:.03em; }
.level-head>div { display:flex; min-height:17px; margin-top:3px; align-items:center; justify-content:center; gap:6px; color:#c4d0f3; font-size:10px; font-weight:800; letter-spacing:.13em; }
.level-head small { display:block; margin-top:2px; color:#b9c5e9; font-size:11px; font-weight:650; }
.level-head small b { color:#fff; }
#hardBadge { display:none; padding:2px 6px; border-radius:6px; color:#fff; background:linear-gradient(#ff557a,#bc184e); font-size:8px; font-style:normal; letter-spacing:.04em; }
#hardBadge.show { display:inline-block; }

.chapter-intro {
  position:absolute;
  z-index:30;
  top:39%; left:50%;
  width:min(78%,360px);
  padding:20px 18px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.88);
  border:1px solid rgba(143,164,255,.24);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(19,20,62,.94),rgba(43,38,112,.90));
  box-shadow:0 24px 65px rgba(0,0,0,.54);
  text-align:center;
  backdrop-filter:blur(12px);
}
.chapter-intro small { display:block; color:#a8c1ff; font-size:12px; letter-spacing:.18em; }
.chapter-intro strong { display:block; margin:7px 0 5px; font-size:29px; }
.chapter-intro em { color:#ffe06e; font-size:12px; font-style:normal; font-weight:900; }

/* ---------------- Game board ---------------- */
.board {
  --cols:4;
  --tube-h:220px;
  --tube-w:calc(var(--tube-h) * .30851);
  --ball-size:calc(var(--tube-w) * .672414);
  --ball-step:calc(var(--ball-size) * 1.064103);
  --ball-bottom:2.66%;
  position:absolute;
  top:16.4%; left:10px; right:10px; bottom:9.5%;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:min-content;
  align-content:center;
  justify-items:center;
  gap:var(--gap-y,22px) var(--gap-x,10px);
  padding:8px 0 12px;
  transition:opacity .16s ease;
}
.board.locked { pointer-events:none; }
.tube { position:relative; width:calc(var(--tube-w) + var(--tap-pad,18px)); height:var(--tube-h); overflow:visible; touch-action:manipulation; }
.tube-stage { position:absolute; left:50%; top:0; width:var(--tube-w); height:var(--tube-h); transform:translateX(-50%); transform-origin:50% 82%; transition:transform .27s cubic-bezier(.2,.82,.2,1),filter .22s ease; will-change:transform; }
.tube-frame { position:absolute; z-index:4; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; filter:drop-shadow(0 5px 7px rgba(0,0,0,.22)); }
.tube-balls { position:absolute; z-index:2; inset:0; pointer-events:none; }
.ball-slot { position:absolute; left:50%; bottom:calc(var(--ball-bottom) + var(--slot) * var(--ball-step)); width:var(--ball-size); height:var(--ball-size); transform:translateX(-50%); transform-origin:50% 88%; transition:transform .23s cubic-bezier(.18,.82,.2,1),filter .22s ease,opacity .1s ease; filter:drop-shadow(0 2px 3px rgba(0,0,0,.26)); }
.ball-slot img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.ball-slot.hidden img { filter:brightness(.42) saturate(.45); }
.ball-slot.hidden span { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:calc(var(--ball-size) * .46); font-weight:950; text-shadow:0 2px 4px rgba(0,0,0,.75); }
.ball-slot.moving-origin { opacity:0; }
.tube.selected .tube-stage { transform:translateX(-50%) translateY(-2px) scale(1.008); filter:drop-shadow(0 0 9px rgba(93,212,255,.42)); }
.tube.selected .ball-slot:last-child { transform:translateX(-50%) translateY(calc(var(--ball-size) * -.15)) scale(1.02); }
.tube.valid-target .tube-frame { animation:targetGlow 1.05s ease-in-out infinite; }
.tube.complete .tube-frame { filter:drop-shadow(0 0 8px rgba(255,231,116,.24)) drop-shadow(0 5px 6px rgba(0,0,0,.2)); }
.tube.pour-left .tube-stage { animation:pourLeft .42s ease; }
.tube.pour-right .tube-stage { animation:pourRight .42s ease; }
.tube.receiving .tube-stage { animation:receive .38s ease; }
.tube.landed .tube-stage { animation:landed .36s ease; }
.tube.completed-pop .tube-stage { animation:tubeComplete .65s cubic-bezier(.18,.9,.2,1); }
.tube.completed-pop .tube-frame { animation:completeGlow .7s ease; }
.ball-slot.just-landed { animation:ballLand .34s ease; }
.flying-ball { position:fixed!important; z-index:180!important; pointer-events:none!important; filter:drop-shadow(0 8px 9px rgba(0,0,0,.32)); }
.board.level-enter .tube { animation:tubeEnter .46s cubic-bezier(.18,.9,.22,1) both; animation-delay:calc(var(--enter-index,0) * 38ms); }

.dress-fab {
  position:absolute;
  z-index:11;
  right:12px;
  bottom:max(42px,calc(env(safe-area-inset-bottom) + 30px));
  display:flex;
  min-height:46px;
  padding:0 15px;
  align-items:center;
  gap:7px;
  border:1px solid rgba(190,166,255,.28);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(116,57,199,.94),rgba(74,36,143,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 9px 20px rgba(0,0,0,.3);
  font-size:13px;
}
.dress-fab span { font-size:18px; }
.game-hint { position:absolute; z-index:8; left:0; right:0; bottom:max(13px,env(safe-area-inset-bottom)); color:#929bbd; font-size:12px; font-weight:600; text-align:center; pointer-events:none; }

/* ---------------- Panels ---------------- */
.panel-screen { background:rgba(5,6,30,.34); backdrop-filter:blur(1px); }
.panel-head {
  position:absolute;
  z-index:4;
  top:0; left:0; right:0;
  display:flex;
  height:92px;
  padding:max(14px,env(safe-area-inset-top)) 14px 0;
  align-items:flex-start;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(6,7,31,.84),rgba(6,7,31,.28) 65%,transparent);
}
.panel-head h2 { position:absolute; left:50%; top:max(19px,calc(env(safe-area-inset-top) + 5px)); margin:0; transform:translateX(-50%); font-size:23px; line-height:1; }
.back-btn {
  display:grid;
  width:50px; height:50px;
  place-items:center;
  border:1px solid rgba(174,188,255,.22);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(145deg,rgba(55,59,127,.91),rgba(21,22,70,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.30);
}
.back-btn svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.back-btn:active { transform:translateY(1px) scale(.97); }
.coin { display:flex; min-height:44px; padding:0 13px 0 7px; align-items:center; gap:7px; border-radius:16px; background:rgba(10,11,43,.72); color:#ffe373; font-size:16px; font-weight:850; backdrop-filter:blur(8px); }
.coin img { width:31px; height:31px; }
.panel-content { position:absolute; top:84px; left:0; right:0; bottom:0; overflow:auto; padding:12px 14px max(24px,env(safe-area-inset-bottom)); overscroll-behavior:contain; scrollbar-width:none; }
.panel-content::-webkit-scrollbar { display:none; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); min-height:50px; padding:5px; gap:5px; border:1px solid rgba(144,159,239,.16); border-radius:18px; background:rgba(8,10,42,.54); backdrop-filter:blur(10px); }
.tab { min-height:40px; padding:0 8px; border-radius:13px; color:#aab7dc; font-size:14px; font-weight:800; }
.tab.active { color:#fff; background:linear-gradient(145deg,#8053da,#593aaa); box-shadow:inset 0 1px rgba(255,255,255,.14),0 6px 14px rgba(0,0,0,.2); }
.appearance-guide { margin:14px 0 13px; padding:14px 15px; border:1px solid rgba(142,155,225,.13); border-radius:17px; background:rgba(10,11,45,.55); backdrop-filter:blur(8px); }
.appearance-guide>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.appearance-guide strong { font-size:17px; }
.appearance-guide span { color:#b6c4e8; font-size:12px; }
.appearance-guide small { display:block; margin-top:5px; color:#8f9abc; font-size:12px; line-height:1.5; }
.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.theme-card { position:relative; min-height:168px; overflow:hidden; border:1px solid rgba(151,165,234,.17); border-radius:19px; background:linear-gradient(145deg,rgba(24,25,75,.76),rgba(9,10,40,.70)); box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.18); transition:transform .14s ease,border-color .14s ease; }
.theme-card:active { transform:scale(.985); }
.theme-card.active { border-color:rgba(255,220,91,.82); box-shadow:0 0 0 2px rgba(255,209,61,.11),0 12px 28px rgba(0,0,0,.22); }
.theme-card.locked { opacity:.52; filter:saturate(.6); }
.theme-name { position:absolute; z-index:3; left:12px; bottom:10px; color:#fff; font-size:14px; font-weight:800; text-shadow:0 2px 7px rgba(0,0,0,.72); }
.using { position:absolute; z-index:3; top:9px; right:9px; padding:5px 8px; border-radius:9px; background:#ffe05f; color:#473600; font-size:11px; font-weight:900; }
.unlock { position:absolute; z-index:3; top:9px; left:9px; padding:5px 7px; border-radius:9px; background:rgba(5,7,31,.78); color:#c2cff0; font-size:11px; font-weight:750; }
.ball-preview { display:flex; height:126px; padding:23px 10px 10px; align-items:center; justify-content:center; }
.ball-preview img { width:24%; max-width:45px; margin-left:-6px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.24)); }
.ball-preview img:first-child { margin-left:0; }
.tube-preview { display:grid; height:132px; padding-top:10px; place-items:center; }
.tube-preview img { height:120px; width:auto; filter:drop-shadow(0 5px 6px rgba(0,0,0,.23)); }
.background-card { min-height:176px; opacity:1!important; filter:none!important; background:#0c0d32; }
.background-card::after { content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:64px; background:linear-gradient(180deg,transparent,rgba(5,6,27,.88)); pointer-events:none; }
.background-preview { width:100%; height:144px; object-fit:cover; object-position:center bottom; opacity:1; filter:saturate(1.05) contrast(1.03); }
.background-card.locked .background-preview { opacity:.73; filter:saturate(.75) brightness(.80); }

.chapter-strip { display:flex; margin:-2px -14px 0; padding:2px 14px 12px; gap:9px; overflow:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.chapter-strip::-webkit-scrollbar { display:none; }
.chapter-chip { flex:0 0 auto; min-height:46px; padding:0 15px; border:1px solid rgba(142,157,228,.09); border-radius:14px; color:#aab8df; background:rgba(18,20,62,.72); font-size:14px; font-weight:780; scroll-snap-align:start; }
.chapter-chip.active { color:#fff; background:linear-gradient(145deg,#7c51d4,#5939a9); }
.chapter-chip.locked { opacity:.38; }
.chapter-summary { display:flex; margin:10px 2px 14px; align-items:flex-end; justify-content:space-between; gap:12px; }
.chapter-summary strong { font-size:22px; line-height:1.15; }
.chapter-summary span { color:#b6c3e8; font-size:13px; white-space:nowrap; }
.level-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.level-card { position:relative; display:grid; min-height:88px; padding:12px 6px 10px; place-items:center; align-content:center; gap:9px; border:1px solid rgba(142,157,228,.17); border-radius:18px; background:linear-gradient(145deg,rgba(28,30,84,.80),rgba(11,12,46,.73)); box-shadow:inset 0 1px rgba(255,255,255,.03); }
.level-card b { font-size:26px; line-height:1; }
.level-card span { color:#ffd94d; font-size:13px; letter-spacing:1px; }
.level-card em { position:absolute; top:6px; right:6px; padding:3px 5px; border-radius:6px; color:#fff; background:#cc2456; font-size:8px; font-style:normal; font-weight:900; }
.level-card.current { border-color:#ffdd51; box-shadow:0 0 0 2px rgba(255,218,70,.09),inset 0 1px rgba(255,255,255,.05); }
.level-card.locked { opacity:.30; }

.settings-list { overflow:hidden; border:1px solid rgba(150,161,230,.14); border-radius:20px; background:rgba(12,13,50,.62); backdrop-filter:blur(10px); }
.setting-row { display:flex; width:100%; min-height:62px; padding:0 16px; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid rgba(150,161,230,.10); color:#fff; font-size:16px; font-weight:700; text-align:left; }
.setting-row:last-child { border-bottom:0; }
.setting-row small { color:#aab7dc; font-size:14px; }
.setting-row.static { cursor:default; }
.switch { position:relative; flex:0 0 auto; width:46px; height:27px; border-radius:99px; background:#30345a; transition:background .18s ease; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#d9dcf0; box-shadow:0 2px 5px rgba(0,0,0,.28); transition:transform .18s ease; }
.switch.on { background:#28c894; }
.switch.on::after { transform:translateX(19px); background:#fff; }

.rank-summary { display:flex; min-height:104px; padding:17px 16px; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(142,157,228,.18); border-radius:22px; background:linear-gradient(145deg,rgba(54,45,132,.88),rgba(20,20,72,.82)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.20); }
.rank-summary small { display:block; color:#b8c5eb; font-size:12px; }
.rank-summary strong { display:block; margin-top:4px; color:#ffe05b; font-size:35px; line-height:1; }
.rank-summary strong em { margin-left:4px; color:#fff; font-size:13px; font-style:normal; }
.rank-summary button { min-height:42px; padding:0 14px; border:1px solid rgba(255,255,255,.16); border-radius:14px; color:#fff; background:rgba(105,83,210,.64); font-size:13px; font-weight:800; }
.rank-note { margin:12px 3px; color:#9eacd2; font-size:12px; line-height:1.55; }
.rank-list { overflow:hidden; border:1px solid rgba(144,157,226,.14); border-radius:20px; background:rgba(10,12,46,.64); }
.rank-row { display:grid; min-height:62px; padding:0 15px; align-items:center; grid-template-columns:44px minmax(0,1fr) auto; gap:9px; border-bottom:1px solid rgba(143,158,228,.10); }
.rank-row:last-child { border-bottom:0; }
.rank-row.top-1 { background:linear-gradient(90deg,rgba(255,208,48,.13),transparent); }
.rank-row.top-2 { background:linear-gradient(90deg,rgba(206,222,255,.10),transparent); }
.rank-row.top-3 { background:linear-gradient(90deg,rgba(233,145,73,.10),transparent); }
.rank-place { color:#b9c5e7; font-size:16px; text-align:center; }
.rank-row[class*="top-"] .rank-place { font-size:22px; }
.rank-player { overflow:hidden; color:#fff; font-size:14px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.rank-player i { display:inline-block; margin-left:7px; padding:2px 5px; border-radius:6px; color:#bceadf; background:rgba(37,190,144,.16); font-size:9px; font-style:normal; vertical-align:2px; }
.rank-score { color:#ffe26a; font-size:16px; white-space:nowrap; }
.rank-empty { padding:48px 20px; color:#9eacd0; font-size:14px; line-height:1.7; text-align:center; }

/* ---------------- Victory ---------------- */
.modal { position:absolute; z-index:100; inset:0; display:grid; padding:18px; place-items:center; visibility:hidden; opacity:0; pointer-events:none; background:rgba(3,4,22,.70); backdrop-filter:blur(8px); transition:opacity .2s ease,visibility 0s linear .22s; }
.modal.show { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }
.victory-card { position:relative; width:min(100%,430px); min-height:min(620px,84vh); overflow:hidden; padding:26px 22px 94px; border:1px solid rgba(137,119,235,.62); border-radius:32px; background:linear-gradient(180deg,#382c79 0%,#18134a 58%,#110d3c 100%); box-shadow:inset 0 1px rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.58); text-align:center; }
.modal.show .victory-card { animation:victoryCardIn .45s cubic-bezier(.18,.9,.22,1) both; }
.victory-rays { position:absolute; top:48px; left:50%; width:330px; height:260px; transform:translateX(-50%); opacity:.30; background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,211,83,.2) 8deg 14deg,transparent 14deg 32deg); -webkit-mask:radial-gradient(circle,#000 0 34%,transparent 72%); mask:radial-gradient(circle,#000 0 34%,transparent 72%); animation:raysRotate 14s linear infinite; }
.victory-art { position:relative; z-index:2; width:min(78%,310px); margin:-5px auto 0; filter:drop-shadow(0 13px 20px rgba(0,0,0,.34)); }
.modal.show .victory-art { animation:trophyIn .55s .06s cubic-bezier(.16,1.1,.22,1) both; }
.victory-stars { position:relative; z-index:2; display:flex; min-height:42px; margin:-4px 0 0; justify-content:center; gap:5px; }
.victory-stars span { color:#63558c; font-size:34px; opacity:.35; }
.victory-stars span.on { color:#ffda4f; opacity:1; filter:drop-shadow(0 0 8px rgba(255,217,70,.36)); }
.victory-card h2 { position:relative; z-index:2; margin:2px 0 0; font-size:34px; letter-spacing:-1px; }
.victory-card p { position:relative; z-index:2; margin:8px 0 13px; color:#c1bedf; font-size:13px; }
.reward { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:8px; color:#ffe15b; font-size:28px; }
.reward img { width:38px; height:38px; }
.unlock-banner { position:relative; z-index:2; display:none; margin:13px auto 0; padding:9px 12px; border:1px solid rgba(255,220,113,.16); border-radius:12px; color:#ffe8a2; background:rgba(255,210,74,.09); font-size:12px; line-height:1.45; }
.unlock-banner.show { display:block; }
.next-btn { position:absolute; z-index:4; left:22px; right:22px; bottom:23px; min-height:62px; border-radius:21px; color:#493800; background:linear-gradient(#ffd731,#ffbe17); box-shadow:inset 0 2px rgba(255,255,255,.42),inset 0 -6px rgba(188,120,0,.26),0 12px 24px rgba(0,0,0,.28); font-size:21px; font-weight:900; }
.next-btn:active { transform:translateY(2px) scale(.992); }
.next-btn.busy { filter:saturate(.55); }

/* ---------------- FX / system ---------------- */
.toast { position:absolute; z-index:200; left:50%; bottom:78px; max-width:84%; padding:11px 16px; border:1px solid rgba(161,178,255,.18); border-radius:15px; opacity:0; transform:translate(-50%,9px) scale(.97); color:#fff; background:rgba(8,10,39,.90); box-shadow:0 12px 28px rgba(0,0,0,.35); font-size:13px; line-height:1.45; text-align:center; pointer-events:none; backdrop-filter:blur(10px); transition:opacity .18s ease,transform .18s ease; }
.toast.show { opacity:1; transform:translate(-50%,0) scale(1); }
.screen-flash { z-index:150; opacity:0; background:radial-gradient(circle at 50% 45%,rgba(255,245,191,.55),rgba(127,110,255,.24) 38%,transparent 68%); }
.confetti,.spark-layer { position:fixed; z-index:160; inset:0; pointer-events:none; overflow:hidden; }
.confetti i { position:absolute; top:-20px; width:8px; height:13px; border-radius:2px; background:var(--c); transform:scale(var(--scale)); animation:confettiFall var(--dur) var(--delay) cubic-bezier(.1,.65,.25,1) forwards; }
.confetti i.round { width:8px; height:8px; border-radius:50%; }
.spark-layer i { position:fixed; width:5px; height:5px; margin:-2px; border-radius:50%; background:#ffe675; box-shadow:0 0 7px #ffd74f; animation:sparkFly .75s var(--delay) ease-out forwards; }
.boot-error { position:absolute; z-index:9999; inset:0; display:grid; place-items:center; padding:26px; background:#090821; }
.boot-error[hidden] { display:none; }
.boot-error>div { width:min(90vw,410px); padding:26px; border:1px solid rgba(146,141,255,.26); border-radius:24px; background:#171642; box-shadow:0 24px 70px rgba(0,0,0,.4); text-align:center; }
.boot-error strong { font-size:22px; }
.boot-error p { margin:9px 0 0; color:#b8b6da; font-size:14px; line-height:1.7; }

/* ---------------- Narrow phones ---------------- */
@media (max-width:370px) {
  .home-logo { top:8.5%; width:76vw; }
  .home-tube { --home-tube-h:205px; top:34%; }
  .home-tube-left { left:-16px; } .home-tube-right { right:-16px; }
  .home-center { top:44%; width:64vw; }
  .home-level-card { padding:11px 12px 10px; border-radius:20px; }
  .home-level-card strong { font-size:21px; }
  .home-level-card small { font-size:10px; }
  .play-btn { height:66px; margin-top:12px; border-radius:22px; }
  .play-btn svg { width:38px; height:38px; }
  .home-stats { margin-top:10px; }
  .home-stats span { min-width:64px; padding:7px 9px; font-size:13px; }
  .home-actions { width:88%; gap:9px; bottom:max(15px,calc(env(safe-area-inset-bottom) + 9px)); }
  .home-action { min-height:54px; padding:0 5px; border-radius:19px; font-size:13px; }
  .home-action svg { width:23px; height:23px; }
  .home-settings { width:47px; height:47px; border-radius:15px; }

  .topbar { padding-inline:7px; }
  .game-controls { gap:4px; }
  .game-control { width:47px; height:57px; border-radius:16px; }
  .control-icon { width:20px; height:20px; }
  .control-label { font-size:9px; }
  .control-count { min-width:19px; height:19px; font-size:9px; }
  .level-head { min-width:106px; }
  .level-head>strong { font-size:16px; }
  .level-head>div { font-size:8.5px; }
  .level-head small { font-size:9.5px; }
  .level-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .level-card { min-height:84px; }
}

/* ---------------- Short phones ---------------- */
@media (max-height:700px) {
  .home-logo { top:4.5%; width:min(68vw,330px); }
  .home-tube { --home-tube-h:185px; top:31%; }
  .home-center { top:39%; }
  .home-level-card { padding:9px 13px; }
  .home-level-card strong { font-size:20px; }
  .home-level-card small { font-size:10px; }
  .progress-track { margin-top:8px; height:5px; }
  .play-btn { height:62px; margin-top:10px; }
  .home-stats { margin-top:8px; }
  .home-actions { bottom:max(10px,env(safe-area-inset-bottom)); }
  .home-action { min-height:50px; }
  .board { top:17%; bottom:8%; }
  .victory-card { min-height:min(520px,92vh); padding-top:18px; }
  .victory-art { width:min(63%,240px); }
  .victory-stars span { font-size:29px; }
  .victory-card h2 { font-size:30px; }
}

/* ---------------- Larger mobile / tablet / PC ---------------- */
@media (min-width:430px) {
  .home-settings { width:56px; height:56px; right:18px; }
  .home-settings svg { width:27px; height:27px; }
  .home-logo { width:min(72vw,410px); }
  .home-tube-left { left:-5px; } .home-tube-right { right:-5px; }
  .home-action { min-height:66px; font-size:18px; }
  .home-action svg { width:29px; height:29px; }
  .game-control { width:56px; height:62px; }
  .control-icon { width:23px; height:23px; }
  .control-label { font-size:10.5px; }
  .level-head>strong { font-size:20px; }
  .level-head>div { font-size:10.5px; }
  .level-head small { font-size:11.5px; }
  .panel-head { padding-inline:16px; }
  .panel-content { padding-inline:16px; }
  .chapter-strip { margin-inline:-16px; padding-inline:16px; }
  .level-card { min-height:92px; }
}

@media (min-width:700px) {
  .app { height:min(94vh,940px); border-radius:26px; }
  .home-logo { width:min(68%,410px); top:6%; }
  .home-tube { --home-tube-h:300px; top:31%; }
  .home-tube-left { left:10px; } .home-tube-right { right:10px; }
  .home-center { width:320px; top:43%; }
  .home-actions { width:390px; bottom:30px; }
  .topbar { height:154px; padding:max(18px,env(safe-area-inset-top)) 18px 0; }
  .game-controls { gap:9px; }
  .game-control { width:64px; height:68px; border-radius:20px; }
  .control-icon { width:25px; height:25px; }
  .control-label { font-size:11px; }
  .level-head { top:max(20px,calc(env(safe-area-inset-top) + 3px)); min-width:170px; }
  .level-head>strong { font-size:22px; }
  .level-head>div { font-size:11px; }
  .level-head small { font-size:12px; }
  .panel-head { height:100px; padding:18px 20px 0; }
  .panel-head h2 { top:24px; font-size:25px; }
  .back-btn { width:54px; height:54px; }
  .coin { min-height:48px; font-size:17px; }
  .panel-content { top:94px; padding:14px 20px 28px; }
  .chapter-strip { margin-inline:-20px; padding-inline:20px; }
  .level-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
  .level-card { min-height:94px; }
  .theme-grid { gap:14px; }
}

@media (hover:hover) and (pointer:fine) {
  .home-settings:hover,.home-action:hover,.game-control:not(:disabled):hover,.back-btn:hover,.tab:hover,.chapter-chip:hover,.level-card:not(.locked):hover,.theme-card:not(.locked):hover { filter:brightness(1.08); }
  .tube:hover .tube-frame { filter:drop-shadow(0 5px 7px rgba(0,0,0,.22)) drop-shadow(0 0 6px rgba(112,162,255,.16)); }
}


/* v1.0.3 transparent home logo fix */
.home-logo {
  background: transparent !important;
  isolation: isolate;
  pointer-events: none;
}


/* v1.0.7 classic logo transparency fix: preserve the approved original logo artwork. */
.game-logo-image, .home-logo-image {
  object-fit: contain !important;
  overflow: visible !important;
  background: transparent !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}