@font-face{font-family:Pocket;src:url(../game-assets/fonts/pixel.ttf) format("truetype");font-weight:100 900;font-display:swap}
/* ============================================
   RESET
============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: monospace;
  background: #bfe8ab;
  color: white;
}

a { color: inherit; }

/* ============================================
   PAGE / HEADER / NAV / HERO / FOOTER
============================================ */

.page {
  min-height: calc(100 * var(--app-vh, 1vh));
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0 0.75rem;
  z-index: 20;
  color: white;
}

.logo { font-weight: 700; letter-spacing: 0.12em; font-size: 0.9rem; text-transform: uppercase; padding: 0.35rem 0.75rem; }
.nav { display: flex; align-items: center; gap: 1.2rem; font-size: 0.9rem; }

.nav a, .hero-actions a {
  color: inherit; text-decoration: none; padding: 0.2rem 0;
  position: relative; margin: 8px; border-bottom: 0 solid white;
}

.nav a::after, .hero-actions a::after {
  content: ""; position: absolute; left: 0; bottom: -0.25rem;
  width: 0%; height: 2px;
  background: linear-gradient(to right, #22c55e, #22d3ee);
  transition: width 160ms ease-out;
}

.nav a:hover, .hero-actions a:hover { color: darkcyan; }
.nav a:hover::after, .hero-actions a:hover::after { width: 80%; }
.nav a[data-view] { cursor: pointer; }
.nav a.active { color: darkcyan; }
.nav a.active::after { width: 80%; }

.cta-btn { padding: 0.55rem 1.2rem; border-radius: 5px; border: none; font-weight: 600; font-size: 0.85rem; cursor: pointer; white-space: nowrap; background: royalblue; color: white; }
.cta-btn:hover { filter: brightness(1.05); }

.hero {
  max-width: 720px; margin: 2.4rem auto 1.8rem; padding: 2.2rem 1.8rem 2.1rem;
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center; row-gap: 1.6rem;
}

.hero-main { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero-title { line-height: 1.1; text-shadow: 2px 2px darkslateblue; }
.hero-subtitle { color: inherit; max-width: 36rem; font-size: 1.1em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.hero-media { width: 100%; max-width: 420px; display: flex; justify-content: center; }

.hero-placeholder {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(74,222,128,0.18), transparent 55%),
              radial-gradient(circle at bottom right, rgba(56,189,248,0.18), transparent 55%), #020617;
  border: 1px solid rgba(148,163,184,0.4); box-shadow: 0 20px 40px rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #9ca3af;
}

.btn { border-radius: 999px; padding: 0.65rem 1.4rem; font-size: 0.92rem; border: 1px solid transparent; cursor: pointer; font-weight: 500; transition: background 200ms ease-out, color 200ms ease-out, transform 140ms ease-out; }
.btn.primary { padding: 0.55rem 1.2rem; border-radius: 0; border: none; font-weight: 600; font-size: 0.85rem; white-space: nowrap; background: #2081e2; color: white; box-shadow: 2px 2px darkslateblue; }
.btn.secondary { padding: 0.55rem 1.2rem; border-radius: 0; border: none; font-weight: 600; font-size: 0.85rem; white-space: nowrap; background: lightcoral; color: white; box-shadow: 2px 2px darkslateblue; }
.btn:hover { transform: translateY(-1px); }

.dashboard-main { display: flex; flex-direction: column; gap: 1.2rem; padding: 0.6rem 0 1.6rem; max-width: 1120px; margin: 0 auto; }

.panel { background: lightseagreen; border: 0 solid white; padding: 1.2rem 1.3rem 1.3rem; box-shadow: 2px 2px darkslateblue; border-radius: 0; }
.panel h2 { font-size: 1rem; margin-top: 0; margin-bottom: 0.4rem; color: white; text-shadow: 2px 2px darkslateblue; }
.panel p { margin: 0; color: white; font-size: 1em; }

.site-footer { padding-top: 0.8rem; border-top: 1px solid white; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: white; }
.footer-links { display: flex; gap: 0.8rem; }
.footer-links a { color: white; text-decoration: none; }

@media (max-width: 768px) {
  .site-header { flex-wrap: wrap; align-items: flex-start; gap: 0.9rem; }
  .nav { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  .hero { margin-top: 1.8rem; padding: 1.8rem 1.4rem; }
  .hero-placeholder { max-width: 100%; }
}

/* ============================================
   FROG IMAGES / NFT GRID
============================================ */

.fly { width: 128px; height: 128px; margin: 8px; box-shadow: 2px 2px darkslateblue; image-rendering: pixelated; }

.recent_sales, .nft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 0 auto 2rem; }
@media (max-width: 960px) { .recent_sales, .nft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .recent_sales, .nft-grid { grid-template-columns: minmax(0, 1fr); } }

.sale_card_title { float: left; margin-left: 4px; color: lightgreen; text-shadow: 2px 2px darkslateblue; }
.sale_card_price { float: right; margin-right: 4px; }
.recent_sale_header { text-align: left; margin: 8px; height: 16px; }
.frog_img, .recent_sale_img { width: 128px; height: 128px; image-rendering: pixelated; }

.recent_sale_properties { border-top: 1px solid white; padding: 8px; margin: 8px; color: lightseagreen; margin-bottom: 0; font-size: 0.9em; }
.recent_sale_properties p { margin: 2px; text-align: left; color: white; font-size: 1em; }

.frog_img_cont {
  position: relative; margin: 24px auto; width: 128px; height: 128px; overflow: hidden;
  border-radius: 0; box-shadow: 2px 2px darkslateblue; background-color: #020617;
  background-repeat: no-repeat; background-size: 220% 220%; background-position: bottom right;
}

.trait_overlay, .attribute_overlay {
  position: absolute; left: 0; top: 0; width: 128px; height: 128px;
  image-rendering: pixelated; pointer-events: auto;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, filter 160ms ease-out;
}
.trait_overlay:hover, .attribute_overlay:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 8px rgba(125,211,252,0.7); filter: brightness(1.1); z-index: 5; }
.trait_overlay.is-highlighted, .attribute_overlay.is-highlighted { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 8px rgba(125,211,252,0.7); filter: brightness(1.1); z-index: 5; }

.frog-attr-text { cursor: default; transition: color 160ms ease-out, text-shadow 160ms ease-out; }
.frog-attr-text.is-highlighted { color: #7dd3fc; text-shadow: 0 0 4px rgba(125,211,252,0.7); }

.recent_sale_links { display: flex; flex-wrap: wrap; gap: 0; margin: 0; margin-top: 10px; }
.sale_link_btn { color: white; border: none; box-shadow: 2px 2px darkslateblue; padding: 4px 8px; font-family: monospace; width: 100%; margin: 4px; cursor: pointer; background: lightcoral; }
.sale_link_btn:hover { transform: translateY(-1px); background: white; color: #333; }
.sale_link_btn.opensea { background-color: #2081e2; }
.sale_link_btn.etherscan { background: antiquewhite; color: #333; }

.staking-sale-note { margin-top: 4px; font-size: 0.7rem; color: #9ca3af; }
.staking-sale-stats { margin-top: 4px; font-size: 0.75rem; color: #e0f2fe; }
.staking-sale-stats strong { color: white; }

.stake-meta { margin: 8px; margin-top: 0; font-size: 0.75rem; color: #e5e7eb; }
.stake-meta-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.stake-meta-subrow { font-size: 0.9em; border-top: 1px solid white; padding: 8px; color: white; margin-top: 8px; }
.stake-level-label { font-weight: 600; color: #fbbf24; text-shadow: 2px 2px darkslateblue; }
.stake-rewards-label { font-weight: 500; color: #fbbf24; }
.stake-progress { position: relative; width: 100%; height: 8px; border-radius: 999px; background: white; overflow: hidden; margin-top: 2px; }
.stake-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: inherit; background: #fbbf24; transition: width 260ms ease-out; }
.stake-progress-label { margin-top: 3px; font-size: 0.7rem; color: #9ca3af; }
.dashboard-note { font-size: 0.78rem; color: #9ca3af; margin-bottom: 0.6rem; }

.recent_sale_card { width: 240px; max-width: 240px; margin: 8px auto; align-self: flex-start; background: lightseagreen; padding: 8px; box-shadow: 2px 2px darkslateblue; }
.nft-grid .recent_sale_card { max-width: 240px; width: 240px; margin: 8px auto; }

.frog-owner-link { color: inherit; text-decoration: none; }
.frog-owner-link:hover { text-decoration: underline; }

.morph-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; justify-content: center; }
.morph-thumb { width: 128px; height: 128px; padding: 0; border: 2px solid transparent; background: transparent; cursor: pointer; position: relative; }
.morph-thumb img { width: 128px; height: 128px; image-rendering: pixelated; display: block; }
.morph-thumb-label { position: absolute; bottom: 2px; left: 4px; font-size: 12px; background: rgba(0,0,0,0.65); color: white; padding: 1px 4px; border-radius: 4px; }
.morph-thumb.selected { border-color: #52ff9b; box-shadow: 0 0 0 2px rgba(82,255,155,0.5); }

.recent_sale_card .frog-actions { display: flex; gap: 0; justify-content: center; }
.frog-actions .frog_action_btn { background: cornflowerblue; color: white; border: none; box-shadow: 2px 2px darkslateblue; padding: 4px 8px; font-family: monospace; width: 100%; margin: 4px; cursor: pointer; }
.frog_action_btn:hover { transform: translateY(-1px); background: white; color: #333; }

.sidebar .wallet-summary { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; }
.wallet-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.wallet-avatar { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; }
.wallet-username { font-weight: bold; color: white; text-shadow: 2px 2px darkslateblue; font-size: 1.1em; }
.wallet-address { font-size: 0.8em; color: white; }
.wallet-status-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: #e5e7eb; }
.wallet-status-row span:last-child { font-weight: bold; color: lightgreen; }
.wallet-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.6rem; }
.wallet-stat { background: antiquewhite; padding: 0.35rem 0.45rem; color: #333; }
.wallet-stat .stat-label { display: block; font-size: 0.8rem; color: #333; }
.wallet-stat .stat-value { display: block; font-size: 1.1em; font-weight: bold; color: #333; }

.rarity_badge { text-shadow: 2px 2px darkslateblue; }
.rarity_legendary { border-color: gold; color: gold; }
.rarity_epic { border-color: #a855f7; color: #c4b5fd; }
.rarity_rare { border-color: #22d3ee; color: #a5f3fc; }
.rarity_common { border-color: #9ca3af; color: #e5e7eb; }
.rarity_unknown { opacity: 0.7; }

/* ============================================
   FROG BACKGROUND + SPRITES
============================================ */

#frog-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; background: #bfe8ab; overflow: hidden; image-rendering: pixelated; pointer-events: none; }
#frog-bg .grass-field { position: absolute; inset: 0; pointer-events: none; }
#frog-bg .grass { position: absolute; width: 12px; height: 10px; transform-origin: bottom center; animation: bgGrassSway linear infinite; opacity: 0.95; }

#frog-bg .grass.variant-1 .blade.b1 { left: 1px; height: 4px; background: #5e9d45; }
#frog-bg .grass.variant-1 .blade.b2 { left: 4px; height: 8px; background: #4f8c39; }
#frog-bg .grass.variant-1 .blade.b3 { left: 7px; height: 6px; background: #6cae4d; }
#frog-bg .grass.variant-1 .blade.b4 { left: 9px; height: 3px; background: #4b7f35; }
#frog-bg .grass.variant-2 .blade.b1 { left: 1px; height: 6px; background: #6cae4d; }
#frog-bg .grass.variant-2 .blade.b2 { left: 3px; height: 5px; background: #4f8c39; }
#frog-bg .grass.variant-2 .blade.b3 { left: 6px; height: 8px; background: #5e9d45; }
#frog-bg .grass.variant-2 .blade.b4 { left: 9px; height: 4px; background: #4b7f35; }
#frog-bg .grass.variant-3 .blade.b1 { left: 1px; height: 3px; background: #4b7f35; }
#frog-bg .grass.variant-3 .blade.b2 { left: 4px; height: 7px; background: #5e9d45; }
#frog-bg .grass.variant-3 .blade.b3 { left: 7px; height: 5px; background: #6cae4d; }
#frog-bg .grass.variant-3 .blade.b4 { left: 9px; height: 6px; background: #4f8c39; }
#frog-bg .grass.variant-4 .blade.b1 { left: 0px; height: 5px; background: #6cae4d; }
#frog-bg .grass.variant-4 .blade.b2 { left: 3px; height: 9px; background: #4f8c39; }
#frog-bg .grass.variant-4 .blade.b3 { left: 7px; height: 4px; background: #5e9d45; }
#frog-bg .grass.variant-4 .blade.b4 { left: 10px; height: 5px; background: #4b7f35; }

#frog-bg .blade { position: absolute; bottom: 0; width: 2px; border-radius: 0; }
#frog-bg .blade.b1 { left: 1px; height: 5px; background: #5e9d45; }
#frog-bg .blade.b2 { left: 4px; height: 8px; background: #4f8c39; }
#frog-bg .blade.b3 { left: 7px; height: 6px; background: #6cae4d; }
#frog-bg .blade.b4 { left: 9px; height: 4px; background: #4b7f35; }
#frog-bg .flower { position: absolute; width: 2px; height: 2px; background: #fff5b8; box-shadow: 2px 0 0 #fff5b8, 0 2px 0 #fff5b8, 2px 2px 0 #fff5b8; top: 0; left: 4px; opacity: 0.9; }
#frog-bg .rock { position: absolute; width: 6px; height: 4px; background: #96ad84; bottom: 0; left: 3px; box-shadow: 2px 0 0 #829672; opacity: 0.8; }

@keyframes bgGrassSway {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  50%  { transform: translateY(-1px) rotate(2deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

.frog-sprite { position: absolute; width: 64px; height: 64px; pointer-events: none; image-rendering: pixelated; }
.frog-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.frog-sprite-base { z-index: 1; }
.frog-sprite-skin { z-index: 2; }
.frog-sprite-eyes { z-index: 3; }
.frog-sprite-hat  { z-index: 4; }

/* ============================================
   FROG GAME OVERLAYS + PANELS
============================================ */

.frog-overlay {
  position: absolute; inset: 0; background: transparent;
  display: none; align-items: center; justify-content: center;
  z-index: 200; pointer-events: auto;
}
.frog-overlay.is-open { display: flex; }

.frog-panel {
  background: #1c1917;
  padding: 18px 22px 16px;
  border-radius: 14px;
  border: none;
  color: white;
  font-family: monospace;
  min-width: 0;
  width: min(440px, calc(90 * var(--app-vw, 1vw)));
  max-width: calc(90 * var(--app-vw, 1vw));
  max-height: calc(86 * var(--app-vh, 1vh));
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: none;
  box-sizing: border-box;
  transform-origin: top center;
  backface-visibility: hidden;
}

.frog-overlay.is-animating-in .frog-panel { animation: frogPanelFoldIn 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.frog-overlay.is-animating-out .frog-panel { animation: frogPanelFoldOut 180ms ease-in forwards; }

@keyframes frogPanelFoldIn {
  0%   { opacity: 0; transform: perspective(900px) rotateX(-65deg) scaleY(0.55) scaleX(0.96); filter: brightness(0.8); }
  60%  { opacity: 1; transform: perspective(900px) rotateX(8deg) scaleY(1.04) scaleX(1.01); filter: brightness(1.02); }
  100% { opacity: 1; transform: perspective(900px) rotateX(0deg) scaleY(1) scaleX(1); filter: brightness(1); }
}
@keyframes frogPanelFoldOut {
  0%   { opacity: 1; transform: perspective(900px) rotateX(0deg) scaleY(1) scaleX(1); filter: brightness(1); }
  100% { opacity: 0; transform: perspective(900px) rotateX(-55deg) scaleY(0.6) scaleX(0.97); filter: brightness(0.8); }
}

.frog-panel-title {
  font-size: 18px; font-weight: bold; margin-bottom: 6px;
  text-align: center; display: flex; align-items: center;
  justify-content: center; gap: 6px; color: white; text-shadow: 1px 1px gray;
}
.frog-panel-title .emoji { font-size: 20px; }

.frog-panel-sub { font-size: 13px; color: white; text-shadow: 1px 1px gray; text-align: center; margin-bottom: 12px; line-height: 1.5; }
.frog-panel-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #a3e635; margin-top: 12px; margin-bottom: 6px; }
.frog-panel-footer { margin-top: 12px; font-size: 12px; color: #a8a29e; text-align: center; line-height: 1.5; }
.frog-panel-list { list-style: none; padding-left: 0; margin: 0 0 6px; }
.frog-panel-list li { font-size: 13px; margin-bottom: 6px; line-height: 1.5; color: #f5f5f4; }

/* ============================================
   FROG BUTTONS
============================================ */

.frog-btn {
  width: 100%; border-radius: 10px; padding: 10px 12px;
  font-size: 13px; font-family: inherit; cursor: pointer;
  text-align: center; margin-bottom: 8px; border: none;
  transition: transform 0.08s ease, filter 0.12s ease; box-shadow: none;
}
.frog-btn-primary { background: #65a30d; color: white; font-weight: 800; box-shadow: 2px 2px #4f7518; }
.frog-btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.frog-btn-secondary { background: #292524; color: white; border: 1px solid #44403c; font-weight: 700; }
.frog-btn-secondary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.frog-btn-danger { background: #b91c1c; color: #fee2e2; border: 1px solid #ef4444; font-size: 12px; }

/* ============================================
   LEADERBOARD
============================================ */

#leaderboardContent { width: 100%; }
.leaderboard-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.leaderboard-title { font-weight: 800; color: #bef264; font-size: 15px; }
.leaderboard-subtitle { font-size: 12px; color: #a8a29e; }

.leaderboard-table { width: 100%; border-collapse: collapse; background: #0f172a; border: 1px solid #334155; box-shadow: 0 8px 20px rgba(0,0,0,0.5); border-radius: 10px; overflow: hidden; font-size: 12px; }
.leaderboard-table thead { background: linear-gradient(90deg, #166534, #0f766e); }
.leaderboard-head-cell { padding: 8px 10px; text-align: left; color: #f8fafc; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.leaderboard-row:nth-child(odd)  { background: rgba(255,255,255,0.02); }
.leaderboard-row:nth-child(even) { background: rgba(255,255,255,0.04); }
.leaderboard-row.is-me { outline: 1px solid #84cc16; background: rgba(132,204,22,0.08); }
.leaderboard-cell { padding: 7px 10px; color: #e5e7eb; border-bottom: 1px solid rgba(148,163,184,0.18); }
.leaderboard-name { font-weight: 700; color: #e7e5e4; }
.leaderboard-pager { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
/* Match buff panel .buff-page-btn sizing */
.frog-btn.leaderboard-page-btn { width: auto; padding: 6px 8px; margin-bottom: 0; font-size: 12px; border-radius: 8px; }
.leaderboard-page-info { flex: 1; text-align: center; font-size: 12px; color: #cbd5e1; }
.leaderboard-legend { margin-top: 8px; font-size: 11px; color: #a8a29e; text-align: center; }
.leaderboard-loading, .leaderboard-error, .leaderboard-empty { text-align: center; color: #e5e7eb; font-size: 13px; padding: 16px 0 8px; }

/* ============================================
   DASHBOARD STATS
============================================ */

.dashboard-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 4px; }
.dashboard-stat { background: #1c1917; border: 1px solid #44403c; border-radius: 12px; padding: 10px 12px; }
.dashboard-stat-label { display: block; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: #a3e635; margin-bottom: 8px; }
.dashboard-stat-value { display: block; font-size: 18px; font-weight: 800; color: #f5f5f4; line-height: 1.1; }

.dashboard-stats-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 2px 0 8px; }
.dashboard-stats-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: #f5f5f4; line-height: 1.35; }
.dashboard-stats-row span { color: #d6d3d1; }
.dashboard-stats-row strong { color: #a3e635; font-size: 12px; font-weight: 700; }
.dashboard-stats-featured { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dashboard-stats-featured-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; line-height: 1.35; flex-wrap: wrap; }
.dashboard-stats-featured-label { color: #d6d3d1; }
.dashboard-stats-featured-value { color: #bef264; font-size: 13px; font-weight: normal; text-align: right; }

@media (max-width: 640px) {
  .dashboard-stat-grid { grid-template-columns: 1fr; }
  .dashboard-stats-featured-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dashboard-stats-featured-value { text-align: left; }
}

/* ============================================
   SCOREBOARD / END GAME SUMMARY
============================================ */

.scoreboard-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: transparent; z-index: 9999; }

.scoreboard-card {
  width: min(480px, calc(90 * var(--app-vw, 1vw)));
  background: linear-gradient(145deg, #0c0f0d, #111616);
  border: 1px solid #3f6212; border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.65);
  color: #e2e8f0; font-family: monospace; padding: 18px;
}

.scoreboard-header { text-align: center; margin-bottom: 12px; }
.scoreboard-title { font-size: 16px; font-weight: 800; color: #fefce8; letter-spacing: 0.04em; }
.scoreboard-subtitle { font-size: 12px; color: #a3e635; opacity: 0.9; margin-top: 2px; }
.scoreboard-summary { background: transparent; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.summary-heading { color: #fefce8; font-weight: 800; margin-bottom: 8px; }
.summary-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.summary-pill { background: transparent; border: 1px solid darkseagreen; border-radius: 10px; padding: 10px 12px; }
.pill-label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #bbf7d0; margin-bottom: 4px; }
.pill-value { font-size: 18px; font-weight: 800; color: #fefce8; }

.scoreboard-table-wrapper { background: #0b0f12; border: 1px solid #334155; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.scoreboard-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scoreboard-th { text-align: left; padding: 6px 8px; color: #cbd5e1; border-bottom: 1px solid #1f2937; }
.scoreboard-row { border-bottom: 1px solid #1f2937; }
.scoreboard-row--me { background: rgba(163,230,53,0.08); color: #d9f99d; font-weight: 800; }
.scoreboard-td { padding: 6px 8px; color: #e2e8f0; }
.scoreboard-name { font-weight: 700; }
.scoreboard-rank { color: #a3e635; font-weight: 800; width: 42px; }
.scoreboard-score { text-align: right; }

.scoreboard-pager { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 10px; font-size: 11px; }
.scoreboard-page-info { flex: 1; text-align: center; color: #cbd5e1; }
.scoreboard-actions { display: flex; gap: 8px; margin-top: 12px; }
.scoreboard-btn { padding: 8px 12px; background: #111827; border: none; color: #e2e8f0; border-radius: 8px; cursor: pointer; font-weight: 700; transition: transform 0.08s ease, filter 0.08s ease; }
.scoreboard-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.scoreboard-btn--primary { background: #65a30d; color: white; }
.scoreboard-btn--ghost { background: #0b0f12; color: #e2e8f0; padding: 6px 10px; }
.scoreboard-hint { margin-top: 8px; font-size: 11px; opacity: 0.85; text-align: center; color: #cbd5e1; }

/* ============================================
   UPGRADE GUIDE / BUFF CARDS / MISC
============================================ */

.stat-highlight {
  color: #fde68a;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Remove these */
#upgradeOverlay .frog-upgrade-choice.upgrade-type-mobility .stat-highlight,
#upgradeOverlay .frog-upgrade-choice.upgrade-type-buff .stat-highlight,
#upgradeOverlay .frog-upgrade-choice.upgrade-type-survival .stat-highlight,
#upgradeOverlay .frog-upgrade-choice.upgrade-type-orb .stat-highlight,
#upgradeOverlay .frog-upgrade-choice.upgrade-type-role .stat-highlight {
  color: #fde68a;
}

.buff-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.buff-card { background: #1c1917; border-radius: 10px; padding: 10px 12px; border: 1px solid #44403c; box-shadow: 0 6px 16px rgba(0,0,0,0.9); }
.buff-card h4 { margin: 0 0 6px; font-size: 14px; color: #d9f99d; }
.buff-card ul { margin: 0; padding-left: 16px; color: #f5f5f4; }
.buff-card li { margin-bottom: 6px; line-height: 1.4; font-size: 12px; }

.buff-guide-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.buff-guide-nav .buff-page-btn { flex: 1 1 0; font-size: 12px; padding: 6px 8px; margin-bottom: 0; }
.buff-guide-nav .buff-page-btn.is-active { background: #65a30d; color: #fefce8; border-color: #a3e635; }

#howToOverlay .buff-guide-nav { flex-wrap: nowrap; justify-content: center; }
#howToOverlay .buff-guide-nav .buff-page-btn { flex: 0 0 auto; width: auto; min-width: 140px; margin-bottom: 0; }

.upgrade-guide-list { list-style: none; padding: 0; margin: 0 0 6px; }
.upgrade-guide-item { font-size: 13px; margin-bottom: 6px; line-height: 1.5; color: #f5f5f4; padding: 0; background: transparent; border: none; box-shadow: none; }
.upgrade-guide-item strong { font-weight: normal; }
.upgrade-guide-item.upgrade-type-mobility strong { color: #65a30d; }
.upgrade-guide-item.upgrade-type-buff strong     { color: #eab308; }
.upgrade-guide-item.upgrade-type-survival strong { color: #ef4444; }
.upgrade-guide-item.upgrade-type-orb strong      { color: #fb923c; }
.upgrade-guide-item.upgrade-type-role strong     { color: #a855f7; }
.upgrade-guide-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; margin-bottom: 6px; color: #a3e635; }

.upgrade-column { background: #1c1917; border: 1px solid #44403c; border-radius: 12px; padding: 10px; }
.upgrade-column-title { font-weight: 800; color: #f5f5f4; margin-bottom: 6px; font-size: 13px; }
.upgrade-column--summary { background: #1c1917; }
.upgrade-summary-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.upgrade-summary-list li { font-size: 12px; line-height: 1.45; color: #f5f5f4; padding: 6px 8px; border-radius: 8px; background: #1c1917; border: 1px solid #44403c; }

/* ============================================
   UPGRADE OVERLAY — CARD LAYOUT
============================================ */

#upgradeOverlay {
}

#upgradeOverlay .frog-panel {
  border: none; box-shadow: none; padding: 0; background: transparent;
  width: min(860px, calc(94 * var(--app-vw, 1vw))); max-width: calc(94 * var(--app-vw, 1vw)); overflow: visible;
}

#upgradeOverlay .frog-panel-sub { margin: 0 0 18px; text-align: center; font-size: 13px; color: #f5f5f4; text-shadow: 1px 1px darkslateblue; }
#upgradeOverlay .upgrade-layout { width: 100%; }
#upgradeOverlay .upgrade-column { background: transparent; border: none; padding: 0; }

#upgradeOverlay .upgrade-choices {
  width: 100%; display: flex; flex-direction: row;
  justify-content: center; align-items: stretch; gap: 11%;
}

#upgradeOverlay .frog-upgrade-choice {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 150px;
  width: 150px;
  min-height: 175px;
  padding: 18px 12px;
  border-radius: 6px;
  background: #111;
  border: 2px solid #333;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 3px 3px 0 #000, inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

#upgradeOverlay .frog-upgrade-choice:hover {
  transform: translateY(-4px);
}

#upgradeOverlay .frog-upgrade-choice.upgrade-type-mobility { background: #65a30d; border-color: #65a30d; box-shadow: 2px 2px 0 #1a4d00, inset 0 1px 0 rgba(255,255,255,0.06); }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-buff     { background: #eab308; border-color: #eab308; box-shadow: 2px 2px 0 #713f12, inset 0 1px 0 rgba(255,255,255,0.06); }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-survival { background: #ef4444; border-color: #ef4444; box-shadow: 2px 2px 0 #7f1d1d, inset 0 1px 0 rgba(255,255,255,0.06); }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-orb      { background: #fb923c; border-color: #fb923c; box-shadow: 2px 2px 0 #7c3d0e, inset 0 1px 0 rgba(255,255,255,0.06); }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-role     { background: #a855f7; border-color: #a855f7; box-shadow: 2px 2px 0 #4a1d96, inset 0 1px 0 rgba(255,255,255,0.06); }

#upgradeOverlay .frog-upgrade-choice.upgrade-type-mobility:hover { border-color: #84cc16; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-buff:hover     { border-color: #fbbf24; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-survival:hover { border-color: #f87171; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-orb:hover      { border-color: #fdba74; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-role:hover     { border-color: #c084fc; }

#upgradeOverlay .frog-upgrade-emoji { font-size: 20px; line-height: 1; }

#upgradeOverlay .frog-upgrade-title {
  font-size: 12px;
  font-weight: 900;
  color: inherit;
  line-height: 1.3;
  font-family: monospace;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#upgradeOverlay .frog-upgrade-choice.upgrade-type-mobility .frog-upgrade-title { color: white; text-shadow: 2px 2px gray; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-buff     .frog-upgrade-title { color: yellow; text-shadow: 2px 2px gray; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-survival .frog-upgrade-title { color: white; text-shadow: 2px 2px gray; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-orb      .frog-upgrade-title { color: white; text-shadow: 2px 2px gray; }
#upgradeOverlay .frog-upgrade-choice.upgrade-type-role     .frog-upgrade-title { color: chartreuse; text-shadow: 2px 2px gray; }

#upgradeOverlay .frog-upgrade-desc {
  font-size: 12px;
  line-height: 1.5;
  color: white;
  font-weight: 400;
  font-family: monospace;
  text-align: center;
}

#upgradeOverlay .frog-upgrade-choice.is-spawning { animation: upgradeCardSpawn 260ms ease-out both; }

@keyframes upgradeCardSpawn {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================
   COMMAND CENTER
============================================ */

.cc-container { display: flex; gap: 30px; text-align: left; align-items: flex-start; }
.cc-left { flex: 1.2; border-right: 1px solid #44403c; padding-right: 25px; }
.cc-right { flex: 1.5; }
.cc-pfp-stack { position: relative; width: 64px; height: 64px; }
.cc-pfp-layer { position: absolute; inset: 0; width: 100%; image-rendering: pixelated; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.cc-table th { text-align: left; color: #a8a29e; border-bottom: 1px solid #44403c; padding: 4px; }
.cc-table td { padding: 6px 4px; border-bottom: 1px solid #292524; }
.cc-nav { display: flex; border-bottom: 1px solid #44403c; margin-bottom: 20px; gap: 10px; justify-content: center; }
.cc-tab-btn { background: none; border: none; padding: 10px 15px; color: #a8a29e; font-family: monospace; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 13px; transition: 0.2s; border-bottom: 2px solid transparent; }
.cc-tab-btn:hover { color: #e7e5e4; background: rgba(255,255,255,0.05); }
.cc-tab-btn.active { color: #bef264; border-bottom: 2px solid #bef264; }
.cc-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; text-align: left; }

/* ============================================
   STARTING BUFF / MISC OVERLAYS
============================================ */

#startingBuffOverlay { align-items: center; justify-content: center; }
#startingBuffOverlay .frog-panel { animation-duration: 120ms; }
#startingBuffOverlay .starting-buff-option:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }

/* ============================================
   SPECIFIC PANEL WIDTHS
============================================ */

#endGameSummaryOverlay .frog-panel { width: min(460px, calc(90 * var(--app-vw, 1vw))); max-width: calc(90 * var(--app-vw, 1vw)); }
#dashboardOverlay .frog-panel      { width: min(400px, calc(90 * var(--app-vw, 1vw))); max-width: calc(90 * var(--app-vw, 1vw)); }
#buffGuideOverlay .frog-panel      { width: min(500px, calc(90 * var(--app-vw, 1vw))); max-width: calc(90 * var(--app-vw, 1vw)); }

/* ============================================
   MOBILE — max 768px
============================================ */

@media (max-width: 768px) {
  .frog-panel {
    width: min(calc(88 * var(--app-vw, 1vw)), 400px);
    max-width: calc(88 * var(--app-vw, 1vw));
    max-height: calc(88 * var(--app-vh, 1vh));
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
  }

  .frog-panel-title { font-size: 16px; }
  .frog-panel-title .emoji { font-size: 18px; text-shadow: none;}
  .frog-panel-sub { font-size: 13px; margin-bottom: 10px; }
  .frog-panel-section-label { font-size: 11px; margin-top: 10px; }
  .frog-panel-list li { font-size: 13px; margin-bottom: 6px; }
  .frog-panel-footer { font-size: 12px; }

  .frog-btn { padding: 10px 12px; font-size: 14px; border-radius: 10px; margin-bottom: 8px; }
  .frog-btn.leaderboard-page-btn { padding: 6px 8px; font-size: 12px; border-radius: 8px; }
  .frog-btn-danger { font-size: 12px; }

  #endGameSummaryOverlay .frog-panel { width: min(calc(90 * var(--app-vw, 1vw)), 400px); }
  #dashboardOverlay .frog-panel      { width: min(calc(88 * var(--app-vw, 1vw)), 360px); }
  #buffGuideOverlay .frog-panel      { width: min(calc(90 * var(--app-vw, 1vw)), 400px); }

  .scoreboard-card { width: min(calc(90 * var(--app-vw, 1vw)), 420px); padding: 14px 12px; }
  .scoreboard-title { font-size: 15px; }
  .scoreboard-th, .scoreboard-td { font-size: 12px; padding: 6px 5px; }
  .leaderboard-title { font-size: 14px; }
  .leaderboard-cell { font-size: 12px; padding: 6px 8px; }
  .leaderboard-head-cell { font-size: 11px; padding: 6px 8px; }

  /* upgrade cards — stay horizontal, just smaller */
  #upgradeOverlay .frog-panel { width: min(calc(94 * var(--app-vw, 1vw)), 560px); }
  #upgradeOverlay .upgrade-choices { gap: 8px; }
  #upgradeOverlay .frog-upgrade-choice { flex: 0 0 110px; width: 110px; min-height: 160px; padding: 12px 8px; }
  #upgradeOverlay .frog-upgrade-emoji { font-size: 18px; }
  #upgradeOverlay .frog-upgrade-title { font-size: 11px; }
  #upgradeOverlay .frog-upgrade-desc  { font-size: 10px; }
}

/* ============================================
   SMALL PHONES — max 480px, stack upgrade cards
============================================ */

@media (max-width: 480px) {
  .frog-panel { width: calc(94 * var(--app-vw, 1vw)); max-width: calc(94 * var(--app-vw, 1vw)); padding: 12px 14px; font-size: 12px; }
  .frog-panel-title { font-size: 15px; }
  .frog-btn { font-size: 13px; padding: 10px 12px; }
  .frog-btn.leaderboard-page-btn { padding: 6px 8px; font-size: 12px; border-radius: 8px; }

  #upgradeOverlay .upgrade-choices { flex-direction: column; align-items: center; gap: 10px; }

  #upgradeOverlay .frog-upgrade-choice {
    flex: none;
    width: min(300px, calc(86 * var(--app-vw, 1vw)));
    max-width: calc(86 * var(--app-vw, 1vw));
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    gap: 12px;
  }

  #upgradeOverlay .frog-upgrade-emoji { font-size: 22px; min-width: 28px; }
  #upgradeOverlay .frog-upgrade-title { font-size: 13px; text-align: left; }
  #upgradeOverlay .frog-upgrade-desc  { font-size: 11px; text-align: left; }
}
.main-menu-discord-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.main-menu-discord-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5865f2;
  color: white;
  text-decoration: none;
  box-shadow: 2px 2px darkslateblue;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.main-menu-discord-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.main-menu-discord-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Main menu buttons */
#mainMenuOverlay .frog-btn {
}
:root{--ink:#073720;--cream:#fff8db;--grass:#a8d96e;--edge:#092c20}
html,body{background:var(--grass);color:var(--ink)}
button{touch-action:manipulation}
#frog-bg{background:var(--grass)!important;background-image:radial-gradient(ellipse at 50% 38%,#b8e17e55,transparent 70%)!important}
#frog-bg .grass{width:18px;height:17px;opacity:.75;animation:none}
#frog-bg .blade{width:3px;background:#36a24f!important;transform:scale(1.6);transform-origin:bottom}
#frog-bg .flower,#frog-bg .rock{display:none}
.frog-overlay{background:transparent!important;backdrop-filter:none!important;font-family:Pocket,monospace!important}
.frog-panel{background:var(--cream)!important;border:5px solid var(--ink)!important;border-radius:2px!important;box-shadow:5px 5px 0 #073720!important;color:var(--ink)!important}
.frog-panel-title,.frog-panel-sub{color:var(--ink)!important;text-shadow:none!important;font-family:Pocket,monospace!important}
.frog-panel-title{font-size:30px!important}.frog-panel-sub{font-size:18px!important}
.frog-btn{font-family:Pocket,monospace!important;border-radius:0!important;color:var(--ink)!important;background:var(--cream)!important;border:2px solid var(--ink)!important;box-shadow:2px 3px 0 var(--ink)!important;text-shadow:none!important}
.frog-btn:hover{background:#e6efa9!important;transform:translateY(-2px)}
button:focus-visible{outline:3px solid #e4a42c!important;outline-offset:5px}
#mainMenuOverlay{flex-direction:column;justify-content:center;gap:24px;padding:30px 15px;overflow:hidden}
.pocket-title{font-family:Pocket,monospace;font-weight:900;color:var(--cream);text-align:center;font-size:clamp(52px,calc(7.6 * var(--app-vw, 1vw)),112px);line-height:.82;letter-spacing:-.025em;filter:drop-shadow(0 7px 0 #073720);-webkit-text-stroke:11px var(--ink);paint-order:stroke fill;z-index:1;pointer-events:none;margin-bottom:10px}
.pocket-title span{display:block}.pocket-title span+span{margin-top:9px}
#mainMenuOverlay .pocket-menu{width:390px;max-width:calc(85 * var(--app-vw, 1vw));padding:22px 24px;display:flex;flex-direction:column;gap:3px;background:var(--cream)!important;border:5px solid var(--ink)!important;border-radius:0!important;box-shadow:6px 0 var(--ink),-6px 0 var(--ink),0 6px var(--ink),0 -6px var(--ink)!important;overflow:visible}
#mainMenuOverlay .frog-btn{margin:0!important;width:100%;padding:10px 12px 10px 47px;text-align:left;font-size:38px;line-height:1.15;font-weight:700;letter-spacing:0;text-transform:none;border:none!important;box-shadow:none!important;background:none!important;position:relative}
#mainMenuOverlay .frog-btn:hover{color:#318a35!important;transform:none}
#mainMenuOverlay #btnStartRun{font-size:44px}
.pocket-hint{font-size:19px;font-family:Pocket,monospace;color:#17482b;text-align:center}
.pocket-profile{position:absolute;bottom:17px;right:20px;border:0;background:transparent;font:18px Pocket,monospace;color:var(--ink);cursor:pointer;text-decoration:underline}
#pocket-hud{background:var(--cream)!important;color:var(--ink)!important;border:3px solid var(--ink);border-radius:0!important;padding:9px 20px!important;box-shadow:3px 3px 0 var(--ink);font:20px Pocket,monospace!important;top:15px!important}
#pocket-hud span{color:var(--ink)!important}
#frog-mini-leaderboard{display:none!important}
#frog-stats-panel{color:var(--ink)!important;font-family:Pocket,monospace!important}
#upgradeOverlay{background:#23551b20!important;padding:15px}
#upgradeOverlay .frog-panel{width:490px!important;max-width:calc(94 * var(--app-vw, 1vw))!important;background:var(--ink)!important;border:4px solid #4c9936!important;padding:12px!important;box-shadow:5px 5px 0 #123e24!important}
#upgradeOverlay .frog-panel-title{display:block!important;color:var(--cream)!important;font-size:29px!important;text-transform:uppercase;text-align:center;margin:0 0 5px!important}
#upgradeOverlay .frog-panel-sub{color:#d9e9ad!important;font-size:17px!important;margin:0 0 13px!important}
#upgradeOverlay .upgrade-choices{display:flex!important;flex-direction:column!important;gap:9px!important;align-items:stretch!important}
#upgradeOverlay .frog-upgrade-choice{position:relative;flex:none!important;width:100%!important;min-height:92px!important;padding:14px 16px 14px 88px!important;background:var(--cream)!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;color:var(--ink)!important;text-align:left!important}
#upgradeOverlay .frog-upgrade-choice:hover{background:#e5f3b4!important;transform:translateX(3px)!important;outline:2px solid #a4df5e}
#upgradeOverlay .frog-upgrade-title{color:var(--ink)!important;font:700 25px/1.05 Pocket,monospace!important;letter-spacing:0!important;text-transform:none!important;text-align:left!important;text-shadow:none!important}
#upgradeOverlay .frog-upgrade-desc{color:var(--ink)!important;font:18px/1.2 Pocket,monospace!important;text-align:left!important;text-shadow:none!important}
#upgradeOverlay .stat-highlight{color:#247b29!important;font-weight:bold!important;text-shadow:none!important}
#upgradeOverlay .frog-upgrade-emoji{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:62px;height:62px;font-size:0!important;background-image:var(--atlas);background-size:400% 400%;background-position:100% 66.666%}
#upgradeOverlay .upgrade-type-orb .frog-upgrade-emoji{background-position:0 100%}
#upgradeOverlay .upgrade-type-mobility .frog-upgrade-emoji{background-position:33.333% 100%}
#upgradeOverlay .upgrade-type-role .frog-upgrade-emoji{background-position:0 0}
.frog-sprite{background-image:var(--atlas)!important;background-size:400% 400%!important;background-position:var(--frog-x,0) var(--frog-y,0)!important}
.frog-sprite>img{visibility:hidden}
.snake-head,.snake-body,.snake-tail{background-image:var(--atlas)!important;background-size:400% 400%!important;background-position:0 66.666%!important}
.snake-body{background-position:33.333% 66.666%!important}.snake-tail{background-position:66.666% 66.666%!important}
.frog-orb{background-image:var(--atlas)!important;background-size:400% 400%!important;background-position:0 100%!important}
.frog-orb img{visibility:hidden}
.pocket-decor{position:absolute;width:68px;height:68px;background:var(--atlas);background-size:400% 400%;pointer-events:none;image-rendering:pixelated}
@media(max-width:600px){.pocket-title{font-size:clamp(45px,calc(11 * var(--app-vw, 1vw)),65px);-webkit-text-stroke:7px var(--ink)}#mainMenuOverlay{gap:24px}.pocket-hint{font-size:16px;max-width:250px}#mainMenuOverlay .pocket-menu{width:310px;padding:15px}#mainMenuOverlay .frog-btn{font-size:32px;padding-top:12px;padding-bottom:12px}#mainMenuOverlay #btnStartRun{font-size:37px}.pocket-profile{font-size:15px}#pocket-hud{font-size:15px!important;gap:8px!important;padding:8px 10px!important}.pocket-decor{width:45px;height:45px}#upgradeOverlay .frog-upgrade-title{font-size:23px!important}#upgradeOverlay .frog-upgrade-desc{font-size:17px!important}}
@media(max-height:570px) and (min-width:601px){#mainMenuOverlay{gap:13px;padding:18px}.pocket-title{font-size:61px}#mainMenuOverlay .pocket-menu{padding:8px 20px;width:325px}#mainMenuOverlay .frog-btn{font-size:27px;padding-top:6px;padding-bottom:6px}#mainMenuOverlay #btnStartRun{font-size:32px}.pocket-hint{font-size:16px}}
#upgradeOverlay .frog-upgrade-desc span{color:#267b2d!important;text-shadow:none!important}
#frog-game>div>button{font-family:Pocket,monospace!important;background:var(--cream)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:0!important}
#mainMenuOverlay.is-animating-out .pocket-title,#mainMenuOverlay.is-animating-out .pocket-decor,#mainMenuOverlay.is-animating-out .pocket-hint,#mainMenuOverlay.is-animating-out .pocket-profile{visibility:hidden}
#frog-bg .grass{background-image:var(--atlas);background-size:400% 400%;background-position:66.666% 100%;width:25px;height:25px;opacity:.7}
#frog-bg .grass>*{display:none}
@media(max-width:600px){#mainMenuOverlay .pocket-decor{z-index:-1;opacity:.85}#mainMenuOverlay .pocket-menu{z-index:2}#upgradeOverlay .frog-panel{max-height:calc(90 * var(--app-vh, 1vh));overflow:auto!important}}
.frog-panel :is(p,li,label,strong,small,h2,h3),.frog-panel div:not(.frog-upgrade-emoji),.frog-panel span{color:var(--ink);text-shadow:none}
.frog-overlay:not(#upgradeOverlay) .frog-panel :is(div,span,p,li,label,strong,small,h2,h3){color:var(--ink)!important;text-shadow:none!important}
.frog-overlay:not(#upgradeOverlay) .frog-panel :is(div,li)[style*="background"],.dashboard-stat,.buff-card,.scoreboard-table-wrapper,.upgrade-summary-list li,.leaderboard-table,.leaderboard-table thead{background:#edf1cc!important;border-color:#6d9256!important;border-radius:0!important;box-shadow:none!important}
.frog-panel :is(input,select){background:#fffcef!important;color:var(--ink)!important;border:2px solid #537643!important;border-radius:0!important}
#endGameSummaryOverlay .frog-panel{font:18px Pocket,monospace!important}
#endGameSummaryOverlay .frog-panel div{font-family:Pocket,monospace!important;font-size:16px!important}
#endGameSummaryOverlay .frog-panel strong{font-size:19px}
.frog-panel .buff-card{font-family:Pocket,monospace}.frog-panel .buff-card p{font-size:16px}
@media(max-width:600px){#pocket-hud{left:auto!important;right:10px!important;transform:none!important;font-size:15px!important}.pocket-decor{max-width:40px;max-height:40px}}
/* Proportion pass: keep movement anchors, size artwork independently. */
.frog-sprite,.snake-head,.snake-body,.snake-tail{background-image:none!important}
.frog-sprite::before,.snake-head::before,.snake-body::before,.snake-tail::before{content:"";position:absolute;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);background-image:var(--atlas);background-size:400% 400%;background-repeat:no-repeat;image-rendering:pixelated}
.frog-sprite::before{width:66.667%;height:66.667%;background-position:var(--frog-x,0) var(--frog-y,0)}
.snake-head::before{width:87.5%;height:87.5%;background-position:0 66.666%}
.snake-body::before{width:70.833%;height:52.083%;background-position:33.333% 66.666%}
.snake-tail::before{width:79.167%;height:58.333%;background-position:66.666% 66.666%}
#mainMenuOverlay{gap:19px}
.pocket-title{font-size:clamp(50px,calc(6.4 * var(--app-vw, 1vw)),87px);-webkit-text-stroke:9px var(--ink);filter:drop-shadow(0 5px 0 #073720)}
#mainMenuOverlay .pocket-menu{width:330px;padding:15px 20px;border-width:4px!important;box-shadow:4px 0 var(--ink),-4px 0 var(--ink),0 4px var(--ink),0 -4px var(--ink)!important}
#mainMenuOverlay .frog-btn{font-size:30px;padding:9px 10px 9px 40px}
#mainMenuOverlay #btnStartRun{font-size:35px}
.pocket-hint{font-size:16px}.pocket-profile{font-size:16px}
.pocket-decor{width:45px;height:45px}
#pocket-hud{font-size:17px!important;padding:7px 13px!important;border-width:2px;box-shadow:2px 2px var(--ink)}
#upgradeOverlay .frog-panel{width:430px!important;padding:10px!important;border-width:3px!important}
#upgradeOverlay .frog-panel-title{font-size:25px!important}
#upgradeOverlay .frog-panel-sub{font-size:16px!important;margin-bottom:10px!important}
#upgradeOverlay .frog-upgrade-choice{min-height:78px!important;padding:11px 13px 11px 68px!important}
#upgradeOverlay .frog-upgrade-title{font-size:22px!important}
#upgradeOverlay .frog-upgrade-desc{font-size:17px!important}
#upgradeOverlay .frog-upgrade-emoji{width:44px;height:44px;left:12px}
#frog-bg .grass{width:19px;height:19px;opacity:.6}
.pocket-menu-snake{position:absolute;right:10%;top:20%;width:145px;height:90px;pointer-events:none}
.pocket-menu-snake i{position:absolute;width:48px;height:48px;image-rendering:pixelated}
.pocket-menu-snake .snake-head{left:0;top:0;transform:rotate(25deg)}
.pocket-menu-snake .snake-body:nth-child(2){left:27px;top:12px;transform:rotate(20deg)}
.pocket-menu-snake .snake-body:nth-child(3){left:51px;top:23px;transform:rotate(28deg)}
.pocket-menu-snake .snake-body:nth-child(4){left:74px;top:36px;transform:rotate(25deg)}
.pocket-menu-snake .snake-tail{left:99px;top:41px;transform:rotate(10deg)}
@media(max-width:600px){.frog-sprite::before{width:60%;height:60%}.pocket-title{font-size:clamp(42px,calc(11 * var(--app-vw, 1vw)),60px);-webkit-text-stroke:6px var(--ink)}#mainMenuOverlay .pocket-menu{width:280px;padding:12px 16px}#mainMenuOverlay .frog-btn{font-size:27px;min-height:47px}#mainMenuOverlay #btnStartRun{font-size:31px}.pocket-decor{width:32px;height:32px}.pocket-menu-snake{right:6%;top:12%;transform:scale(.7);transform-origin:right top}.pocket-hint{font-size:15px}#pocket-hud{font-size:14px!important;padding:7px 9px!important}#upgradeOverlay .frog-panel{width:350px!important}#upgradeOverlay .frog-upgrade-title{font-size:21px!important}#upgradeOverlay .frog-upgrade-desc{font-size:16px!important}}
@media(max-height:570px) and (min-width:601px){.pocket-title{font-size:54px}#mainMenuOverlay{gap:12px}#mainMenuOverlay .pocket-menu{padding:7px 16px}#mainMenuOverlay .frog-btn{font-size:25px;padding-top:5px;padding-bottom:5px}#mainMenuOverlay #btnStartRun{font-size:29px}}
.snake-body::before{width:75%}
.pocket-menu-snake .snake-head::before{transform:translate(-50%,-50%) scaleX(-1)}
/* Readability and silhouette pass. */
.frog-sprite::before{width:45.833%;height:45.833%}
.snake-head{z-index:12!important}
.snake-head::before{width:34px;height:40px;top:62%;clip-path:inset(0 0 28% 0);background-position:0 66.666%}
.snake-body::before{width:29px;height:19px;clip-path:inset(0 9%);background-position:33.333% 66.666%}
.snake-body::after{content:"";position:absolute;width:26px;height:17px;left:50%;top:50%;transform:translate(-50%,-50%);background:#5ac531;border-top:2px solid #073720;border-bottom:2px solid #073720;z-index:-1;pointer-events:none}
.snake-tail::before{width:30px;height:19px}
#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-family:Arial,Helvetica,sans-serif!important;font-size:16px!important;line-height:1.4!important;letter-spacing:0!important;text-shadow:none!important;font-weight:400!important;color:#173c24!important}
#upgradeOverlay .frog-upgrade-desc span{font-weight:750!important;color:#092c20!important}
#upgradeOverlay .frog-upgrade-title{line-height:1.2!important}
#upgradeOverlay .frog-upgrade-choice{min-height:88px!important}
#upgradeOverlay .frog-upgrade-choice:hover{background:#f0f4ce!important}
@media(max-width:600px){.frog-sprite::before{width:41.667%;height:41.667%}#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:16px!important}.pocket-decor{width:27px;height:27px}}
.snake-head{z-index:31!important}
.snake-tail{z-index:30!important}
/* Reference pass: upright face, attached neck, stepped cream panels. */
.snake-head::before{background-image:var(--snake-face);background-position:center;background-size:contain;clip-path:none;width:34px;height:34px;top:50%;z-index:2;transform:translate(-50%,-50%)}
.pocket-neck{position:absolute;inset:0;width:48px;height:48px;overflow:visible;pointer-events:none;z-index:0}
.pocket-neck path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.pocket-neck .neck-edge{stroke:#073720;stroke-width:20px}
.pocket-neck .neck-fill{stroke:#64ca30;stroke-width:14px}
.pocket-menu-snake .snake-head{transform:none!important}
.pocket-menu-snake .snake-head::before{transform:translate(-50%,-50%)}
.pocket-title{font-size:clamp(62px,calc(8 * var(--app-vw, 1vw)),118px);line-height:.85;letter-spacing:0;font-weight:900;-webkit-text-stroke:12px #073720;filter:drop-shadow(0 7px 0 #073720);text-shadow:0 3px 0 #dfd995}
#mainMenuOverlay{gap:28px}
#mainMenuOverlay .pocket-menu{width:440px;padding:23px 30px;background:var(--cream)!important;border:0!important;box-shadow:none!important;outline:none;isolation:isolate}
#mainMenuOverlay .pocket-menu:before,#mainMenuOverlay .pocket-menu:after{content:"";position:absolute;inset:-7px;z-index:-2;background:var(--ink);clip-path:polygon(18px 0,calc(100% - 18px) 0,calc(100% - 18px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 18px,100% 18px,100% calc(100% - 18px),calc(100% - 6px) calc(100% - 18px),calc(100% - 6px) calc(100% - 6px),calc(100% - 18px) calc(100% - 6px),calc(100% - 18px) 100%,18px 100%,18px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 18px),0 calc(100% - 18px),0 18px,6px 18px,6px 6px,18px 6px)}
#mainMenuOverlay .pocket-menu:after{inset:0;background:linear-gradient(110deg,#fffbea,#fff6d6);z-index:-1}
#mainMenuOverlay .pocket-menu{position:relative;background:transparent!important}
#mainMenuOverlay .frog-btn{font-size:42px;line-height:1.15;padding:12px 10px 12px 52px;font-weight:700}
#mainMenuOverlay #btnStartRun{font-size:47px}
#upgradeOverlay .frog-panel{width:460px!important;border:4px solid #72a949!important;padding:12px!important;box-shadow:3px 3px 0 #083823!important;border-radius:0!important;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
#upgradeOverlay .frog-panel-title{font-size:29px!important;letter-spacing:.01em;margin-bottom:9px!important}
#upgradeOverlay .frog-panel-sub{font-family:Arial,sans-serif!important;font-size:13px!important;opacity:.9;margin-bottom:12px!important}
#upgradeOverlay .frog-upgrade-choice{clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);padding:13px 14px 13px 80px!important;min-height:95px!important;background:linear-gradient(110deg,#fffbea,#fff6d6)!important}
#upgradeOverlay .frog-upgrade-title{font-size:26px!important;font-weight:700!important}
#upgradeOverlay .frog-upgrade-emoji{width:55px;height:55px;left:13px}
#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:17px!important}
#upgradeOverlay .frog-upgrade-desc span{font-weight:800!important}
@media(max-width:600px){.pocket-title{font-size:clamp(43px,calc(11.5 * var(--app-vw, 1vw)),68px);-webkit-text-stroke:7px var(--ink)}#mainMenuOverlay .pocket-menu{width:285px;padding:15px 16px}#mainMenuOverlay .frog-btn{font-size:30px;padding:11px 8px 11px 44px}#mainMenuOverlay #btnStartRun{font-size:35px}#mainMenuOverlay{gap:27px}#upgradeOverlay .frog-panel{width:360px!important}#upgradeOverlay .frog-panel-title{font-size:25px!important}#upgradeOverlay .frog-upgrade-title{font-size:23px!important}#upgradeOverlay .frog-upgrade-choice{padding-left:69px!important}#upgradeOverlay .frog-upgrade-emoji{width:44px;height:44px}#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:16px!important}}
@media(max-height:620px) and (min-width:601px){.pocket-title{font-size:66px}#mainMenuOverlay{gap:18px}#mainMenuOverlay .pocket-menu{width:340px;padding:12px 20px}#mainMenuOverlay .frog-btn{font-size:29px;padding-top:7px;padding-bottom:7px}#mainMenuOverlay #btnStartRun{font-size:35px}}
.pocket-title{font-family:ReferencePixel,Pocket,monospace;font-weight:400;letter-spacing:.025em;font-size:clamp(64px,calc(9 * var(--app-vw, 1vw)),135px)}
#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{font-family:ReferencePixel,Pocket,monospace!important;font-weight:400;font-size:54px}
#upgradeOverlay .frog-panel-title{font-family:ReferencePixel,Pocket,monospace!important;font-size:34px!important;font-weight:400}
#upgradeOverlay .frog-upgrade-title{font-family:ReferencePixel,Pocket,monospace!important;font-size:31px!important;font-weight:400!important}
@media(max-width:600px){.pocket-title{font-size:clamp(46px,calc(12 * var(--app-vw, 1vw)),70px)}#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{font-size:37px}#upgradeOverlay .frog-panel-title{font-size:29px!important}#upgradeOverlay .frog-upgrade-title{font-size:27px!important}}
@media(max-height:620px) and (min-width:601px){.pocket-title{font-size:72px}#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{font-size:37px}}
.pocket-title{transform:scaleX(1.22)}
#upgradeOverlay .frog-panel-sub{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#upgradeOverlay .frog-panel-title{position:relative;padding:0 22px}
#upgradeOverlay .frog-panel-title:before,#upgradeOverlay .frog-panel-title:after{content:"";position:absolute;top:5px;width:23px;height:23px;background-image:var(--atlas);background-size:400% 400%;background-position:66.666% 100%}
#upgradeOverlay .frog-panel-title:before{left:1px}#upgradeOverlay .frog-panel-title:after{right:1px}
@media(max-width:600px){.pocket-title{transform:scaleX(1.08)}}
/* Use the approved artwork directly for fixed title/menu lettering. */
.pocket-title{position:relative;background:var(--reference-title) center/contain no-repeat;width:min(calc(54 * var(--app-vw, 1vw)),800px);height:auto;aspect-ratio:714/237;transform:none;filter:none;text-shadow:none;-webkit-text-stroke:0;margin:0;font-size:0;line-height:0}
.pocket-title span{position:absolute;opacity:0;pointer-events:none}
#mainMenuOverlay .pocket-menu{position:relative;width:min(calc(32 * var(--app-vw, 1vw)),570px);height:auto;aspect-ratio:570/452;padding:0;background:var(--reference-menu) center/100% 100% no-repeat!important;box-shadow:none!important;border:0!important;display:block}
#mainMenuOverlay .pocket-menu:before,#mainMenuOverlay .pocket-menu:after{display:none}
#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{position:absolute;left:8%;width:85%;height:21%;min-height:0;margin:0!important;padding:0;font-size:0;color:transparent!important;border:0!important;background:none!important;box-shadow:none!important;transform:none}
#mainMenuOverlay .frog-btn:before{display:none!important}
#mainMenuOverlay #btnStartRun{top:8%}#mainMenuOverlay #btnBuffGuide{top:29%}#mainMenuOverlay #btnLeaderboard{top:50%}#mainMenuOverlay #btnHowTo{top:71%}
#mainMenuOverlay .frog-btn:hover,#mainMenuOverlay .frog-btn:focus-visible{background:#8cc94017!important;outline:2px solid #2c743766!important;outline-offset:0}
#upgradeOverlay .frog-panel-title{height:44px;margin:0 0 10px!important;padding:0;background:var(--reference-upgrade-title) center/contain no-repeat;font-size:0!important;color:transparent!important}
#upgradeOverlay .frog-panel-title:before,#upgradeOverlay .frog-panel-title:after{display:none}
.snake-head::before{width:37px;height:56px;top:calc(50% + 11px);transform:translate(-50%,-100%);background:var(--snake-face) center/contain no-repeat;clip-path:none;image-rendering:pixelated}
.snake-body::before{width:27px;height:27px;clip-path:none;background:var(--snake-block) center/contain no-repeat}
.snake-body::after,.pocket-neck{display:none!important}
.snake-tail::before{width:32px;height:23px;background:var(--snake-tip) center/contain no-repeat}
.pocket-menu-snake .snake-head::before{transform:translate(-50%,-100%)}
.pocket-menu-snake{transform:scale(1.35);transform-origin:top right;right:8%;top:23%}
.pocket-menu-snake .snake-body:nth-child(2){left:23px;top:0;transform:none}
.pocket-menu-snake .snake-body:nth-child(3){left:47px;top:0;transform:rotate(-12deg)}
.pocket-menu-snake .snake-body:nth-child(4){left:70px;top:8px;transform:rotate(25deg)}
.pocket-menu-snake .snake-tail{left:94px;top:18px;transform:rotate(18deg)}
@media(max-width:600px){.pocket-title{width:calc(94 * var(--app-vw, 1vw));max-width:480px;aspect-ratio:714/237;transform:none}#mainMenuOverlay .pocket-menu{width:calc(80 * var(--app-vw, 1vw));max-width:330px;aspect-ratio:570/452;padding:0}#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{font-size:0;padding:0;min-height:0}.pocket-menu-snake{transform:scale(.65);top:14%;right:6%}#upgradeOverlay .frog-panel-title{height:33px;font-size:0!important}}
@media(max-height:620px) and (min-width:601px){.pocket-title{width:440px;height:146px}#mainMenuOverlay .pocket-menu{width:320px;padding:0}#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{font-size:0;padding:0}}
/* Match the reference composition at its 1774 x 887 canvas size. */
#mainMenuOverlay{justify-content:flex-start;padding-top:calc(9.4 * var(--app-vh, 1vh));gap:20px}
.pocket-title{width:calc(40.3 * var(--app-vw, 1vw));max-width:714px}
#mainMenuOverlay .pocket-menu{width:calc(32.1 * var(--app-vw, 1vw));max-width:570px}
.pocket-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:14px;opacity:.8}
.pocket-decor{width:calc(4.8 * var(--app-vw, 1vw));height:calc(4.8 * var(--app-vw, 1vw));max-width:85px;max-height:85px}
.pocket-menu-snake{transform:scale(2.2);right:6%;top:15%}
#upgradeOverlay{justify-content:flex-end!important;align-items:center!important;padding-right:calc(1.5 * var(--app-vw, 1vw));background:transparent!important}
#upgradeOverlay .frog-panel{width:500px!important}
@media(max-width:1100px) and (min-width:601px){.pocket-menu-snake{transform:scale(1.4)}#mainMenuOverlay{justify-content:center;padding-top:25px}.pocket-title{width:calc(54 * var(--app-vw, 1vw))}#mainMenuOverlay .pocket-menu{width:calc(37 * var(--app-vw, 1vw));max-width:400px}}
@media(max-width:600px){#mainMenuOverlay{justify-content:center;padding-top:25px;gap:24px}.pocket-title{width:calc(94 * var(--app-vw, 1vw))}#mainMenuOverlay .pocket-menu{width:calc(80 * var(--app-vw, 1vw));max-width:330px}.pocket-hint{display:none}.pocket-decor{width:32px;height:32px;max-width:32px;max-height:32px}.pocket-menu-snake{transform:scale(.65);top:14%;right:6%}#upgradeOverlay{justify-content:center!important;padding:12px}#upgradeOverlay .frog-panel{width:360px!important}}
@media(max-height:620px) and (min-width:601px){#mainMenuOverlay{justify-content:center;padding-top:15px;gap:15px}.pocket-title{width:400px}#mainMenuOverlay .pocket-menu{width:300px}.pocket-hint{display:none}}
#frog-bg{background-image:linear-gradient(#a8d96e33,#a8d96e33),var(--reference-ground)!important;background-size:auto,300px 130px!important;background-repeat:repeat!important}
#upgradeOverlay .frog-upgrade-choice{min-height:110px!important;padding:13px 15px 13px 99px!important}
#upgradeOverlay .frog-upgrade-title{font-size:38px!important;line-height:1.05!important}
#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:21px!important;line-height:1.25!important}
#upgradeOverlay .frog-upgrade-emoji{width:70px;height:70px;left:16px}
@media(max-width:600px){#upgradeOverlay .frog-upgrade-choice{padding-left:70px!important;min-height:96px!important}#upgradeOverlay .frog-upgrade-title{font-size:28px!important}#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:16px!important}#upgradeOverlay .frog-upgrade-emoji{width:45px;height:45px;left:13px}}
/* Size-only refinement of the approved artwork. */
#mainMenuOverlay{justify-content:center;padding-top:25px;gap:18px}
.pocket-title{width:calc(30.2 * var(--app-vw, 1vw));max-width:536px}
#mainMenuOverlay .pocket-menu{width:calc(24.1 * var(--app-vw, 1vw));max-width:428px}
.pocket-decor{width:calc(3.6 * var(--app-vw, 1vw));height:calc(3.6 * var(--app-vw, 1vw));max-width:64px;max-height:64px}
.pocket-menu-snake{transform:scale(1.65)}
.frog-orb{background-image:none!important;box-shadow:none!important}
.frog-orb::before{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%,-50%);background:var(--atlas) 0 100%/400% 400% no-repeat;image-rendering:pixelated;border-radius:50%;filter:drop-shadow(0 0 2px #38bee577);pointer-events:none}
#frog-game>.snake-head::before{width:31.45px;height:47.6px;top:calc(50% + 9.35px)}
#frog-game>.snake-body::before{width:22.95px;height:22.95px}
#frog-game>.snake-tail::before{width:27.2px;height:19.55px}
@media(max-width:1100px) and (min-width:601px){.pocket-title{width:calc(41 * var(--app-vw, 1vw))}#mainMenuOverlay .pocket-menu{width:calc(29 * var(--app-vw, 1vw));max-width:320px}.pocket-menu-snake{transform:scale(1.05)}}
@media(max-width:600px){.pocket-title{width:calc(80 * var(--app-vw, 1vw));max-width:380px}#mainMenuOverlay .pocket-menu{width:calc(70 * var(--app-vw, 1vw));max-width:285px}.pocket-decor{width:26px;height:26px;max-width:26px;max-height:26px}.pocket-menu-snake{transform:scale(.55)}#mainMenuOverlay{gap:20px}}
@media(max-height:620px) and (min-width:601px){.pocket-title{width:330px}#mainMenuOverlay .pocket-menu{width:260px}}
/* Consistent cream/pixel UI, with independently moving reference labels. */
#mainMenuOverlay .pocket-decor,#mainMenuOverlay .pocket-menu-snake{display:none!important}
#mainMenuOverlay .pocket-menu:before{display:block!important;content:"";position:absolute;inset:5%;background:#fff8dc;clip-path:none;z-index:0}
#mainMenuOverlay .frog-btn,#mainMenuOverlay #btnStartRun{z-index:1;outline:none!important;background:transparent!important;box-shadow:none!important}
#mainMenuOverlay .frog-btn:hover,#mainMenuOverlay .frog-btn:focus-visible{outline:none!important;background:transparent!important;box-shadow:none!important}
#mainMenuOverlay .frog-btn:after{content:"";position:absolute;inset:0;background-position:left center;background-repeat:no-repeat;background-size:100% auto;transition:transform 140ms ease,filter 140ms ease;pointer-events:none}
#mainMenuOverlay #btnStartRun:after{background-image:var(--menu-play)}
#mainMenuOverlay #btnBuffGuide:after{background-image:var(--menu-upgrades)}
#mainMenuOverlay #btnLeaderboard:after{background-image:var(--menu-scores)}
#mainMenuOverlay #btnHowTo:after{background-image:var(--menu-help)}
#mainMenuOverlay .frog-btn:hover:after,#mainMenuOverlay .frog-btn:focus-visible:after{transform:translateX(5px) translateY(-2px);filter:brightness(1.45)}
#mainMenuOverlay .frog-btn:active:after{transform:translateX(3px)}
#upgradeOverlay .frog-panel{width:390px!important;padding:9px!important}
#upgradeOverlay .frog-panel-title{height:34px;margin-bottom:8px!important}
#upgradeOverlay .frog-upgrade-choice{min-height:87px!important;padding:10px 12px 10px 71px!important}
#upgradeOverlay .frog-upgrade-title{font-family:ReferencePixel,Pocket,monospace!important;font-size:29px!important;line-height:1.05!important}
#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-family:ReferencePixel,Pocket,monospace!important;font-size:24px!important;font-weight:400!important;line-height:1.05!important;color:#123d24!important}
#upgradeOverlay .frog-upgrade-desc span{color:#0b3a21!important;text-shadow:.35px 0 currentColor!important}
#upgradeOverlay .frog-upgrade-emoji{width:48px;height:48px;left:12px}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel{background:linear-gradient(110deg,#fffbea,#fff6d6)!important;border:4px solid #073720!important;border-radius:0!important;box-shadow:4px 4px 0 #073720!important;padding:20px!important;color:#123d24!important;max-height:calc(88 * var(--app-vh, 1vh));overflow:auto}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel :is(div,span,p,li,td,th,label,button,input,select,strong,small,h2,h3){font-family:ReferencePixel,Pocket,monospace!important;color:#123d24!important;text-shadow:none!important}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel-title{font-size:36px!important;line-height:1.1!important;font-weight:400!important;border-bottom:2px solid #648746;padding-bottom:10px}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel-sub{font-size:22px!important;line-height:1.2!important}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel :is(p,li,td,th){font-size:21px!important;line-height:1.25!important}
.frog-panel-section-label{font-size:24px!important;color:#205731!important;margin-top:14px!important}
.frog-overlay:not(#mainMenuOverlay) .frog-btn{font-family:ReferencePixel,Pocket,monospace!important;font-size:23px!important;font-weight:400!important;padding:7px 14px!important;border:2px solid #315b32!important;box-shadow:2px 2px 0 #315b32!important;min-height:36px}
.frog-panel .emoji{display:none}
.frog-overlay .buff-card,.frog-overlay .dashboard-stat,.frog-overlay .scoreboard-table-wrapper,.frog-overlay .upgrade-summary-list li{background:#edf0d0!important;border:1px solid #809d64!important;box-shadow:none!important;border-radius:0!important}
.frog-overlay .buff-card :is(div,span),.frog-overlay .dashboard-stat :is(div,span){font-size:22px!important;line-height:1.15!important}
.frog-overlay .leaderboard-table,.frog-overlay .leaderboard-table thead{background:#f1f0cf!important;border-color:#809d64!important;box-shadow:none!important}
#endGameSummaryOverlay .frog-panel div{font-size:23px!important}
#frog-game>div>button,#pocket-hud,#frog-stats-panel{font-family:ReferencePixel,Pocket,monospace!important}
#frog-game>div>button{font-size:18px!important}
#pocket-hud{font-size:21px!important}
@media(max-width:600px){#upgradeOverlay .frog-panel{width:330px!important}#upgradeOverlay .frog-upgrade-title{font-size:27px!important}#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:22px!important}.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel{max-width:calc(94 * var(--app-vw, 1vw))!important;padding:14px!important}#pocket-hud{font-size:18px!important}}
@media(prefers-reduced-motion:reduce){#mainMenuOverlay .frog-btn:after{transition:none}}
#upgradeOverlay .frog-upgrade-desc span{font-weight:400!important;text-shadow:none!important;font-synthesis:none}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel{animation:none!important;transform:none!important;max-height:calc(88 * var(--app-vh, 1vh))!important;box-sizing:border-box!important}
#dashboardOverlay input{font-size:20px!important}
#dashboardOverlay img{font-size:0}
/* Compact menus; centered upgrade selection. */
#upgradeOverlay{justify-content:center!important;align-items:center!important;padding:12px!important}
#upgradeOverlay .frog-panel{width:350px!important;max-width:calc(94 * var(--app-vw, 1vw))!important}
#upgradeOverlay .frog-upgrade-choice{min-height:78px!important;padding-top:8px!important;padding-bottom:8px!important}
#upgradeOverlay .frog-upgrade-title{font-size:26px!important}
#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:22px!important}
.pocket-title{width:calc(27 * var(--app-vw, 1vw));max-width:480px}
#mainMenuOverlay .pocket-menu{width:calc(21.6 * var(--app-vw, 1vw));max-width:384px}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel{width:440px!important;max-width:calc(92 * var(--app-vw, 1vw))!important;padding:16px!important;max-height:calc(80 * var(--app-vh, 1vh))!important}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel-title{font-size:30px!important}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel-sub{font-size:20px!important}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel :is(p,li,td,th){font-size:19px!important;line-height:1.15!important}
.frog-panel-section-label{font-size:21px!important;margin-top:10px!important}
.frog-overlay:not(#mainMenuOverlay) .frog-btn{font-size:21px!important;padding:6px 12px!important;min-height:32px}
@media(max-width:600px){.pocket-title{width:calc(76 * var(--app-vw, 1vw))}#mainMenuOverlay .pocket-menu{width:calc(65 * var(--app-vw, 1vw))}#upgradeOverlay .frog-panel{width:330px!important}}
/* Three-item main menu and distinct orb pickup treatment. */
#mainMenuOverlay #btnBuffGuide{display:none!important}
#mainMenuOverlay #btnStartRun{top:12%}
#mainMenuOverlay #btnLeaderboard{top:39%}
#mainMenuOverlay #btnHowTo{top:66%}
.frog-orb::before{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #23bfee)!important}
.frog-orb::after{content:"";position:absolute;left:50%;top:50%;width:76%;height:76%;border:2px solid #e6ffff;border-radius:50%;box-shadow:0 0 7px #38ccff,inset 0 0 4px #38ccff;pointer-events:none;animation:pocket-orb-pulse 1.6s ease-in-out infinite}
@keyframes pocket-orb-pulse{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.55}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.95}}
@media(prefers-reduced-motion:reduce){.frog-orb::after{animation:none;transform:translate(-50%,-50%);opacity:.8}}
/* Small scale refinements and a warm, high-contrast value accent. */
#upgradeOverlay .frog-upgrade-desc span,#upgradeOverlay .frog-upgrade-desc .stat-highlight{color:#91420e!important;font-weight:400!important;text-shadow:none!important}
#upgradeOverlay .frog-upgrade-emoji{width:43px!important;height:43px!important;left:14px!important}
.pocket-title{width:calc(24.3 * var(--app-vw, 1vw));max-width:432px}
#mainMenuOverlay .pocket-menu{width:calc(19.44 * var(--app-vw, 1vw));max-width:346px}
@media(max-width:600px){.pocket-title{width:calc(68.4 * var(--app-vw, 1vw))}#mainMenuOverlay .pocket-menu{width:calc(58.5 * var(--app-vw, 1vw))}}
/* Unified value signs; smaller, squarer snake; simpler orb lighting. */
#upgradeOverlay .frog-upgrade-desc span,#upgradeOverlay .frog-upgrade-desc .stat-highlight{color:#006b83!important}
#frog-game>.snake-head::before{width:29.2px;height:44.2px;top:calc(50% + 8.7px)}
#frog-game>.snake-body::before{width:22px;height:19px;background-size:100% 100%;border-radius:0}
#frog-game>.snake-tail::before{width:25.3px;height:18.2px}
.frog-orb::before{filter:none!important}
.frog-orb::after{border:2px solid #e6ffff;box-shadow:none!important;animation:pocket-orb-pulse 1.6s steps(3,end) infinite}
@media(prefers-reduced-motion:reduce){.frog-orb::after{animation:none}}

/* Simplified pixel orb artwork, independent of the detailed atlas. */
.frog-orb::before{background:url("../game-assets/sprites/orb-simple.svg") center/contain no-repeat!important;border-radius:0!important;image-rendering:pixelated}
/* Mobile playfield and menus. Pointer events support touch dragging. */
#frog-game{touch-action:none}
.frog-overlay,.frog-panel{touch-action:pan-y}
@media(pointer:coarse),(max-width:600px){
 #pocket-controls{top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;left:calc(8px + env(safe-area-inset-left))!important;flex-direction:row!important;gap:6px!important}
 #pocket-controls button{min-width:52px;min-height:44px;padding:8px!important}
 #pocket-hud{top:calc(8px + env(safe-area-inset-top))!important;max-width:calc(calc(100 * var(--app-vw, 1vw)) - 16px);padding:6px 10px!important;gap:6px!important}
 #frog-stats-panel{bottom:calc(62px + env(safe-area-inset-bottom))!important}
 .frog-overlay:not(#mainMenuOverlay) .frog-btn{min-height:44px!important}
 #upgradeOverlay .frog-panel{max-height:calc(100 * var(--app-vh, 1vh) - 32px)!important;overflow-y:auto!important;box-sizing:border-box}
 .frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel{max-height:calc(100 * var(--app-vh, 1vh) - 32px)!important}
 #mainMenuOverlay .pocket-menu{width:clamp(260px,calc(65 * var(--app-vw, 1vw)),300px);max-width:calc(90 * var(--app-vw, 1vw))}
 .pocket-profile{bottom:calc(12px + env(safe-area-inset-bottom));min-height:44px}
}
@media(max-height:500px) and (orientation:landscape){
 #mainMenuOverlay{gap:10px;padding-top:8px;padding-bottom:8px}
 .pocket-title{width:240px;max-width:calc(40 * var(--app-vw, 1vw))}
 #mainMenuOverlay .pocket-menu{width:260px;max-width:calc(45 * var(--app-vw, 1vw))}
 #mainMenuOverlay .pocket-hint{display:none}
 #upgradeOverlay .frog-panel{max-height:calc(100 * var(--app-vh, 1vh) - 24px)!important;overflow-y:auto!important}
}
/* Compact profile layout without legacy portrait or skin picker. */
#dashboardOverlay .frog-panel{width:400px!important}
#dashboardContent>div:first-child{padding:0 0 16px!important;border-bottom:2px solid #809d64!important;margin-bottom:16px!important}
#dashboardCurrentTag{font-size:30px!important;margin-bottom:6px!important}
#dashboardContent>div:first-child>div{font-size:20px;line-height:1.25}
#dashboardContent>div:first-child>div:nth-child(3){width:80%!important;height:8px!important;margin:10px auto!important}
#dashboardContent .frog-panel-section-label{margin-top:16px!important;letter-spacing:.04em}
#dashboardTagInput{min-width:0;flex:1;font-size:20px!important}
#dashboardCloseBtn{margin-top:16px!important}
/* Desktop menu refinement; framed leaderboard and run results. */
@media(min-width:601px) and (pointer:fine){.pocket-title{width:calc(21.4 * var(--app-vw, 1vw));max-width:380px}#mainMenuOverlay .pocket-menu{width:calc(17.1 * var(--app-vw, 1vw));max-width:304px}}
#leaderboardOverlay .frog-panel,#endGameSummaryOverlay .frog-panel{border:5px solid #073720!important;box-shadow:5px 5px 0 #467834!important;padding:16px!important}
#leaderboardOverlay .frog-panel-title,#endGameSummaryContent:before{display:block;background:#073720!important;color:#fff8db!important;padding:10px 12px!important;margin:-16px -16px 16px!important;border-bottom:3px solid #7cba49!important;font:32px/1.1 ReferencePixel,monospace!important;text-align:center;letter-spacing:1px}
#endGameSummaryContent:before{content:"RUN COMPLETE"}
#leaderboardOverlay .frog-panel-list,#endGameSummaryContent .frog-panel-list{min-width:0!important;display:grid;gap:6px;margin-top:8px!important}
#leaderboardOverlay .frog-panel-list li,#endGameSummaryContent .frog-panel-list li{background:#ecedcc!important;border:2px solid #b3c68a!important;border-left:5px solid #497b36!important;padding:9px 10px!important;margin:0!important;font-size:20px!important;line-height:1.2!important;overflow-wrap:anywhere}
#leaderboardOverlay .frog-panel-list li:first-child,#endGameSummaryContent .frog-panel-list li:first-child{background:#f5ebbb!important;border-color:#b1a654!important}
#leaderboardOverlay .frog-panel-list li strong,#endGameSummaryContent .frog-panel-list li strong{color:#006b83!important}
#endGameSummaryContent>div:first-of-type{background:#e4edc5!important;border:2px solid #8bab61!important;padding:14px!important;gap:12px}
#endGameSummaryContent>div:first-of-type>div:first-child{padding:0 12px 0 0!important;border-right:2px solid #8bab61!important}
#endGameSummaryContent>div:first-of-type>div:first-child>div:last-child{font-size:48px!important;line-height:1!important;color:#006b83!important}
#endSummaryTagInput,#frog-scoreboard-overlay input{font:24px/1.2 ReferencePixel,monospace!important;min-width:0!important;min-height:46px!important;padding:9px 12px!important;background:#fffbed!important;color:#073720!important;border:2px solid #497b36!important;border-radius:0!important}
#endSummaryTagInput::placeholder,#frog-scoreboard-overlay input::placeholder{font:inherit!important;color:#547047!important;opacity:1}
#endSummaryTagMsg{font-size:18px!important}
#endGameSummaryOverlay .frog-panel-section-label,#leaderboardOverlay .frog-panel-section-label{font-size:22px!important;letter-spacing:.06em!important}
@media(min-width:601px) and (pointer:fine){.pocket-title{width:calc(19.2 * var(--app-vw, 1vw));max-width:342px}#mainMenuOverlay .pocket-menu{width:calc(15.4 * var(--app-vw, 1vw));max-width:274px}#upgradeOverlay .frog-panel{width:320px!important}#upgradeOverlay .frog-upgrade-choice{min-height:70px!important;padding-left:62px!important}#upgradeOverlay .frog-upgrade-title{font-size:24px!important}#upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:20px!important}#upgradeOverlay .frog-upgrade-emoji{width:38px!important;height:38px!important}}
/* Keep phone controls visible at the top, independent of playfield height. */
@media(pointer:coarse),(max-width:600px){
 #pocket-controls{position:fixed!important;top:calc(12px + env(safe-area-inset-top))!important;left:calc(12px + env(safe-area-inset-left))!important;bottom:auto!important;right:auto!important;flex-direction:column!important;gap:8px!important;z-index:120!important}
 #pocket-controls button{min-width:108px!important;min-height:60px!important;font-size:28px!important;padding:10px 12px!important}
 #pocket-hud{position:fixed!important;top:calc(12px + env(safe-area-inset-top))!important;left:calc(140px + env(safe-area-inset-left))!important;right:12px!important;transform:none!important;width:max-content!important;max-width:calc(calc(100 * var(--app-vw, 1vw)) - 156px)!important;font-size:25px!important;white-space:normal!important;flex-wrap:wrap!important}
}
/* Readable score panels: neutral rows, compact pagination, explicit title contrast. */
#leaderboardOverlay.frog-overlay .frog-panel{width:580px!important;max-height:calc(92 * var(--app-vh, 1vh))!important}
#leaderboardOverlay.frog-overlay .frog-panel .frog-panel-title{color:#fff8db!important;background:#073720!important;font-size:36px!important;line-height:1.2!important;letter-spacing:0!important;text-shadow:none!important}
#leaderboardOverlay .frog-panel-sub{font-size:22px!important;margin-bottom:12px!important}
#leaderboardOverlay .frog-panel-list li,#leaderboardOverlay .frog-panel-list li:first-child,#endGameSummaryContent .frog-panel-list li:first-child{background:#f8f5dd!important;border:1px solid #adc18a!important;border-left:3px solid #729452!important}
#leaderboardOverlay .frog-panel-list{gap:10px!important}
#leaderboardOverlay .frog-panel-list li{padding:12px 14px!important;font-size:23px!important;line-height:1.35!important}
#leaderboardOverlay .frog-panel-list li strong{display:inline-block;min-width:42px}
#leaderboardOverlay.frog-overlay .frog-panel .frog-panel-footer,#leaderboardOverlay.frog-overlay .frog-panel .frog-panel-footer div{font-size:21px!important;line-height:1.25!important}
#leaderboardOverlay.frog-overlay .frog-panel .frog-btn{font-size:20px!important;min-height:32px!important;padding:5px 12px!important;width:auto!important;flex:0 1 110px!important;margin:0!important}
#leaderboardOverlay .frog-panel-footer>div[style*="display:flex"]{justify-content:center;gap:12px!important}
#leaderboardOverlay .frog-panel-footer{text-align:center;margin-top:12px!important}
#endGameSummaryContent:before{font-size:32px!important;line-height:1.2!important;color:#fff8db!important}
#endGameSummaryOverlay.frog-overlay .frog-panel .frog-btn{font-size:20px!important;min-height:34px!important;padding:6px 12px!important}
#dashboardStartingBuffBtn{display:none!important}
.pocket-build-label{position:fixed;right:10px;bottom:5px;font:14px monospace;color:#17482b;pointer-events:none;z-index:999}
/* Override inherited dark text on dark panel headers. */
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .frog-panel-title{color:#fff8db!important;background:#073720!important;text-shadow:none!important;font-weight:400!important;font-size:34px!important}
#leaderboardOverlay .player-row,#leaderboardOverlay .player-row:first-child,#endGameSummaryContent .player-row,#endGameSummaryContent .player-row:first-child{background:#dbedb4!important;border:2px solid #497b36!important;border-left:6px solid #006b83!important}
#leaderboardOverlay .player-row::after,#endGameSummaryContent .player-row::after{content:"YOU";display:inline-block;margin-left:8px;font:16px ReferencePixel,monospace;color:#006b83}
#leaderboardOverlay .frog-panel,#endGameSummaryOverlay .frog-panel{border-radius:0!important;background:#fff8db!important;box-shadow:4px 4px 0 #073720!important}
@media(min-width:601px) and (pointer:fine){#leaderboardOverlay.frog-overlay .frog-panel{width:540px!important}#endGameSummaryOverlay.frog-overlay .frog-panel{width:410px!important}.pocket-title{max-width:325px;width:calc(18.2 * var(--app-vw, 1vw))}#mainMenuOverlay .pocket-menu{max-width:260px;width:calc(14.6 * var(--app-vw, 1vw))}#upgradeOverlay .frog-panel{width:305px!important}}
@media(pointer:coarse),(max-width:600px){#mainMenuOverlay .pocket-menu{width:310px!important;max-width:calc(90 * var(--app-vw, 1vw))}.pocket-title{width:380px!important;max-width:calc(80 * var(--app-vw, 1vw))}#upgradeOverlay .frog-panel{width:380px!important}#leaderboardOverlay.frog-overlay .frog-panel{width:620px!important}#endGameSummaryOverlay.frog-overlay .frog-panel{width:490px!important}}
/* Five-percent snake size refinement. */
#frog-game>.snake-head::before{width:27.74px;height:41.99px;top:calc(50% + 8.265px)}
#frog-game>.snake-body::before{width:20.9px;height:18.05px}
#frog-game>.snake-tail::before{width:24.035px;height:17.29px}
/* Shared pixel frame language for score screens. */
#leaderboardOverlay#leaderboardOverlay .frog-panel,#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel{background:#073720!important;border:0!important;padding:12px!important;box-shadow:none!important;clip-path:polygon(10px 0,calc(100% - 10px) 0,calc(100% - 10px) 5px,100% 5px,100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 5px),0 calc(100% - 5px),0 10px,10px 10px)}
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .frog-panel-title,#endGameSummaryContent:before{margin:0 0 12px!important;padding:8px 4px!important;border:0!important;color:#fff8db!important;background:none!important;text-align:center;font-size:32px!important;letter-spacing:0!important}
#leaderboardOverlay#leaderboardOverlay .frog-panel-sub{display:none}
#leaderboardContent>.frog-panel-section-label{display:none}
#leaderboardOverlay#leaderboardOverlay .frog-panel-list li,#leaderboardOverlay#leaderboardOverlay .frog-panel-list li:first-child,#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel-list li,#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel-list li:first-child{background:#fff8db!important;border:0!important;margin:0!important;padding:12px!important;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
#leaderboardOverlay#leaderboardOverlay .player-row,#endGameSummaryOverlay#endGameSummaryOverlay .player-row{background:#d9edb0!important;box-shadow:inset 5px 0 #006b83!important}
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .frog-panel-footer,#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .frog-panel-footer div{color:#fff8db!important}
#leaderboardOverlay#leaderboardOverlay .frog-panel .frog-btn,#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel .frog-btn{background:#fff8db!important;border:0!important;box-shadow:none!important;color:#073720!important;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px);font-size:23px!important}
#leaderboardOverlay .frog-btn:hover,#endGameSummaryOverlay .frog-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
#endGameSummaryContent>div:first-of-type{background:#fff8db!important;border:0!important;padding:16px!important;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
#endGameSummaryOverlay#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel-section-label,#endGameSummaryOverlay#endGameSummaryOverlay#endGameSummaryOverlay #endSummaryTagMsg{color:#fff8db!important}
#endGameSummaryContent .frog-panel-list{gap:6px!important}
#endSummaryTagInput{border:0!important;background:#fff8db!important}
/* Score screens share the main menu's cream surface and dark pixel lettering. */
:is(#leaderboardOverlay,#endGameSummaryOverlay,#frog-scoreboard-overlay) .frog-panel,
#frog-scoreboard-overlay>div{background:#fff8db!important;color:#073720!important;border:5px solid #073720!important;border-radius:0!important;box-shadow:5px 5px 0 #527f36!important;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .frog-panel,
#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel{background:#fff8db!important;border:5px solid #073720!important;padding:18px!important}
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay :is(.frog-panel-title,.frog-panel-footer,.frog-panel-footer div),
#endGameSummaryOverlay#endGameSummaryOverlay#endGameSummaryOverlay#endGameSummaryOverlay :is(.frog-panel-section-label,#endSummaryTagMsg),
#endGameSummaryContent:before,#frog-scoreboard-overlay .scoreboard-title{background:transparent!important;color:#073720!important;font-family:ReferencePixel,monospace!important;text-shadow:none!important}
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .frog-panel-title,#endGameSummaryContent:before,#frog-scoreboard-overlay .scoreboard-title{font-size:34px!important;line-height:1.2!important;padding:4px 0 14px!important;border-bottom:3px solid #8aab60!important}
#frog-scoreboard-overlay *{font-family:ReferencePixel,monospace!important;color:#073720!important;text-shadow:none!important}
#frog-scoreboard-overlay :is(.scoreboard-subtitle,.scoreboard-page-info,.scoreboard-hint){font-size:20px!important}
#frog-scoreboard-overlay :is(td,th){font-size:22px!important;padding:10px!important;background:#fff8db!important;border-color:#a5bd7d!important}
#frog-scoreboard-overlay .scoreboard-row--me td{background:#d9edb0!important}
#frog-scoreboard-overlay button{font-size:22px!important;background:#e3ecc8!important;border:2px solid #527f36!important;border-radius:0!important;padding:6px 12px!important;box-shadow:none!important}
#leaderboardOverlay#leaderboardOverlay .frog-panel-list li,#endGameSummaryOverlay#endGameSummaryOverlay .frog-panel-list li{box-shadow:inset 0 -2px #bed09a!important}
@media(min-width:601px) and (pointer:fine){#mainMenuOverlay .pocket-menu{width:calc(14 * var(--app-vw, 1vw));max-width:248px}.pocket-title{width:calc(17.4 * var(--app-vw, 1vw));max-width:310px}#upgradeOverlay .frog-panel{width:292px!important}}
/* New score layouts use their own components instead of legacy panel rules. */
.score-surface{width:520px;max-width:calc(92 * var(--app-vw, 1vw));max-height:calc(92 * var(--app-vh, 1vh));overflow:auto;padding:22px;background:#fff8db;color:#073720;border:6px solid #073720;box-shadow:5px 5px #53823a;font:24px/1.2 ReferencePixel,monospace;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.score-surface .frog-panel-title,.score-heading{font:36px/1 ReferencePixel,monospace!important;color:#073720!important;background:none!important;border:0!important;margin:0 0 22px!important;padding:0!important;text-align:center}
.score-surface .frog-panel-sub{display:none}.score-surface .emoji{display:none}
#leaderboardOverlay .score-surface .frog-panel-list li,#leaderboardOverlay .score-surface .rank-labels{display:grid!important;grid-template-columns:32px minmax(0,1fr) 74px 80px;gap:10px;align-items:center}
#leaderboardOverlay .score-surface .frog-panel-list li{padding:12px 8px!important;border:0!important;background:#e8edc9!important;box-shadow:none!important;font-size:24px!important;clip-path:none!important}
#leaderboardOverlay .score-surface .player-row{background:#cfdfa2!important;border-left:4px solid #006b83!important}
#leaderboardOverlay .score-surface .player-row:after{display:none}
.rank-labels{font-size:17px;color:#426535;padding:0 8px 8px;letter-spacing:1px}.rank-player{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-score{text-align:right;color:#006b83}.rank-time{text-align:right}.rank-number{color:#426535}
#leaderboardOverlay .score-surface .frog-panel-footer,#leaderboardOverlay .score-surface .frog-panel-footer div{color:#073720!important;font:20px ReferencePixel,monospace!important}
.score-surface button,#leaderboardOverlay .score-surface .frog-btn{font:24px ReferencePixel,monospace!important;border:0!important;background:transparent!important;color:#073720!important;box-shadow:none!important;clip-path:none!important;cursor:pointer;padding:8px!important;min-height:36px!important}
.score-surface button:hover{transform:translateY(-2px);color:#006b83!important}.score-surface button:disabled{opacity:.35}
#endGameSummaryContent:before{display:none!important}.score-hero{display:flex;flex-direction:column;text-align:center;background:#e4edc3;padding:18px 12px;margin-bottom:16px}.score-hero>span{font-size:19px;letter-spacing:2px}.score-hero>strong{font-size:68px;line-height:1;color:#006b83}.score-hero>small{font-size:20px;margin-top:6px}
.run-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;margin:0 0 22px}.run-metrics div{display:flex;flex-direction:column;gap:4px}.run-metrics span{font-size:15px;color:#426535}.run-metrics strong{font-size:25px}
.score-tag-label{font-size:18px;letter-spacing:1px}.score-tag{display:flex;gap:8px;margin-top:6px}.score-tag input{flex:1;width:0}.score-actions{display:grid;grid-template-columns:1fr 1fr;text-align:center;border-top:2px solid #94b16b;padding-top:10px;margin-top:12px}.score-actions button:first-child{grid-column:1/-1;font-size:32px!important}
@media(pointer:coarse),(max-width:600px){.score-surface{width:580px}}
#endGameSummaryContent>.run-metrics{background:transparent!important;border:0!important;padding:0!important;clip-path:none!important;gap:8px!important}
#endGameSummaryContent>.run-metrics>div{padding:0!important;border:0!important}
#endGameSummaryContent>.run-metrics>div>span{font-size:15px!important}
#endGameSummaryContent>.run-metrics>div>strong{font-size:25px!important}
#endGameSummaryContent>.score-tag{background:transparent!important;border:0!important;padding:0!important;clip-path:none!important}
#pocket-controls button,#pocket-hud,.frog-overlay .frog-btn,#frog-scoreboard-overlay button{border-radius:7px!important}
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-btn{clip-path:none!important}
@media(min-width:601px) and (pointer:fine){.pocket-title{width:calc(15.6 * var(--app-vw, 1vw))!important;max-width:280px!important}#mainMenuOverlay .pocket-menu{width:calc(12.6 * var(--app-vw, 1vw))!important;max-width:224px!important}}
.pp-frog-badge{position:absolute;left:50%;top:70%;display:flex;gap:2px;transform:translateX(-50%);pointer-events:none}
.frog-sprite .pp-frog-badge img{position:static!important;inset:auto!important;width:10px!important;height:10px!important;image-rendering:pixelated;display:block!important}
.pp-frog-badge i{width:4px;height:4px;background:#f4df76;border:1px solid #073720;box-shadow:0 1px #073720}
/* Modest phone readability increase without changing the playfield scale. */
@media(pointer:coarse),(max-width:600px){
 #howToOverlay.frog-overlay .frog-panel{width:560px!important;max-width:calc(92 * var(--app-vw, 1vw))!important}
 #howToOverlay.frog-overlay .frog-panel :is(p,li){font-size:25px!important;line-height:1.3!important}
 #howToOverlay.frog-overlay .frog-panel-title{font-size:36px!important}
 #howToOverlay.frog-overlay .frog-panel-section-label{font-size:26px!important}
 #upgradeOverlay .frog-panel{width:410px!important}
 #upgradeOverlay .frog-upgrade-title{font-size:29px!important}
 #upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:25px!important;line-height:1.15!important}
 #mainMenuOverlay .pocket-menu{width:330px!important}.pocket-title{width:400px!important}
}
.frog-sprite[data-approved-role]::before{background:var(--approved-frog) center/contain no-repeat!important;image-rendering:pixelated}
#frog-game #pocket-controls button{border-radius:7px!important;clip-path:none!important}
@media(min-width:601px) and (pointer:fine){.pocket-title{width:calc(14.4 * var(--app-vw, 1vw))!important;max-width:258px!important}#mainMenuOverlay .pocket-menu{width:calc(11.6 * var(--app-vw, 1vw))!important;max-width:206px!important}}
/* Hide the baked Play arrow, replacing it with a movable pixel pointer. */
#mainMenuOverlay #btnStartRun:after{clip-path:inset(0 0 0 12%)}
#mainMenuOverlay .frog-btn:before{display:none!important;content:"";position:absolute;left:0;top:50%;width:13px;height:19px;background:#073720;border:0!important;transform:translateY(-50%);clip-path:polygon(0 0,35% 0,35% 18%,65% 18%,65% 35%,100% 35%,100% 65%,65% 65%,65% 82%,35% 82%,35% 100%,0 100%);z-index:2}
#mainMenuOverlay .pocket-menu .frog-btn:before{display:none!important}
#mainMenuOverlay .pocket-menu .frog-btn.pp-selected:before{display:block!important}
.pp-help-hidden{display:none!important}
.pp-help-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 12px;font:24px ReferencePixel,monospace;color:#073720}
.pp-help-nav button{width:auto!important;margin:0!important;min-width:80px}.pp-help-nav button:disabled{opacity:.35}
@media(pointer:coarse),(max-width:600px){#upgradeOverlay .frog-panel{width:430px!important}#howToOverlay .frog-panel-list{min-height:190px}}
/* Build 33: three-percent snake refinement. */
#frog-game>.snake-head::before{width:26.9078px;height:40.7303px;top:calc(50% + 8.01705px)}
#frog-game>.snake-body::before{width:20.273px;height:17.5085px}
#frog-game>.snake-tail::before{width:23.31395px;height:16.7713px}

/* Build 34: Soft Scales trial, with short neck seated into first segment. */
#frog-game>.snake-head::before{width:26.9px;height:23px;top:calc(50% + 7px)}
#frog-game>.snake-body::before{width:20.3px;height:19px}
#frog-game>.snake-tail::before{width:23.3px;height:16.8px}
#howToOverlay.frog-overlay .frog-panel{background:#fff8db!important;color:#073720!important;border:4px solid #073720!important;border-radius:7px!important;clip-path:none!important}
#howToOverlay.frog-overlay .frog-panel-title{color:#073720!important;background:none!important}
#howToOverlay.frog-overlay .frog-btn{background:transparent!important;color:#073720!important;border:1px solid #9ab47b!important;border-radius:7px!important;clip-path:none!important;box-shadow:none!important;font:24px/1.2 ReferencePixel,monospace!important;padding:8px 16px!important}
@media(pointer:coarse),(max-width:600px){
 #upgradeOverlay .frog-panel{width:650px!important;max-width:calc(92 * var(--app-vw, 1vw))!important}
 #upgradeOverlay .frog-upgrade-choice{min-height:116px!important;padding-top:16px!important;padding-bottom:16px!important}
 #upgradeOverlay .frog-upgrade-title{font-size:40px!important;line-height:1.12!important}
 #upgradeOverlay .frog-upgrade-desc,#upgradeOverlay .frog-upgrade-desc *{font-size:36px!important;line-height:1.2!important}
 #upgradeOverlay .frog-panel-sub{font-size:30px!important}
 #howToOverlay.frog-overlay .frog-panel{width:760px!important;max-width:calc(92 * var(--app-vw, 1vw))!important;max-height:calc(88 * var(--app-vh, 1vh))!important;overflow:auto!important;padding:28px!important}
 #howToOverlay.frog-overlay .frog-panel :is(p,li,li span,li strong){font-size:38px!important;line-height:1.3!important}
 #howToOverlay.frog-overlay .frog-panel-title{font-size:46px!important}
 #howToOverlay.frog-overlay .frog-panel-section-label{font-size:40px!important}
 #howToOverlay.frog-overlay .frog-btn,.pp-help-nav{font-size:36px!important}
 #howToOverlay .frog-panel-list{min-height:250px}
 #upgradeOverlay .frog-upgrade-choice:is(:hover,:focus,:active){background:var(--cream)!important;transform:none!important;outline:none!important;box-shadow:none!important;filter:none!important}
 #upgradeOverlay .frog-upgrade-choice{-webkit-tap-highlight-color:transparent}
}

/* Build 37: matching text actions in help and personal stats. */
#howToOverlay.frog-overlay .frog-panel button,#dashboardOverlay.frog-overlay .frog-panel button{
 background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important;color:#073720!important;text-shadow:none!important;font-family:ReferencePixel,monospace!important;font-size:24px!important;font-weight:400!important;line-height:1.2!important;padding:8px 12px!important;cursor:pointer;
}
#howToOverlay.frog-overlay .frog-panel button:disabled,#dashboardOverlay.frog-overlay .frog-panel button:disabled{opacity:.35;cursor:default}
@media(hover:hover){
 #howToOverlay.frog-overlay .frog-panel button:not(:disabled):hover,#dashboardOverlay.frog-overlay .frog-panel button:not(:disabled):hover{background:transparent!important;color:#277241!important;transform:translateY(-2px)}
}
#howToOverlay.frog-overlay .frog-panel button:focus-visible,#dashboardOverlay.frog-overlay .frog-panel button:focus-visible{outline:2px solid #397a43!important;outline-offset:2px}
@media(pointer:coarse),(max-width:600px){#howToOverlay.frog-overlay .frog-panel button,#dashboardOverlay.frog-overlay .frog-panel button{font-size:36px!important;min-height:64px!important}}

/* Build 38: restore exact Build 33 snake dimensions. */
#frog-game>.snake-head::before{width:26.9078px;height:40.7303px;top:calc(50% + 8.01705px)}
#frog-game>.snake-body::before{width:20.273px;height:17.5085px}
#frog-game>.snake-tail::before{width:23.31395px;height:16.7713px}

/* Build 39: Garden Snake, side-facing head with neck at movement anchor. */
#frog-game>.snake-head::before{width:33px;height:21px;top:50%;transform:translate(-82%,-50%) scaleY(var(--face-flip,1))}
#frog-game>.snake-body::before{width:20.273px;height:18.5px}
#frog-game>.snake-tail::before{width:22px;height:14px}

/* Build 40: shared rounded frames and stronger head proportions. */
#howToOverlay.frog-overlay .frog-panel,#dashboardOverlay.frog-overlay .frog-panel{
 border-radius:7px!important;clip-path:none!important;border:4px solid #073720!important;background:#fff8db!important;color:#073720!important;box-shadow:3px 3px #527f36!important;
}
#howToOverlay.frog-overlay .frog-panel :is(input,button),#dashboardOverlay.frog-overlay .frog-panel :is(input,button){border-radius:7px!important;clip-path:none!important}
#frog-game>.snake-head::before{width:38px;height:24px;top:50%;transform:translate(-82%,-50%) scaleY(var(--face-flip,1))}

/* Build 41: Compact Viper head trial. */
#frog-game>.snake-head::before{width:32px;height:27px;top:50%;transform:translate(-82%,-50%) scaleY(var(--face-flip,1))}

/* Build 42: exact Build 33 snake restoration. */
#frog-game>.snake-head::before{width:26.9078px;height:40.7303px;top:calc(50% + 8.01705px);transform:translate(-50%,-100%)}
#frog-game>.snake-body::before{width:20.273px;height:17.5085px}
#frog-game>.snake-tail::before{width:23.31395px;height:16.7713px}

/* Build 43: continuous mobile help, larger readable surface. */
@media(pointer:coarse),(max-width:600px){
 #howToOverlay.frog-overlay .frog-panel{width:880px!important;max-width:calc(94 * var(--app-vw, 1vw))!important;max-height:calc(88 * var(--app-vh, 1vh))!important;overflow-y:auto!important}
 #howToOverlay.frog-overlay .frog-panel :is(p,li,li span,li strong){font-size:42px!important;line-height:1.3!important}
 #howToOverlay .frog-panel-list{min-height:0!important}
}

/* Build 44: larger upgrade artwork on mobile only. */
@media(pointer:coarse),(max-width:600px){#upgradeOverlay .frog-upgrade-emoji{width:50px!important;height:50px!important}}

/* Build 45: mobile help and profile readability. */
@media(pointer:coarse),(max-width:600px){
 #howToOverlay.frog-overlay .frog-panel,#dashboardOverlay.frog-overlay .frog-panel{width:880px!important;max-width:calc(94 * var(--app-vw, 1vw))!important;max-height:calc(88 * var(--app-vh, 1vh))!important;overflow-y:auto!important;padding:28px!important}
 #howToOverlay.frog-overlay .frog-panel :is(p,li,li span,li strong){font-size:46px!important;line-height:1.35!important}
 #howToOverlay.frog-overlay .frog-panel-title,#dashboardOverlay.frog-overlay .frog-panel-title{font-size:50px!important;line-height:1.15!important}
 #howToOverlay.frog-overlay .frog-panel-section-label,#dashboardOverlay.frog-overlay .frog-panel-section-label{font-size:40px!important;line-height:1.2!important}
 #dashboardOverlay #dashboardContent :is(p,li,label,small,span,strong){font-size:36px!important;line-height:1.3!important}
 #dashboardOverlay #dashboardContent>div:first-child>div{font-size:36px!important}
 #dashboardOverlay #dashboardCurrentTag{font-size:46px!important}
 #dashboardOverlay #dashboardTagInput{font-size:38px!important;min-height:64px!important}
 #howToOverlay.frog-overlay .frog-panel button,#dashboardOverlay.frog-overlay .frog-panel button{font-size:40px!important;min-height:68px!important}
}

/* Isolated score components: same cream cards and stepped silhouette as upgrades. */
#leaderboardOverlay .pp-board,#endGameSummaryOverlay .pp-board{width:460px;max-width:calc(92 * var(--app-vw, 1vw));max-height:calc(92 * var(--app-vh, 1vh));overflow:auto;box-sizing:border-box;background:#073720;padding:14px;border:0;box-shadow:5px 5px #4a7e36;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
#leaderboardOverlay .pp-board *,#endGameSummaryOverlay .pp-board *{font-family:ReferencePixel,monospace!important;text-shadow:none!important;box-sizing:border-box}
#leaderboardOverlay .pp-heading,#endGameSummaryOverlay .pp-heading{color:#fff8db!important;font-size:34px!important;line-height:1!important;text-align:center;margin:5px 0 18px!important;letter-spacing:1px}
.pp-entries{padding:0;margin:0;list-style:none;display:grid;gap:8px}
#leaderboardOverlay .pp-entry{display:grid;grid-template-columns:40px minmax(0,1fr) 90px;align-items:center;gap:10px;padding:12px 14px;background:#fff8db;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
#leaderboardOverlay .pp-entry *{color:#073720!important}.pp-rank{font-size:32px;line-height:1}.pp-player,.pp-points{display:flex;flex-direction:column;gap:4px}.pp-player strong{font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}.pp-player small{font-size:18px}.pp-points{text-align:right}.pp-points strong{font-size:30px;line-height:1;font-weight:400}.pp-points small{font-size:14px;letter-spacing:1px}
#leaderboardOverlay .pp-me{background:#d4edaf;box-shadow:inset 5px 0 #42a38b}.pp-pager{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:12px}.pp-pager span{color:#fff8db!important;font-size:22px}
.pp-board button{cursor:pointer;font-size:24px;line-height:1.2;border:0;background:transparent;color:#fff8db;padding:8px;box-shadow:none;border-radius:0}.pp-board button:hover{transform:translateY(-2px);color:#bfe889}.pp-board button:disabled{opacity:.3;cursor:default}.pp-back{display:block;margin:4px auto 0}
#endGameSummaryContent:before{display:none!important}
#endGameSummaryOverlay .pp-result{background:#fff8db;display:flex;flex-direction:column;align-items:center;padding:16px 10px;gap:5px;color:#073720;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.pp-result span{font-size:19px;letter-spacing:2px}.pp-result strong{font-size:70px;line-height:1;font-weight:400}.pp-result small{font-size:18px}.pp-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0 14px}.pp-metrics article{background:#fff8db;color:#073720;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}.pp-metrics span{font-size:16px}.pp-metrics strong{font-size:25px;font-weight:400}.pp-tag label{color:#fff8db;font-size:18px}.pp-tag>div{display:flex;gap:8px;margin-top:6px}.pp-tag input{flex:1;min-width:0}.pp-tag p{font-size:18px;color:#fff8db;margin:4px 0;min-height:0}.pp-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:10px}.pp-actions .pp-play{grid-column:1/-1;background:#fff8db;color:#073720;font-size:32px;padding:12px;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
@media(pointer:coarse),(max-width:600px){#leaderboardOverlay .pp-board,#endGameSummaryOverlay .pp-board{width:540px}}
@media(pointer:coarse),(max-width:600px){#leaderboardOverlay .pp-board,#endGameSummaryOverlay .pp-board{width:580px}}
/* Score menu polish: consistent spacing, readable secondary text and clear actions. */
#leaderboardOverlay .pp-board,#endGameSummaryOverlay .pp-board{padding:18px;scrollbar-width:thin;scrollbar-color:#a6c27a #073720}
#leaderboardOverlay .pp-heading,#endGameSummaryOverlay .pp-heading{margin:4px 0 20px!important;font-size:36px!important;letter-spacing:.5px}
.pp-entries{gap:10px}
#leaderboardOverlay .pp-entry{padding:13px 14px;grid-template-columns:36px minmax(0,1fr) 96px;gap:12px;min-height:76px}
#leaderboardOverlay .pp-player strong{font-size:26px;line-height:1.05}
#leaderboardOverlay .pp-player small{color:#426535!important;font-size:18px;line-height:1.1}
#leaderboardOverlay .pp-points strong{color:#006b83!important;font-size:32px}
#leaderboardOverlay .pp-points small{color:#426535!important;font-size:14px}
#leaderboardOverlay .pp-rank{font-size:28px;color:#426535!important;text-align:center}
#leaderboardOverlay .pp-me{background:#d8edb8;box-shadow:inset 5px 0 #3d9d80}
#leaderboardOverlay .pp-me .pp-player small{color:#006b83!important}
.pp-pager{margin-top:16px;gap:20px}
.pp-pager button{width:42px;height:36px;padding:4px;border:1px solid #6d9653;border-radius:7px;background:#164a2c;font-size:20px}
.pp-pager span{min-width:65px;text-align:center;font-size:22px}
.pp-back{font-size:22px;margin:10px auto 0;padding:8px 18px!important}
#endGameSummaryOverlay .pp-result{padding:20px 12px;gap:8px}
#endGameSummaryOverlay .pp-result strong{color:#006b83;font-size:76px}
#endGameSummaryOverlay .pp-result small{color:#426535;font-size:19px}
.pp-metrics{gap:9px;margin:10px 0 20px}
.pp-metrics article{padding:12px;border-radius:7px;gap:8px}
.pp-metrics span{color:#426535;font-size:16px;letter-spacing:.3px}
.pp-metrics strong{font-size:26px}
.pp-tag label{display:block;font-size:18px;letter-spacing:.6px;margin-bottom:8px}
.pp-tag>div{gap:8px}
#endGameSummaryOverlay #endSummaryTagInput{border-radius:7px!important;min-height:44px!important;font-size:24px!important}
.pp-tag button{border-radius:7px;background:#fff8db;color:#073720;padding:8px 14px}
#endGameSummaryOverlay #endSummaryTagMsg{font-size:18px!important;line-height:1.25;min-height:0;margin:6px 0 0}
.pp-actions{margin-top:18px;gap:8px}
.pp-actions .pp-play{font-size:30px;min-height:50px}
.pp-actions button:not(.pp-play){font-size:22px}
.pp-board button:focus-visible{outline:3px solid #9adb75;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pp-board button:hover{transform:none}}
/* Condensed score content on unified cream surfaces. */
.pp-entries{background:#fff8db;gap:0;padding:4px 12px;border-radius:7px}
#leaderboardOverlay .pp-entry{grid-template-columns:28px minmax(0,1fr) 74px 80px;gap:9px;padding:12px 0;min-height:50px;clip-path:none;box-shadow:none;border:0;border-bottom:1px solid #bdcb9e}
#leaderboardOverlay .pp-entry:last-child{border-bottom:0}
#leaderboardOverlay .pp-player strong{font-size:23px}
#leaderboardOverlay .pp-rank{font-size:23px}
#leaderboardOverlay .pp-time{color:#426535!important;font-size:21px;text-align:right}
#leaderboardOverlay .pp-points strong{font-size:25px}
#leaderboardOverlay .pp-me{background:#d8edb8;box-shadow:inset 3px 0 #3d9d80;padding-left:5px}
.pp-pager button{width:auto;min-width:58px;border:0;background:none;font:23px ReferencePixel,monospace;padding:6px 10px}
#endGameSummaryOverlay .pp-result{gap:6px;padding:16px 12px;border-radius:7px;clip-path:none}
#endGameSummaryOverlay .pp-metrics{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:5px 14px;margin:8px 0 0;padding-top:10px;border-top:1px solid #bdcb9e}
#endGameSummaryOverlay .pp-metrics article{background:none;padding:0;border:0;border-radius:0;gap:5px}
#endGameSummaryOverlay .pp-metrics span{font-size:15px}
#endGameSummaryOverlay .pp-metrics strong{font-size:21px}
#endGameSummaryOverlay .pp-tag{display:block;margin-top:16px}
#leaderboardOverlay .pp-me{background:#fff8db;box-shadow:inset 0 0 0 2px #6a9560;border-radius:5px;padding-left:0}
#leaderboardOverlay .pp-me .pp-player strong{color:#245c37!important}

/* Shared light menu surface; preserve condensed score layout. */
#leaderboardOverlay .pp-board,#endGameSummaryOverlay .pp-board{background:#fff8db;border:4px solid #073720;border-radius:0;clip-path:none;box-shadow:4px 4px 0 #073720;color:#073720;scrollbar-color:#a6c27a #fff8db}
#leaderboardOverlay .pp-heading,#endGameSummaryOverlay .pp-heading{color:#073720!important}
.pp-board button,.pp-pager span,.pp-tag label,.pp-tag p,#endGameSummaryOverlay #endSummaryTagMsg{color:#073720!important}
.pp-board button:hover{color:#277241!important}
.pp-board button{border-radius:7px}
.pp-pager{border-top:1px solid #bdcb9e;padding-top:8px}
.pp-board .pp-tag button,.pp-actions .pp-play{background:#e6edce;border:1px solid #9ab47b;clip-path:none;border-radius:7px}

/* Build 36: quiet player marker and text-only run actions. */
#leaderboardOverlay .pp-me{background:transparent;box-shadow:none;border-radius:0;outline:none}
#leaderboardOverlay .pp-me .pp-player strong{color:#245c37!important}
#leaderboardOverlay .pp-me .pp-player strong::before{content:"";display:inline-block;width:5px;height:5px;background:#397a43;margin-right:6px;vertical-align:middle}
#endGameSummaryOverlay .pp-tag button,#endGameSummaryOverlay .pp-actions .pp-play{background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important}

@media(pointer:coarse),(max-width:600px){
 #leaderboardOverlay .pp-board{width:850px;max-width:calc(94 * var(--app-vw, 1vw));padding:26px}
 #leaderboardOverlay .pp-heading{font-size:48px!important}
 #leaderboardOverlay .pp-entry{grid-template-columns:40px minmax(0,1fr) 115px 125px;gap:14px;padding:18px 0;min-height:72px}
 #leaderboardOverlay .pp-player strong,#leaderboardOverlay .pp-rank{font-size:36px}
 #leaderboardOverlay .pp-time{font-size:32px}
 #leaderboardOverlay .pp-points strong{font-size:38px}
 #leaderboardOverlay .pp-pager button,#leaderboardOverlay .pp-pager span,#leaderboardOverlay .pp-back{font-size:36px;min-height:60px}
}

/* Build 45: readable mobile run summary; leaderboard unchanged. */
@media(pointer:coarse),(max-width:600px){
 #endGameSummaryOverlay .pp-board{width:850px;max-width:calc(94 * var(--app-vw, 1vw));max-height:calc(88 * var(--app-vh, 1vh));overflow-y:auto;padding:26px}
 #endGameSummaryOverlay .pp-heading{font-size:48px!important;line-height:1.15!important}
 #endGameSummaryOverlay .pp-result>span{font-size:32px}
 #endGameSummaryOverlay .pp-result>strong{font-size:96px}
 #endGameSummaryOverlay .pp-result>small{font-size:34px}
 #endGameSummaryOverlay .pp-metrics{gap:12px 24px}
 #endGameSummaryOverlay .pp-metrics span{font-size:28px}
 #endGameSummaryOverlay .pp-metrics strong{font-size:34px}
 #endGameSummaryOverlay .pp-tag label,#endGameSummaryOverlay #endSummaryTagMsg{font-size:32px!important;line-height:1.3!important}
 #endGameSummaryOverlay #endSummaryTagInput{font-size:38px!important;min-height:64px!important}
 #endGameSummaryOverlay .pp-board button{font-size:38px;min-height:64px}
 #endGameSummaryOverlay .pp-actions .pp-play{font-size:44px}
}

@font-face{font-family:ReferencePixel;src:url(../game-assets/fonts/jersey10.ttf)}

:root{--snake-face:url(../game-assets/sprites/snake-head.png)}

:root{--snake-block:url(../game-assets/sprites/snake-body.png)}

:root{--snake-tip:url(../game-assets/sprites/snake-tail.png)}

:root{--reference-title:url(../game-assets/sprites/reference-title.webp)}

:root{--reference-menu:url(../game-assets/sprites/reference-menu.webp)}

:root{--reference-upgrade-title:url(../game-assets/sprites/reference-upgrade-title.webp)}

:root{--reference-grass:url(../game-assets/sprites/reference-grass.webp)}

:root{--reference-ground:url(../game-assets/sprites/reference-ground.webp)}

:root{--menu-play:url(../game-assets/sprites/menu-play.png)}

:root{--menu-upgrades:url(../game-assets/sprites/menu-upgrades.png)}

:root{--menu-scores:url(../game-assets/sprites/menu-scores.png)}

:root{--menu-help:url(../game-assets/sprites/menu-help.png)}

/* Mobile how-to-play readability fix. Repeated ID selector used
   deliberately to force maximum specificity — an earlier, equal-specificity
   attempt at this exact rule was mysteriously losing the cascade. */
@media (pointer: coarse), (max-width: 600px) {
  #howToOverlay#howToOverlay#howToOverlay.frog-overlay .frog-panel { width: 880px !important; max-width: calc(94 * var(--app-vw, 1vw)) !important; }
  #howToOverlay#howToOverlay#howToOverlay.frog-overlay .frog-panel :is(p, li, li span, li strong) { font-size: 46px !important; line-height: 1.35 !important; }
  #howToOverlay#howToOverlay#howToOverlay.frog-overlay .frog-panel-title { font-size: 64px !important; line-height: 1.15 !important; margin-bottom: 6px !important; }
  #howToOverlay#howToOverlay#howToOverlay.frog-overlay .frog-panel-sub { font-size: 34px !important; line-height: 1.3 !important; opacity: .8; margin-bottom: 18px !important; }
  #howToOverlay#howToOverlay#howToOverlay.frog-overlay .frog-panel-section-label {
    font-size: 34px !important; line-height: 1.2 !important; margin: 24px 0 10px !important;
  }
}

/* Mobile upgrade-card icon spacing — icon-to-text gap was fixed (was 7px,
   too tight) but that left the icon's own left inset (14px) looking
   disproportionately small next to the new, larger right-side gap (36px).
   Balancing both sides to ~36px instead of just the one. */
@media (pointer: coarse), (max-width: 600px) {
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice { padding-left: 122px !important; }
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji { left: 36px !important; }
}

/* My Stats tag input exactly matching #endSummaryTagInput's final computed
   style (traced property-by-property from its own cascade, not guessed):
   no border at all, #fff8db background, 9px/12px padding, 44px min-height
   desktop / 64px mobile. A previous attempt here only matched font/color/
   radius and left padding + min-height on the original inline style, and
   incorrectly added a border the reference input doesn't have.
   That attempt also missed font-size: an older, un-migrated rule
   (#dashboardTagInput{font-size:20px}) kept setting it to 20px against
   the reference input's 24px, invisibly undoing the "exact match" this
   block was meant to guarantee — confirmed by reading both elements'
   actual computed styles side by side, not by re-reading the cascade. */
#dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardTagInput {
  font-family: ReferencePixel, Pocket, monospace !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #fff8db !important;
  color: #073720 !important;
  padding: 9px 12px !important;
  min-height: 44px !important;
}
#dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardTagInput::placeholder {
  font: inherit !important;
  color: #547047 !important;
  opacity: 1;
}
@media (pointer: coarse), (max-width: 600px) {
  #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardTagInput { min-height: 64px !important; }
}

/* Desktop/laptop upgrade panel readability — three earlier passes each
   shrank #upgradeOverlay .frog-panel further (320px, then 305px, then
   292px) without anyone increasing it back; the panel had drifted much
   smaller than every other overlay's panel (which range 400-880px). */
@media (pointer: fine) and (min-width: 601px) {
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-panel { width: 380px !important; }
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice { min-height: 90px !important; padding: 12px 14px 12px 74px !important; }
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji { width: 42px !important; height: 42px !important; left: 14px !important; }
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-title { font-size: 27px !important; }
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-desc, #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-desc * { font-size: 22px !important; }
}

/* Desktop main menu was a touch too small (original was 248px). */
@media (pointer: fine) and (min-width: 601px) {
  #mainMenuOverlay#mainMenuOverlay#mainMenuOverlay .pocket-menu { width: 300px !important; max-width: 300px !important; }
}

/* Rounded corners everywhere, consistently — user preference is the
   leaderboard's original rounded style, not the sharp corners other
   panels had drifted to. clip-path is reset to none where a notched/
   stepped shape from an earlier design pass would otherwise mask the
   border-radius entirely. */
#mainMenuOverlay#mainMenuOverlay#mainMenuOverlay .pocket-menu,
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-panel,
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice,
.frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay) .frog-panel,
#leaderboardOverlay#leaderboardOverlay#leaderboardOverlay .pp-board,
#endGameSummaryOverlay#endGameSummaryOverlay#endGameSummaryOverlay .pp-board {
  border-radius: 14px !important;
  clip-path: none !important;
}

/* How-to-play: no visible scrollbar (matches the game's blocky pixel-art
   look elsewhere; a native scrollbar reads as generic browser chrome).
   Closing is via the "Close" button in the footer only — a top-right X
   was tried and removed, it didn't fit the rest of the panel. */
#howToOverlay .frog-panel {
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#howToOverlay .frog-panel::-webkit-scrollbar { display: none; }

/* My Stats mobile spacing — the content is built with inline styles using
   tight 2-6px margins between blocks (tag, level, progress bar, orbs-to-
   next-level, run stats, tag input), which reads as cramped once scaled
   up for mobile. Give each block real breathing room. */
@media (pointer: coarse), (max-width: 600px) {
  #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardContent > div:first-child { padding-bottom: 26px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardContent > div:first-child > div { margin-bottom: 16px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardCurrentTag { margin-bottom: 12px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay .frog-panel-section-label { margin-top: 28px !important; margin-bottom: 14px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardContent > div:nth-child(2) { gap: 16px !important; }
}

/* Widen main menu panel on mobile — felt narrow/cramped. Using plain vw
   here (not the --app-vw custom property) since this is the real
   mobile-browser path, where vw already ties correctly to the virtual
   viewport the meta-viewport trick establishes.
   (A max-width:420px cap for My Stats used to live in this rule too;
   removed below — see the My Stats width fix for why.) */
@media (pointer: coarse), (max-width: 600px) {
  #mainMenuOverlay#mainMenuOverlay#mainMenuOverlay .pocket-menu { width: calc(92 * var(--app-vw, 1vw)) !important; max-width: 380px !important; }
}

/* Root cause of My Stats repeatedly coming back "too small and thin":
   an old unconditional rule (no media guard) targets every panel except
   main menu/upgrade — ".frog-overlay:not(#mainMenuOverlay):not(#upgradeOverlay)
   .frog-panel { width:440px!important; ... }" — and because it uses two
   :not(#id) clauses, it carries the specificity of *two* ID selectors,
   which beats ordinary single-#id mobile overrides regardless of source
   order. How to Play already escapes it with a triple-repeated-#id
   selector (see the "Mobile how-to-play readability fix" above, 880px).
   My Stats never got the same escape hatch, so on mobile it was silently
   stuck at 440px (or worse — an even-higher-specificity 420px cap, now
   removed) no matter how many times a normal-specificity fix was
   reapplied. Giving it the same triple-#id treatment as How to Play,
   matched to the same 880px width. */
@media (pointer: coarse), (max-width: 600px) {
  #dashboardOverlay#dashboardOverlay#dashboardOverlay.frog-overlay .frog-panel { width: 880px !important; max-width: calc(94 * var(--app-vw, 1vw)) !important; }
}

/* Upgrade selection panel's frame didn't match the rest of the game's
   menus. Every other panel (main menu, leaderboard, how-to-play, my
   stats) uses the shared ink-green #073720 border/shadow; the upgrade
   panel had drifted to a lighter, mismatched #72a949 border with a 3px
   shadow instead of the shared 4px. Aligning it here — this is the only
   place either property is set for this panel, confirmed against the
   live computed styles rather than guessed from the source history. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-panel {
  border-color: #073720 !important;
  box-shadow: 4px 4px 0 #073720 !important;
}

/* How to Play brought in line with the leaderboard/my stats family —
   confirmed via computed styles that its border/shadow/radius already
   matched, but its title rendered at the browser's plain 400 weight
   where the leaderboard's <h2> heading is bold by default, and it had a
   divider line under the title that no other panel in the family has.
   (The section labels also used to get a green pill/badge treatment on
   mobile only — removed below, along with promoting it to desktop; it
   didn't read as fitting the panel either way, so now both sizes use
   the same plain small-caps green text as My Stats' section labels.) */
#howToOverlay#howToOverlay#howToOverlay .frog-panel-title {
  font-weight: 700 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Upgrade panel background/title/card-border reverted back to the
   original dark-ink-panel look (baked banner title, borderless cream
   cards popping against the dark backdrop) per user request — the
   cream-background experiment above didn't stick. The border-color fix
   (ink instead of the old mismatched #72a949) and all sizing/spacing/
   icon-size changes made since are kept; only background/title/card-
   border are reverted, by simply not overriding them — the earlier,
   still-present rules (var(--ink) panel background, the baked
   reference-upgrade-title.webp title, borderless cards) take back over
   on their own. */

/* A little more breathing room around How to Play / My Stats content,
   per user request — a small bump over the existing padding, not a
   redesign. */
#howToOverlay#howToOverlay#howToOverlay .frog-panel,
#dashboardOverlay#dashboardOverlay#dashboardOverlay .frog-panel {
  padding: 22px 26px 20px !important;
}
@media (pointer: coarse), (max-width: 600px) {
  #howToOverlay#howToOverlay#howToOverlay .frog-panel,
  #dashboardOverlay#dashboardOverlay#dashboardOverlay .frog-panel {
    padding: 32px !important;
  }
}

/* Upgrade card icons bumped a smidge larger per user request, with the
   card's left padding nudged to match so the icon-to-text gap stays
   balanced (see "Mobile upgrade-card icon spacing" above). */
@media (pointer: coarse), (max-width: 600px) {
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji { width: 56px !important; height: 56px !important; }
  #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice { padding-left: 128px !important; }
}