/* One Cast: full-screen pixel scene, arcade HUD on top, console docked at the bottom, pop-up screens for everything else.
   One deliberate theme: deep water at night, gold for money and wins, red for bites. */
:root{
  --night:#0A1530; --panel:#14294C; --panel-hi:#2C5088; --panel-lo:#0A1834; --edge:#050B1C;
  --ice:#EAF5FF; --frost:#9FD3F2; --muted:#93B2D2;
  --gold:#FFC94A; --gold-lo:#C98A12; --gold-hi:#FFE7A0; --gold-ink:#3A2200;
  --red:#E5484D; --red-lo:#9E2A30; --red-hi:#FF8A8D;
  --sonar:#5CF08A; --sonar-dim:#2A7A47; --sonar-bg:#03140B;
  --pixel:'Press Start 2P',ui-monospace,Menlo,monospace;
  --term:'VT323',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--ice);font:20px/1.15 var(--term);overflow:hidden;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:400}
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--frost)}

.game{position:relative;height:100%;min-height:540px;overflow:hidden;background:var(--night)}
#scene{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
.ui{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.ui > *{pointer-events:auto}
.spacer{flex:1;pointer-events:none}

/* HUD */
.hud{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.brand{display:grid;gap:6px;min-width:0;justify-items:start}
.logo{font:15px/1 var(--pixel);letter-spacing:.04em;color:var(--ice);text-shadow:3px 3px 0 var(--edge);margin-bottom:2px}
.logo b{color:var(--gold);font-weight:400}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;gap:8px;align-items:center;padding:5px 9px 4px;background:rgba(5,11,28,.74);border:2px solid var(--edge);font:20px/1 var(--term);color:var(--ice);white-space:nowrap;max-width:100%}
.chip .k{font:9px/1 var(--pixel);color:var(--gold)}
.chip.btn{cursor:pointer}
.chip.btn:hover{border-color:var(--gold)}
.chip .t{overflow:hidden;text-overflow:ellipsis}
.coin{width:12px;height:12px;flex:none;background:var(--gold);box-shadow:inset -2px -2px 0 var(--gold-lo),inset 2px 2px 0 var(--gold-hi);border:2px solid var(--gold-ink)}
.chip.money{color:var(--gold)}
.chip.bump{animation:bump .5s steps(4)}
@keyframes bump{30%{transform:scale(1.18);background:var(--gold);color:var(--gold-ink)}}
.hud-btns{display:flex;gap:8px;flex:none;align-items:flex-start}
.pbtn{position:relative;font:10px/1 var(--pixel);padding:10px 10px 9px;cursor:pointer;background:var(--panel);color:var(--ice);border:3px solid var(--edge);
  box-shadow:inset 0 3px 0 var(--panel-hi),inset 0 -3px 0 var(--panel-lo)}
.pbtn:active{transform:translateY(2px)}
.pbtn.big{font-size:12px;padding:13px 14px 12px}
.pbtn.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold-ink);box-shadow:inset 0 3px 0 var(--gold-hi),inset 0 -3px 0 var(--gold-lo)}
.pbtn.danger{background:var(--red);border-color:#3A0A0C;box-shadow:inset 0 3px 0 var(--red-hi),inset 0 -3px 0 var(--red-lo)}
.pbtn.on{background:var(--sonar-dim);box-shadow:inset 0 3px 0 #3FB06A,inset 0 -3px 0 #1A5230}
.pbtn:disabled{cursor:not-allowed;filter:saturate(.3) brightness(.75)}
.badge{position:absolute;top:-10px;right:-10px;min-width:22px;padding:4px 4px 3px;background:var(--red);color:#fff;border:2px solid #3A0A0C;font:9px/1 var(--pixel)}
:is(.pbtn,.go,.seg button,.bait,.x,.mbtn,.item,.tabs button,.hole-chip,.card.fish,.pin,.spot-row,.lb li.clickable,.friend button,.sticker):focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.center{display:grid;justify-items:center;gap:8px;margin-top:8px;text-align:center;pointer-events:none}
.clock{font:clamp(20px,6vw,32px)/1 var(--pixel);color:var(--ice);font-variant-numeric:tabular-nums;
  text-shadow:3px 0 0 var(--edge),-3px 0 0 var(--edge),0 3px 0 var(--edge),0 -3px 0 var(--edge),3px 3px 0 var(--edge)}
.clock.ready{color:var(--gold);font-size:clamp(18px,5vw,26px)}
.status{font:22px/1.1 var(--term);color:var(--ice);text-shadow:2px 2px 0 var(--edge);max-width:36ch}
.status .n{color:var(--gold)}

/* Console */
.panel{align-self:center;width:min(560px,100%);display:grid;gap:9px;padding:11px;background:var(--panel);border:4px solid var(--edge);
  box-shadow:inset 0 4px 0 var(--panel-hi),inset 0 -4px 0 var(--panel-lo);
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.lbl{font:9px/1 var(--pixel);color:var(--gold);letter-spacing:.06em}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.desc{font:18px/1 var(--term);color:var(--muted);text-align:right;min-width:0}
.holes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hole-chip{cursor:pointer;display:grid;gap:4px;justify-items:center;padding:7px 2px 6px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--muted);min-width:0}
.hole-chip .hn{font:8px/1 var(--pixel)}
.hole-chip .hs{font:17px/1 var(--term);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hole-chip[aria-pressed="true"]{border-color:var(--gold);background:#1D3866;color:var(--ice)}
.hole-chip.on{background:var(--red);color:#fff;border-color:#3A0A0C;animation:pulse .6s steps(2) infinite}
.hole-chip.locked{background:repeating-linear-gradient(45deg,var(--panel-lo) 0 6px,#0F2040 6px 12px);color:#5A7598;cursor:pointer}
.go{width:100%;min-height:56px;cursor:pointer;border:4px solid var(--gold-ink);font:19px/1 var(--pixel);letter-spacing:.06em;background:var(--gold);color:var(--gold-ink);
  box-shadow:inset 0 -7px 0 var(--gold-lo),inset 0 4px 0 var(--gold-hi)}
.go:active{transform:translateY(2px);box-shadow:inset 0 -3px 0 var(--gold-lo),inset 0 3px 0 var(--gold-hi)}
.go.reel{background:var(--red);color:#fff;border-color:#3A0A0C;box-shadow:inset 0 -7px 0 var(--red-lo),inset 0 4px 0 var(--red-hi)}
.go.alt{background:var(--panel-lo);color:var(--ice);border-color:var(--edge);box-shadow:inset 0 -6px 0 #06102A,inset 0 4px 0 var(--panel-hi);font-size:13px}
.go.arm{animation:pulse .5s steps(2) infinite}
.go:disabled{cursor:not-allowed;filter:saturate(.4) brightness(.8)}
@keyframes pulse{50%{filter:brightness(1.25)}}
.loadout{cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);text-align:left}
.loadout canvas{width:24px;height:24px;flex:none}
.loadout .lo-t{flex:1;min-width:0;font:9px/1.4 var(--pixel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loadout .lo-c{font:9px/1 var(--pixel);color:var(--gold);flex:none}
.loadout:hover{border-color:var(--gold)}
.two{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.two .go{font-size:13px;min-height:52px}
.three{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.three .go{font-size:11px;min-height:50px}

/* Sonar */
.sonar{position:relative;overflow:hidden;padding:9px 11px 10px;display:grid;gap:6px;background:var(--sonar-bg);border:3px solid #0E3A22;color:var(--sonar);font:20px/1 var(--term)}
.sonar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.sonar .sweep{position:absolute;left:0;right:0;height:22px;top:-22px;background:linear-gradient(transparent,rgba(92,240,138,.12));animation:sweep 3s linear infinite;pointer-events:none}
@keyframes sweep{to{top:100%}}
.s-head{display:flex;justify-content:space-between;gap:8px;font:8px/1.3 var(--pixel);color:var(--sonar);flex-wrap:wrap}
.s-head span:last-child{color:var(--sonar-dim)}
.s-msg{line-height:1.1}
.s-msg b{font-weight:400;color:#fff}
.s-legend{color:var(--gold);animation:pulse .8s steps(2) infinite}

/* Toast */
.toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 58px);transform:translateX(-50%);z-index:30;max-width:min(90%,440px);padding:10px 14px;
  background:var(--red);color:#fff;border:3px solid #3A0A0C;font:20px/1.1 var(--term);text-align:center;box-shadow:0 4px 0 var(--edge)}
.toast.good{background:var(--gold);color:var(--gold-ink);border-color:var(--gold-ink)}
.toast.info{background:var(--panel);color:var(--ice);border-color:var(--edge)}

/* Overlays */
.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(3,7,18,.74);padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:max(14px,env(safe-area-inset-bottom,0px));
  padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.dialog{position:relative;width:min(100%,460px);max-height:100%;overflow:auto;padding:16px 14px 14px;display:grid;gap:12px;align-content:start;background:var(--panel);border:4px solid var(--edge);
  box-shadow:inset 0 4px 0 var(--panel-hi),inset 0 -4px 0 var(--panel-lo);overscroll-behavior:contain}
.dialog.wide{width:min(100%,720px)}
.dialog.full{width:100%;height:100%}
.d-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.d-title{font:14px/1.2 var(--pixel);color:var(--gold);text-shadow:2px 2px 0 var(--edge)}
.d-tools{display:flex;gap:8px;align-items:center}
.x{cursor:pointer;width:38px;height:38px;flex:none;background:var(--panel-lo);border:3px solid var(--edge);font:12px/1 var(--pixel);color:var(--ice)}
.note{font:18px/1.15 var(--term);color:var(--muted);margin:0}
.note b{color:var(--ice);font-weight:400}
.note.gold{color:var(--gold)}
.menu-list{display:grid;gap:8px}
@media (min-width:620px){.menu-list.cols{grid-template-columns:1fr 1fr}}
.mbtn{cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:9px 12px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);box-shadow:inset 0 3px 0 #1A3260}
.mbtn:hover{border-color:var(--gold)}
.mbtn canvas{width:40px;height:40px}
.mbtn .t{font:11px/1.3 var(--pixel);display:block}
.mbtn .s{font:18px/1.1 var(--term);color:var(--muted);display:block;margin-top:4px}
.mbtn .arrow{font:12px/1 var(--pixel);color:var(--gold)}
.wallet{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-lo);border:3px solid var(--edge)}
.wallet .v{font:16px/1 var(--pixel);color:var(--gold);display:flex;gap:10px;align-items:center}

/* Catch card */
.catch{justify-items:center;text-align:center;animation:pop .35s steps(5) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.fish-on{font:clamp(20px,7vw,30px)/1 var(--pixel);color:var(--gold);text-shadow:3px 3px 0 var(--edge)}
.fish-on.legend{color:#fff;animation:pulse .7s steps(2) infinite}
.ribbons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ribbon{font:9px/1 var(--pixel);padding:7px 8px 6px;background:var(--red);color:#fff;border:2px solid #3A0A0C}
.ribbon.g{background:var(--sonar);color:#04210F;border-color:#04210F}
.ribbon.b{background:#2F7C9A;border-color:#0B2E3C}
.ribbon.p{background:var(--panel-lo);color:var(--muted);border-color:var(--edge)}
.ribbon.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold-ink)}
.ribbon.white{background:#F2EEEA;color:#2A2A2A;border-color:#8A847E}
.stand{width:100%;display:grid;place-items:center;padding:14px 8px;background:radial-gradient(circle at 50% 60%,#1E3C6A,var(--panel-lo) 70%);border:3px solid var(--edge)}
.stand.legend{background:radial-gradient(circle at 50% 60%,#4A3A10,var(--panel-lo) 75%);border-color:var(--gold)}
.stand canvas{image-rendering:pixelated;max-width:100%}
.c-name{font:13px/1.3 var(--pixel);color:var(--ice)}
.c-weight{font:clamp(26px,8vw,36px)/1 var(--pixel);color:var(--gold);text-shadow:3px 3px 0 var(--edge)}
.c-len{font:22px/1 var(--term);color:var(--muted)}
.facts{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.facts.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.fact{background:var(--panel-lo);border:2px solid var(--edge);padding:7px 6px;display:grid;gap:4px;min-width:0;text-align:left}
.fact .k{font:8px/1 var(--pixel);color:var(--gold)}
.fact .v{font:20px/1 var(--term);overflow-wrap:anywhere}
.sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;left:50%;top:38%;width:6px;height:6px;background:var(--gold);animation:spark .9s steps(9) forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}

/* Lists */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;background:var(--panel-lo);border:3px solid var(--edge)}
.row .ic{display:grid;place-items:center;min-width:48px}
.row .nm{font:11px/1.3 var(--pixel);color:var(--ice)}
.row .sub{font:18px/1.1 var(--term);color:var(--muted);margin-top:4px}
.row .sub b{color:var(--ice);font-weight:400}
.row .own{font:9px/1 var(--pixel);color:var(--sonar)}
.row.selected{border-color:var(--gold)}
.row.dim{opacity:.55}
.sumbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--panel-lo);border:3px solid var(--edge)}
.sumbar .v{font:20px/1.1 var(--term)}
.sumbar .v b{color:var(--gold);font-weight:400}
.empty{padding:22px 10px;text-align:center;color:var(--muted);background:var(--panel-lo);border:3px dashed #23406E}
.gear-group{font:9px/1 var(--pixel);color:var(--gold);margin-top:6px}
.baits{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.bait{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;min-width:0;text-align:center;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);font:17px/1 var(--term)}
.bait canvas{width:32px;height:32px;flex:none}
.bait span{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bait[aria-pressed="true"]{border-color:var(--gold);background:#1D3866}
.bait.locked canvas{opacity:.35}
.bait.locked span{color:var(--gold)}
.bait.dead{opacity:.45}

/* Clothes shop */
.dress{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:12px;background:radial-gradient(circle at 50% 30%,#2A4C7E,var(--panel-lo) 75%);border:3px solid var(--edge)}
.dress canvas{width:96px;height:144px}
.dress .info{display:grid;gap:6px;min-width:0}
.dress .try{font:9px/1.3 var(--pixel);color:var(--sonar)}
.dress .iname{font:12px/1.3 var(--pixel)}
.dress .iprice{font:20px/1 var(--term);color:var(--gold)}
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:4px}
.tabs button{cursor:pointer;padding:9px 2px 8px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--muted);font:8px/1 var(--pixel)}
.tabs button[aria-pressed="true"]{background:#2F7C9A;color:#fff}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.item{cursor:pointer;display:grid;gap:5px;justify-items:center;padding:8px 4px 7px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);min-width:0}
.item canvas{width:36px;height:54px}
.item .in{font:16px/1 var(--term);text-align:center;overflow-wrap:break-word;hyphens:auto;max-width:100%;min-height:2em;display:flex;align-items:center}
.item .ip{font:16px/1 var(--term);color:var(--gold)}
.item .ip.own{color:var(--muted)}
.item .ip.worn{color:var(--sonar)}
.item[aria-pressed="true"]{border-color:var(--gold);background:#1D3866}
.buybar{position:sticky;bottom:-14px;margin:0 -14px -14px;padding:12px 14px 14px;background:var(--panel);border-top:3px solid var(--edge)}

/* Name, fields, boards */
#nameOv,#bootOv{z-index:20}
.field{width:100%;padding:12px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);font:24px/1 var(--term)}
.field:focus{outline:3px solid var(--gold);outline-offset:2px}
.field.code{font:15px/1.2 var(--term);resize:vertical;word-break:break-all;min-height:70px}
.field.small{font:20px/1 var(--term);padding:8px 10px}
.err{margin:0;min-height:1.2em;font:18px/1.1 var(--term);color:var(--red-hi)}
.tagline{font:12px/1.3 var(--pixel);color:var(--gold)}
.lb-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lb-tools select{padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);font:20px/1 var(--term);max-width:100%;flex:1;min-width:120px}
.lb{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lb li{display:grid;grid-template-columns:34px 44px minmax(0,1fr);gap:10px;align-items:center;padding:7px 10px;background:var(--panel-lo);border:3px solid var(--edge)}
.lb li.clickable{cursor:pointer}
.lb li.clickable:hover{border-color:var(--gold)}
.lb .rk{font:11px/1 var(--pixel);color:var(--muted);text-align:center}
.lb li:nth-child(1) .rk{color:var(--gold)}.lb li:nth-child(2) .rk{color:#D8E0EA}.lb li:nth-child(3) .rk{color:#E0965A}
.lb .ic{display:grid;place-items:center}
.lb .who{min-width:0}
.lb .nm{font:22px/1.1 var(--term);color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .nm small{font:16px/1 var(--term);color:var(--muted)}
.lb .nm .var{font:14px/1 var(--term);color:var(--gold);margin-left:6px}
.lb .sp{font:18px/1.1 var(--term);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .sp b{font-weight:400;color:var(--gold)}
.lb .wt{font:20px/1 var(--term);color:var(--gold);text-align:right;white-space:nowrap}
.lb li.me{border-color:var(--gold);background:#1D3866}
.me-line{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--panel-lo);border:3px solid var(--edge)}
.season-note{margin:0;font:18px/1.15 var(--term);color:var(--gold)}
.tag{font:7px/1 var(--pixel);padding:3px 4px;margin-left:6px;border:1px solid var(--muted);color:var(--muted);vertical-align:2px}
.tag.gold{border-color:var(--gold);color:var(--gold)}
.tag.green{border-color:var(--sonar);color:var(--sonar)}

/* Cards */
#confirmOv{z-index:25}
.cf{justify-items:center;text-align:center}
.cf .stand{width:auto;padding:10px 18px}
.cf-btns{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cf-btns .go{font-size:13px;min-height:52px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid.inv{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.card{display:grid;gap:6px;justify-items:center;padding:10px 8px;background:var(--panel-lo);border:3px solid var(--edge);text-align:center;min-width:0;position:relative}
.card canvas{image-rendering:pixelated;max-width:100%;height:auto}
.card .nm{font:8px/1.4 var(--pixel);color:var(--ice)}
.card .v{font:20px/1 var(--term);color:var(--gold)}
.card .sub{font:16px/1 var(--term);color:var(--muted)}
.card.no .nm,.card.no .v{color:var(--muted)}
.card .pic{min-height:60px;display:grid;place-items:center;width:100%}
.card.fish{cursor:pointer;color:var(--ice);font:inherit}
.card.fish:hover{border-color:var(--gold)}
.card.fish.golden{border-color:var(--gold);background:linear-gradient(160deg,#3A3214,var(--panel-lo) 60%)}
.card.fish.albino{border-color:#E8E2DC}
.card.legend{border-color:var(--gold);box-shadow:inset 0 0 0 2px #6B5214}
.card.legend .nm{color:var(--gold)}
.card.picked{outline:3px solid var(--sonar);outline-offset:-3px}
.card .medal{position:absolute;top:5px;right:5px;width:18px;height:18px}
.card .lock{position:absolute;top:5px;left:5px;font:7px/1 var(--pixel);color:var(--muted)}
.inspect{justify-items:center;text-align:center}
.inspect .d-head{justify-self:stretch}
.best{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px;background:var(--panel-lo);border:3px solid var(--edge)}
.best .stand{width:auto;padding:8px}
.best .w{font:clamp(18px,5vw,24px)/1 var(--pixel);color:var(--gold)}
.best .t{font:20px/1.1 var(--term);color:var(--muted);margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}

/* Coach, away, daily, achievements */
.coach{position:absolute;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 32px));z-index:6;bottom:230px;display:grid;gap:8px;padding:10px 12px;background:var(--gold);color:var(--gold-ink);border:3px solid var(--gold-ink);box-shadow:0 4px 0 var(--edge);font:21px/1.15 var(--term)}
.coach::after{content:"";position:absolute;left:50%;bottom:-12px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top:12px solid var(--gold-ink)}
.coach p{margin:0}
.coach-btns{display:flex;justify-content:flex-end;gap:8px}
.coach .pbtn{font-size:8px;padding:8px}
.away-main{display:grid;gap:4px;width:100%;padding:12px;background:var(--panel-lo);border:3px solid var(--edge)}
.away-big{font:18px/1.2 var(--pixel);color:var(--gold)}
.away-main .t{font:20px/1.15 var(--term)}
.flycoin{position:fixed;z-index:40;transition:transform .7s cubic-bezier(.5,-.4,.7,1),opacity .7s;pointer-events:none}
.daily{display:grid;gap:6px;padding:10px 12px;background:#1D3866;border:3px solid var(--gold)}
.daily .t{font:20px/1.15 var(--term)}
.daily .r{display:flex;justify-content:space-between;gap:10px;font:18px/1 var(--term);color:var(--muted)}
.daily .r b{font-weight:400;color:var(--gold)}
.daily.done{border-color:var(--sonar-dim)}
.ach{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ach li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge)}
.ach li canvas{width:32px;height:32px}
.ach li.locked canvas{filter:grayscale(1) brightness(.5)}
.ach .nm{font:10px/1.4 var(--pixel)}
.ach .ds{font:18px/1.1 var(--term);color:var(--muted)}
.ach .bar{display:block;height:8px;margin-top:5px;background:repeating-linear-gradient(90deg,#23406E 0 6px,transparent 6px 8px)}
.ach .bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 8px)}
.ach .rw{font:20px/1 var(--term);color:var(--gold);white-space:nowrap}
.ach li.got{border-color:var(--sonar-dim)}
.ach li.got .rw{color:var(--sonar)}
.journal-fact{margin:0;padding:10px 12px;background:var(--panel-lo);border:3px dashed #23406E;font:20px/1.2 var(--term);text-align:left;width:100%}
.help{margin:0;padding-left:20px;display:grid;gap:8px;font:20px/1.15 var(--term)}
.reset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font:18px/1 var(--term);color:var(--muted)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle .box{width:34px;height:18px;border:3px solid var(--edge);background:var(--panel-lo);position:relative;flex:none}
.toggle .box::after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;background:var(--muted)}
.toggle input:checked + .box{background:var(--sonar-dim)}
.toggle input:checked + .box::after{left:auto;right:1px;background:var(--sonar)}

/* World map */
#mapOv .dialog{padding:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);gap:0;align-content:stretch}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid var(--edge);flex-wrap:wrap}
.map-wrap{position:relative;background:#163468;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#mapCanvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:grab}
#mapCanvas:active{cursor:grabbing}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-30%,-100%);pointer-events:auto;cursor:pointer;background:none;border:0;padding:4px;margin:-4px;display:block;line-height:0;filter:drop-shadow(1px 1px 0 rgba(5,11,28,.6))}
.pin img{display:block;image-rendering:pixelated}
.pin .star{position:absolute;left:62%;top:-4px;animation:twinkle 1.6s steps(2) infinite}
.pin .star.owned{animation:none;opacity:.85}
.pin.here{z-index:3;animation:bob 1s steps(2) infinite}
.pin.picked{z-index:2}
.pin.picked img:first-child{outline:2px solid var(--gold);outline-offset:1px}
.pin.locked{opacity:.85}
@keyframes bob{50%{transform:translate(-30%,calc(-100% - 3px))}}
@keyframes twinkle{50%{filter:brightness(1.6)}}
.map-label,.map-region{position:absolute;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font:8px/1 var(--pixel);color:#fff;padding:3px 4px 2px;background:rgba(5,11,28,.62);text-shadow:1px 1px 0 var(--edge)}
.map-label.here{color:var(--gold);background:rgba(5,11,28,.8)}
.map-label.dim{color:#B8C8DC}
.map-region{pointer-events:auto;cursor:pointer;border:2px solid rgba(255,201,74,.55);color:var(--gold);font-size:8px;padding:4px 5px 3px}
.map-region:hover{background:rgba(5,11,28,.85);border-color:var(--gold)}
.map-region.dim{color:#C8D4E4;border-color:rgba(200,212,228,.35)}
.map-tools{position:absolute;right:10px;top:10px;display:grid;gap:6px;z-index:4}
.map-tools .pbtn{width:40px;height:40px;padding:0;font-size:12px}
.map-tools #mapHere{font-size:8px}
.map-foot{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;width:auto;max-width:560px;max-height:46%;overflow:auto;padding:12px;display:grid;gap:8px;align-content:start;
  background:var(--panel);border:4px solid var(--edge);box-shadow:inset 0 4px 0 var(--panel-hi),inset 0 -4px 0 var(--panel-lo),0 6px 0 rgba(5,11,28,.45)}
.map-foot.closed{max-height:none;width:auto;right:auto;padding:6px 8px;display:flex;align-items:center;gap:10px}
.foot-toggle{position:absolute;right:8px;top:8px;cursor:pointer;font:7px/1 var(--pixel);padding:6px;background:var(--panel-lo);border:2px solid var(--edge);color:var(--muted);z-index:1}
.map-foot.closed .foot-toggle{position:static}
.foot-mini{font:9px/1.3 var(--pixel);color:var(--gold)}
.map-foot .spot-card{padding-right:46px}
.map-foot{touch-action:pan-y}
.spot-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.spot-card .pic{display:grid;place-items:center;min-width:72px;padding:6px;background:var(--panel-lo);border:3px solid var(--edge)}
.spot-card h3{font:12px/1.4 var(--pixel);color:var(--gold)}
.spot-card .where{font:18px/1.1 var(--term);color:var(--muted)}
.spot-card p{margin:4px 0 0;font:19px/1.15 var(--term)}
.spot-card .leg{display:flex;gap:10px;align-items:center;margin-top:6px;padding:6px 8px;background:var(--panel-lo);border:2px solid var(--edge)}
.spot-card .leg .ln{font:9px/1.4 var(--pixel);color:var(--gold)}
.spot-card .leg .ls{font:17px/1.1 var(--term);color:var(--muted)}
.spot-card .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.region-list{display:grid;gap:6px}
.region-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge)}
.region-row .rn{font:10px/1.4 var(--pixel)}
.region-row .rs{font:17px/1.1 var(--term);color:var(--muted)}
.spot-row{cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice);text-align:left}
.spot-row:hover{border-color:var(--gold)}
.spot-row .sn{font:9px/1.4 var(--pixel)}
.spot-row .ss{font:17px/1.1 var(--term);color:var(--muted)}
.spot-row.here{border-color:var(--gold)}
.legend-chip{font:8px/1 var(--pixel);padding:5px 6px 4px;border:2px solid var(--gold);color:var(--gold)}
.legend-chip.owned{border-color:#8A6A20;color:#B89A50}

/* Legends screen */
.legend-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px;background:var(--panel-lo);border:3px solid var(--edge)}
.legend-card.free{border-color:var(--gold)}
.legend-card .pic{display:grid;place-items:center;min-width:80px;padding:6px;background:radial-gradient(circle at 50% 60%,#1E3C6A,var(--panel-lo) 70%)}
.legend-card .ln{font:11px/1.4 var(--pixel);color:var(--gold)}
.legend-card .ls{font:18px/1.1 var(--term);color:var(--muted);margin-top:3px}
.legend-card .lc{font:18px/1.15 var(--term);margin-top:6px}
.legend-card .lo{font:9px/1.4 var(--pixel);color:var(--sonar);margin-top:6px}
.legend-card .lo.taken{color:#B89A50}
.tier{font:7px/1 var(--pixel);padding:3px 5px;border:2px solid;margin-left:6px;vertical-align:2px}
.tier.findable{border-color:var(--sonar);color:var(--sonar)}
.tier.rare{border-color:#9FD3F2;color:#9FD3F2}
.tier.mythic{border-color:#E08AFF;color:#E08AFF}

/* Friends and trading */
.friend{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge)}
.friend .fn{font:20px/1.1 var(--term)}
.friend .fs{font:16px/1 var(--term);color:var(--muted)}
.friend .fb{display:flex;gap:6px}
.friend .pbtn{font-size:8px;padding:8px}
.dot{display:inline-block;width:8px;height:8px;background:#5A7598;margin-right:6px;vertical-align:1px}
.dot.on{background:var(--sonar)}
.trade-sides{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side{display:grid;gap:6px;padding:8px;background:var(--panel-lo);border:3px solid var(--edge);min-width:0}
.side.ready{border-color:var(--sonar-dim)}
.side.confirmed{border-color:var(--sonar)}
.side h3{font:9px/1.4 var(--pixel);color:var(--gold)}
.side .st{font:16px/1.1 var(--term);color:var(--muted)}
.side .offer{display:grid;gap:4px;min-height:40px}
.side .ofish{display:flex;gap:8px;align-items:center;font:17px/1.1 var(--term);padding:4px 6px;background:var(--panel);border:2px solid var(--edge)}
.side .coins{font:18px/1 var(--term);color:var(--gold)}
.stickers{display:flex;flex-wrap:wrap;gap:6px}
.sticker{cursor:pointer;font:8px/1 var(--pixel);padding:8px 8px 7px;background:var(--panel-lo);border:3px solid var(--edge);color:var(--ice)}
.sticker:hover{border-color:var(--gold)}
.news{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.news li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;background:var(--panel-lo);border:3px solid var(--edge)}
.news li.legend{border-color:var(--gold)}
.news li.golden{border-color:#B88A18}
.news .nt{font:18px/1.15 var(--term)}
.news .nw{font:15px/1 var(--term);color:var(--muted);margin-top:3px}
.profile-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.profile-head canvas{width:72px;height:108px}
.profile-head .pn{font:14px/1.3 var(--pixel)}
.profile-head .ps{font:18px/1.1 var(--term);color:var(--muted);margin-top:4px}
.travel-scene{position:relative;height:120px;background:#061224;border:3px solid var(--edge);overflow:hidden}
.travel-scene canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated}
.travel-text{font:12px/1.5 var(--pixel);text-align:center;color:var(--gold)}
.offline{position:absolute;left:50%;top:60px;transform:translateX(-50%);z-index:8;padding:8px 12px;background:var(--red);color:#fff;border:3px solid #3A0A0C;font:18px/1.1 var(--term)}

@media (max-height:660px){.center{margin-top:4px}.go{min-height:50px}.coach{bottom:200px}}
@media (max-width:420px){.logo{font-size:12px}.pbtn{padding:9px 8px 8px;font-size:9px}}
@media (prefers-reduced-motion: reduce){.catch,.go.arm,.sonar .sweep,.sparks i,.chip.bump,.hole-chip.on,.pin.here i,.fish-on.legend{animation:none}.sonar .sweep{display:none}}

.mbtn.on{border-color:var(--sonar-dim);background:#0E2A1E}
#hudAlert.on{background:var(--sonar-dim);box-shadow:inset 0 3px 0 #3FB06A,inset 0 -3px 0 #1A5230}
@media (max-width:420px){#hudAlert{display:none}}

@media (max-width:600px){.map-foot{max-height:42%;padding:10px}.map-foot .spot-card{grid-template-columns:minmax(0,1fr)}.map-foot .spot-card .pic{display:none}.map-foot .spot-card p{font-size:17px}}

/* ---------- Legend presentation ---------- */
.stand.legend{position:relative;overflow:hidden;isolation:isolate;padding:22px 8px;border-color:var(--gold);
  background:radial-gradient(circle at 50% 55%,#5A4410 0,#2A2008 45%,var(--panel-lo) 75%);box-shadow:inset 0 0 0 2px #6B5214}
.stand.legend::before{content:"";position:absolute;inset:-60%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,74,.22) 0 10deg,transparent 10deg 20deg);animation:rays 14s steps(56) infinite}
.stand.legend::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(#FFF2B0 1px,transparent 1.5px);background-size:23px 19px;opacity:.35;animation:twinkle 1.4s steps(2) infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.catch .stand.legend canvas{filter:drop-shadow(0 0 6px rgba(255,201,74,.55))}
.legend-card{position:relative}
.legend-card.free{border-color:var(--gold);background:linear-gradient(160deg,#2A2208,var(--panel-lo) 55%)}
.legend-card.free .pic{background:radial-gradient(circle at 50% 55%,#4A3A10,var(--panel-lo) 70%)}
.legend-card .ln{text-shadow:2px 2px 0 var(--edge)}
.legend-card.free::after{content:"";position:absolute;inset:-3px;pointer-events:none;border:3px solid transparent;
  background:linear-gradient(90deg,transparent 0 40%,rgba(255,240,170,.9) 50%,transparent 60% 100%) border-box;background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sheen 3.2s steps(24) infinite}
@keyframes sheen{from{background-position:100% 0}to{background-position:-100% 0}}
.card.legend{background:linear-gradient(160deg,#3A2E0C,var(--panel-lo) 60%)}
.card.legend .pic canvas{filter:drop-shadow(0 0 4px rgba(255,201,74,.45))}
.fish-on.legend{font-size:clamp(24px,8vw,36px);color:var(--gold-hi);text-shadow:3px 3px 0 #6B3A00,-1px -1px 0 #FFF2B0}
.news li.legend{background:linear-gradient(90deg,#2A2208,var(--panel-lo) 60%)}
@media (prefers-reduced-motion: reduce){.stand.legend::before,.stand.legend::after,.legend-card.free::after{animation:none}}
.c-name.legend{font-size:15px;color:var(--gold);text-shadow:2px 2px 0 var(--edge)}

/* Dock */
.dock-row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;background:var(--panel-lo);border:3px solid var(--edge)}
.dock-row.out{border-color:var(--sonar-dim);background:linear-gradient(160deg,#0E2A1E,var(--panel-lo) 60%)}
.dock-pic{display:grid;place-items:end center;min-height:56px;padding:6px;background:linear-gradient(transparent 62%,#1E5A80 62%);border:2px solid var(--edge)}
.dock-info .nm{font:10px/1.4 var(--pixel)}
.dock-info .sub{font:17px/1.15 var(--term);color:var(--muted);margin-top:4px}
.dock-info .sub b{color:var(--ice);font-weight:400}
.dock-act .sub{font:18px var(--term);color:var(--muted)}
@media (max-width:560px){.dock-row{grid-template-columns:minmax(0,1fr) auto}.dock-pic{grid-column:1/-1}}
.crew-invite{border-color:var(--gold);background:linear-gradient(90deg,#2A2208,var(--panel-lo) 70%)}

/* toasts sit under the HUD so they never cover the CAST / REEL button */
@media (max-width:600px){.toast{top:calc(env(safe-area-inset-top,0px) + 112px);left:12px;right:12px;transform:none;max-width:none;margin:0 auto;width:fit-content}}
/* phones: a compact tutorial box so the lake and the line stay visible */
@media (max-width:600px){
  .coach{font:17px/1.08 var(--term);padding:7px 9px 6px;gap:4px;width:calc(100% - 24px)}
  .coach-btns{gap:6px}
  .coach .pbtn{font-size:7px;padding:6px 7px}
}
/* shop buy buttons: say BUY and give fingers a real target */
.pbtn.buy{font-size:10px;padding:11px 12px;min-width:92px;min-height:40px;white-space:nowrap}
.pbtn.buy:disabled{opacity:.75}
/* passwords */
.pw-box{display:grid;gap:8px;margin-top:8px}
.pw-sec{display:grid;gap:8px;padding:10px;margin-bottom:10px;border:3px solid var(--edge);background:var(--panel-lo)}
.pw-sec .note{margin:0}
.pw-on{color:#7CE38B;font-weight:bold}
/* sticky password tip (closes only with its X) */
.tipbox{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 122px);z-index:9;width:min(440px,calc(100% - 24px));box-sizing:border-box;display:grid;gap:8px;padding:10px 44px 10px 12px;background:var(--panel);color:var(--ice);border:3px solid var(--gold);box-shadow:0 4px 0 var(--edge);font:19px/1.15 var(--term)}
.tipbox p{margin:0}
.tipbox .pbtn{justify-self:start}
.tipbox .tip-x{position:absolute;top:6px;right:6px}
@media (max-width:600px){.tipbox{top:calc(env(safe-area-inset-top,0px) + 240px);font-size:17px}}
/* catch card share button */
.share-btn{display:block;margin:8px auto 0;font-size:8px}
/* inside the phone app: real notifications replace the browser fish-alert window */
.native #alertBtn,.native #hudAlert{display:none!important}
/* delete account */
.del-sec{margin-top:14px;padding-top:10px;border-top:2px dashed var(--edge);display:grid;gap:8px}
.del-sec .pbtn{justify-self:start}
#delBox{display:grid;gap:8px}
.go.danger{background:var(--red,#C0303A);color:#fff}
/* lure controls: sits over the fishing panel while you work a crankbait or jig */
.lurebox{position:absolute;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:7;width:min(560px,calc(100% - 24px));box-sizing:border-box;display:grid;gap:8px;padding:11px;background:var(--panel);border:4px solid var(--gold);box-shadow:0 4px 0 var(--edge)}
.lure-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lure-name{font:12px var(--pixel);color:var(--gold)}
.lure-tip,.lure-msg{margin:0;font:18px/1.15 var(--term);color:var(--ice)}
.lure-msg{min-height:1.15em;color:var(--frost)}
#lureCanvas{width:100%;height:auto;aspect-ratio:160/56;image-rendering:pixelated;border:3px solid var(--edge);background:#0D2A4A}
.lure-dist{height:8px;background:var(--panel-lo);border:2px solid var(--edge)}
.lure-dist i{display:block;height:100%;background:#5FB2CF}
.lure-btn{touch-action:none;user-select:none;-webkit-user-select:none;min-height:64px}
.lure-btn.strike{background:var(--red);color:#fff;animation:lureflash .25s steps(2) infinite}
@keyframes lureflash{50%{filter:brightness(1.4)}}
@media (prefers-reduced-motion:reduce){.lure-btn.strike{animation:none}}
/* first launch inside the app: point website players at their existing account */
.app-welcome{margin:0;padding:10px 12px;border:3px solid var(--gold);background:var(--panel-lo);font:18px/1.2 var(--term);color:var(--ice)}
.app-welcome b{color:var(--gold);font-weight:normal}

/* your profile: change name */
.rename-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.rename .err{color:#FF8A8D;min-height:1em;margin:6px 0 0;font-size:14px}

/* map key: fish level per water, green = you have it */
.map-key{position:absolute;top:10px;right:60px;bottom:10px;width:290px;z-index:6;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;padding:10px;background:rgba(10,21,48,.94);border:3px solid var(--panel-hi);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.map-key[hidden]{display:none}
.mk-head{display:flex;justify-content:space-between;align-items:center;font:10px/1 var(--pixel);color:var(--gold)}
.mk-x{font:9px var(--pixel);color:var(--ice);background:var(--panel-lo,#0D1A3A);border:2px solid var(--panel-hi);padding:5px 6px;cursor:pointer}
.mk-legend{display:grid;gap:4px;padding-bottom:8px;border-bottom:2px solid var(--panel-hi)}
.mk-tier{display:grid;grid-template-columns:12px auto minmax(0,1fr);gap:7px;align-items:center}
.mk-tier i,.mk-group i,.mk-row i{width:12px;height:12px;display:block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.mk-tier b{font:8px/1.2 var(--pixel)}
.mk-tier small{color:#B8C8DC;font-size:17px;text-align:right}
.mk-have i.g{background:#5CF08A;border-radius:50%}
.mk-have b{color:#5CF08A}
.mk-list{overflow:auto;display:grid;gap:3px;align-content:start;padding-right:2px;overscroll-behavior:contain;touch-action:pan-y}
.mk-group{display:flex;gap:7px;align-items:center;font:8px/1 var(--pixel);color:var(--ice);margin:8px 0 3px}
.mk-group:first-child{margin-top:0}
.mk-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;padding:6px 7px;background:rgba(19,35,74,.8);border:2px solid transparent;color:var(--ice);cursor:pointer;font-size:18px;line-height:1;font-family:inherit}
.mk-row:hover{border-color:var(--panel-hi)}
.mk-row.have{border-color:rgba(92,240,138,.55);background:rgba(28,74,52,.55)}
.mk-row.here{border-color:var(--gold)}
.mk-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-n small{display:block;color:#93B2D2;font-size:15px}
.mk-own{font:7px var(--pixel);color:#0A1530;background:#5CF08A;padding:4px 5px}
.mk-price{font-size:17px;color:#C8D4E4}
#mapKeyBtn[aria-pressed=true]{background:var(--gold);color:#3A2600}
@media (max-width:700px){.map-key{left:10px;right:10px;top:58px;bottom:auto;width:auto;max-height:62%}}
.mk-sub{font:7px/1.4 var(--pixel);color:#93B2D2;margin-bottom:2px}
.mk-price{text-align:right}.mk-price small{display:block;font:6px/1.6 var(--pixel);color:#93B2D2}

/* bait stat bars: bite rate, fish level, where it works */
.bbars{display:grid;gap:4px;margin:6px 0 4px}
.bb{display:grid;grid-template-columns:72px auto minmax(0,1fr);gap:8px;align-items:center}
.bb-l{font:7px/1 var(--pixel);color:#93B2D2}
.bb-bar{display:flex;gap:2px}
.bb-bar i{width:12px;height:10px;background:#0A1834;box-shadow:inset 0 0 0 2px #1D3866}
.bb small{color:#C8D4E4;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-where{display:flex;gap:2px;flex-wrap:wrap}
.bb-m{font:6px/1 var(--pixel);padding:3px 3px 2px;color:#3E5A82;border:1px solid #1D3866}
.bb-m.on{color:#0A1530;background:#9FD3F2;border-color:#9FD3F2}
.bait-info{min-width:0}
@media (max-width:420px){.bb{grid-template-columns:58px auto minmax(0,1fr);gap:6px}.bb-bar i{width:9px}}
.row .row-bars{grid-column:1/-1}
.row .row-bars .bbars{margin:2px 0 0}
.lure-how{margin:0;padding:0 0 0 22px;display:grid;gap:3px;font:17px/1.1 var(--term);color:#C8D4E4}
.lure-how b{color:var(--ice);font-weight:400}
.lure-how li::marker{color:var(--gold);font:9px var(--pixel)}
@media (max-width:420px){.lure-how{font-size:16px;gap:2px}}

/* lure instructions: closable */
.lure-howbox{position:relative;padding-right:26px}
.lure-howbox[hidden]{display:none}
.lure-howx{position:absolute;right:0;top:0}
.lure-howshow{justify-self:start;font:8px var(--pixel);color:var(--gold);background:none;border:2px solid var(--panel-hi);padding:6px 8px;cursor:pointer}
/* map: my tickets corner */
.map-tix{position:absolute;left:10px;top:10px;z-index:6;max-width:min(270px,calc(100% - 80px));display:grid;gap:6px}
.mt-toggle{display:flex;align-items:center;gap:7px;font:8px/1 var(--pixel);color:var(--ice);background:rgba(10,21,48,.92);border:3px solid var(--panel-hi);padding:7px 9px;cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.mt-toggle b{color:#5CF08A;font-weight:400}
.mt-arrow{font-size:7px;color:#93B2D2}
.mt-ic{width:12px;height:8px;background:#5CF08A;box-shadow:inset 0 0 0 2px #1C4A34;clip-path:polygon(0 0,100% 0,100% 30%,85% 50%,100% 70%,100% 100%,0 100%,0 70%,15% 50%,0 30%)}
.mt-list{max-height:min(55vh,420px);overflow:auto;display:grid;gap:3px;padding:8px;background:rgba(10,21,48,.94);border:3px solid var(--panel-hi);overscroll-behavior:contain;touch-action:pan-y}
.mt-region{display:flex;align-items:center;gap:7px;font:7px/1.3 var(--pixel);color:#5CF08A;margin-top:6px}
.mt-region:first-child{margin-top:0}
.mt-region i,.mt-spot i{width:10px;height:10px;flex:none;display:block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.mt-spot{display:flex;align-items:center;gap:7px;text-align:left;background:rgba(28,74,52,.45);border:2px solid transparent;color:var(--ice);font:17px/1 var(--term);padding:3px 6px;cursor:pointer}
.mt-spot:hover{border-color:rgba(92,240,138,.55)}
.mt-spot.here{border-color:var(--gold)}
.mt-note{margin:6px 0 0;color:#93B2D2;font:16px/1.1 var(--term)}

/* fish index rewards */
.idx-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.idx-rewards[hidden]{display:none}
.idx-r{display:grid;gap:6px;padding:10px;background:var(--panel-lo);border:3px solid var(--edge)}
.idx-r.ready{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,201,74,.25)}
.idx-r.claimed{opacity:.8}
.idx-r.big .idx-t b{color:var(--gold)}
.idx-t{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.idx-t b{font:8px/1.4 var(--pixel);color:var(--ice);font-weight:400}
.idx-t span{font-size:18px;color:#C8D4E4;white-space:nowrap}
.idx-bar{height:8px;background:#0A1834;border:2px solid #050B1C}
.idx-bar i{display:block;height:100%;background:#5CF08A}
.idx-r.big .idx-bar i{background:linear-gradient(90deg,#5CF08A,#46D8D0,#B07CFF,#FFC94A)}
.idx-f{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.idx-prize{font-size:16px;color:var(--gold)}
.idx-left{font-size:16px;color:var(--muted)}
.idx-f .pbtn{font-size:8px;padding:7px 10px}
@media (max-width:700px){.idx-rewards{grid-template-columns:minmax(0,1fr)}}

/* dry fly: a warmer, cozier frame */
.lurebox.fly{border-color:#B8743A;background:#2A2018}
.lurebox.fly .lure-name{color:#F2C88A}
.lurebox.fly #lureCanvas{border-color:#5A3A1E}
.lurebox.fly .lure-dist i{background:#E0A040}

/* map search */
.map-search{position:relative;flex:1 1 220px;max-width:420px;min-width:0}
.map-search .field{width:100%;box-sizing:border-box;font-size:20px;padding:6px 10px}
.ms-res{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;display:grid;gap:3px;padding:6px;background:rgba(10,21,48,.97);border:3px solid var(--panel-hi);box-shadow:4px 4px 0 rgba(0,0,0,.4);max-height:60vh;overflow:auto}
.ms-res[hidden]{display:none}
.ms-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;padding:6px 8px;background:rgba(19,35,74,.85);border:2px solid transparent;color:var(--ice);cursor:pointer;font-size:19px;line-height:1;font-family:inherit}
.ms-row:hover,.ms-row:focus-visible{border-color:var(--gold)}
.ms-row.have{background:rgba(28,74,52,.6)}
.ms-row i{width:12px;height:12px;display:block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.ms-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-n small{display:block;color:#93B2D2;font-size:15px}
.ms-none{color:var(--muted);padding:6px;font-size:18px}
@media (max-width:700px){.map-search{order:3;flex-basis:100%;max-width:none}}

/* guidebooks */
.guide{display:grid;gap:10px;margin-top:10px}
.g-cover{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start;padding:12px;background:var(--panel-lo);border:3px solid var(--edge)}
.g-book{aspect-ratio:3/4;display:grid;place-items:center;text-align:center;padding:10px;background:var(--book);border:4px solid #050B1C;box-shadow:inset 6px 0 0 rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,201,74,.6);font:9px/1.6 var(--pixel);color:#FFE7A8}
.g-info p{margin:0 0 8px;color:var(--ice)}
.g-info ul{margin:0 0 12px;padding-left:20px;color:#C8D4E4;display:grid;gap:4px;font-size:18px}
.g-search{width:100%;box-sizing:border-box}
.g-list{display:grid;gap:6px}
.g-legend,.g-fish{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;padding:8px;background:var(--panel-lo);border:3px solid var(--edge)}
.g-legend{border-color:#8A6A1E;background:#1A1A0E}
.g-legend.taken{opacity:.7}
.g-legend .pic,.g-fish .pic{display:grid;place-items:center}
.g-n{font:9px/1.5 var(--pixel);color:var(--ice)}
.g-legend .g-n{color:var(--gold)}
.g-s{color:var(--muted);font-size:17px;margin:2px 0 4px}
.g-facts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:17px;color:#E0E8F0}
.g-facts b{font:7px var(--pixel);color:#93B2D2;margin-right:5px}
.g-facts .have{color:#5CF08A}
.g-facts .no{color:#FF8A8D}.g-facts .ok{color:#5CF08A}
.g-own{font:7px/1.6 var(--pixel);color:var(--muted);margin-top:4px}.g-own.free{color:var(--gold)}
@media (max-width:600px){.g-cover{grid-template-columns:minmax(0,1fr)}.g-book{max-width:150px;justify-self:center}.g-legend,.g-fish{grid-template-columns:64px minmax(0,1fr)}}
/* hard lures: buy one or five, and how many are left */
.lure-buy{display:flex;flex-direction:column;gap:6px}
.lure-buy .pbtn.buy{min-width:0;font-size:9px;padding:9px 10px;min-height:34px}
.lure-left{display:block;margin:4px 0 6px;color:#FFC94A}
.bait{position:relative}
.bait .cnt{position:absolute;top:3px;right:4px;font:8px/1 var(--pixel);color:#FFC94A}
.row-bars .lure-left{font:17px/1.15 var(--term);margin:2px 0 4px}
/* phones: nothing in a dialog may push it wider than the screen (a huge wallet used to hide the X and scroll sideways) */
.dialog{grid-template-columns:minmax(0,1fr);overflow-x:hidden}
.dialog>*{min-width:0}
.wallet{flex-wrap:wrap;row-gap:6px}
.wallet .v{min-width:0;font-size:clamp(11px,4vw,16px);flex-wrap:wrap;word-break:break-all}
/* phones: friend rows stack, name on top and the buttons wrap underneath (they used to squash the name to one letter) */
@media (max-width:560px){ .friend{grid-template-columns:minmax(0,1fr)} .friend .fb{flex-wrap:wrap} .friend .fb .pbtn{flex:1 1 auto} }
/* the weekend derby */
.chip.derby .k{color:#FFC94A}
.chip.derby.live{border-color:#E5484D;animation:derbyPulse 2s ease-in-out infinite}
@keyframes derbyPulse{50%{box-shadow:0 0 0 3px rgba(229,72,77,.35)}}
.derby-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px;background:var(--panel-lo);border:3px solid var(--gold)}
.derby-pic{display:grid;place-items:center;min-width:90px}
.derby-sp{font:12px/1.3 var(--pixel);color:var(--gold)}
.derby-when{font:18px/1.1 var(--term);color:var(--ice);margin:4px 0}
.derby-when.live{color:#FF8A8D}
.derby-me{font:19px/1.2 var(--term);padding:8px 10px;background:#1D3866;border:3px solid var(--sonar-dim)}
.derby-me b{color:var(--gold);font-weight:400}
.derby-board{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.derby-board li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 10px;background:var(--panel-lo);border:2px solid var(--edge);font:19px/1.1 var(--term)}
.derby-board li.me{border-color:var(--gold)}
.derby-board li.gap{display:block;color:var(--muted)}
.derby-board .rk{font:10px/1 var(--pixel);color:var(--gold)}
.derby-board .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.derby-board .nm a{color:var(--ice)}
.derby-board small{color:#93B2D2}
.derby-board .lb{color:var(--gold)}
.derby-box{padding:10px 12px;background:var(--panel-lo);border:3px solid var(--edge);font:18px/1.25 var(--term);color:var(--ice)}
.derby-box ul{margin:0;padding-left:18px;display:grid;gap:6px}
.derby-box b{color:var(--gold);font-weight:400}
.derby-box .have{color:var(--sonar)}
.derby-tip{margin:0 0 8px;color:#CFE6F0}
.derby-prizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
.derby-prizes div{padding:8px;background:#0E1E3C;border:2px solid var(--edge);text-align:center;font:18px/1.2 var(--term)}
.derby-prizes b{display:block;font:9px/1.4 var(--pixel);color:var(--gold)}
.derby-prizes small{display:block;color:var(--muted);font-size:15px}
/* event items (Halloween) */
.item{position:relative}
.item .ev-tag{position:absolute;top:3px;left:3px;font:6px/1 var(--pixel);color:#1A0E06;background:#FF9A3A;padding:2px 3px}
.item.event{border-color:#C8601A}
/* boat paint */
.paint-box{display:grid;gap:8px;padding:10px;background:var(--panel-lo);border:3px solid var(--edge)}
.paint-pv{display:grid;place-items:center;min-height:90px;padding:8px;background:linear-gradient(180deg,#9FD3F2 0 60%,#2F6FA8 60%)}
.paint-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.paint-sw .sw{cursor:pointer;display:grid;gap:3px;justify-items:center;padding:6px 4px;background:#0E1E3C;border:2px solid var(--edge);color:var(--ice);text-align:center}
.paint-sw .sw.on{border-color:var(--gold)}
.paint-sw .sw.event{border-color:#C8601A}
.paint-sw .chip-c{width:44px;height:20px;border:2px solid #050B1C}
.paint-sw .sn{font:15px/1.05 var(--term)}
.paint-sw .sn i{display:block;font:6px/1.4 var(--pixel);font-style:normal;color:#FF9A3A}
.paint-sw .sp{font:7px/1 var(--pixel);color:var(--gold)}
/* Halloween theme */
body.halloween .logo b{color:#FF8A1A}
body.halloween .d-title{color:#FF9A3A}
body.halloween .dialog{border-color:#4A2A6A}
.ev-intro{font:19px/1.2 var(--term);color:var(--ice);margin:0}
.ev-intro b,.ev-box b,.ev-f b{color:#FF9A3A;font-weight:400}
.ev-fish{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;background:#1A1030;border:3px solid #4A2A6A}
.ev-fish.got{border-color:#3F8A47}
.ev-pic{display:grid;place-items:center;min-width:80px}
.ev-n{font:10px/1.4 var(--pixel);color:#FF9A3A}
.ev-d{font:17px/1.15 var(--term);color:var(--ice);margin:3px 0}
.ev-f{font:16px/1.2 var(--term);color:var(--muted)}
.ev-box{padding:10px 12px;background:#1A1030;border:3px solid #4A2A6A;font:18px/1.25 var(--term);color:var(--ice);display:grid;gap:8px;justify-items:start}
/* fish tank */
.tank{display:grid;gap:6px;padding:6px;background:#2A1E14;border:4px solid #6A4A2A;box-shadow:inset 0 0 0 2px #3A2A1A}
.tank-cv{width:100%;height:auto;aspect-ratio:2/1;image-rendering:pixelated;cursor:pointer;display:block}
.tank-label{font:17px/1.2 var(--term);color:#E8D8B0;text-align:center;min-height:20px}
.tank-label b{color:var(--gold);font-weight:400}
.item .ev-tag.dev{background:#3CF0FF;color:#0E1322}
.tier.epic{border-color:#FF4D5E;color:#FF6A78}