/* GTA6Gids: motelbord-logo, sticky menubalk, één leeskolom */
:root{
  --bg:#0f1a24; --surface:#172634; --line:#26394a; --fg:#eef3f5; --muted:#9db0bd;
  --coral:#ff6f61; --teal:#36d1c4; --sun:#ffc857;
  --display:"Bungee","Arial Black",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#fbf6ee; --surface:#ffffff; --line:#e6dccd; --fg:#1b2a36; --muted:#5d6e7a;
  --coral:#e2483a; --teal:#11897f; --sun:#b07800; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#fbf6ee; --surface:#ffffff; --line:#e6dccd; --fg:#1b2a36; --muted:#5d6e7a;
  --coral:#e2483a; --teal:#11897f; --sun:#b07800; color-scheme:light}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--body);margin:0}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--teal)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:760px;margin:0 auto}

/* Kop en menu */
.topbar{padding-block:18px 10px}
.brand{font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--coral);text-decoration:none;
  text-shadow:0 0 14px color-mix(in srgb,var(--coral) 40%,transparent);letter-spacing:.02em}
.brand span{color:var(--teal);text-shadow:0 0 14px color-mix(in srgb,var(--teal) 40%,transparent)}
.menu{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.menu .inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.menu .inner::-webkit-scrollbar{display:none}
.menu a{font:700 .93rem var(--body);color:var(--muted);text-decoration:none;padding:11px 11px;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.menu a[aria-current="page"]{color:var(--fg);border-color:var(--coral)}
.menu a:hover{color:var(--fg)}

main.inner{display:flex;flex-direction:column;gap:24px;padding-block:24px 56px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* Typografie */
h1{font:700 clamp(1.6rem,6vw,2.2rem)/1.15 var(--body);margin:0;text-wrap:balance}
h2{font:700 1.35rem/1.25 var(--body);margin:0;text-wrap:balance}
h3{margin:10px 0 0;font:700 1.08rem/1.3 var(--body);color:var(--coral)}
p{margin:0}
.lead{font-size:1.06rem;color:var(--muted);max-width:62ch}
.note{font-size:.9rem;color:var(--muted);max-width:62ch}
.eyebrow{font:700 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.stack{display:flex;flex-direction:column;gap:12px}
.pagehead{display:flex;flex-direction:column;gap:8px}

/* Home */
.hero{display:flex;flex-direction:column;gap:10px}
.hero .logo{font-family:var(--display);font-size:clamp(2.2rem,9vw,3.6rem);line-height:1;margin:0;color:var(--coral);
  text-shadow:0 0 18px color-mix(in srgb,var(--coral) 45%,transparent);letter-spacing:.02em}
.hero .logo span{color:var(--teal);text-shadow:0 0 18px color-mix(in srgb,var(--teal) 45%,transparent)}
.count{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.digits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.digits div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:10px;
  background:color-mix(in srgb,var(--teal) 9%,transparent)}
.digits b{font:700 clamp(1.6rem,7vw,2.4rem)/1 var(--mono);font-variant-numeric:tabular-nums}
.digits small{font-size:.75rem;color:var(--muted)}
.count p{color:var(--muted);font-size:.92rem}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--fg);text-decoration:none;min-width:0}
.tile b{color:var(--coral)}
.tile span{font-size:.88rem;color:var(--muted)}
.tile:hover{border-color:var(--coral)}

/* Checklists */
.progress{display:flex;align-items:center;gap:12px;font:500 .85rem var(--mono);color:var(--muted)}
.bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .3s}
.group{display:flex;flex-direction:column;gap:6px}
.group h4{margin:6px 0 2px;font:700 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
label.item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
label.item input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--teal);flex:none}
label.item span{min-width:0}
label.item.done span{color:var(--muted);text-decoration:line-through}
.ex{font:500 .68rem var(--mono);color:var(--sun);border:1px solid currentColor;border-radius:4px;padding:0 5px;margin-left:6px;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
form.add{display:flex;gap:8px;flex-wrap:wrap}
form.add input{flex:1 1 200px;min-width:0;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.btn{font:700 .92rem var(--body);padding:10px 16px;border-radius:10px;border:0;background:var(--coral);color:#fff;cursor:pointer}
.btn.ghost{background:none;color:var(--muted);border:1px solid var(--line)}

/* Uitklappers */
details{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 14px}
summary{font-weight:700;cursor:pointer}
details > p{margin-top:8px;color:var(--muted)}
.help{border-color:var(--sun)}
.helpbody{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.helpbody h4{margin:6px 0 0;font:700 1rem var(--body);color:var(--coral)}
ul.list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* Artikelen */
.guide{display:flex;flex-direction:column;gap:12px;max-width:65ch;scroll-margin-top:64px}
.index{display:flex;flex-direction:column;gap:8px}
.idx{display:flex;flex-direction:column;gap:2px;color:var(--fg);text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.idx b{color:var(--coral)}
.idx span{font-size:.88rem;color:var(--muted)}
.sep{border:0;border-top:1px solid var(--line);margin:12px 0;width:100%}
.callout{border:1px solid var(--sun);border-radius:10px;padding:12px 14px;font-size:.93rem;background:color-mix(in srgb,var(--sun) 10%,transparent)}

/* Kaarten: edities, personages, radio, database */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h2,.card h3{margin:0}
.card h3{color:var(--fg);font-size:1.1rem}
.price{font:700 1.3rem var(--mono);color:var(--teal);font-variant-numeric:tabular-nums}
.pill{font:700 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;
  color:var(--sun);border:1px solid currentColor;white-space:nowrap}
.pill.teal{color:var(--teal)}
.meta{font-size:.88rem;color:var(--muted)}
.card.featured{border-color:var(--coral)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.93rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
tr:last-child td{border-bottom:0}

/* Video's */
.vids{display:flex;flex-direction:column;gap:18px}
.vid{display:flex;flex-direction:column;gap:8px}
.frame{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 35%,var(--surface)),color-mix(in srgb,var(--teal) 35%,var(--surface)))}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;width:100%}
.play i{width:68px;height:48px;border-radius:12px;background:var(--coral);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.play i::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.vmeta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline}
.vmeta small{font:500 .78rem var(--mono);color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:18px 32px;font-size:.8rem;color:var(--muted)}
footer .inner{display:flex;flex-direction:column;gap:8px}
@media (prefers-reduced-motion: reduce){.bar i{transition:none}}