/* Pendle Witches Tour styles — v15a */
:root{
  --bg1: #faf3d0;
  --bg2: #efe9d3;
  --surface: rgba(255,255,255,0.96);
  --ink: #111;
  --muted: rgba(0,0,0,0.65);
  --brand: #ffcc00;
  --brand-weak: #fff3b0;
  --border: rgba(0,0,0,0.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(120% 100% at 50% 0%, var(--bg1) 0%, var(--bg2) 60%, #f3efe0 100%);
}
header{ text-align:center; padding:3.2rem 1rem 1rem; color:#000; }
h1{ font-family: "UnifrakturMaguntia", "Cinzel", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4vw + 1rem, 3.2rem); margin:0 0 .25rem; }
.subtitle{ margin:.25rem 0 0; opacity:.85; font-family:"Cinzel", Georgia, serif; }

/* Fog overlays (subtle) */
.bg .fog{ position: fixed; inset:0; background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; }
.bg .fog2{ background: radial-gradient(ellipse at 60% 80%, rgba(255,255,255,.12), transparent 50%); }

.container{ max-width:1100px; margin: 0 auto 4rem; padding: 0 1rem; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.track{
  display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem;
  background: var(--brand); color:#000; text-decoration:none; border:1px solid var(--border);
  border-radius:14px; font-weight:800; cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.track:hover{ filter:brightness(1.02); }
.track__num{ width:2.2rem; height:2.2rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; border:1px solid rgba(0,0,0,0.2); background:#fff; }
.track__title{ flex:1; }
.track__icon{ width:20px; height:20px; opacity:.9; }

.player{
  position: sticky; bottom: 0; left:0; right:0;
  display:flex; gap:.5rem; align-items:center;
  background: var(--surface); border:1px solid var(--border); border-radius:16px;
  margin: 1rem auto; padding: .5rem .6rem; max-width:1100px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.player.hidden{ display:none; }
.player button{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:.45rem .7rem;
  font-weight:700; cursor:pointer;
}
.player .meta{ flex:1; padding: 0 .5rem; }
.player .title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

footer{ text-align:center; color:#222; padding:1rem; }
footer a{ color: inherit; }

.notice{max-width:1100px;margin:1rem auto 0;padding:.75rem 1rem;background:#fff3b0;border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.08);display:flex;align-items:flex-start;gap:.6rem;}

.track.is-playing{ outline: 2px solid rgba(0,0,0,0.25); filter: brightness(1.05); }