/* WordPunch — Shared Design System ("Dark Pixel" Aesthetic)
   Include on all pages: <link rel="stylesheet" href="/shared.css"> */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ── Design Tokens ─────────────────────── */
:root {
  --bg: #1c1917;
  --card: #292524;
  --border: #111111;
  --shadow: #000000;
  --cream: #f4f1ea;
  --dim: #a8a29e;
  --mint: #4a82b4;
  --coral: #b44052;
  --peach: #c1802a;
  --green: #4d994d;
  --purple: #9450b4;
  --yellow: #f5c842;
  --medal-gold: #f5c842;
  --medal-silver: #d4d4d4;
  --medal-bronze: #c17a3a;
}

/* ── Reset ─────────────────────────────── */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation; /* disables iOS double-tap zoom */
}
input, textarea { touch-action: auto; } /* allow normal input behavior */

html, body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'VT323', monospace;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Pixel Corners ─────────────────────── */
.pixel-corners {
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0,
    calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}
.pixel-corners-sm {
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0,
    calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
  );
}

/* ── Typography ────────────────────────── */
.font-pixel { font-family: 'Press Start 2P', monospace; }
.font-mono  { font-family: 'VT323', monospace; }

.page-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 5vw, 28px); color: var(--yellow);
  text-shadow: 3px 3px 0 var(--border);
  text-align: center; margin-bottom: 4px;
}
.page-subtitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); text-align: center; margin-bottom: 16px;
}
.label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
}
.value {
  font-family: 'VT323', monospace;
  font-size: 20px; color: var(--cream);
}

/* ── Cards & Panels ────────────────────── */
.pixel-card {
  background: var(--card);
  border: 4px solid var(--border);
  filter: drop-shadow(4px 4px 0 var(--shadow));
}
.pixel-card-inner {
  background: var(--bg);
  border: 4px solid var(--border);
}

/* ── Buttons ───────────────────────────── */
.btn-pixel {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 4px solid var(--border);
  filter: drop-shadow(4px 4px 0 var(--shadow));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, filter 0.1s;
  text-decoration: none; display: inline-block; text-align: center;
}
.btn-pixel:hover {
  filter: drop-shadow(6px 6px 0 var(--shadow));
  transform: translate(-2px, -2px);
}
.btn-pixel:active {
  filter: drop-shadow(2px 2px 0 var(--shadow));
  transform: translate(1px, 1px);
}
.btn-pixel-primary { background: var(--yellow); color: var(--border); }
.btn-pixel-secondary { background: var(--card); color: var(--cream); }
.btn-pixel-dim { background: var(--card); color: var(--dim); }

.btn-link {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--yellow); background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Tab Toggle ────────────────────────── */
.seg-toggle {
  display: inline-flex; border: 4px solid var(--border);
}
.seg-toggle .seg-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; padding: 8px 16px; border: none;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; background: var(--card); color: var(--dim);
  transition: background 0.15s, color 0.15s;
}
.seg-toggle .seg-btn.active {
  background: var(--coral); color: var(--cream);
}

/* ── Page Layout ───────────────────────── */
.page-container {
  max-width: 480px; margin: 0 auto;
  height: 100%; display: flex; flex-direction: column;
  padding: 24px 16px;
}
.page-bg {
  background: radial-gradient(ellipse at 50% 50%, #332d28 0%, var(--bg) 70%);
  min-height: 100vh;
}

/* ── Scrollbar ─────────────────────────── */
.scroll-list { flex: 1; overflow-y: auto; min-height: 0; }
.scroll-list::-webkit-scrollbar { width: 3px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Input ─────────────────────────────── */
.pixel-input {
  width: 100%; font-family: 'VT323', monospace;
  font-size: 22px; color: var(--cream); background: var(--bg);
  border: 4px solid var(--border); padding: 14px 16px; outline: none;
}
.pixel-input:focus { border-color: var(--yellow); }
.pixel-input::placeholder { color: #57534e; }

/* ── Utilities ─────────────────────────── */
.text-peach  { color: var(--peach); }
.text-green  { color: var(--green); }
.text-coral  { color: var(--coral); }
.text-mint   { color: var(--mint); }
.text-yellow { color: var(--yellow); }
.text-dim    { color: var(--dim); }
.text-cream  { color: var(--cream); }

.empty-state {
  text-align: center; color: var(--dim);
  font-size: 20px; padding: 40px;
}