html, body { height: 100%; margin: 0; padding: 0; background: #111; overflow: hidden; touch-action: none; }
/* Tile page background on sides (outside centered game canvas) */
html, body { height: 100%; background: #000 url('background.jpg') repeat 50% 0; }
canvas { display: block; margin: 0 auto; image-rendering: pixelated; width: 100%; height: 100%;
  /* Soft outer glow/drop shadow to buffer against tiled background */
  box-shadow:
    0 0 18px rgba(0,0,0,0.55),
    0 0 56px rgba(0,0,0,0.35);
}
#gameCanvas:focus, canvas:focus { outline: none !important; }
canvas:focus-visible { outline: none !important; }
canvas { -webkit-tap-highlight-color: transparent; }
#hud { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #eee; font-weight: 700; text-shadow: 0 1px 0 #000, 0 2px 0 #000; display: flex; gap: 6px; pointer-events: none; padding: 0; box-sizing: border-box; width: 90%; letter-spacing: 0.02em; }
/* Health box - takes up ~55% width */
#hud .hud-box:first-child { 
  flex: 0 1 55%; 
  background: rgba(36,18,12,0.92); 
  border: 2px solid #8a3a1f; 
  padding: 4px 8px; 
  border-radius: 6px; 
  box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12; 
  font-size: 13px;
  text-align: left;
}

/* Kills and Distance boxes - share remaining width */
#hud .hud-box:not(:first-child) { 
  flex: 1 0 auto;
  min-width: 0;
  background: rgba(36,18,12,0.92); 
  border: 2px solid #8a3a1f; 
  padding: 4px 8px; 
  border-radius: 6px; 
  box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12; 
  font-size: 13px;
  text-align: left;
}
/* Two-line layout for HUD boxes */
.hud-box .label { display: block; font-size: 0.85em; opacity: 0.9; line-height: 1.1; white-space: nowrap; }
.hud-box .value { display: block; margin-top: 2px; line-height: 1.2; white-space: nowrap; }
/* Health bar styles */
.healthbar { width: 180px; height: 12px; background: #261512; border: 2px solid #8a3a1f; border-radius: 6px; overflow: hidden; display: inline-block; vertical-align: middle; box-shadow: inset 0 0 6px rgba(255,120,0,0.25); }
/* Segmented (10 parts) red fill with black dividers every ~10% */
.healthbar-fill { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(to right, #c62828 0 16px, #000 16px 18px); }
.healthbar.low  { border-color: #5b2a2a; }
.healthbar-mid  { border-color: #5b2a2a; }
/* Deprecated pause hint removed visually (kept here in case referenced) */
#pauseHint { display: none !important; }
.logo { position: relative; display: block; margin: 0 auto; padding: 4px 12px; max-width: calc(100% - 80px); box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre; color:#e55; line-height:1; text-align: center; font-size: clamp(9px, 2.6vw, 16px); font-weight: 900;
  /* Stronger readability: subtle outer stroke and inner glow */
  text-shadow:
    0 0 0.5px #000,
    0 1px 0 #000,
    0 0 10px rgba(255,120,0,0.20),
    0 0 3px rgba(255,110,0,0.35),
    0 0 16px rgba(255,90,0,0.15);
  z-index: 1;
}

/* Image-based logo sizing */
.logo .logo-img {
  display: block;
  width: clamp(280px, 50vw, 560px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Remove heat-haze to avoid stripe artifacts */
.logo::after { content:none; }
/* Disable logo-local glow; we'll glow the entire panel instead */
.logo::before { content:""; opacity: 0; }
/* Panel container */
#overlay .panel { position: relative; text-align: center; overflow: hidden; 
  /* Unify with weapon upgrade modal card look */
  background: rgba(36,18,12,0.92); 
  border: 2px solid #8a3a1f; 
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12, 0 16px 60px rgba(0,0,0,0.55);
  /* Keep existing pulse and layout */
  animation: panelPulse 4.8s ease-in-out infinite; padding: 20px 40px 28px; width: 100%; max-width: min(720px, 92vw); margin: 0 auto; box-sizing: border-box; 
  /* Visually centered: nudge a bit higher than exact center */
  transform: translateY(-4vh);
}
/* Subtle static vignette only (particle canvas draws the flames) */
#overlay .panel::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; top: 10px; z-index: 0; pointer-events: none; border-radius: 10px; opacity: 0.95;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.0) 45%),
    radial-gradient(120% 100% at 50% 110%, rgba(255,150,30,0.12), rgba(0,0,0,0) 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 60%;
  background-position: 50% 0%, 50% 100%;
}
/* subtle embers (reduced to avoid distraction) */
#overlay .panel::after { content:""; position:absolute; left: 10px; right:10px; bottom:10px; top:10px; z-index:0; pointer-events:none; border-radius:10px;
  background:
    radial-gradient(2px 2px at 25% 110%, rgba(255,200,120,0.65) 0 60%, rgba(255,200,120,0) 61%),
    radial-gradient(2px 2px at 80% 109%, rgba(255,180,100,0.55) 0 60%, rgba(255,180,100,0) 61%);
  animation: embersRise 7.5s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.6;
}
 #overlay .panel > * { position: relative; z-index: 1; }
 /* Let the flame canvas sit underneath content */
 #overlay .panel > canvas.flames { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); z-index: 0; border-radius: 10px; }
 /* Readability scrim: darker band under logo/subtitle */
 #overlay .panel .readability-scrim { position: absolute; left: 10px; right: 10px; top: 34%; bottom: 26%; z-index: 1; pointer-events: none; border-radius: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0)); }
/* Raise logo and text above scrim and boost subtitle shadow */
#overlay .panel .logo, #overlay .panel #startText, #overlay .panel #startBtn { position: relative; z-index: 2; }
#overlay .panel #startText { text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,0.55); font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: 0.02em; color: #eee; margin: 0 0 6px; transform: translateY(-6px); }
/* Nudge slogan higher on desktop only */
@media (min-width: 961px) {
  #overlay .panel #startText { transform: translateY(-18px); margin-bottom: 4px; }
  .button-row { margin-top: 6px; }
}

/* Larger slogan text */
#startText { font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: 0.02em; color: #eee; margin: 0 0 6px; }

/* Button row with spacing */
.button-row { display: flex; gap: 28px; justify-content: center; align-items: center; margin-top: 8px; }

/* Start (primary) and About (secondary) button styles aligned with upgrade buttons */
.start-btn, .about-btn { font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; cursor: pointer; border-radius: 8px; transition: all 0.2s; background: rgba(36,18,12,0.92); color: #eee; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12; }
.start-btn { padding: 12px 24px; border: 2px solid #e55; min-width: 164px; font-size: 16px; box-shadow: inset 0 0 10px rgba(255,160,0,0.45), 0 0 0 1px #4a2a1a, 0 6px 20px rgba(0,0,0,0.35); }
.start-btn:hover { border-color: #ff7a45; box-shadow: inset 0 0 14px rgba(255,170,0,0.55), 0 0 0 1px #5a2a1a, 0 8px 26px rgba(0,0,0,0.45); }
.about-btn { padding: 10px 18px; border: 2px solid #8a3a1f; min-width: 164px; font-size: 14px; opacity: 0.95; }
.about-btn:hover { border-color: #b54a2a; box-shadow: inset 0 0 10px rgba(255,160,0,0.40), 0 0 0 1px #4a2a1a; }

@media (max-width: 600px) {
  /* Keep side-by-side on mobile with equal widths */
  .button-row { flex-direction: row; gap: 10px; }
  .start-btn, .about-btn { flex: 1 1 0; min-width: 0; width: auto; max-width: 46vw; padding: 10px 12px; }
  /* Smaller slogan than logo on mobile */
}

/* About modal styles (reuse upgrade visual system) */
#aboutOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; color: #eee; font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; opacity: 0; transition: opacity 140ms ease; }
#aboutOverlay.show { opacity: 1; }
#aboutOverlay .panel { max-width: min(640px, 92vw); width: 100%; padding: 20px 22px; margin: 0; transform: translateY(-2vh); border-radius: 10px; background: rgba(36,18,12,0.92); border: 2px solid #8a3a1f; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12, 0 16px 60px rgba(0,0,0,0.55); opacity: 0; clip-path: inset(50% 0 50% 0); transition: clip-path 220ms ease, opacity 180ms ease; }
#aboutOverlay .panel.reveal { opacity: 1; clip-path: inset(0 0 0 0); }
#aboutOverlay .panel p { font-size: 14px; line-height: 1.3; margin: 6px 0 0; text-align: left; }
/* About modal content helpers (replacing inline styles) */
#aboutOverlay .panel .about-section { margin-bottom: 18px; }
#aboutOverlay .panel .about-paragraph { margin: 6px 0 0; }
#aboutOverlay .panel .mb-8 { margin-bottom: 8px !important; }
#aboutOverlay .panel .about-subhead { margin: 0 0 8px; font-weight: 700; color: #e55; }
#aboutOverlay .panel .about-bullet { margin: 0 0 3px; }
#aboutOverlay .panel .about-bullet.no-gap { margin-bottom: 0; }
#aboutOverlay .panel .about-subbullet { margin: 0 0 4px 16px; font-size: 13px; }
#aboutOverlay .panel .about-subbullet.about-subbullet-tight { margin-bottom: 3px; }
#aboutOverlay .panel .about-tips { font-size: 12px; opacity: 0.8; text-align: center; }
#aboutOverlay .panel .about-tip-link { color: #ff7a45; text-decoration: none; }
#aboutOverlay .panel .about-tip-link:hover { color: #ffa066; text-decoration: underline; }
#aboutOverlay .panel .about-close-row { text-align: center; margin-top: 14px; }
/* (removed animated CSS flames) */
@keyframes panelPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(120,40,20,0.28), inset 0 0 24px rgba(255,120,0,0.18); }
  50%      { box-shadow: inset 0 0 0 1px rgba(160,60,20,0.38), inset 0 0 28px rgba(255,140,0,0.28); }
}
/* placeholder removed */
@keyframes embersRise {
  0%   { background-position: 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%; opacity: 0.6; }
  50%  { background-position: 2% 50%, -1% 60%, 1% 45%, -2% 55%, 0% 52%; opacity: 0.8; }
  100% { background-position: 0% -10%, 0% -10%, 0% -10%, 0% -10%, 0% -10%; opacity: 0.6; }
}
/* Mobile layout adjustments */
@media (max-width: 768px) {
  #hud { width: 90%; padding: 0; gap: 4px; }
  #hud .hud-box:first-child { flex: 0 1 55%; }
  #hud .hud-box:not(:first-child) { flex: 1; }
  #overlay .panel { width: 100%; max-width: min(720px, 92vw); padding: 10px 14px 14px; box-sizing: border-box; }
  /* ~70% of desktop scale */
  .logo { max-width: calc(100% - 20px); font-size: clamp(6px, 1.9vw, 12px); font-weight: 850; text-shadow: 0 0 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6); }
}
@media (max-width: 480px) {
  #hud { width: 100vw; }
}
@media (max-width: 420px) {
  .logo { font-size: clamp(5px, 1.8vw, 10.5px); font-weight: 900; }
  #overlay .panel { padding: 8px 10px 12px; max-height: 80vh; width: 100%; max-width: 94vw; box-sizing: border-box; }
  /* Slightly darker scrim on very small screens */
  #overlay .panel .readability-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.70) 35%, rgba(0,0,0,0.70) 65%, rgba(0,0,0,0)); }
  /* Hide less-critical About sentence on very small screens */
  #aboutOverlay .panel .hide-sm { display: none !important; }
}
@media (max-width: 360px) {
  .logo { font-size: clamp(4px, 1.7vw, 9.5px); font-weight: 900; }
}
/* Safe-area padding so the title panel fits on notched phones */
#overlay { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
#overlay .panel { max-height: 86vh; overflow: hidden; }
.hud-box.right { margin-left: auto; }
#overlay { position: fixed; inset: 0; display: grid; place-items: center; 
  /* Tile the page background behind the modal instead of a dark overlay */
  background: #000 url('background.jpg') repeat 50% 0; 
  color: #eee; font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; box-sizing: border-box; }
#overlay.hidden { display: none; }
.hidden { display: none !important; }
@keyframes flameFlicker { from { opacity: 0.9; } to { opacity: 1; } }
/* Weapon Upgrade Modal Styles */
#upgradeOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; color: #eee; font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.upgrade-title { font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; color: #e55; text-align: center; margin-bottom: 16px; text-shadow: 0 0 0.5px #000, 0 1px 0 #000, 0 0 10px rgba(255,120,0,0.20); }
.upgrade-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 20px; }
.upgrade-btn { background: rgba(36,18,12,0.92); border: 2px solid #8a3a1f; border-radius: 8px; padding: 16px 20px; color: #eee; font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12; min-width: 140px; }
.upgrade-btn:hover { border-color: #b54a2a; box-shadow: inset 0 0 12px rgba(255,160,0,0.45), 0 0 0 1px #4a2a1a; }
.upgrade-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #5a2a2a; }
/* Center the modal panel and nudge upward; make it a proper card */
#upgradeOverlay .panel { max-width: min(560px, 92vw); width: 100%; padding: 20px 22px; margin: 0; transform: translateY(-4vh); border-radius: 10px;
  background: rgba(36,18,12,0.92); border: 2px solid #8a3a1f; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12, 0 16px 60px rgba(0,0,0,0.55); }
#upgradeOverlay .panel p { margin: 8px 0 0 0; }
/* Smooth dim + reveal animation */
#upgradeOverlay { opacity: 0; transition: opacity 140ms ease; }
#upgradeOverlay.show { opacity: 1; }
#upgradeOverlay .panel { opacity: 0; clip-path: inset(50% 0 50% 0); transition: clip-path 220ms ease, opacity 180ms ease; }
#upgradeOverlay .panel.reveal { opacity: 1; clip-path: inset(0 0 0 0); }
@media (max-width: 720px) {
  #upgradeOverlay { align-items: center; }
  #upgradeOverlay .panel { transform: none; margin: 4vh 3vw; }
}
.upgrade-btn:disabled:hover { border-color: #5a2a2a; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12; }
.upgrade-btn-title { font-size: 15px; margin-bottom: 4px; }
.upgrade-btn-desc { font-size: 11px; opacity: 0.8; font-weight: 400; }

/* Make upgrade prompt visible and centered */
#upgradeOverlay .panel p { 
  font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: #eee; 
  text-align: center; 
  margin: 6px 0 12px; 
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255,120,0,0.15);
}

/* Normalize overlay content (title/game over) to prior footprint */
#overlay .panel h1 { font-size: 28px; line-height: 1.1; margin: 8px 0 6px; }
#overlay .panel p { font-size: 14px; line-height: 1.2; margin: 6px 0; }
#overlay .panel button { font-size: 14px; padding: 10px 14px; }
@media (max-width: 720px) {
  .upgrade-title { font-size: 20px; }
  .upgrade-buttons { flex-direction: column; gap: 12px; align-items: center; }
  .upgrade-btn { min-width: 200px; }
}

/* Game Over modal refinements */
#overlay .panel.elevated { transform: translateY(-4vh); }
#overlay .panel.elevated h1 { margin: 10px 0 12px; }
#overlay .panel .go-stats { margin-top: 12px; }
#overlay .panel .go-stats p { font-weight: 400; font-size: 14px; line-height: 1.25; margin: 6px 0; }
#overlay .panel .go-stats .go-kills { opacity: 0.85; font-size: 13px; }

/* Two-column stats grid */
#overlay .panel .go-grid { display: inline-grid; grid-template-columns: auto auto; justify-content: center; align-items: start; column-gap: 48px; row-gap: 4px; margin: 10px auto 0; }
#overlay .panel .go-col { display: grid; grid-template-columns: 1fr; gap: 2px; text-align: center; }
#overlay .panel .go-label { font-size: 12px; opacity: 0.9; margin: 2px 0 0; }
#overlay .panel .go-value { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
/* Green highlight for "This Run" lines */
#overlay .panel .go-this { color: #7fc06a; text-shadow: 0 0 0.5px #000, 0 0 8px rgba(90,190,90,0.15); }

/* Desktop-only enhancements for Game Over stats */
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  /* Slightly larger title and more legible stats on desktop */
  #overlay .panel.elevated h1 { font-size: 32px; }
  #overlay .panel .go-grid { column-gap: 60px; row-gap: 6px; }
  #overlay .panel .go-label { font-size: 13.5px; letter-spacing: 0.01em; }
  #overlay .panel .go-value { font-size: 20px; font-weight: 700; }
  /* Nudge green highlight a touch larger for emphasis */
  #overlay .panel .go-this { text-shadow: 0 0 0.5px #000, 0 0 10px rgba(90,190,90,0.20); }
}

/* Return to title link (Game Over + Pause) */
#overlay .panel .go-return,
#pauseOverlay .panel .go-return { text-align: center; margin-top: 10px; font-size: 11px; opacity: 0.5; }
#overlay .panel .go-return a,
#pauseOverlay .panel .go-return a { color: #b6b6b6; text-decoration: none; }
#overlay .panel .go-return a:hover,
#pauseOverlay .panel .go-return a:hover { color: #fff; opacity: 1; }

/* Copy confirmation pill */
.copy-pill { position: fixed; left: 50%; top: 18px; transform: translateX(-50%) translateY(-12px); background: rgba(36,18,12,0.96); color: #eee; border: 2px solid #8a3a1f; border-radius: 999px; padding: 8px 14px; font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 13px; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12, 0 10px 30px rgba(0,0,0,0.45); opacity: 0; transition: opacity 160ms ease, transform 180ms ease; z-index: 2000; }
.copy-pill.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 720px) {
  #overlay .panel.elevated { transform: none; margin: 4vh 3vw; }
  #overlay .panel .go-grid { grid-template-columns: auto auto; column-gap: 36px; row-gap: 4px; }
}
/* Pause Modal */
#pauseOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; color: #eee; font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; opacity: 0; transition: opacity 140ms ease; }
#pauseOverlay.show { opacity: 1; }
#pauseOverlay .panel { max-width: min(420px, 90vw); width: 100%; padding: 18px 20px; margin: 0; transform: translateY(-4vh); border-radius: 10px; background: rgba(36,18,12,0.92); border: 2px solid #8a3a1f; box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12, 0 16px 60px rgba(0,0,0,0.55); opacity: 0; clip-path: inset(50% 0 50% 0); transition: clip-path 220ms ease, opacity 180ms ease; }
#pauseOverlay .panel.reveal { opacity: 1; clip-path: inset(0 0 0 0); }
#pauseOverlay .pause-stats { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
#pauseOverlay .pause-stats .row { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: baseline; padding: 6px 10px; background: rgba(28,14,10,0.6); border: 1px solid rgba(120,60,30,0.35); border-radius: 6px; }
#pauseOverlay .pause-stats .label { font-size: 14px; font-weight: 700; opacity: 0.95; }
#pauseOverlay .pause-stats .value { font-size: 17px; font-weight: 700; }
/* Inline best hint next to Distance label */
#pauseOverlay .pause-stats .row .label { white-space: nowrap; }
#pauseOverlay .pause-stats .row .label .muted { color: #b6b6b6; opacity: 0.75; font-weight: 600; margin-left: 6px; white-space: nowrap; }
@media (max-width: 720px) {
  #pauseOverlay .panel { transform: none; margin: 4vh 3vw; }
}

/* Pause button: square button with pause icon and small label */
.pause-btn {
  position: fixed; /* exact position set via JS to align with canvas corner */
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(36,18,12,0.92);
  color: #eee;
  border: 2px solid #8a3a1f;
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(255,140,0,0.35), 0 0 0 1px #3a1a12, 0 10px 30px rgba(0,0,0,0.45);
  z-index: 900; /* below overlays (1000) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.8; /* 20% transparent by default */
}
.pause-btn:hover, .pause-btn:focus-visible, .pause-btn:active { opacity: 1; }
.pause-btn:hover { border-color: #b54a2a; box-shadow: inset 0 0 12px rgba(255,160,0,0.45), 0 0 0 1px #4a2a1a, 0 12px 36px rgba(0,0,0,0.5); }
.pause-btn:active { transform: translateY(1px); }
.pause-btn .pause-icon {
  position: relative;
  width: 18px; height: 18px;
}
.pause-btn .pause-icon::before,
.pause-btn .pause-icon::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  background: #eee;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
}
.pause-btn .pause-icon::before { left: 0; }
.pause-btn .pause-icon::after { right: 0; }
.pause-btn .pause-letter {
  font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px; /* bigger P on desktop */
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
}
.pause-btn .pause-label {
  font-family: 'Changa', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 7px; /* smaller word; roughly as wide as P */
  font-weight: 800;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
/* Desktop default: show P, hide icon */
@media (hover: hover) and (pointer: fine) {
  .pause-btn { gap: 0; justify-content: center; padding-top: 0; }
  .pause-btn .pause-icon { display: none; }
  .pause-btn .pause-letter { display: block; font-size: 32px; line-height: 0.9; margin-top: 4px; }
  .pause-btn .pause-label { margin-top: -3px; }
}
/* Mobile: show icon, hide P; make bars thicker and closer */
@media (hover: none), (pointer: coarse) {
  .pause-btn { width: 38px; height: 38px; border-radius: 12px; opacity: 0.3; gap: 0; }
  .pause-btn .pause-letter { display: none; }
  .pause-btn .pause-icon { display: block; width: 15px; height: 17px; margin-top: 2px; }
  .pause-btn .pause-icon::before,
  .pause-btn .pause-icon::after { width: 6px; top: 1px; bottom: 1px; }
  .pause-btn .pause-label { margin-top: -1px; }
}