/* Crabbing in Maryland - simple, punchy arcade style */
:root{
  --bg:#06121e;
  --panel:rgba(8,22,36,.78);
  --panel2:rgba(10,26,44,.88);
  --text:#eaf5ff;
  --muted:#a7c0d6;
  --accent:#43d7ff;
  --accent2:#ffb54a; /* old bay-ish */
  --danger:#ff4f5e;
  --good:#39d98a;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 25px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 22px;
  --border: 1px solid rgba(255,255,255,.12);
  --border2: 1px solid rgba(255,255,255,.18);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box;}
html,body{height:100%; margin:0; background: radial-gradient(900px 500px at 20% 0%, #0d2c49 0%, var(--bg) 60%); color:var(--text); font-family:var(--font);}
#app{position:relative; height:100%; width:100%; overflow:hidden;}
canvas#game{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:auto;}

.hud{
  position:absolute; left:12px; right:12px; top:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; pointer-events:none;
}
.hud-left,.hud-right{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.pill{
  pointer-events:none;
  display:flex; gap:10px; align-items:baseline;
  padding:10px 12px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:var(--border);
  border-radius:999px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(8px);
}
.pill .label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.pill .value{font-size:18px; font-weight:800; color:var(--text);}

.btn{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px;
  padding:10px 14px;
  border:var(--border2);
  background:rgba(255,255,255,.08);
  color:var(--text);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(8px);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.01em;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24);}
.btn:active{transform: translateY(1px) scale(.99);}
.btn.ghost{background:rgba(255,255,255,.06);}
.btn.danger{background:rgba(255,79,94,.14); border-color:rgba(255,79,94,.35);}
.btn.danger:hover{background:rgba(255,79,94,.2);}
.btn .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 26px; height: 22px;
  padding:0 8px;
  border-radius: 999px;
  background: rgba(255,181,74,.16);
  border: 1px solid rgba(255,181,74,.35);
  color: #ffe7c2;
  font-weight:900;
  font-size: 12px;
}
.btn.on{
  background: rgba(255,181,74,.18);
  border-color: rgba(255,181,74,.5);
  box-shadow: 0 0 0 6px rgba(255,181,74,.08), var(--shadow2);
}
.spark{color: #ffd38b; text-shadow: 0 0 12px rgba(255,181,74,.25);}

#toasts{
  position:absolute; left:12px; bottom:12px;
  display:flex; flex-direction:column; gap:8px;
  max-width: min(420px, calc(100% - 24px));
  pointer-events:none;
}
.toast{
  background: linear-gradient(180deg, rgba(16,38,62,.88), rgba(9,23,39,.82));
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  font-weight: 700;
  color: var(--text);
  display:flex; gap:10px; align-items:flex-start;
  animation: pop .18s ease;
}
.toast .dot{
  width:10px; height:10px; border-radius:999px;
  margin-top:4px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(67,215,255,.12);
}
.toast.good .dot{background: var(--good); box-shadow: 0 0 0 6px rgba(57,217,138,.12);}
.toast.bad .dot{background: var(--danger); box-shadow: 0 0 0 6px rgba(255,79,94,.12);}
@keyframes pop{from{transform:translateY(6px); opacity:0} to{transform:translateY(0); opacity:1}}

.panel{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(720px, calc(100% - 24px));
  background: linear-gradient(180deg, rgba(14,34,56,.92), rgba(8,18,30,.86));
  border: var(--border2);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow:hidden;
  pointer-events:auto;
}
.hidden{display:none !important;}
.panel-header{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.panel-title{font-size:18px; font-weight:900;}
.panel-subtitle{font-size:13px; color:var(--muted); margin-top:2px;}
.icon-btn{
  border:0; background:rgba(255,255,255,.08); color:var(--text);
  width:36px; height:36px; border-radius: 12px;
  cursor:pointer; font-size:18px; font-weight:900;
  box-shadow: var(--shadow2);
}
.icon-btn:hover{background:rgba(255,255,255,.12);}
.tray-list{padding: 14px 18px; display:grid; gap:10px;}
.tray-row{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  background: rgba(255,255,255,.06);
  border: var(--border);
  border-radius: 14px;
}
.tray-left{display:flex; gap:12px; align-items:center;}
.crab-chip{
  width:44px; height:34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.crab-chip .mini{
  font-size:18px; line-height:1;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
}
.tray-meta .name{font-weight:900;}
.tray-meta .desc{font-size:12px; color:var(--muted); margin-top:2px;}
.tray-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.small-btn{
  border-radius: 999px;
  padding: 8px 10px;
  border: var(--border2);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
}
.small-btn:hover{background: rgba(255,255,255,.12);}
.small-btn.keep{background: rgba(57,217,138,.14); border-color: rgba(57,217,138,.35);}
.small-btn.keep:hover{background: rgba(57,217,138,.2);}
.small-btn.release{background: rgba(255,255,255,.06);}
.small-btn.oldbay{background: rgba(255,181,74,.16); border-color: rgba(255,181,74,.4);}
.small-btn.oldbay:hover{background: rgba(255,181,74,.22);}
.small-btn:disabled{opacity:.45; cursor:not-allowed;}

.panel-footer{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hint{font-size:12px; color:var(--muted); max-width: 60ch;}
.tiny{font-size:12px; color:var(--muted); margin: 14px 0 0 0;}
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(900px 700px at 30% 20%, rgba(67,215,255,.12), rgba(0,0,0,.70) 55%, rgba(0,0,0,.82) 100%);
  pointer-events:auto;
}
.overlay-card{
  width: min(720px, calc(100% - 24px));
  padding: 18px 18px 16px 18px;
  border-radius: var(--radius2);
  border: var(--border2);
  background: linear-gradient(180deg, rgba(14,34,56,.92), rgba(8,18,30,.86));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.overlay-card h1{margin:0 0 8px 0; font-size: 26px; letter-spacing:-.02em;}
.overlay-card p{margin:0; color: var(--muted); font-weight: 650; line-height:1.4;}
.overlay-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}


/* Keyboard selection highlight */
.tray-row.selected{
  outline: 2px solid rgba(67,215,255,.55);
  box-shadow: 0 0 0 6px rgba(67,215,255,.10), var(--shadow2);
}

.overlay.hidden{display:none !important;}

.tray.hidden{display:none !important;}


/* Primary action buttons */
.btn.primary{
  background: linear-gradient(180deg, rgba(67,215,255,.22), rgba(67,215,255,.12));
  border-color: rgba(67,215,255,.40);
}
.btn.primary:hover{background: linear-gradient(180deg, rgba(67,215,255,.28), rgba(67,215,255,.16));}

/* Error overlay (in-page diagnostics) */
.error-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 50;
}
.error-card{
  width:min(900px, 96vw);
  max-height: 86vh;
  overflow:auto;
  background: linear-gradient(180deg, rgba(12,34,56,.96), rgba(6,18,30,.96));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  padding: 16px 16px 14px;
}
.error-title{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}
.error-sub{ margin-top: 4px; color: rgba(255,255,255,.75); font-size: 13px;}
.error-text{
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
}
.error-actions{display:flex; gap:10px; justify-content:flex-end;}

/* v38-dev watermark */
#versionWatermark{position:fixed;right:10px;bottom:10px;z-index:9999;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#cfe9ff;font:12px/1.1 ui-monospace,Consolas,monospace;}


/* v18: compact HUD to keep the boat and crew visible */
.hud{
  align-items:flex-start;
  gap:8px;
  z-index:30;
}
.hud-left{
  max-width:360px;
  justify-content:flex-start;
}
.hud-right{
  max-width:430px;
  justify-content:flex-end;
}
.pill{
  padding:8px 10px;
  gap:8px;
}
.pill .label{font-size:11px;}
.pill .value{font-size:16px;}
.btn{
  padding:8px 12px;
  gap:8px;
}
.btn .badge{
  min-width:22px;
  height:20px;
  padding:0 6px;
}
#toasts{
  bottom:86px;
}
@media (max-width: 900px){
  .hud{
    left:8px;
    right:8px;
    top:8px;
  }
  .hud-left,.hud-right{
    max-width:100%;
  }
  .pill .value{font-size:14px;}
  .btn{padding:7px 10px;}
}

/* v18: soften HUD panels so they don't visually block the boat */
.pill,.btn{
  background-color:rgba(8,22,36,.62);
}


/* v19: slightly smaller watermark */
#versionWatermark{
  opacity:.85;
}


