:root {
  color-scheme: dark;
  --ink: #f8f5ff;
  --muted: #b9b7d8;
  --night: #090d29;
  --panel: rgba(18, 24, 64, 0.88);
  --panel-soft: rgba(28, 35, 86, 0.72);
  --line: rgba(184, 199, 255, 0.2);
  --blue: #67e8ff;
  --violet: #968cff;
  --pink: #ff91ce;
  --peach: #ffc5a5;
  --gold: #ffe292;
  --green: #85f0c2;
  --danger: #ff7a9a;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #070a20;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

button { color: inherit; font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(77, 68, 196, .32), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(28, 178, 194, .18), transparent 35%),
    #070a20;
}

.ambient { position: fixed; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.ambient-one { background: #705dff; left: 5%; top: 5%; }
.ambient-two { background: #24d0d5; right: 5%; bottom: 5%; }

#game-shell {
  position: relative;
  width: min(100vw, calc(100vh * 420 / 820), 480px);
  height: min(100vh, calc(100vw * 820 / 420), 900px);
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  box-shadow: 0 22px 90px rgba(0, 0, 0, .64), 0 0 0 1px rgba(180, 190, 255, .12);
}

.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; animation: screen-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes screen-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* Home */
#home-screen { background: linear-gradient(180deg, rgba(8, 13, 45, .03) 0%, rgba(8, 12, 37, .08) 44%, #0b102f 74%); }
.home-art { position: absolute; inset: 0; background-image: linear-gradient(180deg, transparent 42%, rgba(10, 15, 47, .82) 67%, #0b102f 82%), url("assets/moon-ruins-bg.webp"); background-size: cover; background-position: center top; filter: saturate(1.05); }
.home-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 26%, transparent 0 19%, rgba(8,12,37,.06) 38%, rgba(7,10,30,.44) 100%); }

.top-actions { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; }
.icon-btn, .back-btn, .hud-icon { display: grid; place-items: center; border-radius: 50%; background: rgba(12,18,53,.68); border: 1px solid rgba(210,220,255,.22); box-shadow: inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.icon-btn { width: 38px; height: 38px; font-weight: 800; font-size: 18px; }
.icon-btn.muted { color: #8388ae; }

.brand-block { position: absolute; z-index: 2; top: 8.5%; left: 0; width: 100%; text-align: center; text-shadow: 0 3px 20px #10184a; }
.eyebrow { margin: 0 0 3px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--blue); font-size: 9px; letter-spacing: .26em; font-weight: 800; }
.eyebrow span { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.eyebrow span:last-child { transform: scaleX(-1); }
.brand-block h1 { margin: 0; font-family: "Ma Shan Zheng", cursive; font-size: clamp(48px, 12vw, 64px); letter-spacing: .06em; line-height: 1.05; background: linear-gradient(180deg, #fff 12%, #dce1ff 55%, #8eeaff); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(43,51,116,.6)); }
.brand-block > p:last-child { margin: 5px 0 0; font-size: 11px; color: #d5d6ee; letter-spacing: .03em; }

.resource-pill-row { position: absolute; z-index: 3; top: 47.5%; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.resource-pill { min-width: 86px; height: 42px; padding: 5px 10px 5px 39px; position: relative; background: rgba(9,15,47,.68); border: 1px solid rgba(188,204,255,.2); border-radius: 14px; backdrop-filter: blur(9px); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 16px 12px; column-gap: 5px; }
.resource-pill strong { font-size: 13px; align-self: end; }
.resource-pill small { grid-column: 1 / 3; color: #9da4ca; font-size: 8px; }
.resource-icon { position: absolute; display: grid; place-items: center; width: 29px; height: 29px; left: 6px; top: 6px; border-radius: 10px; font-size: 16px; text-shadow: 0 1px 5px currentColor; }
.resource-icon.blue { color: #7eeaff; background: rgba(57,202,244,.15); }
.resource-icon.pink { color: #ff9fd4; background: rgba(255,96,176,.15); }
.resource-icon.gold { color: #ffe28a; background: rgba(255,197,76,.15); }

.home-bottom { position: absolute; z-index: 3; inset: auto 0 0; padding: 0 16px max(10px, env(safe-area-inset-bottom)); }
.chapter-card { height: 70px; margin-bottom: 10px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; border-radius: 19px; background: linear-gradient(135deg, rgba(37,44,98,.88), rgba(17,24,65,.9)); border: 1px solid rgba(183,194,255,.2); box-shadow: 0 12px 30px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.chapter-copy span { display: block; color: #9ba2cd; font-size: 8px; letter-spacing: .1em; }
.chapter-copy strong { font-size: 17px; line-height: 22px; }
.chapter-copy p { margin: 0; color: var(--blue); font-size: 9px; }
.chapter-copy i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.difficulty-badge { width: 48px; height: 48px; padding-top: 6px; border-radius: 15px; text-align: center; font-size: 8px; color: #c4c7e4; background: linear-gradient(145deg, rgba(126,110,255,.38), rgba(56,64,144,.34)); border: 1px solid rgba(164,156,255,.32); }
.difficulty-badge b { color: #fff; font-size: 15px; }
.difficulty-badge:active { transform: scale(.95); }
.difficulty-badge.danger { background: linear-gradient(145deg, rgba(255,92,150,.42), rgba(103,50,130,.42)); border-color: rgba(255,150,195,.4); }
.difficulty-badge.nightmare { background: linear-gradient(145deg, rgba(244,117,62,.45), rgba(114,35,77,.46)); border-color: rgba(255,190,122,.44); box-shadow: 0 0 16px rgba(255,95,111,.16); }

.primary-btn { width: 100%; height: 64px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 21px; background: linear-gradient(135deg, #7470ed, #677eea 42%, #3fc7dd); box-shadow: 0 12px 28px rgba(69,106,222,.34), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -3px rgba(44,49,143,.25); transition: transform .15s, filter .15s; }
.primary-btn:active, .primary-small:active { transform: translateY(2px) scale(.99); filter: brightness(.95); }
.play-gem { display: grid; place-items: center; width: 35px; height: 35px; padding-left: 2px; border-radius: 12px; color: #5b6ddd; background: #fff; transform: rotate(45deg); box-shadow: 0 5px 14px rgba(30,45,116,.24); }
.play-gem::first-letter { transform: rotate(-45deg); }
.primary-btn > span:last-child { text-align: left; display: flex; flex-direction: column; }
.primary-btn b { font-size: 17px; letter-spacing: .04em; }
.primary-btn small { color: rgba(255,255,255,.76); font-size: 9px; font-weight: 500; }

.bottom-nav { height: 62px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 7px; }
.nav-item { background: transparent; color: #727aab; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: color .2s; }
.nav-item span { font-size: 20px; line-height: 22px; }
.nav-item b { font-size: 9px; }
.nav-item.active { color: #9ceeff; text-shadow: 0 0 12px rgba(94,225,255,.55); }

/* Panels */
.panel-screen { overflow-y: auto; touch-action: pan-y; background: radial-gradient(circle at 50% -10%, #26307b 0, #12183f 37%, #090d29 78%); padding-bottom: 26px; scrollbar-width: none; }
.panel-screen::-webkit-scrollbar { display: none; }
.panel-header { position: sticky; z-index: 4; top: 0; min-height: 84px; padding: max(15px, env(safe-area-inset-top)) 16px 12px; display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(12,17,51,.98) 0%, rgba(12,17,51,.86) 74%, transparent); backdrop-filter: blur(10px); }
.back-btn { flex: 0 0 auto; width: 38px; height: 38px; font-size: 28px; line-height: 1; }
.panel-header > div:nth-child(2) { flex: 1; }
.panel-header small { color: #858fc2; font-size: 7px; letter-spacing: .19em; }
.panel-header h2 { margin: 0; font-size: 18px; }
.mini-balance { padding: 7px 10px; border-radius: 12px; background: rgba(16,24,67,.8); border: 1px solid var(--line); color: var(--blue); font-size: 12px; }
.mini-balance b { color: #fff; margin-left: 4px; }
.forge-balances { display: grid; grid-template-columns: repeat(3,auto); gap: 3px 7px; padding: 6px 8px; border-radius: 12px; background: rgba(16,24,67,.8); border: 1px solid var(--line); font-size: 8px; }
.forge-balances span:nth-child(1) { color: var(--blue); }
.forge-balances span:nth-child(2) { color: var(--pink); }
.forge-balances span:nth-child(3) { color: var(--gold); }
.forge-balances b { color: #fff; }

.workshop-hero { height: 180px; margin: 0 16px 12px; position: relative; border-radius: 23px; overflow: hidden; background: linear-gradient(135deg, rgba(88,78,183,.48), rgba(26,128,156,.3)), radial-gradient(circle at 80% 30%, rgba(111,243,255,.2), transparent 30%); border: 1px solid rgba(187,195,255,.2); }
.workshop-hero::before { content: "✦  ·  ✦  ·  ☾"; position: absolute; right: 20px; bottom: 18px; color: rgba(139,229,255,.16); font-size: 34px; letter-spacing: .1em; transform: rotate(-10deg); }
.workshop-hero img { position: absolute; height: 205px; width: 137px; object-fit: contain; left: 1px; bottom: -28px; filter: drop-shadow(0 12px 15px rgba(0,0,0,.36)); }
.speech { position: absolute; top: 28px; right: 18px; width: 218px; padding: 14px; border-radius: 16px 16px 16px 4px; background: rgba(247,245,255,.93); color: #212851; box-shadow: 0 10px 25px rgba(3,7,30,.2); }
.speech b { display: block; font-size: 13px; }
.speech span { color: #697099; font-size: 8px; }

.growth-summary { margin: 0 16px 10px; padding: 10px 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; border-radius: 17px; background: rgba(15,22,62,.72); border: 1px solid rgba(175,190,255,.16); }
.growth-summary span { padding: 7px 4px; text-align: center; border-radius: 11px; background: rgba(71,78,147,.28); }
.growth-summary b { display: block; font-size: 13px; color: #e9faff; }
.growth-summary small { display: block; color: #8f97c0; font-size: 7px; }
.forge-list { padding: 0 16px; display: grid; gap: 9px; }
.forge-card { min-height: 103px; padding: 12px; display: grid; grid-template-columns: 54px 1fr auto; gap: 11px; align-items: center; border-radius: 19px; background: linear-gradient(135deg, rgba(39,47,102,.92), rgba(20,27,73,.92)); border: 1px solid rgba(176,188,255,.17); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.forge-card.locked { opacity: .66; filter: saturate(.65); }
.forge-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; font-size: 25px; background: linear-gradient(145deg, rgba(134,118,255,.27), rgba(72,217,240,.12)); border: 1px solid rgba(166,178,255,.2); }
.forge-copy strong { font-size: 13px; }
.forge-copy strong > small { margin-left: 3px; color: #7eeaff; font-size: 7px; }
.forge-tag { display: inline-block; margin-bottom: 3px; color: #8f97c2; font-size: 6px; letter-spacing: .13em; }
.forge-copy p { margin: 3px 0 8px; color: #9fa6ca; font-size: 8px; }
.forge-lock { color: #ffbcce !important; }
.pips { display: flex; gap: 4px; }
.pips i { flex: 1; max-width: 20px; height: 4px; border-radius: 5px; background: #313967; }
.pips i.on { background: linear-gradient(90deg, #8580ff, #62dff2); box-shadow: 0 0 7px rgba(98,223,242,.5); }
.forge-action { min-width: 82px; padding: 8px 7px; border-radius: 12px; color: #17204d; background: linear-gradient(135deg, #e3e5ff, #8de9f4); font-size: 8px; font-weight: 800; }
.forge-action span { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 5px; margin-top: 2px; color: #3d4d87; font-size: 7px; }
.forge-action span i { font-style: normal; }
.forge-action:disabled { background: #30375e; color: #767d9e; opacity: .7; cursor: not-allowed; }
.tip-card, .lore-card { margin: 12px 16px 0; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-radius: 17px; background: rgba(101,93,191,.13); border: 1px dashed rgba(165,172,244,.24); }
.tip-card > span, .lore-card > span { color: var(--blue); font-size: 23px; }
.tip-card p, .lore-card p { margin: 0; color: #989fc5; font-size: 8px; line-height: 1.7; }
.tip-card b, .lore-card b { color: #dce0fa; font-size: 10px; }

.archive-count { min-width: 42px; font-size: 10px; color: #7d85ad; }
.archive-count b { font-size: 18px; color: var(--blue); }
.filter-row { display: flex; gap: 7px; padding: 4px 16px 13px; }
.filter { padding: 7px 14px; border-radius: 12px; background: rgba(45,52,104,.65); color: #969dc4; font-size: 9px; }
.filter.active { color: #142050; background: #a7ecf6; font-weight: 800; }
.collection-grid { padding: 0 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.treasure-card { position: relative; height: 150px; padding: 10px; overflow: hidden; border-radius: 19px; background: linear-gradient(150deg, rgba(42,50,107,.94), rgba(18,25,68,.95)); border: 1px solid rgba(178,189,255,.17); }
.treasure-card::before { content: ""; position: absolute; width: 90px; height: 90px; left: 50%; top: 5px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(108,226,249,.19), transparent 67%); }
.treasure-card.locked { filter: grayscale(.7); opacity: .6; }
.treasure-card.locked .treasure-emoji { filter: brightness(.2); }
.treasure-emoji { position: relative; height: 79px; display: grid; place-items: center; font-size: 49px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
.treasure-card strong { display: block; font-size: 11px; }
.treasure-card small { color: #8790bb; font-size: 7px; }
.rarity-dot { position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); }

/* Battle */
#game-screen { background: #0c1135; }
#game-canvas { display: block; width: 100%; height: 100%; }
#game-hud { position: absolute; z-index: 4; inset: 0 0 auto; padding: max(11px, env(safe-area-inset-top)) 11px 0; pointer-events: none; }
.hud-top { display: grid; grid-template-columns: 42px 1fr 56px; align-items: center; }
.hud-icon { width: 35px; height: 35px; pointer-events: auto; font-size: 11px; }
.timer-wrap { justify-self: center; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.timer-wrap span { display: block; color: #aeb7dc; font-size: 8px; }
.timer-wrap b { font-size: 21px; letter-spacing: .05em; }
.kill-count { justify-self: end; min-width: 52px; padding: 7px 9px; border-radius: 12px; background: rgba(10,16,50,.58); border: 1px solid rgba(201,211,255,.18); backdrop-filter: blur(6px); font-size: 11px; }
.kill-count span { color: #d4caff; margin-right: 5px; }
.vitals { margin-top: 7px; width: 225px; height: 46px; display: flex; align-items: center; }
.avatar { width: 44px; height: 44px; position: relative; overflow: visible; border: 2px solid #cad6ff; border-radius: 15px; background: #394183; box-shadow: 0 3px 14px rgba(0,0,0,.3); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: 12px; }
.avatar span { position: absolute; right: -6px; bottom: -5px; display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 7px; background: #655ee0; border: 1px solid #d8d7ff; font-size: 8px; font-weight: 800; }
.bars { margin-left: -3px; flex: 1; }
.bar { position: relative; overflow: hidden; background: rgba(8,11,36,.84); border: 1px solid rgba(225,228,255,.18); }
.bar i { display: block; width: 100%; height: 100%; transition: width .2s; }
.bar.hp { height: 17px; border-radius: 0 10px 10px 0; }
.bar.hp i { background: linear-gradient(90deg, #ff6e9e, #ff9a9d); box-shadow: 0 0 10px rgba(255,99,146,.4); }
.bar.hp span { position: absolute; inset: 0; text-align: center; font-size: 7px; font-weight: 800; line-height: 15px; text-shadow: 0 1px 3px #8c3258; }
.bar.xp { width: 88%; height: 7px; border-radius: 0 0 7px 0; }
.bar.xp i { background: linear-gradient(90deg, #66e2fd, #9288ff); }
.run-loot { margin-top: 4px; display: flex; gap: 5px; }
.run-loot span { padding: 4px 7px; min-width: 42px; border-radius: 8px; background: rgba(10,16,50,.52); border: 1px solid rgba(201,211,255,.12); font-size: 8px; }
.drop { display: inline-block; width: 7px; height: 7px; margin-right: 4px; transform: rotate(45deg); border-radius: 2px; }
.drop.crystal { background: #63e7ff; box-shadow: 0 0 5px #63e7ff; }
.drop.coin { background: #ffe080; box-shadow: 0 0 5px #ffe080; border-radius: 50%; }
.power-rack { margin: 4px 0 0 47px; display: flex; gap: 4px; min-height: 20px; }
.power-rack span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; background: rgba(18,24,68,.7); border: 1px solid rgba(134,229,255,.25); font-size: 11px; box-shadow: 0 0 7px rgba(105,221,255,.12); }
.skill-route-rack { margin:3px 0 0 47px; display:flex; gap:4px; min-height:18px; }
.skill-route-rack span { min-width:30px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center; gap:3px; border-radius:7px; color:#f3f5ff; background:color-mix(in srgb,var(--route-color) 22%,rgba(14,20,61,.8)); border:1px solid color-mix(in srgb,var(--route-color) 50%,transparent); font-size:7px; box-shadow:0 0 7px color-mix(in srgb,var(--route-color) 18%,transparent); }
.skill-route-rack b { font-size:8px; }

.stage-progress { width: 225px; margin: -1px 0 0 47px; display: flex; align-items: center; gap: 4px; }
.stage-progress i { width: 24px; height: 3px; border-radius: 3px; background: rgba(135,145,195,.34); transition: background .3s, box-shadow .3s; }
.stage-progress i.active { background: #78e6fa; box-shadow: 0 0 7px rgba(103,232,255,.65); }
.stage-progress i.done { background: #ab9aff; }
.stage-progress span { margin-left: 3px; color: #bdc4e2; font-size: 7px; text-shadow: 0 1px 4px #000; }

.boss-hud { position: absolute; z-index: 4; top: 96px; left: 50%; transform: translateX(-50%); width: 74%; text-align: center; transition: opacity .3s, transform .3s; }
.boss-hud.hidden { opacity: 0; transform: translate(-50%,-10px); pointer-events: none; }
.boss-hud span { font-size: 9px; font-weight: 700; color: #ffe0f0; text-shadow: 0 2px 5px #5c1744; }
.boss-hud div { height: 9px; padding: 2px; border-radius: 9px; background: rgba(15,9,35,.85); border: 1px solid rgba(255,199,230,.32); }
.boss-hud i { display: block; width: 100%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #d45bd5, #ff78a9); transition: width .2s; }

.combo-display { position: absolute; z-index: 5; right: 13px; top: 146px; text-align: right; opacity: 0; transform: translateX(8px) scale(.9); transition: opacity .2s, transform .2s; pointer-events: none; text-shadow: 0 2px 9px rgba(17,7,50,.8); }
.combo-display.show { opacity: 1; transform: none; }
.combo-display small { display: block; color: #9defff; font-size: 7px; letter-spacing: .16em; }
.combo-display b { display: block; font-size: 25px; font-style: italic; background: linear-gradient(180deg,#fff,#ffcf86); -webkit-background-clip: text; color: transparent; }
.combo-display.hot b { filter: drop-shadow(0 0 8px rgba(255,109,172,.7)); }

.message-toast { position: absolute; z-index: 6; left: 50%; top: 155px; transform: translate(-50%,-8px); padding: 7px 14px; border-radius: 12px; color: #e9ebff; background: rgba(20,25,71,.82); border: 1px solid rgba(179,191,255,.2); backdrop-filter: blur(8px); font-size: 9px; opacity: 0; pointer-events: none; transition: opacity .24s, transform .24s; white-space: nowrap; }
.message-toast.show { opacity: 1; transform: translate(-50%,0); }

#controls { position: absolute; z-index: 5; inset: auto 0 max(15px, env(safe-area-inset-bottom)); height: 145px; pointer-events: none; }
.joystick { position: absolute; left: 76px; top: 76px; width: 112px; height: 112px; border-radius: 50%; border: 1px solid rgba(200,218,255,.22); background: radial-gradient(circle, rgba(123,139,221,.25) 0 36%, rgba(11,17,51,.4) 38% 100%); box-shadow: inset 0 0 20px rgba(109,135,222,.18), 0 8px 24px rgba(0,0,0,.2); pointer-events: none; touch-action: none; opacity: 0; transform: translate(-50%,-50%) scale(.72); transition: opacity .14s, transform .14s; }
.joystick.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.joystick::before, .joystick::after { content: ""; position: absolute; background: rgba(189,206,255,.12); }
.joystick::before { width: 1px; height: 72%; top: 14%; left: 50%; }
.joystick::after { height: 1px; width: 72%; left: 14%; top: 50%; }
.joystick i { position: absolute; width: 52px; height: 52px; left: 29px; top: 29px; border-radius: 50%; background: linear-gradient(145deg, rgba(198,216,255,.35), rgba(106,113,204,.28)); border: 1px solid rgba(230,237,255,.27); box-shadow: 0 7px 15px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.2); transition: transform .06s; }
.skill-cluster { position: absolute; right: 16px; bottom: 6px; display: flex; align-items: flex-end; gap: 10px; pointer-events: auto; }
.skill-btn { position: relative; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4d5cac, #222d70 68%); border: 2px solid rgba(214,222,255,.45); box-shadow: 0 6px 19px rgba(0,0,0,.3), inset 0 0 14px rgba(155,183,255,.28); overflow: visible; }
.skill-btn i { font-style: normal; filter: drop-shadow(0 0 5px rgba(130,235,255,.65)); }
.skill-btn span { position: absolute; inset: 2px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(7,11,36,.7); font-weight: 800; font-size: 15px; opacity: 0; }
.skill-btn.cooling span { opacity: 1; }
.skill-btn small { position: absolute; bottom: -18px; white-space: nowrap; color: #d8dbef; font-size: 7px; text-shadow: 0 2px 4px #000; }
.skill-btn:active { transform: scale(.92); }
.skill-btn.dash { width: 55px; height: 55px; margin-bottom: 3px; }
.skill-btn.dash i { font-size: 21px; transform: rotate(-20deg); }
.skill-btn.ultimate { width: 78px; height: 78px; background: radial-gradient(circle at 35% 30%, #aa8bf6, #3a3b9e 58%, #13225f 78%); border-color: #c9d5ff; }
.skill-btn.ultimate i { font-size: 37px; color: #c7f5ff; }

/* Modals */
.modal-layer { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5,8,28,.66); backdrop-filter: blur(8px); transition: opacity .2s; }
.modal-layer.hidden { opacity: 0; pointer-events: none; }
.modal { width: 100%; max-height: calc(100% - 20px); overflow-y: auto; padding: 25px 18px 20px; position: relative; text-align: center; border-radius: 27px; background: linear-gradient(160deg, rgba(43,51,111,.98), rgba(16,23,67,.99)); border: 1px solid rgba(199,208,255,.23); box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.1); animation: modal-pop .28s cubic-bezier(.18,.9,.25,1.2); }
.modal.hidden { display: none; }
@keyframes modal-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
.modal-kicker { margin: 0 0 2px; color: var(--blue); font-size: 8px; font-weight: 900; letter-spacing: .22em; }
.modal h2 { margin: 0; font-size: 24px; }
.modal-sub, .modal > p:not(.modal-kicker) { margin: 5px 0 17px; color: #a8aecf; font-size: 9px; }
.upgrade-options { display: grid; gap: 9px; }
.upgrade-card { --route-color:#67e8ff; min-height: 96px; padding: 10px; display: grid; grid-template-columns: 56px 1fr 20px; gap: 11px; align-items: center; text-align: left; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb,var(--route-color) 20%,rgba(62,69,143,.78)), rgba(25,34,88,.88)); border: 1px solid color-mix(in srgb,var(--route-color) 42%,rgba(177,188,255,.18)); transition: transform .15s, border-color .15s; }
.upgrade-card.awakening { box-shadow:inset 0 0 20px color-mix(in srgb,var(--route-color) 17%,transparent),0 0 18px color-mix(in srgb,var(--route-color) 12%,transparent); }
.upgrade-card:active { transform: scale(.98); border-color: var(--blue); }
.upgrade-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: radial-gradient(circle at 30% 25%, rgba(141,238,255,.27), rgba(116,98,227,.27)); font-size: 27px; }
.upgrade-card strong { display: block; font-size: 13px; }
.route-tag { display:block; margin-bottom:2px; color:var(--route-color); font-size:6px; font-weight:900; letter-spacing:.1em; }
.upgrade-card p { margin: 3px 0; color: #b8bede; font-size: 8px; line-height: 1.5; }
.upgrade-card small { color: var(--blue); font-size: 7px; }
.upgrade-arrow { color: #93a1d0; font-size: 20px; }

.loot-modal { overflow: hidden; }
.loot-rays { position: absolute; width: 220px; height: 220px; top: 30px; left: 50%; transform: translateX(-50%); opacity: .15; background: conic-gradient(from 0deg, transparent, #8befff 10deg, transparent 22deg, #b19aff 34deg, transparent 48deg, #8befff 65deg, transparent 78deg); border-radius: 50%; animation: rays 16s linear infinite; }
@keyframes rays { to { transform: translateX(-50%) rotate(360deg); } }
.loot-reveal { position: relative; margin: 16px auto 20px; padding: 15px; width: 188px; min-height: 190px; border-radius: 25px; background: radial-gradient(circle at 50% 30%, rgba(130,231,255,.24), transparent 52%), rgba(14,21,65,.5); border: 1px solid rgba(155,217,255,.26); }
.loot-reveal .big-item { display: grid; place-items: center; height: 105px; font-size: 70px; filter: drop-shadow(0 10px 13px rgba(0,0,0,.35)); }
.loot-reveal strong { display: block; font-size: 16px; }
.loot-reveal small { color: #87e6f5; font-size: 8px; }
.loot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.secondary-btn, .primary-small { min-height: 47px; border-radius: 15px; font-size: 11px; font-weight: 800; }
.secondary-btn { color: #c7cbea; background: rgba(50,58,111,.75); border: 1px solid rgba(182,191,238,.18); }
.primary-small { width: 100%; background: linear-gradient(135deg, #7d72ec, #48cbdc); box-shadow: 0 8px 19px rgba(64,111,212,.25); }
.text-btn { margin-top: 8px; padding: 11px 20px; background: transparent; color: #949bc2; font-size: 10px; }

.route-modal { overflow: hidden; }
.route-modal::before { content: ""; position: absolute; width: 280px; height: 280px; left: 50%; top: -150px; transform: translateX(-50%); background: radial-gradient(circle, rgba(108,224,255,.2), transparent 67%); pointer-events: none; }
.route-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.route-card { min-height: 178px; padding: 15px 11px 12px; position: relative; overflow: hidden; border-radius: 20px; text-align: left; color: #e8eaff; background: linear-gradient(160deg, rgba(78,79,158,.76), rgba(28,37,91,.88)); border: 1px solid rgba(181,194,255,.22); transition: transform .15s, border-color .15s; }
.route-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -32px; bottom: -35px; border-radius: 50%; background: var(--route-glow, rgba(97,228,255,.15)); }
.route-card:active { transform: scale(.97); border-color: #8feaff; }
.route-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 17px; font-size: 27px; background: rgba(12,20,64,.4); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.route-card strong { display: block; font-size: 13px; }
.route-card p { min-height: 34px; margin: 5px 0 8px !important; color: #b2b8d8 !important; font-size: 8px !important; line-height: 1.5; }
.route-card small { color: #8eeeff; font-size: 7px; font-weight: 700; }
.next-stage-preview { margin: 12px 0 0; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 13px; background: rgba(12,18,58,.48); }
.next-stage-preview span { color: #828bb7; font-size: 7px; letter-spacing: .13em; }
.next-stage-preview b { font-size: 10px; }

.boss-power-modal { overflow: hidden; }
.boss-power-modal::before { content:""; position:absolute; inset:-80px 0 auto; height:210px; background: radial-gradient(circle,rgba(111,232,255,.23),transparent 68%); pointer-events:none; }
.boss-power-options { display:grid; gap:8px; margin-top:14px; }
.boss-power-card { min-height:83px; padding:10px; display:grid; grid-template-columns:54px 1fr 19px; align-items:center; gap:10px; text-align:left; border-radius:18px; color:#eef0ff; background:linear-gradient(135deg,rgba(78,75,164,.78),rgba(27,36,92,.92)); border:1px solid rgba(174,219,255,.24); }
.boss-power-card:active { transform:scale(.98); border-color:#8defff; }
.boss-power-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; font-size:27px; background:radial-gradient(circle at 35% 30%,rgba(160,242,255,.28),rgba(113,80,218,.24)); box-shadow:inset 0 1px rgba(255,255,255,.12); }
.boss-power-card strong { display:block; font-size:12px; }
.boss-power-card p { margin:3px 0 !important; color:#b6bbdc !important; font-size:8px !important; line-height:1.45; }
.boss-power-card small { color:#ffdb8e; font-size:7px; }
.boss-power-card > i { font-style:normal; color:#9eadd6; font-size:20px; }

.clear-modal { overflow:hidden; }
.clear-modal::before { content:""; position:absolute; width:330px; height:330px; left:50%; top:-220px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(111,235,255,.28),rgba(116,86,237,.12) 45%,transparent 70%); }
.endless-emblem { position:relative; width:76px; height:76px; margin:0 auto 8px; display:grid; place-items:center; border-radius:25px; color:#ecfbff; font-size:47px; font-weight:300; background:radial-gradient(circle at 35% 25%,rgba(128,238,255,.35),rgba(101,72,210,.36)); border:1px solid rgba(177,226,255,.28); box-shadow:0 0 30px rgba(99,219,255,.18); }
.clear-preview { margin:12px 0; padding:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; border-radius:15px; background:rgba(10,17,55,.48); }
.clear-preview span { color:#8e96bf; font-size:7px; }
.clear-preview b { display:block; color:#f0f2ff; font-size:13px; }
.endless-btn { width:100%; min-height:66px; display:grid; grid-template-columns:48px 1fr; grid-template-rows:1fr 1fr; align-items:center; text-align:left; padding:9px 13px; border-radius:18px; color:#f4f7ff; background:linear-gradient(135deg,#715edb,#426fc9 52%,#27bccc); border:1px solid rgba(193,233,255,.38); box-shadow:0 10px 24px rgba(52,87,191,.28); }
.endless-btn > span { grid-row:1/3; font-size:36px; }
.endless-btn b { align-self:end; font-size:13px; }
.endless-btn small { align-self:start; color:rgba(255,255,255,.75); font-size:7px; }
.clear-settle { width:100%; margin-top:9px; }
.stage-progress.endless i { background:#8eeaff; box-shadow:0 0 7px rgba(103,232,255,.8); }
.stage-progress.endless span { color:#ffdd91; }

.pause-modal { max-width: 310px; }
.pause-route-summary { margin:10px 0 4px; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.pause-route-summary span { padding:6px 2px; display:grid; gap:2px; place-items:center; border-radius:10px; color:var(--route-color); background:color-mix(in srgb,var(--route-color) 12%,rgba(18,24,68,.8)); border:1px solid color-mix(in srgb,var(--route-color) 30%,transparent); font-size:14px; }
.pause-route-summary b { color:#eef1ff; font-size:8px; }
.pause-route-summary small { color:#8f97bd; font-size:6px; }
.pause-moon { display: block; margin: -4px 0 5px; color: var(--blue); font-size: 56px; text-shadow: 0 0 25px rgba(92,231,255,.4); }
.pause-modal .primary-small, .result-modal .primary-small { margin-top: 12px; }
.result-modal { max-width: 360px; }
.result-crown { width: 64px; height: 64px; margin: -3px auto 8px; display: grid; place-items: center; border-radius: 22px; color: #ffea9b; background: radial-gradient(circle, rgba(255,225,112,.27), rgba(142,98,223,.15)); border: 1px solid rgba(255,226,143,.23); font-size: 35px; box-shadow: 0 0 30px rgba(255,203,100,.12); }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; border-block: 1px solid rgba(179,189,240,.14); }
.result-stats div { border-right: 1px solid rgba(179,189,240,.12); }
.result-stats div:last-child { border: 0; }
.result-stats span { display: block; color: #8e96be; font-size: 7px; }
.result-stats b { font-size: 14px; }
.result-loot { min-height: 52px; margin: 12px 0 0; display: flex; justify-content: center; gap: 8px; }
.result-loot span { min-width: 70px; padding: 8px; border-radius: 13px; background: rgba(13,20,61,.5); font-size: 15px; }
.result-loot small { display: block; color: #9299c1; font-size: 7px; }

.help-modal { max-width: 350px; }
.help-grid { display: grid; gap: 8px; margin: 14px 0; text-align: left; }
.help-grid > div { display: grid; grid-template-columns: 45px 1fr; gap: 10px; align-items: center; padding: 9px; border-radius: 15px; background: rgba(44,53,112,.55); }
.help-grid > div > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--blue); background: rgba(103,221,248,.11); font-size: 21px; }
.help-grid p { margin: 0 !important; }
.help-grid b { display: block; color: #e9ebff; font-size: 11px; }
.help-grid small { display: block; color: #9ca3c6; font-size: 7px; line-height: 1.5; }

@media (max-height: 680px) {
  .brand-block { top: 5.5%; }
  .brand-block h1 { font-size: 43px; }
  .resource-pill-row { top: 43%; }
  .chapter-card { height: 59px; }
  .primary-btn { height: 56px; }
  .bottom-nav { height: 48px; }
  .joystick { width: 100px; height: 100px; }
  .joystick i { width: 48px; height: 48px; left: 25px; top: 25px; }
  .skill-cluster { transform: scale(.86); transform-origin: right bottom; }
}

@media (min-width: 700px) and (min-height: 740px) {
  #game-shell { border-radius: 28px; }
}