html, body {
  margin: 0;
  height: 100%;
  background: #0b0d10;
  color: #e8e3d8;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none; /* the game owns touch - no pinch/scroll fighting it */
}

.hidden { display: none !important; }

/* The whole game is authored at a fixed 1280x720 reference size (every
   overlay below uses px/% sized against that). Rather than reflow all of
   it per breakpoint, #wrap keeps that reference size and js/game.js's
   fitStage() scales the whole thing to fit the real viewport - full-bleed
   on a phone instead of clipped, letterboxed on anything else. Mobile-only
   rules further down bump specific source sizes so touch targets and text
   stay legible/tappable even after that scale-down. */
#wrap {
  position: fixed;
  top: 50%; left: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
}

canvas#game {
  display: block;
  width: 1280px;
  height: 720px;
  background: #1a1410;
  border: 3px solid #3a2f22;
  border-radius: 6px;
  image-rendering: pixelated;
}

/* ============ rotate-to-landscape prompt (phones in portrait) ============ */
#rotate-prompt {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #0b0d10; color: #e8e3d8;
  text-align: center; padding: 24px; box-sizing: border-box;
}
.rotate-icon { font-size: 64px; animation: rotate-hint 1.8s ease-in-out infinite; }
#rotate-prompt p { margin: 0; font-size: 16px; line-height: 1.5; }
@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-prompt { display: flex; }
}

/* ============ touch play ============ */
/* No on-screen buttons: touch play is a single-finger gesture (drag to
   move, tap to smash/interact, swipe up to jump), wired up in
   js/input.js against #touch-controls' hidden state (toggled per screen
   by menu.js) rather than anything drawn here. The keyboard hint bar
   still hides on touch, since it no longer applies. */
#touch-controls { display: none; }
@media (pointer: coarse), (max-width: 820px), (max-height: 500px) {
  #controls { display: none; }
}

#hud {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 760px;
  height: 104px;
  box-sizing: border-box;
  background: url('../assets/ui/hud_panel.png') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 18px 8px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

.hud-divider {
  width: 2px;
  align-self: stretch;
  margin: 20px 4px 26px;
  background: rgba(74, 56, 32, 0.3);
}

#hud-hearts { display: flex; gap: 4px; }
#hud-hearts .heart { width: 32px; height: 32px; }

#hud-score, #hud-gold, #hud-haul, #hud-timer {
  display: flex;
  align-items: center;
  color: #3a2a15;
}

#hud-score, #hud-timer { flex-direction: column; gap: 1px; }
.hud-stat { display: flex; flex-direction: column; gap: 1px; }
.hud-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b5638;
}

#hud-gold, #hud-haul { flex-direction: row; gap: 8px; }
.hud-icon { width: 28px; height: 28px; }

#coins-val, #score-val, #gold-val, #timer-val {
  font-size: 19px;
  font-weight: bold;
  color: #5c3a1a;
}

#hud-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
#help-btn, #menu-exit-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  transition: transform .1s;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#help-btn { background-image: url('../assets/ui/help.png'); }
#menu-exit-btn { background-image: url('../assets/ui/stone/back.png'); }
#help-btn:hover, #menu-exit-btn:hover { transform: scale(1.08); }

#controls { display: none; }

#banner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 6, 0.78);
  border-radius: 6px;
  gap: 10px;
}

#banner.hidden { display: none; }

#banner-title {
  font-size: 42px;
  font-weight: bold;
}

#banner-sub {
  font-size: 18px;
  color: #cfc7b8;
}

#banner-btn {
  margin-top: 14px;
  padding: 10px 26px;
  font-size: 18px;
  background: #8a5a2b;
  color: #fff2d8;
  border: 2px solid #5c3a1a;
  border-radius: 6px;
  cursor: pointer;
}
#banner-btn:hover { background: #a06b34; }

#howto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.72);
  border-radius: 6px;
  z-index: 10;
}
#howto.hidden { display: none; }

#howto-card {
  width: 760px;
  max-width: 90%;
  aspect-ratio: 2048 / 1536;
  background: url('../assets/ui/panel.png') center / 100% 100% no-repeat;
  padding: 8% 11% 6%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}

#howto-card h1 {
  margin: 0 0 8px;
  font-size: 26px;
  color: #5c3a1a;
  text-align: center;
  text-shadow: none;
}

.howto-goal {
  margin: 0 0 14px;
  color: #4a3820;
  line-height: 1.4;
  font-size: 12.5px;
}