/* v21: mobile/tablet unsupported message */
.unsupported-device{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(900px 700px at 30% 20%, rgba(67,215,255,.16), rgba(0,0,0,.76) 55%, rgba(0,0,0,.92) 100%),
    #06121e;
  color:var(--text);
}
.unsupported-card{
  width:min(720px, 94vw);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(14,34,56,.94), rgba(8,18,30,.92));
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  padding:24px;
}
.unsupported-card h1{
  margin:0 0 12px 0;
  font-size:28px;
  letter-spacing:-.03em;
}
.unsupported-card p{
  margin:12px 0;
  color:rgba(234,245,255,.9);
  line-height:1.45;
  font-weight:650;
}
.unsupported-card a{
  color:#8ee8ff;
  font-weight:900;
}
.unsupported-signoff{
  margin-top:18px !important;
  color:#ffe7c2 !important;
}
body.unsupported-mode{
  overflow:hidden;
}
body.unsupported-mode #game,
body.unsupported-mode .hud,
body.unsupported-mode #toasts,
body.unsupported-mode #tray,
body.unsupported-mode #overlay,
body.unsupported-mode #errorOverlay,
body.unsupported-mode #versionWatermark{
  display:none !important;
}


/* v22: Old Bay button now contains both key and remaining charges */
#oldBayBtn #oldBayCharges{
  background: rgba(57,217,138,.16);
  border-color: rgba(57,217,138,.35);
  color:#d9ffe9;
}


