:root {
  --sky: #66cff2;
  --sky-deep: #219ce2;
  --blue: #1d64c8;
  --blue-dark: #173f82;
  --ink: #223b63;
  --white: #ffffff;
  --yellow: #ffd64a;
  --yellow-deep: #edac19;
  --red: #ff5a5f;
  --red-deep: #e7444a;
  --green: #48d76d;
  --green-deep: #25b853;
  --orange: #ffac3f;
  --cloud: #eefbff;
  --shadow: 0 10px 0 rgba(20, 70, 135, 0.14), 0 18px 28px rgba(28, 85, 142, 0.16);
  --rounded: "SF Pro Rounded", "Arial Rounded MT Bold", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--sky); }

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(180deg, #8fe4f7 0%, var(--sky) 47%, #70d4ef 100%);
  color: var(--ink);
  font-family: var(--rounded);
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-y: none;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

.app-shell {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
}

.app-shell::before,
.app-shell::after {
  position: fixed;
  z-index: -1;
  content: "";
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(1px);
}

.app-shell::before { width: 150px; height: 52px; top: 14%; left: -70px; box-shadow: 70px 22px 0 rgba(255,255,255,.55); }
.app-shell::after { width: 130px; height: 44px; top: 58%; right: -65px; box-shadow: -58px 18px 0 rgba(255,255,255,.52); }

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: max(16px, env(safe-area-inset-top)) 20px 10px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(20, 92, 170, .35);
}

.brand-star, .mini-star { display: inline-grid; place-items: center; color: var(--yellow); }
.brand-star svg { width: 27px; height: 27px; filter: drop-shadow(0 2px 0 rgba(191, 127, 0, .35)); }

.install-button, .hud-back {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(29, 100, 200, .92);
  color: #fff;
  box-shadow: 0 4px 0 rgba(12, 58, 127, .26);
}

.install-button svg, .hud-back svg { width: 21px; height: 21px; }
.install-button:active, .hud-back:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(12, 58, 127, .26); }

.home-main { width: min(100%, 470px); margin: 0 auto; padding: 6px 18px 116px; }

.play-hero { text-align: center; }

.hero-heading { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero-heading h1, .level-title-row h2 { margin: 0; letter-spacing: .02em; font-weight: 950; }
.hero-heading h1 { color: var(--blue-dark); font-size: clamp(32px, 8vw, 38px); text-shadow: 0 2px 0 rgba(255,255,255,.55); }
.eyeball-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-deep); }
.game-tagline { margin: 3px 0 13px; color: #fff; font-size: 17px; font-weight: 900; letter-spacing: .08em; text-shadow: 0 2px 0 rgba(20, 92, 170, .32); }

.play-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, .95);
  border-radius: 34px;
  background: linear-gradient(145deg, #257cdf 0%, #0d55b4 100%);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease;
}

.play-card::before {
  position: absolute;
  width: 240px;
  height: 240px;
  top: -120px;
  right: -66px;
  border-radius: 50%;
  background: rgba(128, 209, 250, .26);
  content: "";
}

.play-card::after {
  position: absolute;
  right: -42px;
  bottom: -62px;
  width: 215px;
  height: 125px;
  border-radius: 50% 50% 0 0;
  background: #d8f8ff;
  box-shadow: -115px 23px 0 #eafcff;
  content: "";
}

.play-card:active { transform: translateY(5px) scale(.995); box-shadow: 0 5px 0 rgba(20, 70, 135, .16), 0 10px 18px rgba(28, 85, 142, .14); }
.hero-mascot { position: absolute; z-index: 2; width: min(60vw, 265px); left: -22px; top: -20px; filter: drop-shadow(0 16px 10px rgba(3, 44, 104, .30)); transform: rotate(-7deg); }
.hero-cloud { position: absolute; z-index: 1; border-radius: 999px; background: rgba(255,255,255,.75); }
.hero-cloud--one { width: 92px; height: 27px; top: 44px; right: 28px; }
.hero-cloud--two { width: 50px; height: 17px; top: 86px; right: 12px; opacity: .7; }

