* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { height: 100%; touch-action: manipulation; font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; }
html, body.in-game { overflow: hidden; }
body { display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, #FFE5A8 0%, #FFB5D1 100%); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.home { overflow-y: auto; min-height: 100vh; height: auto; }

/* ===== Home ===== */
.home h1 { font-size: 1.8rem; color: #4A3636; margin: 1.2rem 0 0.5rem; text-shadow: 0 2px 0 rgba(255,255,255,0.6); }
.age-group { width: 100%; max-width: 480px; padding: 0.6rem 1rem; }
.age-label { font-size: 1rem; font-weight: 700; color: #6B4444; opacity: 0.8; margin: 0.4rem 0.4rem 0.6rem; }
.menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; width: 100%; }
.game-card { display: flex; flex-direction: column; align-items: center; padding: 0.9rem 0.4rem; border-radius: 20px; text-decoration: none; color: #4A3636; box-shadow: 0 5px 0 rgba(0,0,0,0.12), 0 8px 18px rgba(0,0,0,0.10); transition: transform 0.1s; aspect-ratio: 1; justify-content: center; }
.game-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.10); }
.game-card.g1 { background: linear-gradient(135deg, #A0E7FF, #5EC3FF); }
.game-card.g2 { background: linear-gradient(135deg, #E5BCFF, #C780FA); }
.game-card.g3 { background: linear-gradient(135deg, #FFD3A5, #FD9853); }
.game-card.g4 { background: linear-gradient(135deg, #FFB6E1, #FF7AC6); }
.game-card.g5 { background: linear-gradient(135deg, #C8FACC, #6BCB77); }
.game-card.g6 { background: linear-gradient(135deg, #FFEC85, #FFD93D); }
.card-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 0.3rem; }
.card-title { font-size: 0.95rem; font-weight: 800; text-align: center; }

/* ===== Top bar (back + score) ===== */
.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; flex-shrink: 0; }
.btn-back { background: rgba(255,255,255,0.7); border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; box-shadow: 0 3px 0 rgba(0,0,0,0.1); cursor: pointer; }
.btn-back:active { transform: translateY(2px); }
.score { font-size: 1.6rem; font-weight: 800; color: #4A3636; background: rgba(255,255,255,0.7); padding: 0.3rem 1rem; border-radius: 999px; min-width: 80px; text-align: center; }

/* ===== Bubbles canvas ===== */
.bubbles-stage { flex: 1; width: 100%; position: relative; overflow: hidden; }
#bubbleCanvas { display: block; width: 100%; height: 100%; }

/* ===== Memory grid ===== */
.memory-stage { flex: 1; width: 100%; max-width: 600px; padding: 0.5rem; display: flex; align-items: center; justify-content: center; }
.grid { display: grid; gap: 0.6rem; width: 100%; }
.grid.lv1 { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
.grid.lv2 { grid-template-columns: repeat(4, 1fr); max-width: 480px; }
.grid.lv3 { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
.card { aspect-ratio: 1; perspective: 600px; cursor: pointer; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.4s; transform-style: preserve-3d; }
.card.flipped .card-inner, .card.matched .card-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.card-front { background: linear-gradient(135deg, #FFB6E1, #FF7AC6); font-size: 2.2rem; color: white; }
.card-back  { background: white; transform: rotateY(180deg); font-size: 2.6rem; }
.card.matched .card-back { background: #C8FACC; animation: pop 0.4s ease; }
@keyframes pop { 0% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(180deg) scale(1.15); } 100% { transform: rotateY(180deg) scale(1); } }

.level-picker { display: flex; gap: 0.5rem; padding: 0.5rem 1rem 1rem; }
.level-btn { flex: 1; padding: 0.6rem; border: none; border-radius: 16px; font-size: 1rem; font-weight: 700; background: rgba(255,255,255,0.7); color: #4A3636; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.1); }
.level-btn.active { background: #FF7AC6; color: white; }

/* ===== Win overlay ===== */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 100; }
.overlay.show { display: flex; }
.overlay-card { background: white; border-radius: 24px; padding: 2rem 2.5rem; text-align: center; max-width: 80vw; }
.overlay-card h2 { font-size: 2rem; margin-bottom: 0.5rem; color: #4A3636; }
.overlay-card p { font-size: 1.2rem; color: #888; margin-bottom: 1.5rem; }
.overlay-btn { background: #FF7AC6; color: white; border: none; padding: 0.8rem 2rem; border-radius: 999px; font-size: 1.2rem; font-weight: 700; box-shadow: 0 4px 0 #D14F9D; cursor: pointer; }
.overlay-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #D14F9D; }