*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overscroll-behavior:none}body{font-family:Segoe UI Rounded,Nunito,Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(180deg,#bde7f9,#d5f1fc 55%,#c4ebfa);color:#23445c;user-select:none;-webkit-user-select:none}#app{min-height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));min-height:100dvh}button{font-family:inherit;border:none;cursor:pointer;color:inherit;background:none}.big-btn{display:block;width:100%;max-width:320px;margin:8px auto;padding:18px 24px;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffb347,#f28c1e);border-radius:22px;box-shadow:0 5px #cf6f0d,0 8px 16px #0000001f;transition:transform .08s}.big-btn:active{transform:translateY(3px);box-shadow:0 2px #cf6f0d}.big-btn.secondary{background:linear-gradient(180deg,#62c9ee,#2f9fd0);box-shadow:0 5px #1f7ba5,0 8px 16px #0000001f}.big-btn.secondary:active{box-shadow:0 2px #1f7ba5}.big-btn.danger{background:linear-gradient(180deg,#f38ba0,#dd5573);box-shadow:0 5px #b03a55;font-size:18px;margin-top:28px}.small-btn{padding:12px 18px;font-size:17px;font-weight:700;background:#fffc;border-radius:16px;box-shadow:0 3px 8px #23445c26}.icon-btn{width:52px;height:52px;font-size:26px;font-weight:800;background:#fffc;border-radius:16px;box-shadow:0 3px 8px #23445c26;flex-shrink:0}.game-header{display:flex;align-items:center;gap:14px;margin-bottom:8px}.screen-title{font-size:24px;font-weight:800}.progress-wrap{flex:1;display:flex;align-items:center;gap:8px}.progress-bar{flex:1;height:22px;background:#fff;border-radius:999px;border:3px solid #f2b25e;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#ffcf6e,#f79d2c);border-radius:999px;transition:width .5s ease}.progress-crown{font-size:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}.phase-label{text-align:center;font-size:16px;font-weight:700;color:#3c6a8c;margin-bottom:4px}.game-screen .stage{flex:1;display:flex;flex-direction:column}.word-stage{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;position:relative}.picture-row{position:relative;width:100%;display:flex;justify-content:center;align-items:center}.picture-card{width:min(62vw,300px);aspect-ratio:1;background:#fff;border-radius:28px;box-shadow:0 6px 18px #23445c2e;display:flex;align-items:center;justify-content:center;padding:12px}.picture-card img{max-width:100%;max-height:100%;border-radius:18px;pointer-events:none}.picture-card.celebrating{animation:bounce .6s ease}@keyframes bounce{0%,to{transform:scale(1)}40%{transform:scale(1.08) rotate(-2deg)}70%{transform:scale(1.04) rotate(2deg)}}.side-btn{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 10px;background:#ffffffd9;border-radius:18px;box-shadow:0 4px 10px #23445c2e;min-width:64px;min-height:80px;justify-content:center}.side-btn:active{transform:translateY(calc(-50% + 2px))}.sound-btn{right:2px}.hint-btn{left:2px}.hint-btn:disabled{opacity:.55;filter:grayscale(.9);cursor:default}.hint-btn:disabled:active{transform:translateY(-50%)}.hint-dots{font-size:10px;letter-spacing:2px;color:#f28c1e;min-height:12px;line-height:1}.side-icon{font-size:30px}.side-label{font-size:14px;font-weight:700;color:#3c6a8c}.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;touch-action:none;min-height:calc(var(--tile-size, 64px) + 16px)}.tile{width:var(--tile-size, 64px);height:var(--tile-size, 64px);display:flex;align-items:center;justify-content:center;font-size:calc(var(--tile-size, 64px) * .58);font-weight:900;color:var(--letter-color, #23445c);background:linear-gradient(180deg,#f6c37b,#eda94f 60%,#dd923a);border:3px solid #c97f2b;border-radius:16px;box-shadow:inset 0 2px 3px #ffffff8c,0 4px #b06d20,0 6px 10px #0000001f;text-shadow:0 1px 0 rgba(255,255,255,.5);touch-action:none}.tile.correct{background:linear-gradient(180deg,#8fe09a,#5cc46e 60%,#43ab56);border-color:#3a9a4c;box-shadow:inset 0 2px 3px #ffffff8c,0 4px #2f8340,0 6px 10px #0000001f;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.tile.sep{background:transparent;border:none;box-shadow:none;color:#3c6a8c;width:calc(var(--tile-size, 64px) * .4)}.tile.drag-ghost{opacity:.25}.tile.drop-target{transform:scale(1.08);border-color:#2f9fd0;box-shadow:inset 0 2px 3px #ffffff8c,0 4px #1f7ba5,0 0 0 4px #62c9ee88,0 6px 12px #00000026}.drag-clone{position:fixed;z-index:100;pointer-events:none;transform:scale(1.15) rotate(-3deg);box-shadow:0 12px 24px #00000040}.win-badge{position:absolute;top:6%;left:50%;transform:translate(-50%);background:#ffffffe8;padding:12px 26px;border-radius:999px;font-size:22px;font-weight:900;color:#2f8340;box-shadow:0 6px 16px #23445c33;animation:pop-in .4s ease;white-space:nowrap}@keyframes pop-in{0%{transform:translate(-50%) scale(.4);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}.phase-complete{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}.phase-complete-crown{font-size:84px;animation:pop-in .5s ease}.phase-complete h2{font-size:30px;font-weight:900}.phase-stars{font-size:42px;letter-spacing:6px}.phase-complete-btns{width:100%;margin-top:12px}.home-screen{justify-content:space-evenly;align-items:center}.logo{display:flex;flex-direction:column;gap:10px;align-items:center}.logo-row{display:flex;gap:6px}.logo-tile{width:44px;height:44px;font-size:26px;border-radius:12px;animation:float 3s ease-in-out infinite}.logo-row:nth-child(2) .logo-tile{width:36px;height:36px;font-size:21px}.logo-tile:nth-child(odd){animation-delay:.4s}.logo-tile:nth-child(3n){animation-delay:.9s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.logo-tile{animation:none}}.home-mascot img{width:min(46vw,220px);filter:drop-shadow(0 8px 14px rgba(35,68,92,.2));pointer-events:none}.play-btn{font-size:30px;padding:20px 24px}.home-footer{display:flex;gap:14px}.trail-list{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;padding:10px 4px 30px}.trail-section{width:100%;display:flex;align-items:center;gap:10px;margin-top:14px}.trail-section-badge{background:#f28c1e;color:#fff;font-weight:800;font-size:14px;padding:6px 12px;border-radius:999px;white-space:nowrap}.trail-section-name{font-weight:800;font-size:17px;color:#3c6a8c}.phase-node{width:76px;height:76px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;background:#fff;box-shadow:0 4px #23445c26,0 6px 12px #23445c1a}.phase-node .phase-num{font-size:24px}.phase-node .phase-mark{font-size:17px}.phase-node.done{background:linear-gradient(180deg,#8fe09a,#5cc46e);color:#fff}.phase-node.open{background:linear-gradient(180deg,#ffcf6e,#f79d2c);color:#fff;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.phase-node.open{animation:none}}.phase-node.locked{opacity:.55}.settings-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}.setting-row{display:flex;align-items:center;gap:12px;background:#fffc;border-radius:18px;padding:16px;box-shadow:0 3px 8px #23445c1a;cursor:pointer}.setting-texts{flex:1}.setting-label{font-size:18px;font-weight:800}.setting-hint{font-size:14px;color:#5b7f9c}.setting-row input{display:none}.toggle{width:56px;height:32px;border-radius:999px;background:#cfdde8;position:relative;transition:background .2s;flex-shrink:0}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:left .2s}.setting-row input:checked+.toggle{background:#5cc46e}.setting-row input:checked+.toggle:after{left:27px}.settings-note{text-align:center;margin-top:auto;padding-top:24px;font-size:13px;color:#5b7f9c}.parents-body{flex:1;display:flex;flex-direction:column}.gate-card{margin:auto;width:100%;max-width:320px;background:#ffffffd9;border-radius:24px;padding:28px 24px;text-align:center;box-shadow:0 6px 16px #23445c26;display:flex;flex-direction:column;gap:12px}.gate-icon{font-size:44px}.gate-text{font-size:16px;color:#5b7f9c}.gate-question{font-size:30px;font-weight:900}.gate-input{font-family:inherit;font-size:26px;font-weight:800;text-align:center;padding:12px;border:3px solid #bde7f9;border-radius:16px;width:100%;color:inherit;background:#fff}.gate-input:focus{outline:none;border-color:#f28c1e}.gate-error{color:#dd5573;font-weight:700;min-height:20px;font-size:14px}.report{padding:12px 0 30px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-box{background:#fffc;border-radius:18px;padding:16px;text-align:center;box-shadow:0 3px 8px #23445c1a}.stat-value{font-size:30px;font-weight:900;color:#f28c1e}.stat-label{font-size:13px;font-weight:700;color:#5b7f9c}.report-h2{font-size:18px;font-weight:800;margin:22px 0 10px}.report-empty{font-size:14px;color:#5b7f9c}.bar-list{display:flex;flex-direction:column;gap:8px}.bar-row{display:flex;align-items:center;gap:10px}.bar-name{width:36px;font-weight:900}.bar{height:18px;background:linear-gradient(90deg,#ffcf6e,#f79d2c);border-radius:999px}.bar-num{font-weight:700;font-size:14px;color:#5b7f9c}.word-err-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-weight:700}.word-err-list li{background:#fffc;border-radius:12px;padding:10px 14px;box-shadow:0 2px 6px #23445c14}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:200;overflow:hidden}.confetti{position:absolute;top:-20px;border-radius:3px;animation:confetti-fall linear forwards}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(calc(720deg * var(--spin, 1)));opacity:.7}}