/* Hub: catalogus van wandelspellen */
body{overflow-x:hidden}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:2;display:block;pointer-events:none}
main{position:relative;z-index:1;padding-block:0 48px}
.wrap{gap:22px}
/* ---- hero: volle breedte, illustratie, logo ---- */
.hero{position:relative;min-height:min(92svh,860px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;gap:14px;margin:0 -16px;padding:18px 16px 28px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../assets/hero.webp") center 30%/cover no-repeat;transform:scale(1.04);animation:drift 18s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,26,43,.15) 0%,rgba(16,26,43,0) 35%,rgba(16,26,43,.55) 68%,var(--night) 100%)}
@keyframes drift{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.08) translateY(-10px)}}
.hero .top{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:16px;right:16px;display:flex;justify-content:space-between;align-items:center}
.hero .top .eyebrow{text-shadow:0 1px 6px #000;color:var(--paper)}
.logo{width:min(66vw,320px);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7)) drop-shadow(0 0 28px rgba(240,166,58,.25));animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#typed{font-family:var(--f-type);font-size:clamp(17px,4.6vw,22px);min-height:2.6em;text-shadow:0 2px 10px #000;color:var(--paper);max-width:34ch}
.hero .lead{text-shadow:0 2px 10px #000;color:#d9e0ee;font-size:15px;max-width:52ch}
.cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.cta .btn{width:auto;padding:14px 26px;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 10px 30px rgba(240,166,58,.35);text-decoration:none}
.cta .arrow{font-size:22px;color:var(--lamp);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
/* ---- profielstrip ---- */
.profile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--fog);padding:8px 0;border-top:1px solid var(--street);border-bottom:1px solid var(--street);margin-top:-6px}
.profile b{font-family:var(--f-type);font-weight:400;font-size:15px;color:var(--spook);text-transform:none;letter-spacing:0}
.profile .pr{display:inline-flex;align-items:center;gap:8px}.profile .xp{display:inline-block;width:60px;height:4px;background:var(--night2);border-radius:2px;overflow:hidden}.profile .xp i{display:block;height:100%;background:var(--lamp)}
.profile .st{text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:12px;flex:1 1 100%}
.profile .plink{margin-left:auto;color:var(--lamp);font:inherit;text-decoration:underline;padding:0}
@media(min-width:720px){.profile .st{flex:1 1 auto}}
/* ---- catalogus ---- */
.cats{display:grid;gap:16px}
.cat{border:1px solid var(--street);border-radius:8px;background:linear-gradient(180deg,rgba(24,39,65,.85),rgba(16,26,43,.85));padding:14px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.cat::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 50% -10%,rgba(240,166,58,.14),transparent 70%);pointer-events:none}
.cat.soon{opacity:.72}
.cat .hd{display:flex;align-items:baseline;gap:10px}
.cat .ico{font-size:24px;line-height:1;filter:drop-shadow(0 0 8px rgba(166,234,217,.5))}
.cat .hd h2{color:var(--paper);font-size:24px}
.cat .ct{color:var(--fog);font-size:14px}
.game{background:var(--paper);color:var(--ink);border-radius:4px;padding:16px;display:grid;grid-template-columns:84px 1fr;grid-template-areas:"cover title" "cover tag" "desc desc" "meta meta" "btn btn";column-gap:14px;row-gap:6px;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s;overflow:hidden}
.game>*{min-width:0}
.game h3{font-size:clamp(19px,5.4vw,26px);hyphens:auto;overflow-wrap:break-word;padding-right:24px}
.game:hover{transform:translateY(-3px);box-shadow:0 22px 40px rgba(0,0,0,.55)}
.game::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 7px);pointer-events:none}
.game .cover{grid-area:cover;width:84px;height:84px;border-radius:50%;object-fit:cover;align-self:start;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.game div.cover{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2c3f62,#101a2b 70%);border:3px solid #c9a86c;color:var(--spook);filter:drop-shadow(0 0 10px rgba(166,234,217,.45))}
.game div.cover.ico-missing{border-color:var(--violet)}
.game h3{grid-area:title;font-size:26px;line-height:1.05;align-self:end}
.game .tag{grid-area:tag;font-size:15px;color:#3a3a3a}
.game .desc{grid-area:desc;font-size:14px;color:#4a4a4a;margin-top:4px}
.game .meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:4px}
.game .meta i{font-style:normal;font-size:12px;background:#d9cfb6;padding:2px 7px;border-radius:2px;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em}
.game .meta i.new{background:var(--blood);color:#fff}
.game .meta i.pro{background:var(--ink);color:var(--lamp)}
.game .meta i.star{background:transparent;color:#b5651d;padding-left:0}
.game .btn{grid-area:btn;margin-top:6px;position:relative;box-shadow:0 6px 18px rgba(240,166,58,.35)}
.game .btn:hover{filter:brightness(1.08)}
.game.soon{background:repeating-linear-gradient(135deg,#d9cfb6 0 6px,#e2d8c0 6px 12px);color:#5a5345}
.game.soon div.cover{filter:grayscale(1);opacity:.7}
.game .stamp{position:absolute;right:12px;top:10px;transform:rotate(8deg);border:2px solid var(--blood);color:var(--blood);font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;padding:2px 8px;border-radius:2px;opacity:.85}
.game .ribbon{position:absolute;right:-38px;top:14px;font-size:11px;transform:rotate(45deg);background:var(--blood);color:#fff;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;padding:4px 40px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* ---- rest ---- */
.steps{display:flex;flex-direction:column;gap:10px}
.steps div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;color:var(--fog);font-size:15px}
.steps b{font-family:var(--f-type);font-weight:400;font-size:26px;color:var(--lamp);line-height:1}
.kofi{border:1px dashed var(--street);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.kofi .btn{background:#ff5e5b;color:#fff}
footer{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:13px;color:var(--fog);padding-top:12px;border-top:1px solid var(--street)}
footer a,footer button{color:var(--fog);text-decoration:underline;font-size:13px;padding:0}
@media(min-width:720px){.wrap{max-width:900px}.game{grid-template-columns:96px 1fr}.game .cover{width:96px;height:96px}.cats{grid-template-columns:1fr 1fr}.hero{margin:0 calc(50% - 50vw);padding-inline:calc(50vw - 450px + 16px)}.logo{width:360px}}
@media(prefers-reduced-motion:reduce){.hero::before,.logo,.cta .arrow{animation:none}}

/* uitgelichte wandeling bovenaan (seizoen) */
#feat{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
#feat:empty{display:none}
.feature{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:6px;overflow:hidden;background-color:#07090d;background-size:cover;background-position:72% top;background-size:auto 330px;background-repeat:no-repeat;color:#f3ede1;text-decoration:none;border:1px solid #ff7a1a;box-shadow:0 0 0 1px rgba(255,122,26,.25),0 0 46px rgba(255,122,26,.28),0 18px 40px rgba(0,0,0,.55)}
.feature .fbadge{position:absolute;left:0;top:16px;background:#ff7a1a;color:#140a02;font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:14px;padding:6px 16px 6px 12px;border-radius:0 3px 3px 0;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.feature .fbody{display:flex;flex-direction:column;gap:8px;padding:18px 16px 16px;margin-top:210px}
.feature h2{font-family:'IM Fell English SC','Special Elite',Georgia,serif;font-size:clamp(32px,9vw,46px);line-height:1;color:#f3ede1;margin:0;text-shadow:0 2px 0 #000,0 0 26px rgba(255,122,26,.55)}
.feature .tag{font-family:var(--f-type);font-size:17px;color:#ffb37a}
.feature .desc{font-size:15px;color:#d6deea;max-width:60ch}
.feature .meta{display:flex;flex-wrap:wrap;gap:6px}
.feature .meta i{font-style:normal;font-size:12px;background:rgba(255,255,255,.12);padding:2px 8px;border-radius:2px}
.feature .btn{background:#ff7a1a;color:#140a02;margin-top:4px;box-shadow:0 0 22px rgba(255,122,26,.35)}
@media(min-width:760px){.feature{min-height:480px;background-position:center top;background-size:cover}.feature .fbody{max-width:620px;padding:24px}.feature .btn{align-self:flex-start;width:auto;padding-inline:34px}}