/* ==========================================================================
   THE CASE FILE — the shared UI language for every in-game screen.
   Character select and the pause menu both build from these; anything added
   later should too, so the game stops accumulating one-off panel styles.

   Charcoal panels, label/value rows, evidence tags, rubber stamps. The
   accent marks state — selected, active, live, yours — and nothing else:
   not a heading, not a rule, not a readout. Amber is caution and
   destruction alone.

   EVERY COLOUR AND FACE HERE COMES FROM css/palette.css. These --cf- names
   stay because a hundred rules and a dozen modules read them; they are
   aliases now, not values. Change the accent in one place, in that file,
   and it reaches this system, the front door, the creator, the HUD, the
   pause sheet and the manual together.
   ========================================================================== */

:root {
  --cf-bg:        var(--gr-bg);
  --cf-card:      var(--gr-panel);
  --cf-card-hi:   var(--gr-panel-hi);
  --cf-edge:      var(--gr-line-2);
  --cf-edge-lit:  var(--gr-line-3);
  --cf-ink:       var(--gr-ink);
  --cf-ink-dim:   var(--gr-ink-2);
  --cf-ink-faint: var(--gr-ink-3);
  --cf-accent:    var(--gr-accent);
  --cf-accent-dk: var(--gr-accent-dk);
  --cf-warn:      var(--gr-caution);
  --cf-danger:    var(--gr-danger);
  --cf-mono:      var(--gr-data);
  /* the pixel face was three literal 'Anton' stacks that never resolved —
     anton.woff2 is preloaded and has no @font-face anywhere, so every one
     of them has been falling back to Arial Narrow. One token, one face. */
  --cf-display:   var(--gr-display);
  --cf-body:      var(--gr-body);

  /* translucent forms of the ground. HUD panels sit over a live 3D scene,
     so they read better letting a little of the city through than they do
     as opaque plates. */
  --cf-card-a:  var(--gr-panel-a);
  --cf-card-a6: var(--gr-panel-a6);
}

/* ---- the card itself: a file folder, with a tab ---- */
.cf-card {
  position: relative;
  background: var(--cf-card);
  border: 1px solid var(--cf-edge);
  border-radius: 2px;
  font-family: var(--cf-mono);
}
/* the punched holes down the left edge of a filed sheet */
.cf-card.cf-punched::before {
  content: ''; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 4px;
  background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,.55) 1.8px, transparent 2px);
  background-size: 4px 18px; opacity: .8; pointer-events: none;
}
.cf-tab {
  display: inline-block;
  background: var(--cf-card-hi);
  border: 1px solid var(--cf-edge);
  border-bottom: none;
  color: var(--cf-ink-dim);
  font: 700 9px var(--cf-mono);
  letter-spacing: .22em;
  padding: 4px 10px 3px;
  border-radius: 2px 2px 0 0;
}
.cf-rule { height: 1px; background: var(--cf-edge); margin: 8px 0; }
.cf-rule.cf-lit { background: linear-gradient(90deg, var(--cf-accent-dk), transparent); }

/* ---- label / value rows: the body of every sheet ---- */
.cf-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 3px 0;
  border-bottom: 1px dotted rgba(255,255,255,.06);
}
.cf-row:last-child { border-bottom: none; }
.cf-row .cf-l {
  font: 600 9px var(--cf-mono); letter-spacing: .16em;
  color: var(--cf-ink-faint); white-space: nowrap;
}
.cf-row .cf-v {
  font: 700 12px var(--cf-mono); letter-spacing: .04em;
  color: var(--cf-ink); text-align: right;
}

/* ---- evidence tag: a bar with a value, used for stats and progress ---- */
.cf-bar { display: block; margin: 5px 0 7px; }
.cf-bar .cf-bl {
  display: flex; justify-content: space-between;
  font: 600 8.5px var(--cf-mono); letter-spacing: .16em;
  color: var(--cf-ink-faint); margin-bottom: 3px;
}
.cf-bar .cf-bt {
  /* display:block is load-bearing. These are <span>s at the call site, and
     height, overflow and an abspos child all no-op on an inline box — which
     is why the bars rendered as nothing at all, whatever colour they were. */
  display: block;
  position: relative; height: 9px; background: #080b07;
  border: 1px solid var(--cf-edge); border-radius: 1px; overflow: hidden;
}
.cf-bar .cf-bf {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--cf-accent-dk), var(--cf-accent));
  box-shadow: 0 0 6px var(--gr-accent-a);
  /* notches: wide enough to read as a measured tag, not so fine they eat
     the fill at card width */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 7px);
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 7px);
}

