/* pixel-menu.css (web.34): the menus drawn in the park's own pixel style.
   See MENU-RESTYLE.md. One shared set of pieces, opted into per menu by putting
   the class "hpt-px" on the menu's overlay (web.34: the Build menu). Zones,
   Manage, Shopping, Pricing and Bank follow by adding the same class and, where
   their markup differs, a few rules in the "per menu" section at the bottom.

   Pieces: frame (the green painted board), paper (cream board inside it), card
   (a pinned paper card), tab, button, chip (stamped effect), tag (price),
   patch (grass square a sprite stands on), scrollbar. Square stepped edges from
   box-shadows, never border-radius; lit top-left, shaded bottom-right like the
   sprites. Panels about 86% see-through (rgba backgrounds, so text stays solid);
   cards stay solid for reading. Barnaby is never touched. */

.hpt-px{
  --px-frame: rgba(50, 78, 47, 0.86);   /* #324e2f */
  --px-hi: #56713a;
  --px-shade: #23412f;
  --px-outline: #17332c;
  --px-btn: #41592e;
  --px-paper: rgba(252, 243, 226, 0.90);/* #fcf3e2 */
  --px-paper-line: #eedecd;
  --px-card: #f8e8d5;
  --px-card-hi: #fffaf0;
  --px-card-edge: #bc9d79;
  --px-card-drop: #d2c6b9;
  --px-ink: #462c1e;
  --px-ink-soft: #603a1f;
  --px-ink-faint: #7a6d64;
  --px-good: #324e2f;
  --px-good-edge: #56713a;
  --px-bad: #93470d;
  --px-bad-edge: #c36714;
  --px-red: #ae3f38;
  --px-red-hi: #eb6500;
  --px-red-lo: #703d1f;
  --px-font: "Pixelify Sans", "Fredoka", monospace;
  --px-label: "Silkscreen", "Pixelify Sans", monospace;
}
/* stepped outline helper: a 2px or 4px square edge all round */
.hpt-px .px-edge2{ box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }

/* ---------------------------------------------------------------- frame */
.hpt-px .card{
  background: var(--px-frame);
  border: 0;
  border-radius: 0;
  color: #fffaf0;
  font-family: var(--px-font);
  box-shadow:
    inset 4px 4px 0 var(--px-hi), inset -4px -4px 0 var(--px-shade),
    4px 0 0 0 var(--px-outline), -4px 0 0 0 var(--px-outline), 0 4px 0 0 var(--px-outline), 0 -4px 0 0 var(--px-outline),
    8px 12px 0 0 rgba(23, 18, 19, 0.30);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hpt-px .card::before{ display: none; }          /* the phone "grab handle" pill */
.hpt-px .modal-title{
  font-family: var(--px-font);
  font-size: 30px; font-weight: 700; line-height: 1;
  color: #fffaf0;
  text-shadow: 3px 3px 0 var(--px-outline);
}
.hpt-px .modal-muted{
  font-family: var(--px-label);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: #f8e8d5; opacity: 1; margin-top: 4px;
}

/* ---------------------------------------------------------------- buttons */
.hpt-px .modal-min,
.hpt-px .modal-close,
.hpt-px .px-btn{
  min-width: 40px; min-height: 40px;
  padding: 6px 10px 8px;
  border: 0; border-radius: 0;
  font-family: var(--px-label); font-size: 16px; line-height: 1;
  color: #fffaf0;
  background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-shade),
    2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
  cursor: pointer;
}
.hpt-px .modal-close{ background: var(--px-red); box-shadow: inset 0 2px 0 var(--px-red-hi), inset 0 -4px 0 var(--px-red-lo),
    2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
.hpt-px .modal-min:hover, .hpt-px .px-btn:hover{ filter: brightness(1.12); background: var(--px-btn); }
.hpt-px .modal-close:hover{ filter: brightness(1.12); }
.hpt-px .modal-min:active, .hpt-px .modal-close:active, .hpt-px .px-btn:active{ transform: translateY(2px); }
.hpt-px button:focus-visible{ outline: 2px solid #ffd36b; outline-offset: 3px; }

/* ---------------------------------------------------------------- tabs (sit on the paper) */
.hpt-px .side-tabs{ gap: 4px; padding: 0 4px; margin-bottom: -2px; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 1; }
.hpt-px .side-tab{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 7px 7px;
  border: 0; border-radius: 0;
  font-family: var(--px-font); font-size: 14px; font-weight: 500;
  color: #f8e8d5;
  background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hpt-px .side-tab:hover{ filter: brightness(1.1); }
.hpt-px .side-tab.active{
  padding: 8px 9px 10px;
  color: #23412f; font-weight: 700;
  background: #fcf3e2;
  box-shadow: inset 0 2px 0 #fffaf0, 2px 0 0 0 var(--px-shade), -2px 0 0 0 var(--px-shade), 0 -2px 0 0 var(--px-shade);
}
.hpt-px .px-ico{ display: inline-block; width: 14px; height: 14px; background-size: 14px 14px; background: no-repeat center bottom; image-rendering: pixelated; flex: 0 0 auto; }

/* ---------------------------------------------------------------- paper */
.hpt-px .px-paper{
  background: var(--px-paper);
  box-shadow: inset 0 0 0 2px var(--px-shade), inset 4px 4px 0 2px var(--px-paper-line);
  color: var(--px-ink);
}

/* ---------------------------------------------------------------- cards */
.hpt-px .px-card{
  position: relative;
  display: flex; gap: 12px; align-items: center;
  text-align: left;
  border: 0; border-radius: 0;
  padding: 10px 12px 10px 10px;
  background: var(--px-card);
  color: var(--px-ink);
  font-family: var(--px-font);
  box-shadow: 2px 0 0 0 var(--px-card-edge), -2px 0 0 0 var(--px-card-edge), 0 2px 0 0 var(--px-card-edge), 0 -2px 0 0 var(--px-card-edge), 4px 4px 0 0 var(--px-card-drop);
  transition: none;
}
.hpt-px .px-card::before{                       /* the drawing pin */
  content: ""; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px;
  background: var(--px-red); box-shadow: inset 2px 2px 0 #f07a22, 0 2px 0 0 var(--px-red-lo);
}
.hpt-px .px-card:hover{ background: var(--px-card-hi); transform: translateY(-1px); }
.hpt-px .px-card.active{
  background: var(--px-card-hi);
  box-shadow: 4px 0 0 0 var(--px-btn), -4px 0 0 0 var(--px-btn), 0 4px 0 0 var(--px-btn), 0 -4px 0 0 var(--px-btn), 6px 6px 0 0 var(--px-card-drop);
}
.hpt-px .px-card.active::after{
  content: "PLACING"; position: absolute; right: -8px; top: -12px;
  font-family: var(--px-label); font-size: 10px; font-weight: 700; color: #fffaf0;
  background: var(--px-btn); padding: 3px 6px 4px;
  box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hpt-px .px-card.disabled, .hpt-px .px-card:disabled{
  filter: none; opacity: 1;
  background: #e9dccb; color: var(--px-ink-faint);
  box-shadow: 2px 0 0 0 #cbb79c, -2px 0 0 0 #cbb79c, 0 2px 0 0 #cbb79c, 0 -2px 0 0 #cbb79c;
}
.hpt-px .px-card.disabled::before, .hpt-px .px-card:disabled::before{ background: #8d8278; box-shadow: inset 2px 2px 0 #b3a89d; }
.hpt-px .px-card.disabled .px-patch img{ filter: grayscale(0.85) brightness(0.9); }
.hpt-px .px-card-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

/* grass patch a sprite stands on */
.hpt-px .px-patch{
  width: 124px; height: 92px; flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: #6f9a3e;
  box-shadow: inset 0 0 0 2px #41592e, inset 0 -8px 0 2px #5c8a37;
}
.hpt-px .px-patch img{ display: block; image-rendering: pixelated; margin-bottom: 6px; max-width: none; }
/* paths and roads: a strip of the real surface, cropped to the patch (never scaled) */
/* web.36: big buildings (arcade, bistro, statics, gates...) show whole, full width above the text */
.hpt-px .px-card.px-card-wide{ flex-direction: column; align-items: stretch; }
.hpt-px .px-card.px-card-wide .px-patch{ width: auto; max-width: none; }
#build-panel.hpt-px .px-card.px-card-wide .px-patch{ width: auto; }
.hpt-px .px-patch img.px-surf{ align-self: center; width: calc(100% - 4px); height: calc(100% - 4px); margin: 2px; object-fit: none; object-position: center; }

/* price tag */
.hpt-px .px-tag{
  flex: 0 0 auto;
  font-family: var(--px-label); font-size: 13px; font-weight: 700; color: #fffaf0;
  background: var(--px-btn); padding: 3px 7px 4px;
  box-shadow: inset 0 2px 0 var(--px-hi), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
/* stamped chips (good green / bad orange ink) */
.hpt-px .px-chip{
  display: inline-flex; align-items: center;
  font-family: var(--px-label); font-size: 10px; line-height: 1.1; text-transform: uppercase;
  color: var(--px-good); padding: 3px 5px; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 0 0 2px var(--px-good-edge);
}
.hpt-px .px-chip.bad{ color: var(--px-bad); box-shadow: inset 0 0 0 2px var(--px-bad-edge); }
.hpt-px .px-chip.flat{ color: #5d5e64; box-shadow: inset 0 0 0 2px #a09892; }

/* pixel scrollbar */
.hpt-px .px-scroll{ scrollbar-width: thin; scrollbar-color: var(--px-btn) var(--px-paper-line); }
.hpt-px .px-scroll::-webkit-scrollbar{ width: 12px; }
.hpt-px .px-scroll::-webkit-scrollbar-track{ background: var(--px-paper-line); box-shadow: inset 0 0 0 2px var(--px-card-edge); }
.hpt-px .px-scroll::-webkit-scrollbar-thumb{ background: var(--px-btn); box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-shade); }

/* ================================================================ per menu */
/* ---- Build (web.34) */
#build-panel.hpt-px .build-modal{ padding: 16px 16px 14px; width: min(480px, 92vw); }
#build-panel.hpt-px .modal-header{ margin-bottom: 10px; padding: 2px 2px 0; align-items: flex-start; }
#build-panel.hpt-px .build-scroll{ padding: 0; overflow: visible; max-height: none; }
#build-panel.hpt-px .side-content{
  padding: 18px 10px 14px 16px;
  max-height: calc(100vh - 340px); overflow-y: auto; overflow-x: hidden;
}
#build-panel.hpt-px .build-grid{ grid-template-columns: 1fr; gap: 16px; }
#build-panel.hpt-px .build-card-top{ gap: 8px; }
#build-panel.hpt-px .build-card-name{ color: var(--px-ink); font-size: 18px; font-weight: 700; line-height: 1.05; }
#build-panel.hpt-px .build-card-cost{ color: #fffaf0; }
#build-panel.hpt-px .build-card-meta{ margin-top: 0; font-family: var(--px-label); font-size: 10px; color: var(--px-ink-faint); line-height: 1.3; }
#build-panel.hpt-px .build-card-stats{ margin-top: 0; gap: 5px; }
#build-panel.hpt-px .build-card-desc{ margin-top: 0; font-size: 13px; line-height: 1.3; color: var(--px-ink-soft); }
#build-panel.hpt-px .build-card-lock{ margin-top: 0; font-family: var(--px-label); font-size: 10px; color: var(--px-bad); }
#build-panel.hpt-px .build-card.disabled::after, #build-panel.hpt-px .build-card:disabled::after{ display: none; }
#build-panel.hpt-px .build-card-thumb{ display: none; }   /* the entrance's old corner thumbnail: the patch shows the gate now */
#build-panel.hpt-px .build-pin{
  justify-self: start; margin: -8px 0 4px 8px !important; padding: 4px 8px 5px !important;
  font-family: var(--px-label) !important; font-size: 10px !important; color: #fffaf0 !important;
  background: var(--px-bad) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
#build-panel.hpt-px .build-hint{ margin: 10px 4px 0; font-family: var(--px-label); font-size: 10px; letter-spacing: .5px; color: #f8e8d5; }
@media (max-width: 899px){
  #build-panel.hpt-px .card{ border-radius: 0; box-shadow: inset 0 4px 0 var(--px-hi), 0 -4px 0 0 var(--px-outline); }
  #build-panel.hpt-px .side-content{ max-height: calc(58vh - 150px); }
  #build-panel.hpt-px .px-patch{ width: 92px; height: 76px; }
}

/* ---- Zones (web.34): the painted campsite sign. A slate roof over a green board on
   two timber posts; zone tiles show their ground and the matching sprite; locked
   zones go dark with a yellow padlock tag naming what opens them; the pitch tools
   sit on a plank along the bottom. */
#zones-panel.hpt-px .zones-modal{
  position: relative; width: min(640px, 94vw); max-height: none; overflow: visible;
  padding: 0 0 14px; text-align: left;
}
#zones-panel.hpt-px .px-roof{
  height: 30px; margin: 0 -10px 10px;
  background: repeating-linear-gradient(180deg, #6d6c6f 0px, #6d6c6f 8px, #44495e 8px, #44495e 10px);
  box-shadow: inset 0 4px 0 #7a7b82, 4px 0 0 0 #2d2f31, -4px 0 0 0 #2d2f31, 0 4px 0 0 #2d2f31, 0 -4px 0 0 #2d2f31, 0 8px 0 0 #fcf3e2, 0 10px 0 0 #a08a6e;
}
#zones-panel.hpt-px .px-post{
  position: absolute; bottom: -54px; width: 14px; height: 54px; pointer-events: none;
  background: #794624; box-shadow: inset 4px 0 0 #a9662c, inset -4px 0 0 #462c1e, 0 4px 0 0 #2f1f17;
}
#zones-panel.hpt-px .px-post-left{ left: 30px; }
#zones-panel.hpt-px .px-post-right{ right: 30px; }
#zones-panel.hpt-px .modal-header{ padding: 6px 18px 0; margin-bottom: 8px; align-items: flex-start; }
#zones-panel.hpt-px .modal-muted{ font-family: var(--px-font); font-size: 14px; letter-spacing: 0; text-transform: none; color: #eedecd; }
#zones-panel.hpt-px .modal-body{
  padding: 4px 18px 0 !important;
  max-height: calc(100vh - var(--hud-safe-top, 120px) - 150px); overflow-y: auto; overflow-x: hidden;
}
#zones-panel.hpt-px .zone-button-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 4px 6px 10px 4px; }

/* zone tiles */
#zones-panel.hpt-px .zone-card.px-zone{
  position: relative; display: flex; flex-direction: column; min-height: 0;
  padding: 0; border: 0; border-radius: 0; text-align: left;
  font-family: var(--px-font); color: var(--px-ink); background: var(--px-card);
  box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline), 4px 4px 0 0 var(--px-outline);
  transition: none;
}
#zones-panel.hpt-px .zone-card.px-zone:hover{ background: var(--px-card-hi); transform: translateY(-1px); }
#zones-panel.hpt-px .zone-card.px-zone.active{
  background: #fcf3e2;
  box-shadow: 4px 0 0 0 #ffd36b, -4px 0 0 0 #ffd36b, 0 4px 0 0 #ffd36b, 0 -4px 0 0 #ffd36b, 6px 6px 0 0 var(--px-outline);
}
#zones-panel.hpt-px .px-zone-patch{
  height: 86px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: #6f9a3e; box-shadow: inset 0 -8px 0 #5c8a37;
}
#zones-panel.hpt-px .px-zone-patch.px-ground-hard{ background: #857d78; box-shadow: inset 0 -8px 0 #6b6560; }
#zones-panel.hpt-px .px-zone-patch img{ display: block; image-rendering: pixelated; margin-bottom: 4px; max-width: none; }
#zones-panel.hpt-px .px-zone-body{ padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 3px; }
#zones-panel.hpt-px .px-zone-top{ display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
#zones-panel.hpt-px .zone-card-name{ font-size: 15px; font-weight: 700; line-height: 1.1; color: inherit; }
#zones-panel.hpt-px .zone-card-cost{ margin: 0; flex: 0 0 auto; font-family: var(--px-label); font-size: 11px; font-weight: 700; color: var(--px-good); text-transform: uppercase; }
#zones-panel.hpt-px .zone-card-desc{ margin: 0; font-size: 13px; line-height: 1.25; color: var(--px-ink-soft); }

