/* Deep Sea Derby · QuizQuest — phone first, then tablets and laptops */
:root{--ink:#17203b;--navy:#0b1b3f;--sea1:#0ea5e9;--sea2:#0369a1;--sea3:#0c2d57;--gold:#facc15;--green:#16a34a;--red:#ef4444;--blue:#2563eb}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:linear-gradient(180deg,#0c4a6e 0%,#0b1b3f 55%,#070f26 100%) fixed;color:#fff;font-family:Nunito,"Segoe UI",system-ui,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
.fd{max-width:1180px;margin:0 auto;padding:12px 12px 90px}
.fd-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 18px Fredoka,Nunito,Arial,sans-serif;padding:12px 22px;border-radius:999px;background:#f97316;color:#fff;box-shadow:0 5px 0 #9a3412;transition:transform .1s,filter .15s;text-decoration:none}
.fd-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.fd-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #9a3412}
.fd-btn:disabled{opacity:.6;cursor:default;transform:none}
.fd-btn.big{width:100%;font-size:21px;padding:15px 22px}
.fd-btn.sm{font-size:15px;padding:9px 15px}
.fd-btn.green{background:#16a34a;box-shadow:0 5px 0 #14532d}
.fd-btn.red{background:#dc2626;box-shadow:0 4px 0 #7f1d1d}
.fd-btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 #cbd5e1}
.fd-btn small{font:800 12px Nunito,sans-serif;opacity:.7}
.fd-mini{appearance:none;border:2px solid #cbd5e1;background:#fff;color:var(--ink);border-radius:999px;font:800 13px Nunito,sans-serif;padding:4px 12px;cursor:pointer}
.fd-in{width:100%;font:700 19px Nunito,sans-serif;padding:12px 14px;border:3px solid #cbd5e1;border-radius:14px;color:var(--ink);background:#fff;outline:none}
.fd-in:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px #bae6fd}
.fd-in.code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font:600 24px Fredoka,sans-serif}
.fd-lbl{font:800 12px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:14px 0 6px}
.fd-small{font-size:14px;font-weight:700;color:#64748b;margin:10px 0}
.fd-small.center{text-align:center;color:#cbd5e1}
.fd-warn{color:#b91c1c;font-weight:800}
.fd-note{background:#fef3c7;color:#92400e;font-weight:800;border-radius:14px;padding:10px 14px;text-align:center;max-width:560px;margin:0 auto 12px}
.fd-kick{display:inline-block;font:800 12px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:#facc15;color:#713f12;border-radius:999px;padding:5px 12px;margin-bottom:8px}

/* ---------- title ---------- */
.fd-hero{text-align:center;padding:6px 0 12px}
.fd-hero h1{margin:0;font:700 clamp(38px,9vw,64px)/1 Fredoka,sans-serif;color:#fff;text-shadow:0 4px 0 #0369a1,0 8px 24px rgba(0,0,0,.4);letter-spacing:.01em}
.fd-hero p{max-width:540px;margin:10px auto 0;font-size:16px;font-weight:700;color:#e0f2fe;line-height:1.45}
.fd-fishrow{display:flex;justify-content:center;gap:2px;margin-bottom:4px}
.fd-bob{width:min(18vw,96px);animation:fdbob 2.6s ease-in-out infinite}
.fd-bob svg{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@keyframes fdbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.fd-panel{background:#fff;color:var(--ink);border-radius:24px;padding:16px;max-width:560px;margin:0 auto;box-shadow:0 8px 0 #082f49,0 18px 40px rgba(0,0,0,.35)}
.fd-panel>.fd-lbl:first-child{margin-top:0}
.fd-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 4px;background:#e0f2fe;padding:5px;border-radius:16px}
.fd-tab{appearance:none;border:0;border-radius:12px;background:transparent;font:600 15px Fredoka,sans-serif;color:#0c4a6e;padding:10px 4px;cursor:pointer}
.fd-tab.on{background:#0284c7;color:#fff;box-shadow:0 3px 0 #075985}
.fd-pane{padding-top:4px}
.fd-chips{display:flex;flex-wrap:wrap;gap:7px}
.fd-chip{appearance:none;border:3px solid #cbd5e1;background:#fff;border-radius:999px;font:600 16px Fredoka,sans-serif;color:var(--ink);padding:7px 16px;cursor:pointer}
.fd-chip.on{border-color:#0284c7;background:#e0f2fe;color:#075985}
.fd-names{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.fd-names .fd-in{font-size:16px;padding:10px 12px}
.fd-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fd-or{display:flex;align-items:center;gap:10px;margin:14px 0 8px;color:#94a3b8;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.fd-or::before,.fd-or::after{content:"";flex:1;height:2px;background:#e2e8f0}
.fd-joinrow{display:flex;gap:8px}.fd-joinrow .fd-in{flex:1;min-width:0}
.fd-lsn{margin-top:16px;border:2px solid #e2e8f0;border-radius:16px;padding:10px 12px}
.fd-lsn summary{cursor:pointer;font:600 16px Fredoka,sans-serif;color:#0c4a6e}
.fd-lsn summary b{font:800 13px Nunito,sans-serif;color:#64748b}
.fd-lsrow{display:flex;gap:6px;margin:10px 0 6px}
.fd-ls{display:flex;gap:9px;align-items:flex-start;padding:7px 4px;font-weight:700;font-size:15px;border-top:1px solid #f1f5f9;cursor:pointer}
.fd-ls input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#0284c7}
.fd-ls b{color:#0284c7}
.fd-row{display:flex;gap:8px;margin-top:16px}.fd-row .fd-btn{flex:1;font-size:16px;padding:11px 10px}

/* ---------- overlays (how to, fish book, catch card) ---------- */
.fd-over{position:fixed;inset:0;z-index:9200;background:rgba(3,10,30,.72);display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 12px 16px;overflow-y:auto;animation:fdfade .2s}
@keyframes fdfade{from{opacity:0}}
.fd-overc{background:#fff;color:var(--ink);border-radius:24px;padding:18px;max-width:640px;width:100%;margin:auto 0;box-shadow:0 10px 0 #082f49,0 24px 60px rgba(0,0,0,.5);animation:fdpop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes fdpop{from{transform:scale(.85);opacity:0}}
.fd-overc h2{margin:0 0 10px;font:600 28px Fredoka,sans-serif;color:#0c4a6e}
.fd-overc h2 small{font:800 14px Nunito,sans-serif;color:#64748b;margin-left:6px}
.fd-overc>div>.fd-btn{width:100%;margin-top:14px}
.fd-how ol{padding-left:22px;margin:0;line-height:1.5;font-weight:700;font-size:15px}
.fd-how li{margin-bottom:6px}
.fd-tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin:14px 0}
.fd-tiers div{border-left:6px solid var(--tc);background:#f8fafc;border-radius:8px;padding:6px 9px}
.fd-tiers b{display:block;color:var(--tc);font:600 15px Fredoka,sans-serif}
.fd-tiers span{font-size:12.5px;font-weight:800;color:#475569}
.fd-hooks{display:flex;justify-content:space-between;gap:4px;background:#0c4a6e;border-radius:14px;padding:10px 6px;color:#e0f2fe}
.fd-hooks div{flex:1;text-align:center}.fd-hooks .fd-hk{width:24px;height:34px}
.fd-hooks small{display:block;font-size:10.5px;font-weight:800;line-height:1.2}
.fd-prizes{margin-top:12px;display:grid;gap:5px;font-size:14px;font-weight:700}
.fd-prizes b{color:#b45309}.fd-prizes i{color:#94a3b8;font-size:12px}
.fd-book h3{margin:14px 0 6px;font:600 17px Fredoka,sans-serif;color:var(--tc)}
.fd-bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.fd-bk{border:3px solid var(--tg);border-radius:14px;padding:6px;text-align:center;background:#fff}
.fd-bk .a svg{width:100%;height:auto;display:block}
.fd-bk b{display:block;font:600 12.5px Fredoka,sans-serif;line-height:1.15}
.fd-bk small{font-size:11.5px;font-weight:800;color:#64748b}
.fd-bk.no{border-color:#e2e8f0;background:#f8fafc}
.fd-bk.no .a{filter:brightness(0);opacity:.18}
.fd-bk.no b{color:#94a3b8}

/* ---------- toasts ---------- */
.fd-toasts{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:9300;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(94vw,460px)}
.fd-toast{background:#0f172a;color:#fff;font-weight:800;font-size:15px;border-radius:14px;padding:9px 14px;box-shadow:0 6px 20px rgba(0,0,0,.4);display:flex;align-items:center;gap:8px;animation:fdtoast .35s cubic-bezier(.34,1.56,.64,1);transition:opacity .35s,transform .35s;text-align:center}
.fd-toast .fd-hk{width:18px;height:26px;flex:none}
.fd-toast.up{background:#16a34a}.fd-toast.bad{background:#dc2626}.fd-toast.big{background:linear-gradient(90deg,#ea580c,#db2777)}
.fd-toast.out{opacity:0;transform:translateY(-10px)}
@keyframes fdtoast{from{transform:translateY(-20px) scale(.9);opacity:0}}

/* ---------- the game ---------- */
.fd.is-game{padding:8px 8px 90px}
.fd-game{display:grid;grid-template-columns:1fr;gap:8px}
.fd-hud{display:flex;align-items:stretch;gap:8px}
.fd-hud>div{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:5px 12px;text-align:center}
.fd-hud small{display:block;font:800 10.5px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#bae6fd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-time b{font:600 26px/1.1 Fredoka,sans-serif;font-variant-numeric:tabular-nums}
.fd-time.hot{background:#dc2626;border-color:#fca5a5;animation:fdhot 1s infinite}
@keyframes fdhot{50%{transform:scale(1.05)}}
.fd-lbs{flex:1;min-width:0}
.fd-lbs b{font:700 30px/1.05 Fredoka,sans-serif;color:#fde047;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #92400e}
.fd-lbs i{font-style:normal;font-weight:800;color:#fde68a;margin-left:5px}
.fd-lbs.pop b{display:inline-block;animation:fdlb .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes fdlb{from{transform:scale(1.5)}}
.fd-mute{appearance:none;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);border-radius:16px;font-size:22px;padding:0 12px;cursor:pointer}
.fd-left{display:grid;gap:8px;align-content:start}

/* the sea */
.fd-sea{--wl:max(38%,118px);position:relative;height:clamp(236px,31vh,320px);border-radius:20px;overflow:hidden;border:3px solid rgba(255,255,255,.25);box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;user-select:none;-webkit-user-select:none}
.fd-sky{position:absolute;left:0;right:0;top:0;height:calc(var(--wl) + 4px);background:linear-gradient(180deg,#7dd3fc,#e0f2fe)}
.fd-sky .sun{position:absolute;right:9%;top:14%;width:44px;height:44px;border-radius:50%;background:#fde047;box-shadow:0 0 0 8px rgba(253,224,71,.3),0 0 30px #fde047}
.fd-sky .cl{position:absolute;height:16px;border-radius:12px;background:#fff;opacity:.9;animation:fdcloud 40s linear infinite}
.fd-sky .cl::before{content:"";position:absolute;left:12px;top:-9px;width:24px;height:22px;border-radius:50%;background:#fff}
.fd-sky .c1{width:70px;top:22%;left:30%}.fd-sky .c2{width:50px;top:48%;left:62%;animation-duration:55s;animation-delay:-20s}
@keyframes fdcloud{from{transform:translateX(0)}50%{transform:translateX(60px)}to{transform:translateX(0)}}
.fd-water{position:absolute;left:0;right:0;top:var(--wl);bottom:0;background:linear-gradient(180deg,#0ea5e9 0%,#0369a1 35%,#0c2d57 75%,#071a3a 100%);overflow:hidden}
.fd-water .ray{position:absolute;top:0;width:40px;height:120%;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);animation:fdray 6s ease-in-out infinite}
.fd-water .r1{left:20%}.fd-water .r2{left:50%;animation-delay:-2s;width:26px}.fd-water .r3{left:78%;animation-delay:-4s}
@keyframes fdray{50%{opacity:.35}}
.fd-floor{position:absolute;left:0;right:0;bottom:0;height:18px;background:radial-gradient(ellipse at 20% 100%,#a16207 0 30%,transparent 31%),radial-gradient(ellipse at 70% 100%,#854d0e 0 35%,transparent 36%),linear-gradient(0deg,#713f12,#a16207 40%,transparent)}
.fd-water .sil{position:absolute;left:0;top:0;pointer-events:none}
.fd-water .sil svg{display:block;width:100%;height:auto;fill:#04203d;overflow:visible}
.fd-water .sil.jelly svg{fill:#1e3a8a;stroke:#1e3a8a;stroke-width:2.5;stroke-linecap:round}
.fd-water .sil.fish svg,.fd-water .sil.long svg,.fd-water .sil.school svg{animation:fdwig .7s ease-in-out infinite alternate;transform-origin:70% 50%}
@keyframes fdwig{to{transform:skewY(4deg)}}
.fd-water .bub{position:absolute;bottom:-10px;width:9px;height:9px;border:2px solid rgba(255,255,255,.55);border-radius:50%;animation:fdbub 6s linear infinite}
.fd-water .b1{left:12%}.fd-water .b2{left:41%;animation-delay:-2s;width:6px;height:6px}.fd-water .b3{left:67%;animation-delay:-4s}.fd-water .b4{left:88%;animation-delay:-1s;width:12px;height:12px}
@keyframes fdbub{to{transform:translate(12px,-260px);opacity:0}}
.fd-wave{position:absolute;left:-10%;width:220%;height:16px;animation:fdwave 6s linear infinite}
.fd-wave.w1{top:calc(var(--wl) - 9px);fill:#38bdf8}
.fd-wave.w2{top:calc(var(--wl) - 2px);fill:#0ea5e9;opacity:.85;animation-duration:4.5s;animation-direction:reverse;z-index:3}
@keyframes fdwave{to{transform:translateX(-45%)}}
.fd-boat{position:absolute;left:4%;top:calc(var(--wl) - 78px);width:150px;height:88px;z-index:2;animation:fdrock 3.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes fdrock{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(3px)}}
.fd-qz{position:absolute;left:34px;top:-6px;width:62px;z-index:2}
.fd-qz svg{width:100%;height:auto;display:block}
.fd-hull{position:absolute;left:0;bottom:0;width:150px;height:52px;z-index:4}
.fd-rod{position:absolute;left:66px;top:-28px;width:96px;height:72px;z-index:3}
.fd-pile{position:absolute;inset:0;z-index:2}
.fd-pile i{position:absolute;display:block;animation:fdpile .5s cubic-bezier(.34,1.56,.64,1)}
.fd-pile i:last-child{animation-duration:.7s}
.fd-pile svg{width:100%;height:auto;display:block}
@keyframes fdpile{from{transform:translateY(-30px) scale(.4);opacity:0}}
.fd-mast{position:absolute;left:12px;top:-34px;width:80px;height:80px;z-index:1}
.fd-mast .pole{position:absolute;left:0;top:0;width:4px;height:80px;background:#78350f;border-radius:2px}
.fd-mast .pole::before{content:"";position:absolute;left:-2px;top:-5px;width:8px;height:8px;border-radius:50%;background:#facc15}
.fd-mast .flag{position:absolute;left:4px;top:2px;min-width:52px;padding:2px 9px 3px 6px;background:var(--bc,#b91c1c);color:#fff;border:2px solid #111827;border-left:0;
  clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%);line-height:1;transform-origin:0 50%;animation:fdflag 1.6s ease-in-out infinite;white-space:nowrap}
.fd-mast .flag b{font:700 12px Fredoka,sans-serif;font-variant-numeric:tabular-nums}
.fd-mast .flag small{display:block;font:800 7px Nunito,sans-serif;letter-spacing:.1em;opacity:.85}
@keyframes fdflag{50%{transform:skewY(-4deg) scaleX(.94)}}
.fd-fleet{position:absolute;inset:0;z-index:1;pointer-events:none}
.fd-boat.other{scale:.52;transform-origin:0 100%;filter:saturate(.85) brightness(.95)}
.fd-boat.other .fd-mast .flag b{font-size:17px}
.fd-boat.other .fd-mast .flag{min-width:64px}
.fd-gulls{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.fd-gull{position:absolute;left:0;top:0}
.fd-gull svg{width:100%;height:auto;display:block;overflow:visible}
.fd-gull .wing{transform-origin:40px 21px;animation:fdgflap .32s ease-in-out infinite alternate}
@keyframes fdgflap{to{transform:scaleY(-.55)}}
.fd-gull.thief svg{animation:fdhover .9s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.fd-gull.thief .wing{animation-duration:.18s}
@keyframes fdhover{50%{transform:translateY(-6px)}}
.fd-boat .tip{position:absolute;left:158px;top:-24px;width:2px;height:2px}
.fd-line{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.fd-line path{fill:none;stroke:#f8fafc;stroke-width:1.6;opacity:.9}
.fd-hookw{position:absolute;left:0;top:0;width:28px;z-index:5;pointer-events:none}
.fd-hookw>.fd-hk{width:16px;height:22px;display:block;margin-left:6px;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.fd-hang{position:absolute;left:0;top:0;width:80px;opacity:0;transform:rotate(var(--r,0deg)) scale(.3);transition:opacity .2s}
.fd-hang.on{opacity:1;animation:fdflap .28s ease-in-out infinite alternate}
.fd-hang svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
@keyframes fdflap{from{transform:rotate(calc(var(--r,0deg) - 10deg))}to{transform:rotate(calc(var(--r,0deg) + 10deg))}}
.fd-bang{position:absolute;left:calc(4% + 112px);top:calc(var(--wl) - 112px);font:700 40px Fredoka,sans-serif;color:#facc15;text-shadow:0 3px 0 #b45309;opacity:0;transform:scale(.3);z-index:6;pointer-events:none}
.fd-bang.on{opacity:1;transform:scale(1);transition:transform .25s cubic-bezier(.34,1.56,.64,1);animation:fdshake .15s linear infinite}
@keyframes fdshake{50%{transform:rotate(8deg) scale(1.1)}}
.fd-splash{position:absolute;width:0;height:0;z-index:4;pointer-events:none}
.fd-splash b{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#e0f2fe;animation:fdsplash .7s ease-out forwards;transform:rotate(var(--a))}
@keyframes fdsplash{to{transform:rotate(var(--a)) translateX(34px) scale(.3);opacity:0}}
.fd-hookchip{position:absolute;right:8px;top:8px;z-index:6;display:flex;align-items:center;gap:6px;background:rgba(15,23,42,.72);border-radius:14px;padding:5px 10px 5px 6px;color:#fff}
.fd-hookchip .fd-hk{width:16px;height:22px}
.fd-hookchip b{display:block;font:600 13px Fredoka,sans-serif;line-height:1.1}
.fd-hookchip small{font-size:10.5px;font-weight:800;color:#bae6fd}
.fd-hookchip .dots{display:flex;gap:3px;margin-top:2px}
.fd-hookchip .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.fd-hookchip .dots i.on{background:#facc15}
.fd-fx{position:absolute;left:8px;bottom:8px;right:8px;z-index:6;display:flex;flex-wrap:wrap;gap:5px;pointer-events:none}
.fd-fx span{font-size:12.5px;font-weight:800;border-radius:999px;padding:4px 10px;background:rgba(15,23,42,.75);animation:fdpop .3s}
.fd-fx .x{background:#db2777}.fd-fx .r{background:#16a34a}.fd-fx .c{background:#0284c7}.fd-fx .s{background:#475569}.fd-fx .f{background:#ea580c}

/* leaderboard */
.fd-lb{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.fd-lb::-webkit-scrollbar{display:none}
.fd-lbr{flex:none;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);border-radius:999px;padding:4px 12px 4px 4px;font-size:14px}
.fd-lbr .n{width:24px;height:24px;border-radius:50%;background:#0284c7;display:grid;place-items:center;font-weight:900;font-size:13px}
.fd-lbr:first-child .n{background:#facc15;color:#713f12}
.fd-lbr b{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-lbr i{font-style:normal;font-weight:800;color:#fde047;font-variant-numeric:tabular-nums}
.fd-lbr em{font-style:normal}
.fd-lbr.me{background:rgba(250,204,21,.18);border-color:#facc15}
.fd-solo{display:flex;gap:6px;flex-wrap:wrap}
.fd-solo span{background:rgba(255,255,255,.1);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700;color:#e0f2fe}
.fd-solo b{color:#fde047}

/* the question */
.fd-qbox{background:#fff;color:var(--ink);border-radius:20px;padding:14px;box-shadow:0 6px 0 #082f49}
.fd-qbox.chal{box-shadow:0 0 0 4px #a855f7,0 6px 0 4px #581c87}
.qtag{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.08em}
.qtag .ch{background:linear-gradient(90deg,#7c3aed,#db2777);color:#fff;border-radius:999px;padding:4px 10px;letter-spacing:.03em;text-transform:none;font-size:13px}
.qtag .ls{white-space:nowrap}
.qtext{font-size:19px;font-weight:800;line-height:1.4;margin-bottom:12px}
.qopts{display:grid;gap:8px}
.qopt{appearance:none;display:flex;align-items:center;gap:10px;text-align:left;width:100%;background:#f0f9ff;border:3px solid #bae6fd;border-radius:14px;padding:11px 12px;font:700 17px Nunito,sans-serif;color:var(--ink);cursor:pointer;transition:transform .08s,border-color .12s}
.qopt b{flex:none;width:30px;height:30px;border-radius:50%;background:#0284c7;color:#fff;display:grid;place-items:center;font:600 15px Fredoka,sans-serif}
.qopt:hover:not(:disabled){border-color:#0284c7;transform:translateY(-1px)}
.qopt.right{background:#dcfce7;border-color:#16a34a}.qopt.right b{background:#16a34a}
.qopt.wrong{background:#fee2e2;border-color:#ef4444}.qopt.wrong b{background:#ef4444}
.qopt:disabled{cursor:default}
.qnum{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qnum .val{flex:1;min-height:52px;border:3px solid #0284c7;border-radius:14px;font:600 30px/46px Fredoka,sans-serif;text-align:right;padding:0 14px;color:var(--ink);font-variant-numeric:tabular-nums;background:#f0f9ff}
.qnum .unit{font-weight:800;color:#475569}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.key{appearance:none;border:0;border-radius:14px;background:#e2e8f0;box-shadow:0 4px 0 #94a3b8;font:600 24px Fredoka,sans-serif;color:var(--ink);padding:10px 0;cursor:pointer}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #94a3b8}
.key.go{background:#16a34a;color:#fff;box-shadow:0 4px 0 #14532d;font-size:19px;grid-column:span 2}
.key.wb{font-size:15px;background:#fef3c7;box-shadow:0 4px 0 #d97706}
.key:disabled{opacity:.5}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.qchip{appearance:none;border:3px solid #bae6fd;background:#f0f9ff;border-radius:999px;padding:9px 16px;font:700 17px Nunito,sans-serif;color:var(--ink);cursor:pointer}
.qchip.on{background:#0284c7;border-color:#0284c7;color:#fff}
.qchip.right{background:#dcfce7;border-color:#16a34a}.qchip.wrong{background:#fee2e2;border-color:#ef4444}
.qgo{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.qfb{border-radius:14px;padding:12px 14px;margin-top:12px;font-weight:700;line-height:1.5;font-size:16px}
.qfb.ok{background:#dcfce7;color:#14532d}
.qfb.no{background:#fff7ed;color:#7c2d12;border:2px solid #fdba74}
.qfb .why{margin-top:6px;color:var(--ink)}
.qwork{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.qwork div{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:6px 10px}
.qwork b{display:block;font:700 14px Fredoka,sans-serif;color:var(--blue)}
.qwork pre{margin:2px 0 0;font:600 15px/1.25 ui-monospace,Menlo,Consolas,monospace}
.col{display:inline-block;font:600 24px/1.25 Fredoka,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;border:2px solid #fde68a;border-radius:14px;padding:6px 14px 8px;margin-top:8px}
.col .ln{display:flex;justify-content:flex-end}
.col .c{display:inline-block;width:.64em;text-align:center}
.col .c.pt{width:.34em}.col .c.op{width:.9em;text-align:left;color:#5a6580}.col .c.ph{color:#f59e0b}
.col .tot{border-top:3px solid var(--ink);margin-top:3px;padding-top:2px;color:var(--green)}
.qtable{margin:6px 0 10px;overflow-x:auto}
.qtable .qtt{background:#7c3aed;color:#fff;font:700 14px Fredoka,sans-serif;padding:4px 8px;border-radius:8px 8px 0 0;text-align:center}
.qtable table{border-collapse:collapse;width:100%;font:700 13px Nunito,sans-serif;color:#17203b;background:#fff;font-variant-numeric:tabular-nums}
.qtable th,.qtable td{border:1px solid #cbd5e1;padding:3px 7px;text-align:right}
.qtable th{background:#f5f3ff;text-align:left}

/* the catch card */
.fd-over.catch{align-items:center;background:rgba(3,10,30,.8)}
.fd-over.catch .fd-overc{background:none;box-shadow:none;padding:0;max-width:400px}
.fd-catch{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--tg) 100%);border:5px solid var(--tc);border-radius:26px;padding:18px 16px 16px;text-align:center;box-shadow:0 10px 0 rgba(0,0,0,.35),0 0 60px var(--tc)}
.fd-catch .rays{position:absolute;left:50%;top:38%;width:600px;height:600px;margin:-300px 0 0 -300px;background:repeating-conic-gradient(from 0deg,var(--tg) 0 10deg,transparent 10deg 20deg);opacity:.55;animation:fdspin 14s linear infinite;pointer-events:none}
.fd-catch.t0 .rays{display:none}
@keyframes fdspin{to{transform:rotate(360deg)}}
.fd-catch>*{position:relative}
.fd-catch .fd-kick{background:#7c3aed;color:#fff}
.fd-catch .rib{display:inline-block;background:var(--tc);color:#fff;font:600 17px Fredoka,sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 18px;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.fd-catch .art{width:min(78vw,300px);margin:6px auto 0;animation:fdcatch .7s cubic-bezier(.34,1.56,.64,1)}
.fd-catch .art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
@keyframes fdcatch{from{transform:scale(.2) rotate(-30deg);opacity:0}}
.fd-catch.t5 .art,.fd-catch.t6 .art{animation:fdcatch .7s cubic-bezier(.34,1.56,.64,1),fdglow 1.6s ease-in-out .7s infinite}
@keyframes fdglow{50%{transform:scale(1.05);filter:drop-shadow(0 0 18px var(--tc))}}
.fd-catch h3{margin:2px 0 0;font:700 28px Fredoka,sans-serif;color:var(--ink)}
.fd-catch h3 em{font-style:normal;font-size:13px;vertical-align:middle;background:#ef4444;color:#fff;border-radius:999px;padding:3px 9px;letter-spacing:.06em}
.fd-catch .wt{font:600 22px Fredoka,sans-serif;color:#334155}
.fd-catch .wt b{font-size:40px;color:var(--tc);font-variant-numeric:tabular-nums}
.fd-catch .mult{font-size:14px;font-weight:800;color:#475569}
.fd-catch .mult span{display:inline-block;background:#fef3c7;color:#92400e;border-radius:999px;padding:2px 8px;margin:2px}
.fd-catch .prize:empty{display:none}
.fd-catch .pz{background:#fff;border:3px dashed #ca8a04;border-radius:16px;padding:10px;margin-top:10px;animation:fdpop .4s cubic-bezier(.34,1.56,.64,1)}
.fd-catch .pz b{display:block;font:600 20px Fredoka,sans-serif;color:#92400e}
.fd-catch .pz span{font-weight:700;color:#475569;font-size:14.5px}
.fd-catch .pz.spin b{animation:fdshake .2s linear infinite}
.fd-catch .pz.myst .a{width:140px;margin:0 auto}.fd-catch .pz.myst svg{width:100%;height:auto}
.fd-raid{display:grid;gap:6px;margin-top:10px}
.fd-raid>span{font-weight:800;color:#7f1d1d}
.fd-catch .go{margin-top:14px}

/* ---------- pass the device, lobby, waiting ---------- */
.fd-pass{display:flex;justify-content:center;padding-top:4vh}
.fd-passc{background:#fff;color:var(--ink);border-radius:26px;padding:22px 18px;max-width:480px;width:100%;text-align:center;box-shadow:0 8px 0 #082f49,0 20px 50px rgba(0,0,0,.4)}
.fd-passc h2{margin:0 0 6px;font:700 40px Fredoka,sans-serif;color:#0284c7;word-break:break-word}
.fd-passc p{font-weight:700;font-size:16px;line-height:1.45}
.fd-big{font:600 26px Fredoka,sans-serif;color:#475569}
.fd-passc .fd-btn.ghost{margin-top:12px}
.fd-standing{display:grid;gap:5px;margin-top:16px;text-align:left}
.fd-standing div{display:flex;align-items:center;gap:10px;background:#f1f5f9;border-radius:12px;padding:7px 12px;font-weight:800;color:var(--ink)}
.fd-standing span{width:24px;height:24px;border-radius:50%;background:#0284c7;color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.fd-standing b{flex:1}.fd-standing i{font-style:normal;color:#b45309}
.fd-standing .me{background:#fef3c7}
.fd-code{font:700 60px/1 Fredoka,sans-serif;letter-spacing:.18em;color:#0c4a6e;background:#e0f2fe;border-radius:18px;padding:12px 0 10px;margin:8px 0 12px}
.fd-lobby{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fd-lobby div{background:#f1f5f9;border-radius:999px;padding:6px 14px;font-weight:800}
.fd-lobby div.me{background:#fef3c7}
.fd-lobby span{margin-right:4px}
.fd-passc .fd-chips{justify-content:center}
.fd-spin{width:46px;height:46px;margin:10px auto;border-radius:50%;border:6px solid #e0f2fe;border-top-color:#0284c7;animation:fdspin 1s linear infinite}

/* ---------- results ---------- */
.fd-res{max-width:640px;margin:0 auto;text-align:center}
.fd-res h1{font:700 40px Fredoka,sans-serif;margin:6px 0 14px;text-shadow:0 3px 0 #0369a1}
.fd-solores{background:#fff;color:var(--ink);border-radius:24px;padding:18px;box-shadow:0 8px 0 #082f49}
.fd-solores .tot{font:700 58px/1 Fredoka,sans-serif;color:#ca8a04}
.fd-solores .tot small{font-size:22px;color:#92400e}
.fd-solores p{font-weight:800;color:#475569;margin:8px 0 0}
.fd-podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:6px}
.fd-podium .who{padding:0 2px 6px}
.fd-podium .who .a{width:90%;margin:0 auto}
.fd-podium .who svg{width:100%;height:auto;display:block}
.fd-podium .who b{display:block;font:600 18px Fredoka,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-podium .who span{font-weight:800;color:#fde047;font-size:15px}
.fd-podium .step{border-radius:14px 14px 0 0;font-size:34px;display:grid;place-items:center;padding-top:6px}
.fd-podium .p1 .step{height:120px;background:linear-gradient(#facc15,#ca8a04)}
.fd-podium .p2 .step{height:86px;background:linear-gradient(#e2e8f0,#94a3b8)}
.fd-podium .p3 .step{height:62px;background:linear-gradient(#fdba74,#c2410c)}
.fd-podium .me .who b{color:#fde047}
.fd-res .fd-standing div{background:rgba(255,255,255,.1);color:#fff}
.fd-res .fd-standing .me{background:rgba(250,204,21,.25)}
.fd-res .fd-standing i{color:#fde047}
.fd-bestc{display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(90deg,#fff,var(--tg));color:var(--ink);border:4px solid var(--tc);border-radius:20px;padding:8px 14px;margin:14px 0 0}
.fd-bestc .a{width:120px;flex:none}.fd-bestc svg{width:100%;height:auto;display:block}
.fd-bestc small{display:block;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.fd-bestc b{display:block;font:700 24px Fredoka,sans-serif}
.fd-bestc span{font-weight:800;color:var(--tc)}
.fd-locbest{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:14px}
.fd-locbest div{background:rgba(255,255,255,.1);border-radius:16px;padding:8px}
.fd-locbest svg{width:100%;height:auto;display:block}
.fd-locbest b{display:block;font:600 17px Fredoka,sans-serif}
.fd-locbest small{font-weight:700;color:#bae6fd}
.fd-h3{font:600 20px Fredoka,sans-serif;margin:18px 0 8px}
.fd-haul{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.fd-haul div{background:rgba(255,255,255,.08);border-bottom:4px solid var(--tc);border-radius:12px;padding:4px}
.fd-haul svg{width:100%;height:auto;display:block}
.fd-haul small{font-weight:800;font-size:11.5px;color:#fde047}

/* ---------- fisher avatars ---------- */
.fd-avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
.fd-av,.fd-pav{appearance:none;border:3px solid #e2e8f0;background:linear-gradient(180deg,#e0f2fe 0 62%,var(--bc) 62%);border-radius:16px;padding:4px 4px 0;cursor:pointer;overflow:hidden;transition:transform .12s,border-color .12s}
.fd-av svg,.fd-pav svg{width:100%;height:auto;display:block}
.fd-av:hover{transform:translateY(-2px)}
.fd-av.on{border-color:#0284c7;box-shadow:0 0 0 3px #bae6fd;transform:translateY(-2px)}
.fd-avname{text-align:center;font:600 15px Fredoka,sans-serif;color:#0369a1;margin-top:6px}
.fd-names{grid-template-columns:1fr}
.fd-prow{display:flex;gap:8px;align-items:center}
.fd-prow[hidden]{display:none}
.fd-pav{width:52px;flex:none}
.fd-prow .fd-in{flex:1;min-width:0}
.fd-passav{width:110px;margin:6px auto 0;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#e0f2fe 0 64%,var(--bc) 64%);padding:6px 6px 0}
.fd-passav svg{width:100%;height:auto;display:block}
.fd-lobby .av{display:inline-block;width:30px;vertical-align:middle;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#e0f2fe 0 62%,var(--bc) 62%)}
.fd-lobby .av svg{width:100%;height:auto;display:block}
.fd-lobby div{display:flex;align-items:center;gap:4px}

/* ---------- the seagull question ---------- */
.fd-qbox.gullq{box-shadow:0 0 0 4px #f59e0b,0 6px 0 4px #92400e;animation:fdgq .5s ease 2}
@keyframes fdgq{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.gullbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fef3c7;border-radius:14px;padding:8px 12px;margin-bottom:10px;font-weight:800;color:#92400e}
.gullbar span{flex:1;min-width:0}
.gullbar .gt{font:700 26px Fredoka,sans-serif;color:#dc2626;min-width:28px;text-align:center}
.gullbar i{flex-basis:100%;height:8px;border-radius:4px;background:#fde68a;overflow:hidden}
.gullbar u{display:block;height:100%;width:100%;background:linear-gradient(90deg,#dc2626,#f59e0b)}
.qfb.gone{background:#fee2e2;color:#7f1d1d;border:2px solid #fca5a5;margin-top:12px}

/* ---------- bigger screens: the sea on the left, the question on the right ---------- */
@media (min-width:900px){
  .fd-game{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"hud hud" "left q";align-items:start}
  .fd-hud{grid-area:hud}.fd-left{grid-area:left;position:sticky;top:76px}.fd-q{grid-area:q}
  .fd-sea{height:min(56vh,440px)}
  .fd-boat{transform-origin:50% 90%;left:6%}
  .qtext{font-size:21px}
}
@media (max-width:380px){
  .fd-boat{left:1%}
  .qtext{font-size:17px}
  .key{font-size:21px;padding:8px 0}
  .fd-lbs b{font-size:26px}
}

/* ---------- MEGA RARE ---------- */
.fd-toast.mega{background:linear-gradient(90deg,#ef4444,#f97316,#facc15,#22c55e,#3b82f6,#a855f7);font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.fd-catch.t8{border-color:transparent;background:linear-gradient(180deg,#fff,var(--tg)) padding-box,linear-gradient(90deg,#ef4444,#f97316,#facc15,#22c55e,#3b82f6,#a855f7,#ec4899) border-box;border-width:6px;animation:fdmega 2s linear infinite}
.fd-catch.t8 .rib{background:linear-gradient(90deg,#ef4444,#f97316,#facc15,#22c55e,#3b82f6,#a855f7);font-size:19px;animation:fdribbon 1s ease-in-out infinite alternate}
.fd-catch.t8 .art{animation:fdcatch .9s cubic-bezier(.34,1.56,.64,1),fdglow 1.2s ease-in-out .9s infinite}
.fd-catch.t8 .rays{opacity:.8;animation-duration:6s}
@keyframes fdmega{0%,100%{box-shadow:0 10px 0 rgba(0,0,0,.35),0 0 40px #f0abfc}50%{box-shadow:0 10px 0 rgba(0,0,0,.35),0 0 90px #fde047}}
@keyframes fdribbon{to{transform:scale(1.1)}}
.fd-confetti{position:fixed;inset:0;z-index:9400;pointer-events:none;overflow:hidden}
.fd-confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fdconf 3s linear forwards}
@keyframes fdconf{to{transform:translate(var(--x),110vh) rotate(720deg)}}
.fd-tiers div,.fd-book h3{position:relative}
.fd-book h3 small{font:800 12px Nunito,sans-serif;color:#94a3b8;margin-left:4px}
.fd-book h3.t8{background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.fd-bk{padding:4px}

/* ---------- SPEED ROUND: the Leaky Boat ---------- */
.fd-speedcard{appearance:none;display:block;width:100%;text-align:left;margin-top:14px;border:0;border-radius:18px;padding:14px 16px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#7c3aed);box-shadow:0 5px 0 #3b0764;position:relative;overflow:hidden}
.fd-speedcard b{display:block;font:600 19px Fredoka,sans-serif}
.fd-speedcard span{display:block;font-weight:700;font-size:14px;opacity:.9;margin-top:2px}
.fd-speedcard i{position:absolute;right:12px;top:12px;font-style:normal;font-weight:800;font-size:12px;background:#facc15;color:#713f12;border-radius:999px;padding:3px 9px}
.fd-speedcard::after{content:"⚡";position:absolute;right:-6px;bottom:-18px;font-size:70px;opacity:.18}
.fd-passc.speed .sp-h{color:#1d4ed8}
.sp-boatpic{position:relative;height:150px;margin:6px auto 4px;width:220px;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#7dd3fc 0,#e0f2fe 62%,#38bdf8 62%,#0369a1 100%)}
.sp-boatpic .fd-boat,.sp-boatpic .fd-boat.other{scale:1;filter:none;left:34px;top:38px;animation:fdrock 3s ease-in-out infinite}
.sp-drip{position:absolute;width:8px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#38bdf8;animation:spdrip 1.4s ease-in infinite}
.sp-drip.d1{left:86px;top:112px}.sp-drip.d2{left:140px;top:108px;animation-delay:-.7s}
@keyframes spdrip{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.sp-rules{text-align:left;margin:8px 0 12px;padding-left:20px;font-weight:700;line-height:1.5;font-size:15px}
.sp-best{background:#fef3c7;color:#92400e;border-radius:12px;padding:8px 12px;font-weight:800;margin-bottom:10px}
.sp-runs{text-align:left;margin-bottom:14px}
.sp-runs>div:not(.fd-lbl){display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#f1f5f9;margin-top:5px;font-size:14px}
.sp-runs .won{background:#dcfce7}.sp-runs .sunk{background:#fee2e2}
.sp-runs b{font:600 18px Fredoka,sans-serif;min-width:48px}
.sp-runs i{font-style:normal;font-weight:700;color:#475569;flex:1}
.sp-runs small{font-weight:700;color:#94a3b8;font-size:11px}
.fd-passc .fd-btn.big+.fd-btn.ghost{margin-top:10px}

.fd-game.speed .fd-hud .sp-acc b{color:#86efac}
.fd-game.speed .sp-count b{color:#fff;text-shadow:0 2px 0 #1e3a8a}
.fd-game.speed .sp-count i{color:#bae6fd}
.sp-sea{cursor:default}
.sp-sink{position:absolute;inset:0;z-index:2;transition:transform .25s linear;transform-origin:20% 40%}
.sp-sink .fd-boat{animation:fdrock 2.4s ease-in-out infinite}
.sp-holes{position:absolute;left:4%;top:calc(var(--wl) - 78px);width:150px;height:88px;z-index:5;pointer-events:none}
.sp-holes i{position:absolute;width:9px;height:7px;border-radius:50%;background:#0f172a;box-shadow:0 0 0 2px #451a03}
.sp-holes i::after{content:"";position:absolute;left:2px;top:-10px;width:5px;height:10px;border-radius:50%;background:#7dd3fc;animation:spspurt .6s ease-out infinite}
@keyframes spspurt{0%{transform:translateY(8px) scaleY(.3);opacity:0}50%{opacity:1}100%{transform:translateY(-6px) scaleY(1);opacity:0}}
.sp-bail{position:absolute;left:calc(4% + 80px);top:calc(var(--wl) - 60px);width:14px;height:14px;border-radius:50%;background:#7dd3fc;box-shadow:10px 4px 0 -3px #bae6fd,-6px 6px 0 -4px #bae6fd;z-index:6}
.sp-gauge{position:absolute;right:10px;top:10px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(15,23,42,.7);border-radius:12px;padding:6px 7px}
.sp-gauge i{position:relative;width:14px;height:60px;border-radius:7px;background:rgba(255,255,255,.2);overflow:hidden}
.sp-gauge u{position:absolute;left:0;right:0;bottom:0;height:10%;background:linear-gradient(0deg,#0284c7,#38bdf8);transition:height .3s}
.sp-gauge.hot u{background:linear-gradient(0deg,#dc2626,#f87171)}
.sp-gauge.hot{animation:fdhot .8s infinite}
.sp-shore{position:absolute;right:-8px;top:calc(var(--wl) - 30px);width:62px;height:44px;z-index:1}
.sp-shore .sand{position:absolute;left:0;right:0;bottom:0;height:26px;background:#fcd34d;border-radius:40px 0 0 0;box-shadow:inset 0 4px 0 #fde68a}
.sp-shore .palm{position:absolute;left:28px;bottom:20px;width:4px;height:30px;background:#92400e;border-radius:2px;transform:rotate(8deg)}
.sp-shore .palm::before{content:"🌴";position:absolute;left:-14px;top:-18px;font-size:26px;transform:rotate(-8deg)}
.sp-shore b{position:absolute;left:4px;bottom:3px;font:700 11px Fredoka,sans-serif;color:#92400e}
.sp-prog{display:flex;align-items:center;gap:10px}
.sp-prog i{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden}
.sp-prog u{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#facc15);transition:width .2s}
.sp-prog span{font-weight:800;font-size:13px;white-space:nowrap}
.sp-prog span.ok{color:#86efac}.sp-prog span.no{color:#fca5a5}
.sp-q{text-align:center}
.sp-fact{display:flex;justify-content:center;align-items:center;gap:12px;font:700 54px/1.1 Fredoka,sans-serif;color:var(--ink);min-height:70px}
.sp-fact em{font-style:normal;color:#64748b;font-size:40px}
.sp-cd{font-size:70px;color:#7c3aed;animation:fdpop .4s cubic-bezier(.34,1.56,.64,1)}
.sp-ans{margin:6px auto 4px;max-width:220px;height:62px;border:4px solid #0284c7;border-radius:16px;background:#f0f9ff;font:700 44px/54px Fredoka,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-ans.ok{border-color:#16a34a;background:#dcfce7}
.sp-ans.no{border-color:#dc2626;background:#fee2e2;animation:fdgq .3s ease 2}
.sp-fb{min-height:26px;font-weight:800;font-size:18px;color:#b91c1c}
.sp-fb:empty::after{content:"\00a0"}
.sp-keys{grid-template-columns:repeat(3,1fr);max-width:420px;margin:4px auto 0}
.sp-keys .key{font-size:28px;padding:12px 0}
.sp-keys .key.go{grid-column:auto}
.fd-res.speed .sp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.sp-stats div{background:#f1f5f9;border-radius:12px;padding:8px}
.sp-stats b{display:block;font:700 22px Fredoka,sans-serif;color:#1d4ed8}
.sp-stats small{font-weight:700;color:#64748b;font-size:11.5px}
.sp-miss{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.sp-miss div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px}
.sp-miss b{display:block;font:600 19px Fredoka,sans-serif;color:#fde047}
.sp-miss small{font-weight:700;color:#fca5a5}
@media (max-width:899px){.fd-game.speed .fd-sea{height:clamp(200px,26vh,260px)}}