@import "https://fonts.googleapis.com/css2?family=Crete+Round&family=Noto+Sans+TC:wght@400;600;700;900&display=swap";:root{--tile-font:"Crete Round", "Noto Sans TC", Georgia, serif;color:#f9f1d9;font-synthesis:none;--gold:#f4ca6c;--ink:#173e38;--paper:#fff9e9;background:#123c39;font-family:Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:var(--paper);color:var(--ink);border:1px solid #bfbd9b;border-radius:12px;min-height:44px;padding:10px 16px;font-weight:700}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #efad48}button:hover{filter:brightness(1.07)}[hidden]{display:none!important}.primary{background:var(--gold);color:var(--ink);border:0;border-radius:12px;padding:13px 22px;font-weight:900;text-decoration:none;display:inline-block}.muted,small{opacity:.74}.app-header{height:88px;padding:12px max(20px, env(safe-area-inset-left));align-items:center;gap:22px;max-width:1800px;margin:auto;display:flex}.menu-button{color:var(--paper);background:#ffffff0c;border:1px solid #ffffff30;padding:3px 13px;font-size:24px}.brand{color:var(--paper);align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{background:var(--gold);width:46px;height:46px;color:var(--ink);border:2px solid #fff3c9;border-radius:15px 15px 15px 5px;place-items:center;font:900 32px Georgia;display:grid;transform:rotate(-6deg)}.brand small{color:var(--gold);letter-spacing:2px;opacity:1;font-size:10px;display:block}.brand strong{font:700 31px Georgia}.tagline{opacity:.65;font-size:13px}.stats{gap:12px;margin-left:auto;font-size:12px;display:flex}.stats span{white-space:nowrap;border:1px solid #ffffff25;border-radius:30px;padding:10px 14px}.stats b{color:var(--gold);margin-left:6px;font-size:17px}#game-viewport{isolation:isolate;touch-action:none;background:#749662;border:2px solid #e8e5beaa;border-radius:22px;outline:none;height:calc(100dvh - 100px);min-height:300px;margin:0 12px 12px;position:relative;overflow:hidden}#world{transform-origin:0 0;will-change:transform;width:1440px;height:960px;position:absolute}#wrong-feedback{z-index:3;object-fit:contain;pointer-events:none;opacity:0;transform-origin:50%;width:42%;height:42%;position:absolute;top:-18%;right:-18%;transform:scale(.72)rotate(-10deg)}#wrong-feedback.visible{animation:1.4s ease-out both wrong-feedback-pop}@keyframes wrong-feedback-pop{0%{opacity:0;transform:scale(.72)rotate(-10deg)}18%{opacity:1;transform:scale(1.08)rotate(8deg)}40%{opacity:1;transform:scale(1)rotate(-5deg)}to{opacity:0;transform:scale(.9)rotate(0)}}.scene{background-position:50%;background-repeat:no-repeat;background-size:100% 100%;position:absolute;inset:0}#landmarks{pointer-events:none;z-index:2;position:absolute;inset:0}.landmark-label{color:#fff3c4;letter-spacing:1px;text-align:center;text-shadow:0 1px 2px #0008;opacity:0;visibility:hidden;background:#123c39e8;border:2px solid #fff3c4;border-radius:999px;max-width:230px;padding:7px 12px;font-size:14px;font-weight:700;transition:opacity .18s,visibility 0s linear .18s;position:absolute;transform:translate(-50%,calc(-100% - 8px))}.landmark-label.nearby{opacity:1;visibility:visible;transition-delay:0s}.answer-ground{pointer-events:none;width:100%;height:0;position:absolute;top:730px;left:0}.answer-ground:after{content:"把字母放到發光格子上";text-align:center;color:#455631;letter-spacing:4px;text-shadow:0 1px #fff6,0 0 6px #fff8;width:100%;font-size:14px;font-weight:700;position:absolute;top:0;left:0}.question-card{background:#113c37ed;border:1px solid #ffefc55c;border-radius:16px;align-items:center;gap:12px;max-width:calc(100% - 36px);padding:12px 18px;display:flex;position:absolute;top:18px;left:18px;box-shadow:0 5px 24px #092c2630}.question-card small{letter-spacing:1px;font-size:10px}.question-line{align-items:center;gap:8px;display:flex}.question-line strong{letter-spacing:2px;overflow-wrap:anywhere;font-size:26px}.question-card #question-meaning{color:#f6d78e;font-size:13px}.animal-icon{image-rendering:auto;background-repeat:no-repeat;flex-shrink:0;width:64px;height:64px}.audio-button{color:#163f38;background:#f4ca6c;border:0;border-radius:50%;width:44px;height:44px;padding:0;font-size:17px}.letter{color:#3d281a;width:38px;height:38px;font-family:var(--tile-font);pointer-events:none;appearance:none;z-index:12;background:linear-gradient(145deg,#fff7de,#edc78b);border:3px solid #8b6037;border-radius:8px;place-items:center;padding:0;font-size:21px;font-weight:400;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 3px #77532d,0 5px 8px #163b333d}.letter.ng{font-size:16px}.letter.nearby{outline-offset:4px;outline:3px solid #fff1b3}.letter.flying{z-index:16}.letter.hinted{outline:3px solid #fff1b3;box-shadow:0 0 0 7px #ffc95e90,0 0 32px 12px #ffe4a2}.answer-group{z-index:3;border-radius:8px;gap:0;display:flex;position:absolute;transform:translate(-50%,-50%)}.answer-cell{color:#674d2c;width:38px;height:42px;font-family:var(--tile-font);background:#eee7caba;border:2px solid #735a3c;border-radius:5px;place-items:center;font-size:20px;font-weight:400;display:grid}.answer-group.current.in-range{outline-offset:4px;outline:4px solid #ffdb70;box-shadow:0 0 20px 9px #ffdc7480}.answer-group.current .answer-cell{background:#fff8db;border-color:#ae711d}.answer-group.filled .answer-cell{color:#28593c;background:#e5efd4;border-color:#48744d}#character{pointer-events:none;z-index:15;width:88px;height:88px;position:absolute;transform:translate(-50%,-100%)}#character-sprite{backface-visibility:hidden;filter:drop-shadow(0 5px 2px #193f3530);background-position:0 0;background-repeat:no-repeat;position:absolute;inset:0;transform:translateZ(0)}.character-shadow{filter:blur(3px);background:#233c3944;border-radius:50%;width:50%;height:10%;position:absolute;bottom:0;left:25%}#carry{color:#3d281a;width:38px;height:38px;font-family:var(--tile-font);background:linear-gradient(145deg,#fff7de,#edc78b);border:3px solid #8b6037;border-radius:8px;place-items:center;font-size:20px;font-weight:400;display:grid;position:absolute;top:-10px;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px #77532d,0 5px 8px #163b333d}#carry.ng{font-size:16px}.visitor{z-index:9;filter:drop-shadow(0 4px 2px #173b3330);background-color:#0000;background-repeat:no-repeat;border:0;width:58px;height:58px;padding:0;position:absolute;transform:translate(-50%,-90%)}.controls{bottom:max(15px, env(safe-area-inset-bottom));left:max(18px, env(safe-area-inset-left));right:max(18px, env(safe-area-inset-right));pointer-events:none;justify-content:space-between;align-items:end;height:142px;display:flex;position:absolute}.joystick-wrap{pointer-events:auto;touch-action:none;background:#0d393738;border:1px solid #fff4cc3b;border-radius:50%;width:140px;height:140px;position:relative}#joystick{touch-action:none;position:absolute;inset:0}.joystick-wrap>span{text-align:center;color:#fff8dc;pointer-events:none;width:100%;font-size:10px;position:absolute;bottom:-1px;left:0}.keyboard-help{white-space:nowrap;pointer-events:none;background:#133b36b0;border-radius:8px;align-self:end;padding:5px 10px;font-size:10px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.action-controls{pointer-events:none;align-items:end;gap:8px;display:flex}.audio-settings{color:var(--ink);background:#fff8df30;border:1px solid #eadfbf88;border-radius:16px;gap:8px;margin:18px 0 0;padding:14px 16px 16px;display:grid}.audio-settings legend{color:var(--gold);padding:0 7px;font-size:14px;font-weight:700}.audio-toggle{min-height:34px;color:var(--ink);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;font-size:15px;font-weight:700;display:inline-flex}.audio-toggle input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.audio-toggle i{background:#d7dfcc;border:2px solid #53756d;border-radius:999px;flex:none;width:48px;height:28px;transition:background .16s,border-color .16s;display:inline-block;position:relative;box-shadow:inset 0 2px 4px #244c4630}.audio-toggle i:after{content:"";background:#53756d;border:2px solid #fff8df;border-radius:50%;width:18px;height:18px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #244c4650}.audio-toggle input:checked+i{border-color:var(--gold);background:#f2c96b}.audio-toggle input:checked+i:after{background:#0d3937;transform:translate(18px)}.audio-toggle input:focus-visible+i{outline-offset:3px;outline:3px solid #ffe39a}.held-letter-audio{color:#fff4ce;pointer-events:auto;touch-action:manipulation;background:#143c39e8;border:2px solid #fff1c5;border-radius:50%;align-self:center;width:48px;height:48px;padding:0;font-size:21px;line-height:1;box-shadow:0 3px #092d36,0 5px 12px #092d3650}.held-letter-audio:focus-visible{outline-offset:3px;outline:3px solid #ffe39a}.held-letter-audio:hover:not(:disabled){filter:brightness(1.18)}.held-letter-audio:active:not(:disabled){transform:translateY(2px)}.held-letter-audio:disabled{cursor:not-allowed;opacity:.55}#action-button{pointer-events:auto;touch-action:none;background:#f2c96b;border:3px solid #fff1c5;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:94px;height:94px;display:flex;box-shadow:0 5px #8d6e33,0 8px 25px #092d3650}#action-icon{font-size:27px;line-height:1}#action-button small{letter-spacing:2px;font-size:8px}#toast{color:#fff1c5;text-align:center;pointer-events:none;z-index:30;background:#153d36ef;border:1px solid #ffde8e70;border-radius:12px;max-width:min(520px,90%);padding:10px 18px;font-size:13px;position:absolute;top:136px;left:50%;transform:translate(-50%)}#hint-arrow{z-index:25;color:#48371d;pointer-events:none;white-space:nowrap;background:#fff1b6;border-radius:20px;padding:7px 12px;font-size:12px;font-weight:900;position:absolute;transform:translate(-50%,-50%)}.welcome{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;z-index:40;background:#123c397d;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.welcome h1{text-shadow:0 3px 15px #123c3940;margin:16px 0;font-size:clamp(30px,4vw,58px);font-weight:900;line-height:1.35}.welcome p{max-width:450px;font-size:14px}.eyebrow{letter-spacing:4px;color:#ffdc8d;font-size:11px}.welcome .primary{min-width:180px;margin-top:16px}dialog{background:var(--paper);color:var(--ink);border:1px solid #d0b879;border-radius:22px;width:min(460px,100vw - 24px);max-height:calc(100dvh - 32px);padding:26px;box-shadow:0 25px 100px #061d1c80}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#052d2bb8}.wide-dialog{width:min(960px,100vw - 24px)}.dialog-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.dialog-heading h2{margin:0;font-size:23px}.dialog-heading button{background:#e7e3cb;border:0;width:44px;padding:0;font-size:24px}.menu-dialog nav{gap:10px;display:grid}.menu-dialog nav button{text-align:left;background:#e9ecd9;border:0;padding:15px}.menu-dialog .muted{margin-top:24px;font-size:12px;line-height:1.9}.character-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.character-card{background:#e9eedb;border:2px solid #c9d7b9;border-radius:18px;align-content:start;gap:10px;padding:16px;display:grid}.character-card.selected{border-color:#ae711d;box-shadow:0 0 0 4px #ffdc7480}.character-card>.character-choice{background:#dbe5c8;border:0;border-radius:14px;place-items:center;width:100%;min-height:150px;padding:8px;display:grid}.character-preview{filter:drop-shadow(0 5px 2px #193f3530);background-position:0 0;background-repeat:no-repeat;width:132px;height:132px;display:block}.character-card h3{color:var(--ink);margin:0;font-size:20px}.character-card small{color:var(--ink)}.character-name-form{grid-template-columns:1fr auto;align-items:end;gap:8px;display:grid}.character-name-form label{color:var(--ink);gap:4px;font-size:12px;font-weight:700;display:grid}.character-name-form input{width:100%;min-height:44px;color:var(--ink);background:#fffdf2;border:1px solid #bfbd9b;border-radius:10px;padding:8px 10px}.character-name-form button{padding-inline:12px}.character-card .character-choice[aria-pressed=true]{background:#f4ca6c}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;display:grid}.collection-card{background:#e9eedb;border:1px solid #c9d7b9;border-radius:15px;flex-direction:column;align-items:center;gap:6px;padding:16px;display:flex}.collection-card .animal-icon{width:90px;height:90px}.collection-card strong{overflow-wrap:anywhere;max-width:100%;font-size:22px}.collection-card small{font-size:10px}.collection-visibility{color:#315c4c;cursor:pointer;align-items:center;gap:6px;margin-top:4px;font-size:12px;display:inline-flex}.collection-visibility input{accent-color:#3c8a63;width:18px;height:18px}.help-steps{padding-left:24px}.help-steps li{padding:8px}.help-steps p{font-size:14px;line-height:1.8}.toolbar{flex-wrap:wrap;gap:8px;margin:15px 0;display:flex}.toolbar input{flex:1;min-width:170px}input,select{min-height:44px;color:var(--ink);background:#fffef7;border:1px solid #bac4a8;border-radius:8px;max-width:100%;padding:10px}.file-button{cursor:pointer;border:1px solid #bfbd9b;border-radius:12px;align-items:center;padding:10px;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.file-button input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.vocab-row{border-bottom:1px solid #d9dcc6;align-items:center;gap:12px;padding:12px 0;display:flex}.vocab-row .word-copy{overflow-wrap:anywhere;flex:1;min-width:0}.word-copy strong{font-size:19px}.word-copy small{display:block}.status-pill{white-space:nowrap;background:#e3e7d3;border-radius:20px;padding:5px 8px;font-size:11px}.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}label{flex-direction:column;gap:5px;font-size:13px;display:flex}label.full{grid-column:1/-1}.checkbox{flex-direction:row;align-items:center}.checkbox input{width:20px}.preview-box,fieldset{border:1px solid #c5ccb2;border-radius:12px;margin:18px 0;padding:15px}.preview-box small{font-size:11px}.preview-box #spelling-preview{align-items:center;margin:8px 0;padding:12px 4px;display:flex;overflow:auto}.preview-group{border:2px solid #c99638;border-radius:5px;flex-shrink:0;display:flex}.preview-group span{background:#fff2c9;border-right:1px solid #d6bd84;place-items:center;width:28px;height:34px;font-size:17px;display:grid}.preview-gap{flex-shrink:0;width:18px}#editor-error,#import-error,#load-error{color:#a0372a;white-space:pre-wrap}#load-error{color:#ffe2a4}#recording-preview{align-items:center;gap:8px;margin:12px 0;display:flex}.storage-warning{color:#713920;z-index:100;background:#fff0c3;margin:0;padding:8px;font-size:12px;position:fixed;bottom:0;left:0;right:0}#import-diff{white-space:pre-wrap;max-height:45vh;font-size:13px;overflow:auto}.empty{text-align:center;color:#66745b;padding:35px}#animal-detail{justify-items:center;gap:12px;display:grid}#animal-detail .animal-icon{width:150px;height:150px}@media (width<=700px){.app-header{gap:12px;height:72px;padding:8px 12px}.brand-mark{width:34px;height:36px;font-size:24px}.brand strong{font-size:25px}.brand small{letter-spacing:0;font-size:8px}.brand{gap:8px}.tagline,.score-stat{display:none}.stats{gap:6px;font-size:10px}.stats span{padding:7px}.stats b{margin-left:3px;font-size:15px}#game-viewport{border-radius:16px;height:calc(100dvh - 80px);margin:0 6px 8px}.question-card{gap:8px;max-width:calc(100% - 20px);padding:10px;top:10px;left:10px}.question-line strong{letter-spacing:1px;font-size:21px}.question-card .animal-icon{width:48px;height:48px}.question-card small{font-size:9px}.keyboard-help{display:none}.controls{left:12px;right:14px;bottom:max(18px, env(safe-area-inset-bottom))}.joystick-wrap{width:128px;height:128px}#action-button{width:84px;height:84px}.held-letter-audio{width:44px;height:44px;font-size:19px}#toast{padding:8px 12px;font-size:12px;top:126px}dialog{padding:18px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto!important}.vocab-row{gap:8px}.vocab-row .animal-icon{display:none}.vocab-row button{padding:8px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-card{padding:12px}.collection-card strong{font-size:18px}}@media (height<=540px) and (orientation:landscape){.app-header{height:52px}.brand-mark{width:32px;height:32px;font-size:23px}.brand strong{font-size:23px}.brand small,.tagline{display:none}#game-viewport{height:calc(100dvh - 60px);min-height:240px}.question-card{padding:6px 12px;top:8px}.question-card small{display:none}.question-card .animal-icon{width:38px;height:38px}.question-line strong{font-size:19px}.question-card #question-meaning{font-size:11px}.controls{height:110px;bottom:10px}.joystick-wrap{width:110px;height:110px}#action-button{width:76px;height:76px}.held-letter-audio{width:42px;height:42px;font-size:18px}.keyboard-help{display:none}#toast{top:80px}.welcome h1{margin:5px;font-size:28px}.welcome p{margin:6px}.welcome .primary{margin:8px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.app-header{max-width:1660px}#game-viewport{width:calc(100% - 24px);max-width:1660px;margin-left:auto;margin-right:auto}@media (width<=700px){#game-viewport{width:calc(100% - 12px)}}html,body{margin:0;overflow:hidden}#app{width:100%;max-width:none;padding:0}#game-viewport{width:100%;max-width:none;height:100dvh;min-height:0;box-shadow:none;-webkit-user-select:none;user-select:none;border:0;border-radius:0;outline:none;margin:0}#game-viewport img{-webkit-user-drag:none}.game-hud{z-index:35;pointer-events:none;position:absolute;inset:0}.menu-button,.hud-score{top:calc(env(safe-area-inset-top) + 12px);color:#fff6d7;box-shadow:none;text-shadow:0 2px 4px #102d24,0 0 3px #102d24;background:0 0;border:0;position:absolute}.menu-button{left:calc(env(safe-area-inset-left) + 12px);pointer-events:auto;width:44px;height:44px;padding:0;font-size:28px}.hud-score{right:calc(env(safe-area-inset-right) + 16px);padding-top:10px;font-size:15px}.question-card{top:calc(env(safe-area-inset-top) + 12px);left:calc(env(safe-area-inset-left) + 64px);max-width:min(340px, calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 165px));pointer-events:auto;z-index:34;background:#123c3980;border:1px solid #fff3;border-radius:12px;gap:7px;padding:7px 10px}.question-card small{display:none}.question-card .animal-icon,.question-card .unknown-animal{flex-shrink:0;width:34px;height:34px}.question-line strong{overflow-wrap:anywhere;font-size:19px}.question-card #question-meaning{font-size:12px}.question-card button{min-width:44px;min-height:44px}.question-card.concealed{visibility:hidden}.unknown-animal{color:#ffe3a0;border:2px dashed #ffe3a080;border-radius:50%;place-items:center;width:80px;height:80px;margin:auto;font-size:40px;display:grid}.question-card .unknown-animal{font-size:23px}.controls{left:calc(env(safe-area-inset-left) + 12px);right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:32;height:120px}.joystick-wrap{background:0 0;border:1px solid #fff5;width:120px;height:120px}#joystick .back{opacity:.12!important;background:#fff!important}#joystick .front{box-shadow:0 1px 5px #123c39;opacity:.35!important;background:#fff5d2!important}#joystick.is-active .front{opacity:.9!important}#action-button{color:#fff4ce;text-shadow:0 1px 3px #123c39;background:#143c3940;border:1px solid #fff8;width:82px;height:82px;box-shadow:0 2px 8px #123c3950}#action-button:active{background:#fff2;border-color:#fff3b0;box-shadow:0 0 12px #fff3b080}@media (hover:hover){#action-button:hover,.menu-button:hover{filter:brightness(1.2)}}.keyboard-help{text-shadow:0 1px 3px #123c39;background:0 0}#toast{top:var(--toast-top,calc(env(safe-area-inset-top) + 100px));background:#153d36d9;max-width:min(430px,85%);padding:7px 13px;font-size:13px}.welcome{z-index:60;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 24px);background:#123c39ce;position:absolute;inset:0}.welcome .welcome-logo{color:#ffe3a0;justify-content:center;align-items:center;gap:.28em;margin:8px;font-family:Georgia,serif;font-size:clamp(52px,12vh,100px);line-height:1;display:inline-flex}.welcome-mark{pointer-events:none;flex-shrink:0;width:auto;height:1.35em;display:block}.welcome-mark-end{transform:scaleX(-1)}.welcome .secondary{color:#fff0c8;background:0 0;border:1px solid #fff6;margin:6px}#word-transition{z-index:40;background:#0a282528;place-items:center;display:grid;position:absolute;inset:0}#word-transition[hidden]{display:none}#transition-card{width:min(330px,75vw);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);box-sizing:border-box;text-align:center;color:#fff2cf;transform-origin:50%;background:#143c39f2;border:1px solid #ffe4a078;border-radius:20px;padding:20px;overflow:auto;box-shadow:0 16px 50px #001b2860}#transition-card h2{overflow-wrap:anywhere;margin:10px 0 4px;font-size:clamp(22px,4vw,32px)}#transition-card p{margin:6px 0 12px}#transition-card .animal-icon{width:80px;height:80px;margin:auto}#transition-card button{min-width:44px;min-height:44px}#next-question{margin-top:10px}.collection-tabs{gap:8px;margin-bottom:16px;display:flex}.collection-tabs [aria-pressed=true]{color:#123c39;background:#f2c96b}dialog{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px)}@media (height<=540px) and (orientation:landscape){.question-card{gap:5px;max-width:min(270px,42vw);padding:4px 7px}.question-card .animal-icon,.question-card .unknown-animal{width:28px;height:28px}.question-line strong{font-size:16px}.question-card #question-meaning{font-size:12px}.controls{height:104px}.joystick-wrap{width:104px;height:104px}#action-button{width:74px;height:74px}.held-letter-audio{width:40px;height:40px;font-size:17px}#transition-card{padding:12px 20px}#transition-card .animal-icon,#transition-card .unknown-animal{width:56px;height:56px}#transition-card h2{margin-top:6px;font-size:24px}#transition-card p{margin:3px 0 7px}}#game-viewport{overflow:clip}#joystick .joystick{opacity:1!important}#game-viewport{touch-action:pinch-zoom}.game-hud{z-index:45}#toast{z-index:50}#character,.letter,.visitor{top:0;left:0}.graphics-settings{border:1px solid #b7c1ae;border-radius:12px;min-width:0;margin:12px 0}.menu-dialog .graphics-settings p{margin:6px 0 10px;font-size:12px}.graphics-option{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.graphics-option input{width:22px;height:22px;min-height:22px;padding:0}.graphics-option select{max-width:65%;min-height:44px}.simplified-effects #character-sprite,.simplified-effects .visitor,.simplified-effects .character-shadow,.simplified-effects .character-preview{filter:none}.simplified-effects .welcome,.simplified-effects dialog::backdrop,.simplified-effects .menu-dialog::backdrop{-webkit-backdrop-filter:none}.simplified-effects .letter.hinted,.simplified-effects .answer-group.current,.simplified-effects .answer-group.hinted,.simplified-effects .answer-group.in-range{box-shadow:none;outline-offset:3px;outline:3px solid #ffdb70}.welcome{max-height:100%;overflow-y:auto}#prepare-game{text-align:left;width:min(100%,520px);margin:12px auto}#prepare-game p,.learning-settings p{font-size:13px}.prepare-characters{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.prepare-character{min-width:0;padding:8px}.prepare-character img{object-fit:contain;width:64px;height:64px;margin:auto;display:block}.prepare-character[aria-pressed=true]{outline:3px solid #e2bb50}.learning-settings{border:1px solid #b7c1ae;border-radius:12px;margin:12px 0}.question-card #question-word{color:#fff4cc;text-shadow:0 2px 8px #092c26;align-items:baseline;gap:1px;font-weight:900;display:inline-flex}.question-card #question-word .word-pending{color:#fff4c4;text-underline-offset:4px;-webkit-text-decoration:underline dotted #f6cf72;text-decoration:underline dotted #f6cf72}.question-card #question-word .word-completed{color:#b9ef9a;text-underline-offset:4px;font-weight:950;-webkit-text-decoration:underline #74c87b;text-decoration:underline #74c87b;text-decoration-thickness:3px}.question-card:has(#question-word[hidden]) #question-meaning{color:#fff4cc;text-shadow:0 2px 7px #092c26;font-size:clamp(13px,2.2vw,17px);font-weight:850}.held-letter-audio{border-radius:14px;width:auto;min-width:64px;height:48px;min-height:48px;padding:4px 8px;font-size:15px}.action-controls{position:relative}.held-audio-status{color:#fff;text-align:center;pointer-events:none;background:#143c39;border-radius:6px;width:165px;padding:4px;font-size:11px;position:absolute;bottom:100%;right:0}.audio-settings input[type=range]{width:100%;min-height:44px;padding:0}.audio-settings label:has(output){flex-direction:row;justify-content:space-between}#transition-card{max-height:calc(100dvh - 32px);overflow-y:auto}#follow-along{margin:12px 0;font-size:14px}.recording-visualizer{aspect-ratio:1;place-items:center;width:min(58vw,240px);margin:10px auto 14px;display:grid;position:relative}#recording-waveform{border-radius:50%;width:100%;height:100%;display:block}.recording-meter{pointer-events:none;color:#fff4ce;place-items:center;font-size:12px;font-weight:800;display:grid;position:absolute;inset:0;transform:translateY(48px)}.recording-visualizer[data-state=recording] #recording-waveform{animation:1.2s ease-in-out infinite recording-pulse}.recording-visualizer[data-state=error] #recording-waveform{opacity:.65}.recording-volume{color:#376356;text-align:center;min-height:1.4em;margin:4px 0;font-size:12px}.pronunciation-result{color:#145532;text-align:center;min-height:1.4em;margin:6px 0;font-size:13px;font-weight:800}@keyframes recording-pulse{50%{transform:scale(1.035)}}@media (prefers-reduced-motion:reduce){.recording-visualizer[data-state=recording] #recording-waveform{animation:none}}.recording-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.recording-actions button,#next-question{min-height:48px}#recording-status{min-height:2.6em}.welcome{box-sizing:border-box;justify-content:flex-start;overflow-x:hidden}.welcome:not(:has(#prepare-game:not([hidden]))){justify-content:center}.welcome>*{flex-shrink:0}.welcome .welcome-logo{max-width:100%;font-size:clamp(30px,9vw,76px)}#welcome-character-name{overflow-wrap:anywhere;min-width:0}.audio-button,.question-card .audio-button,#transition-card .audio-button,#teaching-preview,#play-recording,.held-letter-audio{letter-spacing:.02em;white-space:nowrap;color:#21473b;background:#fff3d7;border:1px solid #eed39b;border-radius:14px;justify-content:center;align-items:center;gap:6px;width:auto;min-width:80px;height:auto;min-height:48px;padding:10px 12px;font-family:inherit;font-size:15px;font-weight:700;line-height:1.25;display:inline-flex;box-shadow:0 2px #15382e45}.audio-button:before,#teaching-preview:before,#play-recording:before,.held-letter-audio:before{content:"♪";font-size:19px;line-height:1}.audio-playing:before{content:none}.audio-playing{outline-offset:2px;outline:2px solid #2f7960}.held-letter-audio:disabled{opacity:1;color:#48584c;box-shadow:none;background:#d9dfcc;border-color:#a7b7a4}.held-audio-status{width:174px;padding:5px 7px;font-size:12px;line-height:1.4}.question-line{flex-wrap:wrap;gap:6px}@media (width<=380px){.held-letter-audio{min-width:76px;padding:10px 8px}.action-controls{gap:6px}}.audio-settings .audio-toggle{flex-direction:row;min-height:44px;margin-top:8px}.audio-settings legend{color:#294e3f}.audio-settings p{margin:4px 0;font-size:12px;line-height:1.5}.menu-dialog{width:min(720px,100vw - 24px);padding:clamp(16px,3vw,26px)}.menu-dialog .dialog-heading{margin-bottom:14px}.menu-dialog nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.menu-dialog nav button{border-radius:13px;min-height:50px;padding:11px 13px;font-size:15px}.menu-dialog fieldset{border-radius:16px;margin-top:12px;padding:12px 14px}.menu-dialog .learning-settings,.menu-dialog .graphics-settings{grid-template-columns:minmax(0,1fr) minmax(130px,.8fr);align-items:center;column-gap:12px;display:grid}.menu-dialog fieldset legend{grid-column:1/-1}.menu-dialog fieldset p{grid-column:1/-1;margin:5px 0 0}.menu-dialog .audio-settings{grid-template-columns:minmax(0,1fr) minmax(130px,.8fr);align-items:center;column-gap:12px;display:grid}.menu-dialog .audio-settings>input[type=range]{grid-column:1/-1}.menu-dialog .audio-settings>button{grid-column:1/-1;min-height:44px}.menu-dialog .audio-settings .audio-toggle{grid-column:1/-1}.menu-dialog>p{margin:12px 0 0}#transition-card{width:min(620px,100vw - 24px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);padding:clamp(14px,3vw,22px);overflow:hidden}#transition-card #follow-along{grid-template-columns:138px minmax(0,1fr);align-items:center;column-gap:16px;margin:10px 0 4px;display:grid}#transition-card #recording-status,#transition-card #follow-along>small{grid-column:1/-1}#transition-card .recording-visualizer{grid-area:2/1/span 3;width:min(30vw,138px);margin:4px auto}#transition-card .recording-actions{grid-area:2/2;justify-content:flex-start}#transition-card .recording-volume,#transition-card .pronunciation-result{text-align:left;grid-column:2}#transition-card .recording-actions button{min-width:48px}#transition-card #record-voice{color:#0000;background:#194a42;border:5px solid #f0c46b;border-radius:50%;justify-content:center;align-items:center;width:72px;min-width:72px;height:72px;min-height:72px;padding:0;transition:transform .18s,background .18s,box-shadow .18s;display:inline-flex;position:relative;box-shadow:0 4px #0c2c28,0 0 0 5px #194a4233}#transition-card #record-voice:before{content:"●";color:#ff4d4d;font-size:30px;line-height:1}#transition-card #record-voice[data-state=recording]{background:#bb5045;animation:1.1s ease-in-out infinite recording-button-pulse;box-shadow:0 4px #6e2c28,0 0 0 8px #d65c4a44}#transition-card #record-voice[data-state=recording]:before{content:"■";color:#fff;font-size:24px}#transition-card #record-voice[data-state=success]{background:#2d875d;border-color:#bde58b;transform:scale(1.04);box-shadow:0 4px #1a5439,0 0 0 8px #8fd16a66}#transition-card #record-voice[data-state=success]:before{content:"✓";color:#fff;font-size:30px}#transition-card #record-voice:disabled{opacity:1}#transition-card #transition-audio button{border-radius:50%;width:52px;min-width:52px;padding:0;font-size:0}#transition-card #transition-audio button:before{content:"▶";font-size:18px}#transition-card #transition-audio button.audio-playing:before{font-size:18px;content:"■"!important;color:#ff4d4d!important;display:inline-flex!important}#transition-card #play-recording{border-radius:50%;width:52px;min-width:52px;padding:0;font-size:0}#transition-card #play-recording:before{content:"▶";font-size:18px}#transition-card #play-recording.audio-playing:before{font-size:18px;content:"■"!important;color:#ff4d4d!important;display:inline-flex!important}#transition-card #record-voice,#transition-card #play-recording,#transition-card #transition-audio button{transition:transform .18s cubic-bezier(.175,.885,.32,1.275),background .18s,box-shadow .18s}#transition-card #record-voice:hover,#transition-card #play-recording:hover,#transition-card #transition-audio button:hover{filter:brightness(1.1);transform:scale(1.06)}#transition-card #record-voice:active,#transition-card #play-recording:active,#transition-card #transition-audio button:active{filter:brightness(.95);transform:scale(.94)}#transition-card .pronunciation-result{color:#ffd66f;font-size:14px}#transition-card .pronunciation-result.is-success{color:#b9f28f;text-shadow:0 1px #0c2c28;font-size:16px;font-weight:900}@keyframes recording-button-pulse{50%{transform:scale(1.06)}}@media (width<=520px){.menu-dialog .learning-settings,.menu-dialog .graphics-settings,.menu-dialog .audio-settings{grid-template-columns:minmax(0,1fr) minmax(112px,.75fr)}#transition-card #follow-along{grid-template-columns:112px minmax(0,1fr);column-gap:10px}#transition-card .recording-visualizer{width:min(29vw,112px)}#transition-card #record-voice{width:64px;min-width:64px;height:64px;min-height:64px}}@media (width<=360px){.menu-dialog nav button{padding-inline:9px;font-size:14px}#transition-card #follow-along{grid-template-columns:1fr}#transition-card .recording-visualizer,#transition-card .recording-actions,#transition-card .recording-volume,#transition-card .pronunciation-result{text-align:center;grid-area:auto/1;justify-content:center}#transition-card .recording-visualizer{width:108px}}@media (orientation:landscape) and (height<=620px){.welcome{padding:max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));justify-content:center;gap:2px}.welcome .eyebrow{letter-spacing:2px;font-size:9px}.welcome .welcome-logo{margin:2px 0;font-size:clamp(38px,10vh,62px)}.welcome p{margin:3px 0;font-size:12px}.welcome>small{font-size:10px}.welcome .primary{min-height:42px;margin:6px 0 0;padding:9px 20px}.welcome .secondary{min-height:36px;margin:2px 4px;padding:7px 16px}#prepare-game{width:min(760px,94vw);margin:4px auto}#prepare-game h2{margin:2px 0 4px;font-size:18px}.prepare-characters{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.prepare-character{padding:4px;font-size:11px}.prepare-character img{width:40px;height:40px}#prepare-game label{align-items:center;gap:6px;width:49%;margin-top:4px;font-size:12px;display:inline-flex}#prepare-game label input,#prepare-game label select{min-height:34px;padding:5px 8px}#prepare-game p{margin:3px 0;font-size:10px}.menu-dialog{max-height:calc(100dvh - 12px);overflow-y:auto}.menu-dialog .dialog-heading{margin-bottom:7px}.menu-dialog nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.menu-dialog nav button{min-height:42px;padding:8px 9px;font-size:13px}.menu-dialog fieldset{margin-top:7px;padding:7px 10px}.menu-dialog fieldset p,.menu-dialog>p{display:none}.menu-dialog .audio-settings{gap:4px}.menu-dialog .audio-settings>button{min-height:36px}.menu-dialog .audio-settings input[type=range]{min-height:30px}.menu-dialog .audio-settings label{font-size:13px}.menu-dialog .audio-settings .audio-toggle{min-height:30px}.question-card{gap:6px;max-width:min(270px,100vw - 150px);padding:6px 9px}.question-card .animal-icon,.question-card .unknown-animal{width:28px;height:28px}.question-card #question-word{letter-spacing:1px;font-size:clamp(16px,3vw,23px)}.question-card #question-meaning{font-size:11px}#transition-card{max-height:calc(100dvh - 12px);padding:10px 16px}#transition-card #transition-title{margin:2px 0 5px}#transition-card h2{margin:4px 0 2px;font-size:clamp(20px,5vh,28px)}#transition-card .animal-icon,#transition-card .unknown-animal{width:52px;height:52px}#transition-card #follow-along{margin:4px 0 2px}#transition-card #recording-status{min-height:1.2em;margin:2px 0;font-size:11px}#transition-card .recording-visualizer{width:min(22vh,108px)}#transition-card #record-voice{width:58px;min-width:58px;height:58px;min-height:58px}#transition-card #next-question{min-height:40px;margin-top:4px}}@media (width>=700px) and (height<=700px){.question-card{max-width:min(330px,30vw)}.question-card #question-word{font-size:20px}}