:root{--bg: #FFF6E6;--surface: #FFFFFF;--ink: #16242B;--muted: #6B5A45;--line: #F0DFC4;--coral: #FF7A45;--coral-dark: #E4572E;--rust: #C2410C;--soft: #FFE9C7;--peach: #FFE2C2;--ring: #FFD2A6;--teal: #23A0AE;--teal-soft: #DDF6FA;--deep: #0C4A56;--yellow: #FFC53D;--ok: #1B6B3A;--ok-bg: #E2F6E8;--font: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#fff6e6;overflow:hidden;font-family:var(--font);color:var(--ink)}body{display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none}button{font-family:inherit;color:inherit;cursor:pointer}#frame{position:relative;width:844px;height:390px;transform-origin:center center;overflow:hidden;background:var(--bg);box-shadow:0 20px 60px #16242b2e;flex-shrink:0}@media (max-height: 500px){#frame{box-shadow:none}}#stage{position:absolute;inset:0}#stage canvas{display:block;width:844px!important;height:390px!important}#ui{position:absolute;inset:0;pointer-events:none}#ui>*{pointer-events:auto}#ui .passthrough{pointer-events:none}#ui .passthrough>*{pointer-events:auto}.screen{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.screen.clear{background:transparent}.cols{flex:1;min-height:0;display:flex;gap:20px;padding:0 20px 12px}.cols>.col{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column}.cols>.col.side{flex:0 0 360px}.cols>.col>.in{margin:auto 0;display:flex;flex-direction:column}@keyframes bf-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes bf-rise{0%{transform:translate(0);opacity:0}12%{opacity:1}to{transform:translate(-4px,-220px);opacity:0}}@keyframes bf-up{0%{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}@keyframes bf-zoom{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.04);opacity:1}to{transform:scale(1)}}@keyframes bf-pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.3);opacity:1}to{transform:scale(1)}}@keyframes bf-spin{to{transform:rotate(360deg)}}@keyframes bf-shimmer{0%{transform:translate(-160%) skew(-20deg)}55%,to{transform:translate(320%) skew(-20deg)}}@keyframes bf-flicker{0%,to{transform:scaleY(1) scaleX(1)}25%{transform:scaleY(1.18) scaleX(.92)}50%{transform:scaleY(.94) scaleX(1.05)}75%{transform:scaleY(1.1) scaleX(.96)}}@keyframes bf-twinkle{0%,to{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}}@keyframes bf-letter{0%{transform:translateY(30px) rotate(-8deg);opacity:0}70%{transform:translateY(-4px)}to{transform:none;opacity:1}}@keyframes bf-drift{0%{transform:translate(0)}to{transform:translate(-96px)}}@keyframes bf-ring{0%{transform:scale(.7);opacity:.6}to{transform:scale(1.9);opacity:0}}@keyframes bf-dots{0%,to{opacity:.2}50%{opacity:1}}@keyframes bf-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bf-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes flap{0%{transform:rotate(-6deg)}to{transform:rotate(30deg)}}@keyframes wag{0%{transform:rotate(-10deg)}to{transform:rotate(10deg)}}.up{animation:bf-up .5s cubic-bezier(.2,.8,.2,1) both}.zoom{animation:bf-zoom .7s cubic-bezier(.2,.8,.2,1) both}.fish{position:relative;flex-shrink:0}.fish-in{position:absolute;left:0;top:0;width:96px;height:60px;transform-origin:0 0}.fish .part{position:absolute;display:block}.fish .part img{display:block;width:100%;height:100%}.fish .wing{animation:flap .18s ease-in-out infinite alternate}.fish .tail{animation:wag .32s ease-in-out infinite alternate}.fish.ghost{opacity:.45}.fish.sil img{filter:brightness(0);opacity:.5}.head{display:flex;align-items:center;gap:8px;padding:8px 16px 4px 12px;flex-shrink:0}.head h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;flex-grow:1}.iconbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:12px;color:var(--ink);padding:0}.iconbtn.muted{color:var(--muted)}.pill{height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600}.lead{margin:0;font-size:14px;color:var(--muted)}.nav{display:flex;flex-direction:column;gap:8px}.card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:8px 14px;min-height:56px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-align:left;width:100%;font-size:inherit}.card .tile{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--rust);display:flex;align-items:center;justify-content:center;flex-shrink:0}.card .txt{display:flex;flex-direction:column;gap:2px;flex-grow:1}.card .t1{font-size:16px;font-weight:600}.card .t2{font-size:13px;color:var(--muted)}.card .chev{color:var(--muted);display:flex}.card.primary{background:var(--coral);border-color:var(--coral)}.card.primary .tile{background:#ffffff4d;color:var(--ink)}.card.primary .t2,.card.primary .chev{color:#5a3a26}.shimmer{position:absolute;top:0;bottom:0;left:0;width:60px;background:linear-gradient(90deg,#fff0,#ffffff59,#fff0);animation:bf-shimmer 3.6s ease-in-out 1.2s infinite;pointer-events:none}.card:active,.btn:active{transform:scale(.98)}.btn{position:relative;overflow:hidden;width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;border:none;background:var(--coral);color:var(--ink);font-size:16px;font-weight:600}.btn.secondary{height:50px;background:var(--surface);border:1px solid var(--line);font-size:15px;font-weight:500}.btn.soft{background:var(--soft);color:var(--rust)}.btn:disabled{background:var(--line);color:var(--muted)}.stats{display:flex;margin:8px 0 0;padding:10px 8px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.stats>div{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}.stats .v{font-size:24px;font-weight:600;display:flex;align-items:center;gap:5px}.stats .l{font-size:12px;color:var(--muted)}.stats .sep{flex:0 0 1px;background:var(--line)}.flame{display:flex;color:#f0701a;transform-origin:50% 100%;animation:bf-flicker .9s ease-in-out infinite}.hero{position:relative;width:342px;height:236px;margin:0 auto}.hero svg.bg{position:absolute;left:0;top:0}.hero .fishpos{position:absolute;left:94px;top:58px;animation:bf-bob 3s ease-in-out infinite}.wordmark{margin:0;font-size:46px;font-weight:300;letter-spacing:-.02em;line-height:1.05;text-align:center}.wordmark span{display:inline-block;animation:bf-letter .6s cubic-bezier(.2,.8,.2,1) both}.kicker{margin:0;font-size:13px;letter-spacing:.18em;color:var(--muted);text-align:center}.hud{position:absolute;left:16px;top:14px;width:812px;display:flex;align-items:flex-start;justify-content:space-between}.hudbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0}.hudbtn .bar{width:4px;height:14px;background:var(--ink);border-radius:2px}.score{display:flex;flex-direction:column;align-items:center;gap:2px}.score .cap{font-size:12px;letter-spacing:.18em;color:var(--muted)}.score .num{font-size:44px;font-weight:600;line-height:1}.score .num.pop{animation:bf-pop .35s ease-out}.meter{height:44px;padding:0 12px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--teal)}.meter .track{width:58px;height:8px;border-radius:4px;background:var(--teal-soft);overflow:hidden}.meter .fill{height:100%;border-radius:4px;background:var(--teal);transition:width .1s linear,background-color .3s}.meter.low{color:var(--rust);animation:bf-shake .5s ease-in-out infinite}.meter.low .fill{background:var(--rust)}.chip{margin-top:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.14em}.night .hudbtn,.night .meter{background:#1d2150;border-color:#3e4a78}.night .hudbtn .bar{background:#fff3c8}.night .score .num{color:#fff3c8}.night .score .cap{color:#a9b3d6}.night .meter{color:#7fffe1}.night .meter .track{background:#282c62}.night .meter .fill{background:#7fffe1}.nightchip{background:#1d2150;color:#7fffe1}.standings{position:absolute;left:0;top:94px;width:844px;display:flex;justify-content:center;gap:4px}.standings .st{height:28px;padding:0 8px 0 3px;display:flex;align-items:center;gap:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:11px;font-weight:600}.standings .st .av{width:22px;height:22px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}.standings .st .sc{color:var(--muted);font-weight:400}.standings .st.out{opacity:.5}.prompt{position:absolute;left:0;right:0;top:118px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none!important}.prompt .big{font-size:22px;font-weight:600;background:#ffffffd9;padding:8px 18px;border-radius:999px;animation:bf-pulse 1.4s ease-in-out infinite}.prompt .small{font-size:13px;color:var(--ink);background:#ffffffb3;padding:4px 12px;border-radius:999px}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;font-weight:300;color:var(--ink);pointer-events:none!important;text-shadow:0 4px 0 rgba(255,255,255,.6)}.countdown span{animation:bf-pop .6s ease-out}.spectate{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;pointer-events:none!important}.spectate span{background:#16242bcc;color:#fff7e8;padding:8px 16px;border-radius:999px;font-size:14px}.dim{position:absolute;inset:0;background:#16242b73;display:flex;align-items:center;justify-content:center}.dialog{width:342px;max-height:calc(100% - 24px);overflow-y:auto;padding:20px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--surface);border-radius:26px;box-shadow:0 24px 48px #16242b38;animation:bf-zoom .6s cubic-bezier(.2,.8,.2,1) both}.dialog h2{margin:0;font-size:30px;font-weight:700;line-height:1.1}.dialog p{margin:-6px 0 0;font-size:14px;color:var(--muted);text-align:center}.dialog.wide{width:620px;flex-direction:row;align-items:center;gap:20px}.dialog.wide>.dc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}.tiles{width:100%;display:flex;gap:10px}.tiles>div{flex:1;padding:12px 14px;border-radius:14px;background:var(--bg);display:flex;flex-direction:column;gap:2px}.tiles .l{font-size:13px;color:var(--muted)}.tiles .v{font-size:20px;font-weight:600}.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.chips span{height:28px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:13px;font-weight:600}.chips span.hot{background:var(--soft);color:var(--rust)}.row{display:flex;gap:8px;color:var(--muted)}.em{font-weight:600;color:var(--rust)}.preview{position:relative;flex:0 0 280px;margin:0;border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden}.preview .name{position:absolute;left:16px;top:14px;right:16px;display:flex;flex-direction:column;gap:2px}.preview .name b{font-size:22px;font-weight:600;line-height:1.1}.preview .name small{font-size:13px;color:var(--muted)}.preview .fishpos{position:absolute;left:44px;bottom:60px;animation:bf-bob 2.6s ease-in-out infinite}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sk{height:104px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform .18s}.sk.on{background:var(--soft);border-color:var(--coral);box-shadow:0 0 0 1px var(--coral);transform:translateY(-2px)}.sk.locked{background:var(--bg)}.sk .n{font-size:13px;font-weight:600}.sk .p{height:24px;padding:0 9px;display:flex;align-items:center;gap:4px;border-radius:999px;background:var(--bg);font-size:12px;font-weight:600}.sk .p.eq{background:var(--coral)}.sk .p.own{background:var(--teal-soft);color:var(--deep)}.codetiles{display:flex;gap:8px}.codetiles span{width:52px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:30px;font-weight:600;animation:bf-pop .45s ease-out both}.codein{width:52px;height:60px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font:600 30px var(--font);text-align:center;text-transform:uppercase;color:var(--ink)}.codein:focus{outline:2px solid var(--coral)}.box{margin:0;padding:18px;border-radius:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:12px}.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}.slot{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:0;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.slot .av{width:40px;height:40px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.slot .nm{font-size:14px;font-weight:500;flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot .tag{font-size:12px;padding:4px 8px;border-radius:8px;background:var(--bg);color:var(--muted)}.slot .tag.ok{display:flex;align-items:center;gap:4px;color:var(--ok);background:var(--ok-bg);font-weight:500}.slot.empty{background:none;border:1.5px dashed var(--line);color:var(--muted)}.slot.empty .av{position:relative;background:var(--surface);border:1px solid var(--line)}.slot.empty .av:after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #FFC9A0;animation:bf-ring 1.8s ease-out infinite}.dots span{animation:bf-dots 1.2s infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}.res{display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.res.win{background:var(--soft);border-color:var(--coral)}.res .pl{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;background:var(--line)}.res .pl.p1{background:var(--yellow)}.res .pl.p2{background:#d7dee2}.res .pl.p3{background:#e9a07a}.res .who{display:flex;flex-direction:column;gap:1px;flex-grow:1}.res .who b{font-size:15px;font-weight:600}.res .who small{font-size:13px;color:var(--muted)}.youtag{font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--bg);color:var(--muted);margin-left:6px}.bar6{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}.bar6 div{height:100%;background:var(--coral);border-radius:3px;transition:width .3s}.toast{position:absolute;left:50%;bottom:20px;transform:translate(-50%);background:var(--ink);color:#fff7e8;padding:10px 16px;border-radius:999px;font-size:14px;animation:bf-up .3s both;z-index:20;white-space:nowrap}.field{width:100%;height:48px;border-radius:12px;border:1px solid var(--line);padding:0 14px;font:500 16px var(--font);color:var(--ink);background:var(--bg)}.field:focus{outline:2px solid var(--coral)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}