:root{
  --ink:#1a1028; --night:#2b1840; --plum:#4a2358; --mauve:#7b3f6e;
  --orange:#ff8a3d; --peach:#ffc27a; --pink:#ff6f91; --sun:#ffd76a;
  --teal:#1fa3a3; --teal-d:#0d4f5c; --teal-l:#6fe0d0; --cream:#fff1d6;
  --pond-water:#0d4f5c; --pond-accent:#1fa3a3;
  --px:4px;
  --font:'Press Start 2P', ui-monospace, 'Courier New', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--cream); font-family:var(--font);
  font-size:12px; line-height:1.7; background:var(--night);
  -webkit-font-smoothing:none; overflow-x:hidden;
}
img{image-rendering:pixelated; image-rendering:crisp-edges; max-width:100%; display:block}
canvas{image-rendering:pixelated}
button,a{font-family:inherit}
.hidden{display:none !important}

/* solid dark purple with subtle pixel pattern */
.bg-pattern{position:fixed; inset:0; z-index:-1; background:var(--night)}
.bg-pattern::after{content:""; position:absolute; inset:0;
  background-image:radial-gradient(#ffffff11 1px, transparent 1.5px); background-size:32px 32px; opacity:.6}

/* pixel frame helper */
.panel,.site-header,.modal-box,.site-footer{
  background:#2b1840ee;
  box-shadow:
    0 calc(-1*var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink),
    calc(-1*var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink),
    inset var(--px) var(--px) 0 0 #ffffff14, inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 #00000040;
}

.site-header{max-width:1280px; margin:20px auto 0; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; width:calc(100% - 32px)}
.brand{display:flex; align-items:center; gap:16px; color:inherit; text-decoration:none; min-width:0}
.brand-logo{width:72px; height:72px; flex:none; border-radius:50%; animation:bob 3s steps(6) infinite}
.brand-text{display:flex; flex-direction:column; gap:8px; min-width:0}
.brand-name{font-size:34px; line-height:1; color:var(--sun); text-shadow:4px 4px 0 var(--ink), -2px -2px 0 var(--orange); letter-spacing:2px}
.brand-tag{font-size:10px; color:var(--peach); line-height:1.6}
.icon-btn{flex:none; background:var(--plum); color:var(--cream); border:0; padding:10px 10px; font-size:10px; cursor:pointer; box-shadow:0 4px 0 var(--ink)}
.icon-btn[aria-pressed=false]{opacity:.6}

.ca-pill{position:relative; flex:none; display:flex; align-items:center; gap:8px; background:var(--plum); color:var(--cream); border:0; cursor:pointer; padding:10px 12px; font-size:9px; min-width:0;
  box-shadow:inset 0 -3px 0 var(--ink), 0 0 0 2px var(--sun); transition:background .12s}
.ca-pill:hover,.ca-pill:focus-visible{background:var(--mauve)}
.ca-pill:focus-visible{outline:3px dashed var(--teal-l); outline-offset:4px}
.ca-pill-label{color:var(--sun)}
.ca-short{color:var(--peach); letter-spacing:1px; white-space:nowrap}
.ca-pill-icon{flex:none; color:var(--sun)}
.ca-tip{position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,-4px); z-index:5; background:var(--night); color:var(--cream);
  padding:8px 10px; font-size:8px; white-space:nowrap; box-shadow:0 0 0 2px var(--orange), 0 4px 0 2px var(--ink);
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; pointer-events:none}
.ca-pill:hover .ca-tip,.ca-pill:focus-visible .ca-tip{opacity:1; visibility:visible; transform:translate(-50%,0)}

main{max-width:1280px; margin:0 auto; padding:24px 16px; display:grid; gap:28px}
.panel{padding:20px}
h2{font-size:14px; margin:0 0 14px; color:var(--sun); text-shadow:2px 2px 0 var(--ink)}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.panel-head h2{margin:0}

/* ===== game layout ===== */
.game{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px; align-items:stretch}

/* pond wrapper: the hero, ~60-65% width, tall */
.pond-wrap{position:relative; display:flex; flex-direction:column}
.pond{position:relative; overflow:hidden; background:var(--pond-water);
  aspect-ratio:3/2; width:100%;
  --bobber-x: 66%; --bobber-y: 78%;
  box-shadow:0 0 0 4px var(--ink), 0 0 0 8px var(--peach), 0 0 0 12px var(--ink); transition:background .4s}
.scene-layer{position:absolute; left:0; top:44%; width:100%; aspect-ratio:1; transform:translateY(-50%)}
.pond-img{display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; transition:opacity 0.2s}

/* slim tab bar sitting directly on top of the pond frame */
.spot-tabs{display:flex; gap:6px; margin-bottom:8px; height:44px}
.spot-tab{flex:0 1 auto; min-width:0; background:var(--plum); color:var(--cream); border:0; cursor:pointer;
  font-size:10px; padding:0 16px; display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:inset 0 -3px 0 var(--ink), 0 0 0 2px var(--ink); transition:background .12s; white-space:nowrap}
.spot-tab.active{background:var(--orange); color:var(--ink); box-shadow:inset 0 -3px 0 var(--ink), 0 0 0 2px var(--sun)}
.spot-tab:hover:not(.active):not(:disabled){background:var(--mauve)}
.spot-tab.locked:hover{background-image:var(--tab-bg); background-size:cover; background-position:center 50%; opacity:.55}
.spot-tab:disabled{opacity:.4; cursor:not-allowed}
.spot-tab .lock{font-size:12px; line-height:1}
.spot-tab small{font-size:8px; color:var(--peach); font-weight:normal}
.spot-tab.active small{color:var(--ink)}

/* pond status: slim one-line strip pinned to the very bottom */
.pond-status{position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:linear-gradient(0deg,#1a1028ee,#1a1028aa 60%,transparent);
  padding:8px 16px 8px; font-size:10px; line-height:1.4; color:var(--cream);
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; justify-content:center}

/* BITE state: overlays share the covered image's square coordinate space */
.image-overlay{position:absolute; inset:0; z-index:2; pointer-events:none}
.bite-splash{position:absolute; left:var(--bobber-x); top:var(--bobber-y); width:5%; aspect-ratio:1; z-index:2; opacity:0; transform:translate(-50%,-50%)}
.pond.ready .bite-splash{opacity:1; animation:biteSplash .45s steps(4) infinite}
.bite-splash::before{content:''; position:absolute; inset:0; border:3px solid #bff6ee; border-radius:50%; animation:biteRipple .45s steps(4) infinite}
.bite-splash::after{content:''; position:absolute; left:50%; top:-20%; width:12%; height:22%; background:#bff6ee; border-radius:50%; transform:translateX(-50%)}

@keyframes biteSplash{0%{transform:translate(-50%,-50%) scale(.8)}50%{transform:translate(-50%,-42%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(.8)}}
@keyframes biteRipple{0%{opacity:.9; transform:scale(.7)}100%{opacity:0; transform:scale(2)}}

/* caught-on-line sprite shown after reeling, until card closes */
.catch-line{position:absolute; left:54%; top:52%; z-index:3; pointer-events:none; opacity:0; transform:translate(-50%, -100%); transition:opacity .25s}
.catch-line.show{opacity:1; animation:lineSwing 2s ease-in-out infinite}
.catch-line img{display:block; width:72px; height:auto; image-rendering:pixelated; filter:drop-shadow(0 4px 0 #1a1028aa)}

/* splash burst when the catch appears */
.splash{position:absolute; left:54%; top:52%; z-index:2; pointer-events:none; opacity:0; width:0; height:0}
.splash.show{animation:splashBurst .5s steps(4) forwards}
.splash::before,.splash::after{content:''; position:absolute; left:0; top:0; width:10px; height:10px; background:var(--pond-accent); border-radius:50%}
.splash::before{transform:translate(-20px,-16px)}
.splash::after{transform:translate(10px,-22px)}

@keyframes lineSwing{0%,100%{transform:translate(-50%,-100%) rotate(-3deg)}50%{transform:translate(-50%,-100%) rotate(3deg)}}
@keyframes splashBurst{0%{opacity:1; transform:scale(.4)}100%{opacity:0; transform:scale(2.2)}}

.zzz{position:absolute; left:30%; top:24%; font-size:20px; color:var(--cream); text-shadow:2px 2px 0 var(--ink); z-index:2; opacity:0; transition:opacity .3s; pointer-events:none}
.zzz span{display:inline-block; animation:zz 3s steps(6) infinite}
.zzz span:nth-child(2){animation-delay:1s; font-size:24px}.zzz span:nth-child(3){animation-delay:2s; font-size:30px}
.bite{position:absolute; left:var(--bobber-x); top:calc(var(--bobber-y) - 11%); font-size:42px; color:var(--sun); text-shadow:3px 3px 0 var(--ink); background:none; animation:biteJump .5s steps(2) infinite; z-index:3; opacity:0; transition:opacity .3s; pointer-events:none; transform:translateX(-50%)}
.pond.casting .zzz{opacity:1}
.pond.ready .bite{opacity:1}
.pond.ready .pond-img{animation:shake .3s steps(2) infinite}

/* ===== controls column ===== */
.controls{display:flex; flex-direction:column; align-items:stretch; gap:16px; text-align:center; padding:20px; height:100%}
.controls>.state-label,.controls>.timer,.controls>.progress,.controls>.hint,.controls>.big-btn,.controls>.rod-panel{flex:none}
.controls>.stats{margin-top:auto}
.controls>.streak{flex:none; margin-top:8px}
.state-label{font-size:14px; color:var(--teal-l); letter-spacing:2px}
.timer{font-size:48px; line-height:1.1; color:var(--sun); text-shadow:4px 4px 0 var(--ink); font-variant-numeric:tabular-nums}
.progress{height:18px; background:var(--ink); padding:3px}
.progress-bar{height:100%; width:0; min-width:0; background:repeating-linear-gradient(90deg,var(--teal) 0 8px,var(--teal-l) 8px 12px); transition:width .25s linear}
.hint{margin:0; font-size:10px; color:var(--peach); min-height:2.4em; line-height:1.6}

.big-btn{display:block; width:100%; border:0; cursor:pointer; font-size:22px; padding:18px 12px; color:var(--ink); text-decoration:none; text-align:center;
  background:var(--orange); text-shadow:2px 2px 0 #ffffff55;
  box-shadow:inset -4px -6px 0 #0000003a, inset 4px 4px 0 #ffffff55, 0 0 0 4px var(--ink), 0 8px 0 4px var(--ink);
  transform:translateY(0); transition:transform .05s}
.big-btn:hover{filter:brightness(1.08)}
.big-btn:active{transform:translateY(6px); box-shadow:inset -4px -6px 0 #0000003a, inset 4px 4px 0 #ffffff55, 0 0 0 4px var(--ink), 0 2px 0 4px var(--ink)}
.big-btn:focus-visible,.small-btn:focus-visible{outline:3px dashed var(--teal-l); outline-offset:6px}
.big-btn.cast{font-size:30px; padding:22px 12px}
.big-btn.reel{background:var(--pink); font-size:30px; padding:22px 12px; animation:pulse .6s steps(2) infinite}
.big-btn.alt{background:var(--teal-l); font-size:13px; padding:16px 10px}
.big-btn.x{background:var(--cream); font-size:13px; padding:16px 10px}
.big-btn:disabled{filter:grayscale(.7) brightness(.7); cursor:not-allowed}

.small-btn{background:var(--plum); color:var(--cream); border:0; cursor:pointer; font-size:9px; padding:8px 10px; box-shadow:0 0 0 3px var(--ink), 0 4px 0 3px var(--ink); align-self:center}
.small-btn:active{transform:translateY(3px)}

/* rod panel — compact 3-button row */
.rod-panel{display:flex; gap:8px}
.rod-card{flex:1; display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center;
  background:#1a102899; padding:10px 6px; box-shadow:0 0 0 3px var(--ink)}
.rod-card.active{box-shadow:0 0 0 3px var(--sun); background:#2b1840}
.rod-card.locked{opacity:.4}
.rod-name{font-size:8px; color:var(--cream)}
.rod-card.active .rod-name{color:var(--sun)}
.rod-info{font-size:7px; color:var(--peach)}

/* stats — tidy 2-col grid */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:9px}
.stats>div{background:#1a102899; padding:10px 8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 0 0 3px var(--ink)}
.stats .pb{grid-column:1/-1}
.stats .k{color:var(--peach); text-transform:uppercase}
.stats .v{color:var(--cream); font-size:11px}

/* streak */
.streak{display:flex; align-items:center; justify-content:center; gap:8px; background:#1a102899; padding:10px 12px; box-shadow:0 0 0 3px var(--ink); font-size:9px}
.streak .flame{font-size:16px; line-height:1; animation:flick .8s steps(2) infinite}
.streak-label{color:var(--peach); text-transform:uppercase}
.streak-val{color:var(--sun); font-size:14px}
.streak-unit{color:var(--peach)}
.streak.cold{opacity:.5}
.streak.cold .flame{filter:grayscale(.8)}

/* dex — even grid, no half-empty rows */
.dex{display:grid; grid-template-columns:repeat(10,1fr); gap:8px; margin-bottom:0}
.dex-slot{background:#1a102899; min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 4px; box-shadow:0 0 0 3px var(--ink); font-size:7px; text-align:center; position:relative; overflow:hidden}
.dex-slot img{width:60%; height:auto; max-height:48px; object-fit:contain}
.dex-slot .cnt{position:absolute; top:3px; right:4px; color:var(--sun); font-size:7px}
.dex-name{color:var(--cream); font-size:7px; line-height:1.3}
.dex-best{color:var(--sun); font-size:8px}
.dex-slot.locked{color:#ffffff55}
.dex-slot.locked .dex-name{color:#ffffff55}

/* log + leaderboard */
.log,.leaderboard{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:420px; overflow:auto}
.log li,.leaderboard li{display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:12px; background:#1a102899; padding:8px 10px; box-shadow:0 0 0 3px var(--ink); cursor:pointer}
.log li:hover,.leaderboard li:hover{background:#4a235899}
.leaderboard li{grid-template-columns:34px 56px 1fr auto}
.rank{font-size:12px; color:var(--sun)}
.thumb{width:56px; height:40px; object-fit:contain}
.entry-name{font-size:10px}
.entry-sub{font-size:8px; color:var(--peach); margin-top:4px}
.entry-w{font-size:11px; color:var(--sun); text-align:right}
.rarity{font-size:7px; padding:3px 5px; color:var(--ink); display:inline-block; margin-left:6px; vertical-align:middle}
.empty{font-size:10px; color:var(--peach); margin:6px 0 0}
.note{font-size:9px; color:var(--peach); margin:0 0 14px}
.badge-local{font-size:8px; background:var(--teal-l); color:var(--ink); padding:5px 7px}

.odds{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.odds li{display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; background:#1a102899; padding:8px; box-shadow:0 0 0 3px var(--ink); font-size:9px}
.odds li img{width:48px; height:36px; object-fit:contain}
.odds .flav{color:var(--peach); font-size:8px; margin-top:4px}

.banner-wrap img{width:100%; height:auto; box-shadow:0 0 0 4px var(--ink)}

/* footer */
.site-footer{max-width:1280px; width:calc(100% - 32px); margin:0 auto 32px; padding:20px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center}
.ca{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; font-size:11px}
.ca code{font-family:inherit; background:var(--ink); padding:8px 10px; color:var(--teal-l); word-break:break-all}
.ca-label{color:var(--sun)}
.socials{display:flex; gap:20px; font-size:11px}
.socials a{color:var(--peach)}
.socials a:hover{color:var(--sun)}
.disclaimer{font-size:8px; color:#ffffffaa; max-width:680px; margin:0; line-height:2}

/* modal */
.modal{position:fixed; inset:0; background:#120a1ccc; display:flex; align-items:center; justify-content:center; z-index:50; padding:16px}
.modal-box{position:relative; padding:18px; width:min(440px,100%); max-height:100%; overflow:auto; animation:pop .25s steps(4)}
.modal-box h3{margin:0 0 12px; text-align:center; font-size:18px; color:var(--sun); text-shadow:3px 3px 0 var(--ink)}
.modal-box canvas{width:100%; height:auto; display:block; box-shadow:0 0 0 4px var(--ink)}
.modal-actions{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; padding:0 4px 8px}
.modal-close{position:absolute; top:10px; right:10px; background:var(--pink); border:0; color:var(--ink); font-size:12px; width:32px; height:32px; cursor:pointer; box-shadow:0 0 0 3px var(--ink)}

.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,200%); background:var(--teal-l); color:var(--ink); padding:12px 16px; font-size:10px; box-shadow:0 0 0 4px var(--ink); transition:transform .2s steps(3), visibility .2s; z-index:60; pointer-events:none; visibility:hidden}
.toast.show{transform:translate(-50%,0); visibility:visible}

.confetti{position:fixed; inset:0; pointer-events:none; z-index:55; overflow:hidden}
.confetti i{position:absolute; top:-12px; width:8px; height:8px; animation:fall linear forwards}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes zz{0%{opacity:0; transform:translate(0,0)}30%{opacity:1}100%{opacity:0; transform:translate(16px,-28px)}}
@keyframes biteJump{0%{transform:translateY(0)}100%{transform:translateY(-8px)}}
@keyframes shake{0%{transform:translateX(0)}100%{transform:translateX(2px)}}
@keyframes pulse{0%{filter:brightness(1)}100%{filter:brightness(1.18)}}
@keyframes pop{0%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}
@keyframes flick{0%{transform:scale(1) rotate(-2deg)}100%{transform:scale(1.12) rotate(2deg)}}

/* tablet / small desktop (1024px) */
@media (max-width:1024px){
  .game{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px}
  .timer{font-size:40px}
  .big-btn.cast{font-size:26px; padding:20px 12px}
  .big-btn.reel{font-size:26px; padding:20px 12px}
  .dex{grid-template-columns:repeat(5,1fr)}
}

/* mobile (800px and below) */
@media (max-width:800px){
  .game{grid-template-columns:1fr; gap:16px}
  .pond{aspect-ratio:4/3}
  .scene-layer{top:44%}
  .timer{font-size:36px}
  .state-label{font-size:13px}
  .big-btn.cast{font-size:28px; padding:22px 10px}
  .big-btn.reel{font-size:28px; padding:22px 10px}
  .bite{font-size:40px}
  .spot-tabs{height:40px}
  .spot-tab{font-size:9px; padding:0 12px}
  .rod-panel{flex-wrap:wrap}
  .rod-card{min-width:80px}
  .controls{padding:16px}
  .dex{grid-template-columns:repeat(4,1fr)}
}

/* phone (520px) */
@media (max-width:520px){
  body{font-size:11px}
  .site-header{margin-top:12px; padding:12px; width:calc(100% - 24px)}
  .brand{gap:10px}
  .brand-logo{width:52px; height:52px}
  .brand-name{font-size:24px}
  .brand-tag{font-size:8px}
  main{padding:18px 12px; gap:22px}
  .panel{padding:14px}
  .pond{aspect-ratio:1/1}
  .scene-layer{top:50%}
  .pond-status{font-size:9px; padding:6px 12px 6px}
  .big-btn.cast{font-size:26px; padding:20px 10px}
  .big-btn.reel{font-size:26px; padding:20px 10px}
  .timer{font-size:32px}
  .bite{font-size:34px}
  .thumb{width:44px; height:32px}
  .modal-actions{grid-template-columns:1fr}
  .site-footer{width:calc(100% - 24px)}
  .spot-tab{font-size:8px; padding:0 8px}
}
@media (max-width:639px){
  .site-header{flex-wrap:wrap}
  .ca-pill{order:1; width:100%; justify-content:center}
  .ca-short{display:none}
  .ca-pill .ca-tip,.ca-pill:hover .ca-tip,.ca-pill:focus-visible .ca-tip{position:static; transform:none; opacity:1; visibility:visible; flex:1; min-width:0; padding:0; background:none; box-shadow:none; font-size:7px; color:var(--cream); white-space:normal; word-break:break-all; text-align:center; pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}