/* Liar's Poker — pixel UI chrome. Requires palette.css + fonts.css. Mobile-first, designed at 360px wide.
   Technique: box-shadow pixel borders (notched corners) in multiples of --px. No images needed;
   9-slice PNG alternatives live in sprites/ (see .px-9 classes at the bottom). All class names are prefixed px-. */

:root {
  --px: 4px;                 /* one "chunky pixel". Borders are multiples of this. */
  --gap: 12px;
  --touch: 48px;             /* min touch target (>= 44px) */
  --fs-display-s: 8px;       /* Press Start 2P: ONLY use multiples of 8 (8/16/24/32) or glyphs blur */
  --fs-display: 16px;
  --fs-display-l: 24px;
  --fs-display-xl: 32px;
  --fs-body: 24px;           /* VT323 is small for its em; 22–28px reads well on phones */
  --fs-body-s: 20px;
}

/* ---------- base ---------- */
.px-app, .px-app * { box-sizing: border-box; }
.px-app {
  min-height: 100dvh;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.1;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
}
.px-app canvas, .px-app img, .px-pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
.px-screen { max-width: 480px; margin: 0 auto; padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }

.px-h1, .px-h2, .px-h3, .px-display { font-family: var(--font-display); font-weight: 400; line-height: 1.25; margin: 0; letter-spacing: 0; }
.px-h1 { font-size: var(--fs-display-l); color: var(--c-highlight); text-shadow: var(--px) var(--px) 0 var(--c-bg-deep); }
.px-h2 { font-size: var(--fs-display); }
.px-h3 { font-size: var(--fs-display-s); letter-spacing: 1px; color: var(--c-text-dim); text-transform: uppercase; }
.px-text-dim { color: var(--c-text-dim); }
.px-text-gold { color: var(--c-highlight); }
.px-text-red { color: var(--c-danger); }
.px-text-green { color: var(--c-money-light); }
.px-small { font-size: var(--fs-body-s); }
.px-stack { display: flex; flex-direction: column; gap: var(--gap); }
.px-row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.px-grow { flex: 1 1 0; min-width: 0; }

/* Notched 1-px outline ring around a box (outside the box; reserve var(--px) margin). */
.px-outline {
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border),
    calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}

/* ---------- panels ---------- */
.px-panel {
  position: relative;
  margin: var(--px);
  padding: calc(var(--px) * 4);
  background: var(--c-panel);
  color: var(--c-text);
  box-shadow:
    inset 0 0 0 var(--px) var(--c-border-light),
    inset 0 0 0 calc(var(--px) * 2) var(--c-border),
    0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border),
    calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}
.px-panel--gold { box-shadow:
    inset 0 0 0 var(--px) var(--c-highlight),
    inset 0 0 0 calc(var(--px) * 2) var(--c-highlight-dark),
    0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border),
    calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border); }
.px-panel--red { box-shadow:
    inset 0 0 0 var(--px) var(--c-danger),
    inset 0 0 0 calc(var(--px) * 2) var(--c-danger-dark),
    0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border),
    calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border); }
.px-panel--dark { background: var(--c-bg-deep); }
.px-panel--flat { padding: calc(var(--px) * 3); }
/* title tab sitting on the top border */
.px-panel__title {
  position: absolute; top: calc(-1 * var(--px) * 3); left: calc(var(--px) * 4);
  padding: 2px 8px; background: var(--c-panel); color: var(--c-highlight);
  font-family: var(--font-display); font-size: var(--fs-display-s); line-height: 12px;
  box-shadow: inset 0 0 0 var(--px) var(--c-border); padding: 4px 8px;
}

/* ---------- dialog / modal ---------- */
.px-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  /* 2x2 ink dither (50%) — palette-only "dim" */
  background-image: repeating-conic-gradient(var(--c-bg-deep) 0 25%, transparent 0 50%);
  background-size: 4px 4px;
}
.px-overlay[hidden] { display: none; }
.px-dialog { width: min(100%, 340px); }
.px-dialog .px-panel { margin: 0; }
.px-dialog__actions { display: flex; gap: 12px; margin-top: 16px; }
.px-dialog__actions > * { flex: 1; }

/* ---------- buttons ---------- */
.px-btn {
  --btn-fill: var(--c-panel-raised);
  --btn-hi: var(--c-accent);
  --btn-lo: var(--c-panel);
  --btn-fg: var(--c-text);
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); min-width: var(--touch);
  margin: var(--px);
  padding: 12px 16px;
  border: 0; border-radius: 0;
  background: var(--btn-fill);
  color: var(--btn-fg);
  font-family: var(--font-display); font-size: var(--fs-display); line-height: 1;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; touch-action: manipulation;
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--btn-hi),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--btn-lo),
    0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border),
    calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}
.px-btn:active, .px-btn.is-pressed {
  background: var(--btn-lo);
  transform: translateY(var(--px));
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--c-bg-deep),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--btn-fill),
    0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border),
    calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}
.px-btn:focus-visible { outline: var(--px) dashed var(--c-highlight); outline-offset: calc(var(--px) * 2); }
.px-btn:disabled, .px-btn.is-disabled, .px-btn[aria-disabled="true"] {
  --btn-fill: var(--c-disabled); --btn-hi: var(--c-disabled); --btn-lo: var(--c-disabled); --btn-fg: var(--c-border-light);
  cursor: not-allowed; transform: none; background: var(--c-disabled);
}
.px-btn--danger { --btn-fill: var(--c-danger-dark); --btn-hi: var(--c-danger); --btn-lo: var(--c-bg-deep); }
.px-btn--gold   { --btn-fill: var(--c-highlight); --btn-hi: var(--c-paper); --btn-lo: var(--c-highlight-dark); --btn-fg: var(--c-text-on-light); }
.px-btn--money  { --btn-fill: var(--c-money-dark); --btn-hi: var(--c-money); --btn-lo: var(--c-money-ink); }
.px-btn--block  { display: flex; width: calc(100% - 2 * var(--px)); }
.px-btn--big    { min-height: 64px; font-size: var(--fs-display-l); }
.px-btn--small  { padding: 8px 10px; }
.px-btn--icon   { padding: 0; width: var(--touch); }

/* ---------- turn indicator ---------- */
.px-turn {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--touch);
  margin: var(--px); padding: 8px 12px;
  background: var(--c-bg-deep);
  font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.4;
  box-shadow: inset 0 0 0 var(--px) var(--c-panel-raised), 0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border), calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}
.px-turn__name { color: var(--c-highlight); }
.px-turn--you { background: var(--c-highlight); color: var(--c-text-on-light);
  box-shadow: inset 0 0 0 var(--px) var(--c-highlight-dark), 0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border), calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border); }
.px-turn--you .px-turn__name { color: var(--c-text-on-light); }
.px-turn--you .px-cursor { background: var(--c-text-on-light); }
.px-turn__timer { margin-left: auto; color: var(--c-text-dim); }
.px-turn--you .px-turn__timer { color: var(--c-text-on-light); }

/* pixel arrow cursor ▶ (8x12 at --px 2) — blinks via .anim-blink (animations.css) */
.px-cursor {
  display: inline-block; flex: none; width: 12px; height: 16px;
  background: var(--c-highlight);
  clip-path: polygon(0 0, 25% 0, 25% 12.5%, 50% 12.5%, 50% 25%, 75% 25%, 75% 37.5%, 100% 37.5%, 100% 62.5%, 75% 62.5%, 75% 75%, 50% 75%, 50% 87.5%, 25% 87.5%, 25% 100%, 0 100%);
}

/* ---------- current bid ---------- */
.px-bid { text-align: center; padding: 16px 12px 12px; }
.px-bid__label { display: block; font-family: var(--font-display); font-size: 8px; color: var(--c-text-dim); letter-spacing: 1px; margin-bottom: 12px; }
.px-bid__value { display: inline-flex; align-items: baseline; justify-content: center; gap: 12px; font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: 1; color: var(--c-text); text-shadow: var(--px) var(--px) 0 var(--c-bg-deep); }
.px-bid__x { font-size: var(--fs-display-l); color: var(--c-text-dim); text-shadow: none; }
.px-bid__digit {
  display: inline-block; min-width: 1.5em; padding: 6px 4px 4px; text-align: center;
  background: var(--c-highlight); color: var(--c-text-on-light); text-shadow: none;
  box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--c-highlight-dark);
}
.px-bid__suffix { font-size: var(--fs-display); color: var(--c-text-dim); margin-left: -6px; text-shadow: none; }
.px-bid__by { display: block; margin-top: 12px; color: var(--c-text-dim); font-size: var(--fs-body-s); }
.px-bid__by b { color: var(--c-text); font-weight: 400; }
.px-bid--empty .px-bid__value { font-size: var(--fs-display); color: var(--c-text-dim); }

/* ---------- player chips ---------- */
.px-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.px-chip {
  --chip-color: var(--c-highlight);
  position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--touch);
  margin: var(--px); padding: 6px 8px 6px 6px;
  background: var(--c-panel);
  box-shadow: inset 0 0 0 var(--px) var(--c-panel-raised), 0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border), calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}
.px-chip__avatar {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--chip-color); color: var(--c-text-on-light);
  font-family: var(--font-display); font-size: var(--fs-display);
  box-shadow: inset -4px -4px 0 0 rgba(15, 15, 27, .35); /* ink @35% — the one non-opaque palette use */
}
.px-chip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); }
.px-chip__meta { font-family: var(--font-display); font-size: 8px; color: var(--c-text-dim); }
.px-chip__tag { position: absolute; top: -10px; right: 6px; padding: 3px 4px; font-family: var(--font-display); font-size: 8px; background: var(--c-accent); color: var(--c-text-on-light); }
.px-chip.is-active { background: var(--c-panel-raised); box-shadow: inset 0 0 0 var(--px) var(--c-highlight), 0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border), calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border); }
.px-chip.is-active::before { content: ''; position: absolute; left: -16px; top: 50%; margin-top: -8px; width: 12px; height: 16px; background: var(--c-highlight);
  clip-path: polygon(0 0, 25% 0, 25% 12.5%, 50% 12.5%, 50% 25%, 75% 25%, 75% 37.5%, 100% 37.5%, 100% 62.5%, 75% 62.5%, 75% 75%, 50% 75%, 50% 87.5%, 25% 87.5%, 25% 100%, 0 100%);
  animation: lp-blink 800ms steps(1, end) infinite; }
.px-chip.is-out { background: var(--c-bg); color: var(--c-text-dim); }
.px-chip.is-out .px-chip__name { text-decoration: line-through; }
.px-chip.is-out .px-chip__avatar { background: var(--c-disabled); }
.px-chip.is-liar { box-shadow: inset 0 0 0 var(--px) var(--c-danger), 0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border), calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border); }
.px-chip.is-offline { opacity: .6; }

/* ---------- bid picker ---------- */
.px-stepper { display: flex; align-items: center; justify-content: center; gap: 8px; }
.px-stepper__value { min-width: 64px; text-align: center; font-family: var(--font-display); font-size: var(--fs-display-xl); }
.px-digits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.px-digits .px-btn { min-width: 0; padding: 12px 0; font-size: var(--fs-display-l); }
.px-digits .px-btn[aria-pressed="true"] { --btn-fill: var(--c-highlight); --btn-hi: var(--c-paper); --btn-lo: var(--c-highlight-dark); --btn-fg: var(--c-text-on-light); }