/* v37 gold upgrades */
button.pill{
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.pill.upgrade-pill{
  pointer-events:auto;
  cursor:pointer;
  color:var(--text);
}
.pill.upgrade-pill:hover{
  background:rgba(255,181,74,.14);
  border-color:rgba(255,181,74,.38);
}
.pill.upgrade-pill.on{
  background:rgba(255,181,74,.20);
  border-color:rgba(255,181,74,.55);
  box-shadow:0 0 0 5px rgba(255,181,74,.08), var(--shadow2);
}
.pill.upgrade-pill.locked{
  opacity:.62;
}
.pill.upgrade-pill:disabled{
  opacity:.50;
  cursor:not-allowed;
}
.pill.gold-wallet .value{
  color:#ffd38b;
}


/* v38-dev self-managed banner placement */
.banner-slot{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 18px);
  width:min(760px, calc(100% - 28px));
  z-index:18;
  opacity:0;
  pointer-events:none;
  transition:opacity .65s ease, transform .65s ease;
}
.banner-slot.show{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.banner-slot.hidden{display:none;}
.banner-link{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:10px 12px;
  border-radius:18px;
  text-decoration:none;
  color:var(--text);
  background:rgba(9, 20, 26, .74);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(10px);
}
.banner-link:hover{
  background:rgba(9, 20, 26, .86);
  border-color:rgba(255,181,74,.40);
}
.banner-image{
  width:180px;
  max-width:30vw;
  height:50px;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.06);
}
.banner-image.hidden{display:none;}
.banner-copy{min-width:0; flex:1;}
.banner-kicker{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
.banner-title{
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}
.banner-subtitle{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.banner-button{
  flex:0 0 auto;
  border-radius:999px;
  padding:9px 13px;
  font-size:13px;
  font-weight:900;
  color:#1b1305;
  background:#ffd38b;
  border:1px solid rgba(255,255,255,.45);
}
@media (max-width: 760px){
  .banner-slot{bottom:12px;}
  .banner-link{min-height:58px; gap:10px;}
  .banner-image{width:120px; height:42px;}
  .banner-title{font-size:15px;}
  .banner-subtitle{font-size:12px;}
  .banner-button{padding:8px 10px; font-size:12px;}
}


/* v39-dev BHH full-image rotating banners */
.banner-slot{
  width:min(1024px, calc(100% - 28px));
  bottom:14px;
}
.banner-link.image-only{
  display:block;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  overflow:hidden;
}
.banner-link.image-only .banner-image{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  max-height:126px;
  object-fit:contain;
  border-radius:22px;
  background:transparent;
}
.banner-link.image-only .banner-copy,
.banner-link.image-only .banner-button{
  display:none;
}


/* v40-dev fade fix: keep banner in an opacity-transitionable state.
   This avoids display:none popping and makes image-only banners fade like the original demo. */
.banner-slot{
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 18px);
  pointer-events:none;
  transition:
    opacity 1.25s ease-in-out,
    transform 1.25s ease-in-out,
    visibility 0s linear 1.25s;
  will-change:opacity, transform;
}
.banner-slot.hidden{
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 18px);
  pointer-events:none;
}
.banner-slot.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
  pointer-events:auto;
  transition:
    opacity 1.25s ease-in-out,
    transform 1.25s ease-in-out,
    visibility 0s linear 0s;
}
.banner-link.image-only{
  transition:
    filter 1.25s ease-in-out,
    transform 1.25s ease-in-out;
}


/* v41-dev: forced fade + responsive banner fit.
   The banner uses JS animation for fade-in/out. CSS keeps it visible to layout,
   inside the viewport, and scalable when the browser window is narrow. */