.howto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  margin-bottom: 10px;
}

.howto-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(74, 56, 32, 0.35);
  padding-bottom: 4px;
  font-size: 12.5px;
}

.howto-grid b { color: #3a2a15; white-space: nowrap; }
.howto-grid span { color: #6b5638; text-align: right; }

.howto-tip {
  font-size: 11px;
  color: #6b5638;
  font-style: italic;
  margin: 0 0 6px;
}

#howto-btn {
  margin: auto auto 0;
  width: 66px;
  height: 71px;
  padding: 0;
  border: none;
  background: url('../assets/ui/play.png') center / contain no-repeat;
  cursor: pointer;
  transition: transform .1s;
}
#howto-btn:hover { transform: scale(1.08); }

/* ============ main menu ============ */
#menu {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.72);
  border-radius: 6px;
}
#menu-card {
  width: 620px; max-width: 88%;
  aspect-ratio: 2048 / 1536;
  background: url('../assets/ui/panel.png') center / 100% 100% no-repeat;
  padding: 12% 14% 10%;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}
#menu-card h1 { margin: 0; font-size: 28px; color: #5c3a1a; text-align: center; }
#menu-buttons { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.menu-mode-btn {
  padding: 14px 10px;
  font-size: 17px; font-weight: bold;
  background: #8a5a2b; color: #fff2d8;
  border: 2px solid #5c3a1a; border-radius: 8px;
  cursor: pointer;
}
.menu-mode-btn:hover { background: #a06b34; }

/* ============ level select ============ */
#levelselect {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.72);
  border-radius: 6px;
}
#levelselect-card {
  width: 640px; max-width: 88%;
  background: url('../assets/ui/panel.png') center / 100% 100% no-repeat;
  padding: 60px 60px 50px;
  box-sizing: border-box;
  min-height: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}
#levelselect-card h1 { margin: 0; font-size: 26px; color: #5c3a1a; }
#levelselect-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.level-btn {
  width: 130px; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #d8c9a0; border: 2px solid #5c3a1a; border-radius: 8px;
  cursor: pointer;
}
.level-btn:hover { background: #e8dcb8; }
.level-num { font-size: 22px; font-weight: bold; color: #5c3a1a; }
.level-name { font-size: 11.5px; color: #6b5638; text-align: center; }
.back-btn {
  margin-top: auto;
  padding: 8px 22px; font-size: 14px;
  background: #6b5638; color: #fff2d8;
  border: 2px solid #3a2a15; border-radius: 6px;
  cursor: pointer;
}
.back-btn:hover { background: #7d6543; }

/* ============ cart builder (wood UI) ============ */
#cartbuilder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.72);
}
#cartbuilder-panel {
  position: relative;
  width: 820px; max-width: 92%;
  aspect-ratio: 2577 / 1695;
  background: url('../assets/ui/wood/panel_screen.png') center / 100% 100% no-repeat;
  padding: 5% 8%;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}
#cartbuilder-panel h1 { margin: 0 0 4px; font-size: 24px; color: #3a2a15; }
#cb-coins {
  position: absolute; top: 7%; right: 9%;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 8px;
  font-size: 20px; font-weight: bold; color: #3a2a15;
  background: #e8d4b0;
  border: 3px solid #5c3a1a;
  border-radius: 10px;
  z-index: 2;
}
#cb-coins img { width: 28px; height: 28px; }
.cb-coins-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
#cb-preview {
  position: relative;
  width: 240px; height: 165px;
  margin: 6px 0 10px;
}
#cb-preview img { position: absolute; }
#cb-body { top: 0; left: 0; width: 100%; height: 100%; }
/* Cargo is a pile sitting in the cart's open top, so it has to be anchored
   by its base (bottom), not its top - the four cargo art pieces are very
   different heights (coal is a flat spread, gold/diamond mound up more),
   and a fixed `top' put all of them a third of the way down the body
   instead of resting in the rim, tallest piles worst of all. Anchoring the
   bottom edge at the rim line lets each pile's own height decide how far
   it pokes up out of the cart, the way it actually would sitting there. */
