:root {
  font-family: "Noto Sans SC", sans-serif;
  color: #243133;
  background: #f3f5ee;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f3f5ee; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }

.app-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.9), transparent 34%),
    linear-gradient(145deg, #f7f8f1, #edf1e9);
}

.ambient { position: fixed; border-radius: 999px; filter: blur(80px); opacity: .45; pointer-events: none; }
.ambient-one { width: 320px; height: 320px; right: -80px; top: 40px; background: #d6e9d5; }
.ambient-two { width: 260px; height: 260px; left: -100px; bottom: -40px; background: #f4dfbd; }

.page {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  padding: 28px clamp(22px, 6vw, 92px) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.99);
  transition: opacity .42s ease, transform .42s ease, visibility .42s;
}
.page.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #273d3c; font: 700 18px/1 "DM Sans", sans-serif; letter-spacing: -.5px; }
.brand span span { color: #d79863; }
.brand-dot { width: 16px; height: 16px; border-radius: 50%; background: #456c65; box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); }
.back-button {
  width: 44px; height: 44px; border: 1px solid rgba(52,86,81,.1); border-radius: 50%;
  color: #456c65; background: rgba(255,255,255,.48); display: grid; place-items: center;
  transition: transform .25s, background .25s;
}
.back-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.8); }
.back-button { font-size: 22px; }
.compact { position: absolute; left: 50%; transform: translateX(-50%); }
.header-spacer { width: 44px; }

.home-content { position: relative; z-index: 2; width: min(100%, 420px); margin: 0 auto; padding-top: clamp(56px, 10vh, 92px); text-align: center; }
.eyebrow, .game-kicker { color: #ce8956; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.home-content .eyebrow { justify-content: center; }
.eyebrow span { width: 22px; height: 1px; background: #ce8956; }
h1, h2 { margin: 0; color: #2e4544; font-weight: 700; letter-spacing: -2px; }
h1 { margin-top: 22px; font-size: clamp(44px, 12vw, 62px); line-height: 1.14; }
h1 em { color: #4f766e; font-style: normal; }
.home-subtitle { margin: 24px 0 32px; color: #75817d; font-size: 16px; line-height: 1.9; }

.primary-button {
  min-width: 178px; border: 0; border-radius: 999px; padding: 8px 9px 8px 23px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  background: #456c65; color: white; font-weight: 600; box-shadow: 0 14px 24px rgba(69,108,101,.2);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.primary-button:hover { transform: translateY(-3px); background: #3d625c; box-shadow: 0 18px 28px rgba(69,108,101,.25); }
.button-arrow { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #456c65; background: #f8e3c2; font: 700 18px/1 sans-serif; }
.home-button { width: min(100%, 270px); margin-inline: auto; }
.home-decoration { position: absolute; width: 360px; height: 360px; left: 50%; top: min(67vh, 610px); transform: translateX(-50%); opacity: .78; }
.orbit { position: absolute; border: 1px solid rgba(79,118,110,.15); border-radius: 50%; }
.orbit-one { inset: 14%; }
.orbit-two { inset: 2%; border-style: dashed; }
.floating-number { position: absolute; display: grid; place-items: center; color: #456c65; background: rgba(255,255,255,.46); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 30px rgba(81,108,99,.08); font: 700 clamp(22px, 3vw, 42px) "DM Sans"; animation: float 5s ease-in-out infinite; }
.number-one { width: 22%; height: 25%; left: 12%; top: 30%; border-radius: 35% 35% 35% 8%; transform: rotate(-8deg); }
.number-two { width: 18%; height: 21%; right: 15%; top: 14%; color: #ce8956; border-radius: 50% 50% 12% 50%; animation-delay: -1.3s; }
.number-three { width: 19%; height: 21%; right: 25%; bottom: 18%; border-radius: 20px; animation-delay: -2.1s; }
.number-four { left: 41%; top: 42%; color: #ce8956; background: transparent; border: 0; box-shadow: none; animation-delay: -3s; }
@keyframes float { 50% { translate: 0 -14px; } }

.game-content { max-width: 760px; margin: 18px auto 0; text-align: center; }
.end-game-button { border: 0; padding: 9px 13px; border-radius: 999px; color: #bf765f; background: #fae9e1; font-size: 11px; font-weight: 700; transition: transform .2s, background .2s; }
.end-game-button:hover { transform: translateY(-2px); background: #f7ddd2; }
.game-heading h2, .result-card h2 { font-size: clamp(31px, 4vw, 42px); letter-spacing: -1.8px; }
.game-kicker { margin: 0 0 12px; }
.game-heading p:last-child, .result-card > p { color: #8a9692; font-size: 14px; }
.timer-area { display: flex; align-items: center; justify-content: center; gap: 10px; max-height: 52px; margin: 23px 0; opacity: 1; overflow: hidden; transition: opacity .28s ease, max-height .32s ease, margin .32s ease; }
.timer-area.hidden { max-height: 0; margin: 0; opacity: 0; }
.timer-ring { position: relative; width: 52px; height: 52px; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 3; }
.timer-track { stroke: #dce6df; }
.timer-progress { stroke: #d69b6d; stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear; }
.timer-ring span { position: absolute; inset: 0; display: grid; place-items: center; color: #ce8956; font: 700 16px "DM Sans"; }
.timer-label { color: #a19c92; font-size: 12px; }
.step-badge { padding: 7px 12px; border-radius: 999px; color: #ce8956; background: #f9e9d3; font-size: 11px; font-weight: 700; letter-spacing: 1px; }

.cards-grid { --card-gap: clamp(10px, 2vw, 16px); display: flex; flex-direction: column; gap: var(--card-gap); perspective: 1200px; }
.cards-row { display: flex; justify-content: center; gap: var(--card-gap); }
.memory-card { position: relative; flex: 0 0 calc((100% - (var(--max-columns, 5) - 1) * var(--card-gap)) / var(--max-columns, 5)); aspect-ratio: .88; border: 0; border-radius: 18px; background: transparent; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.25,1), translate .25s; }
.memory-card:hover { translate: 0 -4px; }
.memory-card.flipped, .memory-card.done { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; backface-visibility: hidden; }
.card-front { background: #52776f; box-shadow: 0 11px 16px rgba(70,103,97,.14); }
.card-front::after { content: ""; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; }
.card-back { transform: rotateY(180deg); color: #3f655e; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 11px 16px rgba(70,103,97,.09); font: 700 clamp(24px, 4vw, 38px) "DM Sans"; }
.memory-card.done .card-back { color: white; background: #d89b6b; border-color: #d89b6b; }
.memory-card.shake { animation: shake .4s ease; }
.memory-card.correct-pulse { animation: correctPulse .45s ease; }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@keyframes correctPulse { 50% { translate: 0 -5px; filter: drop-shadow(0 8px 8px rgba(216,155,107,.38)); } }
.game-footer { margin-top: 24px; }
.game-actions { display: flex; justify-content: center; margin-top: 28px; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #94a09d; font-size: 12px; }
.progress-bar { height: 4px; overflow: hidden; border-radius: 999px; background: #dce5df; }
.progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #d89b6b; transition: width .35s ease; }

.prepare-content { max-width: 650px; margin: clamp(55px, 10vh, 100px) auto 0; }
.prepare-content h2 { margin-top: 16px; font-size: clamp(31px, 4vw, 42px); }
.prepare-content > p { color: #8a9692; font-size: 14px; line-height: 1.8; }
.parameter-panel { margin-top: 30px; padding: 4px 24px; border-radius: 22px; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 18px 30px rgba(81,108,99,.07); }
.parameter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; border-bottom: 1px solid #e5ebe5; }
.parameter-row:last-child { border-bottom: 0; }
.parameter-row strong, .parameter-row span { display: block; }
.parameter-row strong { color: #48645f; font-size: 15px; }
.parameter-row > div:first-child span { margin-top: 5px; color: #9ca6a2; font-size: 12px; }
.number-wheel { position: relative; width: 86px; height: 100px; overflow: hidden; border-radius: 16px; background: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.78) 32%, rgba(255,255,255,.78) 68%, rgba(255,255,255,.2)); touch-action: none; user-select: none; }
.number-wheel::before, .number-wheel::after { content: ""; position: absolute; right: 8px; left: 8px; z-index: 2; height: 1px; background: rgba(82,119,111,.18); pointer-events: none; }
.number-wheel::before { top: 33px; }
.number-wheel::after { bottom: 33px; }
.wheel-value, .wheel-current { position: absolute; right: 0; left: 0; height: 33px; display: flex; align-items: center; justify-content: center; border: 0; color: rgba(82,119,111,.35); background: transparent; font: 600 15px "DM Sans"; transition: transform .2s ease, opacity .2s ease; }
.wheel-previous { top: 0; }
.wheel-current { top: 33px; gap: 3px; color: #ce8956; }
.wheel-next { bottom: 0; }
.wheel-current b { font: 700 25px "DM Sans"; }
.wheel-current small { font: 500 11px "Noto Sans SC"; }
.number-wheel.dragging .wheel-value, .number-wheel.dragging .wheel-current { transition: none; }
.play-mode-section { margin-top: 22px; }
.play-mode-section > strong { color: #48645f; font-size: 14px; }
.play-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.play-mode-card { padding: 16px; border: 1px solid rgba(69,108,101,.1); border-radius: 17px; text-align: left; color: #58746f; background: rgba(255,255,255,.5); transition: border-color .2s, background .2s, transform .2s; }
.play-mode-card:hover { transform: translateY(-2px); }
.play-mode-card.active { border-color: rgba(69,108,101,.48); background: #e7f0e8; }
.play-mode-card b, .play-mode-card span { display: block; }
.play-mode-card b { font-size: 14px; }
.play-mode-card span { margin-top: 7px; color: #98a29f; font-size: 11px; line-height: 1.55; }
.prepare-summary { display: flex; justify-content: space-between; margin: 24px 2px; color: #98a29f; font-size: 12px; }
.prepare-summary strong { color: #58746f; }
.prepare-start { width: 100%; }
.result-overlay { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 22px; background: rgba(43,65,63,.25); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; backdrop-filter: blur(8px); }
.result-overlay.show { opacity: 1; visibility: visible; }
.result-card { width: min(430px, 100%); padding: 38px 30px 28px; border-radius: 28px; text-align: center; background: #f9faf5; box-shadow: 0 28px 70px rgba(38,70,65,.2); transform: translateY(16px); transition: transform .4s; }
.result-overlay.show .result-card { transform: translateY(0); }
.result-mark { width: 54px; height: 54px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: white; background: #d89b6b; font-size: 22px; }
.result-card > p { line-height: 1.8; }
.text-button { display: block; margin: 18px auto 0; border: 0; color: #87928f; background: none; font-size: 13px; }
.developer-credit { position: fixed; z-index: 12; right: 0; bottom: 12px; left: 0; color: rgba(95,116,111,.58); text-align: center; font: 600 10px/1 "DM Sans", sans-serif; letter-spacing: 1px; pointer-events: none; }

@media (max-width: 700px) {
  .page { padding-inline: 18px; }
  .home-content { padding-top: 74px; }
  h1 { font-size: clamp(43px, 13vw, 58px); }
  .home-decoration { width: 340px; height: 340px; top: min(66vh, 570px); }
  .game-content { margin-top: 10px; }
  .game-heading h2 { font-size: 28px; }
  .cards-grid { gap: 9px; }
  .memory-card { border-radius: 12px; }
  .timer-area { margin: 14px 0; }
  .prepare-content { margin-top: 36px; }
  .parameter-panel { padding-inline: 16px; }
  .parameter-row { gap: 8px; }
  .play-mode-card { padding: 13px; }
}