/* PropsHub public-site stylesheet — aligned with the Manager SPA design tokens.
   One source of truth for /, /overview.html, /about.html, /imprint.html. */

:root {
  --surface-0:#ffffff; --surface-1:#f5f6f8; --surface-2:#eceef2; --surface-3:#dde0e8;
  --border:#d1d5de; --border-s:#bbc0ce;
  --text-hi:#111827; --text-md:#374151; --text-lo:#5b6271; --text-ph:#9ca3af;
  --accent:#1d4ed8; --accent-lt:#eff3ff; --accent-bd:#bfceff;
  --c-props:#1d4ed8;  --c-props-lt:#eff3ff;
  --c-veh:#b91c1c;    --c-veh-lt:#fff1f2;
  --c-anim:#15803d;   --c-anim-lt:#f0fdf4;
  --c-sfx:#b45309;    --c-sfx-lt:#fffbeb;
  --c-roles:#6d28d9;  --c-roles-lt:#f5f3ff;
  --c-costume:#0e7490;--c-costume-lt:#ecfeff;
  --c-stunt:#be185d;  --c-stunt-lt:#fdf2f8;
  --c-vfx:#4338ca;    --c-vfx-lt:#eef2ff;
  --green:#16a34a; --red:#dc2626; --amber:#d97706;
  --header-bg:#1e2b3c; --header-text:#e2e8f0;
  --shadow-sm:0 1px 3px rgba(17,24,39,.06);
  --shadow-md:0 4px 12px rgba(17,24,39,.08);
  --shadow-lg:0 10px 32px rgba(17,24,39,.12);
  --radius:6px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ font-family:var(--font); color:var(--text-hi); background:var(--surface-1); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ─── layout ─── */
.page{ position:relative; z-index:2; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,3vw,32px); }

/* ─── chrome / header ─── */
.chrome{ background:var(--header-bg); color:var(--header-text); border-bottom:1px solid #0f1825; position:sticky; top:0; z-index:50; }
.chrome-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--header-text); font-weight:700; font-size:14px; letter-spacing:.02em; text-decoration:none; }
.brand-mark{ position:relative; display:inline-block; width:20px; height:20px; background:var(--accent); border-radius:4px; }
.brand-mark::after{ content:""; position:absolute; top:4px; left:4px; width:12px; height:12px; border:2px solid var(--surface-0); border-radius:2px; }
.brand .sep{ color:#64748b; margin:0 4px; }
.brand .tag{ color:#94a3b8; font-weight:400; font-size:13px; }
.chrome nav{ display:flex; gap:clamp(10px,1.4vw,20px); flex-wrap:wrap; }
.chrome nav a{ color:var(--header-text); text-decoration:none; font-size:13px; padding:6px 10px; border-radius:var(--radius); }
.chrome nav a:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.chrome nav a.active{ background:var(--accent); color:#fff; }
.open-cta{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:var(--accent); color:#fff; border-radius:var(--radius); font-size:13px; font-weight:600; text-decoration:none; transition:background .15s; }
.open-cta:hover{ background:#1e40af; text-decoration:none; }
@media (max-width:720px){ .chrome nav{ display:none; } }

/* ─── slug / breadcrumb strip ─── */
.slug{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo); border-bottom:1px dashed var(--border); flex-wrap:wrap; }
.slug .dots{ display:flex; gap:6px; }
.slug .dots i{ width:6px; height:6px; border-radius:50%; background:var(--text-ph); display:inline-block; }
.slug .dots i.hot{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-lt); }

/* ─── hero ─── */
.hero{ padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,112px); position:relative; }
.hero-kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.display{ font-family:var(--font); font-size:clamp(44px,6vw,88px); line-height:1.02; font-weight:800; letter-spacing:-.035em; color:var(--text-hi); margin:0 0 clamp(24px,3vw,40px); }
.display em{ font-style:normal; color:var(--accent); }
.hero-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,3vw,48px); align-items:end; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.lede{ font-size:clamp(17px,1.2vw + 8px,20px); line-height:1.5; color:var(--text-md); max-width:52ch; }
.lede strong{ color:var(--text-hi); font-weight:700; }
.hero-meta{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.hero-meta > div{ background:var(--surface-0); padding:14px 16px; }
.hero-meta span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-lo); margin-bottom:4px; }
.hero-meta b{ display:block; font-size:15px; font-weight:600; color:var(--text-hi); }
.cta-row{ grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }

/* ─── buttons ─── */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:var(--surface-0); color:var(--text-hi); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font); font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; transition:all .12s; }
.btn:hover{ background:var(--surface-2); border-color:var(--border-s); text-decoration:none; }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover{ background:#1e40af; border-color:#1e40af; }
.btn.lg{ padding:14px 24px; font-size:15px; }
.btn .arr{ display:inline-block; transition:transform .18s; }
.btn:hover .arr{ transform:translateX(3px); }

/* ─── sections ─── */
.section{ padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--border); background:var(--surface-0); }
.section.alt{ background:var(--surface-1); }
.section-head{ display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:end; margin-bottom:36px; }
@media (max-width:720px){ .section-head{ grid-template-columns:1fr; gap:10px; } }
.section-num{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.section-num b{ display:block; margin-top:6px; font-family:var(--font); font-size:28px; font-weight:700; color:var(--text-hi); letter-spacing:-.01em; text-transform:none; }
.section-title{ font-size:clamp(28px,3.4vw,44px); line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--text-hi); margin:0; max-width:22ch; }
.section-title em{ font-style:normal; color:var(--accent); }
.section-body{ max-width:70ch; font-size:clamp(16px,1vw + 8px,18px); line-height:1.55; color:var(--text-md); }
.section-body p{ margin:0 0 1em; }
.section-body h3{ font-size:17px; font-weight:700; color:var(--text-hi); margin:28px 0 10px; }
.section-body ul{ padding-left:1.2em; margin:0 0 1em; }
.section-body li{ margin:0 0 .4em; }
.section-body li strong{ font-weight:700; color:var(--text-hi); }

