@font-face{font-family:Inter;src:url(./inter-latin-400-normal-C38fXH4l.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url(./inter-latin-600-normal-LgqL8muc.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Poppins;src:url(./poppins-latin-600-normal-zEkxB9Mr.woff2) format("woff2");font-weight:600;font-display:swap}:root{font-family:Inter,Segoe UI,sans-serif;color:#2f2f2f;background:#fefdfc;font-synthesis:none;--blue:#7ea8c9;--ink:#395569;--border:#d5e0e6;--control:46px}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;align-items:center}button,select,a{-webkit-tap-highlight-color:transparent}button,select{font:600 16px Inter,sans-serif;color:inherit}button,select{min-height:var(--control);border:1px solid var(--border);border-radius:12px;background:#fff;padding:0 16px}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #385d86;outline-offset:4px}button:not(:disabled):hover{border-color:#7ea8c9}button:disabled:not(.choice):not(#prompt-card){opacity:.55}#app{width:100%;max-height:1050px;max-width:1440px;margin:auto;min-height:600px;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:14px clamp(16px,2.4vw,40px) 12px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.brand{display:flex;align-items:center;gap:12px;color:#7c9ebf;font:600 25px Poppins,sans-serif}.brand img{display:block;width:38px;height:38px}.header-actions{display:flex;gap:10px;align-items:center}.header-actions button{display:flex;align-items:center;justify-content:center;gap:8px}.header-actions svg{width:20px;height:20px}#sound{width:140px}#print{background:#eef5ef;min-width:102px}#print svg rect{fill:none;stroke:currentColor;stroke-width:2}#print svg path{fill:none;stroke:currentColor;stroke-width:2}.print-wrap{position:relative}#print-menu{position:absolute;top:calc(100% + 8px);right:0;width:254px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:7px;box-shadow:0 8px 24px #253e5520;z-index:50}#print-menu a{display:block;color:var(--ink);font-size:16px;padding:14px 10px;text-decoration:none;border-radius:7px}#print-menu a:hover{background:#eef4f8}.setup{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-shrink:0}.intro h1{font:600 clamp(24px,2.4vw,32px)/1.25 Poppins,sans-serif;margin:0 0 5px}.intro p{font-size:16px;line-height:1.4;margin:0;color:#536773}.settings{display:flex;align-items:end;gap:12px}.settings label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:#536773}.settings select{font-weight:400;min-width:114px}#prompt-mode{width:169px}#practice-set{width:180px}.play-area{flex:1;min-height:0;border:1px solid #e9e4d8;background:#fefcf5;border-radius:26px;box-shadow:0 9px 28px #796a3210;padding:12px 28px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:8px}.scene{min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(35px,9vw,140px)}.prompt-zone{height:min(92%,300px);display:flex;flex-direction:column;align-items:center;gap:7px;width:clamp(150px,20vw,240px)}.prompt-label{font-size:16px;font-weight:600;color:#536773;flex-shrink:0}#prompt-card{width:100%;flex:1;min-height:0;max-height:245px;background:#fff;border:2px solid #acc7db;border-radius:22px;box-shadow:0 6px #ccdae3;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;padding:7px}#prompt-content{font:600 clamp(65px,13vh,138px)/1 Poppins,sans-serif;display:flex;align-items:center;justify-content:center;flex:1;min-height:0}#prompt-content>svg{width:clamp(55px,9vh,95px);height:clamp(55px,9vh,95px);color:#527b9c;fill:#eef4f8;stroke:#527b9c;stroke-width:1.8}#prompt-content>svg path{fill:none}.audio-only #prompt-content>svg path:first-child{fill:currentColor;stroke:none}.replay-hint{display:flex;align-items:center;gap:6px;font:400 14px Inter,sans-serif;color:#536773;height:23px;visibility:hidden}.has-prompt .replay-hint{visibility:visible}.replay-hint svg{width:18px;height:18px}.mailbox{position:relative;height:100%;max-height:355px;aspect-ratio:1;flex-shrink:0;isolation:isolate}.mailbox>img{width:100%;height:100%;object-fit:contain;display:block}#mail-slot{position:absolute;left:27%;top:39.5%;width:37%;height:5%}.answer-area{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0}#choices{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,38px);padding:3px 8px 8px;width:min(100%,750px)}.choice{position:relative;height:clamp(76px,12vh,130px);min-height:0;background:#fff;border:2px solid #b9cddd;border-radius:16px;box-shadow:0 6px #9ebbd0,0 9px #283a4610;font:600 clamp(40px,7.5vh,76px)/1 Poppins,sans-serif;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.choice:after{content:"";position:absolute;right:9px;top:9px;width:16px;height:12px;border:1px dashed #b9cddd;border-radius:2px}.choice.placeholder{background:#f7f9fa;border-color:#d5e0e6;box-shadow:0 6px #dde6eb;color:#a8bbc9}.placeholder svg{width:42px;height:32px;fill:none;stroke:currentColor;stroke-width:1.4}.choice.correct{border-color:#72a780;background:#eef5ef;box-shadow:0 6px #7faf8c,0 0 0 5px #7faf8c35}.choice.sent{visibility:hidden}.flying-card{background:#eef5ef;border-color:#72a780}.choice.wrong{border-color:#c96a6a;box-shadow:0 6px #c96a6a,0 0 0 5px #c96a6a25;animation:shake .35s ease}#message{margin:0;min-height:24px;font-size:16px;line-height:24px;color:#526674;text-align:center}.round-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #e6e3d8;padding-top:9px;min-height:56px}.progress{display:flex;gap:16px;align-items:center;color:#526674;font-size:14px;font-weight:600}#envelopes{display:flex;gap:7px}.envelope{display:flex;width:37px}.envelope svg{width:100%;fill:#fff;stroke:#7ea8c9;stroke-width:1.8}.envelope.filled svg{fill:#c7ddc7;stroke:#668c70}.primary{min-width:143px;background:#dceaf4;border-color:#aec8dc;color:#294c68}.completed #message{font:600 22px/1.3 Poppins,sans-serif;color:#446e50;min-height:29px}.completed .envelope{animation:celebrate .45s ease}footer{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:20px;color:#576875;flex-shrink:0}footer span:last-child{font-weight:600;white-space:nowrap}@keyframes shake{25%,75%{transform:translate(-5px)}50%{transform:translate(5px)}}@keyframes celebrate{50%{transform:translateY(-5px)}}@media(min-width:1700px){#app{max-width:1520px}.play-area{padding:22px 50px}.scene{gap:180px}.prompt-zone{width:260px}}@media(max-width:1100px){.setup{gap:16px}.intro h1{font-size:25px}.intro p{max-width:290px}.settings{gap:8px}#practice-set{width:162px}#prompt-mode{width:155px}.settings select{padding:0 10px;min-width:94px}}@media(max-width:850px){.setup{align-items:start;flex-direction:column;gap:10px}.intro p{max-width:none}.settings{width:100%}.settings label{flex:1}.settings select,#practice-set,#prompt-mode{width:100%}.scene{gap:30px}.play-area{padding:14px 20px}.mailbox{max-height:310px;max-width:52%}.prompt-zone{width:200px}.progress{gap:10px}.envelope{width:31px}#envelopes{gap:5px}}@media(max-height:680px){#app{gap:8px;padding-top:8px;padding-bottom:8px}.play-area{padding:8px 20px;gap:5px}.round-bar{min-height:53px;padding-top:6px}.prompt-zone{gap:4px}.intro h1{font-size:25px}.choice{height:76px;font-size:46px}.scene{gap:clamp(40px,8vw,130px)}#prompt-content{font-size:76px}.prompt-zone{height:94%;max-height:205px;width:185px}}@media(max-width:600px){#app{min-width:340px;min-height:730px}.brand{font-size:19px;gap:7px}.brand img{width:30px;height:30px}.header-actions{gap:6px}#sound{width:113px;padding:0 8px}#print{min-width:65px;padding:0 8px}#print svg{display:none}.settings{gap:6px}.settings label{font-size:12px}.settings select{font-size:14px;min-width:0}.scene{gap:5px}.prompt-zone{width:42%}.mailbox{max-width:57%;height:auto;width:57%}.play-area{padding:12px}.progress{flex-direction:column;gap:3px}.envelope{width:25px}.primary{min-width:115px}.choice{font-size:40px}footer{font-size:12px;gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}[hidden]{display:none!important}.choice{overflow:visible;border-radius:10px;background:#fff;border-color:#acc7db}.choice:after{display:none}.choice:before{content:"";position:absolute;left:10px;top:11px;width:25px;height:12px;opacity:.45;background:repeating-linear-gradient(to bottom,#a4bbc9 0,#a4bbc9 1px,transparent 1px,transparent 5px);pointer-events:none}.card-letter{transform:translate(-5px,3px)}.postage{position:absolute;right:8px;top:7px;width:26px;height:32px;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='44'%20viewBox='0%200%2036%2044'%3e%3cpath%20d='M3%202H33V42H3Z'%20fill='%23fff'%20stroke='%2394b0c5'%20stroke-width='2'%20stroke-dasharray='2%203'/%3e%3crect%20x='7'%20y='6'%20width='22'%20height='32'%20rx='2'%20fill='%23dceaf4'/%3e%3ccircle%20cx='21'%20cy='15'%20r='5'%20fill='%23ead66b'/%3e%3cpath%20d='M7%2029%2014%2021%2022%2029%2029%2024V38H7Z'%20fill='%237faf8c'/%3e%3cpath%20d='M7%2033%2015%2027%2025%2035%2029%2031V38H7Z'%20fill='%23bfd9b5'/%3e%3c/svg%3e") center/contain no-repeat;pointer-events:none}.choice.placeholder:before{display:none}.mini-stamp{fill:#dceaf4;stroke:#94b0c5}.envelope.filled .mini-stamp{fill:#ead66b;stroke:#668c70}.header-actions #print{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control);border:1px solid var(--border);border-radius:12px;padding:0 16px;font:600 16px Inter,sans-serif;text-decoration:none;color:inherit}.header-actions #print:focus-visible{outline:3px solid #385d86;outline-offset:4px}#letter-mode{min-width:115px}@media(max-width:1100px){#prompt-mode{width:168px}#practice-set{width:183px}.intro h1{font-size:24px}.settings{gap:8px}}@media(max-width:850px){#prompt-mode,#practice-set{width:100%}#letter-mode{min-width:0}}.mailbox>.mail-emblem{position:absolute;left:31%;top:55.5%;width:28%;height:18%;object-fit:contain;pointer-events:none}.play-area{position:relative}.finish{position:absolute;bottom:76px;left:50%;transform:translate(-50%);width:min(480px,calc(100% - 40px));text-align:center;background:#fefdfc;border:2px solid #bfd9b5;box-shadow:0 10px 30px #2f2f2f12;border-radius:23px;padding:16px;z-index:5}.finish h2{font:600 clamp(22px,2.5vw,26px)/1.3 Poppins,sans-serif;margin:0}.finish p{font-size:16px;line-height:1.4;margin:4px 0 12px}.finish-icon{font-size:26px;color:#dfa05a;line-height:1.1}.finish button{background:#deecdf;border:1px solid #7faf8c;border-radius:10px;padding:11px 22px;font-size:16px;font-weight:600;min-height:46px}.completed .finish{animation:finish-arrive .25s ease-out}.completed .answer-area{visibility:hidden}@keyframes finish-arrive{0%{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.completed .finish{animation:none}}.choice{touch-action:none;cursor:grab}.choice.dragging{z-index:30;cursor:grabbing;pointer-events:none}.choice.returning{z-index:29;animation:none;pointer-events:none}.choice.selected{outline:3px solid #527b9c;outline-offset:4px}#mailbox-drop{position:absolute;left:18%;top:6%;width:65%;height:74%;padding:0;min-height:0;border:2px solid transparent;border-radius:28% 28% 10% 10%;background:transparent;box-shadow:none;opacity:1}#mailbox-drop:disabled{opacity:1}#mailbox-drop.drop-ready,#mailbox-drop.selected-target{border-color:transparent;background:transparent;box-shadow:none}.mailbox:has(#mailbox-drop.drop-ready)>img:first-child,.mailbox:has(#mailbox-drop.selected-target)>img:first-child{filter:drop-shadow(0 0 5px #7ea8c9bb) drop-shadow(0 0 13px #7ea8c980)}#mailbox-drop:focus-visible{outline:3px solid #385d86;outline-offset:5px}.choice.flying-card{background:#eef5ef;border-color:#72a780}select{appearance:none!important;background-color:#f4f8fb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23516f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;border:1.5px solid #afc8da!important;border-radius:12px!important;padding-inline:15px 38px!important;color:#36566f!important;box-shadow:0 2px #dce7ef;font:600 16px Inter,sans-serif!important;cursor:pointer;transition:border-color .15s,background-color .15s}select:hover{border-color:#6e9bbd!important;background-color:#eaf2f8!important}select:focus-visible{outline:3px solid #385d86;outline-offset:3px}@supports (appearance:base-select){select,select::picker(select){appearance:base-select!important}select{background-image:none!important;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:14px!important}select::picker-icon{content:"";width:8px;height:8px;border-right:2px solid #516f86;border-bottom:2px solid #516f86;transform:rotate(45deg);margin:0 3px 4px 8px;flex-shrink:0;transition:transform .15s}select:open::picker-icon{transform:rotate(225deg);margin-bottom:-3px}select::picker(select){margin-top:7px;padding:6px;border:1px solid #bfd1df;border-radius:14px;background:#fefdfc;box-shadow:0 10px 25px #294e6926;min-width:anchor-size(width);max-height:320px;overflow:auto;color:#36566f;font:600 16px Inter,sans-serif}select option{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 13px;border-radius:8px;background:transparent;color:#36566f}select option:hover,select option:focus{background:#eef4f8;outline:none}select option:checked{background:#dceaf4;color:#294c68}select option::checkmark{color:#527b9c;order:2;margin-left:auto}}@media(prefers-reduced-motion:reduce){select,select::picker-icon{transition:none}}:root{--game-control-height:48px;--game-control-ink:#36566f;--game-control-border:#afc8da}.game-ui-button{box-sizing:border-box!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;height:var(--game-control-height)!important;min-height:var(--game-control-height)!important;padding:0 16px!important;border:1.5px solid var(--game-control-border)!important;border-radius:12px!important;background:#fefdfc!important;color:var(--game-control-ink)!important;font:600 16px Inter,sans-serif!important;line-height:1.2!important;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none!important}.game-ui-button:hover:not(:disabled){background:#eef4f8!important;border-color:#7ea8c9!important}.game-ui-button:focus-visible{outline:3px solid #385d86;outline-offset:3px}.game-ui-button:disabled{opacity:.5;cursor:default}#sound.game-ui-button{width:150px!important;min-width:150px!important;flex:0 0 150px!important}#print.game-ui-button{width:84px!important;min-width:84px!important;flex:0 0 84px!important;background:#eef5ef!important}#print.game-ui-button:hover{background:#deecdf!important}#sound .control-speaker{display:block;width:24px!important;height:24px!important;flex:0 0 24px;overflow:visible}.finish .game-ui-button,.game-ui-button.primary{background:#dceaf4!important}select{box-sizing:border-box;height:var(--game-control-height)!important;min-height:var(--game-control-height)!important;line-height:1.2!important}