:root {
  --ink: #25283d;
  --cream: #fff7d6;
  --panel: #ffffff;
  --yellow: #ffd43b;
  --red: #ff5b4d;
  --blue: #2d9cff;
  --green: #39bd74;
  --purple: #7b62e8;
  --shadow: 0 10px 0 rgba(37, 40, 61, .16), 0 18px 35px rgba(37, 40, 61, .12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
button, input { font: inherit; }
button { border: 0; cursor: pointer; touch-action: manipulation; }

#app { position: fixed; inset: 0; min-width: 620px; min-height: 350px; }
.screen {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.75) 0 55px, transparent 56px),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.65) 0 70px, transparent 71px),
    linear-gradient(180deg, #fff9dc 0%, #ffefb7 100%);
}
.screen::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,205,92,.25));
}

.splash-card {
  width: min(70vw, 760px); min-height: 58vh; padding: 4vh 4vw;
  border: 8px solid var(--ink); border-radius: 48px; background: white;
  box-shadow: var(--shadow); text-align: center; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
}
.logo-mark { font-size: clamp(64px, 12vw, 140px); line-height: 1; animation: logoBob 1.3s ease-in-out infinite; }
.logo-title { font-size: clamp(44px, 7vw, 86px); line-height: 1; margin: 0; letter-spacing: .08em; }
.start-button {
  min-width: 300px; min-height: 100px; padding: 18px 50px;
  border: 6px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink);
  font-size: clamp(28px, 4vw, 52px); font-weight: 900; box-shadow: 0 9px 0 #d49e00;
}
.start-button:active { transform: translateY(6px); box-shadow: 0 3px 0 #d49e00; }

.mode-grid { width: 92vw; height: 78vh; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; z-index: 1; }
.mode-card {
  border: 8px solid var(--ink); border-radius: 48px; background: white; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vh;
  overflow: hidden; position: relative;
}
.mode-card.trace { background: linear-gradient(#effaff, #d9f4ff); }
.mode-card.puzzle { background: linear-gradient(#fff2f8, #ffe2ee); }
.mode-card:active { transform: scale(.985); }
.mode-icon { width: min(31vw, 410px); height: min(48vh, 340px); object-fit: contain; pointer-events: none; }
.mode-label { font-size: clamp(28px, 4vw, 52px); font-weight: 900; margin-top: -2vh; }

.settings-button {
  position: absolute; z-index: 5; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right));
  width: 88px; height: 88px; border-radius: 50%; border: 5px solid var(--ink);
  background: white; color: var(--ink); font-size: 46px; box-shadow: 0 6px 0 rgba(37,40,61,.18);
}
.hold-ring { position: absolute; inset: -8px; border: 7px solid transparent; border-top-color: var(--blue); border-radius: 50%; opacity: 0; }
.settings-button.holding .hold-ring { opacity: 1; animation: holdSpin 3s linear forwards; }

.stage-screen { padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.stage-wrap { width: 91vw; height: 91vh; z-index: 1; display: flex; flex-direction: column; gap: 2vh; }
.stage-title { margin: 0; text-align: center; font-size: clamp(30px, 4.5vw, 58px); line-height: 1; }
.stage-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2.2vh 2vw; padding: 0 3vw; }
.stage-card {
  position: relative; min-width: 0; min-height: 0; border: 6px solid var(--ink); border-radius: 30px;
  background: white; box-shadow: 0 7px 0 rgba(37,40,61,.16); overflow: hidden;
}
.stage-card:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(37,40,61,.16); }
.stage-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.stage-number {
  position: absolute; left: 12px; top: 10px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); border: 4px solid var(--ink); font-size: 28px; font-weight: 900;
}

.round-button {
  width: max(88px, 8vw); height: max(88px, 8vw); max-width: 108px; max-height: 108px;
  border-radius: 50%; background: white; border: 6px solid var(--ink); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 7px 0 rgba(37,40,61,.18); font-size: 52px; font-weight: 900;
}
.round-button:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(37,40,61,.18); }
.home-button { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); z-index: 20; }