/* locked: dark board, faded picture, yellow padlock tag */
#zones-panel.hpt-px .zone-card.px-zone:disabled,
#zones-panel.hpt-px .zone-card.px-zone.disabled{
  opacity: 1; filter: none; transform: none; cursor: not-allowed;
  color: #d2c6b9; background: var(--px-shade);
  box-shadow: inset 0 0 0 2px var(--px-outline), 2px 0 0 0 var(--px-btn), -2px 0 0 0 var(--px-btn), 0 2px 0 0 var(--px-btn), 0 -2px 0 0 var(--px-btn);
}
#zones-panel.hpt-px .zone-card.px-zone:disabled .px-zone-patch,
#zones-panel.hpt-px .zone-card.px-zone.disabled .px-zone-patch{ background: var(--px-btn); box-shadow: inset 0 -8px 0 #374224; }
#zones-panel.hpt-px .zone-card.px-zone:disabled .px-ground-hard,
#zones-panel.hpt-px .zone-card.px-zone.disabled .px-ground-hard{ background: #5d5e64; box-shadow: inset 0 -8px 0 #45464c; }
#zones-panel.hpt-px .zone-card.px-zone:disabled img,
#zones-panel.hpt-px .zone-card.px-zone.disabled img{ opacity: .35; }
#zones-panel.hpt-px .zone-card.px-zone:disabled .zone-card-name,
#zones-panel.hpt-px .zone-card.px-zone.disabled .zone-card-name{ color: #eedecd; }
#zones-panel.hpt-px .zone-card.px-zone:disabled .zone-card-cost,
#zones-panel.hpt-px .zone-card.px-zone:disabled .zone-card-desc,
#zones-panel.hpt-px .zone-card.px-zone.disabled .zone-card-cost,
#zones-panel.hpt-px .zone-card.px-zone.disabled .zone-card-desc{ color: #d2c6b9; }
#zones-panel.hpt-px .zone-card.disabled::after,
#zones-panel.hpt-px .zone-card:disabled::after{ display: none; }
#zones-panel.hpt-px .px-lock{
  position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 5px;
  font-family: var(--px-label); font-size: 10px; font-weight: 700; color: #462c1e;
  background: #ffd36b; padding: 3px 6px;
  box-shadow: 2px 0 0 0 #2f1f17, -2px 0 0 0 #2f1f17, 0 2px 0 0 #2f1f17, 0 -2px 0 0 #2f1f17;
}
#zones-panel.hpt-px .px-lock[hidden]{ display: none; }

/* the tool plank */
#zones-panel.hpt-px .px-plank{
  margin-top: 6px !important; padding: 10px 12px; gap: 8px !important; align-items: center;
  background: rgba(35, 65, 47, 0.92);
  box-shadow: inset 0 2px 0 var(--px-btn), inset 0 -4px 0 var(--px-outline), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
#zones-panel.hpt-px .px-plank-hint{ flex: 1 0 100%; margin: 0 0 2px !important; font-family: var(--px-font); font-size: 13px; letter-spacing: 0; color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline); }
#zones-panel.hpt-px .px-plank button{
  padding: 6px 10px 8px; border: 0; border-radius: 0;
  font: 500 14px var(--px-font); color: #fffaf0; background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-outline), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
#zones-panel.hpt-px .px-plank button:hover{ filter: brightness(1.12); background: var(--px-btn); }
#zones-panel.hpt-px .px-plank button.active,
#zones-panel.hpt-px .px-plank button[aria-pressed="true"]{
  color: #23412f; font-weight: 700; background: #fcf3e2;
  box-shadow: inset 0 -4px 0 #d2c6b9, 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
#zones-panel.hpt-px #btn-appeal-overlay{ margin-top: 0 !important; margin-left: auto; }
#zones-panel.hpt-px .modal-body > .build-hint{ margin: 10px 2px 0 !important; font-family: var(--px-label); font-size: 10px; letter-spacing: .5px; color: #f8e8d5; }
@media (max-width: 899px){
  #zones-panel.hpt-px .zones-modal{ width: 100vw; overflow: auto; border-radius: 0; box-shadow: inset 0 4px 0 var(--px-hi), 0 -4px 0 0 var(--px-outline); }
  #zones-panel.hpt-px .px-post{ display: none; }
  #zones-panel.hpt-px .px-roof{ margin: 0 0 8px; }
  #zones-panel.hpt-px .zone-button-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #zones-panel.hpt-px .modal-body{ max-height: none; }
}

