@font-face {
  font-family: 'PixelFallback';
  src: local('Courier New');
}

:root{
  --bg-deep:#160f22;
  --maroon:#4a1836;
  --maroon-light:#8a2a5a;
  --pink:#e64a8a;
  --cream:#f2e9da;
  --tan:#c8a97e;
  --tan-dark:#a3835c;
  --navy:#1f4260;
  --navy-dark:#1c3350;
  --amber:#ffcf4d;
  --green:#5be07a;
  --red:#ff4d5e;
  --panel:#241531;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  min-height:100vh; min-height:100dvh;
  background: radial-gradient(ellipse at center, #2a1834 0%, var(--bg-deep) 70%);
  font-family:'Courier New', 'PixelFallback', monospace;
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-font-smoothing:none;
  touch-action:manipulation;
  position:relative;
}

/* Global backdrop: the two playable characters, faded toward the
   center so they frame the arcade cabinet without fighting it. */
#bgFade{
  position:fixed; inset:0;
  z-index:-2;
  background:radial-gradient(ellipse at center, #1a0e22 0%, var(--bg-deep) 70%);
}
.bgChar{
  position:fixed; top:0; bottom:0;
  width:56vw;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(7px) saturate(.95) brightness(.6) contrast(1.05);
}
/* radial fade from the outer screen edge: reads clearly right at the
   edge, then softens away in every direction (sideways AND vertically)
   so it blends into the page instead of looking like a hard cutout */
#bgCharLeft{
  left:-8vw;
  background-image:url('assets/char-cryptopunk.jpg');
  background-position:center;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 0% 48%, #000 0%, #000 28%, transparent 86%);
  mask-image: radial-gradient(ellipse 65% 70% at 0% 48%, #000 0%, #000 28%, transparent 86%);
}
#bgCharRight{
  right:-8vw;
  background-image:url('assets/char-undead.png');
  background-position:center;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 100% 48%, #000 0%, #000 28%, transparent 86%);
  mask-image: radial-gradient(ellipse 65% 70% at 100% 48%, #000 0%, #000 28%, transparent 86%);
}

#arcade{
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  padding:18px;
  background:linear-gradient(180deg,#382038,#221228);
  border-radius:22px;
  box-shadow:
    0 0 0 4px #060309,
    0 0 0 8px #2c1530,
    0 20px 60px rgba(0,0,0,.7),
    inset 0 0 40px rgba(0,0,0,.6);
  max-width:96vw;
  margin:12px 0;
}

/* Fullscreen mode (laptop + mobile, portrait or landscape): the cabinet
   becomes the whole screen. #crt's own width:min(...vw,...vh) rules keep
   scaling correctly since vw/vh simply refer to the now-fullscreen area. */
#arcade:fullscreen, #arcade:-webkit-full-screen, #arcade:-moz-full-screen,
#arcade.pseudo-fullscreen{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100vw; height:100vh; max-width:none;
  margin:0; border-radius:0; box-shadow:none;
  background:radial-gradient(ellipse at center, #1a0e22 0%, var(--bg-deep) 70%);
}
#arcade.pseudo-fullscreen{
  position:fixed; inset:0; z-index:30;
  height:100dvh;
}

#crt{
  position:relative;
  /* scales to fit both viewport width and height (canvas ratio 960:440 ≈ 2.18:1),
     so the cabinet automatically adapts from phones to laptops */
  width:min(960px, 92vw, 190vh);
  aspect-ratio:960/440;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9), 0 0 30px rgba(230,74,138,.15);
  border:3px solid #000;
}

/* True fullscreen: the 960px cap above is deliberate for the normal
   in-page layout (keeps the cabinet a sensible size next to the rest of
   the page), but inside the Fullscreen API it meant the cabinet stopped
   growing past 960 CSS px and sat as a modest box in the middle of an
   otherwise empty black screen on any laptop/monitor wider than ~1040px
   -- not a "real" fullscreen. Dropping the cap here lets it scale all
   the way up to fill the screen, still bounded by the aspect ratio via
   vh so it never overflows vertically either. */
#arcade:fullscreen #crt, #arcade:-webkit-full-screen #crt, #arcade.pseudo-fullscreen #crt{
  width:min(98vw, 220vh);
}