#cb-cargo { bottom: 85%; left: 32%; width: 36%; }
#cb-buffer { bottom: -6%; left: 38%; width: 24%; }
#cb-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.cb-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.cb-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: #8a5a2b; color: #fff2d8; border: 2px solid #5c3a1a;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.cb-arrow:hover { background: #a06b34; }
.cb-label { width: 190px; text-align: center; font-size: 13.5px; color: #3a2a15; font-weight: bold; }
.cb-buy {
  padding: 5px 12px; font-size: 12.5px;
  background: #4a7a3a; color: #fff2d8; border: 2px solid #2c4a22; border-radius: 6px;
  cursor: pointer;
}
.cb-buy:hover { background: #5a8f47; }
.cb-buy:disabled { background: #6b6b6b; border-color: #444; cursor: not-allowed; opacity: .7; }
#cb-footer { display: flex; gap: 14px; margin-top: 14px; }
#cartbuilder-panel .back-btn {
  margin-top: 0;
  color: #3b2a1a;
  background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat;
  border: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
#cartbuilder-panel .back-btn:hover { background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat; filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
#cb-footer button:not(.back-btn) {
  padding: 10px 20px; font-size: 15px; font-weight: bold;
  background: #8a5a2b; color: #fff2d8; border: 2px solid #5c3a1a; border-radius: 8px;
  cursor: pointer;
}
#cb-footer button:not(.back-btn):hover { background: #a06b34; }
.cb-yard-hint {
  margin: 8px 0 0;
  font-size: 16px;
  color: #fff8ee;
  text-align: center;
  max-width: 520px;
  text-shadow: 0 1px 2px rgba(40, 18, 6, 0.9);
  font-weight: bold;
  line-height: 1.35;
}
#cb-footer #cb-test {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat;
  color: #3b2a1a;
  border: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
#cb-footer #cb-test:hover { background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat; filter: brightness(1.06) drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.cb-yard-icon { width: 22px; height: 22px; }

/* ============ rail yard: wood chrome over the canvas floor ============ */
/* Overlay is pointer-events:none so taps on the cave floor reach the
   canvas. HUD chrome turns events back on. */
#trackbuilder {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
#ry-toolbar, #ry-inventory, #ry-hint-bar, #ry-howto,
#ry-toolbar button, #ry-inventory button, #ry-howto button {
  pointer-events: auto;
}

body.railyard canvas#game { cursor: crosshair; }
body.railyard.ry-move-on canvas#game { cursor: grab; }
body.railyard.ry-dragging canvas#game { cursor: grabbing; }

.ry-wood-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: bold;
  color: #3b2a1a;
  background: transparent url('../assets/ui/wood/btn_short.png') center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.ry-wood-btn:hover:not(:disabled) { filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.ry-wood-btn:disabled {
  filter: grayscale(.55) brightness(.85);
  color: #5a4636;
  cursor: not-allowed;
  opacity: .7;
}

#ry-toolbar {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 310px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: #d4b08a url('../assets/ui/wood/inner_rect.png') center / 100% 100% no-repeat;
  border: 3px solid #5c3a1a;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 5;
}
#ry-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 0 auto;
}
.tb-title-icon { width: 26px; height: 26px; flex-shrink: 0; }
#ry-brand h1 {
  margin: 0;
  font-size: 20px;
  color: #3b2a1a;
  white-space: nowrap;
}
#ry-hint {
  display: none;
}
#ry-coins {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 16px;
  font-weight: bold;
  color: #3b2a1a;
  flex-shrink: 0;
}
#ry-coins img { width: 22px; height: 22px; }
#ry-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#ry-zoom-val {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #3b2a1a;
}
.ry-wood-btn.ry-mode-on {
  box-shadow: 0 0 0 2px #2c6a3a inset;
  filter: brightness(1.12) drop-shadow(0 2px 3px rgba(0,0,0,.3));
  color: #1e4a28;
}
#ry-hint-bar {
  display: block;
  position: absolute;
  top: 72px;
  left: 10px;
  right: 310px;
  margin: 0;
  padding: 10px 16px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.3;
  color: #fff8ee;
  text-shadow: 0 1px 2px rgba(20, 10, 4, 0.85);
  background: rgba(58, 32, 14, 0.88);
  border: 2px solid #3a2a15;
  border-radius: 8px;
  z-index: 5;
  box-sizing: border-box;
  pointer-events: none;
}
#tb-test {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: bold;
  color: #3b2a1a;
  background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
#tb-test:hover:not(:disabled) { filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
#tb-test:disabled {
  filter: grayscale(.55) brightness(.85);
  color: #5a4636;
  cursor: not-allowed;
  opacity: .7;
}