/* ---- Manage and Bank (web.34, pass 1: frame, tabs, panels, buttons, common widgets).
   Manage holds a lot of text, some of it written by scripts with light inline
   colours, so its panels are darker painted boards with cream text rather than
   paper; the roadmap cards are pinned paper cards. */
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .card{ padding: 16px 18px 18px; width: min(1000px, calc(100vw - 32px)); }
#bank-modal.hpt-px .card, #pricing-modal.hpt-px .card, #shopping-modal.hpt-px .card{ padding: 16px 18px 18px; }
#bank-modal.hpt-px .build-hint{ font: 13px var(--px-font); letter-spacing: 0; color: #eedecd; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .card{ scrollbar-width: thin; scrollbar-color: var(--px-btn) var(--px-shade); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .card::-webkit-scrollbar{ width: 12px; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .card::-webkit-scrollbar-track{ background: var(--px-shade); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .card::-webkit-scrollbar-thumb{ background: var(--px-btn); box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-outline); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-header{ margin-bottom: 10px; align-items: flex-start; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-tabs{ gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-tab{
  padding: 6px 10px 8px; border: 0; border-radius: 0;
  font: 500 14px var(--px-font); color: #f8e8d5; background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -3px 0 var(--px-shade), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-tab:hover{ filter: brightness(1.12); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-tab.active{
  color: #23412f; font-weight: 700; background: #fcf3e2;
  box-shadow: inset 0 -3px 0 #d2c6b9, 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-grid{ gap: 14px; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-box{
  border: 0; border-radius: 0; padding: 12px 14px;
  background: rgba(35, 65, 47, 0.94); color: #fcf3e2;
  box-shadow: inset 2px 2px 0 var(--px-btn), inset -2px -2px 0 var(--px-outline), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px h3{ font: 700 18px var(--px-font); color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline); margin: 0 0 8px; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px h4{ font: 700 15px var(--px-font); color: #fffaf0; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-box .modal-muted,
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-muted{ font-family: var(--px-font); font-size: 14px; letter-spacing: 0; text-transform: none; color: #eedecd; line-height: 1.4; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-header .modal-muted{ font-family: var(--px-label); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #f8e8d5; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-btn{
  padding: 7px 12px 9px; border: 0; border-radius: 0;
  font: 500 14px var(--px-font); color: #fffaf0; background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-outline), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-btn:hover:not(:disabled){ filter: brightness(1.12); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-btn:active:not(:disabled){ transform: translateY(2px); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-btn.primary{ color: #23412f; font-weight: 700; background: #fcf3e2; box-shadow: inset 0 -4px 0 #d2c6b9, 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-btn:disabled{ opacity: 1; color: #a8b3a0; background: #2f4a2a; box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px select, :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .hud-select, :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px input[type="number"], :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px input[type="text"]{
  border: 0; border-radius: 0; padding: 5px 8px; font: 14px var(--px-font); color: var(--px-ink); background: #fcf3e2;
  box-shadow: inset 2px 2px 0 #d2c6b9, 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px input[type="range"]{ accent-color: #ffd36b; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px input[type="checkbox"]{ accent-color: var(--px-btn); }
/* finance */
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .finance-summary .fin-card,
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .finance-chart,
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-kpi{
  border: 0; border-radius: 0; background: rgba(23, 51, 44, 0.85);
  box-shadow: inset 0 0 0 2px var(--px-btn);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .finance-summary .fin-label, :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-kpi .kpi-label, :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-row .lbl{ font-family: var(--px-label); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; opacity: 1; color: #d6e4c4; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .finance-summary .fin-value, :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-kpi .kpi-value{ font: 700 18px var(--px-font); color: #ffd36b; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .finance-chart canvas{ border-radius: 0; background: rgba(0,0,0,0.18); image-rendering: pixelated; }
/* rating bars: square, segmented like a pixel meter */
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-row .bar{ height: 12px; border-radius: 0; background: var(--px-outline); box-shadow: inset 0 0 0 2px var(--px-outline); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-row .bar > div{ border-radius: 0; background: repeating-linear-gradient(90deg, #8fbf5a 0 6px, #6f9a3e 6px 8px); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .rating-row .pct{ font-family: var(--px-label); font-size: 11px; opacity: 1; }
/* roadmap: pinned paper cards */
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-card{
  position: relative; border: 0; border-radius: 0; padding: 12px 12px 10px;
  background: var(--px-card); color: var(--px-ink);
  box-shadow: 2px 0 0 0 var(--px-card-edge), -2px 0 0 0 var(--px-card-edge), 0 2px 0 0 var(--px-card-edge), 0 -2px 0 0 var(--px-card-edge), 4px 4px 0 0 var(--px-outline);
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-card::before{ content: ""; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px; background: var(--px-red); box-shadow: inset 2px 2px 0 #f07a22, 0 2px 0 0 var(--px-red-lo); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-card strong{ font: 700 16px var(--px-font); color: var(--px-ink); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-card span:not(.roadmap-badge){ font: 14px var(--px-font); color: var(--px-ink-soft); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-list{ gap: 16px; padding-top: 6px; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-badge{
  border: 0; border-radius: 0; min-height: 0; padding: 3px 6px;
  font-family: var(--px-label); font-size: 10px; font-weight: 700; text-transform: uppercase;
}
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-badge-new{ color: var(--px-good); background: none; box-shadow: inset 0 0 0 2px var(--px-good-edge); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-badge-soon{ color: #462c1e; background: #ffd36b; box-shadow: 2px 0 0 0 #2f1f17, -2px 0 0 0 #2f1f17, 0 2px 0 0 #2f1f17, 0 -2px 0 0 #2f1f17; }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-badge-dev{ color: #fffaf0; background: var(--px-btn); box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
:is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .roadmap-discord{ background: #5865f2 !important; border-radius: 0; box-shadow: inset 0 2px 0 #8891f7, inset 0 -4px 0 #3c45a5, 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
@media (max-width: 899px){
  :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .card{ border-radius: 0; box-shadow: inset 0 4px 0 var(--px-hi), 0 -4px 0 0 var(--px-outline); }
  :is(#manage-modal, #bank-modal, #shopping-modal, #pricing-modal).hpt-px .modal-tabs{ flex-wrap: nowrap; }
}

/* ---- Manage pass 2 (web.34): pieces written by scripts. Styled from here only
   (some carry inline styles, overridden with !important) so the game's own
   re-rendering is never disturbed. */
/* side quests: pinned paper cards */
#manage-modal.hpt-px .quest-list{ gap: 16px; padding-top: 6px; }
#manage-modal.hpt-px .quest-card{
  position: relative; border: 0; border-radius: 0; padding: 12px 12px 10px;
  background: var(--px-card); color: var(--px-ink);
  box-shadow: 2px 0 0 0 var(--px-card-edge), -2px 0 0 0 var(--px-card-edge), 0 2px 0 0 var(--px-card-edge), 0 -2px 0 0 var(--px-card-edge), 4px 4px 0 0 var(--px-outline);
}
#manage-modal.hpt-px .quest-card::before{ content: ""; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px; background: var(--px-red); box-shadow: inset 2px 2px 0 #f07a22, 0 2px 0 0 var(--px-red-lo); }
#manage-modal.hpt-px .quest-title{ font: 700 16px var(--px-font); color: var(--px-ink); }
#manage-modal.hpt-px .quest-desc{ font: 14px var(--px-font); opacity: 1; color: var(--px-ink-soft); }
#manage-modal.hpt-px .quest-meta{ font-family: var(--px-label); font-size: 10px; line-height: 1.6; opacity: 1; color: var(--px-good); text-align: right; text-transform: uppercase; }
#manage-modal.hpt-px .quest-progress{ font: 13px var(--px-font); opacity: 1; color: var(--px-ink-faint); }
/* every small script-made button in Manage (quest Claim/Decline, inspector buttons) */
#manage-modal.hpt-px .quest-btn,
#manage-modal.hpt-px #hpt-quest-board button{
  margin-left: 6px; padding: 4px 9px 6px !important; border: 0 !important; border-radius: 0 !important;
  font: 500 13px var(--px-font) !important; color: #fffaf0 !important; background: var(--px-btn) !important; cursor: pointer;
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -3px 0 var(--px-outline), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
#manage-modal.hpt-px .quest-btn:disabled,
#manage-modal.hpt-px #hpt-quest-board button:disabled{ opacity: 1; color: #a8b3a0 !important; background: #2f4a2a !important; cursor: not-allowed; box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
#manage-modal.hpt-px #hpt-quest-board button[data-decline]:not(:disabled){ background: var(--px-red) !important; box-shadow: inset 0 2px 0 var(--px-red-hi), inset 0 -3px 0 var(--px-red-lo), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
/* today's board rows: inset tiles */
#manage-modal.hpt-px #hpt-quest-board > div{
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px !important; margin: 8px 0 !important; border: 0 !important;
  font: 14px var(--px-font); color: #fcf3e2; background: rgba(23, 51, 44, 0.85);
  box-shadow: inset 0 0 0 2px var(--px-btn);
}
#manage-modal.hpt-px #hpt-quest-board > div button:first-of-type{ margin-left: auto; }
/* roadmap grade cards (park-grades.js writes them with inline dark styles) */
#manage-modal.hpt-px #manage-view-roadmap > h3{ margin-top: 2px; }
#manage-modal.hpt-px #manage-view-roadmap .roadmap-card[style]{
  display: block; margin: 16px 0 !important; padding: 12px 14px 10px !important; border: 0 !important;
  background: var(--px-card) !important; color: var(--px-ink) !important; font: 14px/1.45 var(--px-font);
}
#manage-modal.hpt-px #manage-view-roadmap .roadmap-card[style] b{ display: block; margin-bottom: 4px; font: 700 17px var(--px-font); color: var(--px-ink); }
#manage-modal.hpt-px #manage-view-roadmap .roadmap-card[style] small{ display: block; margin-top: 6px; padding-top: 6px; font: 13px var(--px-font); color: var(--px-good); box-shadow: 0 -2px 0 0 var(--px-paper-line); }
/* staff roster */
#manage-modal.hpt-px .staff-roster{ gap: 10px; scrollbar-width: thin; scrollbar-color: var(--px-btn) var(--px-shade); }
#manage-modal.hpt-px .staff-roster-card{ border: 0; border-radius: 0; background: rgba(23, 51, 44, 0.85); box-shadow: inset 0 0 0 2px var(--px-btn); }
#manage-modal.hpt-px .staff-roster-head{ font: 700 15px var(--px-font); color: #fffaf0; }
#manage-modal.hpt-px .staff-roster-head > div:last-child{ font-family: var(--px-label); font-size: 11px; color: #ffd36b; }
#manage-modal.hpt-px .staff-roster-role{ font-family: var(--px-label); font-size: 10px; letter-spacing: .5px; color: #d6e4c4; }
#manage-modal.hpt-px .staff-roster-meta, #manage-modal.hpt-px .staff-roster-empty{ font: 13px var(--px-font); color: #eedecd; }
#manage-modal.hpt-px .staff-fire-btn{ background: var(--px-red); box-shadow: inset 0 2px 0 var(--px-red-hi), inset 0 -4px 0 var(--px-red-lo), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
/* visitor book: found entries are stamped paper, undiscovered are dark tiles */
#manage-modal.hpt-px #manage-view-visitor-book h3{ margin-top: 2px; }
#manage-modal.hpt-px #manage-view-visitor-book p{ font-family: var(--px-label); font-size: 11px; text-transform: uppercase; color: #d6e4c4; }
#manage-modal.hpt-px #manage-view-visitor-book h4{ margin: 14px 0 6px; font: 700 15px var(--px-font); text-transform: capitalize; color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline); }
#manage-modal.hpt-px #manage-view-visitor-book [title]{
  border: 0 !important; padding: 8px !important; font: 13px var(--px-font); color: #a8b3a0;
  background: rgba(23, 51, 44, 0.85) !important; box-shadow: inset 0 0 0 2px var(--px-btn);
}
#manage-modal.hpt-px #manage-view-visitor-book [title]:not([title="Undiscovered"]){
  color: var(--px-ink); font-weight: 700; background: var(--px-card) !important;
  box-shadow: inset 0 0 0 2px var(--px-good-edge), 3px 3px 0 0 var(--px-outline);
}
/* the "Side quests (n)" tab at the bottom of the screen (outside the menus) */
body.pixel-art-standard #hpt-quest-card{
  border-radius: 0 !important; padding: 5px 10px 6px !important;
  font: 12px "Pixelify Sans", "Fredoka", monospace !important; color: #fcf3e2 !important;
  background: rgba(50, 78, 47, 0.92) !important;
  box-shadow: inset 0 2px 0 #56713a, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c;
}
body.pixel-art-standard #hpt-quest-card summary{ cursor: pointer; font-weight: 700; }

/* ---- Shopping menu (web.34): each shop is a sign showing a strip of its own banner
   at native size (cropped, never scaled), with the name on a plate. */
#shopping-modal.hpt-px .shop-card{ width: min(560px, 94vw); text-align: left; }
#shopping-modal.hpt-px .shop-grid{ gap: 14px; }
#shopping-modal.hpt-px .shop-item{
  position: relative; min-height: 50px; padding: 10px 12px; border: 0; border-radius: 0;
  font: 700 15px var(--px-font); color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline); text-align: left;
  background-color: var(--px-btn); background-repeat: no-repeat; background-size: 1020px 490px;
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-outline), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline), 4px 4px 0 0 rgba(23,51,44,.6);
}
#shopping-modal.hpt-px #btn-shop-wholesaler, #shopping-modal.hpt-px #btn-shop-caravans, #shopping-modal.hpt-px #btn-shop-diy{
  min-height: 96px; display: flex; align-items: flex-end; padding: 0;
}
#shopping-modal.hpt-px #btn-shop-wholesaler{ background-image: url("../img/shops/wholesaler.webp"); background-position: center 58%; }
#shopping-modal.hpt-px #btn-shop-caravans{ background-image: url("../img/shops/rusty.webp"); background-position: center 62%; }
#shopping-modal.hpt-px #btn-shop-diy{ background-image: url("../img/shops/diy.webp"); background-position: center 62%; }
#shopping-modal.hpt-px #btn-shop-wholesaler, #shopping-modal.hpt-px #btn-shop-caravans, #shopping-modal.hpt-px #btn-shop-diy{ image-rendering: pixelated; }
#shopping-modal.hpt-px :is(#btn-shop-wholesaler, #btn-shop-caravans, #btn-shop-diy)::after{ content: ""; }
#shopping-modal.hpt-px .shop-item:hover:not(:disabled){ filter: brightness(1.1); }
#shopping-modal.hpt-px .shop-item:disabled{ filter: none; opacity: 1; color: #a8b3a0; background-color: #2f4a2a; cursor: not-allowed; }
#shopping-modal.hpt-px #btn-shop-voodoo{ grid-column: 1 / -1; font-size: 14px; }
/* the name sits on a plate along the bottom of the picture */
#shopping-modal.hpt-px :is(#btn-shop-wholesaler, #btn-shop-caravans, #btn-shop-diy){ font-size: 0; }
#shopping-modal.hpt-px :is(#btn-shop-wholesaler, #btn-shop-caravans, #btn-shop-diy)::before{
  content: attr(data-label); display: block; width: 100%; padding: 5px 10px 6px; box-sizing: border-box;
  font: 700 15px var(--px-font); color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline);
  background: rgba(23, 51, 44, 0.86); box-shadow: 0 -2px 0 0 var(--px-outline);
}