#game{
  display:block;
  width:100%;
  height:auto;
  /* Smooth scaling instead of forced nearest-neighbor pixelation: the
     canvas is drawn at a fixed internal resolution and then stretched by
     CSS to fill the cabinet, and "pixelated" was blockifying everything
     on that stretch -- including the BMX character art, which is what
     made it look muddy/over-pixelated instead of crisp. */
  image-rendering: auto;
  background: linear-gradient(180deg, #3a1c42 0%, #241230 55%, #1a0f26 100%);
}

/* Portrait phones: a 2.18:1 cabinet squeezed to 92vw is too short for
   readable menus, so give the cabinet a taller box and letterbox the
   (still full-width) game canvas inside it instead of shrinking text. */
@media (orientation:portrait) and (max-width:700px){
  #crt{
    width:94vw;
    aspect-ratio:auto;
    height:min(78vh, 640px);
  }
  /* #game keeps width:100%/height:auto (its own aspect ratio) and stays
     top-aligned in normal flow, so the HUD (pinned to #crt's top) lines
     up with it; any extra height in the taller cabinet box shows below
     the screen, like a control panel, instead of floating the HUD. */

  /* Game Over on mobile PORTRAIT: plenty of vertical room here (unlike
     landscape), so per feedback this goes back to a simple single
     column -- main content, then "Top Legends", then the donate box,
     each one centered -- rather than the cramped narrow side-by-side
     layout landscape needs. :not(.hidden) still matters here for the
     same reason noted below in the landscape rule (ID-selector
     specificity would otherwise beat .overlay.hidden's display:none). */
  #overScreen:not(.hidden){
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #overMain{
    display:flex; flex-direction:column; align-items:center;
    gap:8px;
  }
  #overScreen .leaderboard{
    width:min(280px, 84vw);
    margin-top:0;
  }
  #overScreen .leaderboard-details{ grid-template-columns:1fr; justify-items:center; }
  #overScreen .lbStat{ justify-content:center; width:100%; max-width:220px; }
}

/* Game Over on mobile LANDSCAPE: same side-by-side idea as the portrait
   rule above (main content + "Top Legends" to the right), but tuned for
   a SHORT, WIDE viewport instead of a narrow one -- this is also where
   the on-screen keyboard eats the most vertical space, so keeping
   everything compact and side-by-side (rather than one long column) is
   what keeps the pseudo field from ending up out of view in the first
   place. */
@media (max-height:500px) and (hover:none) and (pointer:coarse){
  body.mobile-landscape-ui #overScreen:not(.hidden){
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"main board" "donate board";
    align-items:center;
    justify-items:center;
    justify-content:center;
    gap:12px;
    padding-top:10px;
  }
  body.mobile-landscape-ui #overMain{
    grid-area:main;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    gap:4px;
  }
  body.mobile-landscape-ui #donateBox{ grid-area:donate; text-align:center; }
  body.mobile-landscape-ui #overScreen .leaderboard{
    grid-area:board;
    width:170px;
    margin-top:0;
    font-size:9px;
    padding:6px 6px;
    max-height:none;
    text-align:center;
  }
  body.mobile-landscape-ui #overScreen .leaderboard h3{ font-size:8px; letter-spacing:1px; margin-bottom:3px; }
  body.mobile-landscape-ui #overScreen .portrait.small{ width:44px; height:60px; }
  body.mobile-landscape-ui #overScreen h1{ font-size:13px; margin:0; }
  body.mobile-landscape-ui #overScreen #finalScoreLine{ font-size:11px; margin:0; }
  body.mobile-landscape-ui #overScreen .lbStat{ padding:2px 3px; gap:3px; justify-content:center; }
  body.mobile-landscape-ui #overScreen .lbStatIcon, body.mobile-landscape-ui #overScreen .lbStatVal{ font-size:9px; }
  body.mobile-landscape-ui #overScreen .leaderboard-details{ grid-template-columns:1fr; gap:3px; padding:4px; justify-items:center; }
  body.mobile-landscape-ui #overScreen #nameEntry label{ font-size:9px; }
  body.mobile-landscape-ui #overScreen #pseudo{ padding:5px; font-size:13px; }
  body.mobile-landscape-ui #overScreen .arcadeBtn{ padding:5px 12px; font-size:11px; }
  body.mobile-landscape-ui #overScreen #donateBox{ padding:5px 6px; }
  body.mobile-landscape-ui #overScreen .donateText{ font-size:8px; }
  body.mobile-landscape-ui #overScreen .legalNotice{ display:none; }
}

#scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode:multiply;
  z-index:5;
}
#vignette{
  position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 120px 40px rgba(0,0,0,.7);
  z-index:6;
}

#hud{
  position:absolute; top:8px; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 14px;
  z-index:11;
  font-size:14px;
  letter-spacing:2px;
  text-shadow: 0 0 6px currentColor;
}
#hud-score{ color:var(--amber); }
#hud-best{ color:var(--green); }
#hud span{ color:var(--cream); }
#hud-controls{ display:flex; align-items:center; gap:12px; }
#hud-controls button{
  background:none;border:none;color:var(--cream);font-size:16px;cursor:pointer;
  filter:drop-shadow(0 0 4px #000);
  line-height:1; padding:0;
}

/* Mobile controls no longer use any on-screen buttons: the whole right
   half of the cabinet is the control zone (see game.js) -- top two-
   thirds jumps, bottom third ducks. Explained visually on the How To
   Play screen instead. */

/* Menus (start / game over / pause / wallets) are fixed to the full
   viewport rather than boxed inside the CRT canvas area. This fixes two
   issues at once: (1) on short cabinets the top of the menu (title,
   character select…) could end up scrolled out of view because the
   overlay was squeezed into the ~2.18:1 game-canvas box — now it gets
   the full screen height to breathe; (2) the HUD's "BEST" score, which
   is layered above the canvas during gameplay, could visually sit on
   top of menu content (e.g. the character portrait) — now the menu's
   z-index is above the HUD, so it fully covers it instead of overlapping. */
.overlay{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px;
  background:rgba(6,3,10,.94);
  text-align:center;
  padding:
    max(28px, calc(env(safe-area-inset-top) + 16px))
    max(16px, env(safe-area-inset-right))
    max(28px, calc(env(safe-area-inset-bottom) + 16px))
    max(16px, env(safe-area-inset-left));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.overlay.hidden{ display:none; }
/* Purely a forced-reflow hook (see handleOrientationChange() in game.js)
   -- transform:translateZ(0) with no actual movement still makes the
   browser recompute layout for this element when the class is toggled,
   without any visible flicker. */
.overlay.reflow{ transform:translateZ(0); }

/* #overMain wraps most of the Game Over content (portrait/title/score/
   form/retry) so it can sit side-by-side with the leaderboard (and above
   the separate donateBox) on narrow or short mobile viewports (see the
   media queries below). On laptop/desktop, with no override in play, it
   still needs to behave like a centered flex column itself -- otherwise
   its children would fall back to plain block layout and lose the
   centering the rest of the overlay's children get automatically,
   leaving things looking left-leaning/unbalanced. */
#overMain{
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  width:100%;
}

.portrait{
  width:110px; image-rendering:auto;
  border-radius:50%;
  border:3px solid var(--pink);
  box-shadow:0 0 25px rgba(230,74,138,.5);
  object-fit:cover; object-position: 50% 15%;
  height:110px;
}
.portrait.small{ width:84px; height:84px; border-color:var(--red); box-shadow:0 0 25px rgba(255,77,94,.5); }
canvas.portrait{
  image-rendering:auto;
  background:radial-gradient(ellipse at center, #7a2a4a 0%, #3a0f2a 100%);
  object-fit:contain;
}
#overPortrait.portrait.small{
  border-radius:10px;
  width:44px; height:60px;
}

#charSelect{ margin:4px 0 2px; }
.charSelectLabel{
  margin:0 0 6px; font-size:11px; letter-spacing:2px; color:var(--amber);
}
.charOptions{ display:flex; gap:16px; justify-content:center; }
.orDivider{
  margin:8px 0 2px;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:#7a6a8a;
}
.charCard{
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--panel);
  border:2px solid var(--tan-dark);
  border-radius:8px;
  padding:10px 14px 8px;
  cursor:pointer;
  color:var(--cream);
  font-size:10px;
  letter-spacing:1px;
  transition:transform .05s, border-color .15s, box-shadow .15s;
}
.charCard:hover{ transform:translateY(-2px); }
.charCard.selected{
  border-color:var(--pink);
  box-shadow:0 0 16px rgba(230,74,138,.5);
}
.charCanvas{
  image-rendering:auto;
  background:radial-gradient(ellipse at center, #3a4a5a 0%, #1a2430 100%);
  border-radius:4px;
  width:78px; height:92px;
  object-fit:contain;
}

/* NFT head customization: an upload card sitting right under the two
   character thumbnails, deliberately playful/inviting (dashed border,
   friendly icon+copy) rather than looking like a technical settings
   panel -- per feedback this should read as an easy, fun option, not a
   chore. */
#nftCustomize{ margin:10px 0 2px; }
.nftUploadCard{
  display:flex; align-items:center; gap:10px;
  width:min(320px, 88vw);
  margin:0 auto;
  padding:9px 14px;
  background:var(--panel);
  border:2px dashed var(--tan-dark);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s, transform .05s, background .15s;
  text-align:left;
}
.nftUploadCard:hover{
  border-color:var(--pink);
  background:rgba(230,74,138,.08);
  transform:translateY(-1px);
}
.nftUploadCard.hidden{ display:none; }
.nftUploadIcon{ width:34px; height:34px; flex:0 0 auto; border-radius:6px; object-fit:cover; }
.nftUploadText{
  font-size:10.5px; line-height:1.5; color:var(--cream); letter-spacing:.3px;
}
.nftUploadText small{ color:#9a8ab0; font-size:9px; }
.nftUploadPreview{
  display:flex; align-items:center; gap:10px;
  width:min(320px, 88vw);
  margin:0 auto;
  padding:7px 10px;
  background:var(--panel);
  border:2px solid var(--pink);
  border-radius:8px;
}
.nftUploadPreview.hidden{ display:none; }
.nftPreviewCanvas{
  width:36px; height:36px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, #3a4a5a 0%, #1a2430 100%);
  border:1px solid var(--pink);
  flex:0 0 auto;
  display:block;
}
.nftPreviewLabel{ flex:1 1 auto; font-size:10px; color:var(--cream); text-align:left; }
.nftRemoveBtn{
  flex:0 0 auto;
  background:none; border:1px solid #8a5a6a; border-radius:50%;
  width:22px; height:22px; color:#e0a0b0; font-size:11px;
  cursor:pointer; line-height:1;
}
.nftRemoveBtn:hover{ background:rgba(255,77,94,.2); border-color:var(--red); color:var(--red); }

/* Crop/position tool overlay */
.nftModeRow{ display:flex; gap:8px; justify-content:center; margin:6px 0 2px; }
.nftModeBtn{
  font-family:inherit;
  background:var(--panel);
  border:2px solid var(--tan-dark);
  border-radius:6px;
  color:#c9b8d4;
  font-size:9px;
  letter-spacing:1px;
  padding:7px 10px;
  cursor:pointer;
}
.nftModeBtn.active{
  background:linear-gradient(180deg,var(--pink),#a02962);
  border-color:var(--pink);
  color:#fff;
}
.nftCropStage{
  position:relative;
  width:min(280px, 78vw); height:min(280px, 78vw);
  margin:14px auto;
  border-radius:12px;
  background:#0d0710;
  overflow:hidden;
  border:2px solid var(--tan-dark);
  touch-action:none;
  cursor:grab;
}
.nftCropStage:active{ cursor:grabbing; }
.nftCropStage.erasing{ cursor:crosshair; }
.nftCropStage.erasing:active{ cursor:crosshair; }
.nftCropSourceCanvas{
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  image-rendering:auto;
}
.nftCropGuide{
  position:absolute;
  top:50%; left:50%;
  /* Fixed circle size (not a percentage of the container) so it's
     mathematically guaranteed to always be a perfect circle -- same
     formula/scale as .nftCropStage's own sizing, just smaller, rather
     than deriving from the container's box (which is how the erase-mode
     guide ended up rendering as an oval instead of a circle: relying on
     the container always being perfectly square left it exposed to any
     layout quirk when the row of controls below switched between the
     position slider and the erase brush slider). */
  width:min(196px, 54.6vw);
  height:min(196px, 54.6vw);
  transform:translate(-50%,-50%);
  pointer-events:none;
  border-radius:50%;
  box-shadow:0 0 0 999px rgba(6,3,10,.72);
  outline:2px dashed var(--pink);
  outline-offset:-2px;
}
.nftEraseHint{
  font-size:9px; color:var(--pink); text-align:center;
  margin:0 0 6px;
}
.nftEraseHint.hidden{ display:none; }
.nftZoomRow.hidden{ display:none; }
.nftZoomRow{
  display:flex; align-items:center; gap:10px;
  width:min(280px, 78vw); margin:0 auto 10px;
}
.nftZoomIcon{ font-size:16px; color:var(--amber); flex:0 0 auto; }
.nftZoomRow input[type="range"]{ flex:1 1 auto; accent-color:var(--pink); }
.nftCropButtons{ display:flex; gap:10px; justify-content:center; margin-top:4px; }

#startScreen h1, #overScreen h1{
  margin:4px 0 0;
  font-size:32px;
  letter-spacing:4px;
  color:var(--cream);
  text-shadow: 3px 3px 0 var(--maroon-light), 0 0 20px var(--pink);
}
.subtitle{
  margin:0; color:var(--amber); letter-spacing:2px; font-size:12px;
}
.hint{ font-size:12px; color:#c9b8d4; line-height:1.6; margin:4px 0 8px; }
.hintCoinIcon{ display:inline-block; vertical-align:-3px; }
.hintCoinIcon svg{ display:block; }
.hint .btc{ color:#f7931a; }
.hint .eth{ color:#3ca7e0; }

.arcadeBtn{
  font-family:inherit;
  background:linear-gradient(180deg,var(--pink),#a02962);
  color:#fff;
  border:none;
  padding:10px 18px;
  font-size:14px;
  letter-spacing:2px;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 4px 0 #6d1c44, 0 0 20px rgba(230,74,138,.4);
  transition:transform .05s;
}
.arcadeBtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #6d1c44; }
.arcadeBtn.secondary{
  background:linear-gradient(180deg,var(--tan),var(--tan-dark));
  box-shadow:0 4px 0 #7a5f3f, 0 0 20px rgba(200,169,126,.3);
}
.mailBtn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
}
.arcadeBtn.undo{
  background:linear-gradient(180deg,#4a4a5a,#2a2a38);
  box-shadow:0 4px 0 #1a1a22, 0 0 12px rgba(100,100,120,.3);
  font-size:11px;
  padding:8px 12px;
}
.arcadeBtn.undo:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.linkBtn{
  font-family:inherit;
  background:none;
  border:none;
  color:var(--pink);
  font-size:12px;
  letter-spacing:1px;
  text-decoration:underline;
  text-decoration-style:dotted;
  cursor:pointer;
  padding:4px 8px;
  margin-top:2px;
}
.linkBtn:hover{ color:var(--cream); }

#nameEntry{ display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:4px; }
#nameEntry label{ font-size:11px; color:#c9b8d4; }
#pseudo{
  font-family:inherit;
  text-transform:uppercase;
  text-align:center;
  letter-spacing:2px;
  font-size:16px;
  width:210px;
  padding:8px;
  background:var(--navy-dark);
  border:2px solid var(--tan);
  color:var(--amber);
  border-radius:4px;
}

.walletLabel{
  font-size:10px; color:#8fd0f2; letter-spacing:.5px; line-height:1.4;
  max-width:320px; margin-top:6px;
}
.walletInput{
  font-family:inherit;
  text-align:center;
  letter-spacing:0.5px;
  font-size:11px;
  width:min(320px, 80vw);
  padding:8px 6px;
  background:var(--navy-dark);
  border:2px solid #3ca7e0;
  color:#8fd0f2;
  border-radius:4px;
}
.walletInput::placeholder{ color:#3a5a68; }
.walletHint{
  font-size:9px; color:#8a7a94; max-width:300px; line-height:1.5; margin:0 0 2px;
}
.walletDeepLinks{
  display:flex; flex-direction:column; align-items:center;
  gap:6px; margin-top:6px;
}
.walletDeepLinks.hidden{ display:none; }
.walletDeepLinkBtn{
  display:inline-block;
  width:min(220px, 80vw);
  padding:8px 10px;
  background:var(--navy-dark);
  border:2px solid #3ca7e0;
  border-radius:6px;
  color:#8fd0f2;
  font-size:11px;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  letter-spacing:.5px;
}
.walletDeepLinkBtn:active{ background:#3ca7e0; color:#0b1a24; }

/* "Three ways to play" panel -- shown on the game-over screen. Boxed and
   left-aligned (unlike the rest of the centered overlay) so the numbered
   explanations stay easy to read on both a laptop and a narrow phone
   screen; the whole overlay already scrolls (see .overlay), so this can
   take the room it needs without ever getting clipped. */
#waysToPlay{
  width:min(360px, 86vw);
  background:var(--panel);
  border:2px solid var(--maroon-light);
  border-radius:8px;
  padding:12px 14px;
  margin-top:6px;
  text-align:left;
}
.waysToPlayTitle{
  font-size:12px; letter-spacing:2px; color:var(--pink);
  text-align:center; margin:0 0 10px;
}
.wayCard{
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.wayCard:first-of-type{ border-top:none; }
.wayCard.highlight{
  background:rgba(230,74,138,.08);
  border-radius:6px;
  padding:8px;
  margin:2px 0;
  border-top:none;
}
.wayNum{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--maroon-light);
  color:#fff;
  font-size:11px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.wayCard.highlight .wayNum{ background:var(--pink); }
.wayText{
  font-size:11px; line-height:1.55; color:#d8cfe0;
}
.wayText b{ color:#fff2f8; }
.waysToPlayNote{
  font-size:10px; color:#c9a97d; text-align:center;
  margin:8px 0 0; letter-spacing:.5px;
}

/* Instructions screen -- shown after INSERT COIN, before play starts.
   Device-aware: .mobileOnly / .laptopOnly blocks are both in the DOM and
   toggled purely by CSS (no layout flash), matching the touch-capability
   detection JS already uses for the duck button. */
.mobileOnly, .laptopOnly{ display:none; }
body.show-mobile-controls .mobileOnly{ display:block; }
body:not(.show-mobile-controls) .laptopOnly{ display:block; }
@media (hover:none) and (pointer:coarse){
  .mobileOnly{ display:block; }
  .laptopOnly{ display:none; }
}

.controlsBlock{
  width:min(380px, 88vw);
  background:var(--panel);
  border:2px solid var(--maroon-light);
  border-radius:8px;
  padding:12px 16px;
  margin-top:10px;
  text-align:left;
}
.controlsDeviceLabel{
  font-size:12px; letter-spacing:1.5px; color:var(--pink);
  margin:0 0 8px;
}
.controlsDiagram{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  margin:0 auto 10px;
}
.controlRow{
  display:flex; align-items:center; gap:12px;
  padding:6px 0;
}
.controlIcon{
  flex:0 0 auto;
  width:auto;
  min-width:30px;
  font-size:18px;
  text-align:center;
  display:flex;
  align-items:center;
  gap:6px;
}
.controlIcon svg{ display:block; border-radius:50%; flex:0 0 auto; }
.controlText{ font-size:12px; line-height:1.5; color:#d8cfe0; }
.controlText b{ color:#fff2f8; }

/* Donations -- address is always visible now (no click-to-reveal toggle),
   with a dedicated copy button next to it. */
#donateBox{
  margin-top:10px;
  width:min(340px, 86vw);
  background:var(--panel);
  border:2px solid #7a5aa8;
  border-radius:8px;
  padding:10px 12px;
  text-align:center;
}
.shareXBtn{
  margin-top:8px;
  background:linear-gradient(180deg,#2a2a30,#0d0d10) !important;
  border:2px solid #fff !important;
}
.shareXBtn:active{ background:#1a1a1e !important; }
.donateText{ font-size:10px; color:#c9b8d4; line-height:1.5; margin:0 0 8px; }
.legalNotice{
  font-size:9px;
  color:var(--pink);
  line-height:1.5;
  max-width:420px;
  margin:14px auto 0;
  text-align:center;
  opacity:.9;
  letter-spacing:.2px;
}
.donateRow{ display:flex; gap:6px; align-items:stretch; }
.donateAddr{
  font-family:inherit;
  font-size:10px;
  color:#d9c9ff;
  background:var(--navy-dark);
  border:1.5px dashed #7a5aa8;
  border-radius:5px;
  padding:8px 6px;
  flex:1 1 auto;
  min-width:0;
  word-break:break-all;
  display:flex; align-items:center; justify-content:center;
}
.donateCopyBtn{
  font-family:inherit;
  font-size:15px;
  font-weight:bold;
  color:#fff;
  background:linear-gradient(180deg,#9a6fe0,#5a3a9a);
  border:none;
  border-radius:7px;
  padding:0 14px;
  cursor:pointer;
  flex:0 0 auto;
  white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 0 #3d2570, 0 0 14px rgba(154,111,224,.5);
  transition:transform .05s, box-shadow .1s;
}
.donateCopyBtn:hover{ background:linear-gradient(180deg,#ac86ea,#6a46b0); }
.donateCopyBtn:active{ transform:translateY(2px); box-shadow:0 1px 0 #3d2570; }
.donateCopyBtn.copied{ background:linear-gradient(180deg,#39ff6a,#1a9e42); box-shadow:0 3px 0 #0e6b2c, 0 0 14px rgba(57,255,106,.5); }
.donateCopyStatus{ font-size:10px; color:#39ff6a; min-height:14px; margin:6px 0 0; }

/* Wallet entry, now part of "ways to play" on the start screen (moved out
   of the Game Over form) -- same field styling, just nested here. */
#walletEntry{
  margin-top:10px;
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:6px;
}
#walletEntry .walletLabel, #walletEntry .walletHint{ text-align:center; }

.leaderboard{
  margin-top:10px;
  width:280px;
  font-size:12px;
  background:var(--panel);
  border:2px solid var(--maroon-light);
  border-radius:6px;
  padding:10px 14px;
  max-height:170px;
  overflow-y:auto;
}
/* Bigger on the start menu specifically: it's the main focal point there
   (no name-entry form competing for space like on the game-over screen),
   so it can afford to be the standout "Top Legends" showcase. */
#leaderboardStart{
  width:420px;
  max-width:92vw;
  font-size:16px;
  padding:18px 22px;
  min-height:300px;
  max-height:300px;
}
#leaderboardStart h3{ font-size:16px; margin-bottom:10px; letter-spacing:3px; }
#leaderboardStart .leaderboard-row{ padding:5px 0; font-size:15px; }
#leaderboardStart .leaderboard-row .rank{ width:24px; }
/* Game Over's leaderboard: bigger than the base .leaderboard default
   (which has no minimum height, so with few entries it could render
   tiny -- barely taller than its own header) -- fixed height sized to
   comfortably fit the header plus 5 rows without needing to scroll. */
#leaderboardOver{
  width:320px;
  max-width:92vw;
  font-size:13px;
  padding:12px 16px;
  min-height:210px;
  max-height:210px;
}
#leaderboardOver h3{ font-size:12px; margin-bottom:8px; }
#leaderboardOver .leaderboard-row{ padding:4px 0; font-size:13px; }
.leaderboard h3{
  margin:0 0 6px; font-size:11px; letter-spacing:2px; color:var(--pink);
}
.leaderboard-row{
  display:flex; justify-content:space-between;
  padding:2px 0; color:var(--cream);
}
.leaderboard-row.you{ color:var(--amber); }
.leaderboard-row .rank{ color:#8a7a94; width:18px; }
.leaderboard-row.clickable{ cursor:pointer; }
.leaderboard-row.clickable:hover .lbName{ text-decoration:underline; text-decoration-style:dotted; }
.lbName{ flex:1 1 auto; text-align:left; }
.lbHint{
  display:inline-block;
  font-size:9px;
  color:#8a7a94;
  opacity:.7;
  margin-left:2px;
}
.leaderboard-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
  padding:8px 10px;
  margin:2px 0 6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
}
.leaderboard-details.hidden{ display:none; }
.lbStat{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:5px 5px;
  border-radius:4px;
  background:rgba(0,0,0,.18);
}
.lbStat svg{ flex:0 0 auto; display:block; }
.lbPunkIcon{ border-radius:50%; }
.lbStatVal{
  flex:0 0 auto;
  font-size:14px; font-weight:bold;
  min-width:16px;
}
.lbStat-eth .lbStatVal{ color:#8fd0f2; }
.lbStat-btc .lbStatVal{ color:#f7931a; }
.lbStat-gu  .lbStatVal{ color:#e65a6e; }
.lbStat-punk .lbStatVal{ color:#ff8fd6; }

.glitch{ color:var(--red) !important; text-shadow: 2px 0 var(--pink), -2px 0 var(--navy) !important; }

.walletsList{
  margin-top:6px;
  width:min(420px, 90vw);
  max-height:44vh;
  overflow-y:auto;
  text-align:left;
  font-size:11px;
  background:var(--panel);
  border:2px solid #3ca7e0;
  border-radius:6px;
  padding:8px 12px;
}
.walletRow{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.walletRow:last-child{ border-bottom:none; }
.walletRow .w-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.walletRow .w-name{ color:var(--amber); letter-spacing:1px; }
.walletRow .w-addr{ color:#8fd0f2; font-size:9px; word-break:break-all; }
.walletRow .w-score{ color:var(--cream); white-space:nowrap; }
#walletsActions{ display:flex; gap:10px; margin-top:8px; }

#cabinetLabel{
  color:#c7c2cc; font-size:10px; letter-spacing:3px;
}
.cabinetEthIcon{ display:inline-flex; vertical-align:-1px; margin:0 1px; }

@media (max-width:640px){
  #arcade{ padding:8px; }
  .portrait{ width:80px; height:80px; }
  #startScreen h1, #overScreen h1{ font-size:22px; }
  .leaderboard{ width:230px; }
  #leaderboardStart{ width:min(360px, 90vw); font-size:14px; min-height:240px; max-height:240px; }
  .charCanvas{ width:62px; height:74px; }
  .charCard{ padding:6px 8px 5px; font-size:8px; }
  .bgChar{ width:38vw; }
  #hud{ font-size:11px; letter-spacing:1px; padding:0 8px; }
  #hud-controls{ gap:8px; }
  #hud-controls button{ font-size:14px; }
  #waysToPlay{ padding:10px 11px; }
  .wayText{ font-size:10px; }
  .donateAddr{ font-size:9px; }
}

/* short / landscape viewports (phones in landscape, small laptops):
   tighten vertical rhythm so the overlay never gets clipped */
@media (max-height:560px){
  #arcade{ gap:6px; padding:8px; margin:6px 0; }
  #cabinetLabel{ display:none; }
  .overlay{ gap:5px; padding:8px; }
  #startScreen h1, #overScreen h1{ font-size:18px; margin-top:0; }
  .subtitle{ font-size:10px; }
  .hint{ font-size:10px; margin:2px 0 4px; line-height:1.35; }
  .charSelectLabel{ margin-bottom:3px; }
  .charCanvas{ width:52px; height:62px; }
  .charCard{ padding:4px 6px 3px; font-size:7px; }
  .arcadeBtn{ padding:6px 14px; font-size:12px; }
  .leaderboard{ margin-top:4px; max-height:90px; width:200px; }
  #leaderboardStart{ min-height:190px; max-height:190px; width:min(300px, 88vw); font-size:13px; }
  .portrait{ width:56px; height:56px; }
  #hud{ font-size:11px; padding:0 8px; }
  #hud-controls{ gap:8px; }
  #hud-controls button{ font-size:14px; }
  #waysToPlay{ padding:8px 10px; margin-top:2px; }
  .waysToPlayTitle{ margin-bottom:6px; }
  .wayCard{ padding:4px 0; gap:8px; }
  .wayNum{ width:16px; height:16px; font-size:9px; }
  .wayText{ font-size:9px; line-height:1.4; }
  #donatePanel{ padding:8px 10px; }
}