.banner-slot,
.banner-slot.hidden{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:clamp(8px, 2vh, 18px) !important;
  width:min(760px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  display:block !important;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 18px) scale(0.985);
  pointer-events:none;
  z-index:999 !important;
  overflow:visible;
}
.banner-slot.show{
  display:block !important;
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0) scale(1);
  pointer-events:auto;
}
.banner-link.image-only{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  overflow:hidden;
  border-radius:18px;
}
.banner-link.image-only .banner-image{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:min(94px, 18vh) !important;
  object-fit:contain !important;
  border-radius:18px;
  background:transparent !important;
}
.banner-link.image-only .banner-image.hidden{
  display:none !important;
}
@media (max-width: 760px){
  .banner-slot,
  .banner-slot.hidden{
    width:calc(100vw - 14px) !important;
    max-width:calc(100vw - 14px) !important;
    bottom:8px !important;
  }
  .banner-link.image-only{
    border-radius:12px;
  }
  .banner-link.image-only .banner-image{
    border-radius:12px;
    max-height:min(72px, 16vh) !important;
  }
}


/* v42-dev debug/version display:
   Off by default. Press Shift+D, or open with ?debug=1, to show it. */
#versionWatermark,
.debug-info{
  display:none !important;
}
body.debug-visible #versionWatermark{
  display:block !important;
}
body.debug-visible .debug-info{
  display:flex !important;
}


/* v44-dev Golden Basket HUD */
.golden-feature{
  display:none !important;
}
body.golden-unlocked .golden-feature{
  display:flex !important;
}
.golden-feature{
  border-color:rgba(255,211,103,.45) !important;
}
.golden-feature .label,
.golden-feature .value{
  color:#ffe293;
}
.golden-feature.on{
  background:linear-gradient(180deg, rgba(115,81,20,.86), rgba(54,39,14,.86)) !important;
  border-color:rgba(255,211,103,.85) !important;
  box-shadow:0 0 0 5px rgba(255,211,103,.10), var(--shadow2) !important;
}


/* v47-live screen size lock */
body.screen-locked{
  overflow:auto;
}
body.screen-locked #app{
  width:var(--locked-game-w);
  height:var(--locked-game-h);
  min-width:var(--locked-game-w);
  min-height:var(--locked-game-h);
  max-width:var(--locked-game-w);
  max-height:var(--locked-game-h);
}
.resize-lock-notice{
  position:absolute;
  right:12px;
  bottom:72px;
  z-index:40;
  max-width:min(520px, calc(100% - 24px));
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,211,103,.42);
  background:linear-gradient(180deg, rgba(57,41,12,.88), rgba(21,30,38,.86));
  color:#ffe7b0;
  font-weight:900;
  box-shadow:var(--shadow2);
  backdrop-filter:blur(10px);
  pointer-events:none;
}