/* ---- Pricing popup (web.34) uses the shared Manage/Bank rules; its rows: */
#pricing-modal.hpt-px #pricing-list > *{ border-radius: 0; }

/* ---- Shop screens (web.34, js/shopping-trips.js render()) */
#hpt-trip .trip-panel{
  width: min(960px, 100%); max-height: calc(100vh - 24px); overflow: auto; text-align: left;
  font: 14px "Pixelify Sans", "Fredoka", monospace; color: #fcf3e2;
  background: rgba(50, 78, 47, 0.97);
  box-shadow: inset 4px 4px 0 #56713a, inset -4px -4px 0 #23412f, 4px 0 0 0 #17332c, -4px 0 0 0 #17332c, 0 4px 0 0 #17332c, 0 -4px 0 0 #17332c, 10px 12px 0 0 rgba(23,18,19,.4);
  scrollbar-width: thin; scrollbar-color: #41592e #23412f;
}
#hpt-trip .trip-tabs{ display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px 0; }
#hpt-trip .trip-gap{ flex: 1; }
#hpt-trip .trip-tab, #hpt-trip .trip-close{
  cursor: pointer; padding: 6px 10px 8px; border: 0; border-radius: 0;
  font: 500 14px "Pixelify Sans", monospace; color: #f8e8d5; background: #41592e;
  box-shadow: inset 0 2px 0 #56713a, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 -2px 0 0 #17332c;
}
#hpt-trip .trip-tab.is-on{ color: #23412f; font-weight: 700; background: #fcf3e2; padding-bottom: 10px; box-shadow: inset 0 2px 0 #fffaf0, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 -2px 0 0 #17332c; }
#hpt-trip .trip-close{ margin-bottom: 6px; min-width: 40px; font-family: "Silkscreen", monospace; color: #fffaf0; background: #ae3f38; box-shadow: inset 0 2px 0 #eb6500, inset 0 -4px 0 #703d1f, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c; }
#hpt-trip .trip-banner{
  position: relative; height: clamp(150px, 30vh, 240px); margin: 0 4px;
  background-color: #23412f; background-repeat: no-repeat; background-size: 1020px 490px; image-rendering: pixelated;
  box-shadow: 0 -2px 0 0 #17332c, 0 2px 0 0 #17332c;
}
#hpt-trip .trip-sign{ position: absolute; left: 14px; bottom: 12px; padding: 6px 12px 8px; background: rgba(23,51,44,.9); box-shadow: inset 0 2px 0 #41592e, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c; }
#hpt-trip .trip-sign-name{ font: 700 20px "Pixelify Sans", monospace; color: #fffaf0; text-shadow: 2px 2px 0 #17332c; }
#hpt-trip .trip-sign-sub{ font: 11px "Silkscreen", monospace; text-transform: uppercase; color: #eedecd; }
#hpt-trip .trip-body{ padding: 14px 16px 18px; }
#hpt-trip .trip-hello{ display: flex; gap: 10px; align-items: center; margin-bottom: 12px; color: #eedecd; }
#hpt-trip .trip-hello img{ border-radius: 50%; }   /* Barnaby's head stays as he is */
#hpt-trip .trip-lock{ display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding: 7px 10px; color: #462c1e; background: #ffd36b; box-shadow: 2px 0 0 0 #2f1f17, -2px 0 0 0 #2f1f17, 0 2px 0 0 #2f1f17, 0 -2px 0 0 #2f1f17; }
#hpt-trip .trip-lock::before{ content: ""; width: 10px; height: 12px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23462c1e' d='M1 0h3v1H1zM1 1h1v2H1zM3 1h1v2H3zM0 2h5v4H0z'/%3E%3Cpath fill='%23ffd36b' d='M2 3h1v2H2z'/%3E%3C/svg%3E") no-repeat center / 10px 12px; }
#hpt-trip .trip-h{ margin: 14px 0 8px; font: 700 17px "Pixelify Sans", monospace; color: #fffaf0; text-shadow: 2px 2px 0 #17332c; }
#hpt-trip .trip-ladder{ display: flex; gap: 12px; flex-wrap: wrap; }
#hpt-trip .trip-level{ flex: 1; min-width: 170px; padding: 10px; color: #fcf3e2; background: rgba(23,51,44,.85); box-shadow: inset 0 0 0 2px #41592e; }
#hpt-trip .trip-level.is-have{ color: #462c1e; background: #f8e8d5; box-shadow: inset 0 0 0 2px #56713a, 3px 3px 0 0 #17332c; }
#hpt-trip .trip-level.is-next{ box-shadow: inset 0 0 0 2px #ffd36b; }
#hpt-trip .trip-level-no{ font: 10px "Silkscreen", monospace; text-transform: uppercase; opacity: .85; }
#hpt-trip .trip-level-name{ font: 700 16px "Pixelify Sans", monospace; }
#hpt-trip .trip-level ul, #hpt-trip .trip-rules{ margin: 6px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.45; }
#hpt-trip .trip-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
#hpt-trip .trip-card{ position: relative; padding: 12px 12px 10px; color: #462c1e; background: #f8e8d5; box-shadow: 2px 0 0 0 #bc9d79, -2px 0 0 0 #bc9d79, 0 2px 0 0 #bc9d79, 0 -2px 0 0 #bc9d79, 4px 4px 0 0 #17332c; }
#hpt-trip .trip-card::before{ content: ""; position: absolute; left: 50%; top: -6px; width: 8px; height: 8px; background: #ae3f38; box-shadow: inset 2px 2px 0 #f07a22, 0 2px 0 0 #703d1f; }
#hpt-trip .trip-card.is-dim{ color: #7a6d64; background: #e9dccb; }
#hpt-trip .trip-card-top{ display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
#hpt-trip .trip-card b{ font: 700 15px "Pixelify Sans", monospace; }
#hpt-trip .trip-price{ font: 700 12px "Silkscreen", monospace; color: #324e2f; }
#hpt-trip .trip-blurb{ font-size: 13px; line-height: 1.35; margin-top: 4px; }
#hpt-trip .trip-card .trip-blurb{ color: #603a1f; }
#hpt-trip .trip-model{ display: flex; gap: 10px; align-items: center; }
#hpt-trip .trip-patch{ flex: 0 0 120px; height: 84px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: #6f9a3e; box-shadow: inset 0 0 0 2px #41592e, inset 0 -8px 0 2px #5c8a37; }
#hpt-trip .trip-patch img{ display: block; image-rendering: pixelated; margin-bottom: 4px; max-width: none; }
#hpt-trip .trip-have{ margin-top: 6px; font: 700 11px "Silkscreen", monospace; text-transform: uppercase; color: #324e2f; }
#hpt-trip .trip-level:not(.is-have) .trip-have{ color: #b8f5c6; }
#hpt-trip .trip-note{ margin-top: 6px; font: 11px "Silkscreen", monospace; text-transform: uppercase; opacity: .8; }
#hpt-trip .trip-row{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
#hpt-trip .trip-foot, #hpt-trip .trip-bank{ margin-top: 12px; font-size: 13px; color: #eedecd; }
#hpt-trip .trip-bank{ font: 11px "Silkscreen", monospace; text-transform: uppercase; opacity: .8; }
#hpt-trip .quest-btn{
  margin-top: 8px; padding: 5px 10px 7px; border: 0; border-radius: 0; cursor: pointer;
  font: 500 13px "Pixelify Sans", monospace; color: #fffaf0; background: #41592e;
  box-shadow: inset 0 2px 0 #56713a, inset 0 -3px 0 #17332c, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c;
}
#hpt-trip .quest-btn.trip-big{ margin-top: 0; padding: 8px 14px 10px; font-size: 15px; }
#hpt-trip .quest-btn:hover:not(:disabled){ filter: brightness(1.12); }
#hpt-trip .quest-btn:disabled{ opacity: 1; color: #a8b3a0; background: #2f4a2a; cursor: not-allowed; box-shadow: 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c; }
#hpt-trip button:focus-visible{ outline: 2px solid #ffd36b; outline-offset: 3px; }

