:root {
  /* ---- 8.3 token layer (new) ---- */
  --card-w: 76px;
  --card-h: 108px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 50%;
  --z-base: 1;
  --z-zone: 10;
  --z-hand: 100;
  --z-chat: 150;
  --z-panel: 200;
  --z-overlay: 300;
  --z-toast: 1000;
  --z-banner: 1100;
  --team-ns: #e8a830;
  --team-ew: #5bcec8;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* ---- existing tokens (values unchanged; card tokens alias the new names) ---- */
  --card-width: var(--card-w);
  --card-height: var(--card-h);
  --card-small-width: 50px;
  --card-small-height: 75px;
  --red: #C00;
  --black: #222;
  --bg: #1a472a;
  --table: #2d5a3d;
  --gold: #daa520;
  --text: #eee;
  --border: #444;
}

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

/* Sleek modern scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(218, 165, 32, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(218, 165, 32, 0.75);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 165, 32, 0.4) rgba(0, 0, 0, 0.2);
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

/* App Shell — persistent DOM slots */
#phase-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 140px;
}

#hand-slot {
  position: fixed;
  bottom: var(--safe-b);
  left: 0;
  right: 0;
  z-index: var(--z-hand);
}

/* Score Bar */
.score-bar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.5rem 1rem;
  /* Keep the bar clear of the top inset (notch/status bar) in standalone PWA:
     it is the first element in the layout, so body padding no longer applies. */
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  background: rgba(0,0,0,0.3);
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
}

/* Fix #6: Softer team colors that complement green/gold palette */
.score-ns { color: var(--team-ns); } /* warm gold-orange */
.score-ew { color: var(--team-ew); } /* teal */

/* Teach Me Toggle */
.teach-toggle {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s;
  min-height: 44px;
  min-width: 44px;
}

.teach-toggle.active {
  background: var(--gold);
  color: #111;
}

/* Game Content */
.game-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); /* space for fixed hand-area */
}

/* Game toolbar (leave / new game) */
.game-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(218,165,32,0.15);
}

.toolbar-btn {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(218,165,32,0.3);
  background: rgba(0,0,0,0.3);
  color: var(--gold);
  font-size: 0.7rem;
  cursor: pointer;
  min-height: 44px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.toolbar-btn:hover {
  opacity: 1;
}

.toolbar-leave {
  border-color: rgba(200,60,60,0.4);
  color: #f0a0a0;
}

.toolbar-new {
  border-color: rgba(218,165,32,0.4);
}

/* ========== MOBILE RESPONSIVE (extracted per-component from the style.css mega-block) ========== */
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
  :root {
    --card-w: 58px;
    --card-h: 84px;
    --card-width: 58px;
    --card-height: 84px;
    --card-small-width: 40px;
    --card-small-height: 58px;
  }
  .score-bar {
    padding: 4px 8px;
    /* Keep the top inset protection on small screens too (notched PWA). */
    padding-top: calc(4px + env(safe-area-inset-top, 0px));
    font-size: 0.85rem;
    gap: 8px;
  }
  /* Fix #5: Adjust content padding for mobile hand-area with larger cards */
  .game-content {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  /* Fix #6: Teach toggle compact */
  .teach-toggle {
    font-size: 0.65rem;
    padding: 1px 8px;
  }
}