: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;--motion-fast:.12s;--motion-normal:.24s;--motion-slow:.38s;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.3, .64, 1)}*{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:translateY(8px)scale(.94)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes rise-in{0%{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes deal-in{0%{opacity:0;transform:translateY(-36px)rotate(-3deg)scale(.98)}to{opacity:1;transform:translate(0,0)rotate(0)scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}@keyframes match-pulse{0%{transform:scale(1)}45%{transform:scale(1.07)}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}}.app{isolation:isolate}html[data-motion-transition=screen] .app{view-transition-name:ahha-screen}html[data-motion-transition=round] .shell-body{view-transition-name:ahha-round}html[data-motion-transition]::view-transition-old(root){animation:none}html[data-motion-transition]::view-transition-new(root){animation:none}html[data-motion-transition=screen]::view-transition-old(ahha-screen){mix-blend-mode:normal;animation:.16s cubic-bezier(.4,0,1,1) both motion-screen-out}html[data-motion-transition=screen]::view-transition-new(ahha-screen){animation:motion-screen-in .28s var(--ease-out) both;mix-blend-mode:normal}html[data-motion-transition=round]::view-transition-old(ahha-round){mix-blend-mode:normal;animation:.13s cubic-bezier(.4,0,1,1) both motion-round-out}html[data-motion-transition=round]::view-transition-new(ahha-round){animation:motion-round-in var(--motion-normal) var(--ease-out) both;mix-blend-mode:normal}.start-btn,.xung-btn,.game-tile,.bar-btn,.big-btn,.answer-btn,.tap-item{transition:transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-normal) ease;transform:translate(0,0)scale(1)}.start-btn:active:not(:disabled),.xung-btn:active:not(:disabled),.game-tile:active:not(:disabled),.bar-btn:active:not(:disabled),.big-btn:active:not(:disabled),.answer-btn:active:not(:disabled),.tap-item:active:not(:disabled){transform:translateY(1px)scale(.97)}button:disabled{cursor:default}button:focus-visible{outline:4px solid var(--accent);outline-offset:4px}.motion-lock-scroll{overflow:hidden}.game-tile{animation:home-tile-in .36s var(--ease-out) backwards}@media (hover:hover) and (pointer:fine){.game-tile:hover{box-shadow:var(--shadow-big);transform:translateY(-3px)}.bar-btn:hover,.xung-btn:hover{filter:brightness(1.04)}}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay-enter{animation:.18s ease-out both overlay-fade-in}.overlay-leave{cursor:default;animation:.18s ease-in both overlay-fade-out}.overlay-enter .help-card{animation:dialog-card-in var(--motion-normal) var(--ease-out) both}.overlay-leave .help-card{animation:.16s ease-in both dialog-card-out}.result-wrap-enter{animation:.18s ease-out both result-wrap-in}.result-wrap-enter .result-panel{animation:result-panel-in .3s var(--ease-spring) both}.result-wrap-leave{pointer-events:none;animation:.17s ease-in both result-wrap-out}.result-wrap-leave .result-panel{animation:.17s ease-in both result-panel-out}.result-item{animation:result-item-in .26s var(--ease-out) backwards}.result-item:first-child{animation-delay:70ms}.result-item:nth-child(2){animation-delay:.105s}.result-item:nth-child(3){animation-delay:.135s}.result-item:nth-child(4){animation-delay:.165s}.opt-correct{animation:answer-ring-in .42s var(--ease-out) both}.pop-in,.nudge,.congrats{animation-timing-function:var(--ease-out)}.deal-in{animation-duration:.44s;animation-timing-function:var(--ease-out)}.session-complete-card{animation:dialog-card-in .32s var(--ease-out) both}.slot{transition:border-color var(--motion-normal) ease, background-color var(--motion-normal) ease, box-shadow var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out)}.slot-target{animation:slot-ready .43s var(--ease-out) both}.mug-in-flight{opacity:0!important}.flying-mug{z-index:55;pointer-events:none;transform-origin:50%;filter:drop-shadow(0 12px 12px #2b3a423d);will-change:transform, opacity;width:100px;height:100px;animation:mug-flight .43s var(--ease-in-out) both;position:fixed}.mug-landed{width:96px;height:96px;animation:mug-land .21s var(--ease-spring) backwards}.tray-art{transform-origin:50% 20%;line-height:0}.tray-complete .tray-art{animation:tray-settle .42s var(--ease-spring) 90ms both}.tray-complete .slot{box-shadow:0 6px 16px #00567224}@keyframes motion-screen-out{to{opacity:0;transform:translate(-12px)scale(.995)}}@keyframes motion-screen-in{0%{opacity:0;transform:translate(14px)scale(.995)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes motion-round-out{to{opacity:0;transform:translateY(-8px)}}@keyframes motion-round-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translate(0,0)}}@keyframes home-tile-in{0%{visibility:hidden;opacity:0;transform:translateY(12px)scale(.98)}1%{visibility:visible}to{visibility:visible;opacity:1;transform:translate(0,0)scale(1)}}@keyframes overlay-fade-in{0%{-webkit-backdrop-filter:blur();backdrop-filter:blur();background-color:#2b3a4200}to{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#2b3a4273}}@keyframes overlay-fade-out{0%{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#2b3a4273}to{-webkit-backdrop-filter:blur();backdrop-filter:blur();background-color:#2b3a4200}}@keyframes dialog-card-in{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes dialog-card-out{0%{opacity:1;transform:translate(0,0)scale(1)}to{opacity:0;transform:translateY(8px)scale(.98)}}@keyframes result-wrap-in{0%{opacity:0}to{opacity:1}}@keyframes result-wrap-out{to{opacity:0}}@keyframes result-panel-in{0%{opacity:0;transform:translateY(24px)scale(.98)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes result-panel-out{0%{opacity:1;transform:translate(0,0)scale(1)}to{opacity:0;transform:translateY(14px)scale(.985)}}@keyframes result-item-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translate(0,0)}}@keyframes answer-ring-in{0%{outline-offset:9px;outline-color:#2e9e5b00}to{outline-color:var(--good);outline-offset:3px}}@keyframes slot-ready{0%{transform:scale(1);box-shadow:0 0 #f2a54100}55%{border-color:var(--accent);transform:scale(1.025);box-shadow:0 0 0 7px #f2a54129}to{border-color:var(--teal);transform:scale(1);box-shadow:0 0 #f2a54100}}@keyframes mug-flight{0%{opacity:1;transform:translate(0,0)scale(1)rotate(0)}52%{opacity:1;transform:translate3d(var(--flight-mid-x), var(--flight-mid-y), 0) scale(1.045) rotate(-1.5deg)}to{opacity:1;transform:translate3d(var(--flight-x), var(--flight-y), 0) scale(.96) rotate(0)}}@keyframes mug-land{0%{opacity:.75;transform:translateY(-3px)scale(.96)}70%{opacity:1;transform:translateY(1px)scale(1.025)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes tray-settle{0%{transform:translate(0,0)scaleX(1)}45%{transform:translateY(2px)scaleX(1.012)}to{transform:translate(0,0)scaleX(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}html::view-transition-old(root){animation:none!important}html::view-transition-new(root){animation:none!important}html::view-transition-old(ahha-screen){animation:none!important}html::view-transition-new(ahha-screen){animation:none!important}html::view-transition-old(ahha-round){animation:none!important}html::view-transition-new(ahha-round){animation:none!important}}