@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* ---- Variables ---- */
:root {
  --field-green: #1a4a1a;
  --field-line: rgba(255,255,255,0.3);
  --endzone-red: #aa2222;
  --card-back: #1a0a2e;
  --card-back-pattern: #2a1a4e;
  --card-face: #ffffff;
  --card-red: #cc0000;
  --card-black: #1a1a1a;
  --card-border: #888;
  --bg-dark: #0a0a1a;
  --panel-bg: #1a1a2e;
  --panel-border: #3a3a5c;
  --text-primary: #e0d0b0;
  --text-secondary: #8888aa;
  --text-gold: #ffcc00;
  --text-score: #ffffff;
  --accent-orange: #ff8800;
  --accent-green: #00cc44;
  --accent-red: #ff2244;
  --accent-blue: #44aaff;
  --dice-bg: #ffffff;
  --dice-pip: #1a1a1a;
  --card-width: clamp(42px, 10vh, 62px);
  --card-height: calc(var(--card-width) * 1.4);
  --card-radius: 6px;
  --dice-size: clamp(30px, 7vh, 44px);
  --field-gap: clamp(4px, 1.2vh, 10px);
  --left-panel-w: 380px;
  --font-main: 'Inter', system-ui, sans-serif;
  --font-score: 'Inter', system-ui, sans-serif;
  --font-logo: 'Varsity Team', sans-serif;
  --flip-duration: 600ms;
  --fade-duration: 300ms;
  --logo-bottom: 0px;  /* JS sets actual value in startSession */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 22px; }
body {
  font-family: var(--font-main);
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }