/* ===========================================================================
   PalletPunk — custom styles
   ---------------------------------------------------------------------------
   This is the hand-written stylesheet. Add and edit rules HERE.

   Loaded AFTER vendor.css, so anything in this file wins ties against the
   Tailwind build.

   IMPORTANT — vendor.css is a pre-built Tailwind file, not a live compiler.
   Only utility classes that already appear in vendor.css exist at runtime.
   If you add a class in the markup that was never compiled (e.g. `z-20`,
   `border-dashed`), it will silently do nothing. When that happens, either
   write a real rule in this file or set the property inline via `style`.

   Layout reference:
     #wrap   full-page flex container, centres the board
     #stage  positioned parent of the canvas + all overlays (container query root)
     #game   the <canvas>, internal resolution 980 x 660
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Board sizing
   ------------------------------------------------------------------------ */

/* #stage is the container-query root, so children can size with cqw units. */
#stage {
  container-type: inline-size;
}

/* Fill the screen on big displays: grow to the viewport, bounded by height so
   the 980x660 board always fits without scrolling. Portrait is excluded — it
   has its own sizing further down / in vendor.css. */
#wrap:not(.orient-portrait) #stage {
  max-width: none;
  width: min(100%, calc((100dvh - 2.25rem) * 980 / 660));
}

/* Fallback for browsers without dvh units. */
@supports not (height: 100dvh) {
  #wrap:not(.orient-portrait) #stage {
    width: min(100%, calc((100vh - 2.25rem) * 980 / 660));
  }
}


/* ---------------------------------------------------------------------------
   2. HUD buttons (Upgrades / Pause)
   These are DOM elements sitting over the canvas, so they must scale with the
   board or they look tiny on a large screen. cqw = 1% of #stage width.
   ------------------------------------------------------------------------ */

#shop-hud-btn,
#pause-hud-btn {
  font-size: clamp(10px, 1.75cqw, 40px);
  line-height: 1;
}

#shop-hud-btn svg,
#pause-hud-btn svg {
  width: 1.25em;
  height: 1.25em;
}

/* Touch screens: give Pause a finger-sized tap area without making the icon
   bigger. The negative margin keeps the icon exactly where it was. */
@media (pointer: coarse) {
  #pause-hud-btn {
    padding: 14px;
    margin-right: -14px;
  }
}


/* ---------------------------------------------------------------------------
   3. Yard Shop popup — a square panel centred over the board
   ------------------------------------------------------------------------ */

.pp-shop-panel {
  aspect-ratio: 1 / 1;
  height: min(92%, max(30rem, 30cqw));   /* landscape: bounded by board height */
  max-width: 92%;
}

/* Portrait: the board is tall and narrow, so bound by width instead. */
#wrap.orient-portrait .pp-shop-panel {
  height: auto;
  width: min(92%, max(30rem, 60cqw));
  max-height: 92%;
  max-width: none;
}


/* ---------------------------------------------------------------------------
   4. On-screen arrow pad (touch devices)
   --pp-dc is one cell of the 3x3 grid. The 44px floor is the minimum
   comfortable touch target.
   ------------------------------------------------------------------------ */

#dpad {
  --pp-dc: clamp(44px, 6.4cqw, 52px);
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(3, var(--pp-dc));
  grid-template-rows: repeat(3, var(--pp-dc));
  gap: 4px;
  pointer-events: none;   /* only the buttons themselves are tappable */
  touch-action: none;
}

.pp-dbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  background: rgba(8, 10, 14, 0.55);
  border: 2px solid rgba(181, 138, 75, 0.5);
  color: var(--haz-yellow);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: background 0.08s ease, transform 0.08s ease, border-color 0.08s ease;
}

.pp-dbtn:hover {
  background: rgba(8, 10, 14, 0.72);
}

/* .pp-on is toggled from JS while a direction is held. */
.pp-dbtn.pp-on,
.pp-dbtn:active {
  background: rgba(245, 180, 0, 0.55);
  border-color: var(--haz-yellow);
  transform: scale(0.93);
}

.pp-dbtn svg {
  display: block;
  width: 62%;
  height: 62%;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   5. Static page chrome (kept out of index.html so a strict
      Content-Security-Policy can forbid inline styles)
   ------------------------------------------------------------------------ */

/* Visually hidden but readable by screen readers and search engines. */
.pp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The <noscript> fallback card. */
.pp-noscript {
  max-width: 640px;
  margin: 48px auto;
  padding: 24px;
  font-family: system-ui, -apple-system, sans-serif;
  color: #eef1f6;
  background: #14171d;
  border: 2px solid #b58a4b;
  border-radius: 16px;
  line-height: 1.5;
}

.pp-noscript h2 {
  color: #f5b400;
  margin: 0 0 8px;
}

.pp-noscript p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   6. What's New page (version history)
   Opened from the footer and the About page. Each release sits on a brass
   rail like a line on a shipping manifest; the newest one gets a filled
   hazard-yellow crate marker. The entries themselves live in app.js
   (search for ppHistory).
   ------------------------------------------------------------------------ */

.pp-hist {
  margin-top: 1.25rem;
}

.pp-hist-rel {
  position: relative;
  padding: 0 0 1.25rem 1.75rem;
}

.pp-hist-rel:last-child {
  padding-bottom: 0;
}

/* The rail running down to the next release. */
.pp-hist-rel::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1.1rem;
  bottom: 0;
  width: 2px;
  background: var(--brass-dark);
}

.pp-hist-rel:last-child::before {
  display: none;
}

/* The crate marker: filled for the current release, outlined for older ones. */
.pp-hist-rel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--brass);
  border-radius: 2px;
  background: #16120a;
}

.pp-hist-rel:first-child::after {
  background: var(--haz-yellow);
  border-color: #7a5a12;
}

.pp-hist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.pp-hist-ver {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--haz-yellow-hi);
}

.pp-hist-date {
  font-size: 11px;
  color: rgba(253, 230, 138, 0.5);
  white-space: nowrap;
}

.pp-hist-title {
  margin: 0.1rem 0 0;
  font-weight: 700;
  color: #fef3c7;
}

.pp-hist-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.pp-hist-list li {
  position: relative;
  padding-left: 1rem;
}

.pp-hist-list li + li {
  margin-top: 0.45rem;
}

/* Small square bullets, like crate labels. */
.pp-hist-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--brass);
}

/* Footer links (About / Terms / Cookie Settings / What's New): wrap onto a
   second line on narrow phones instead of running off the screen. */
.pp-foot {
  flex-wrap: wrap;
  row-gap: 2px;
  padding: 0 0.5rem;
}