#ry-inventory {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: auto;
  width: 292px;
  /* Stop above the rails on the cave floor (~FLOOR_Y 548 of 720) so the
     build stays in view while this drawer is open. */
  height: 52%;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 10px;
  background: rgba(212, 176, 138, 0.7);
  border: 3px solid #5c3a1a;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 4;
}
#ry-inventory::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: url('../assets/ui/wood/inner_rect.png') center / 100% 100% no-repeat;
  opacity: 0.32;
  pointer-events: none;
  border-radius: 6px;
}
#ry-inventory > * { position: relative; z-index: 1; }
.ry-inv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px 6px;
  flex-shrink: 0;
}
.ry-inv-head img { width: 28px; height: 28px; object-fit: contain; }
.ry-inv-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #3b2a1a;
  flex: 1;
}
#ry-inv-close { display: none; padding: 4px 10px; font-size: 12px; }

.ry-tabs { display: flex; gap: 6px; margin: 0 4px 8px; justify-content: center; flex-shrink: 0; }
.ry-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: bold;
  color: #3b2a1a;
  background: transparent url('../assets/ui/wood/btn_short.png') center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  opacity: .72;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.ry-tab.active { opacity: 1; filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

.ry-inv-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 8px;
}
.ry-inv-scroll::-webkit-scrollbar { width: 10px; }
.ry-inv-scroll::-webkit-scrollbar-track { background: #c4a078; border-radius: 6px; }
.ry-inv-scroll::-webkit-scrollbar-thumb { background: #5c3a1a; border-radius: 6px; }
.ry-inv-panel { min-height: min-content; }
.ry-inv-heading {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #3b2a1a;
  margin: 8px 2px 4px;
}
.ry-inv-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ry-item {
  width: 62px; height: 52px; padding: 3px;
  background: #e8d4b0;
  border: 2px solid #5c3a1a;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ry-item:hover { background: #f3e4c4; }
.ry-item.armed { border-color: #8a4a12; box-shadow: 0 0 0 2px #c47820 inset; background: #f7e8c8; }
.ry-item.replace-armed { border-color: #2c6a3a; box-shadow: 0 0 0 2px #4a9a52 inset; background: #e4f0c8; }
.ry-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ry-inv-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 8px 4px 2px;
  border-top: 2px solid #5c3a1a;
  flex-shrink: 0;
}
.ry-count { color: #3b2a1a; font-size: 13px; font-weight: bold; margin-left: 2px; align-self: center; }

@media (max-width: 820px), (max-height: 500px) {
  #ry-toolbar {
    left: 8px;
    right: 8px;
    top: 6px;
    padding: 6px 8px;
  }
  #ry-brand { display: none; }
  #ry-hint { display: none; }
  .ry-wood-btn { padding: 6px 10px; font-size: 12px; }
  #tb-test { padding: 7px 14px; font-size: 13px; min-width: 118px; }
  #ry-howto-btn { min-width: 64px; }
  #ry-hint-bar {
    top: 108px;
    left: 8px;
    right: auto;
    max-width: 62%;
    font-size: 18px;
    padding: 10px 14px;
  }

  /* Side drawer under the toolbar, not a bottom sheet. Rails live on the
     cave floor at the bottom of the canvas, so a bottom sheet covered them. */
  #ry-inventory {
    top: 108px;
    left: auto;
    right: 8px;
    bottom: auto;
    width: 320px;
    max-width: calc(100% - 16px);
    height: 46%;
    max-height: 330px;
  }
  body.ry-palette-collapsed #ry-inventory { display: none; }
  #ry-inv-close { display: inline-block; }
  .ry-inv-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
  .ry-inv-row { max-width: 480px; }
  .ry-tabs, .ry-inv-tools { justify-content: flex-start; }
  .ry-inv-tools { padding: 4px 2px 0; gap: 4px; }
}

/* Purpose / how-to card before (and inside) Rail Yard */
#ry-howto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.72);
  border-radius: 6px;
  z-index: 12;
}
#ry-howto.hidden { display: none; }
#ry-howto-card {
  position: relative;
  width: 780px;
  max-width: 94%;
  aspect-ratio: 2577 / 1695;
  background: url('../assets/ui/wood/panel_screen.png') center / 100% 100% no-repeat;
  padding: 6.5% 8.5% 5.5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}