.play-cta { position: absolute; z-index: 3; right: 20px; bottom: 25px; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 24px; font-weight: 950; text-shadow: 0 3px 0 #164a9d; }
.play-cta__button { display: grid; width: 58px; height: 58px; place-items: center; border: 4px solid rgba(255, 241, 177, .85); border-radius: 50%; background: var(--yellow); color: #fff; box-shadow: 0 5px 0 #d99d14; text-shadow: none; }
.play-cta__button svg { width: 28px; height: 28px; margin-left: 4px; filter: drop-shadow(0 2px 0 #d99d14); }

.colour-rule { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; margin: 14px auto 10px; color: #fff; font-size: 23px; font-weight: 900; }
.colour-dot { width: 33px; height: 33px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 3px 0 rgba(30, 100, 150, .22); }
.colour-dot--red { background: var(--red); }
.colour-dot--green { background: var(--green); }
.rule-arrow { color: var(--blue-dark); font-size: 29px; }
.tap-hand { margin-left: -4px; font-size: 29px; transform: translateY(-3px) rotate(-12deg); }

.level-area { margin-top: 9px; padding: 17px 14px 18px; border: 4px solid rgba(255,255,255,.82); border-radius: 28px; background: rgba(239, 253, 255, .88); box-shadow: 0 7px 0 rgba(26, 128, 181, .16); }
.level-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px 10px; }
.level-title-row h2 { color: var(--blue-dark); font-size: 23px; }
.star-total { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-dark); font-size: 15px; font-weight: 800; }
.star-total svg { width: 21px; height: 21px; color: var(--yellow); filter: drop-shadow(0 2px 0 #d99d14); }

.level-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px 7px; margin: 0; padding: 8px 0 6px; list-style: none; }
.level-track__item { position: relative; min-width: 0; }
.level-track__item:not(:nth-child(4n))::after { position: absolute; z-index: 0; width: 19px; height: 5px; top: 27px; right: -13px; border-radius: 999px; background: #9cdae8; content: ""; }
.level-track__item:nth-child(4n + 1)::after { display: none; }
.level-button { position: relative; z-index: 1; display: grid; width: 100%; min-height: 74px; place-items: center; gap: 2px; padding: 5px 0 3px; border: 3px solid #fff; border-radius: 21px; background: #d9f8ff; box-shadow: 0 4px 0 #91cfdf; transition: transform .14s ease; }
.level-button--played { background: #6acff1; box-shadow: 0 4px 0 #2a93c3; }
.level-button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #91cfdf; }
.level-button:disabled { cursor: not-allowed; opacity: .72; }
.level-number { display: grid; min-height: 34px; place-items: center; color: var(--blue-dark); font-size: 28px; font-weight: 950; line-height: 1; }
.level-number svg { width: 25px; height: 25px; color: #92aeb9; }
.star-row { display: inline-flex; align-items: center; justify-content: center; gap: 1px; }
.star { display: inline-grid; color: #c5d6dc; transform: scale(.94); }
.star svg { width: 15px; height: 15px; }
.star--on { color: var(--yellow); filter: drop-shadow(0 1px 0 #d99d14); }
.unlock-tip { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 0; color: #2d7f96; font-size: 13px; font-weight: 800; }
.mini-star { color: var(--yellow); }
.mini-star svg { width: 17px; height: 17px; }

.home-footer { position: fixed; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 8px; bottom: 0; left: 0; width: 100%; min-height: 76px; padding: 13px max(20px, env(safe-area-inset-right)) max(13px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-top: 3px solid rgba(255,255,255,.78); background: rgba(255,255,255,.9); color: var(--blue-dark); font-size: 14px; font-weight: 850; box-shadow: 0 -6px 18px rgba(26, 100, 170, .13); backdrop-filter: blur(9px); }
.footer-home { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 13px; background: var(--blue); color: #fff; box-shadow: 0 3px 0 #114c9d; }
.footer-home svg { width: 21px; height: 21px; }

.game-screen { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr; overflow: hidden; background: var(--sky); }
.game-screen--intro { background: linear-gradient(180deg, #82e1f8, #58c6ed); }
.game-screen--waiting { background: var(--sky); }
.game-screen--green, .game-screen--result { background: var(--green); }
.game-screen--falseStart { background: #ffc15a; }
.game-hud { position: relative; z-index: 2; display: grid; align-items: center; grid-template-columns: 56px 1fr 100px; min-height: 78px; padding: max(12px, env(safe-area-inset-top)) 18px 10px; }
.game-screen--waiting .game-hud, .game-screen--green .game-hud { color: #fff; }
.hud-back { width: 43px; height: 43px; background: rgba(20, 61, 122, .87); }
.level-bubble { justify-self: center; display: grid; width: 52px; height: 42px; place-items: center; border: 3px solid rgba(255,255,255,.94); border-radius: 18px; background: #fff; color: var(--blue-dark); font-size: 24px; font-weight: 950; box-shadow: 0 4px 0 rgba(23, 63, 130, .18); }
.hud-stars { justify-self: end; padding: 8px 9px; border-radius: 18px; background: rgba(26, 83, 161, .79); }
.hud-stars .star svg { width: 21px; height: 21px; }
.hud-stars .star { color: rgba(255,255,255,.65); }
.hud-stars .star--on { color: var(--yellow); }
.game-main { position: relative; display: flex; min-height: 0; padding: 0 14px max(16px, env(safe-area-inset-bottom)); }
.game-pad, .result-stage { position: relative; width: 100%; min-height: 0; flex: 1; overflow: hidden; border: 5px solid rgba(255,255,255,.95); border-radius: 38px; box-shadow: var(--shadow); }
.game-pad { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; }
.game-pad--intro { background: linear-gradient(145deg, #247bdc, #1351af); color: #fff; }
.game-pad--waiting { background: radial-gradient(circle at 50% 42%, #ff7473, var(--red) 45%, var(--red-deep) 100%); color: #fff; }
.game-pad--green { background: radial-gradient(circle at 50% 42%, #72ed92, var(--green) 45%, var(--green-deep) 100%); color: #fff; }
.game-pad--falseStart { background: #ffad3d; color: #fff; }
.game-pad--waiting::before, .game-pad--green::before { position: absolute; width: 510px; height: 510px; border: 25px solid rgba(255,255,255,.10); border-radius: 50%; content: ""; }
.intro-rocket, .wait-rocket, .go-rocket { position: relative; z-index: 1; width: min(78vw, 330px); filter: drop-shadow(0 17px 10px rgba(20, 52, 107, .25)); }
.intro-rocket { margin-top: -44px; transform: rotate(-7deg); }
.wait-rocket { width: min(56vw, 245px); margin-top: -40px; transform: translateY(0) rotate(-5deg); animation: float 2s ease-in-out infinite; }
.go-rocket { width: min(62vw, 265px); margin-top: -34px; transform: rotate(10deg) translate(4px, -5px); animation: blast .62s ease-in-out infinite alternate; }
.intro-title, .state-word { position: relative; z-index: 1; margin: -12px 0 10px; font-size: clamp(34px, 10vw, 44px); font-weight: 950; letter-spacing: .05em; text-shadow: 0 4px 0 rgba(18, 68, 145, .38); }
.state-word { margin: 10px 0 3px; color: #fff; font-size: clamp(48px, 15vw, 64px); text-shadow: 0 5px 0 rgba(150, 43, 45, .32); }
.state-word--go { text-shadow: 0 5px 0 rgba(21, 124, 55, .38); }
.state-hint, .tap-to-start { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 43px; padding: 8px 22px; border-radius: 99px; background: rgba(255,255,255,.9); color: var(--blue-dark); font-size: 18px; font-weight: 950; box-shadow: 0 4px 0 rgba(10, 59, 131, .2); }
.game-pad--green .state-hint { color: var(--green-deep); }
.game-pad--falseStart .state-hint { color: #b25c08; }
.mini-rule { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #fff; font-size: 26px; font-weight: 950; }
.mini-dot { width: 29px; height: 29px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 0 rgba(10, 56, 123, .30); }
.mini-dot--red { background: var(--red); }
.mini-dot--green { background: var(--green); }
.oops-face { position: relative; z-index: 1; font-size: 92px; filter: drop-shadow(0 7px 0 rgba(181, 107, 16, .24)); }

.result-stage { display: flex; align-items: center; flex-direction: column; padding: 19px 24px 20px; background: radial-gradient(circle at 50% 49%, #77ec91 0, var(--green) 38%, var(--green-deep) 100%); color: #fff; text-align: center; }
.result-rays { position: absolute; width: 650px; height: 650px; top: 7%; border-radius: 50%; background: repeating-conic-gradient(from -6deg, rgba(255,255,255,.14) 0deg 10deg, transparent 10deg 25deg); opacity: .7; }
.result-rocket { position: relative; z-index: 1; width: min(45vw, 195px); margin: -10px 0 -4px; filter: drop-shadow(0 16px 10px rgba(18, 89, 54, .22)); transform: rotate(7deg); animation: celebrate .75s ease-in-out infinite alternate; }
.star-row--large { position: relative; z-index: 1; gap: 7px; }
.star-row--large .star { color: rgba(255,255,255,.6); }
.star-row--large .star svg { width: min(24vw, 78px); height: min(24vw, 78px); }
.result-score { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; margin-top: 6px; color: #fff; line-height: .85; text-shadow: 0 5px 0 #167d42; }
.result-score strong { font-size: clamp(78px, 25vw, 110px); font-weight: 950; letter-spacing: -.07em; }
.result-score span { padding: 0 0 11px 8px; font-size: 22px; font-weight: 950; }
.result-praise { position: relative; z-index: 1; margin: 15px 0 0; color: var(--green-deep); font-size: 28px; font-weight: 950; text-shadow: 0 1px 0 #fff; }
.record-note { position: relative; z-index: 1; min-height: 21px; margin: 5px 0 auto; font-size: 15px; font-weight: 850; }
.result-actions { position: relative; z-index: 1; display: grid; width: 100%; gap: 12px; margin-top: 16px; }
.big-button { display: grid; width: 100%; min-height: 59px; place-items: center; border: 3px solid rgba(255,255,255,.9); border-radius: 21px; font-size: 23px; font-weight: 950; transition: transform .14s ease, box-shadow .14s ease; }
.big-button--white { background: #fff; color: var(--blue-dark); box-shadow: 0 5px 0 rgba(12, 104, 62, .26); }
.big-button--yellow { background: var(--yellow); color: var(--blue-dark); box-shadow: 0 5px 0 #d89710; }
.big-button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(12, 104, 62, .26); }

.install-sheet { position: fixed; z-index: 50; inset: 0; display: grid; place-items: end center; padding: 20px; }
.install-sheet__shade { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(18, 46, 91, .58); }
.install-sheet__card { position: relative; width: min(100%, 430px); padding: 30px 25px 25px; border: 4px solid #fff; border-radius: 30px; background: #eafaff; color: var(--blue-dark); box-shadow: 0 -7px 0 rgba(19, 82, 150, .15); text-align: center; animation: sheet-in .24s ease-out; }
.sheet-close { position: absolute; top: 13px; right: 13px; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #d9eef5; color: var(--blue-dark); }
.sheet-close svg { width: 19px; height: 19px; }
.sheet-icon { display: grid; width: 65px; height: 65px; place-items: center; margin: -60px auto 10px; border: 4px solid #fff; border-radius: 23px; background: var(--yellow); color: var(--blue-dark); box-shadow: 0 5px 0 #d99d14; }
.sheet-icon svg { width: 31px; height: 31px; }
.install-sheet h2 { margin: 0 0 9px; font-size: 28px; font-weight: 950; }
.install-sheet p { margin: 0 0 20px; color: #356e87; font-size: 16px; font-weight: 700; line-height: 1.7; user-select: text; }
.share-inline { display: inline-grid; width: 20px; height: 20px; vertical-align: -4px; place-items: center; color: var(--blue); }
.share-inline svg { width: 18px; height: 18px; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: max(95px, calc(env(safe-area-inset-bottom) + 82px)); max-width: calc(100vw - 36px); padding: 12px 17px; border: 2px solid rgba(255,255,255,.88); border-radius: 99px; background: var(--blue-dark); color: #fff; font-size: 14px; font-weight: 850; box-shadow: 0 8px 20px rgba(10,50,100,.2); transform: translateX(-50%); }

@keyframes float { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-12px) rotate(-2deg); } }
@keyframes blast { from { transform: rotate(10deg) translate(2px, 0); } to { transform: rotate(10deg) translate(11px, -15px); } }
@keyframes celebrate { from { transform: rotate(4deg) translateY(1px); } to { transform: rotate(10deg) translateY(-8px); } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (min-width: 640px) {
  body { padding: 20px; }
  .app-shell { width: 430px; min-height: calc(100dvh - 40px); margin: 0 auto; overflow: hidden; border: 7px solid rgba(255,255,255,.9); border-radius: 42px; box-shadow: 0 26px 55px rgba(20, 78, 133, .3); }
  .home-footer { width: 416px; left: 50%; border-radius: 0 0 35px 35px; transform: translateX(-50%); }
  .game-screen { min-height: calc(100dvh - 54px); }
}

@media (max-height: 670px) {
  .home-header { min-height: 58px; padding-top: max(8px, env(safe-area-inset-top)); }
  .hero-mascot { width: 220px; }
  .play-card { min-height: 205px; }
  .level-area { margin-top: 2px; }
  .level-track { gap: 7px 6px; padding: 4px 0; }
  .level-button { min-height: 62px; }
  .level-number { min-height: 28px; font-size: 23px; }
  .game-hud { min-height: 64px; padding-top: max(7px, env(safe-area-inset-top)); }
  .result-rocket { width: min(36vw, 155px); }
  .result-score strong { font-size: clamp(68px, 19vw, 94px); }
  .result-actions { gap: 8px; margin-top: 9px; }
  .big-button { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}