/* ─── features grid ─── */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:980px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feat{ background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px; position:relative; transition:border-color .15s, box-shadow .15s, transform .15s; }
.feat:hover{ border-color:var(--accent-bd); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.feat-num{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text-lo); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.feat-num::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--cat,var(--accent)); }
.feat h3{ font-size:16px; font-weight:700; color:var(--text-hi); margin:0 0 8px; letter-spacing:-.005em; }
.feat-body{ font-size:14px; line-height:1.5; color:var(--text-md); margin:0; }
.feat[data-cat="props"]{ --cat:var(--c-props); }
.feat[data-cat="veh"]{ --cat:var(--c-veh); }
.feat[data-cat="anim"]{ --cat:var(--c-anim); }
.feat[data-cat="sfx"]{ --cat:var(--c-sfx); }
.feat[data-cat="roles"]{ --cat:var(--c-roles); }
.feat[data-cat="costume"]{ --cat:var(--c-costume); }
.feat[data-cat="stunt"]{ --cat:var(--c-stunt); }
.feat[data-cat="vfx"]{ --cat:var(--c-vfx); }

/* ─── permissions table ─── */
.perms{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; font-size:14px; }
.perms th, .perms td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); }
.perms thead th{ background:var(--surface-1); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo); font-weight:600; }
.perms tbody th{ font-weight:600; color:var(--text-hi); background:var(--surface-1); }
.perms tbody tr:last-child th, .perms tbody tr:last-child td{ border-bottom:none; }
.perms .yes{ color:var(--green); font-weight:500; }
.perms .no{ color:var(--text-ph); }

/* ─── closer ─── */
.closer{ background:var(--header-bg); color:var(--header-text); padding:clamp(56px,7vw,96px) 0; text-align:center; border-top:1px solid #0f1825; }
.closer-kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; margin-bottom:18px; }
.closer h2{ font-size:clamp(32px,4vw,56px); line-height:1.1; font-weight:800; letter-spacing:-.02em; margin:0 0 28px; color:#fff; }
.closer h2 em{ font-style:normal; color:#60a5fa; }
.closer .btn{ background:var(--accent); color:#fff; border-color:var(--accent); }
.closer .btn:hover{ background:#1e40af; border-color:#1e40af; }

/* ─── footer ─── */
.foot{ padding:28px 0 36px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-lo); background:var(--surface-0); border-top:1px solid var(--border); }
.foot a{ color:var(--text-md); text-decoration:none; }
.foot a:hover{ color:var(--accent); text-decoration:underline; }
.foot .links{ display:flex; gap:14px; flex-wrap:wrap; }

/* ─── prose pages (about, imprint) ─── */
.hero-compact{ padding:clamp(40px,5vw,64px) 0 clamp(24px,3vw,40px); }
.hero-compact .hero-kicker{ margin-bottom:12px; }
.page-title{ font-size:clamp(36px,4.6vw,64px); line-height:1.05; font-weight:800; letter-spacing:-.03em; margin:0 0 14px; color:var(--text-hi); }
.page-subtitle{ font-size:clamp(16px,1vw + 8px,19px); color:var(--text-md); max-width:60ch; margin:0; }
.cards-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:12px; }
@media (max-width:900px){ .cards-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cards-4{ grid-template-columns:1fr; } }
.card{ background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.card h4{ font-size:14px; font-weight:700; color:var(--text-hi); margin:0 0 6px; }
.card p{ font-size:13px; line-height:1.5; color:var(--text-md); margin:0; }
.addr{ font-family:var(--mono); font-size:13px; line-height:1.8; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; display:inline-block; }
.addr strong{ font-weight:700; color:var(--text-hi); }

/* ─── physics playground canvas ─── */
/* Canvas sits ABOVE page content so the hand-drawn props fly in front of
   sections. Pointer-events stay off — input is captured at the document
   level so clicks on links/buttons/cards still work. */
#board-canvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:40; }
body.game-drag, body.game-drag *{ cursor:grabbing !important; user-select:none; }
.game-toggle{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:10px; }
.game-hint{ background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-lo); box-shadow:var(--shadow-sm); opacity:0; transition:opacity .2s; }
.game-toggle:hover .game-hint{ opacity:1; }
.game-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-md); cursor:pointer; box-shadow:var(--shadow-sm); transition:all .15s; }
.game-btn:hover{ border-color:var(--border-s); }
.game-btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-ph); transition:background .2s; }
.game-btn[aria-pressed="true"]{ background:var(--accent); color:#fff; border-color:var(--accent); }
.game-btn[aria-pressed="true"] .dot{ background:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.3); animation:pulse 1.2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.65; transform:scale(.86); } }
@media (prefers-reduced-motion: reduce){ .game-btn[aria-pressed="true"] .dot{ animation:none; } }
@media print{ #board-canvas, .game-toggle{ display:none !important; } }