:root{--ink:#2b2230;--paper:#f7ecd4;--paper-2:#efdfbd;--wood:#6e4a2e;--wood-2:#9a6a43;--red:#d8434b;--red-2:#9c2a36;--gold:#f5c542;--gold-2:#c98f1c;--green:#5f9a3a;--blue:#2c3f6b;--sky:#a8dcf5;--font:"Pixelify Sans", ui-rounded, "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);font-variant-ligatures:none;font-feature-settings:"liga" 0, "clig" 0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#1c2440;margin:0;font-size:18px;overflow:hidden}#app{position:fixed;inset:0}#game{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;position:absolute;top:0;left:0}img{image-rendering:pixelated}[hidden]{display:none!important}.panel{background:var(--paper);border:3px solid var(--ink);box-shadow:inset 0 0 0 3px var(--paper-2), inset 0 -4px 0 3px #e2cda2, 0 4px 0 #00000059;border-radius:6px}.btn{font-family:var(--font);color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;background:#fff7e6;border-radius:6px;padding:8px 16px;font-size:18px;font-weight:600;transition:transform 60ms}.btn:hover{background:#fffbf2}.btn:active,.btn.pressed{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.btn.primary{background:var(--gold)}.btn.primary:hover{background:#ffd460}.btn.danger{background:#f4c1c1}.btn.icon{padding:4px 8px;font-size:20px;line-height:1.2}.btn.big{padding:10px 20px;font-size:22px}.btn.small{box-shadow:0 2px 0 var(--ink);padding:4px 10px;font-size:15px}.btn:disabled{cursor:default}button,input{font-variant-ligatures:none;font-feature-settings:"liga" 0, "clig" 0}kbd{font-family:var(--font);border:2px solid var(--ink);vertical-align:2px;background:#fff9;border-radius:3px;margin-left:4px;padding:0 4px;font-size:12px}@media (hover:none){kbd{display:none}}.word{border:2px solid var(--gold-2);color:#5a3c05;cursor:pointer;background:#ffe38a;border-bottom-width:3px;border-radius:5px;margin:0 1px;padding:0 5px;font-weight:700;line-height:1.25;display:inline-block}.word:hover{background:#fff0b0}.word:active{transform:translateY(1px)}#wordtip{z-index:60;background:var(--ink);color:#fff7e6;text-align:center;pointer-events:none;opacity:0;white-space:nowrap;border-radius:6px;padding:6px 10px;font-size:16px;transition:opacity .15s,transform .15s;position:fixed;transform:translate(-50%,-100%)scale(.8)}#wordtip.show{opacity:1;transform:translate(-50%,-100%)scale(1)}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}#quest{left:max(10px, env(safe-area-inset-left));top:max(10px, env(safe-area-inset-top));min-width:170px;max-width:calc(100vw - 176px);padding:8px 12px 10px;font-size:16px;position:absolute}.q-title{color:var(--red-2);margin-bottom:4px;font-size:16px;font-weight:700}.q-goal{margin-top:4px;font-size:14px}.checklist{margin:0;padding:0;list-style:none}.checklist li{align-items:center;gap:6px;padding:2px 0;display:flex}.checklist li img{width:24px;height:24px}.checklist li.got{opacity:.55}.checklist li.got .word{text-decoration:line-through}.checklist .tick{color:var(--green);min-width:16px;margin-left:auto;font-weight:700}.q-row{align-items:center;gap:6px;padding:2px 0;display:flex}.q-row img{width:24px;height:24px}.fish-row{gap:2px;display:flex}.fish-row img{filter:grayscale()opacity(.35);width:28px;height:28px;transition:filter .3s}.fish-row img.on{filter:none;animation:.4s pop}#hud-right{right:max(10px, env(safe-area-inset-right));top:max(10px, env(safe-area-inset-top));flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute}#hud-buttons{gap:8px;display:flex}#clock{text-align:right;min-width:118px;padding:5px 10px 7px;font-size:14px}#clock .c-day{color:var(--red-2);font-weight:700}#clock .c-time{font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:center;gap:6px;font-size:19px;font-weight:700;display:flex}#clock .c-time.late{color:#4a4fa8}#energy{right:max(10px, env(safe-area-inset-right));bottom:max(8px, env(safe-area-inset-bottom));border:3px solid var(--ink);z-index:10;background:#f7ecd4eb;border-radius:6px;flex-direction:column;align-items:center;gap:2px;width:26px;padding:4px 4px 3px;display:flex;position:absolute;box-shadow:0 3px #0000004d}#energy .bar{border:2px solid var(--ink);background:#5b4a3a;border-radius:3px;width:12px;height:104px;position:relative;overflow:hidden}#energy .bar i{background:linear-gradient(90deg,#9be36b,#4fae3b);transition:height .4s;position:absolute;bottom:0;left:0;right:0}#energy.low .bar i{background:linear-gradient(90deg,#ffb36b,#e0533b)}#energy.low{animation:1.6s ease-in-out infinite pulse}#energy .e{font-size:13px;line-height:1}@keyframes pulse{50%{transform:scale(1.06)}}@media (width<=640px){#energy{bottom:calc(max(8px, env(safe-area-inset-bottom)) + 46px)}#energy .bar{height:80px}}#daycard{z-index:70;color:#fff3d6;text-align:center;opacity:0;background:#0d1424;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:20px;transition:opacity .6s;display:flex;position:absolute;inset:0}#daycard.show{opacity:1}#daycard .d-big{color:#ffe38a;font-size:34px;font-weight:700}#daycard .d-small{color:#d9cfe9;max-width:420px;font-size:17px}#hotbar{left:50%;bottom:max(8px, env(safe-area-inset-bottom));border:3px solid var(--ink);z-index:10;background:#f7ecd4eb;border-radius:6px;gap:3px;padding:5px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 3px #0000004d}#hotbar .slot{cursor:pointer;background:#efdfbd;border:2px solid #c9b489;border-radius:4px;width:34px;height:34px;padding:0;position:relative}#hotbar .slot.sel{border-color:var(--red);background:#fff3d6}#hotbar .slot img{width:28px;height:28px;margin:auto;display:block}#hotbar .slot .n{font-family:var(--font);color:#fff7e6;text-shadow:1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink);font-size:12px;font-weight:700;position:absolute;bottom:-1px;right:1px}#hotbar-label{z-index:60;background:var(--ink);color:#fff7e6;white-space:nowrap;pointer-events:none;border-radius:6px;padding:5px 10px;font-size:15px;position:fixed;transform:translate(-50%,-100%)}#hotbar-label b{color:#ffe38a}@media (width<=520px){#hotbar{gap:2px;padding:3px}#hotbar .slot{width:26px;height:26px}#hotbar .slot img{width:22px;height:22px}}#action-btn{right:calc(max(10px, env(safe-area-inset-right)) + 44px);bottom:calc(max(8px, env(safe-area-inset-bottom)) + 58px);padding:10px 22px;font-size:22px;animation:.25s pop;position:absolute}#fish-exit{left:50%;bottom:calc(max(8px, env(safe-area-inset-bottom)) + 58px);font-size:15px;position:absolute;transform:translate(-50%)}#dialog{left:50%;bottom:max(12px, env(safe-area-inset-bottom));cursor:pointer;z-index:20;gap:12px;width:min(720px,100vw - 20px);min-height:118px;padding:12px 14px;animation:.2s slideUp;display:flex;position:absolute;transform:translate(-50%)}#dialog .portrait{border:3px solid var(--ink);background:linear-gradient(#a8dcf5,#d9f0fb);border-radius:6px;flex:none;width:72px;height:72px;overflow:hidden}#dialog .portrait img{width:100%;height:100%}#dialog .body{flex:1;min-width:0;position:relative}#dialog .name{color:var(--red-2);margin-bottom:2px;font-size:17px;font-weight:700}#dialog .text{min-height:2.9em;font-size:19px;line-height:1.45}#dialog[data-who=narrator] .text{color:#4d3b52;font-style:italic}#dialog .choices{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}#dialog .choices .word{pointer-events:none}#dialog .next{color:var(--red-2);font-size:14px;animation:.8s infinite bob;position:absolute;bottom:-4px;right:0}#toasts{top:max(10px, env(safe-area-inset-top));pointer-events:none;z-index:25;flex-direction:column;align-items:center;gap:6px;width:min(420px,100vw - 20px);display:flex;position:absolute;left:50%;transform:translate(-50%)}.toast{background:var(--ink);color:#fff7e6;opacity:0;border-radius:6px;align-items:center;gap:8px;padding:7px 14px;font-size:16px;transition:opacity .3s,transform .3s;display:flex;transform:translateY(-12px);box-shadow:0 3px #0000004d}.toast.in{opacity:1;transform:none}.toast img{width:24px;height:24px}.toast b{color:#ffe38a}.toast-word{background:#3b6b3f}.toast-quest{background:var(--red-2)}.toast-star{background:#2d5f8f}#modal{z-index:30;background:#14101e00;justify-content:center;align-items:center;padding:12px;transition:background .2s;display:flex;position:absolute;inset:0}#modal.in{background:#14101e73}.card{background:var(--paper);border:3px solid var(--ink);box-shadow:inset 0 0 0 3px var(--paper-2), 0 6px 0 #00000059;text-align:center;border-radius:8px;width:min(420px,100%);max-height:calc(100% - 20px);padding:22px 22px 20px;animation:.25s pop;position:relative;overflow:auto}.ribbon{background:var(--red);color:#fff7e6;border:3px solid var(--ink);white-space:nowrap;box-shadow:0 3px 0 var(--ink);border-radius:5px;margin:-14px auto 6px;padding:2px 16px;font-weight:700;display:inline-block}.ribbon.gold{background:var(--gold);color:var(--ink)}.card h2{margin:6px 0 2px}.sub{margin:4px 0 12px;font-size:16px}.hint{color:#6a5a4a;font-size:14px}.big-icon{width:96px;height:96px;margin:4px auto;display:block}.bounce{animation:.6s bounceIn}.big-word{color:var(--red-2);justify-content:center;align-items:center;gap:10px;font-size:40px;font-weight:700;display:flex}.meaning{font-size:20px}.fact{background:#fff8e8;border:2px dashed #d6bf8f;border-radius:6px;margin:10px 0 14px;padding:8px 10px;font-size:15px;line-height:1.35}.speak{font-size:18px}.q-prompt{margin:4px 0 8px;font-size:20px}.q-word{color:var(--red-2);justify-content:center;align-items:center;gap:10px;margin-bottom:8px;font-size:40px;font-weight:700;display:flex}.opts{flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0 6px;display:flex}.opts.pic2word{flex-direction:column;align-items:stretch}.opts.pic2word .opt{font-size:24px}.opt.pic{padding:8px}.opt.pic img{width:64px;height:64px;display:block}.opt.right{animation:.3s pop;background:#b8e6a0!important}.opt.wrong{animation:.35s shake;background:#f4b0b0!important}.feedback{min-height:44px}.yay{color:var(--green);font-size:26px;font-weight:700}.oops-word{color:var(--red-2);font-weight:700}.tap-hint{color:#8a7a66;margin:10px 0 0;font-size:14px;animation:1.6s ease-in-out infinite bob}.word-card{cursor:pointer}.oops{margin-bottom:10px;font-size:17px}.badge{background:radial-gradient(circle at 40% 35%, #ffe38a, var(--gold) 60%, var(--gold-2));border:4px solid var(--ink);width:110px;height:110px;box-shadow:0 4px 0 var(--ink);border-radius:50%;justify-content:center;align-items:center;margin:4px auto;animation:.8s bounceIn;display:flex}.badge img{width:80px;height:80px}.stats{justify-content:center;gap:18px;margin:10px 0;display:flex}.stats div{flex-direction:column;display:flex}.stats b{color:var(--red-2);font-size:30px}.stats span{font-size:13px}.next-up{background:#fff8e8;border-radius:6px;padding:8px;font-size:15px}.row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;display:flex}.col{flex-direction:column;gap:12px;margin-top:12px;display:flex}.confetti{pointer-events:none;width:6px;height:8px;animation:linear forwards fall;position:absolute;top:-10px}.toggle{justify-content:center;align-items:center;gap:10px;margin:6px 0;font-size:18px;display:flex}.toggle input{width:22px;height:22px;accent-color:var(--red)}.tools-card{width:min(520px,100vw - 24px)}.tool-list{text-align:left;flex-direction:column;gap:6px;max-height:min(56vh,460px);margin:8px 0 10px;display:flex;overflow-y:auto}.tool{background:#fff7e6;border:2px solid #c9b489;border-radius:6px;align-items:center;gap:10px;padding:6px 10px;display:flex}.tool.locked{opacity:.55}.tool.missing .t-emoji{filter:grayscale()opacity(.5)}.t-emoji{text-align:center;width:32px;font-size:26px}.t-body{flex:1;min-width:0;font-size:15px}.t-no{color:var(--red-2);font-weight:700}.t-use{color:#4d3b52;font-size:14px}.t-next{color:#7a6a5a;font-size:13px;font-style:italic}.pips{gap:3px;display:flex}.pip{border:2px solid var(--ink);background:#e6d8b8;border-radius:3px;width:10px;height:14px;display:inline-block}.pip.on{background:var(--c)}.tier-legend{flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-bottom:10px;font-size:13px;display:flex}.tier-legend span{align-items:center;gap:4px;display:inline-flex}.book-card{width:min(560px,100%)}.wb-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-bottom:8px;display:grid}.wb-cell{font-family:var(--font);border:3px solid var(--ink);cursor:pointer;color:var(--ink);background:#fff8e8;border-radius:6px;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;display:flex}.wb-cell img{width:48px;height:48px}.wb-word{font-size:18px;font-weight:700}.wb-en{color:#6a5a4a;font-size:13px}.wb-cell.locked{opacity:.6;cursor:default;background:#e6d8b8}.wb-icon{color:#9b8a6a;width:48px;height:48px;font-size:34px;line-height:48px}.wb-cell.tapped{animation:.3s pop}#title{z-index:50;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:absolute;inset:0}#title.out{opacity:0}#title-bg{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}.title-inner{text-align:center;width:min(460px,100%);padding:16px;position:relative}.logo{color:#fff7e6;letter-spacing:1px;text-shadow:0 4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 0 9px 0 #0000004d;margin:0;font-size:clamp(52px,13vw,84px);animation:4s ease-in-out infinite float}.logo span{color:#a8dcf5}.tagline{color:#fff7e6;text-shadow:0 2px 0 var(--ink);margin:6px 0 18px;font-size:18px}.title-panel{padding:16px}.title-panel h3{margin:0 0 12px;font-size:19px}.langs{flex-direction:column;gap:10px;display:flex}.lang{font-family:var(--font);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;text-align:left;color:var(--ink);background:#fff7e6;border-radius:6px;align-items:center;gap:12px;padding:10px 14px;display:flex}.lang:hover:not(.soon){background:#ffe9a8}.lang:active:not(.soon){box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.lang img{border:2px solid var(--ink);width:44px;height:32px}.lang span{flex-direction:column;font-size:20px;display:flex}.lang small{color:#6a5a4a;font-size:15px}.lang em{background:#e6d8b8;border-radius:4px;margin-left:auto;padding:2px 6px;font-size:13px;font-style:normal}.lang.soon{opacity:.6;cursor:default}.build{left:0;right:0;bottom:max(8px, env(safe-area-inset-bottom));text-align:center;color:#fff7e673;letter-spacing:.5px;pointer-events:none;margin:0;font-size:12px;position:fixed}.sound-hint{right:max(14px, env(safe-area-inset-right));top:max(12px, env(safe-area-inset-top));color:#fff7e6b3;pointer-events:none;background:#14101e59;border-radius:999px;margin:0;padding:4px 10px;font-size:13px;position:fixed}@media (width<=520px){html,body{font-size:16px}#dialog .portrait{width:56px;height:56px}#dialog .text{font-size:17px}#quest{min-width:0;font-size:14px}#toasts{top:36%}.big-word,.q-word{font-size:34px}}@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)rotate(-10deg)}50%{opacity:1;transform:scale(1.15)rotate(4deg)}75%{transform:scale(.95)}to{transform:scale(1)}}@keyframes shake{25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}}@keyframes bob{50%{transform:translateY(3px)}}@keyframes float{50%{transform:translateY(-6px)}}@keyframes fall{to{transform:translateY(110vh)rotate(720deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}