/* =============================================================
   EXCLAIM GAMES — Prototype Stylesheet
   Shared wireframe styles for all game prototypes
   ============================================================= */

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

:root {
  --black:     #1a1a1a;
  --white:     #ffffff;
  --bg:        #f0f0eb;
  --grey:      #cccccc;
  --grey-dk:   #888888;
  --red:       #c8102e;
  --border:    2px solid var(--black);
  --font:      'Courier New', Courier, monospace;
  --grid:      24px;
}

/* ── Base ─────────────────────────────────────────────────── */

html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grey) 1px, transparent 1px),
    linear-gradient(90deg, var(--grey) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
}

/* ── Header ───────────────────────────────────────────────── */

.proto-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--white);
  border-bottom: var(--border);
}

.proto-back {
  font-family: var(--font);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  text-decoration: none;
  border: var(--border);
  padding: 5px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.proto-back:hover {
  background: var(--black);
  color: var(--white);
}

.proto-title {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.proto-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-dk);
  margin-top: 1px;
}

/* ── Screens ──────────────────────────────────────────────── */

.proto-screen              { display: none; }
.proto-screen--active      { display: block; }

/* ── Setup Screen ─────────────────────────────────────────── */

.proto-setup {
  max-width: 440px;
  margin: 40px auto;
  padding: 0 20px;
}

.proto-setup h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 8px;
  border-bottom: var(--border);
  margin-bottom: 20px;
}

.proto-rules {
  border: var(--border);
  background: var(--white);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.proto-rules h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.proto-rules ul,
.proto-rules ol {
  font-size: 12px;
  line-height: 2;
  padding-left: 18px;
  color: #444;
}

.proto-rules li + li {
  border-top: 1px solid #eee;
}

/* ── Game Over Screen ─────────────────────────────────────── */

.proto-gameover {
  max-width: 440px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.proto-gameover h2 {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.proto-gameover p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-dk);
}

/* ── Option Picker ────────────────────────────────────────── */

.proto-option-group {
  margin-bottom: 24px;
}

.proto-option-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.proto-options {
  display: flex;
  gap: 8px;
}

.proto-option {
  font-family: var(--font);
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--border);
  background: var(--white);
  color: var(--black);
  padding: 10px 20px;
  cursor: pointer;
  flex: 1;
  text-align: center;
}

.proto-option:hover {
  background: #f0f0f0;
}

.proto-option--selected {
  background: var(--black);
  color: var(--white);
}

/* ── Cards ────────────────────────────────────────────────── */

.card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 90px;
  border: var(--border);
  background: var(--white);
  font-family: var(--font);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
  user-select: none;
  vertical-align: top;
  flex-shrink: 0;
}

.card span {
  font-size: 13px;
  font-weight: normal;
}

.card--lg {
  width: 80px;
  height: 112px;
  font-size: 20px;
}

.card--sm {
  width: 48px;
  height: 68px;
  font-size: 12px;
}

/* Face-down: diagonal hatching */
.card--back {
  background-color: var(--white);
  background-image: repeating-linear-gradient(
    45deg,
    var(--black) 0,
    var(--black) 1px,
    transparent 1px,
    transparent 7px
  );
}

/* Empty slot placeholder */
.card--empty {
  border: 2px dashed var(--grey);
  background: transparent;
}

.card--red    { color: var(--red); }
.card--static { cursor: default; pointer-events: none; }

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: var(--border);
  background: var(--white);
  color: var(--black);
  padding: 10px 24px;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}

.btn:hover:not(:disabled) {
  background: var(--black);
  color: var(--white);
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.btn--alert {
  color: var(--red);
  border-color: var(--red);
}

.btn--alert:hover:not(:disabled) {
  background: var(--red);
  color: var(--white);
}

.btn--lg {
  font-size: 20px;
  padding: 16px 40px;
  letter-spacing: 0.14em;
  border-width: 3px;
}

@keyframes proto-pulse {
  0%   { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.btn--pulse {
  animation: proto-pulse 0.35s ease-in-out infinite alternate;
}

/* ── Status / Labels ──────────────────────────────────────── */

.proto-status {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--grey-dk);
  min-height: 18px;
}

.proto-status--alert {
  color: var(--red);
  font-weight: bold;
}

.proto-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-dk);
}

.proto-count strong {
  display: block;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: var(--black);
}

.proto-count {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-dk);
  text-align: center;
}