@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=League+Gothic&display=swap');

/* Tango & Cash host panel: card face-lift.
   Load AFTER your existing host stylesheet. Only class names already in your markup are used,
   so your script doesn't need to change. */

:root {
  --ink: #f1e8d4;
  --paper: #efe6cf;
  --pitch: #0a0a0a;
  --neutral: #8aad76;
  --display: "League Gothic", Impact, "Arial Narrow", sans-serif;
  --type: "Courier Prime", "Courier New", monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html, body { background: #050506; font-family: var(--type); }
.page { padding-bottom: 120px; }

/* ---------- Wall ---------- */
.wall { background: #08090b; border-radius: 0; box-shadow: none; padding: 16px; }
.cart-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

/* ---------- Question cards on the wall ---------- */
.cart {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 178px; padding: 14px 16px 12px 40px;
  border: 0; border-radius: 0;
  color: var(--ink);
  background-color: var(--tango);
  background-image: var(--grain);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .12s;
}
.cart[class~="cat-CASH"] { background-color: var(--cash); }
.cart[class~="cat-&"] { background-color: var(--neutral); color: var(--pitch); }
.cart:hover { transform: rotate(-.8deg); box-shadow: none; }

/* film-strip edge: the same sprocket holes run down the overlay card */
.cart-grid .cart .left-strip,
.face::before {
  width: 22px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 8px, var(--ink) 8px 18px, transparent 18px 26px) center / 8px 100% no-repeat,
    var(--pitch);
}
.face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; }

.cart .mini {
  position: static; order: 1; padding: 0; background: none; border-radius: 0;
  font: 400 1.8rem/1 var(--display); letter-spacing: .03em;
}
.cart .title {
  order: 2; margin: 0;
  font: 700 .8rem/1.2 var(--type); letter-spacing: 0; opacity: .75;
}

/* hidden question = redaction bars that follow the real line lengths */
.cart .q-hidden {
  order: 3; display: block; height: auto; min-height: 4.2em; margin-top: 6px; padding: 0;
  background: none; filter: none; text-shadow: none; border-radius: 0;
  color: transparent; text-align: left; user-select: none;
  font: 700 .95rem/1.4 var(--type);
  text-decoration: line-through; text-decoration-thickness: 1.05em;
  text-decoration-color: var(--pitch); text-decoration-skip-ink: none;
}
.cart .q-text {
  order: 3; height: auto; min-height: 4.2em; margin-top: 6px; padding: 0; border-radius: 0;
  justify-content: flex-start; text-align: left; font: 700 .95rem/1.4 var(--type);
}

.cart .status {
  position: static; order: 4; margin-top: auto;
  font: 400 1.05rem/1 var(--display); letter-spacing: .08em; color: inherit; opacity: .7;
}
.cart .status span { color: inherit !important; }

/* used = stamped and dimmed */
.cart .check {
  top: 12px; right: 26px; padding: 0 10px; background: none; border: 3px solid currentColor; border-radius: 0;
  font: 400 1.8rem/1.3 var(--display); transform: rotate(-10deg);
}
.cart.used { filter: saturate(.3) brightness(.7); }
.cart.used:hover { transform: none; }

/* ---------- Overlay card ---------- */
.card { border-radius: 0; box-shadow: none; padding: 0; }
.face {
  border-radius: 0; padding: 64px 80px 110px 90px;
  justify-content: flex-start;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
}
.card .text {
  max-width: 100%; text-align: left;
  font: 700 clamp(1.6rem, 3.6vw, 2.8rem)/1.25 var(--type);
}
.card .meta { top: 22px; left: 52px; font: 400 1.7rem/1 var(--display); letter-spacing: .06em; }
.card .close {
  top: 22px; right: 62px; padding: 4px 12px; background: none; border: 2px solid currentColor; border-radius: 0;
  font: 400 1.4rem/1 var(--display);
}
.card-btn {
  padding: 10px 22px; border: 3px solid var(--paper); border-radius: 0;
  font: 400 1.3rem/1 var(--display); letter-spacing: .08em;
}
.card-btn.none { background: var(--paper); color: var(--pitch); }
.card-btn.cancel { background: transparent; border-color: var(--ink); color: var(--ink); }

/* ---------- Controls, scorebar, history (same flat treatment; delete this block to leave them as they were) ---------- */
.btn, .undo, .reset, .bonus-btn {
  padding: 8px 16px; border: 2px solid rgba(241, 232, 212, .45); border-radius: 0; background: var(--pitch);
  font: 400 1.25rem/1 var(--display); letter-spacing: .06em; color: var(--ink);
}
.btn.active { background: var(--paper); color: var(--pitch); border-color: var(--paper); box-shadow: none; }
.bonus-btn { border-color: var(--paper); }
.scorebar { background: var(--pitch); backdrop-filter: none; border-top: 2px solid var(--ink); }
.scoreplate { background: none; border-radius: 0; }
.scoreplate .label { font: 400 1.4rem/1 var(--display); letter-spacing: .08em; }
.scoreplate .num { font: 400 2.8rem/1 var(--display); }
.history-mini { background: var(--pitch); border-radius: 0; border-left: 4px solid var(--ink); font: 400 .8rem/1.4 var(--type); }
.hist-item { border-bottom: 1px solid rgba(241, 232, 212, .15); }

@media (prefers-reduced-motion: reduce) {
  .cart, .card, .flip-card { transition: none; }
}

/* ---------- Board tiles (host copy of the audience board) ---------- */
.board-row { display: flex; align-items: center; gap: 18px; }
.mini-board { display: grid; grid-template-columns: repeat(8, 34px); grid-auto-rows: 34px; gap: 3px; }
.mini-tile {
  padding: 0; border: 0; border-radius: 0;
  background: var(--tango) center / contain no-repeat;
}
.mini-tile.cat-CASH { background-color: var(--cash); }
.mini-tile.cat-amp { background-color: var(--neutral); }
.mini-tile.claimed { outline: 2px solid var(--ink); outline-offset: -2px; }
.mini-tile:hover { filter: brightness(1.25); }