:root {
  --ink: #f8f5ec;
  --muted: #a7b1c9;
  --night: #070e21;
  --night-deep: #040917;
  --panel: rgba(17, 28, 57, 0.68);
  --line: rgba(203, 219, 255, 0.14);
  --lavender: #b8a9ff;
  --mint: #9ee6c0;
  --peach: #ffbd8e;
  --gold: #ffe18a;
  --font-display: "Nunito", "Gowun Dodum", sans-serif;
  --font-body: "Gowun Dodum", sans-serif;
  --font-mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--night-deep); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 18%, rgba(88, 92, 180, 0.18), transparent 26rem),
    radial-gradient(circle at 86% 76%, rgba(54, 137, 129, 0.16), transparent 24rem),
    linear-gradient(145deg, #09122a 0%, #050b1b 52%, #020612 100%);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  content: "";
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 5vw 13vh 0 #d5c9ff, 12vw 63vh 0 #8fe4c6, 19vw 28vh 0 #fff2bb, 30vw 83vh 0 #d5c9ff, 37vw 10vh 0 #fff2bb, 47vw 22vh 0 #8fe4c6, 55vw 77vh 0 #fff2bb, 67vw 14vh 0 #d5c9ff, 77vw 44vh 0 #8fe4c6, 88vw 22vh 0 #fff2bb, 95vw 70vh 0 #d5c9ff, 3vw 91vh 0 #fff2bb;
  opacity: 0.62;
  animation: stars-drift 10s ease-in-out infinite alternate;
}

body::before { top: 0; left: 0; }
body::after { top: 18vh; left: 11vw; opacity: 0.4; transform: scale(0.68); animation-delay: -5s; }

button { font: inherit; }
button:not(:disabled) { cursor: pointer; }

.app-shell { width: min(1420px, 100%); min-height: 100vh; margin: 0 auto; padding: 29px clamp(20px, 4vw, 66px) 36px; }

.masthead { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-size: 14px; font-weight: 900; letter-spacing: 0.2em; text-decoration: none; }

.brand-mark { position: relative; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(217, 207, 255, 0.58); border-radius: 8px 8px 11px 11px; transform: rotate(45deg); }
.brand-mark i { position: absolute; width: 8px; height: 8px; border: 1px solid #ffe98f; border-radius: 50%; box-shadow: 0 0 10px #ffe98f; }
.brand-mark i:nth-child(1) { transform: translate(-5px, -3px); }
.brand-mark i:nth-child(2) { transform: translate(5px, 3px); }
.brand-mark i:nth-child(3) { transform: translate(-1px, 7px); }

.masthead-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .how-button { height: 34px; border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.025); transition: 180ms ease; }
.icon-button:hover, .how-button:hover { border-color: rgba(184, 169, 255, 0.65); color: var(--ink); background: rgba(184, 169, 255, 0.1); }
.icon-button { display: grid; width: 34px; padding: 8px; place-items: center; border-radius: 50%; }
.icon-button svg { width: 16px; height: 16px; fill: currentColor; }
.how-button { padding: 0 13px; border-radius: 17px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; }

.game-layout { display: grid; grid-template-columns: minmax(162px, 205px) minmax(420px, 560px) minmax(190px, 230px); gap: clamp(23px, 4vw, 70px); align-items: center; justify-content: center; padding-top: clamp(22px, 4.2vh, 50px); }
.side-panel { display: flex; flex-direction: column; gap: 16px; }
.panel-label, .eyebrow { color: #8995b5; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.13em; }

.tip-card, .garden-card, .collection-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(41, 54, 91, 0.45), rgba(10, 17, 38, 0.54)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.12); backdrop-filter: blur(10px); }

