* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { margin: 0; padding: 0; height: 100%; background: #E3DCCD; font-family: 'Assistant', sans-serif; overflow: hidden; }
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }

.letter, .drop-mark { font-family: 'Suez One', serif; }

/* ---------- MAP ---------- */
.map-screen { background: radial-gradient(120% 100% at 50% 0%, #EFE6CC 0%, #E3DCCD 60%); }
.map-title { font-family: 'Suez One'; font-size: clamp(22px, 4vw, 34px); color: #402d20; margin-bottom: 6px; text-align: center; }
.map-sub { font-size: 15px; color: #8a7f6a; margin-bottom: 24px; text-align: center; }
.map-path { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; max-width: 900px; }
.stage-node { width: 130px; height: 130px; border-radius: 50% 50% 54% 46% / 58% 54% 46% 42%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; border: none; font-family: 'Assistant'; color: #fff; box-shadow: 0 10px 20px rgba(60,45,30,.2); transition: transform .15s; }
.stage-node:active { transform: scale(.94); }
.stage-node.mastered { background: radial-gradient(circle at 40% 32%, #93AC65, #5f7d3f 75%); }
.stage-node.unlocked { background: radial-gradient(circle at 40% 32%, #E4CFA6, #C4A778 68%); box-shadow: 0 0 0 6px rgba(214,155,62,.25), 0 10px 20px rgba(60,45,30,.2); animation: glow 2.4s ease-in-out infinite; }
.stage-node.locked { background: radial-gradient(circle at 40% 32%, #CDC3AC, #ADA288 72%); opacity: .55; cursor: default; }
.stage-node .node-icon { font-size: 40px; }
.stage-node .node-label { font-size: 13px; font-weight: 700; }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 6px rgba(214,155,62,.18), 0 10px 20px rgba(60,45,30,.2); } 50% { box-shadow: 0 0 0 10px rgba(214,155,62,.32), 0 10px 20px rgba(60,45,30,.2); } }

.gear-btn { position: absolute; top: 18px; left: 18px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); color: #8a7f6a; font-size: 20px; cursor: pointer; }

/* ---------- EXERCISE SCREENS ---------- */
.back-btn { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); color: #6f6552; font-size: 20px; cursor: pointer; }

.stone { border-radius: 47% 53% 56% 44% / 57% 54% 46% 43%; background: radial-gradient(circle at 40% 30%, #DBC7A2, #BBA07c 66%, #9d8258); box-shadow: inset -10px -12px 22px rgba(0,0,0,.18), inset 8px 9px 16px rgba(255,255,255,.34), 0 16px 26px rgba(60,45,30,.2); display: flex; align-items: center; justify-content: center; }
.stone.merged { background: radial-gradient(circle at 40% 30%, #F0D08A, #DEA94D 62%, #C68A34); box-shadow: inset -10px -12px 22px rgba(120,80,20,.24), inset 8px 9px 16px rgba(255,255,255,.4), 0 16px 26px rgba(150,110,40,.24); }
.stone .letter { color: #402d20; line-height: 1; }

.listen-btn { border: none; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 40% 34%, #E0A94F, #C1653F 78%); box-shadow: 0 12px 22px rgba(150,80,40,.32), inset 0 3px 6px rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; }
.listen-btn:active { transform: scale(.94); }
.listen-btn .tri { width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-right: 21px solid #fff; }

.tiles-row { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.tile { width: 150px; height: 150px; border-radius: 20px; border: 3px solid #d7ba7f; background: #F3E6CB; box-shadow: 0 8px 16px rgba(60,45,30,.14); display: flex; align-items: center; justify-content: center; font-size: 64px; cursor: pointer; transition: transform .12s; }
.tile:active { transform: scale(.92); }
.tile.wrong { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.drop { width: 78px; height: 78px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; box-shadow: inset 0 -6px 10px rgba(0,0,0,.16), 0 8px 14px rgba(0,0,0,.22); }
.drop .drop-mark { transform: rotate(-45deg); font-size: 38px; color: #fff; }
.drop.dragging { opacity: .35; }
.drops-col { position: absolute; top: 110px; right: 50px; display: flex; flex-direction: column; gap: 26px; }
.blend-target { position: relative; width: 300px; height: 260px; }
.drop-ghost { position: fixed; width: 78px; height: 78px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 50; box-shadow: 0 10px 20px rgba(0,0,0,.3); }
.drop-ghost .drop-mark { transform: rotate(-45deg); font-size: 38px; color: #fff; }

/* ---------- OVERLAY ---------- */
.overlay { position: absolute; inset: 0; background: rgba(227,220,205,.92); display: flex; align-items: center; justify-content: center; z-index: 100; }
.overlay .stone { width: 220px; height: 190px; animation: pop .4s ease-out; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- PARENT ---------- */
.parent-screen { align-items: stretch; justify-content: flex-start; background: #F4EEE2; overflow-y: auto; padding: 30px 26px; }
.parent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.parent-header h1 { font-family: 'Suez One'; font-size: 24px; color: #3f382d; margin: 0; }
.card { background: #FBF7EE; border: 1px solid #e6ddcb; border-radius: 18px; padding: 20px; margin-bottom: 18px; }
.card h2 { font-size: 17px; color: #4a4234; margin: 0 0 12px; }
.stage-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee3cf; }
.stage-row:last-child { border-bottom: none; }
.toggle { display: flex; gap: 6px; }
.toggle button { border: 1px solid #d8c9ac; background: #F1E6CF; color: #6f6552; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.toggle button.active { background: #C1653F; color: #fff; border-color: #C1653F; }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 10px; }
.mastery-cell { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Suez One'; font-size: 24px; color: #fff; }
.stats-row { display: flex; gap: 24px; }
.stat b { font-family: 'Suez One'; font-size: 32px; color: #4F6B45; display: block; }
.gate-box { background: #FBF7EE; border-radius: 20px; padding: 30px; text-align: center; max-width: 320px; }
.gate-box input { font-size: 22px; text-align: center; width: 100px; padding: 8px; border-radius: 10px; border: 2px solid #d7ba7f; margin: 14px 0; }
.gate-box button { display: block; margin: 0 auto; padding: 10px 24px; border: none; border-radius: 10px; background: #C1653F; color: #fff; font-size: 16px; cursor: pointer; }