/* v48 SEO content */\n.seo-info{width:min(1100px,calc(100% - 28px));margin:18px auto 30px;padding:0}\n.seo-info-inner{border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(11,22,31,.78);box-shadow:var(--shadow2);padding:20px 22px}\n.seo-info h1{margin:0 0 10px;font-size:clamp(22px,3vw,34px);line-height:1.1}\n.seo-info p{margin:8px 0;max-width:900px;color:rgba(255,255,255,.82)}\n.seo-support-note{font-weight:800;color:#ffe7b0!important}\n.seo-keywords{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}\n.seo-keywords span{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(67,215,255,.08);border:1px solid rgba(67,215,255,.18);color:rgba(255,255,255,.78);font-size:12px;font-weight:800}\n

/* v49-dev: a compact local-business sponsor in the Pot Pulled header. */
#tray.panel{
  width:min(860px,calc(100% - 24px));
  max-height:calc(100% - 24px);
  display:flex;
  flex-direction:column;
}
#tray.panel.hidden{display:none!important;}
#tray .panel-header{
  display:grid;
  grid-template-columns:minmax(128px,155px) minmax(0,1fr) 36px;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  flex-shrink:0;
}
#tray .tray-list{overflow-y:auto;min-height:0;}
#tray .panel-footer{flex-shrink:0;}
.pot-sponsor{
  min-width:0;
  min-height:70px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  color:#35241b;
  text-decoration:none;
  background:linear-gradient(105deg,#fff9e8 0%,#ffe7b3 73%,#f9d18e 100%);
  border:2px solid #e8ae58;
  border-radius:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:filter .15s ease;
}
.pot-sponsor:hover{filter:brightness(1.045);}
.pot-sponsor:focus-visible{outline:3px solid #43d7ff;outline-offset:2px;}
.pot-sponsor-mark{font-size:31px;flex-shrink:0;line-height:1;}
.pot-sponsor-main{min-width:0;display:flex;flex-direction:column;gap:1px;}
.pot-sponsor-label{font-size:9px;letter-spacing:.08em;font-weight:900;color:#9a3d25;}
.pot-sponsor-name{font-size:17px;line-height:1.05;font-weight:900;color:#9b251e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pot-sponsor-address{font-size:11px;line-height:1.2;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pot-sponsor-tagline{font-size:10px;color:#704d37;}
.pot-sponsor-cta{margin-left:auto;flex-shrink:0;background:#a42d1e;color:#fff5e4;padding:8px 10px;border-radius:8px;font-size:11px;font-weight:900;white-space:nowrap;}
.btn:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.55);pointer-events:none;}
.btn:disabled:hover{transform:none;}
/* Let the three permitted HUD controls remain clickable behind end-of-run modal. */
.overlay.end-state{pointer-events:none;}
.overlay.end-state .overlay-card{pointer-events:auto;}
body.run-finished #dropBtn,
body.run-finished #pullBtn,
body.run-finished #oldBayBtn,
body.run-finished #goldFilterBtn,
body.run-finished #goldPotsBtn,
body.run-finished #goldenBasketBtn{pointer-events:none;}
@media (max-width:760px){
  #tray .panel-header{grid-template-columns:minmax(100px,1fr) 36px;gap:8px;}
  #tray .panel-header>div:first-child{grid-column:1;grid-row:1;}
  #tray .panel-header>.icon-btn{grid-column:2;grid-row:1;}
  #tray .pot-sponsor{grid-column:1 / -1;grid-row:2;}
}

#overlayText{white-space:pre-line;}

/* v49.1: screen-size diagnostics are for developers only (Shift+D). */
#overlayDebugSize{
  display:none !important;
  white-space:pre-line;
  margin-top:12px;
  padding:10px 12px;
  font-size:12px;
  font-weight:650;
  border-radius:10px;
  border:1px dashed rgba(255,211,103,.38);
  background:rgba(255,211,103,.07);
  color:#ffe7b0;
}
body.debug-visible #overlayDebugSize:not(:empty){display:block !important;}
.resize-lock-notice{display:none !important;}
body.debug-visible .resize-lock-notice:not(.hidden){display:block !important;}


/* v49.3: live, accessible Chesapeake celebration built from real HTML controls.
   Illustration is decorative only; scores, baskets, awards, buttons are dynamic. */
.overlay.celebration{
  background:radial-gradient(ellipse at 50% 30%,rgba(12,81,116,.22),rgba(0,9,20,.74) 67%,rgba(0,5,12,.87));
}
.overlay.celebration .overlay-card{
  position:relative;
  width:min(1040px,calc(100% - 28px));
  max-height:calc(100% - 20px);
  overflow-y:auto;
  overflow-x:hidden;
  border:2px solid #078ad1;
  border-radius:27px;
  padding:15px 28px 20px;
  background:
    linear-gradient(180deg,rgba(0,39,79,.55) 0%,rgba(8,38,68,.62) 32%,rgba(230,115,51,.34) 72%,rgba(43,20,17,.63) 100%),
    url('./assets/finish-bay-backdrop.jpg') center center / cover no-repeat,
    #063a62;
  box-shadow:0 0 0 5px rgba(6,39,65,.85),0 25px 75px rgba(0,0,0,.76);
  text-align:center;
  isolation:isolate;
}
.overlay.celebration .overlay-card::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 110%,rgba(255,177,75,.37),transparent 61%);
}
.overlay.celebration #overlayTitle{
  position:absolute!important;
  width:1px!important;height:1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.overlay.celebration #overlayText,