/* ---- buttons: bordered panels with a left marker. Never solid fills. ---- */
.cf-btn {
  position: relative; display: flex; align-items: center; gap: 9px;
  width: 100%; cursor: pointer; text-align: left;
  background: var(--cf-card); color: var(--cf-ink);
  border: 1px solid var(--cf-edge); border-left: 3px solid var(--cf-edge-lit);
  border-radius: 2px; padding: 10px 12px;
  font: 700 12px var(--cf-mono); letter-spacing: .12em;
  transition: background .13s, border-color .13s, transform .13s;
}
.cf-btn:hover { background: var(--cf-card-hi); border-color: var(--cf-edge-lit); transform: translateX(2px); }
.cf-btn.cf-pri { border-left-color: var(--cf-accent); color: #f2fbf2; }
.cf-btn.cf-pri:hover { background: var(--gr-accent-a); border-color: var(--cf-accent-dk); }
.cf-btn.cf-warn { border-left-color: var(--cf-warn); }
.cf-btn.cf-warn:hover { background: rgba(224,163,60,.09); border-color: var(--cf-warn); }

/* ---- the stamp: rotated, hollow, ink-bled. Marks state, not decoration. --- */
.cf-stamp {
  position: absolute; pointer-events: none;
  border: 2.5px solid var(--cf-accent);
  color: var(--cf-accent);
  font: 800 12px var(--cf-mono); letter-spacing: .18em;
  padding: 3px 9px 2px;
  transform: rotate(-11deg);
  opacity: .92;
  border-radius: 2px;
  /* a stamp is never crisp — the ink skips */
  box-shadow: inset 0 0 0 1px var(--gr-accent-a);
  text-shadow: 0 0 6px var(--gr-accent-a);
}
.cf-stamp.cf-void { border-color: var(--cf-danger); color: var(--cf-danger); text-shadow: none; box-shadow: none; }

/* ---- section grouping inside a sheet ---- */
.cf-sec { margin-top: 12px; }
.cf-sechead {
  display: flex; align-items: center; gap: 8px;
  font: 700 9px var(--cf-mono); letter-spacing: .22em;
  color: var(--cf-ink-dim); margin-bottom: 6px;
}
.cf-sechead::after { content: ''; flex: 1; height: 1px; background: var(--cf-edge); }

@media (max-width: 700px), (max-height: 620px) {
  .cf-btn { padding: 9px 10px; font-size: 11px; }
  .cf-row .cf-v { font-size: 11px; }
  .cf-tab { font-size: 8px; padding: 3px 8px 2px; }
}

/* ==========================================================================
   FULL-SCREEN SHEETS — the legend board, the credit roll, the camera booth,
   the ad break. These used to each carry their own palette (Arial, gold,
   blue-black, rounded gradient pills), which is why the game read as four
   different products depending on which key you pressed.
   ========================================================================== */

/* the ground every full-screen sheet sits on: a dark file room, not a modal */
.cf-scrim {
  position: fixed; inset: 0; z-index: 55;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 38%, var(--gr-accent-a), transparent 62%),
    var(--cf-bg);
  color: var(--cf-ink);
  font-family: var(--cf-mono);
  text-align: center;
}
.cf-scrim.cf-open { display: flex; }

/* the display face: the pixel title and key labels only. The mono is for
   data that has to line up — addresses, ids, figures — and nothing else. */
.cf-title {
  font: 400 32px/1 var(--cf-display);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cf-ink);
}
.cf-title.cf-lit { color: var(--cf-accent); text-shadow: 0 0 18px var(--gr-accent-a); }
.cf-sub {
  font: 600 10px var(--cf-mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--cf-ink-faint);
}
.cf-num {
  font: 400 46px/1 var(--cf-display);
  letter-spacing: .04em; color: var(--cf-accent);
  text-shadow: 0 0 22px var(--gr-accent-a);
}

/* an inline button — the row form of .cf-btn, for button bars */
.cf-btn.cf-inline { width: auto; display: inline-flex; justify-content: center; }

/* THE HERO ACTION — the one primary control on a screen (PLAY, and nothing
   else so far). Same grammar as every other button: a bordered panel with an
   accent marker. It earns its weight from a THICKER marker, a wash falling
   away from it, and a lit edge — not from being filled in solid. A solid
   green slab beside three bordered tabs reads as a different design system,
   which is exactly why the pause menu lost its RESUME pill. */
.cf-btn.cf-hero {
  border-left-width: 6px;
  border-color: var(--cf-accent-dk);
  border-left-color: var(--cf-accent);
  background: linear-gradient(90deg, var(--gr-accent-a), var(--gr-accent-a) 62%, var(--cf-card));
  color: #f2fbf2;
  font: 400 21px/1 var(--cf-display);
  letter-spacing: .14em;
  padding: 16px 34px 14px 26px;
  box-shadow:
    0 0 0 1px var(--gr-accent-a),
    0 10px 28px rgba(0,0,0,.5),
    inset 0 0 22px var(--gr-accent-a);
}
.cf-btn.cf-hero:hover {
  background: linear-gradient(90deg, var(--gr-accent-a), var(--gr-accent-a) 62%, var(--cf-card-hi));
  border-color: var(--cf-accent);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--gr-accent-a),
    0 14px 34px rgba(0,0,0,.55),
    inset 0 0 26px var(--gr-accent-a);
}

/* a scrolling list inside a sheet: the case file's contents page */
.cf-list {
  max-height: 55vh; overflow-y: auto; text-align: left;
  background: var(--cf-card);
  border: 1px solid var(--cf-edge); border-radius: 2px;
  padding: 12px 16px;
  scrollbar-width: thin; scrollbar-color: var(--cf-edge-lit) transparent;
}
.cf-list::-webkit-scrollbar { width: 6px; }
.cf-list::-webkit-scrollbar-thumb { background: var(--cf-edge-lit); border-radius: 3px; }

@media (max-width: 700px), (max-height: 620px) {
  .cf-title { font-size: 24px; }
  .cf-num { font-size: 34px; }
  .cf-list { max-height: 48vh; padding: 10px 12px; }
}