html, body { height: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pt-safe { padding-top: env(safe-area-inset-top); }
button:active { transform: scale(0.97); transition: transform 80ms; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }

:root {
  --accent: #E8743C;
  --accent-soft: #FCEFE8;
  --ink: #0F0F0F;
  --paper: #FFFFFF;
  --paper-2: #FAFAF9;
  --line: #EFEEEC;
}

.h-display { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.h-display-lg { font-size: 2.4rem; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.tile-soft { background: var(--paper-2); border-radius: 4px; }
.r-flat { border-radius: 2px !important; }
.r-soft { border-radius: 4px !important; }
[class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"] { border-radius: 4px !important; }
.rounded-full, [class*="rounded-full"] { border-radius: 9999px !important; }
.label-tag { font-size: 11px; letter-spacing: 0.04em; text-transform: lowercase; color: #8A8782; }

.course-hero {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #2a2a28;
}
.game-shell { position: relative; min-height: 100vh; }
.game-bg, .game-overlay {
  position: fixed; inset: 0; pointer-events: none;
}
.game-bg { background-size: cover; background-position: center; z-index: 0; }
.game-overlay { z-index: 1; background: rgba(0,0,0,0.85); }
.game-content { position: relative; z-index: 2; }
body.in-game { background: #0a0a0a; }
.course-hero::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  transition: background .2s;
}
.course-hero[data-active="1"]::after { background: rgba(232,116,60,0.78); }
.course-hero > * { position: relative; z-index: 1; }

.btn-primary { background: var(--ink); color: white; border-radius: 9999px; }
.btn-accent { background: var(--accent); color: white; border-radius: 9999px; }
.btn-ghost { background: var(--paper-2); color: var(--ink); border-radius: 9999px; }

.dot-accent { background: var(--accent); }

.pulse-good { animation: pgood .6s ease; }
@keyframes pgood { 0%{background:var(--accent-soft)} 100%{background:transparent} }