.overlay.celebration .tiny{display:none!important;}
.finish-celebration{display:flex;flex-direction:column;gap:9px;}
.finish-banner{
  position:relative;
  margin:0 auto;
  width:min(96%,900px);
  min-height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px 12px 12px 170px;
  border:3px solid rgba(99,49,17,.88);
  border-radius:16px 22px 16px 22px;
  background:
    repeating-linear-gradient(3deg,transparent 0px,rgba(17,6,2,.12) 4px,transparent 7px,transparent 22px),
    linear-gradient(177deg,#aa7043 0%,#70401f 16%,#b97b49 35%,#6d3c20 56%,#9b5c2c 76%,#56331d 100%);
  box-shadow:inset 0 2px 2px rgba(255,222,169,.55),inset 0 -5px 9px rgba(34,13,4,.64),0 10px 0 rgba(26,17,9,.3),0 13px 23px rgba(0,0,0,.42);
  transform:rotate(-.35deg);
}
.finish-mascot{
  position:absolute;
  left:-30px;
  bottom:-40px;
  width:202px;
  height:196px;
  object-fit:contain;
  filter:drop-shadow(0 6px 3px rgba(0,0,0,.5));
  pointer-events:none;
}
.finish-headline{font-family:'Trebuchet MS',Verdana,system-ui,sans-serif;line-height:1.02;letter-spacing:-.055em;}
.finish-headline-main{
  color:#f13b22;
  font-size:clamp(32px,4.5vw,62px);
  font-weight:1000;
  -webkit-text-stroke:1.5px #fff4dd;
  text-shadow:0 3px 0 #731307,2px 5px 0 #2e0c07,-2px 5px 0 #2e0c07,0 9px 10px rgba(0,0,0,.75);
}
.finish-headline-second{
  margin-top:3px;
  color:#fff8eb;
  font-size:clamp(29px,4vw,53px);
  font-weight:1000;
  -webkit-text-stroke:1px #183f61;
  text-shadow:0 4px 0 #092a4d,0 6px 7px rgba(0,0,0,.8);
}
.finish-headline-crab{font-size:.67em;vertical-align:middle;-webkit-text-stroke:0;text-shadow:none;}
.finish-subtitle{
  color:#fff5dc!important;
  font-size:clamp(13px,1.7vw,17px)!important;
  font-style:italic;
  font-weight:850!important;
  line-height:1.28!important;
  text-shadow:0 2px 3px #0b263f,0 2px 8px #0b263f;
}
.finish-results-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:18px;
  min-height:197px;
}
.finish-scoreboard{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px 12px;
  border-radius:13px;
  border:4px solid #42210d;
  background:
    repeating-linear-gradient(1deg,transparent 0px,rgba(35,12,4,.12) 2px,transparent 5px,transparent 25px),
    linear-gradient(180deg,#9e5b2b,#663a1b 28%,#a56a35 52%,#683c1c 77%,#8b4e24);
  box-shadow:inset 0 2px 0 rgba(255,224,167,.48),inset 0 -5px 5px rgba(26,12,4,.5),0 7px 12px rgba(0,0,0,.5);
}
.finish-score-title{
  color:#fff8e9;
  font-weight:1000;
  font-size:clamp(19px,2.5vw,30px);
  letter-spacing:-.05em;
  -webkit-text-stroke:.4px #073354;
  text-shadow:0 3px 1px #082b4a,0 5px 4px #1c120b;
}
.finish-scoreline{display:flex;flex-direction:column;align-items:center;gap:0;margin:0;}
#finishScore{
  color:#ffc029;
  font-family:'Trebuchet MS',Verdana,system-ui,sans-serif;
  font-size:clamp(58px,7.3vw,98px);
  line-height:.98;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.06em;
  -webkit-text-stroke:2px #52250b;
  text-shadow:0 3px 0 #f3720d,3px 6px 0 #052d51,-3px 6px 0 #052d51,0 9px 10px rgba(0,0,0,.65);
}
.finish-points-label{
  font-size:clamp(18px,2.4vw,27px);
  font-weight:1000;
  color:#fff8f0;
  -webkit-text-stroke:.5px #062f4d;
  text-shadow:0 3px 0 #083c62,0 4px 5px rgba(0,0,0,.7);
}
.finish-rank{
  display:inline-flex;justify-content:center;align-items:center;
  padding:4px 11px;margin-top:7px;
  background:rgba(20,12,7,.66);
  color:#ffe4a4;
  border:1px solid rgba(255,225,166,.47);
  border-radius:999px;
  font-size:12px;font-weight:900;
}
.finish-stats{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
  gap:0;
  border:3px solid #b17a43;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg,#fff2d3,#f6dfb3);
  box-shadow:0 6px 14px rgba(0,0,0,.43),inset 0 0 18px rgba(113,65,23,.12);
}
.finish-stat{
  min-width:0;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  text-align:left;
  gap:8px;
  padding:10px 15px;
  color:#0c2e50;
}
.finish-stat+.finish-stat{border-top:2px solid rgba(117,69,27,.23);}
.finish-stat-icon{font-size:40px;line-height:1;text-align:center;filter:drop-shadow(0 2px 1px rgba(0,0,0,.17));}
.finish-stat-copy{min-width:0;}
.finish-stat-value{font-size:clamp(16px,2vw,22px);font-weight:1000;color:#123052;line-height:1.2;}
.finish-stat-caption{font-size:clamp(11px,1.3vw,14px);font-weight:750;color:#4e4137;margin-top:4px;}
.finish-stat-percent{font-size:clamp(23px,3vw,38px);color:#083d70;line-height:1;letter-spacing:-.07em;white-space:nowrap;text-shadow:1px 2px 0 #fff;}
.finish-stat:last-child .finish-stat-percent{color:#ba7d06;}
.finish-quip-wrap{
  min-height:49px;
  display:flex;align-items:center;justify-content:center;
  margin:1px auto 0;
  padding:8px 20px;
  width:min(92%,790px);
  border-radius:14px;
  background:linear-gradient(90deg,transparent,rgba(255,216,134,.92) 18%,rgba(255,232,177,.97) 50%,rgba(255,216,134,.92) 82%,transparent);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.28));
}
.finish-quip{font-family:'Trebuchet MS',Verdana,system-ui,sans-serif;color:#083154!important;font-size:clamp(14px,2vw,20px)!important;font-weight:1000!important;font-style:italic;line-height:1.2!important;text-align:center;}
.overlay.celebration .overlay-actions{justify-content:center;align-items:center;gap:13px;margin-top:7px;}
.overlay.celebration .overlay-actions .btn{
  justify-content:center;
  min-width:130px;
  border:2px solid #a7d6f5;
  padding:12px 22px;
  background:linear-gradient(180deg,#15547e,#06345c);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.23),0 5px 0 #042139,0 8px 15px rgba(0,0,0,.55);
  color:white;
  font-size:clamp(13px,1.6vw,18px);
  font-weight:1000;
}
.overlay.celebration .overlay-actions .btn:first-child{
  min-width:min(380px,100%);
  border:3px solid #fff4d8;
  color:#fff9ec;
  background:linear-gradient(180deg,#ff5145,#df111b 70%,#b40717);
  text-shadow:0 2px 2px rgba(67,3,5,.8);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.38),0 5px 0 #78070f,0 8px 15px rgba(0,0,0,.58);
}
.overlay.celebration .overlay-actions .btn:first-child:hover{background:linear-gradient(180deg,#ff7060,#f1262d 70%,#c90e1d);}
.overlay.celebration .overlay-actions .btn:hover{filter:brightness(1.13);}
.overlay.celebration #overlayDebugSize{margin:12px auto 0;text-align:left;max-width:95%;background:rgba(6,23,42,.9);}
@media(max-width:850px){
  .overlay.celebration .overlay-card{padding:12px 15px 15px;}
  .finish-banner{min-height:106px;padding-left:120px;}
  .finish-mascot{width:155px;height:155px;left:-25px;bottom:-32px;}
  .finish-results-grid{gap:10px;min-height:160px;}
  .finish-stat{grid-template-columns:34px minmax(0,1fr) auto;padding:8px 9px;gap:5px;}
  .finish-stat-icon{font-size:28px;}
  .finish-rank{font-size:10px;}
}
@media(max-width:600px){
  .finish-banner{min-height:95px;padding-left:65px;}
  .finish-mascot{width:100px;height:100px;left:-20px;bottom:-17px;}
  .finish-headline-main{font-size:clamp(22px,6vw,34px);}
  .finish-headline-second{font-size:clamp(20px,5.6vw,30px);}
  .finish-results-grid{grid-template-columns:1fr;gap:8px;}
  .finish-scoreboard{padding:9px;}
  .finish-stats{min-height:130px;}
  .finish-stat-percent{font-size:25px;}
  .finish-quip-wrap{padding:6px 9px;width:100%;}
  .overlay.celebration .overlay-actions .btn{padding:10px 12px;}
  .overlay.celebration .overlay-actions .btn:first-child{min-width:0;}
}
@media(max-height:630px){
  .overlay.celebration .overlay-card{padding-top:8px;padding-bottom:11px;}
  .finish-celebration{gap:6px;}
  .finish-banner{min-height:103px;}
  .finish-results-grid{min-height:164px;}
  .finish-quip-wrap{min-height:38px;}
  .overlay.celebration .overlay-actions{margin-top:6px;}
  .overlay.celebration .overlay-actions .btn{padding-top:9px;padding-bottom:9px;}
}
@media(prefers-reduced-motion:reduce){
  .overlay.celebration .overlay-actions .btn{transition:none;}
}

/* Keep the three post-run HUD buttons clickable outside the celebration card. */
.overlay.celebration{z-index:35;align-items:flex-start;padding:108px 0 10px;}
.overlay.celebration .overlay-card{max-height:100%;}
@media(max-height:720px){
  .overlay.celebration{padding-top:102px;padding-bottom:9px;}
  .finish-banner{min-height:95px;padding-top:7px;padding-bottom:7px;}
  .finish-mascot{width:166px;height:160px;bottom:-28px;}
  .finish-headline-main{font-size:clamp(30px,4.1vw,52px);}
  .finish-headline-second{font-size:clamp(27px,3.7vw,44px);}
  .finish-results-grid{min-height:176px;}
  .finish-scoreboard{padding:7px;}
  .finish-score-title{font-size:clamp(17px,2.1vw,24px);}
  #finishScore{font-size:clamp(53px,6vw,76px);}
  .finish-points-label{font-size:clamp(16px,2vw,22px);}
  .finish-stat{padding-top:6px;padding-bottom:6px;}
  .finish-stat-icon{font-size:32px;}
  .finish-quip-wrap{min-height:38px;padding-top:6px;padding-bottom:6px;}
  .finish-quip{font-size:clamp(13px,1.7vw,17px)!important;}
}
@media(max-height:510px){
  .overlay.celebration{padding-top:92px;padding-bottom:6px;}
}

/* v49.4: stats-only clarification; all v49.3 celebration artwork/layout preserved. */
.finish-stats.single-row{grid-template-rows:1fr;}

/* v49.5: paid-ad fallback only; does not use or advance nonprofit banner rotation. */
#tray .pot-sponsor.hidden, #tray .pot-sponsor-empty.hidden{display:none!important;}
#tray .pot-sponsor-empty{cursor:default;background:linear-gradient(105deg,#fff9e8,#ffe8bf);}
#tray .pot-sponsor-empty .pot-sponsor-name{font-size:17px;white-space:normal;}
#tray .pot-sponsor-empty .pot-sponsor-tagline{font-size:12px;line-height:1.3;font-weight:700;}
@media (max-width:760px){#tray .pot-sponsor-empty{grid-column:1 / -1;grid-row:2;}}

/* v49.7 DEV: six unmistakable paid-sponsor group themes. Nonprofit banners unaffected. */
#tray .pot-sponsor[data-pot-group]{position:relative;min-height:78px;padding:7px 11px;gap:8px;overflow:hidden;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-main{flex:1;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-name{font-size:16px;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-label{font-size:9px;letter-spacing:.045em;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-tagline{font-size:11px;font-weight:700;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-group{
  flex-shrink:0;align-self:center;max-width:78px;text-align:center;font-size:9px;
  font-weight:900;letter-spacing:.045em;line-height:1.15;padding:6px 4px;
  border-radius:7px;border:1px solid currentColor;
}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-cta{padding:7px 8px;}
#tray .pot-sponsor[data-pot-group="primary"]{background:linear-gradient(105deg,#fff7cf,#ffc15a);border-color:#d78a08;color:#663c00;}
#tray .pot-sponsor[data-pot-group="primary"] .pot-sponsor-cta{background:#a15c00;}
#tray .pot-sponsor[data-pot-group="secondary"]{background:linear-gradient(105deg,#dff8ff,#6ecce6);border-color:#168da8;color:#064c61;}
#tray .pot-sponsor[data-pot-group="secondary"] .pot-sponsor-cta{background:#12647a;}
#tray .pot-sponsor[data-pot-group="tertiary"]{background:linear-gradient(105deg,#e9ffe5,#8ad38e);border-color:#3d9946;color:#20592c;}
#tray .pot-sponsor[data-pot-group="tertiary"] .pot-sponsor-cta{background:#237238;}
#tray .pot-sponsor[data-pot-group="bonus"]{background:linear-gradient(105deg,#ffe9f7,#efa1d7);border-color:#bb5296;color:#672350;}
#tray .pot-sponsor[data-pot-group="bonus"] .pot-sponsor-cta{background:#98346f;}
#tray .pot-sponsor[data-pot-group="purchased"]{background:linear-gradient(105deg,#f0eaff,#b9a2ed);border-color:#7655b5;color:#3e2a75;}
#tray .pot-sponsor[data-pot-group="purchased"] .pot-sponsor-cta{background:#60469c;}
#tray .pot-sponsor[data-pot-group="golden"]{background:linear-gradient(105deg,#fff7e5,#ffdb75);border-color:#b67b18;color:#694600;box-shadow:0 2px 12px rgba(252,188,38,.45);}
#tray .pot-sponsor[data-pot-group="golden"] .pot-sponsor-cta{background:#8d640b;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-name{color:inherit;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-address{color:inherit;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-label{color:inherit;}
#tray .pot-sponsor[data-pot-group] .pot-sponsor-tagline{color:inherit;}
@media(max-width:850px){
  #tray .pot-sponsor[data-pot-group] .pot-sponsor-group{display:none;}
  #tray .pot-sponsor[data-pot-group] .pot-sponsor-name{font-size:14px;}
}