/* ---------- inputs ---------- */
.px-input {
  width: calc(100% - 2 * var(--px)); min-height: var(--touch); margin: var(--px); padding: 8px 12px;
  border: 0; border-radius: 0; background: var(--c-text); color: var(--c-text-on-light);
  font-family: var(--font-body); font-size: var(--fs-body);
  box-shadow: inset var(--px) var(--px) 0 0 var(--c-border-light), 0 calc(-1 * var(--px)) 0 0 var(--c-border), 0 var(--px) 0 0 var(--c-border), calc(-1 * var(--px)) 0 0 0 var(--c-border), var(--px) 0 0 0 var(--c-border);
}
.px-input:focus { outline: var(--px) dashed var(--c-highlight); outline-offset: calc(var(--px) * 2); }

/* ---------- banner (LIAR! / YOU WIN / YOU LOSE) ---------- */
.px-banner {
  position: fixed; left: 0; right: 0; top: 38%; z-index: 60; pointer-events: none;
  padding: 20px 8px; text-align: center;
  font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: 1.2;
  color: var(--c-text); background: var(--c-danger-dark);
  text-shadow: var(--px) var(--px) 0 var(--c-bg-deep);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--c-danger), 0 var(--px) 0 0 var(--c-danger), 0 calc(-2 * var(--px)) 0 0 var(--c-bg-deep), 0 calc(2 * var(--px)) 0 0 var(--c-bg-deep);
}
.px-banner[hidden] { display: none; }
.px-banner--win  { background: var(--c-highlight); color: var(--c-text-on-light); text-shadow: var(--px) var(--px) 0 var(--c-paper);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--c-highlight-dark), 0 var(--px) 0 0 var(--c-highlight-dark), 0 calc(-2 * var(--px)) 0 0 var(--c-bg-deep), 0 calc(2 * var(--px)) 0 0 var(--c-bg-deep); }
.px-banner--lose { background: var(--c-bg-deep); color: var(--c-border-light);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--c-disabled), 0 var(--px) 0 0 var(--c-disabled); }
.px-banner__sub { display: block; margin-top: 12px; font-size: var(--fs-display); }
.px-banner--inline { position: relative; top: auto; }

/* red screen flash layer (put one at the end of <body>) */
.px-flash { position: fixed; inset: 0; z-index: 55; pointer-events: none; background: var(--c-danger); opacity: 0; }

/* ---------- bills ---------- */
.px-bill { display: block; margin: 0 auto; image-rendering: pixelated; }
.px-bill-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.px-bill-card__owner { font-family: var(--font-display); font-size: 8px; color: var(--c-text-dim); }
.px-tally { font-family: var(--font-display); font-size: var(--fs-display-l); color: var(--c-highlight); display: inline-block; }

/* ---------- log ---------- */
.px-log { margin: 0; padding: 0; list-style: none; font-size: var(--fs-body-s); max-height: 160px; overflow-y: auto; }
.px-log li::before { content: '> '; color: var(--c-accent); }

/* ---------- 9-slice PNG variants (sprites/*-9.png, 24x24, 8px slices, drawn at 2x = 16px borders) ---------- */
.px-9 { border-style: solid; border-width: 16px; border-color: transparent; border-image-slice: 8 fill; border-image-width: 16px; border-image-repeat: stretch; image-rendering: pixelated; background: none; box-shadow: none; }
.px-9--panel           { border-image-source: url('sprites/panel-9.png'); padding: 4px; color: var(--c-text); }
.px-9--panel-gold      { border-image-source: url('sprites/panel-gold-9.png'); padding: 4px; color: var(--c-text); }
.px-9--button          { border-image-source: url('sprites/button-9.png'); color: var(--c-text); }
.px-9--button:active, .px-9--button.is-pressed { border-image-source: url('sprites/button-pressed-9.png'); transform: translateY(var(--px)); }
.px-9--button:disabled, .px-9--button.is-disabled { border-image-source: url('sprites/button-disabled-9.png'); color: var(--c-border-light); transform: none; }
.px-9--danger          { border-image-source: url('sprites/button-danger-9.png'); color: var(--c-text); }
.px-9--gold            { border-image-source: url('sprites/button-gold-9.png'); color: var(--c-text-on-light); }
.px-btn.px-9 { padding: 0 8px; margin: 0; min-height: var(--touch); }