:root{--pearl:#ffe9b3;--gold:#ffd166;--teal:#45e6c8;--aqua:#6fd3ff;--coral:#ff7e6b;--ink:#04222e;--panel:#062a3ab8;--panel-border:#6fd3ff59;--text:#eafcff;--text-dim:#9cc8d8;--font-display:"Baloo 2", "Avenir Next", system-ui, sans-serif;--font-ui:"Quicksand", "Avenir Next", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background:var(--ink);height:100%;color:var(--text);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;overflow:hidden}#app{position:fixed;inset:0}#sea{width:100%;height:100%;display:block;position:absolute;inset:0}.hidden{display:none!important}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}#hud{pointer-events:none;z-index:20;justify-content:space-between;align-items:flex-start;padding:14px 18px;display:flex;position:absolute;top:0;left:0;right:0}.hud-label{letter-spacing:3px;color:var(--text-dim);font-size:12px;font-weight:700}.hud-pearls{font-family:var(--font-display);color:var(--pearl);text-shadow:0 0 18px #ffd16699;font-variant-numeric:tabular-nums;font-size:clamp(24px,4vw,34px);font-weight:800;line-height:1.05}.hud-pearls.bump{animation:.22s ease-out bump}@keyframes bump{40%{transform:scale(1.2)}to{transform:scale(1)}}.hud-streak{font-family:var(--font-display);color:var(--teal);text-shadow:0 0 12px #45e6c8b3;margin-top:3px;font-size:15px;animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.06)}}.hud-center{text-align:center;padding-top:5px}.hud-progress{font-family:var(--font-display);letter-spacing:3px;font-size:clamp(13px,2.2vw,18px);font-weight:700}.dive-track{background:#ffffff24;border-radius:4px;width:clamp(120px,20vw,220px);height:6px;margin:7px auto 0;overflow:hidden}.dive-fill{background:linear-gradient(90deg, var(--teal), var(--gold));border-radius:4px;width:0%;height:100%;transition:width .4s;box-shadow:0 0 8px #45e6c8cc}.hud-right{flex-direction:column;align-items:flex-end;gap:9px;display:flex}.hud-lives{gap:5px;display:flex}.hud-lives svg{filter:drop-shadow(0 0 6px #ff7e6b99);width:24px;height:24px}.hud-lives .lost svg{opacity:.18;filter:none}.hud-buttons{pointer-events:auto;gap:6px;display:flex}.icon-btn{background:var(--panel);border:1.5px solid var(--panel-border);border-radius:12px;place-items:center;width:36px;height:36px;transition:all .15s;display:grid}.icon-btn svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round}.icon-btn:hover{border-color:var(--teal);transform:translateY(-1px)}.icon-btn.off{opacity:.4}#word-area{z-index:22;text-align:center;pointer-events:none;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}.tiles{flex-wrap:wrap;justify-content:center;gap:9px;max-width:92vw;margin-bottom:13px;display:flex}.tile{width:clamp(44px,7vw,58px);height:clamp(52px,8vw,66px);font-family:var(--font-display);color:var(--ink);text-transform:uppercase;background:#eafcff1f;border:2px dashed #eafcff66;border-radius:14px;place-items:center;font-size:clamp(26px,4.6vw,36px);font-weight:800;transition:all .16s;display:grid}.tile.next{border-color:var(--gold);background:#ffd1661f;box-shadow:0 0 18px #ffd16673}.tile.filled{background:linear-gradient(160deg, #fff8e1, var(--pearl));border:2px solid var(--gold);animation:.32s cubic-bezier(.34,1.56,.64,1) tilePop;box-shadow:0 4px #b4821473,0 0 20px #ffd16659}@keyframes tilePop{0%{transform:scale(.4)rotate(-8deg)}}.tiles.solved .tile.filled{animation:.6s tileParty}@keyframes tileParty{30%{transform:translateY(-14px)rotate(4deg)}}@keyframes missShake{20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}.word-actions{pointer-events:auto;justify-content:center;gap:10px;display:flex}.pill-btn{background:var(--panel);border:1.5px solid var(--panel-border);font-family:var(--font-display);letter-spacing:1.5px;color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;align-items:center;gap:8px;padding:9px 18px;font-size:14px;font-weight:700;transition:all .15s;display:inline-flex}.pill-btn:hover{border-color:var(--gold);transform:translateY(-2px)}.pill-btn b{color:var(--gold)}.pill-ico{font-size:16px}.word-peek{font-family:var(--font-display);letter-spacing:6px;color:var(--gold);text-shadow:0 0 12px #ffd16699;margin-top:10px;font-size:18px}#banner{z-index:30;pointer-events:none;place-content:center;display:grid;position:absolute;inset:0}.banner-text{font-family:var(--font-display);letter-spacing:4px;color:#fff;text-shadow:0 0 28px #45e6c8e6,0 6px #04222e66;font-size:clamp(38px,8vw,84px);font-weight:800;animation:2.2s cubic-bezier(.16,1,.3,1) forwards bannerIn}@keyframes bannerIn{0%{opacity:0;transform:scale(.5)rotate(-3deg)}14%{opacity:1;transform:scale(1.05)}22%{transform:scale(1)}76%{opacity:1}to{opacity:0;transform:scale(1.05)}}#menu{z-index:50;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0;overflow-y:auto}.menu-inner{text-align:center;width:min(640px,94vw);animation:.7s cubic-bezier(.16,1,.3,1) menuIn}@keyframes menuIn{0%{opacity:0;transform:translateY(26px)}}.logo{font-family:var(--font-display);letter-spacing:2px;font-size:clamp(52px,11vw,100px);font-weight:800;line-height:1}.logo-word{color:#fff;text-shadow:0 0 26px #6fd3ffcc,0 8px #04222e80}.logo-reef{background:linear-gradient(120deg, var(--teal), var(--gold) 70%);color:#0000;filter:drop-shadow(0 0 20px #45e6c880);-webkit-background-clip:text;background-clip:text}.logo-tag{letter-spacing:5px;color:var(--text-dim);margin:10px 0 26px;font-size:clamp(11px,1.9vw,15px);font-weight:700}.menu-heading{letter-spacing:5px;color:var(--text-dim);margin-bottom:12px;font-size:13px;font-weight:700}.tier-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.tier-card{background:var(--panel);border:1.5px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:18px;flex-direction:column;align-items:center;gap:4px;padding:14px 6px 12px;transition:all .16s;display:flex}.tier-card:hover{transform:translateY(-3px)}.tier-card.sel{border-color:var(--gold);background:#ffd16621;transform:translateY(-3px);box-shadow:0 0 22px #ffd16659}.tier-emoji{font-size:30px}.tier-card b{font-family:var(--font-display);letter-spacing:1px;font-size:14px}.tier-card i{color:var(--text-dim);font-size:11.5px;font-style:normal;font-weight:600}.dive-btn{font-family:var(--font-display);letter-spacing:4px;color:#063041;background:linear-gradient(120deg, var(--teal), #8ff2de);border-radius:999px;margin-top:26px;padding:16px 62px;font-size:22px;font-weight:800;transition:transform .14s,box-shadow .14s;position:relative;box-shadow:0 0 32px #45e6c880,0 8px #095a4c8c}.dive-btn:hover{transform:scale(1.05)}.dive-btn:active{transform:scale(.97)translateY(3px);box-shadow:0 0 32px #45e6c880,0 4px #095a4c8c}.dive-btn.small{margin-top:16px;padding:12px 44px;font-size:16px}.menu-footer{flex-direction:column;align-items:center;gap:8px;margin-top:24px;display:flex}.menu-best{font-family:var(--font-display);letter-spacing:2px;color:var(--gold);font-size:14px}.menu-note{color:var(--text-dim);font-size:13.5px;font-weight:600}.menu-note b{color:var(--teal)}.menu-credit{letter-spacing:1px;color:#9cc8d88c;font-size:11px;font-weight:600}.link-btn{letter-spacing:3px;color:var(--text-dim);padding:8px 14px;font-size:13px;font-weight:700}.link-btn:hover{color:var(--teal)}.modal{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#02141cb3;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.modal-card{text-align:center;border:1.5px solid var(--panel-border);background:linear-gradient(165deg,#0a3a4ef7,#05212ef7);border-radius:26px;width:min(520px,94vw);padding:30px 34px;animation:.45s cubic-bezier(.34,1.56,.64,1) cardIn;box-shadow:0 0 60px #45e6c826,0 30px 60px #00000080}@keyframes cardIn{0%{opacity:0;transform:scale(.86)translateY(18px)}}.modal-card h2{font-family:var(--font-display);letter-spacing:4px;margin-bottom:8px;font-size:28px;font-weight:800}.rp-stars{justify-content:center;gap:10px;margin:8px 0 4px;display:flex}.rp-stars svg{width:44px;height:44px}.rp-stars .earned{filter:drop-shadow(0 0 10px #ffd166e6);animation:.5s cubic-bezier(.34,1.56,.64,1) backwards starPop}.rp-stars .earned:nth-child(2){animation-delay:.18s}.rp-stars .earned:nth-child(3){animation-delay:.36s}@keyframes starPop{0%{transform:scale(0)rotate(-40deg)}}.rp-newbest{font-family:var(--font-display);letter-spacing:3px;color:var(--gold);font-size:14px;animation:1s ease-in-out infinite pulse}.report-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0;display:grid}.stat{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:12px 6px}.stat-val{font-family:var(--font-display);color:var(--pearl);font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}.stat-label{letter-spacing:2px;color:var(--text-dim);margin-top:3px;font-size:10.5px;font-weight:700}.practice-wrap{margin:8px 0 4px}.practice-chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;display:flex}.practice-chip{font-family:var(--font-display);color:var(--gold);letter-spacing:2px;text-transform:uppercase;background:#ffd1661a;border:1.5px solid #ffd16673;border-radius:999px;padding:7px 16px;font-size:15px;font-weight:700}.modal-btns{flex-direction:column;align-items:center;gap:6px;display:flex}@media (width<=560px){.tier-grid{grid-template-columns:repeat(2,1fr)}#hud{padding:10px 12px}}@media (prefers-reduced-motion:reduce){.hud-streak,.rp-newbest{animation:none}}