/* ---- the caravan chooser and the paint bar that float above the map (shopping-trips.js) */
body.pixel-art-standard :is(#hpt-model-chooser, #hpt-paint-bar){
  border-radius: 0 !important; border: 0 !important; font-family: "Pixelify Sans", "Fredoka", monospace !important;
  background: rgba(50, 78, 47, 0.95) !important; color: #fcf3e2 !important;
  box-shadow: inset 2px 2px 0 #56713a, inset -2px -2px 0 #23412f, 3px 0 0 0 #17332c, -3px 0 0 0 #17332c, 0 3px 0 0 #17332c, 0 -3px 0 0 #17332c !important;
}
body.pixel-art-standard :is(#hpt-model-chooser, #hpt-paint-bar) button{ border-radius: 0 !important; font-family: "Pixelify Sans", monospace !important; }

/* ---- Top bar (web.34): the stats on a green plank, the buttons hanging below it as
   separate pixel buttons (menus green, tools slate, Bulldoze red). The music and
   settings pop-ups match. The logo is the game's own picture and stays. */
.hud-row.hpt-px::before{ display: none; }                     /* no glass slab behind it */
.hud-row.hpt-px{ font-family: var(--px-font); }
.hud-row.hpt-px #top-bar{
  gap: 0; padding: 0; border-radius: 0;
  background: var(--px-frame);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-shade),
    4px 0 0 0 var(--px-outline), -4px 0 0 0 var(--px-outline), 0 4px 0 0 var(--px-outline), 0 -4px 0 0 var(--px-outline),
    0 9px 0 0 rgba(23, 18, 19, 0.30);
}
.hud-row.hpt-px #top-bar .v-sep{ width: 2px; height: auto; align-self: stretch; background: var(--px-shade); box-shadow: 2px 0 0 0 var(--px-hi); }
.hud-row.hpt-px .hud-logo{ padding: 4px 10px; display: flex; align-items: center; }
.hud-row.hpt-px .stat-box{ padding: 6px 12px 8px; min-width: 56px; }
.hud-row.hpt-px .stat-label{ font-family: var(--px-label); font-size: 9px; letter-spacing: 1px; color: #f8e8d5; margin-bottom: 2px; }
.hud-row.hpt-px .stat-value{ font-family: var(--px-font); font-size: 18px; font-weight: 600; line-height: 1.05; color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline); }
.hud-row.hpt-px .stat-value.money{ color: #d8f0a0; }
.hud-row.hpt-px .stat-value.rating{ color: #ffd36b; }
.hud-row.hpt-px .money-pop{ font-family: var(--px-label); font-size: 10px; color: #d8f0a0; text-shadow: 1px 1px 0 var(--px-outline); }
.hud-row.hpt-px #hpt-save-indicator{ padding: 0 10px; font-family: var(--px-label); font-size: 9px; color: #f8e8d5; }
/* the controls: no slab, buttons hang below the plank */
.hud-row.hpt-px #controls-bar{ background: none; box-shadow: none; padding: 0; gap: 10px; }
.hud-row.hpt-px #controls-bar .v-sep{ width: 6px; background: none; }
.hud-row.hpt-px .btn-group{ gap: 6px; }
.hud-row.hpt-px .hud-btn{
  min-height: 30px; padding: 4px 9px 6px; border: 0; border-radius: 0; transition: none;
  font-family: var(--px-font); font-size: 14px; font-weight: 500; line-height: 1.15; color: #fffaf0;
  background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-shade),
    2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hud-row.hpt-px .hud-btn:hover{ filter: brightness(1.12); background: var(--px-btn); transform: none; }
.hud-row.hpt-px .hud-btn:active{ transform: translateY(2px); }
.hud-row.hpt-px .hud-btn.active{
  color: #23412f; font-weight: 700; background: #fcf3e2;
  box-shadow: inset 0 -4px 0 #d2c6b9, 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hud-row.hpt-px .hud-btn:disabled, .hud-row.hpt-px .hud-btn.disabled{ opacity: 1; color: #a8b3a0; background: #2f4a2a; box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
/* the four menu buttons are the big ones */
.hud-row.hpt-px .hud-tab{ font-size: 16px; padding: 5px 12px 7px; }
/* tools in slate, like the mockup */
.hud-row.hpt-px .btn-group.settings .hud-btn:not(.active):not(#btn-bulldoze){
  background: #5d5e64; box-shadow: inset 0 2px 0 #7a7b82, inset 0 -4px 0 #393843, 2px 0 0 0 #2d2f31, -2px 0 0 0 #2d2f31, 0 2px 0 0 #2d2f31, 0 -2px 0 0 #2d2f31;
}
.hud-row.hpt-px #btn-bulldoze:not(.active){
  background: var(--px-red); box-shadow: inset 0 2px 0 var(--px-red-hi), inset 0 -4px 0 var(--px-red-lo), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hud-row.hpt-px .speed-controls .hud-btn{ min-width: 30px; padding: 4px 6px 6px; font-size: 13px; }
.hud-row.hpt-px .hud-btn .px-ico{ display: inline-block; width: 14px; height: 14px; vertical-align: -2px; background: no-repeat center / 14px 14px; image-rendering: pixelated; }
.hud-row.hpt-px .hud-btn .px-ico + span{ margin-left: 5px; }
/* music and settings pop-ups */
.hud-row.hpt-px .hud-pop, .hud-row.hpt-px .hud-menu{
  border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(50, 78, 47, 0.96); color: #fcf3e2;
  box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-shade),
    3px 0 0 0 var(--px-outline), -3px 0 0 0 var(--px-outline), 0 3px 0 0 var(--px-outline), 0 -3px 0 0 var(--px-outline), 6px 8px 0 0 rgba(23,18,19,.3);
}
.hud-row.hpt-px .hud-menu{ padding: 8px; gap: 2px; }
.hud-row.hpt-px .hud-menu-item{
  margin: 3px 0; padding: 7px 10px 9px; border: 0; border-radius: 0;
  font: 500 14px var(--px-font); color: #fffaf0; background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -3px 0 var(--px-shade), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hud-row.hpt-px .hud-menu-item:hover{ filter: brightness(1.12); background: var(--px-btn); }
.hud-row.hpt-px .hud-menu-item.danger{ color: #fffaf0; background: var(--px-red); box-shadow: inset 0 2px 0 var(--px-red-hi), inset 0 -3px 0 var(--px-red-lo), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
.hud-row.hpt-px .hud-menu-hint, .hud-row.hpt-px .hud-menu-about{ font-family: var(--px-label); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #d6e4c4; opacity: 1; padding: 4px 4px 2px; }
.hud-row.hpt-px .hud-menu-sep{ height: 2px; margin: 6px 0; background: var(--px-shade); box-shadow: 0 2px 0 0 var(--px-hi); }
.hud-row.hpt-px .music-btn{ border: 0; border-radius: 0; color: #fffaf0; background: var(--px-btn); box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -3px 0 var(--px-shade), 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline); }
.hud-row.hpt-px .music-track{ font-family: var(--px-font); font-size: 13px; color: #fcf3e2; }
@media (min-width: 900px){
  /* plank on top, buttons hanging below it */
  .hud-row.hpt-px{ flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: 4px 6px; }
}
@media (max-width: 899px){
  .hud-row.hpt-px{ gap: 10px; }
  .hud-row.hpt-px #top-bar{ flex-wrap: wrap; justify-content: center; }
  .hud-row.hpt-px #controls-bar{ justify-content: center; flex-wrap: wrap; }
  .hud-row.hpt-px .stat-box{ padding: 4px 8px 6px; }
}
/* the grade and season chips under the park name (park-grades.js / park-seasons.js) */
.hud-row.hpt-px #hpt-grade-chip, .hud-row.hpt-px #hpt-season-chip{
  display: inline-block !important; margin: 3px 2px 0 !important; padding: 2px 6px 3px !important;
  border: 0 !important; border-radius: 0 !important;
  font: 700 9px "Silkscreen", monospace !important; letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}
.hud-row.hpt-px #hpt-grade-chip{ color: #462c1e !important; background: #ffd36b !important; cursor: pointer; }
.hud-row.hpt-px #hpt-season-chip{ color: #fcf3e2 !important; background: var(--px-shade) !important; }
/* the "new grade" banner across the screen */
body.pixel-art-standard #hpt-grade-banner{
  font: 700 26px "Pixelify Sans", "Fredoka", monospace !important; color: #fffaf0 !important; text-shadow: 3px 3px 0 #17332c;
  background: rgba(50, 78, 47, 0.95) !important; border-block: 0 !important;
  box-shadow: inset 0 4px 0 #56713a, inset 0 -6px 0 #23412f, 0 -4px 0 0 #ffd36b, 0 4px 0 0 #ffd36b, 0 10px 0 0 rgba(23,18,19,.35) !important;
}
body.pixel-art-standard #hpt-grade-banner div{ font: 15px "Pixelify Sans", monospace !important; color: #eedecd; text-shadow: 2px 2px 0 #17332c; }

/* ================================================================ smaller pieces (web.34)
   Open Park sign, inspectors, event cards, goal bar, toasts. Literal colours here
   (these sit outside any .hpt-px menu). Pixel-art mode only. */
/* ---- Open Park: a painted sign on a timber post */
body.pixel-art-standard #open-park-fab.open-park-fab{
  bottom: 58px !important; left: 28px !important;
  padding: 12px 24px 16px; border: 0; border-radius: 0;
  font: 700 22px "Pixelify Sans", "Fredoka", monospace; color: #fffaf0; text-shadow: 2px 2px 0 #17332c;
  background: #41592e;
  box-shadow: inset 0 4px 0 #56713a, inset 0 -6px 0 #23412f, 4px 0 0 0 #17332c, -4px 0 0 0 #17332c, 0 4px 0 0 #17332c, 0 -4px 0 0 #17332c, 6px 8px 0 0 rgba(23,18,19,.3);
  overflow: visible;
}
body.pixel-art-standard #open-park-fab.open-park-fab::after{   /* the post */
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; width: 12px; height: 38px;
  background: #794624; box-shadow: inset 3px 0 0 #a9662c, inset -3px 0 0 #462c1e, 0 4px 0 0 #2f1f17; pointer-events: none;
}
body.pixel-art-standard #open-park-fab.open-park-fab:hover{ transform: none !important; filter: brightness(1.1); background: #41592e; }
body.pixel-art-standard #open-park-fab.open-park-fab:active{ transform: translateY(2px) !important; }
body.pixel-art-standard #open-park-fab.open-park-fab.disabled{ opacity: 1; filter: none; color: #c9d1bf; background: #4d5a45; box-shadow: inset 0 4px 0 #626e59, inset 0 -6px 0 #353f30, 4px 0 0 0 #17332c, -4px 0 0 0 #17332c, 0 4px 0 0 #17332c, 0 -4px 0 0 #17332c; }
body.pixel-art-standard .open-park-reason, body.pixel-art-standard .open-park-checklist{
  border-radius: 0 !important; border: 0 !important; font-family: "Pixelify Sans", "Fredoka", monospace !important;
  background: rgba(50, 78, 47, 0.96) !important; color: #fcf3e2 !important;
  box-shadow: inset 2px 2px 0 #56713a, inset -2px -2px 0 #23412f, 3px 0 0 0 #17332c, -3px 0 0 0 #17332c, 0 3px 0 0 #17332c, 0 -3px 0 0 #17332c !important;
}
/* ---- guest and building inspectors */
body.pixel-art-standard .gi{
  border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 13px/1.4 "Pixelify Sans", "Fredoka", monospace; color: #fcf3e2;
  background: rgba(50, 78, 47, 0.94);
  box-shadow: inset 2px 2px 0 #56713a, inset -2px -2px 0 #23412f, 3px 0 0 0 #17332c, -3px 0 0 0 #17332c, 0 3px 0 0 #17332c, 0 -3px 0 0 #17332c, 6px 8px 0 0 rgba(23,18,19,.3);
}
body.pixel-art-standard .gi-title{ font: 700 16px "Pixelify Sans", monospace; color: #fffaf0; text-shadow: 2px 2px 0 #17332c; }
body.pixel-art-standard .gi-sub{ font: 10px "Silkscreen", monospace; text-transform: uppercase; letter-spacing: .5px; opacity: 1; color: #d6e4c4; }
body.pixel-art-standard .gi-k{ opacity: 1; color: #eedecd; }
body.pixel-art-standard .gi-v{ color: #ffd36b; }
body.pixel-art-standard .gi-bar{ height: 8px; border-radius: 0; background: #17332c; box-shadow: inset 0 0 0 1px #17332c; }
body.pixel-art-standard .gi-fill{ border-radius: 0; background: repeating-linear-gradient(90deg, #8fbf5a 0 6px, #6f9a3e 6px 8px); }
body.pixel-art-standard .gi-note{ opacity: 1; color: #d6e4c4; }
body.pixel-art-standard .gi-btn{
  width: 30px; height: 28px; border: 0; border-radius: 0; color: #fffaf0; background: #41592e; font-family: "Silkscreen", monospace;
  box-shadow: inset 0 2px 0 #56713a, inset 0 -3px 0 #23412f, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c;
}
body.pixel-art-standard .gi-btn.active{ background: #fcf3e2; color: #23412f; box-shadow: inset 0 -3px 0 #d2c6b9, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c; }
body.pixel-art-standard :is(#gi-close, #bi-close){ background: #ae3f38; box-shadow: inset 0 2px 0 #eb6500, inset 0 -3px 0 #703d1f, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c; }
/* the pin: a pixel drawing pin instead of the emoji */
body.pixel-art-standard :is(#gi-pin, #bi-pin){ font-size: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' shape-rendering='crispEdges'%3E%3Cpath fill='%2317332c' d='M1 0h5v1H1zM0 1h1v3H0zM6 1h1v3H6zM1 4h5v1H1zM3 5h1v4H3z'/%3E%3Cpath fill='%23ae3f38' d='M1 1h5v3H1z'/%3E%3Cpath fill='%23f07a22' d='M2 1h2v1H2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 13px; }
body.pixel-art-standard .gi .quest-btn{
  padding: 5px 10px 7px; border: 0; border-radius: 0; font: 500 13px "Pixelify Sans", monospace; color: #fffaf0; background: #41592e;
  box-shadow: inset 0 2px 0 #56713a, inset 0 -3px 0 #23412f, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c;
}
body.pixel-art-standard .gi .quest-btn:disabled{ opacity: 1; color: #a8b3a0; background: #2f4a2a; box-shadow: 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c; }
body.pixel-art-standard .gi::-webkit-scrollbar{ width: 10px; }
body.pixel-art-standard .gi::-webkit-scrollbar-thumb{ background: #41592e; box-shadow: inset 2px 2px 0 #56713a, inset -2px -2px 0 #17332c; }
/* ---- event cards (park-events.js). Barnaby's round head stays as it is. */
body.pixel-art-standard .hpt-event-card{
  border: 0; border-radius: 0; font-family: "Pixelify Sans", "Fredoka", monospace; color: #fcf3e2;
  background: rgba(50, 78, 47, 0.97);
  box-shadow: inset 4px 4px 0 #56713a, inset -4px -4px 0 #23412f, 4px 0 0 0 #17332c, -4px 0 0 0 #17332c, 0 4px 0 0 #17332c, 0 -4px 0 0 #17332c, 0 -10px 0 0 #ffd36b, 10px 12px 0 0 rgba(23,18,19,.35);
}
body.pixel-art-standard .hpt-event-card__header{ border-bottom: 0; box-shadow: 0 2px 0 0 #23412f, 0 4px 0 0 #56713a; }
body.pixel-art-standard .hpt-event-card__eyebrow{ font: 700 10px "Silkscreen", monospace; letter-spacing: .5px; color: #ffd36b; }
body.pixel-art-standard .hpt-event-card__title{ font: 700 22px "Pixelify Sans", monospace; color: #fffaf0; text-shadow: 2px 2px 0 #17332c; }
body.pixel-art-standard .hpt-event-card__body p{ font-size: 15px; color: #eedecd; }
body.pixel-art-standard .hpt-event-card__reqs li{ border: 0; border-radius: 0; padding: 3px 7px; font: 700 11px "Silkscreen", monospace; text-transform: uppercase; background: none; }
body.pixel-art-standard .hpt-event-card__reqs li.is-ok{ color: #c9f0a0; box-shadow: inset 0 0 0 2px #8fbf5a; }
body.pixel-art-standard .hpt-event-card__reqs li.is-missing{ color: #ffd39a; box-shadow: inset 0 0 0 2px #e8993a; }
body.pixel-art-standard .hpt-event-card__close{
  padding: 7px 16px 9px; border: 0; border-radius: 0; font: 700 15px "Pixelify Sans", monospace; color: #23412f; background: #fcf3e2;
  box-shadow: inset 0 -4px 0 #d2c6b9, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c;
}
body.pixel-art-standard .hpt-event-card__close:hover{ filter: brightness(1.05); background: #fcf3e2; }
/* ---- the goal bar along the bottom */
body.pixel-art-standard .hpt-goal-widget{
  border: 0; border-radius: 0 !important; padding: 7px 14px 9px;
  background: rgba(50, 78, 47, 0.94);
  box-shadow: inset 0 2px 0 #56713a, inset 0 -3px 0 #23412f, 3px 0 0 0 #17332c, -3px 0 0 0 #17332c, 0 3px 0 0 #17332c, 0 -3px 0 0 #17332c;
}
body.pixel-art-standard .hpt-goal-label{ font: 700 14px "Pixelify Sans", "Fredoka", monospace; color: #fffaf0; text-shadow: 2px 2px 0 #17332c; }
body.pixel-art-standard .hpt-goal-progress{ height: 6px; border-radius: 0; background: #17332c; }
body.pixel-art-standard .hpt-goal-progress-fill{ border-radius: 0; background: repeating-linear-gradient(90deg, #ffd36b 0 6px, #e8b43a 6px 8px); }
/* ---- toasts (the message colour is set by the game; only the plate changes) */
body.pixel-art-standard .toast-item{
  border: 0; border-radius: 0; padding: 8px 18px 10px;
  font-family: "Pixelify Sans", "Fredoka", monospace; text-shadow: 2px 2px 0 #17332c;
  background: rgba(35, 65, 47, 0.95);
  box-shadow: inset 0 2px 0 #41592e, 3px 0 0 0 #17332c, -3px 0 0 0 #17332c, 0 3px 0 0 #17332c, 0 -3px 0 0 #17332c, 5px 6px 0 0 rgba(23,18,19,.3);
}
/* messages sit above the Open Park sign (the sign stands taller on its post) */
body.pixel-art-standard #toast-box{ bottom: 136px; }
/* the one-off starter tip card */
body.pixel-art-standard .starter-tip-card{
  border: 0 !important; border-radius: 0 !important; font-family: "Pixelify Sans", "Fredoka", monospace !important; color: #fcf3e2 !important;
  background: rgba(50, 78, 47, 0.96) !important;
  box-shadow: inset 2px 2px 0 #56713a, inset -2px -2px 0 #23412f, 3px 0 0 0 #17332c, -3px 0 0 0 #17332c, 0 3px 0 0 #17332c, 0 -3px 0 0 #17332c, 5px 6px 0 0 rgba(23,18,19,.3) !important;
}
body.pixel-art-standard .starter-tip-card strong{ font: 700 11px "Silkscreen", monospace; text-transform: uppercase; color: #ffd36b !important; }

/* ================================================================ compact (web.35)
   Laptop windows up to 820px tall. A 1366x768 screen, or a 1920x1080 screen at
   125-150% Windows scaling, loses 150-200px to the browser bar and taskbar, and
   the full-size menus left room for one Build card. Same look, tighter: a
   smaller top bar and buttons, a Build menu that fills the height under the top
   bar, and a smaller Barnaby, Open Park sign and goal bar. Whole-pixel sizes only. */
@media (min-width: 900px) and (max-height: 820px){
  /* top bar: about 90px tall instead of 122px */
  .hud-row.hpt-px{ gap: 8px; padding: 2px 6px; }
  .hud-row.hpt-px .hud-logo{ padding: 2px 8px; }
  .hud-row.hpt-px .hud-logo{ width: 46px; min-width: 46px; }
  .hud-row.hpt-px .hud-logo img{ width: 40px; }
  .hud-row.hpt-px .stat-box{ padding: 4px 10px 6px; }
  .hud-row.hpt-px .stat-label{ font-size: 8px; margin-bottom: 1px; }
  .hud-row.hpt-px .stat-value{ font-size: 15px; }
  .hud-row.hpt-px #hpt-grade-chip, .hud-row.hpt-px #hpt-season-chip{ margin: 2px 2px 0 !important; padding: 1px 5px 2px !important; font-size: 8px !important; }
  .hud-row.hpt-px #controls-bar{ gap: 8px; }
  .hud-row.hpt-px .btn-group{ gap: 5px; }
  .hud-row.hpt-px .hud-btn{ min-height: 24px; padding: 2px 7px 4px; font-size: 12px; }
  .hud-row.hpt-px .hud-tab{ font-size: 14px; padding: 3px 10px 5px; }
  .hud-row.hpt-px .speed-controls .hud-btn{ min-width: 24px; padding: 2px 5px 4px; font-size: 12px; }

  /* Build: fills the height under the top bar; the card list scrolls inside it */
  #build-panel.hpt-px .build-modal{
    display: flex; flex-direction: column; padding: 10px 12px; width: min(440px, 92vw);
    max-height: calc(100vh - var(--hud-safe-top, 96px) - 12px) !important;
  }
  #build-panel.hpt-px .modal-header{ margin-bottom: 6px; align-items: center; flex: 0 0 auto; }
  #build-panel.hpt-px .modal-title{ font-size: 22px; }
  #build-panel.hpt-px #build-sub{ display: none; }            /* the active tab already says it */
  #build-panel.hpt-px .modal-min, #build-panel.hpt-px .modal-close{ min-width: 30px; min-height: 30px; padding: 4px 8px 6px; font-size: 13px; }
  #build-panel.hpt-px .build-scroll{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #build-panel.hpt-px .side-tabs{ flex: 0 0 auto; }
  #build-panel.hpt-px .side-tab{ font-size: 12px; padding: 4px 6px 5px; }
  #build-panel.hpt-px .side-tab.active{ padding: 6px 7px 7px; }
  #build-panel.hpt-px .side-content{ flex: 1 1 auto; min-height: 0; max-height: none; padding: 12px 8px 10px 12px; }
  #build-panel.hpt-px .build-grid{ gap: 12px; }
  #build-panel.hpt-px .px-card{ gap: 10px; padding: 8px 10px 8px 8px; }
  #build-panel.hpt-px .px-patch{ width: 96px; height: 72px; }
  #build-panel.hpt-px .build-card-name{ font-size: 15px; }
  #build-panel.hpt-px .build-card-desc{ font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #build-panel.hpt-px .build-hint{ display: none; }              /* Barnaby says the same thing */
  /* With a menu open, the Open Park sign, goal bar, tip card and Side quests tab
     sat on top of its cards (the menus live in the HUD layer, under them).
     Tuck them away until the menu closes. */
  /* Keep the wide menus clear of Barnaby (top right) by sitting them on the left. */
  :is(#zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal).overlay{ justify-content: flex-start !important; }
  :is(#zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal) > .card{ margin-left: 16px !important; margin-right: 0 !important; max-width: calc(100vw - 196px) !important; }

  /* Zones: shorter ground patches */
  #zones-panel.hpt-px .px-zone-patch{ height: 64px; }

  /* Barnaby is left exactly as he is (house rule). */

  /* Open Park sign, messages and the goal bar */
  body.pixel-art-standard #open-park-fab.open-park-fab{ bottom: 42px !important; padding: 8px 18px 12px; font-size: 18px; }
  body.pixel-art-standard #open-park-fab.open-park-fab::after{ height: 28px; }
  body.pixel-art-standard #toast-box{ bottom: 108px; }
  body.pixel-art-standard .hpt-goal-widget{ padding: 5px 12px 7px; }
  body.pixel-art-standard .hpt-goal-label{ font-size: 13px; }

  /* Barnaby's First Steps card never taller than the window */
  .tutorial-card.tutorial-card--centered{ max-height: calc(100vh - 24px); }
}

/* web.36: with a menu open, tuck the Open Park sign, goal bar, tip card and Side quests tab
   away on every screen size (they sat over the bottom of the menus). */
body.pixel-art-standard:has(:is(#build-panel, #zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal).visible) :is(#open-park-fab, .hpt-goal-widget, .starter-tip-card, #hpt-quest-card){ visibility: hidden !important; }

/* ================================================================ web.36: start screen, location
   screen, tutorial card and Barnaby's popups in the same pixel style. Barnaby's own picture is
   never touched (his avatar <img> keeps its size and shape); only the boards around him change.
   Scoped to body.pixel-art-standard, so ?art=original keeps the old look. */
body.pixel-art-standard :is(#start-screen, .tutorial-card, #hpt-chaos-popup){
  --px-frame: rgba(50, 78, 47, 0.94);
  --px-hi: #56713a; --px-shade: #23412f; --px-outline: #17332c; --px-btn: #41592e;
  --px-card: #f8e8d5; --px-card-hi: #fffaf0; --px-card-edge: #bc9d79; --px-ink: #462c1e; --px-ink-soft: #603a1f;
  --px-font: "Pixelify Sans", "Fredoka", monospace; --px-label: "Silkscreen", "Pixelify Sans", monospace;
  --px-frame-shadow: inset 4px 4px 0 var(--px-hi), inset -4px -4px 0 var(--px-shade),
    4px 0 0 0 var(--px-outline), -4px 0 0 0 var(--px-outline), 0 4px 0 0 var(--px-outline), 0 -4px 0 0 var(--px-outline),
    8px 12px 0 0 rgba(23, 18, 19, 0.30);
  --px-edge2: 2px 0 0 0 var(--px-outline), -2px 0 0 0 var(--px-outline), 0 2px 0 0 var(--px-outline), 0 -2px 0 0 var(--px-outline);
}

/* ---- start screen and location screen */
body.pixel-art-standard #start-screen .card{
  background: var(--px-frame); border: 0; border-radius: 0; color: #fffaf0;
  font-family: var(--px-font); box-shadow: var(--px-frame-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.pixel-art-standard #start-screen .splash-hero,
body.pixel-art-standard #start-screen .splash-hero-img{ border-radius: 0; }
body.pixel-art-standard #start-screen .splash-hero{ box-shadow: var(--px-edge2); }
body.pixel-art-standard #start-screen .splash-brand{ border-radius: 0; }
body.pixel-art-standard #start-screen :is(.title, .subtitle){
  font-family: var(--px-font); font-weight: 700; color: #fffaf0; text-shadow: 3px 3px 0 var(--px-outline);
}
body.pixel-art-standard #start-screen .subtitle{ font-size: 26px; }
body.pixel-art-standard #start-screen #start-title-version{ font-family: var(--px-label); text-shadow: none; letter-spacing: 1px; font-size: .5em !important; white-space: nowrap; }
body.pixel-art-standard #start-screen .big-btn{
  font-family: var(--px-label); font-size: 16px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
  color: var(--px-ink); background: var(--px-card-hi); border: 0; border-radius: 0;
  padding: 11px 18px 13px;
  box-shadow: inset 0 -4px 0 var(--px-card-edge), var(--px-edge2), 4px 6px 0 0 rgba(23, 18, 19, 0.30);
  transition: transform .08s;
}
body.pixel-art-standard #start-screen .big-btn.secondary{
  color: #fffaf0; background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -4px 0 var(--px-shade), var(--px-edge2), 4px 6px 0 0 rgba(23, 18, 19, 0.30);
}
body.pixel-art-standard #start-screen .big-btn:hover:not([disabled]){ filter: none; transform: translateY(-2px); }
body.pixel-art-standard #start-screen .big-btn:active:not([disabled]){ transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--px-card-edge), var(--px-edge2); }
body.pixel-art-standard #start-screen .big-btn[disabled]{ opacity: .55; filter: grayscale(.4); cursor: not-allowed; }
body.pixel-art-standard #start-screen .big-btn:focus-visible{ outline: 3px solid #ffd36b; outline-offset: 4px; }

body.pixel-art-standard #start-screen .policy-box{
  background: rgba(35, 65, 47, 0.94); border: 0; border-radius: 0; color: #fffaf0;
  box-shadow: inset 2px 2px 0 var(--px-outline), inset -2px -2px 0 var(--px-hi);
}
body.pixel-art-standard #start-screen .policy-title{
  font-family: var(--px-label); font-size: 13px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #ffd36b;
}
body.pixel-art-standard #start-screen :is(.policy-hint, .build-hint){ font-family: var(--px-font); color: #f8e8d5; opacity: 1; }
body.pixel-art-standard #start-screen .policy-item{ font-family: var(--px-font); border-radius: 0; }
body.pixel-art-standard #start-screen .text-input{
  box-sizing: border-box; max-width: 100%;
  font-family: var(--px-font); font-size: 16px; color: var(--px-ink); background: var(--px-card-hi);
  border: 0; border-radius: 0; padding: 8px 10px; box-shadow: inset 2px 2px 0 var(--px-card-edge), var(--px-edge2);
}
body.pixel-art-standard #start-screen input[type="radio"]{ accent-color: #56713a; }

/* site cards: pinned paper, the picked one outlined in yellow */
body.pixel-art-standard #start-screen .site-card{
  border-radius: 0; background: var(--px-card); color: var(--px-ink); border: 0;
  box-shadow: inset 0 -4px 0 var(--px-card-edge), var(--px-edge2), 4px 6px 0 0 rgba(23, 18, 19, 0.28);
  font-family: var(--px-font);
}
body.pixel-art-standard #start-screen .site-card:hover:not(:disabled){ transform: translateY(-2px); }
body.pixel-art-standard #start-screen .site-card.site-picked{
  background: var(--px-card-hi);
  box-shadow: inset 0 -4px 0 var(--px-card-edge), 0 0 0 4px #ffd36b, 0 0 0 6px var(--px-outline), 4px 8px 0 2px rgba(23, 18, 19, 0.28);
}
body.pixel-art-standard #start-screen .site-card.site-soon{ background: #d9cbb8; }
body.pixel-art-standard #start-screen .site-name{ font-family: var(--px-font); font-weight: 700; font-size: 15px; color: var(--px-ink); }
body.pixel-art-standard #start-screen .site-tag{ color: var(--px-ink-soft); opacity: 1; }
body.pixel-art-standard #start-screen .site-sub{ font-family: var(--px-label); font-weight: 400; font-size: 10px; letter-spacing: .5px; color: #324e2f; }
body.pixel-art-standard #start-screen .site-card.site-soon :is(.site-name, .site-tag){ opacity: .6; }
body.pixel-art-standard #start-screen .site-card.site-soon .site-sub{ color: #7a6d64; opacity: 1; }
body.pixel-art-standard #start-screen .site-card:focus-visible{ outline: 3px solid #ffd36b; outline-offset: 4px; }

/* ---- tutorial card (Barnaby's picture unchanged) */
body.pixel-art-standard .tutorial-card{
  background: var(--px-frame); border: 0; border-radius: 0; color: #fffaf0;
  font-family: var(--px-font); box-shadow: var(--px-frame-shadow); animation: none;
}
body.pixel-art-standard .tutorial-card__header{ border-bottom: 2px solid var(--px-shade); box-shadow: 0 2px 0 0 var(--px-hi); }
body.pixel-art-standard .tutorial-card__eyebrow{ font-family: var(--px-label); font-weight: 400; font-size: 11px; letter-spacing: 1px; color: #ffd36b; }
body.pixel-art-standard .tutorial-card__title{ font-family: var(--px-font); font-weight: 700; color: #fffaf0; text-shadow: 2px 2px 0 var(--px-outline); }
body.pixel-art-standard .tutorial-card__message{ font-family: var(--px-font); color: #fffaf0; }
body.pixel-art-standard .tutorial-card :is(.tutorial-card__next, .tutorial-card__skip, .tutorial-card__more){
  font-family: var(--px-label); font-weight: 400; letter-spacing: .5px; border: 0; border-radius: 0;
  color: #fffaf0; background: var(--px-btn);
  box-shadow: inset 0 2px 0 var(--px-hi), inset 0 -3px 0 var(--px-shade), var(--px-edge2);
}
body.pixel-art-standard .tutorial-card .tutorial-card__next.is-ready{
  color: var(--px-ink); background: var(--px-card-hi);
  box-shadow: inset 0 -3px 0 var(--px-card-edge), 0 0 0 2px var(--px-outline), 0 0 0 4px #ffd36b;
}
body.pixel-art-standard .tutorial-card :is(.tutorial-card__next, .tutorial-card__skip, .tutorial-card__more):focus-visible{ outline: 3px solid #ffd36b; outline-offset: 3px; }

/* ---- Barnaby's event popups (his head unchanged) */
body.pixel-art-standard #hpt-chaos-popup{
  background: var(--px-frame); border: 0; border-radius: 0; color: #fffaf0;
  box-shadow: inset 3px 3px 0 var(--px-hi), inset -3px -3px 0 var(--px-shade), var(--px-edge2), 6px 8px 0 0 rgba(23, 18, 19, 0.30);
}
body.pixel-art-standard #hpt-chaos-popup .hpt-chaos-text{ font-family: var(--px-font); font-size: 14px; color: #fffaf0; }

/* ---- inspector rows added by the add-on scripts (bus stop, cycle hire, Punch and Judy,
   statues, blue-badge bays, entrance grades, flags): an inset tile with a stamped heading */
body.pixel-art-standard .gi :is(#bi-bus, #bi-cycle, #bi-pj, #bi-statue, #bi-bluebadge, #bi-extra, #bi-flag){
  margin-top: 10px !important; padding: 6px 8px 7px; font-family: "Pixelify Sans", monospace; color: #fcf3e2;
  background: rgba(23, 51, 44, 0.55); box-shadow: inset 2px 2px 0 #17332c, inset -2px -2px 0 #3b5a35;
}
body.pixel-art-standard .gi :is(#bi-bus, #bi-cycle, #bi-pj, #bi-statue, #bi-bluebadge) > div:first-child{
  font: 400 11px/1.3 "Silkscreen", monospace !important; letter-spacing: .5px; text-transform: uppercase; color: #ffd36b; margin-bottom: 4px !important;
}
body.pixel-art-standard .gi :is(#bi-bus, #bi-cycle, #bi-pj, #bi-statue, #bi-bluebadge) b{ color: #ffd36b; font-weight: 700; }
body.pixel-art-standard .gi :is(#bi-bus, #bi-cycle, #bi-pj, #bi-statue, #bi-bluebadge) div[style*="opacity:.75"]{ opacity: 1 !important; color: #d6e4c4; }
body.pixel-art-standard .gi :is(#bi-bus, #bi-cycle, #bi-pj, #bi-statue, #bi-bluebadge) button{
  padding: 4px 9px 6px; border: 0; border-radius: 0; font: 500 12px "Pixelify Sans", monospace; color: #fffaf0; background: #41592e;
  box-shadow: inset 0 2px 0 #56713a, inset 0 -3px 0 #23412f, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c;
}

/* ---- end screens: council closure (#gameover-screen) and the victory board (#victory-screen).
   Their markup carries inline styles, so these rules use !important on the board only. */
body.pixel-art-standard :is(#gameover-screen, #victory-screen){ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.pixel-art-standard :is(#gameover-screen, #victory-screen) .card{
  background: rgba(50, 78, 47, 0.96) !important; border: 0 !important; border-radius: 0 !important; color: #fffaf0 !important;
  font-family: "Pixelify Sans", "Fredoka", monospace !important;
  box-shadow: inset 4px 4px 0 #56713a, inset -4px -4px 0 #23412f, 4px 0 0 0 #17332c, -4px 0 0 0 #17332c, 0 4px 0 0 #17332c, 0 -4px 0 0 #17332c, 8px 12px 0 0 rgba(23,18,19,.35) !important;
}
body.pixel-art-standard #gameover-title{ font-family: "Pixelify Sans", monospace; text-shadow: 3px 3px 0 #17332c; }
body.pixel-art-standard :is(#gameover-subtitle, #gameover-feedback){ color: #f8e8d5 !important; }
body.pixel-art-standard :is(#gameover-screen, #victory-screen) :is(a#gameover-discord-link, .big-btn, .modal-btn){
  border-radius: 0 !important; border: 0 !important; font-family: "Silkscreen", monospace !important; font-weight: 400 !important;
  letter-spacing: 1px; text-transform: uppercase; color: #462c1e !important; background: #fffaf0 !important;
  box-shadow: inset 0 -4px 0 #bc9d79, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c, 4px 6px 0 0 rgba(23,18,19,.3) !important;
}
body.pixel-art-standard #victory-screen button#btn-victory-newgame.modal-btn{
  color: #fffaf0 !important; background: #41592e !important;
  box-shadow: inset 0 2px 0 #56713a, inset 0 -4px 0 #23412f, 2px 0 0 0 #17332c, -2px 0 0 0 #17332c, 0 2px 0 0 #17332c, 0 -2px 0 0 #17332c, 4px 6px 0 0 rgba(23,18,19,.3) !important;
}
body.pixel-art-standard #victory-screen .modal-title{ font-family: "Pixelify Sans", monospace; font-size: 26px !important; text-shadow: 3px 3px 0 #17332c; }

/* ===================================================================================
   web.37: phones (portrait up to 699px wide, or landscape up to 520px tall).
   The top bar was up to 316px tall on a phone (half the screen in portrait, 58% in
   landscape). Now: one strip of the four numbers that matter, and one row of buttons
   that scrolls sideways (menus first). Bottom-corner pieces are smaller and stacked so
   they no longer sit on top of each other. Barnaby himself is unchanged.
   =================================================================================== */
@media (max-width: 699px), (max-height: 520px) and (max-width: 1100px){
  .hud-row.hpt-px{ top: 4px !important; left: 4px !important; right: 4px !important; width: auto !important; max-width: none !important;
    transform: none !important; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 0 !important; }
  .hud-row.hpt-px #top-bar{ flex-wrap: nowrap; justify-content: space-around; gap: 0; padding: 2px 4px !important; min-height: 0; }
  .hud-row.hpt-px .hud-logo,
  .hud-row.hpt-px #top-bar .v-sep,
  .hud-row.hpt-px #hpt-save-indicator,
  .hud-row.hpt-px #top-bar .stat-box:has(#hud-parkname),
  .hud-row.hpt-px #top-bar .stat-box:has(#hud-weather){ display: none !important; }
  .hud-row.hpt-px .stat-box{ padding: 2px 4px 3px; min-width: 0; text-align: center; }
  .hud-row.hpt-px .stat-label{ font-size: 7px; margin-bottom: 0; }
  .hud-row.hpt-px .stat-value{ font-size: 14px; }

  /* one row of buttons, swipe sideways for the rest; the menus come first */
  .hud-row.hpt-px #controls-bar{ flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden;
    gap: 8px; padding: 3px 3px 4px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .hud-row.hpt-px #controls-bar::-webkit-scrollbar{ display: none; }
  .hud-row.hpt-px #controls-bar .v-sep{ display: none; }
  .hud-row.hpt-px #controls-bar .btn-group{ flex-wrap: nowrap; flex: 0 0 auto; gap: 5px; }
  .hud-row.hpt-px #controls-bar .btn-group:has(#btn-tab-build){ order: -2; }
  .hud-row.hpt-px #controls-bar .btn-group.settings{ order: -1; }
  .hud-row.hpt-px .hud-btn{ min-height: 34px; min-width: 34px; padding: 3px 8px 5px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
  .hud-row.hpt-px .hud-tab{ font-size: 14px; padding: 3px 10px 5px; }
  .hud-row.hpt-px .speed-controls .hud-btn{ min-width: 34px; padding: 3px 4px 5px; font-size: 12px; }
  /* pop-ups can't live inside a sideways scroller: pin them under the bar */
  .hud-row.hpt-px .hud-menu, .hud-row.hpt-px .hud-pop{ position: fixed !important; top: var(--hud-safe-top) !important; right: 6px !important; left: auto !important;
    max-height: calc(100vh - var(--hud-safe-top) - 10px); overflow-y: auto; z-index: 5000; }
  .hud-row.hpt-px #hpt-grade-chip, .hud-row.hpt-px #hpt-season-chip{ display: none !important; }

  /* bottom corner: Open Park sign, goal bar, tip and messages */
  body.pixel-art-standard #open-park-fab.open-park-fab{ bottom: 26px !important; left: 8px !important; padding: 6px 12px 9px; font-size: 15px; }
  body.pixel-art-standard #open-park-fab.open-park-fab::after{ height: 20px; }
  .hpt-goal-widget, #hpt-goal-widget{ left: auto !important; right: 6px !important; bottom: 8px !important; transform: none !important;
    width: min(260px, calc(100vw - 140px)) !important; max-width: none !important; font-size: 11px; }
  .starter-tip-card{ display: none !important; }   /* Barnaby says the same thing */
  #toast-box{ bottom: 64px !important; left: 6px !important; right: 6px !important; max-width: none !important; }
  .toast-item{ max-width: 100% !important; font-size: 12px !important; }
  .helper-bubble{ max-width: min(320px, calc(100vw - 24px)); }

  /* tall cards fit the screen and scroll inside */
  .tutorial-card{ max-height: calc(100vh - 16px) !important; overflow-y: auto !important; }
  .tutorial-card:not(.tutorial-card--centered){ max-height: calc(100vh - var(--hud-safe-top) - 8px) !important; }
  .gi{ max-width: calc(100vw - 12px) !important; }
}
/* phones: menus open as a sheet from just under the top bar to the bottom of the screen */
@media (max-width: 699px), (max-height: 520px) and (max-width: 1100px){
  :is(#build-panel, #zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal).overlay{ padding-top: 0 !important; }
  :is(#build-panel, #zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal) .card{
    /* portrait: leave Barnaby's corner and bubble clear above the sheet */
    top: max(calc(var(--hud-safe-top) + 2px), 40vh) !important; bottom: 0 !important; height: auto !important; max-height: none !important;
    margin: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
  :is(#build-panel, #zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal) :is(.build-scroll, .modal-body, .zones-body){ max-height: none !important; }
  .build-modal{ margin-top: 0 !important; max-height: none !important; }
  #zones-panel.hpt-px .zones-modal{ position: fixed !important; left: 0; right: 0; width: auto !important; overflow-y: auto !important; }
  /* Build: the card list scrolls inside the sheet, smaller cards */
  #build-panel.hpt-px .build-modal{ display: flex; flex-direction: column; width: auto !important; padding: 8px 10px 6px; overflow: hidden !important; }
  #build-panel.hpt-px .modal-header{ margin-bottom: 6px; align-items: center; flex: 0 0 auto; }
  #build-panel.hpt-px .modal-title{ font-size: 20px; }
  #build-panel.hpt-px #build-sub{ display: none; }
  #build-panel.hpt-px .build-scroll{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #build-panel.hpt-px .side-tabs{ flex: 0 0 auto; }
  #build-panel.hpt-px .side-tab{ font-size: 12px; padding: 4px 6px 5px; }
  #build-panel.hpt-px .side-content{ flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; padding: 10px 6px 10px 8px; overscroll-behavior: contain; }
  #build-panel.hpt-px .build-grid{ gap: 10px; }
  #build-panel.hpt-px .px-card{ gap: 8px; padding: 6px 8px 6px 6px; }
  #build-panel.hpt-px .px-patch{ width: 84px; height: 66px; }
  #build-panel.hpt-px .px-card.px-card-wide .px-patch{ height: 104px; }
  #build-panel.hpt-px .build-card-name{ font-size: 15px; }
  #build-panel.hpt-px .build-card-desc{ font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #build-panel.hpt-px .build-hint{ display: none; }
}
/* landscape phone: numbers and buttons share one row */
@media (max-height: 520px) and (min-width: 560px) and (max-width: 1100px){
  .hud-row.hpt-px{ flex-direction: row; align-items: center; }
  .hud-row.hpt-px #top-bar{ flex: 0 0 auto; }
  .hud-row.hpt-px #controls-bar{ flex: 1 1 auto; min-width: 0; }
  :is(#build-panel, #zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal) .card{ top: calc(var(--hud-safe-top) + 2px) !important; }
  #build-panel.hpt-px .build-grid{ grid-template-columns: 1fr 1fr; }
  /* keep menus clear of Barnaby's corner (he is left exactly as he is) */
  :is(#build-panel, #zones-panel, #manage-modal, #shopping-modal, #bank-modal, #pricing-modal) .card{ left: 0 !important; right: 150px !important; width: auto !important; max-width: none !important; }
}

/* web.40: once the park can open, the Open Park sign stands beside the Build or Zones menu
   instead of hiding under it (the last step is often a pipe laid in Build > Services). */
@media (min-width: 1000px) {
  body.pixel-art-standard:has(#build-panel.visible, #zones-panel.visible) #open-park-fab.open-park-fab:not(.disabled){
    visibility: visible !important; left: calc(min(480px, 92vw) + 48px) !important;
  }
}

/* web.43: dialog paper must hide the map and panels beneath it. */
:is(#manage-modal,#bank-modal,#shopping-modal,#pricing-modal).hpt-px .modal-box,
:is(#manage-modal,#bank-modal,#shopping-modal,#pricing-modal).hpt-px .modal-frame,
:is(#manage-modal,#bank-modal,#shopping-modal,#pricing-modal).hpt-px > .card{background:#324e2f !important;}
#hpt-xray{top:calc(var(--hud-safe-top,120px) + 8px) !important;z-index:5001 !important;}
#hpt-services-done{top:calc(var(--hud-safe-top,120px) + 48px) !important;}

/* web.50: pitch inspector, priced upgrade buttons and illustrated collection stamps. */
#marked-pitch-panel{position:fixed;right:18px;bottom:70px;z-index:10020;box-sizing:border-box;width:340px;max-width:calc(100vw - 28px);max-height:calc(100dvh - var(--hud-safe-top,130px) - 90px);overflow-y:auto;padding:14px;color:#fcf3e2;background:#324e2f;font:14px/1.35 "Pixelify Sans",monospace;border:0;border-radius:0;box-shadow:inset 3px 3px #56713a,inset -3px -3px #23412f,3px 0 #17332c,-3px 0 #17332c,0 3px #17332c,0 -3px #17332c,6px 7px #17332c66;scrollbar-width:thin;scrollbar-color:#56713a #23412f}
#marked-pitch-panel .pitch-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#marked-pitch-panel h3{font-size:22px;margin:0;color:#ffe0a1}
#marked-pitch-panel h4{margin:14px 0 8px;font-size:17px;color:#ffe0a1}
#marked-pitch-panel p{margin:7px 0}
#marked-pitch-panel small{font-size:12px;color:#eedecd}
#marked-pitch-panel .pitch-status{padding:8px;background:#17332c;color:#f4df9e}
#marked-pitch-panel .pitch-price{color:#ffe0a1}
#marked-pitch-panel details{margin:8px 0;padding:7px;background:#23412f}
#marked-pitch-panel summary{cursor:pointer;color:#ffe0a1}
#marked-pitch-panel fieldset{min-width:0;border:1px solid #718756;margin:10px 0;padding:8px}
#marked-pitch-panel legend{color:#fff0c9;padding:0 4px}
#marked-pitch-panel .pitch-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
#marked-pitch-panel button,.book-find,#hpt-visitor-notice{border:0;border-radius:0;font:14px/1.2 "Pixelify Sans",monospace;padding:8px;min-height:40px;color:#462c1e;background:#fcf3e2;cursor:pointer;box-shadow:inset 0 -3px #bc9d79,2px 0 #17332c,-2px 0 #17332c,0 2px #17332c,0 -2px #17332c}
#marked-pitch-panel button small{display:block;color:#705235;margin-top:3px}
#marked-pitch-panel button:hover:not(:disabled),.book-find:hover,#hpt-visitor-notice:hover{background:#ffe0a1}
#marked-pitch-panel button:disabled{opacity:.5;cursor:default}
#marked-pitch-panel button:focus-visible,.book-find:focus-visible,#hpt-visitor-notice:focus-visible{outline:3px solid #ffd36b;outline-offset:3px}
#marked-pitch-panel #pitch-panel-remove{width:100%;background:#ae3f38;color:#fff1dc;margin:10px 0 3px;box-shadow:inset 0 -3px #7c2929}
#marked-pitch-panel #pitch-panel-close{min-width:40px}
#hpt-visitor-notice{position:fixed;left:16px;top:calc(var(--hud-safe-top,130px) + 12px);z-index:95;max-width:calc(100vw - 32px);color:#ffe3a3;background:#324e2f;box-shadow:inset 0 2px #56713a,inset 0 -3px #23412f,2px 0 #17332c,-2px 0 #17332c,0 2px #17332c,0 -2px #17332c}
#hpt-visitor-notice:hover{color:#462c1e}
body:has(:is(#build-panel,#zones-panel,#manage-modal,#shopping-modal,#bank-modal,#pricing-modal).visible) #hpt-visitor-notice{visibility:hidden;pointer-events:none}
#manage-view-visitor-book .book-stamp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:10px 3px}
#manage-view-visitor-book .book-stamp{box-sizing:border-box;min-width:0;margin:0;padding:8px 6px;text-align:center;background:#f8e8d5;color:#462c1e;border:3px dashed #a79c75;box-shadow:2px 3px #17332c}
#manage-view-visitor-book .book-stamp img{display:block;width:96px;height:80px;max-width:100%;object-fit:contain;margin:0 auto;image-rendering:pixelated}
#manage-view-visitor-book .book-stamp figcaption{font:700 15px/1.2 "Pixelify Sans",monospace;min-height:36px}
#manage-view-visitor-book .book-stamp small{display:block;font:12px/1.25 "Pixelify Sans",monospace;margin-top:4px}
#manage-view-visitor-book .book-stamp.is-collected{border-color:#56713a}
#manage-view-visitor-book .book-stamp.is-empty{background:#23412f;color:#c3d0ac;border-color:#63774d}
#manage-view-visitor-book .book-stamp.is-empty img{filter:brightness(0);opacity:.38}
#manage-view-visitor-book .book-award{display:block;font:38px/1.5 "Pixelify Sans",monospace;color:#d09b36}
#manage-view-visitor-book .award-silver .book-award{color:#7b8b93}
#manage-view-visitor-book .award-bronze .book-award{color:#a45b35}
#manage-view-visitor-book .book-help,#manage-view-visitor-book .book-reward{font:14px/1.4 "Pixelify Sans",monospace!important;text-transform:none!important}
#manage-view-visitor-book .book-reward{color:#ffe0a1!important}
@media(max-width:600px){
 #marked-pitch-panel{right:14px;bottom:52px;width:340px;max-height:calc(100dvh - var(--hud-safe-top,130px) - 70px)}
 #manage-view-visitor-book .book-stamp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

body.pixel-art-standard #hpt-savings-pin{border-radius:0!important;font:12px "Pixelify Sans",monospace!important}