:root{--sea-deep: #063a52;--sea-mid: #0b6e8f;--sea-light: #16a6b8;--foam: #eafaff;--coral: #ff6b4a;--coral-dark: #e2512f;--sun: #ffd166;--ink: #06303f;--card: rgba(255, 255, 255, .94);--good: #2fae6a;--bad: #ff6b4a;--font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;height:100%}body{font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,#17a6b8 0%,var(--sea-mid) 40%,var(--sea-deep) 100%);overflow:hidden;overscroll-behavior:none}#app{height:100vh;height:100dvh}.screen{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.water{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}.wave{position:absolute;left:-50%;width:200%;height:200px;border-radius:45%;background:#ffffff0f;animation:spin linear infinite}.w1{bottom:-120px;animation-duration:22s}.w2{bottom:-150px;background:#ffffff0d;animation-duration:30s}.w3{bottom:-180px;background:#ffffff0a;animation-duration:40s}@keyframes spin{to{transform:rotate(360deg)}}.btn{font-family:var(--font);font-weight:700;border:none;cursor:pointer;border-radius:16px;padding:14px 20px;font-size:17px;color:#fff;background:var(--sea-mid);box-shadow:0 4px #0000002e;transition:transform .06s,filter .15s}.btn:active{transform:translateY(2px);box-shadow:0 2px #0000002e}.btn.primary{background:var(--coral);box-shadow:0 4px 0 var(--coral-dark)}.btn.secondary{background:var(--sea-light)}.btn.ghost{background:transparent;color:#fff;box-shadow:none;text-decoration:underline}.btn.danger{background:transparent;color:var(--bad);box-shadow:none;text-decoration:underline;font-size:14px}.btn.big{font-size:20px;padding:16px 26px;width:100%}.btn.small{padding:9px 12px;font-size:14px;border-radius:12px}.card .btn.ghost,.tally-card .btn.ghost{color:var(--sea-mid)}.card{position:relative;z-index:1;background:var(--card);color:var(--ink);border-radius:24px;padding:24px;width:min(440px,94vw);box-shadow:0 18px 40px #0000004d;text-align:center;max-height:92vh;overflow-y:auto}.title-block h1{margin:6px 0 2px;font-size:34px;color:var(--sea-mid);letter-spacing:.5px}.tagline{margin:0 0 12px;color:#46707f;font-size:15px}.boat{display:flex;justify-content:center}.form-block{display:flex;flex-direction:column;gap:10px;margin:8px 0;text-align:left}.form-block label{font-weight:700;color:#46707f;font-size:14px}.text-input{font-family:var(--font);font-size:17px;padding:13px 14px;border:2px solid #cfe6ee;border-radius:14px;width:100%;background:#fff}.text-input:focus{outline:none;border-color:var(--sea-light)}.row{display:flex;gap:8px}.row .text-input{flex:1}.divider{margin:14px 0;color:#8fb2be;font-weight:700}.status{min-height:20px;color:var(--coral-dark);font-size:14px}.welcome{font-size:20px;font-weight:700;margin:8px 0}.code-chip{display:inline-block;background:#eaf6fa;color:var(--sea-mid);font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:14px;letter-spacing:1px}.code-chip.small{font-size:12px;padding:3px 9px;margin:0}.map-container{position:relative;z-index:1;width:min(760px,96vw);display:flex;flex-direction:column;gap:12px;height:100%;padding:8px 0}.map-header{display:flex;justify-content:space-between;align-items:center;color:#fff}.hdr-left{display:flex;align-items:center;gap:8px}.trip-tally{background:#0003;padding:8px 14px;border-radius:999px;font-size:16px}.muted{opacity:.7;font-weight:400}.level-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.level-pill{border:none;cursor:pointer;padding:8px 14px;border-radius:999px;font-weight:800;background:#ffffff2e;color:#fff;font-size:15px}.level-pill.active{background:var(--sun);color:var(--ink)}.sea{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px}.strand-label{color:var(--foam);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;opacity:.85}.shoal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.creature{cursor:pointer;border:none;text-align:center;border-radius:18px;padding:12px 8px;background:var(--card);color:var(--ink);box-shadow:0 5px #00000026;transition:transform .08s;display:flex;flex-direction:column;gap:2px}.creature:active{transform:translateY(2px)}.creature-emoji{font-size:34px}.creature-name{font-weight:800;font-size:15px;color:var(--sea-mid)}.creature-concept{font-size:11px;color:#5c7c88;min-height:26px}.creature-meta{font-size:11px;color:#93582f;font-weight:700}.map-footer{display:flex;gap:10px}.map-footer .btn{flex:1}.play-stage{position:relative;z-index:1;width:min(520px,96vw);display:flex;flex-direction:column;align-items:center;gap:10px}.stage-top{width:100%;display:flex;justify-content:space-between;align-items:baseline;color:#fff}.catch-label{font-weight:800;font-size:18px}.weight-readout{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;transition:color .3s}.fish-wrap{width:min(360px,82vw);height:180px;color:#fff}#fishbody{transform-origin:160px 110px;transition:transform .08s linear}#fishbody.heaving{animation:heave .2s ease}@keyframes heave{0%{transform:scale(1)}40%{transform:scale(1.06,.9)}to{transform:scale(1)}}.droplet{animation:spew .6s ease-out forwards}@keyframes spew{to{transform:translate(var(--dx),var(--dy));opacity:0}}.prompt{background:var(--card);border-radius:18px;padding:14px 18px;width:100%;text-align:center;box-shadow:0 6px 18px #0003}.q-text{font-size:24px;font-weight:800;color:var(--ink);line-height:1.3}.q-svg{color:var(--sea-mid);margin-bottom:8px;display:flex;justify-content:center}.answer-area{width:100%}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-btn{font-family:var(--font);cursor:pointer;border:none;border-radius:16px;padding:20px 10px;font-size:24px;font-weight:800;color:#fff;background:var(--sea-mid);box-shadow:0 5px #0003}.choice-btn:nth-child(2n){background:var(--sea-light)}.choice-btn:active{transform:translateY(2px)}.keypad-display-wrap{display:flex;justify-content:center;margin-bottom:8px}.keypad-display{background:#fff;border-radius:12px;padding:10px 18px;font-size:28px;font-weight:800;min-width:160px;text-align:center;color:var(--ink)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.key{font-family:var(--font);cursor:pointer;border:none;border-radius:14px;padding:16px;font-size:22px;font-weight:800;background:var(--card);color:var(--ink);box-shadow:0 4px #00000026}.key:active{transform:translateY(2px)}.keypad-actions{display:flex;gap:8px;margin-top:8px}.key.wide{flex:1}.key.submit{flex:2;background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-dark)}.ws-toggle-row{display:flex;gap:8px;margin-bottom:8px}.ws-toggle{flex:1;font-family:var(--font);cursor:pointer;border:none;border-radius:12px;padding:10px;font-size:15px;font-weight:800;background:#ffffff59;color:#fff}.ws-toggle.active{background:var(--card);color:var(--ink);box-shadow:0 3px #00000026}.ws-panel{background:var(--card);border-radius:16px;padding:10px;box-shadow:0 6px 18px #0003}.ws-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:8px}.ws-tool{font-family:var(--font);cursor:pointer;border:2px solid transparent;border-radius:12px;padding:8px 12px;font-size:20px;line-height:1;background:#eef6f8;color:var(--ink)}.ws-tool.active{border-color:var(--coral);background:#fff}.ws-tool:active{transform:translateY(1px)}.ws-sep{flex:1}.ws-canvas-wrap{position:relative;width:100%;height:220px;border-radius:12px;background:#fff;background-image:linear-gradient(#e6f0f3 1px,transparent 1px);background-size:100% 28px;overflow:hidden;touch-action:none}.ws-canvas{position:absolute;inset:0;touch-action:none}.ws-ink{z-index:1}.ws-overlay{z-index:2}.ws-hint{margin-top:6px;font-size:12px;color:#4b6b76;text-align:center}.ref-wrap{display:flex;align-items:center;margin-right:8px}.ref-thumb{max-height:52px;max-width:120px;border-radius:8px;border:2px solid var(--coral);background:#fff}.result-overlay{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#fff;animation:fade .2s ease}.result-overlay.good{background:#0f7850f0}.result-overlay.bad{background:#782819f0}.result-emoji{font-size:72px}.result-title{font-size:28px;font-weight:900}.result-answer{font-size:18px;opacity:.9}.result-overlay .btn{width:min(320px,80vw)}@keyframes fade{0%{opacity:0}to{opacity:1}}.tally-card h1{color:var(--sea-mid);margin:0 0 6px}.big-total{font-size:46px;font-weight:900;color:var(--coral)}.best-badge{color:var(--sun);background:var(--sea-mid);display:inline-block;padding:6px 14px;border-radius:999px;font-weight:800;margin:6px 0}.stat-row{display:flex;justify-content:space-around;margin:16px 0}.stat-value{font-size:26px;font-weight:900;color:var(--sea-mid)}.stat-label{font-size:12px;color:#5c7c88}.heaviest{font-weight:700;color:#46707f;margin-bottom:10px}.catch-list-wrap{max-height:32vh;overflow-y:auto;border-top:1px solid #dcefF4;margin-top:8px}.catch-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid #eef6f9}.c-emoji{font-size:24px}.c-name{flex:1;text-align:left;font-weight:700}.c-kg{font-weight:800;color:var(--sea-mid);font-variant-numeric:tabular-nums}.tally-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}.leaderboard-card h1{color:var(--sea-mid);margin:0 0 12px}.leader-tabs{display:flex;gap:8px;margin-bottom:12px}.leader-tab{flex:1;font-family:var(--font);font-weight:800;cursor:pointer;border:2px solid #cfe6ee;background:#fff;color:var(--sea-mid);border-radius:999px;padding:10px 12px;font-size:15px}.leader-tab.active{background:var(--sea-mid);color:#fff;border-color:var(--sea-mid)}.leader-list{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto}.leader-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#f4fbfd}.leader-row.me{background:var(--sun)}.leader-rank{font-weight:900;min-width:30px;text-align:center;font-size:18px;color:var(--sea-mid)}.leader-name{flex:1;text-align:left;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-kg{font-weight:800;color:var(--sea-mid);font-variant-numeric:tabular-nums}.leader-empty{color:#5c7c88;padding:24px 8px}.leader-gap{color:#8fb2be;font-weight:900;text-align:center;padding:2px}.studio-container{position:relative;z-index:1;width:min(680px,96vw);height:100%;display:flex;flex-direction:column;gap:10px;padding:8px 0}.studio-header{color:#fff}.studio-header h1{margin:6px 0 2px}.sound-rows{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px}.sound-row{background:var(--card);border-radius:16px;padding:14px;display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;box-shadow:0 4px #0000001f}.sound-label{font-weight:800;font-size:17px;color:var(--sea-mid)}.sound-hint{font-size:13px}.sound-state{font-size:13px;font-weight:700;margin-top:4px}.sound-status{font-size:12px;min-height:16px}.sound-actions{display:flex;gap:6px;flex-wrap:wrap}.btn.rec.recording{background:var(--bad);animation:pulse 1s infinite}@keyframes pulse{50%{filter:brightness(1.3)}}@media (max-width: 480px){.q-text{font-size:20px}.choice-btn{font-size:20px;padding:16px 8px}.big-total{font-size:38px}}