/* Product Data Thunderdome 3 — shared wasteland theme.
   Palette sampled from the game art: rust, fire, bone, char. Black is the
   default ground everywhere, per spec. Font is self-hosted: a captive portal
   must never be able to turn the projector into Times New Roman. */

@font-face {
  font-family: 'PressStart';
  src: url('/fonts/PressStart2P.ttf') format('truetype');
  font-display: block;
}

:root {
  --black:   #000000;
  --char:    #140d09;
  --char-2:  #241811;
  --rust:    #c1440e;
  --rust-lo: #8b3208;
  --fire:    #f5a623;
  --fire-hi: #ffd166;
  --bone:    #efe4cf;
  --bone-dim:#a89880;
  --blood:   #8b1a10;
  --toxic:   #7fb800;

  --pixel: 'PressStart', ui-monospace, 'Courier New', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--pixel);
  /* Pixel art must never be smoothed. */
  image-rendering: pixelated;
}

img { image-rendering: pixelated; }

/* Headline treatment: bone text with a hard char shadow, like the signage. */
.pix {
  font-family: var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 3px 3px 0 var(--char), 6px 6px 0 rgba(0,0,0,.55);
}

.fire   { color: var(--fire); }
.rust   { color: var(--rust); }
.bone   { color: var(--bone); }
.dim    { color: var(--bone-dim); }
.danger { color: var(--blood); }

/* Riveted metal panel, used for cards on both screens. */
.panel {
  background: linear-gradient(180deg, var(--char-2), var(--char));
  border: 3px solid var(--rust-lo);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), 0 6px 0 rgba(0,0,0,.5);
  position: relative;
}
.panel::before, .panel::after {
  content: '';
  position: absolute; top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bone-dim); opacity: .5;
}
.panel::before { left: 6px; }
.panel::after  { right: 6px; }

/* Chunky wasteland button. */
.btn {
  font-family: var(--pixel);
  text-transform: uppercase;
  color: var(--black);
  background: linear-gradient(180deg, var(--fire-hi), var(--fire));
  border: 3px solid var(--char);
  box-shadow: 0 5px 0 var(--rust-lo);
  cursor: pointer;
  transition: transform .05s ease, box-shadow .05s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rust-lo); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: 0 5px 0 #333; }
.btn.ghost {
  background: transparent; color: var(--fire);
  border-color: var(--rust-lo); box-shadow: 0 5px 0 #1a1008;
}
.btn.danger-btn { background: linear-gradient(180deg, #d8402f, var(--blood)); color: var(--bone); }

/* Numeric input. type=text + inputmode so comma-formatted values survive. */
.numin {
  font-family: var(--pixel);
  background: var(--black);
  color: var(--fire-hi);
  border: 3px solid var(--rust-lo);
  outline: none;
  width: 100%;
  /* 16px minimum or iOS zooms the whole page on focus. */
  font-size: 18px;
}
.numin:focus { border-color: var(--fire); }

@keyframes shake {
  0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)}
  50%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,-2px)}
}
.shake { animation: shake .4s ease-in-out; }

@keyframes fadein { from{opacity:0} to{opacity:1} }
.fadein { animation: fadein 1.1s ease-out; }