*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102e36;color:white;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #ffdd75;outline-offset:4px}[hidden]{display:none!important}#game{position:relative;width:100%;height:100dvh;max-width:650px;margin:auto;overflow:hidden;background:#69afc2}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:0;left:0;right:0;padding:calc(18px + env(safe-area-inset-top)) 24px 10px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-weight:950;font-size:34px;letter-spacing:-2px;text-shadow:0 2px 16px #163e47}.brand span{display:block;font-size:10px;letter-spacing:2px;margin-top:1px}button#pause{pointer-events:auto;border:1px solid #ffffff50;border-radius:50%;width:44px;height:44px;color:white;background:#123840a6;font-size:20px}#hud{position:absolute;top:calc(99px + env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;gap:16px;text-shadow:0 1px 6px #17404b}small{font-size:12px;letter-spacing:1px}#hud small{display:block;font-size:10px}#hud strong{font-size:22px;white-space:nowrap}.progress{height:5px;flex:1;background:#ffffff45;border-radius:4px;overflow:hidden}.progress i,.meter i{display:block;width:0;height:100%;background:#ffe49a;border-radius:6px}.panel{position:absolute;left:8%;right:8%;top:24%;padding:28px;border:1px solid #ffffff40;border-radius:28px;background:linear-gradient(140deg,#143d43f5,#143d43d9);box-shadow:0 24px 80px #143d4355;backdrop-filter:blur(12px)}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:2px;color:#ffd58b}h1{font-size:clamp(36px,10vw,59px);line-height:1.03;letter-spacing:-2px;margin:17px 0}h2{font-size:36px;line-height:1.1;margin:18px 0}p{font-size:17px;line-height:1.5;color:#d7e9e5}.primary{width:100%;border:0;border-radius:14px;background:#ffbc63;color:#203c3d;font-size:18px;font-weight:900;padding:18px;box-shadow:0 4px 0 #c98737}.primary span{float:right}.lesson{display:flex;gap:14px;margin:25px 0;font-size:14px;line-height:1.5}.lesson b{max-width:95px;color:#ffe1a8}.lesson span{color:#d7e9e5}.note{display:block;font-size:11px;letter-spacing:0;color:#aecac7}.secondary{border:0;background:transparent;color:#e5eee9;padding:18px 0 0;width:100%;font-size:14px}footer{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;pointer-events:none}#tip{font-size:14px;font-weight:700;background:#153e43e0;border:1px solid #ffffff30;padding:12px 16px;border-radius:30px;display:inline-block}.meter{height:5px;max-width:180px;margin:10px auto;background:#ffffff4d;border-radius:6px;overflow:hidden}#rescue{pointer-events:auto;background:#163e43dc;border:1px solid #ffffff40;border-radius:20px;padding:9px 15px;color:#e5f1eb;font-size:12px}#toast{position:absolute;top:45%;width:100%;text-align:center;pointer-events:none;color:white;font-size:22px;font-weight:900;text-shadow:0 2px 8px #143d43;opacity:0;transition:opacity .25s}#toast.show{opacity:1}@media(max-height:700px){.panel{top:18%;padding:20px}h1{font-size:38px}.lesson{margin:15px 0}.panel p{margin:12px 0}.primary{padding:14px}}@media(min-width:651px){#game{box-shadow:0 0 90px #0006}}