.tip-card { padding: 16px; }
.tip-card p { margin: 10px 0 0; color: #b8c0d5; font-size: 12px; line-height: 1.7; }

.game-stage { min-width: 0; }
.scorebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px; margin: 0 4px 14px; }
.score-box { display: flex; flex-direction: column; gap: 2px; }
.personal-best { align-items: flex-end; }
.score-label { color: #8490af; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; }
.score-box strong { color: #f5f2ea; font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: 0.04em; }
.personal-best strong { color: #b8c0db; }
.combo-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 8px 14px 7px; border: 1px solid rgba(255, 225, 138, 0.2); border-radius: 14px; color: #ffe18a; background: rgba(255, 225, 138, 0.06); transition: transform 180ms ease, box-shadow 180ms ease; }
.combo-box.is-hot { transform: translateY(-3px) scale(1.07); box-shadow: 0 0 25px rgba(255, 208, 112, 0.16); }
.combo-box span { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.11em; opacity: 0.68; }
.combo-box strong { font-family: var(--font-display); font-size: 18px; line-height: 1.1; }

.canvas-wrap { position: relative; overflow: hidden; aspect-ratio: 560 / 740; border: 1px solid rgba(213, 220, 255, 0.3); border-radius: 28px; background: #11172d; box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.015), 0 28px 68px rgba(0, 0, 0, 0.3), 0 0 45px rgba(131, 107, 255, 0.09); }
.canvas-wrap::before { position: absolute; z-index: 1; top: 8px; right: 8px; bottom: 8px; left: 8px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px; content: ""; pointer-events: none; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.canvas-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 43%, rgba(5, 8, 20, 0.22) 100%); }
.drop-hint { position: absolute; z-index: 5; top: 53px; left: 50%; padding: 5px 9px; border: 1px solid rgba(227, 222, 255, 0.16); border-radius: 12px; color: #d4caff; background: rgba(24, 19, 55, 0.66); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); transition: 180ms ease; }
.drop-hint.is-visible { opacity: 1; transform: translateX(-50%); }
.event-burst { position: absolute; z-index: 8; top: 46%; left: 50%; color: #fff5bd; font-family: var(--font-display); font-size: 30px; font-weight: 900; letter-spacing: 0.04em; pointer-events: none; text-shadow: 0 0 20px rgba(255, 214, 107, 0.72); transform: translate(-50%, -50%) scale(0.72); opacity: 0; }
.event-burst.is-active { animation: event-burst 940ms cubic-bezier(.2,.65,.2,1); }

.start-card, .gameover-card { position: absolute; z-index: 6; top: 50%; left: 50%; width: min(86%, 390px); padding: 35px 27px 26px; border: 1px solid rgba(221, 217, 255, 0.2); border-radius: 25px; text-align: center; background: linear-gradient(145deg, rgba(22, 29, 60, 0.9), rgba(14, 15, 35, 0.88)); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.33); backdrop-filter: blur(17px); transform: translate(-50%, -50%); transition: opacity 420ms ease, transform 420ms ease; }
.start-card.is-hidden, .gameover-card.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -44%); }
.start-card h1, .gameover-card h2, .help-modal h2 { margin: 12px 0 11px; color: #f5f2e9; font-family: var(--font-display); font-size: clamp(29px, 4vw, 39px); font-weight: 900; line-height: 1.14; letter-spacing: -0.055em; }
.start-card h1 em, .help-modal em { color: #dec9ff; font-style: normal; }
.start-card p, .gameover-card p { margin: 0 auto 20px; color: #b8c1d5; font-size: 12px; line-height: 1.75; }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 169px; height: 46px; padding: 0 9px 0 17px; border: 1px solid rgba(255, 239, 163, 0.7); border-radius: 23px; color: #252131; background: linear-gradient(135deg, #fff2a7, #f6c893); box-shadow: 0 8px 24px rgba(255, 208, 112, 0.16); font-family: var(--font-display); font-size: 13px; font-weight: 900; transition: transform 180ms ease, box-shadow 180ms ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 208, 112, 0.3); }
.primary-button b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: rgba(38, 31, 50, 0.12); font-size: 17px; }
.start-card small { display: block; margin-top: 15px; color: #7e89a9; font-size: 9px; }
.gameover-card strong { display: block; margin: 2px 0 13px; color: #fff0a7; font-family: var(--font-display); font-size: 41px; font-weight: 900; line-height: 1; }
.gameover-card h2 { margin-bottom: 5px; }

.queue-panel { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; min-height: 77px; margin: 13px 4px 0; padding: 0 12px 0 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(13, 22, 48, 0.48); }
.queue-copy { display: flex; flex-direction: column; gap: 4px; }
.queue-copy span, .instruction span { color: #8792b0; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.11em; }
.queue-copy strong { color: #e4d9ff; font-size: 13px; font-weight: normal; }
.next-seed-stage { position: relative; display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgba(193, 178, 255, 0.14), transparent 63%); }
#next-seed { width: 29px; height: 29px; border-radius: 50% 50% 46% 46%; box-shadow: inset 5px 5px 7px rgba(255, 255, 255, 0.38), inset -5px -5px 8px rgba(0, 0, 0, 0.18), 0 0 18px currentColor; transition: background 200ms ease, transform 200ms ease; }
.instruction { display: flex; align-items: center; justify-content: end; gap: 5px; }

.garden-card { padding: 10px; }
.garden-scene { position: relative; height: 180px; overflow: hidden; border-radius: 11px; background: linear-gradient(#2a2a61 0%, #35326d 48%, #78639a 100%); }
.garden-scene::before { position: absolute; top: 20px; left: 46px; width: 95px; height: 1px; content: ""; background: rgba(255, 255, 255, 0.33); box-shadow: -31px 35px 0 rgba(255,255,255,.6), 79px 53px 0 rgba(255,255,255,.35), 100px 4px 0 rgba(255,255,255,.5), -18px 92px 0 rgba(255,255,255,.4); }
.scene-moon { position: absolute; top: 22px; right: 23px; width: 34px; height: 34px; border-radius: 50%; background: #fff2b5; box-shadow: 0 0 32px #f7dd9b; }
.scene-cloud { position: absolute; height: 12px; border-radius: 12px; background: rgba(212, 202, 245, 0.32); filter: blur(1px); }
.cloud-one { top: 63px; left: 17px; width: 62px; }.cloud-two { top: 84px; right: 25px; width: 48px; opacity: 0.6; }
.scene-island { position: absolute; right: -12px; bottom: -19px; left: -12px; height: 90px; border-radius: 50% 50% 0 0; background: linear-gradient(160deg, #2a5365, #152a44 65%); transform: rotate(-4deg); }
.scene-island::after { position: absolute; bottom: 4px; left: 16px; width: 160px; height: 30px; border-radius: 50%; content: ""; background: #527271; opacity: .38; }
.scene-ruin { position: absolute; bottom: 40px; width: 17px; background: #8195a3; box-shadow: inset 5px 0 rgba(255,255,255,.11); opacity: .56; }
.ruin-left { left: 35px; height: 46px; transform: skewY(-6deg); }.ruin-mid { left: 65px; height: 65px; transform: skewY(5deg); }
.scene-tree { position: absolute; right: 39px; bottom: 38px; width: 10px; height: 57px; border-radius: 60% 40% 0 0; background: #353f55; transform: rotate(-8deg); transform-origin: bottom; }
.scene-tree::before, .scene-tree::after { position: absolute; width: 41px; height: 25px; border-radius: 50%; content: ""; background: #576e79; box-shadow: inset 0 -6px #3b5864; }
.scene-tree::before { top: -5px; left: -17px; }.scene-tree::after { top: 15px; left: 0; transform: rotate(35deg) scale(.68); }
.scene-bloom { position: absolute; bottom: 43px; width: 16px; height: 16px; border-radius: 50%; background: #bfd0b2; box-shadow: 8px 0 #9cbdad, 4px -7px #d9d6ad, 0 0 8px #e7e39c; opacity: .3; transition: opacity 300ms ease, filter 300ms ease; }
.bloom-one { left: 107px; }.bloom-two { right: 19px; bottom: 63px; transform: scale(.8); }
.scene-firefly { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff0a7; box-shadow: 0 0 8px #ffe8a1; opacity: .2; animation: firefly 3s infinite alternate ease-in-out; }
.firefly-one { top: 92px; left: 130px; }.firefly-two { top: 114px; left: 25px; animation-delay: -1.7s; }
.garden-status { padding: 12px 3px 1px; }
.garden-status div:first-child { display: flex; align-items: baseline; justify-content: space-between; }.garden-status span { color: #8d99b8; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }.garden-status strong { color: #e8ddff; font-family: var(--font-display); font-size: 16px; }
.garden-meter { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.09); }.garden-meter i { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9683f2, #a9edc7); box-shadow: 0 0 10px #8effcb; transition: width 400ms ease; }
.collection-card { padding: 15px; }
.atlas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px; }
.atlas-item { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(223, 227, 255, .12); border-radius: 8px; background: rgba(255,255,255,.03); }.atlas-item::before { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; content: ""; background: var(--atlas-color); box-shadow: inset 3px 3px 4px rgba(255,255,255,.35), 0 0 9px var(--atlas-color); transform: translate(-50%, -50%); }.atlas-item.is-locked::before { width: 7px; height: 7px; background: #596078; box-shadow: none; }.atlas-item.is-new::after { position: absolute; top: 3px; right: 3px; width: 3px; height: 3px; border-radius: 50%; content: ""; background: #ffe18a; box-shadow: 0 0 6px #ffe18a; }

.help-modal { width: min(94vw, 480px); padding: 35px; border: 1px solid rgba(220, 216, 255, .26); border-radius: 26px; color: var(--ink); background: linear-gradient(145deg, #182448, #0d122b); box-shadow: 0 30px 80px rgba(0,0,0,.48); }.help-modal::backdrop { background: rgba(1, 4, 13, .7); backdrop-filter: blur(7px); }.help-modal h2 { text-align: center; }.help-modal h2 em { display: inline-block; }.modal-close { position: absolute; top: 14px; right: 14px; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; color: #cad2e7; background: transparent; font-size: 19px; }.help-modal ol { display: grid; gap: 10px; margin: 27px 0 18px; padding: 0; list-style: none; }.help-modal li { display: flex; align-items: center; gap: 15px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; background: rgba(255,255,255,.035); }.help-modal li b { color: #ffe18a; font-family: var(--font-mono); font-size: 11px; }.help-modal li p { margin: 0; color: #c7cee0; font-size: 12px; line-height: 1.65; }.modal-note { margin: 0; color: #8995b1; font-size: 11px; line-height: 1.65; text-align: center; }

@keyframes stars-drift { to { transform: translateY(-10px); opacity: .88; } }
@keyframes firefly { to { transform: translate(8px, -13px); opacity: .9; } }
@keyframes event-burst { 0% { opacity: 0; transform: translate(-50%, -35%) scale(.68); } 18% { opacity: 1; } 80% { opacity: 1; transform: translate(-50%, -64%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1.15); } }

@media (max-width: 940px) { .app-shell { padding-top: 20px; }.game-layout { grid-template-columns: minmax(350px, 560px) minmax(200px, 270px); gap: 25px; }.left-panel { display: none; }.right-panel { align-self: center; } }
@media (max-width: 680px) { .app-shell { padding: 16px 13px 25px; }.brand { font-size: 12px; }.game-layout { display: block; padding-top: 22px; }.game-stage { max-width: 560px; margin: 0 auto; }.right-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px auto 0; max-width: 560px; }.panel-label { display: none; }.side-panel { gap: 0; }.garden-card { padding: 8px; }.garden-scene { height: 133px; }.collection-card { padding: 11px; }.atlas-grid { gap: 5px; margin-top: 8px; }.queue-panel { grid-template-columns: 1fr 56px 1fr; }.next-seed-stage { width: 50px; height: 50px; }.instruction { display: none; }.score-box strong { font-size: 19px; }.combo-box { min-width: 59px; padding-right: 9px; padding-left: 9px; }.start-card { padding: 29px 20px 22px; }.start-card p { font-size: 11px; }.help-modal { padding: 33px 23px 25px; } }
@media (max-width: 390px) { .how-button { padding: 0 9px; font-size: 8px; }.right-panel { grid-template-columns: 1.15fr .85fr; }.garden-scene { height: 116px; }.scene-island { bottom: -28px; }.scene-tree { right: 30px; }.scorebar { gap: 6px; }.score-label { font-size: 8px; }.score-box strong { font-size: 17px; }.queue-panel { min-height: 68px; } }

.campaign-card { position: relative; padding: 20px 17px 17px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(41, 54, 91, 0.45), rgba(10, 17, 38, 0.54)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.12); backdrop-filter: blur(10px); }
.campaign-card::after { position: absolute; top: -30px; right: -21px; width: 87px; height: 87px; border: 1px solid rgba(220, 199, 255, 0.1); border-radius: 50%; content: ""; }
.campaign-card > strong { display: block; margin-top: 10px; color: #f3eddf; font-family: var(--font-display); font-size: 18px; font-weight: 900; line-height: 1.2; }
.campaign-card p { margin: 9px 0 15px; color: #aeb8d0; font-size: 12px; line-height: 1.65; }
.campaign-stat { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.campaign-stat span { color: #8490af; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.campaign-stat b { color: #e7d5a2; font-family: var(--font-display); font-size: 13px; }
.secondary-button, .text-button { border: 0; color: #d8d4ff; background: transparent; font-family: var(--font-display); font-size: 11px; font-weight: 800; }
.secondary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid rgba(190, 179, 255, .22); border-radius: 11px; background: rgba(184, 169, 255, .07); transition: 180ms ease; }
.secondary-button:hover { border-color: rgba(226, 214, 255, .6); background: rgba(184, 169, 255, .15); }
.secondary-button b { font-size: 15px; }

.stage-header { display: flex; align-items: stretch; justify-content: space-between; gap: 9px; margin: 0 4px 8px; }
.stage-select-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; flex: 1; min-height: 48px; padding: 8px 13px; border: 1px solid rgba(216, 210, 255, .16); border-radius: 14px; color: #eff1fc; background: rgba(18, 27, 58, .54); text-align: left; transition: 180ms ease; }
.stage-select-button:hover { border-color: rgba(200, 187, 255, .55); background: rgba(50, 48, 92, .52); }
.stage-select-button span { grid-column: 1 / -1; color: #8c98bb; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.stage-select-button strong { margin-top: 2px; font-family: var(--font-display); font-size: 15px; font-weight: 900; letter-spacing: .035em; }
.stage-select-button b { align-self: end; color: #bbaeff; font-size: 18px; line-height: 1; }
.restart-stage-button { display: grid; width: 48px; min-width: 48px; padding: 0; place-items: center; border: 1px solid rgba(216, 210, 255, .16); border-radius: 14px; color: #cbd2e7; background: rgba(18, 27, 58, .54); font-size: 19px; transition: 180ms ease; }
.restart-stage-button:hover { color: #fff1a6; border-color: rgba(255, 225, 138, .58); }
.mission-strip { margin: 0 4px 11px; padding: 10px 13px 9px; border: 1px solid rgba(255, 225, 138, .15); border-radius: 13px; background: linear-gradient(90deg, rgba(255, 225, 138, .08), rgba(184, 169, 255, .06)); }
.mission-strip > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mission-strip span { color: #d9d3ed; font-size: 11px; }
.mission-strip strong { flex: none; color: #ffe59a; font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
.mission-track { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.mission-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a998ff, #ffe38c); box-shadow: 0 0 10px rgba(255, 225, 138, .7); transition: width 300ms ease; }

.stageclear-card { position: absolute; z-index: 7; top: 50%; left: 50%; width: min(86%, 390px); padding: 35px 27px 24px; border: 1px solid rgba(255, 225, 138, .3); border-radius: 25px; color: var(--ink); text-align: center; background: linear-gradient(145deg, rgba(38, 42, 71, .94), rgba(15, 16, 37, .92)); box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 55px rgba(255, 223, 138, .1); backdrop-filter: blur(17px); transform: translate(-50%, -50%); transition: opacity 340ms ease, transform 340ms ease; }
.stageclear-card.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -44%); }
.stageclear-card h2 { margin: 12px 0 8px; color: #f5f2e9; font-family: var(--font-display); font-size: clamp(29px, 4vw, 39px); font-weight: 900; line-height: 1.14; letter-spacing: -.055em; }
.stageclear-card h2 em { color: #ffe29b; font-style: normal; }
.stageclear-card p { margin: 0 auto 15px; color: #bdc5d9; font-size: 12px; line-height: 1.65; }
.clear-reward { display: flex; align-items: baseline; justify-content: center; gap: 11px; margin: 0 auto 18px; padding: 10px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.clear-reward span { color: #939ebd; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.clear-reward strong { color: #a9ecc9; font-family: var(--font-display); font-size: 18px; }
.text-button { display: block; min-height: 34px; margin: 8px auto 0; padding: 7px 12px; color: #b9c0dc; text-decoration: underline; text-underline-offset: 4px; }

.stage-modal { width: min(94vw, 540px); max-height: min(82vh, 740px); padding: 33px; overflow: auto; border: 1px solid rgba(220, 216, 255, .26); border-radius: 26px; color: var(--ink); background: linear-gradient(145deg, #182448, #0d122b); box-shadow: 0 30px 80px rgba(0,0,0,.48); }
.stage-modal::backdrop { background: rgba(1, 4, 13, .74); backdrop-filter: blur(7px); }
.stage-modal h2 { margin: 10px 0 7px; color: #f5f2e9; font-family: var(--font-display); font-size: 31px; font-weight: 900; line-height: 1.13; letter-spacing: -.055em; }
.stage-modal h2 em { color: #dec9ff; font-style: normal; }
.stage-modal > p { margin: 0 0 20px; color: #aeb9d1; font-size: 12px; line-height: 1.65; }
.stage-list { display: grid; gap: 8px; }
.stage-list-button { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; min-height: 61px; padding: 9px 12px 9px 9px; border: 1px solid rgba(220, 225, 255, .1); border-radius: 13px; color: #d7dceb; background: rgba(255,255,255,.035); text-align: left; transition: 180ms ease; }
.stage-list-button:not(:disabled):hover, .stage-list-button.is-current { border-color: rgba(196, 181, 255, .58); background: rgba(175, 159, 255, .11); }
.stage-list-button:disabled { cursor: not-allowed; opacity: .42; }
.stage-number { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #e6d9a4; font-family: var(--font-mono); font-size: 10px; }
.stage-list-copy { display: flex; flex-direction: column; gap: 2px; }.stage-list-copy span { color: #8995b6; font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }.stage-list-copy strong { font-family: var(--font-display); font-size: 13px; font-weight: 800; }.stage-list-state { color: #a8e8c8; font-family: var(--font-mono); font-size: 9px; }.stage-list-state.is-locked { color: #77829f; }

@media (max-width: 680px) {
  .stage-header { margin-top: 0; }.stage-select-button, .restart-stage-button { min-height: 50px; }.mission-strip { padding: 10px 11px 9px; }.mission-strip span { font-size: 10px; }.stageclear-card { padding: 29px 20px 20px; }.stage-modal { max-height: 86vh; padding: 28px 20px 21px; }.stage-modal h2 { font-size: 29px; }
}

.gameover-card h2 em { color: #dec9ff; font-style: normal; }

@media (max-width: 680px) {
  .queue-panel { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1.25fr); }
  .instruction { display: flex; justify-content: flex-end; color: #9ba6c3; font-family: var(--font-mono); font-size: 8px; letter-spacing: .04em; text-align: right; }
}

@media (max-width: 680px) {
  .app-shell {
    padding: max(16px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left));
  }
}