.game-screen { background: #fdfbf1; }
.game-board {
  position: relative; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9; overflow: hidden; background: white;
  box-shadow: 0 0 50px rgba(37,40,61,.12);
}
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .55; transition: opacity .35s ease; pointer-events: none; }
.scene-image.complete { opacity: 1; animation: sceneCelebrate 2.6s ease-in-out; }
.trace-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.start-marker {
  position: absolute; width: 80px; height: 80px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 7px solid white; box-shadow: 0 0 0 8px rgba(255,212,59,.85), 0 0 28px 20px rgba(255,212,59,.5);
  background: var(--yellow); pointer-events: none; animation: pulse 1.15s ease-in-out infinite;
}
.end-marker {
  position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none;
  display: grid; place-items: center; font-size: 46px; filter: drop-shadow(0 4px 0 white);
}
.hand-demo {
  position: absolute; z-index: 9; width: 72px; height: 72px; pointer-events: none;
  font-size: 64px; transform: translate(-25%, -20%); filter: drop-shadow(0 5px 2px rgba(37,40,61,.25));
  animation: handTap .7s ease-in-out infinite alternate;
}
.trace-demo { animation: traceDemo 2.1s ease-in-out forwards; }

.puzzle-area { position: absolute; inset: 0; }
.puzzle-slot, .puzzle-piece {
  position: absolute; width: 120px; height: 120px; transform: translate(-50%, -50%);
}
.puzzle-slot {
  opacity: .55; border: 7px dashed rgba(37,40,61,.72); background: rgba(37,40,61,.08); z-index: 3;
}
.puzzle-piece {
  z-index: 7; border: 6px solid var(--ink); box-shadow: 0 8px 0 rgba(37,40,61,.18); touch-action: none;
  transition: transform .12s ease, box-shadow .12s ease, left .28s cubic-bezier(.2,.9,.2,1.15), top .28s cubic-bezier(.2,.9,.2,1.15);
}
.puzzle-piece.dragging { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 14px 18px rgba(37,40,61,.25); z-index: 15; transition: transform .1s, box-shadow .1s; }
.puzzle-piece.placed { box-shadow: none; pointer-events: none; animation: popIn .45s ease; }
.puzzle-piece.hint { animation: wiggle .8s ease-in-out 3; }
.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 16px; }
.shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape-triangle-down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.shape-triangle-right { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.shape-capsule { border-radius: 999px; width: 82px; height: 150px; }
.shape-heart, .shape-heart-mirror { clip-path: polygon(50% 96%, 10% 62%, 3% 42%, 7% 22%, 20% 8%, 38% 6%, 50% 20%, 62% 6%, 80% 8%, 93% 22%, 97% 42%, 90% 62%); }
.shape-heart-mirror { transform: translate(-50%, -50%) scaleX(-1); }
.shape-heart-mirror.dragging { transform: translate(-50%, -50%) scale(-1.1, 1.1); }
.shape-star { clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
.piece-symbol { width: 100%; height: 100%; display: grid; place-items: center; font-size: 62px; font-weight: 900; color: white; text-shadow: 0 3px 0 rgba(37,40,61,.35); }

.confirm-overlay, .complete-overlay, .settings-overlay, .info-overlay {
  position: absolute; inset: 0; z-index: 50; background: rgba(37,40,61,.54); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
}
.dialog {
  width: min(82vw, 850px); max-height: 88vh; overflow: auto; padding: 34px;
  background: white; border: 8px solid var(--ink); border-radius: 42px; box-shadow: var(--shadow); text-align: center;
}
.dialog h2 { font-size: clamp(34px, 5vw, 62px); margin: 0 0 28px; }
.dialog-actions { display: flex; justify-content: center; gap: 5vw; }
.big-icon-button {
  min-width: 220px; min-height: 130px; padding: 16px 30px; border-radius: 32px; border: 6px solid var(--ink);
  box-shadow: 0 8px 0 rgba(37,40,61,.2); font-size: clamp(30px, 4vw, 52px); font-weight: 900;
}
.big-icon-button.yes { background: #83e599; }
.big-icon-button.no { background: #ffd764; }
.big-icon-button:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(37,40,61,.2); }

.complete-overlay { background: rgba(255,244,178,.22); backdrop-filter: none; pointer-events: none; }
.complete-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.success-word {
  font-size: clamp(70px, 11vw, 150px); font-weight: 1000; color: #ff4d64; -webkit-text-stroke: 6px white;
  filter: drop-shadow(0 8px 0 rgba(37,40,61,.2)); animation: successPop .7s cubic-bezier(.18,.89,.32,1.45) both;
}
.complete-actions { display: flex; gap: 3vw; margin-top: 3vh; opacity: 0; transform: translateY(20px); transition: .35s; pointer-events: auto; }
.complete-actions.visible { opacity: 1; transform: none; }
.complete-button {
  min-width: 250px; min-height: 120px; border: 7px solid var(--ink); border-radius: 34px;
  background: white; box-shadow: 0 9px 0 rgba(37,40,61,.2); font-size: clamp(28px, 4vw, 50px); font-weight: 900;
}
.complete-button.next { background: #8bd9ff; }
.complete-button.again { background: #ffd764; }
.confetti { position: absolute; width: 18px; height: 36px; border-radius: 8px; animation: confettiFall 2.8s ease-in forwards; }

.settings-dialog { text-align: left; }
.settings-dialog h2 { text-align: center; }
.setting-row { margin: 28px 0; }
.setting-row label { display: flex; justify-content: space-between; align-items: center; font-size: clamp(22px, 3vw, 38px); font-weight: 800; }
.setting-row input[type="range"] { width: 100%; height: 46px; accent-color: var(--blue); }
.parent-note { padding: 20px 24px; border-radius: 20px; background: #f3f5fa; font-size: clamp(16px, 2vw, 24px); line-height: 1.65; }
.close-button { display: block; min-width: 220px; min-height: 90px; margin: 26px auto 0; border: 5px solid var(--ink); border-radius: 26px; background: var(--yellow); font-size: 34px; font-weight: 900; }

.install-note {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7;
  background: rgba(255,255,255,.94); border: 4px solid var(--ink); border-radius: 20px; padding: 9px 18px;
  font-size: clamp(14px, 1.7vw, 22px); font-weight: 700; white-space: nowrap;
}
.cache-status {
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 8;
  padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.9); font-size: 16px; font-weight: 800;
}

#sparkle-layer { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.sparkle { position: absolute; width: 14px; height: 14px; background: var(--yellow); clip-path: polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%); animation: sparkleOut .65s ease-out forwards; }

#orientation-cover { display: none; position: fixed; inset: 0; z-index: 9999; background: #fff7d6; align-items: center; justify-content: center; }
.turn-device { display: flex; align-items: center; gap: 22px; font-size: 34px; }
.phone-icon { width: 90px; height: 150px; border: 8px solid var(--ink); border-radius: 18px; display: grid; place-items: center; font-size: 0; background: white; animation: phoneTurn 1.8s ease-in-out infinite; }
.turn-arrow { font-size: 80px; color: var(--blue); }

@media (orientation: portrait) { #orientation-cover { display: flex; } }
@media (max-height: 500px) {
  .mode-grid { height: 84vh; }
  .stage-wrap { height: 95vh; }
  .stage-grid { gap: 1.6vh 1.6vw; }
  .round-button { width: 78px; height: 78px; font-size: 44px; }
}

@keyframes logoBob { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes holdSpin { to { transform: rotate(1080deg); } }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.16); box-shadow: 0 0 0 12px rgba(255,212,59,.55), 0 0 40px 24px rgba(255,212,59,.35); } }
@keyframes handTap { to { transform: translate(-25%, -14%) scale(.9); } }
@keyframes traceDemo { 0% { opacity: 0; left: 20%; top: 70%; } 10% { opacity: 1; } 90% { opacity: 1; left: 78%; top: 48%; } 100% { opacity: 0; left: 78%; top: 48%; } }
@keyframes popIn { 50% { transform: translate(-50%, -50%) scale(1.25); } }
@keyframes wiggle { 25% { transform: translate(-56%, -50%) rotate(-5deg); } 75% { transform: translate(-44%, -50%) rotate(5deg); } }
@keyframes sceneCelebrate { 20% { transform: scale(1.05) rotate(-1deg); } 45% { transform: scale(.98) rotate(1deg); } 70% { transform: scale(1.03) rotate(-.5deg); } }
@keyframes successPop { from { opacity: 0; transform: scale(.25) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes confettiFall { from { transform: translateY(-10vh) rotate(0); opacity: 1; } to { transform: translateY(110vh) rotate(760deg); opacity: .9; } }
@keyframes sparkleOut { from { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5) rotate(150deg); } }
@keyframes phoneTurn { 50% { transform: rotate(90deg); } }