/* Bigger Fish. The painted reef carries the colour; the chrome stays deep water, paper and gold. */
@font-face{font-family:Archivo;src:url('/game/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#eef4ec;--muted:#bcd3d2;--plate:#06202ab8;--gold:#f2d892;--threat:#ff9b86;--edge:28px;--glass:#04202bcc;--line:#d6eeee30}
html,body{margin:0;height:100%;background:#04131d;overflow:hidden}
body{color:var(--ink);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
.reef{position:fixed;inset:0;isolation:isolate}
#sea{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
/* A soft vignette keeps the HUD corners and the bottom edge quiet. */
.reef::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 58%,#021018a0 100%),linear-gradient(transparent 82%,#02101870)}
.reef[data-phase=done] #sea,.reef[data-phase=paused] #sea{filter:saturate(.8) brightness(.85);transition:filter .6s}

.back,.tools{position:absolute;top:max(18px,env(safe-area-inset-top));z-index:5;font-size:12px}
.back{left:var(--edge);text-decoration:none;color:#eef4ec;letter-spacing:.03em;padding:10px 14px;border-radius:99px;border:1px solid var(--line);background:#04202bcc;backdrop-filter:blur(10px)}
.tools{right:var(--edge);display:flex;gap:10px}
.tools button{border:1px solid var(--line);background:#051f2b66;border-radius:99px;min-height:40px;padding:8px 14px;backdrop-filter:blur(10px)}
.reef[data-phase=playing] .back{display:none}

/* ---- HUD ---------------------------------------------------------------------------------- */
.hud{position:absolute;z-index:3;top:max(18px,env(safe-area-inset-top));pointer-events:none;transition:opacity .4s;text-shadow:0 1px 8px #021018}
/* Each HUD cluster sits on its own dark glass plate, as the reef's panels do: the bright surface water
   runs right under the HUD, and bare text on it measured 1.3:1. */
.hud-size,.hud-time,.hud-score{background:var(--plate);border:1px solid var(--line);border-radius:14px;padding:10px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.reef:not([data-phase=playing]) .hud{opacity:0}
.hud-label{display:block;font:700 10px var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.hud-size{left:var(--edge);width:182px}
.sizes{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.sizes li{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;border:1px solid #d6eeee55;color:#bcd3d2;background:#021219;transition:all .35s var(--ease-out,ease)}
.sizes li.done{background:var(--gold);border-color:var(--gold);color:#13303a}
.sizes li.now{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 3px #f2d89233;transform:scale(1.12)}
/* The dot that just filled rings out once. */
.sizes li.ring{animation:dot-ring .9s var(--ease-out,ease-out)}
@keyframes dot-ring{0%{box-shadow:0 0 0 0 #f2d892ee}60%{box-shadow:0 0 0 12px #f2d89200}100%{box-shadow:0 0 0 3px #f2d89233}}
.grow{position:relative;margin-top:9px;height:6px;border-radius:9px;background:#021219;border:1px solid #d6eeee30;overflow:hidden}
/* What being eaten took from the bar, shown in red as it runs out. */
.grow s{position:absolute;top:0;bottom:0;left:0;width:0;background:#ff8a74}
.grow i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2d892,#ffeec4);border-radius:9px;transition:width .2s}
.grow.full i{background:linear-gradient(90deg,#9fe7d8,#e6fff6)}
.lives{display:flex;gap:6px;margin:10px 0 0}
.lives b{width:16px;height:9px;border-radius:50% 40% 40% 50%;background:var(--ink);position:relative;opacity:.95}
.lives b::after{content:'';position:absolute;right:-6px;top:1px;border:4px solid transparent;border-left:6px solid var(--ink)}
.lives b.gone{opacity:.18}
.hud-time{left:50%;translate:-50% 0;text-align:center}
.hud-time b{font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hud-time.late b{color:var(--gold)}
.hud-score{right:var(--edge);text-align:right;top:max(70px,calc(env(safe-area-inset-top) + 64px))}
.hud-score b{font-size:28px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block}
.streak{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px;transition:opacity .3s}
/* With no streak the pips stay dim, so the plate never sits empty. */
.streak[data-idle]{opacity:.6}
.streak span{font-weight:800;font-size:15px;color:var(--muted);min-width:2.2ch;transition:color .2s,transform .2s}
.streak[data-mult="2"] span{color:#9fe7d8;font-size:24px}.streak[data-mult="3"] span{color:var(--gold);font-size:28px}
.streak ol{display:grid;grid-template-columns:repeat(4,12px);gap:3px;margin:0;padding:0;list-style:none}
.streak li{height:9px;border-radius:2px;background:#d6eeee33}
.streak li.on{background:#9fe7d8}.streak li.on.high{background:var(--gold)}

/* ---- in the water --------------------------------------------------------------------------- */
.tags,.edges,.pops{position:absolute;inset:0;z-index:2;pointer-events:none}
.pop{position:absolute;left:0;top:0;font-weight:800;font-size:15px;color:#f4fbf6;text-shadow:0 1px 6px #021018,0 0 2px #021018;will-change:transform,opacity;animation:pop .8s var(--ease-out,ease-out) forwards}
/* A bite's points, sized to what went down, teal at first and gold on a streak, with a punch. */
.pop.bite{color:#a8f0e2;font-size:22px;text-shadow:0 2px 10px #021018,0 0 3px #021018;animation:punch .95s var(--ease-out,ease-out) forwards}
.pop.bite.c1{font-size:26px}.pop.bite.c2{font-size:30px}.pop.bite.c3{font-size:34px}
.pop.bite.x2{color:#c6fff2}.pop.bite.x3{color:var(--gold)}
@keyframes punch{from{opacity:0;translate:-50% 4px;scale:.6}14%{opacity:1;scale:1.1}30%{scale:1}75%{opacity:1}to{opacity:0;translate:-50% -36px;scale:1}}
.pop.big{font-size:24px;color:var(--gold)}
/* Growing a size: the run's loudest beat. Gold, full strength, above your fish, held for a second. */
.pop.grown{font-size:34px;font-weight:800;color:var(--gold);white-space:nowrap;letter-spacing:-.01em;text-shadow:0 2px 14px #021018,0 0 3px #021018;animation:grown 1.5s var(--ease-out,ease-out) forwards}
.pop.grown small{display:block;margin-top:-2px;text-align:center;font-size:16px;color:#ffeec4}
@keyframes grown{from{opacity:0;translate:-50% 8px;scale:.6}10%{opacity:1;scale:1.14}22%{scale:1}80%{opacity:1;translate:-50% -8px}to{opacity:0;translate:-50% -22px}}
/* What got you, named where it happened, held through the hit-stop. */
.pop.got{font-size:20px;color:#ffd9cf;white-space:nowrap;text-align:center;text-shadow:0 1px 10px #2b0503,0 0 3px #2b0503;animation:got 1.7s var(--ease-out,ease-out) forwards}
.pop.got small{display:block;margin-top:2px;font-size:14px;font-weight:700;color:#f4fbf6}
@keyframes got{from{opacity:0;translate:-50% 6px;scale:.8}12%{opacity:1;scale:1.06}70%{opacity:1;translate:-50% -10px;scale:1}to{opacity:0;translate:-50% -26px}}
@keyframes pop{from{opacity:0;translate:-50% 0;scale:.7}15%{opacity:1;scale:1.08}to{opacity:0;translate:-50% -34px;scale:1}}
/* The streak's step up shows under the score, off the water your fish is in. */
.mult-pop{position:absolute;z-index:3;right:var(--edge);top:max(168px,calc(env(safe-area-inset-top) + 160px));margin:0;transform-origin:100% 50%;font-size:clamp(44px,5vw,68px);font-weight:800;letter-spacing:-.04em;color:var(--gold);text-shadow:0 6px 30px #02101899;opacity:0;pointer-events:none}
.mult-pop.on{animation:mult 1s var(--ease-out,ease-out)}
@keyframes mult{0%{opacity:0;scale:.6}20%{opacity:1;scale:1.1}70%{opacity:1;scale:1}100%{opacity:0;scale:1.05}}
.tag{position:absolute;left:0;top:0;padding:3px 8px;border-radius:4px;background:#021f29d9;border:1px solid #f2d89255;color:#f6eed6;font-size:11px;white-space:nowrap;will-change:transform;transition:opacity .3s}
.tag small{color:#bcd3d2;margin-left:5px}
/* Edge markers: a triangle pointing at the edge a threat is coming from, its glow baked into the image
   (a CSS filter here re-rasterised every frame and halved the frame rate while they showed). Moved by
   transform only. */
.edge{position:absolute;top:0;width:40px;height:40px;margin-top:-20px;background:no-repeat center/contain;will-change:transform}
.edge.left{left:-2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cfilter id='g' x='-1' y='-1' width='3' height='3'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='13,20 28,11 28,29' fill='%23ff6e5a' filter='url(%23g)'/%3E%3Cpolygon points='13,20 28,11 28,29' fill='%23ff9b86'/%3E%3C/svg%3E")}
.edge.right{right:-2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cfilter id='g' x='-1' y='-1' width='3' height='3'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='27,20 12,11 12,29' fill='%23ff6e5a' filter='url(%23g)'/%3E%3Cpolygon points='27,20 12,11 12,29' fill='%23ff9b86'/%3E%3C/svg%3E")}
/* A round arrival beacon leaves travel direction to the lane arrows. */
.edge.tank{width:54px;height:54px;margin-top:-27px;background-image:radial-gradient(circle,#ffb9a8 0 16%,#ff9b8677 18%,transparent 60%)}
.edge.tank.left{left:-6px}
.edge.tank.right{right:-6px}
/* The screen's edge flushes red when something eats you. */
.hurt{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,#b3130acc 100%)}
.hurt.on{animation:hurt .75s ease-out}
@keyframes hurt{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.stick{position:absolute;z-index:4;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:1px solid #e9f6f344;background:#03202b38;pointer-events:none}
.stick i{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border-radius:50%;background:#e9f6f355;border:1px solid #e9f6f399}
.warning{position:absolute;z-index:3;left:50%;top:max(86px,calc(env(safe-area-inset-top) + 80px));translate:-50% 0;margin:0;padding:9px 18px;border-radius:99px;background:#2b0f0bd9;border:1px solid #ffb9a866;color:#ffe6dc;font-weight:700;font-size:15px;letter-spacing:.01em;pointer-events:none;animation:warn 1s ease-in-out infinite alternate}
@keyframes warn{from{box-shadow:0 0 0 0 #ff8a7400}to{box-shadow:0 0 30px 4px #ff8a7455}}
/* When your fish swims under the pill, it steps down to the bottom of the screen. */
.warning.low{top:auto;bottom:max(34px,env(safe-area-inset-bottom))}
.say{position:absolute;z-index:3;left:50%;bottom:max(34px,env(safe-area-inset-bottom));translate:-50% 0;margin:0;padding:8px 16px;border-radius:99px;background:var(--glass);border:1px solid var(--line);font-size:14px;white-space:nowrap;opacity:0;transition:opacity .3s,translate .3s;pointer-events:none}
.say.on{opacity:1;translate:-50% -6px}
.say.gold{border-color:#f2d89277;color:var(--gold)}
/* One message at a time: Tank's warning takes the stage. */
.warning:not([hidden])~.say{opacity:0;visibility:hidden}
.reef:not([data-phase=playing]) :is(.tags,.edges,.pops,.say,.banner){display:none}
/* A size-up: a banner across the water for a moment, gold, with what it means under it. Clear of the
   HUD and of Tank's warning pill, so nothing hides it. */
.banner{position:absolute;z-index:3;left:50%;top:30%;translate:-50% -50%;transition:top .35s var(--ease-out,ease-out);margin:0;text-align:center;pointer-events:none;opacity:0;white-space:nowrap;text-shadow:0 4px 28px #021018,0 0 3px #021018}
.banner b{display:block;font-size:clamp(48px,7vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--gold)}
.banner small{display:block;margin-top:10px;font-size:clamp(15px,1.5vw,19px);font-weight:600;color:#ffeec4;white-space:normal;max-width:30ch;margin-inline:auto}
.banner.full small{font-size:clamp(19px,1.95vw,25px);max-width:34ch;padding:6px 16px;border-radius:14px;background:#021018b0;text-shadow:none}
.banner.full b{font-size:clamp(64px,10vw,140px);background:linear-gradient(#fff6d6,#f2d892 55%,#e0a94c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 22px #021018)}
.banner.on{animation:banner 1.9s var(--ease-out,ease-out) forwards}.banner.full.on{animation-duration:2.2s}
/* In the lower half when your fish (or a fish that could eat you) is in the upper (bigger-fish.js bannerClear). */
.banner.low{top:68%}
@keyframes banner{0%{opacity:0;scale:.55}9%{opacity:1;scale:1.12}18%{scale:1}82%{opacity:1;scale:1}100%{opacity:0;scale:1.04}}
@media (prefers-reduced-motion:reduce){.banner.on{animation:none;opacity:1}}

/* ---- cards ---------------------------------------------------------------------------------- */
[data-when]{display:none}
.reef[data-phase=loading] [data-when~=loading],.reef[data-phase=ready] [data-when~=ready],.reef[data-phase=paused] [data-when~=paused],.reef[data-phase=done] [data-when~=done]{display:grid}
.card{box-sizing:border-box;position:absolute;z-index:4;inset:auto 0 0;padding:80px 24px max(30px,env(safe-area-inset-bottom));justify-items:center;text-align:center;gap:16px;background:linear-gradient(transparent,#021018b0 24%,#021018ee);max-height:calc(100% - 64px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.eyebrow{margin:0;font:700 11px var(--font-mono,ui-monospace,monospace);letter-spacing:.18em;color:var(--gold)}
.card h1{margin:0;font-size:clamp(56px,8vw,112px);font-weight:560;letter-spacing:-.06em;line-height:1}
.card h1 span{display:block;margin-top:12px;font-size:clamp(16px,1.9vw,22px);font-weight:380;letter-spacing:-.01em;color:#e2e6d9}
.rules{margin:0;max-width:62ch;font-size:15px;line-height:1.55;color:#dfe8e2}
.quick-rules{margin:0;max-width:48ch;font-size:14px;line-height:1.5;color:#dfe8e2}
.how-to-play{width:min(540px,100%);font-size:13px;color:var(--muted)}
.how-to-play summary{cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:3px}
.how-to-play[open]{padding-bottom:8px}
.how-to-play .rules{margin:8px auto 12px;text-align:left}
.how-to-play .fine{text-align:left}
.demo-note{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
/* The end card takes focus for screen readers only; the buttons keep the visible focus. */
#end:focus{outline:none}
.credit{width:min(440px,100%)}
.credit .game-buyin{margin:0;max-width:none;background:#03202bb8;border-color:#d6eeee30}
/* The reef stays dark even when the shared purse follows a light system theme. */
.reef .credit .game-buyin-entry,.reef .credit .game-buyin-prizes strong{color:var(--gold)}
/* On the end card the block is the price, your balance, any shortfall and the refill: the prize
   table is on the start card. */
.credit-end .game-buyin-kicker,.credit-end .game-buyin-prizes{display:none}
.credit-end.settled .game-buyin-status{display:none}
.go{border:0;border-radius:99px;padding:14px 38px;min-height:50px;background:var(--gold);color:#13303a;font-weight:800;font-size:16px;letter-spacing:.01em;box-shadow:0 10px 30px #00000055}
.go:disabled{opacity:.6;cursor:default}
.text-button{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:10px;font-size:14px}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.how{margin:0;font-size:12px;color:var(--muted)}
.touch-help{display:none}
@media (pointer:coarse){.desktop-help{display:none}.touch-help{display:block}}
.fine{margin:0;max-width:78ch;font-size:12px;line-height:1.5;color:#b4c9c7}
.pause-card{position:absolute;z-index:4;inset:0;place-content:center;justify-items:center;gap:10px;background:#021018a6;text-align:center}
.pause-card h2{margin:0;font-size:clamp(40px,5vw,64px);font-weight:520;letter-spacing:-.05em}
.pause-card p{margin:0 0 8px;color:var(--muted)}
.card-end h2{margin:0;font-size:clamp(38px,5.4vw,72px);font-weight:540;letter-spacing:-.05em;line-height:1.05}
.card-end .lead{margin:0;max-width:52ch;color:#e2e6d9;font-size:17px;line-height:1.5}
.end-stats{display:grid;grid-template-columns:repeat(4,auto);gap:6px 28px;margin:4px 0}
.end-stats div{display:grid;gap:2px}.end-stats dt{font:700 10px var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;color:var(--muted)}.end-stats dd{margin:0;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.prize{margin:0;font-size:16px;color:var(--gold);font-weight:700}

@media (max-width:700px){
 :root{--edge:16px}
 .hud-size{width:148px}.sizes li{width:24px;height:24px;font-size:11px}.sizes{gap:4px}
 /* Phone: one compact strip. Size, bar, lives and time on the left; score and streak on the right. */
 .hud-label{display:none}
 .hud-size,.hud-time,.hud-score{padding:6px 10px;border-radius:12px}
 .hud-size{top:max(12px,env(safe-area-inset-top));width:112px}.grow{margin-top:6px}.lives{margin-top:6px}.lives b{width:12px;height:7px}
 .hud-time{left:var(--edge);translate:none;top:max(96px,calc(env(safe-area-inset-top) + 84px))}.hud-time b{font-size:15px}
 .tools{top:max(12px,env(safe-area-inset-top));gap:6px}
 .hud-score{top:max(62px,calc(env(safe-area-inset-top) + 50px))}.hud-score b{font-size:20px}.streak{margin-top:2px}
 .tools button{min-height:40px;padding:5px 12px;font-size:12px}
 .reef[data-phase=playing] #sound{max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .streak ol{grid-template-columns:repeat(4,9px);gap:2px}.streak li{height:7px}
 .mult-pop{top:max(118px,calc(env(safe-area-inset-top) + 108px));font-size:40px}
 .rules{font-size:13px;line-height:1.5}
 .card{gap:12px;padding:46px 16px max(22px,env(safe-area-inset-bottom))}.card h1{font-size:54px}.card h1 span{font-size:16px}
 .end-stats{grid-template-columns:repeat(2,auto)}
 .warning{font-size:13px;top:max(120px,calc(env(safe-area-inset-top) + 110px));width:max-content;max-width:calc(100% - 40px);text-align:center;white-space:normal}
 /* Portrait phone: the thumb steers from the lower half, so every message keeps to the top third:
    toasts just under the HUD, and Tank's warning steps down to the middle of the top half (not to
    the bottom) when your fish swims under it. A bite's points shrink to stay off your small fish. */
 .say{font-size:13px;bottom:auto;top:max(150px,calc(env(safe-area-inset-top) + 140px))}
 .warning.low{bottom:auto;top:max(220px,calc(env(safe-area-inset-top) + 210px))}
 .pop.bite{font-size:18px}.pop.bite.c1{font-size:19px}.pop.bite.c2{font-size:21px}.pop.bite.c3{font-size:23px}
 .pop.grown{font-size:26px}
}
@media (max-height:640px) and (min-width:701px){.quick-rules{font-size:13px}.card{gap:10px;padding-top:40px}.card h1{font-size:64px}}
/* A phone on its side: the compact phone HUD on one short strip, and a compact start card. */
@media (max-height:500px) and (pointer:coarse){
 :root{--edge:max(16px,env(safe-area-inset-left))}
 .hud-label{display:none}
 .back,.tools,.hud{top:max(10px,env(safe-area-inset-top))}
 .hud-size,.hud-time,.hud-score{padding:5px 10px;border-radius:12px}
 .hud-size{width:auto;display:flex;align-items:center;gap:10px}.sizes{gap:4px}.sizes li{width:22px;height:22px;font-size:11px}
 .grow{margin:0;width:70px}.lives{margin:0}.lives b{width:12px;height:7px}
 .hud-time{left:50%;translate:-50% 0;top:max(12px,env(safe-area-inset-top))}.hud-time b{font-size:16px}
 .hud-score{top:max(10px,env(safe-area-inset-top));right:calc(var(--edge) + 150px);display:flex;align-items:center;gap:10px}.hud-score b{font-size:18px}.streak{margin:0}
 .tools{right:max(16px,env(safe-area-inset-right))}.tools button{min-height:40px;padding:5px 12px;font-size:12px}
 .streak ol{grid-template-columns:repeat(4,9px);gap:2px}.streak li{height:7px}
 .mult-pop{top:max(60px,calc(env(safe-area-inset-top) + 52px));font-size:34px}
 .warning{font-size:13px;top:max(56px,calc(env(safe-area-inset-top) + 50px));padding:7px 14px}
 .warning.low{bottom:max(14px,env(safe-area-inset-bottom))}
 .say{font-size:13px;bottom:max(14px,env(safe-area-inset-bottom))}
 .card{gap:8px;padding:28px 24px max(14px,env(safe-area-inset-bottom))}.card h1{font-size:44px}.card h1 span{font-size:15px;margin-top:6px}
 .quick-rules{font-size:13px}.desktop-help,#you-are{display:none}.touch-help{display:block}.fine{font-size:11px}
 #start{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title demo" "title credit" "rules credit" "details actions" "help help";column-gap:24px}
 #start .eyebrow{display:none}
 #start h1{grid-area:title}
 #start .quick-rules{grid-area:rules}
 #start .how-to-play{grid-area:details}
 #start .demo-note{grid-area:demo}
 #start .credit{grid-area:credit;align-self:start}
 #start .actions{grid-area:actions}
 #start .touch-help{grid-area:help}
 .credit .game-buyin{padding-block:8px}
 .card-end h2{font-size:34px}.card-end .lead{font-size:14px}.end-stats dd{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.warning,.mult-pop.on{animation:none}.say,.sizes li{transition:none}}