:root{--bg:#faf5ea;--bg-deep:#efe6d4;--ink:#2b3a42;--ink-soft:#46545c;--teal:#005672;--teal-soft:#e0eef2;--accent:#f2a541;--accent-deep:#d98324;--card:#fff;--good:#2e9e5b;--good-soft:#e3f5ea;--bad:#d97756;--bad-soft:#fbeae3;--radius:18px;--shadow:0 4px 14px #2b3a4229;--shadow-big:0 10px 30px #2b3a4238}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{height:100%}body{color:var(--ink);background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:19px}button{color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:none;font-family:inherit}.app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex;overflow:hidden}.home{flex-direction:column;align-items:center;height:100%;padding:24px 16px 40px;display:flex;overflow-y:auto}.home-head{align-items:center;gap:16px;margin-bottom:6px;display:flex}.home-logo{width:72px;height:72px;box-shadow:var(--shadow);border-radius:20px}.home-title{color:var(--teal);letter-spacing:1px;font-size:40px}.home-sub{color:var(--ink-soft);text-align:center;margin-bottom:12px;font-size:20px}.start-btn{background:var(--accent);color:#fff;box-shadow:var(--shadow-big);border-radius:22px;flex-direction:column;align-items:center;gap:3px;margin:8px 0 16px;padding:16px 46px;transition:transform .12s;display:flex}.start-btn:active{background:var(--accent-deep);transform:scale(.97)}.start-main{align-items:center;gap:10px;font-size:28px;font-weight:800;display:flex}.start-note{opacity:.92;font-size:17px;font-weight:600}.xung-btn{color:var(--ink-soft);background:var(--teal-soft);border-radius:999px;margin-bottom:24px;padding:8px 20px;font-size:17px}.xung-btn b{color:var(--teal)}.xung-btn:active{background:#cfe3ea}.home-grid{grid-template-columns:repeat(auto-fit,minmax(190px,220px));justify-content:center;gap:22px;width:100%;max-width:1060px;display:grid}.game-tile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:3px solid #0000;flex-direction:column;align-items:center;gap:12px;padding:18px 12px 14px;transition:transform .15s,box-shadow .15s;display:flex}.game-tile:active{border-color:var(--accent);transform:scale(.96)}.game-tile .thumb{justify-content:center;align-items:center;width:110px;height:110px;display:flex}.game-tile .name{color:var(--teal);font-size:23px;font-weight:700}.shell{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.shell-bar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--teal);color:#fff;justify-content:space-between;align-items:center;gap:10px;display:flex}.shell-title{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:24px;font-weight:700;overflow:hidden}.bar-btn{color:#fff;background:#ffffff29;border:2px solid #ffffff8c;border-radius:14px;align-items:center;gap:8px;min-height:52px;padding:10px 16px;font-size:19px;font-weight:700;display:flex}.bar-btn:active{background:#ffffff52}.shell-body{flex-direction:column;flex:1;align-items:center;padding:16px;display:flex;position:relative;overflow-y:auto}.prompt{text-align:center;margin-bottom:8px;font-size:24px;font-weight:700}.prompt-sub{color:var(--ink-soft);text-align:center;font-size:20px}.overlay{z-index:60;background:#2b3a4273;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.help-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-big);flex-direction:column;align-items:center;gap:20px;max-width:560px;padding:30px;animation:.25s pop-in;display:flex}.help-card h2{color:var(--teal);font-size:26px}.help-card p{text-align:center;font-size:22px;line-height:1.55}.big-btn{background:var(--accent);color:#fff;min-height:64px;box-shadow:var(--shadow);border-radius:16px;padding:16px 38px;font-size:24px;font-weight:800}.big-btn:active{background:var(--accent-deep);transform:scale(.97)}.big-btn.secondary{background:#8ba6b2}.big-btn.secondary:active{background:#74929f}.answer-row{flex-wrap:wrap;justify-content:center;gap:26px;margin-top:18px;display:flex}.answer-btn{background:var(--card);border:3px solid var(--teal);color:var(--teal);min-width:130px;min-height:84px;box-shadow:var(--shadow);border-radius:20px;padding:14px 24px;font-size:32px;font-weight:800;transition:transform .12s}.answer-btn:active:not(:disabled){background:var(--teal-soft);transform:scale(.95)}.answer-btn:disabled{opacity:.45}.answer-btn.text{font-size:24px}.opt-dim{opacity:.28;transition:opacity .2s}.opt-correct{outline:4px solid var(--good);outline-offset:3px;border-radius:16px}.answer-btn.opt-correct,.tap-item.opt-correct{opacity:1}.nudge{color:var(--accent-deep);border:2px solid var(--accent);text-align:center;background:#fbe6c2;border-radius:14px;margin-top:14px;padding:10px 22px;font-size:21px;font-weight:700;animation:.2s pop-in}.answer-col{flex-direction:column;align-items:stretch;gap:16px;width:100%;max-width:640px;margin-top:14px;display:flex}.answer-btn.long{white-space:normal;min-height:68px;padding:14px 22px;font-size:23px;line-height:1.45}.result-wrap{padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom));z-index:50;pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.result-panel{pointer-events:auto;background:var(--card);box-shadow:var(--shadow-big);border-top:8px solid var(--good);border-radius:22px;flex-direction:column;align-items:center;gap:14px;min-width:320px;max-width:90vw;padding:22px 34px;animation:.35s cubic-bezier(.18,.9,.32,1.2) rise-in;display:flex}.result-panel.reveal{border-top-color:var(--accent)}.result-face{font-size:52px;line-height:1}.result-msg{text-align:center;font-size:25px;font-weight:800}.result-msg.good{color:var(--good)}.result-msg.reveal{color:var(--accent-deep)}.result-detail{color:var(--ink-soft);text-align:center;font-size:22px}.deal-in{animation:.55s cubic-bezier(.2,.9,.3,1.15) backwards deal-in}.flip-card{perspective:900px;background:0 0;border:none;padding:0}.flip-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s;position:relative}.flip-inner.up{transform:rotateY(180deg)}.flip-face{backface-visibility:hidden;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.flip-face.front{transform:rotateY(180deg)}.flip-card.matched{opacity:.55;animation:.6s match-pulse}.slot-row{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:20px;display:flex}.slot{background:#ffffff80;border:3px dashed #00567266;border-radius:16px;justify-content:center;align-items:center;display:flex}.slot.filled{border-style:solid;border-color:var(--teal);background:var(--card)}.slot-num{color:#0056728c;font-size:30px;font-weight:800}.tap-item{background:0 0;border:none;padding:4px;transition:transform .12s}.tap-item:active:not(:disabled){transform:scale(.93)}.tap-item.ghost{opacity:.18;pointer-events:none}.pop-in{animation:.35s cubic-bezier(.2,.9,.3,1.25) pop-in}.jigsaw-area{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:30px;display:flex}.jigsaw-board{background:var(--bg-deep);border-radius:14px;gap:4px;padding:10px;display:grid;box-shadow:inset 0 2px 8px #2b3a422e}.jigsaw-cell{background:#ffffffa6;border:3px dashed #00567259;border-radius:8px;justify-content:center;align-items:center;display:flex;overflow:hidden}.jigsaw-cell.done{border:3px solid #0000}.jigsaw-tray{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;min-height:120px;margin-top:22px;display:flex}.jigsaw-piece{box-shadow:var(--shadow);touch-action:none;background:#fff;border-radius:8px;overflow:hidden}.jigsaw-piece.dragging{z-index:80;box-shadow:var(--shadow-big);position:fixed;transform:scale(1.06)}.jigsaw-preview{flex-direction:column;align-items:center;gap:8px;display:flex}.jigsaw-preview .label{color:var(--ink-soft);font-size:19px;font-weight:700}.jigsaw-preview svg{box-shadow:var(--shadow);opacity:.9;border-radius:10px}.drop-hint{min-height:32px;color:var(--bad);text-align:center;font-size:22px;font-weight:700}.jigsaw-piece.shake{animation:.5s shake}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;display:flex}.stack{flex-direction:column;align-items:center;gap:14px;display:flex}.grid3{grid-template-columns:repeat(3,1fr);justify-items:center;gap:14px 34px;display:grid}.card-face{filter:drop-shadow(0 4px 6px #2b3a4240)}.question-chip{box-shadow:var(--shadow);border-radius:14px;align-items:center;gap:12px;padding:14px 30px;font-size:27px;font-weight:800;display:inline-flex}.sentence-box{background:var(--card);border-left:8px solid var(--accent);box-shadow:var(--shadow);text-align:center;border-radius:14px;max-width:780px;padding:24px 28px;font-size:26px;font-style:italic;line-height:1.6}.check-badge{color:#fff;width:44px;height:44px;box-shadow:var(--shadow);border-radius:50%;justify-content:center;align-items:center;font-size:26px;font-weight:900;display:flex;position:absolute;top:-12px;right:-12px}.check-badge.good{background:var(--good)}.check-badge.bad{background:var(--bad)}.congrats{color:var(--good);text-align:center;font-size:30px;font-weight:900;animation:.4s pop-in}.fit-card{width:100%;height:100%}.fit-animal{width:86%;height:86%}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes rise-in{0%{opacity:0;transform:translateY(140px)}to{opacity:1;transform:translateY(0)}}@keyframes deal-in{0%{opacity:0;transform:translateY(-160px)rotate(-6deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}@keyframes match-pulse{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}.session-end,.crash-screen{background:var(--bg);justify-content:center;align-items:center;height:100dvh;padding:24px;display:flex}.crash-face{font-size:64px;line-height:1}@media (width<=700px){.home-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.answer-btn{min-width:104px;min-height:72px;font-size:26px}}