/* Greedy Dentist — 8-bit chrome. NES-ish palette, hard pixel borders. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/press-start-2p.woff2') format('woff2');
  font-display: swap;
}

/* Color/spacing tokens live in tokens.css (loaded first).
   Fallbacks here only cover pages that skip the token sheet. */
:root {
  --bg: #1a1c2c;
  --panel: #23273c;
  --panel2: #2f3450;
  --ink: #f4f4f4;
  --dim: #9aa0c3;
  --gold: #ffd93b;
  --green: #37b24d;
  --red: #f03e3e;
  --blue: #4dabf7;
  --px: 4px; /* the "pixel" unit for borders/shadows */
  --font: 'Silkscreen', 'Press Start 2P', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.7;
  image-rendering: pixelated;
}

h1, h2, h3 { line-height: 1.4; }

.pixel-box {
  background: var(--panel);
  border: var(--px) solid var(--ink);
  box-shadow: var(--px) var(--px) 0 #000;
  padding: 16px;
}

.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 12px;
  color: #000;
  background: var(--gold);
  border: var(--px) solid var(--ink);
  box-shadow: var(--px) var(--px) 0 #000;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.btn.secondary { background: var(--panel2); color: var(--ink); }
.btn.danger { background: var(--red); color: #fff; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

input[type="text"], input[type="password"] {
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink);
  background: #12131f;
  border: var(--px) solid var(--ink);
  padding: 10px;
  width: 100%;
}
input:focus { outline: var(--px) solid var(--gold); }

.err { color: var(--red); min-height: 1.7em; }
.demands { color: var(--gold); font-size: 9px; }
.center { text-align: center; }
.dim { color: var(--dim); }

/* Blinking "PRESS START" */
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.blink { animation: blink 1.2s steps(1) infinite; }

/* Speech bubble with a stepped pixel tail */
.bubble {
  position: relative;
  background: #fff;
  color: #111;
  border: var(--px) solid #000;
  padding: 12px;
  font-size: 11px;
  line-height: 1.6;
  min-height: 64px;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -16px;
  border: 8px solid transparent;
  border-top-color: #000;
}
.bubble.mood-annoyed { background: #fff3bf; }
.bubble.mood-angry { background: #ffc9c9; }
.bubble.mood-happy { background: #d3f9d8; }

/* Patience bar */
.patience {
  height: 14px;
  background: #12131f;
  border: 3px solid var(--ink);
}
.patience .fill {
  height: 100%;
  background: var(--green);
  width: 100%;
  transition: width 0.25s linear;
}
.patience.warn .fill { background: var(--gold); }
.patience.crit .fill { background: var(--red); }

/* Small-screen gate */
#screen-gate { display: none; }
@media (max-width: 899px) {
  #screen-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
  }
  }

/* Modal overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.overlay.hidden { display: none; }
.hidden { display: none !important; }

table.scores { border-collapse: collapse; width: 100%; }
table.scores th, table.scores td {
  border: 3px solid var(--panel2);
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
}
table.scores th { background: var(--panel2); color: var(--gold); }
table.scores tr.me td { color: var(--gold); }