:root{--lake-900: #0d3b4d;--lake-700: #14566e;--lake-500: #1a6b8a;--lake-300: #4fa3c0;--lake-100: #bfe6f2;--otter-800: #4a2f1e;--otter-600: #7a4d2e;--otter-400: #b07a4a;--otter-200: #e2c3a0;--reed-500: #3f9b6d;--coral-500: #e2705a;--gold-500: #e8b84b;--cream: #fbf6ec;--ink: #16232b;--shadow: 0 2px 8px rgba(6, 30, 40, .25);--radius: 14px;--tier-1: #5aa9c9;--tier-2: #3f9b6d;--tier-3: #c9a24b;--tier-4: #d1754e;--tier-5: #9b6dd1;--tier-6: #d14e7e}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--cream);background:radial-gradient(circle at 50% -10%,var(--lake-500),var(--lake-900));-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{max-width:520px;margin:0 auto;min-height:100%;padding:calc(8px + env(safe-area-inset-top,0)) 12px calc(20px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:12px}.app.play{gap:8px}.canvas-wrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.game-frame{width:100%;max-width:420px;margin:0 auto;aspect-ratio:420 / 760;max-height:calc(100dvh - 230px);min-height:300px;overflow:hidden;border-radius:var(--radius)}.game-frame canvas{touch-action:none;border-radius:var(--radius)}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#061e288c;border-radius:var(--radius);z-index:5}.result-card{background:var(--lake-700);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;width:min(320px,88%)}.result-card .delta{font-size:1.15rem;font-weight:800;padding:0 4px}.result-card .delta em{font-style:normal;font-size:.85rem}.result-card .delta .up{color:var(--gold-500)}.result-card .delta .down{color:var(--coral-500)}.battle-controls{margin:0 auto;width:100%;max-width:420px}details.card summary{cursor:pointer;font-weight:800;font-size:.9rem}h1,h2,h3{margin:0;font-weight:800}a{color:var(--lake-100)}.brand{text-align:center;padding:28px 0 8px}.brand .logo{font-size:3rem;line-height:1}.brand h1{font-size:2.2rem;letter-spacing:.5px;margin-top:6px;color:var(--cream);text-shadow:0 2px 0 var(--lake-900)}.brand .tagline{color:var(--lake-100);margin-top:6px;font-size:.95rem}button{font-family:inherit;font-weight:800;cursor:pointer;border:none;border-radius:var(--radius);padding:12px 16px;font-size:1rem;color:var(--ink);background:var(--lake-100);box-shadow:var(--shadow);transition:transform .08s ease,filter .08s ease;touch-action:manipulation}button:active{transform:translateY(1px) scale(.99)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--gold-500);color:var(--otter-800);font-size:1.15rem;padding:16px}button.ghost{background:#ffffff1f;color:var(--cream)}button.danger{background:var(--coral-500);color:#fff}button.wide{width:100%}button.small{padding:8px 12px;font-size:.85rem;border-radius:10px}.stack{display:flex;flex-direction:column;gap:10px}.row{display:flex;gap:8px;align-items:center}.spread{justify-content:space-between}.card{background:#ffffff14;border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}.hud{background:var(--lake-700);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow)}.hud .stats{display:flex;justify-content:space-between;gap:6px;font-weight:800}.hud .stat{display:flex;flex-direction:column;align-items:center;min-width:48px}.hud .stat .val{font-size:1.25rem}.hud .stat .lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;opacity:.75}.hud .hearts{color:var(--coral-500)}.hud .pearls{color:var(--lake-100)}.hud .trophies{color:var(--gold-500)}.chip{margin-top:8px;background:#ffffff24;border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:700;text-align:center}.tier-note{font-size:.75rem;opacity:.8;text-align:center;margin-top:4px}.section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;opacity:.75;margin:4px 2px}.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.otter{position:relative;border-radius:12px;padding:8px 6px 6px;background:var(--otter-600);border:2px solid transparent;text-align:center;min-height:92px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}.otter.empty{background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);color:#ffffff59;align-items:center;justify-content:center;font-size:.75rem}.otter.selected{border-color:var(--gold-500);transform:translateY(-2px)}.otter .nm{font-size:.72rem;font-weight:800;line-height:1.05}.otter .lvl{position:absolute;top:-6px;left:-6px;background:var(--gold-500);color:var(--otter-800);border-radius:999px;width:20px;height:20px;font-size:.7rem;line-height:20px;font-weight:800}.otter .glyph{font-size:1.5rem}.otter .statline{display:flex;justify-content:center;gap:8px;font-size:.85rem;font-weight:800}.otter .atk{color:var(--gold-500)}.otter .hp{color:var(--coral-500)}.otter .statuses{font-size:.6rem;opacity:.85;min-height:.7rem}.tier-ribbon{position:absolute;top:-6px;right:-6px;font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:999px;color:#fff}.shop-item{cursor:pointer}.shop-item.frozen{outline:2px solid var(--lake-300)}.price{font-size:.7rem;font-weight:800;color:var(--gold-500)}.food{background:var(--reed-500)}.toast{position:sticky;bottom:8px;background:var(--coral-500);color:#fff;padding:8px 12px;border-radius:10px;text-align:center;font-weight:700;font-size:.85rem}.log{background:#0003;border-radius:var(--radius);padding:10px 12px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px;font-size:.9rem}.log .line{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.06)}.banner{text-align:center;padding:14px;border-radius:var(--radius);font-size:1.3rem;font-weight:800}.banner.win{background:var(--reed-500)}.banner.loss{background:var(--coral-500)}.banner.draw{background:var(--lake-700)}.compendium h2{margin-top:14px;color:var(--lake-100)}.entry{margin-bottom:8px}.entry .ability{font-size:.82rem;opacity:.92;margin-top:4px}.entry .flavor{font-size:.78rem;font-style:italic;opacity:.7;margin-top:4px}.loglist .item{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--cream)}.stamp{font-weight:800;padding:2px 8px;border-radius:999px;font-size:.75rem}.stamp.victory{background:var(--reed-500)}.stamp.defeat{background:var(--coral-500)}.muted{opacity:.7;font-size:.85rem}.center{text-align:center}.grow{flex:1}.play-desc{text-align:center;font-size:.8rem;opacity:.75;margin-top:-4px}.chip-mini{display:inline-block;background:#e8b84b38;color:var(--gold-500);border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:800}.opponent-line{font-weight:800;font-size:.95rem;color:var(--lake-100)}.waiting{text-align:center;background:#ffffff1f;border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:700}.nickname-input{font-family:inherit;font-size:1.05rem;font-weight:700;color:var(--ink);background:var(--cream);border:2px solid transparent;border-radius:var(--radius);padding:12px 14px;width:100%;outline:none}.nickname-input:focus{border-color:var(--gold-500)}.invite-row{gap:8px}.lobby-code{font-size:2.4rem;font-weight:800;letter-spacing:.35em;padding-left:.35em;color:var(--gold-500);text-shadow:0 2px 0 var(--lake-900)}.seat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.seat{background:var(--lake-700);border-radius:12px;padding:8px 10px;border:2px solid transparent;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;min-height:76px}.seat.me{border-color:var(--gold-500)}.seat.away{opacity:.6}.seat.empty{background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);color:#fff6;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}.seat-top{display:flex;justify-content:space-between;align-items:center;gap:6px}.seat-name{font-weight:800;font-size:.95rem;line-height:1.1;word-break:break-word}.seat-remove{background:#e2705ad9;color:#fff;border-radius:999px;width:22px;height:22px;padding:0;font-size:.75rem;line-height:1;box-shadow:none;flex:0 0 auto}.seat-badges{display:flex;flex-wrap:wrap;gap:6px;font-size:.7rem;font-weight:700;opacity:.9}.seat-stats{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;font-weight:700;align-items:center}.seat-ready{color:var(--reed-500)}.seat-away{color:var(--lake-100)}.seat-out{color:var(--coral-500)}.host-controls .setting-row{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem}.host-controls select{font-family:inherit;font-weight:700;font-size:.9rem;color:var(--ink);background:var(--cream);border:none;border-radius:10px;padding:8px 10px}.countdown-pill{display:inline-block;background:#ffffff24;border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:800}.countdown-pill.warn{background:var(--coral-500);color:#fff}.reconnect-strip{text-align:center;background:var(--gold-500);color:var(--otter-800);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:800}.spectator-banner{text-align:center;background:var(--lake-700);border-radius:var(--radius);padding:8px 12px;font-size:.9rem;font-weight:700}.standings .standing-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08)}.standings .standing-row:last-child{border-bottom:none}.standing-row.me{background:#e8b84b24;border-radius:10px}.standing-row .medal{font-size:1.2rem;min-width:1.6em;text-align:center;font-weight:800}.standing-name{font-weight:800;flex:1}.rarity-minor{--charm-accent: var(--lake-300)}.rarity-major{--charm-accent: var(--gold-500)}.rarity-wild{--charm-accent: var(--coral-500)}.totem-draft{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#061e28b3;border-radius:var(--radius);z-index:6;padding:12px}.totem-draft-card{background:var(--lake-700);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;width:min(360px,96%)}.totem-draft-title{font-weight:800;font-size:1.05rem;text-align:center;margin-bottom:4px}.charm-offer{display:flex;flex-direction:column;gap:8px}.charm-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px 12px;border-radius:12px;border:2px solid var(--charm-accent, var(--lake-300));background:#ffffff0f;color:var(--cream);cursor:pointer}.charm-card:hover{background:#ffffff1f}.charm-rarity{align-self:flex-start;background:var(--charm-accent, var(--lake-300));color:var(--ink);border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:800}.charm-name{font-size:1rem}.charm-text{font-size:.82rem;opacity:.9}.shop-chrome{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:6px}.charm-chips{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:center}.charm-chip{display:inline-block;border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:800;color:var(--ink);background:var(--charm-accent, var(--lake-300))}.squeak-btn{border-radius:999px;padding:6px 14px;font-weight:800;font-size:.85rem;border:2px solid var(--gold-500);background:#e8b84b29;color:var(--cream);cursor:pointer}.squeak-btn:disabled{opacity:.45;cursor:not-allowed}.squeak-btn.armed{background:var(--gold-500);color:var(--ink);box-shadow:0 0 0 3px #e8b84b59;transform:scale(1.04)}.squeak-note{font-weight:800;color:var(--gold-500)}.squeak-mark{font-size:.9em}.sparkline-line{stroke:var(--gold-500);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.sparkline-dot{fill:var(--coral-500)}.board-strip{display:flex;flex-wrap:wrap;gap:8px}.board-card{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:10px;border:2px solid var(--tier-1);background:#ffffff0f;min-width:92px}.board-card-name{font-weight:700;font-size:.82rem}.board-card-stats .atk{color:var(--coral-500);font-weight:800}.board-card-stats .hp{color:var(--reed-500);font-weight:800}.turn-row .charm-chip,.turn-row .squeak-mark{font-size:.68rem}.streak-chip{font-weight:800;color:var(--gold-500);font-size:.95rem}.daily-grid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;line-height:1.5;text-align:center;margin:0;padding:12px;border-radius:var(--radius);background:#ffffff14;white-space:pre-wrap;word-break:break-word}.progress-chip-row{margin-bottom:4px}.progress-chip{display:inline-flex;align-items:center;gap:8px;background:#ffffff1a;border-radius:999px;padding:6px 14px;color:var(--cream);font-weight:800}.progress-chip.locker-link{color:var(--gold-500)}.level-badge{color:var(--gold-500);font-weight:800}.shell-balance{color:var(--lake-100);font-weight:800}.xpbar,.questbar{width:100%;height:14px;border-radius:999px;background:#ffffff1f;overflow:hidden}.questbar{height:10px}.xpbar-fill{height:100%;background:linear-gradient(90deg,var(--gold-500),var(--reed-500));border-radius:999px;transition:width .4s ease}.questbar-fill{height:100%;background:var(--lake-300);border-radius:999px;transition:width .4s ease}.quest-row{padding:8px;border-radius:10px;background:#ffffff0d}.quest-row.done{background:#3f9b6d2e}.quest-desc{font-weight:700}.quest-reward{color:var(--gold-500);font-weight:800;white-space:nowrap}.small{font-size:.8rem}.levelup-toast{display:block;text-align:center;font-weight:800;color:var(--ink);background:linear-gradient(90deg,var(--gold-500),#f2d27a);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}.locker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.locker-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:12px;border:2px solid rgba(255,255,255,.14);background:#ffffff0d;text-align:center}.locker-card.status-equipped{border-color:var(--gold-500);background:#e8b84b1f}.locker-card.status-locked{opacity:.7}.locker-card.rarity-rare{border-color:var(--lake-300)}.locker-card.rarity-epic{border-color:var(--tier-5)}.locker-name{font-weight:800}.locker-tag{font-size:.78rem;font-weight:700}.locker-tag.equipped{color:var(--gold-500)}.locker-tag.locked{color:var(--lake-100);opacity:.85}.avatar-frame{border-radius:999px;padding:4px}.frame-pup_frame{box-shadow:0 0 0 3px var(--reed-500)}.frame-wave_frame{box-shadow:0 0 0 3px var(--lake-300),0 0 0 6px #4fa3c066}.frame-star_frame{box-shadow:0 0 0 3px var(--gold-500),0 0 12px 2px #e8b84b99}.game-frame[data-skin=reedy_bank] canvas{filter:hue-rotate(-18deg) saturate(1.15) brightness(1.02)}.game-frame[data-skin=night_lake] canvas{filter:hue-rotate(200deg) saturate(1.2) brightness(.82)}