/* ============================================================
   Board Game Tools — shared base styles
   Design tokens, reset, header, buttons, inputs, panels.
   Per-page sheets set --accent / --accent-light and add
   page-specific rules. Calibrated to the tool pages; the
   landing page overrides a few values (line-height, header
   padding, h1 sizing).
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --black:#080a0c; --dark:#0e1215; --panel:#141820; --panel2:#1a2030;
  --gold:#c8922a; --gold-light:#e8b84b; --blue:#2b9fd4; --blue-light:#4abde8;
  --green:#3fae6b; --green-light:#5fd08c; --purple:#a855f7; --purple-light:#c084fc; --red:#e05a5a;
  --white:#eef2f6; --muted:#8a9db8;
  --border:rgba(43,159,212,0.18);
  --border-gold:rgba(200,146,42,0.28); --border-green:rgba(63,174,107,0.3); --border-purple:rgba(168,85,247,0.28);
  --font-display:'Rajdhani',sans-serif; --font-mono:'Share Tech Mono',monospace;
  /* default accent; pages override (turn=blue, finder=gold) */
  --accent:var(--green); --accent-light:var(--green-light);
}

html { font-size:16px; -webkit-text-size-adjust:100%; }
body { background:var(--black); color:var(--white); font-family:'Inter',sans-serif; line-height:1.5; min-height:100svh; display:flex; flex-direction:column; overflow-x:hidden; }

/* header */
.primary-header { position:relative; z-index:10; padding:14px clamp(16px,4vw,32px); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); background:var(--dark); }
.primary-header .home-link { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; color:var(--gold); text-transform:uppercase; text-decoration:none; }
.primary-header .home-link:hover { color:var(--gold-light); }
.primary-header .current-site { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; color:var(--muted); text-transform:uppercase; text-align:right; }

/* typography helpers */
h1 { font-family:var(--font-display); font-size:clamp(1.6rem,5vw,2.2rem); font-weight:700; letter-spacing:0.03em; }
.tagline { color:var(--muted); font-size:0.85rem; margin:0.15rem 0 1.4rem; }
.label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px; }
.muted { color:var(--muted); }

/* buttons */
.btn { font-family:var(--font-display); font-weight:600; font-size:0.92rem; letter-spacing:0.05em; text-transform:uppercase; border:none; cursor:pointer; padding:11px 18px; color:var(--black); background:var(--accent); transition:background 0.18s,transform 0.1s; border-radius:6px; white-space:nowrap; touch-action:manipulation; }
.btn:hover { background:var(--accent-light); }
.btn:active { transform:scale(0.97); }
.btn.green { background:var(--green); } .btn.green:hover { background:var(--green-light); }
.btn.gold { background:var(--gold); } .btn.gold:hover { background:var(--gold-light); }
.btn.blue { background:var(--blue); } .btn.blue:hover { background:var(--blue-light); }
.btn.purple { background:var(--purple); } .btn.purple:hover { background:var(--purple-light); }
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn.ghost:hover { color:var(--white); border-color:var(--blue); background:var(--panel); }
.btn.sm { padding:7px 12px; font-size:0.8rem; }
.btn.danger { background:transparent; color:var(--red); border:1px solid rgba(224,90,90,0.4); }
.btn.danger:hover { background:rgba(224,90,90,0.12); }
[disabled] { opacity:0.4; cursor:not-allowed; }

/* tip fab */
.tip-fab { position:fixed; bottom:20px; right:16px; z-index:200; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.tip-fab-panel { display:flex; flex-direction:column; align-items:center; gap:10px; background:#1a2030; border:1px solid rgba(200,146,42,0.35); border-radius:14px; padding:14px 18px; opacity:0; transform:translateY(6px) scale(0.96); pointer-events:none; transition:opacity 0.18s,transform 0.18s; box-shadow:0 4px 24px rgba(0,0,0,0.7); white-space:nowrap; max-width:calc(100vw - 32px); }
.tip-fab.open .tip-fab-panel { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.tip-fab-label { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(200,146,42,0.85); }
.tip-fab-btns { display:flex; gap:8px; }
.tip-fab-trigger { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); background:rgba(200,146,42,0.1); border:1px solid rgba(200,146,42,0.4); border-radius:20px; padding:8px 14px; cursor:pointer; transition:background 0.18s,border-color 0.18s; touch-action:manipulation; pointer-events:auto; }
.tip-fab-trigger:hover { background:rgba(200,146,42,0.2); border-color:rgba(200,146,42,0.65); }
.tip-btn { display:inline-flex; align-items:center; gap:6px; justify-content:center; padding:8px 14px; border-radius:20px; text-decoration:none; transition:all 0.2s; line-height:1; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--white); }
.tip-btn svg { flex-shrink:0; }
.tip-venmo { background:rgba(61,149,206,0.3); border:1px solid rgba(61,149,206,0.5); }
.tip-venmo:hover { background:rgba(61,149,206,0.5); border-color:rgba(61,149,206,0.8); }
.tip-paypal { background:rgba(0,112,224,0.3); border:1px solid rgba(0,112,224,0.5); }
.tip-paypal:hover { background:rgba(0,112,224,0.5); border-color:rgba(0,112,224,0.8); }

/* header right cluster */
.header-right { display:flex; align-items:center; gap:0.65rem; }
.help-link { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.06em; color:var(--muted); text-decoration:none; border:1px solid var(--border); border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:color 0.15s,border-color 0.15s; touch-action:manipulation; }
.help-link:hover { color:var(--white); border-color:rgba(43,159,212,0.5); }

/* layout helpers */
.row { display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
.field-stack { margin-bottom:1rem; }

/* form fields */
input, select, textarea { background:var(--panel); border:1px solid var(--border); color:var(--white); font-family:'Inter',sans-serif; font-size:1rem; padding:11px 13px; outline:none; border-radius:6px; -webkit-appearance:none; width:100%; }
input:focus, select:focus { border-color:var(--accent); background:var(--panel2); }

/* panels */
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:clamp(1rem,3vw,1.5rem); margin-bottom:1.1rem; }
.panel h2 { font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:0.04em; margin-bottom:0.85rem; text-transform:uppercase; }

/* version tag */
.version-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:rgba(238,242,246,0.18); text-align:center; padding:1.5rem 0 0.5rem; }

/* ── Mobile / safe-area ── */
/* Extend body padding for iPhone notch and home-bar in both orientations */
body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
/* Tip-fab clears the home-bar on iOS */
.tip-fab { bottom:calc(20px + env(safe-area-inset-bottom)); right:calc(16px + env(safe-area-inset-right)); }

/* Landscape: compact the header and tighten vertical rhythm */
@media (orientation:landscape) and (max-height:500px) {
  .primary-header { padding:8px clamp(16px,4vw,32px); }
  .tip-fab { bottom:calc(12px + env(safe-area-inset-bottom)); }
}