#ry-howto-card::before {
  content: "";
  position: absolute;
  inset: 11% 9%;
  background: rgba(42, 22, 8, 0.42);
  border-radius: 14px;
  pointer-events: none;
}
#ry-howto-card > * { position: relative; z-index: 1; }
#ry-howto-card h1 {
  margin: 0 0 10px;
  font-size: 34px;
  color: #fffdf6;
  text-align: center;
  text-shadow: 0 2px 3px rgba(20, 10, 4, 0.85);
}
.ry-howto-goal {
  margin: 0 0 14px;
  color: #fff8ee;
  line-height: 1.4;
  font-size: 18px;
  text-align: center;
  max-width: 560px;
  text-shadow: 0 1px 2px rgba(20, 10, 4, 0.9);
}
.ry-howto-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 12px;
}
.ry-howto-steps > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 244, 220, 0.35);
  padding-bottom: 8px;
  font-size: 17px;
}
.ry-howto-steps b { color: #fffdf6; white-space: nowrap; text-shadow: 0 1px 2px rgba(20, 10, 4, 0.9); }
.ry-howto-steps span { color: #fff4d8; text-align: right; text-shadow: 0 1px 2px rgba(20, 10, 4, 0.9); }
.ry-howto-tip {
  font-size: 16px;
  color: #fff8ee;
  font-style: italic;
  margin: 0 0 12px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(20, 10, 4, 0.9);
}
.ry-howto-actions {
  display: flex;
  gap: 14px;
  margin-top: auto;
  justify-content: center;
}
#ry-howto-enter {
  padding: 10px 22px;
  font-size: 15px;
  font-weight: bold;
  color: #3b2a1a;
  background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
#ry-howto-enter:hover { filter: brightness(1.06) drop-shadow(0 3px 4px rgba(0,0,0,.35)); }

/* ============ cart test track ============ */
#carttest-hud {
  position: absolute; top: 10px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  pointer-events: none;
}
#carttest-hud button { pointer-events: auto; }
#ct-info {
  padding: 10px 18px;
  font-size: 14px;
  color: #3b2a1a;
  font-weight: bold;
  background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat;
  border: none;
}
#carttest-hud .back-btn {
  margin-top: 0;
  color: #3b2a1a;
  background: transparent url('../assets/ui/wood/btn_long.png') center / 100% 100% no-repeat;
  border: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
/* ============ mobile: bigger text + touch targets ============ */
/* #wrap/canvas stay a fixed 1280x720 reference that js/game.js's fitStage()
   scales down to fit the real screen (see the base #wrap rule above), so a
   source size that's merely "the same" here would still shrink right along
   with everything else. These rules bump the source sizes on real small
   screens so the result reads bigger than plain proportional scaling would. */
@media (max-width: 820px) {
  #hud { width: 860px; height: 118px; padding: 0 22px 8px; }
  .hud-label { font-size: 13px; }
  #coins-val, #score-val, #gold-val, #timer-val { font-size: 23px; }
  #hud-hearts .heart, .hud-icon { width: 36px; height: 36px; }
  #help-btn, #menu-exit-btn { width: 52px; height: 52px; }

  #howto-card { width: 880px; }
  #howto-card h1 { font-size: 30px; }
  .howto-goal, .howto-grid > div { font-size: 15px; }
  .howto-tip { font-size: 13px; }
  #howto-btn { width: 82px; height: 88px; }

  #menu-card { width: 720px; }
  #menu-card h1 { font-size: 34px; }
  .menu-mode-btn { padding: 20px 12px; font-size: 22px; }

  #levelselect-card { width: 760px; }
  #levelselect-card h1 { font-size: 32px; }
  .level-btn { width: 160px; padding: 18px 10px; }
  .level-num { font-size: 28px; }
  .level-name { font-size: 14px; }
  .back-btn { padding: 12px 28px; font-size: 17px; }

  #cartbuilder-panel { width: 1080px; }
  #cartbuilder-panel h1 { font-size: 30px; }
  .cb-arrow { width: 40px; height: 40px; font-size: 16px; }
  .cb-label { font-size: 16px; width: 230px; }
  .cb-buy, #cb-footer button { padding: 12px 24px; font-size: 17px; }
  .cb-yard-hint { font-size: 19px; max-width: 640px; }

  .ry-wood-btn { padding: 10px 16px; font-size: 15px; }
  .ry-tab { padding: 10px 18px; font-size: 14px; }
  .ry-item { width: 68px; height: 58px; }
  #ry-howto-card { width: 1040px; }
  #ry-howto-card h1 { font-size: 38px; }
  .ry-howto-goal { font-size: 21px; }
  .ry-howto-steps > div { font-size: 20px; }
  .ry-howto-tip { font-size: 18px; }
  #ry-hint-bar { font-size: 20px; }
}