:root{
  /* Licht: papier met inkt. Op limoen staat altijd donkere tekst. */
  --bg:#F3F0E8; --surface:#FBFAF6; --chip:#E4E0D5; --line:#D9D4C7;
  --ink:#121214; --muted:#5E5B55;
  --pop:#D8FF3C; --on-pop:#121214;
  --pink:#FF9ED6; --cobalt:#3340FF;
  --tab-on-bg:#121214; --tab-on-ink:#D8FF3C;
  --focus:#3340FF; --header:rgba(243,240,232,.92);
  --cream:#F5F1E8;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121214; --surface:#1B1B1F; --chip:#232327; --line:#2C2C31;
    --ink:#F5F1E8; --muted:#A9A7A0;
    --tab-on-bg:#D8FF3C; --tab-on-ink:#121214;
    --focus:#D8FF3C; --header:rgba(18,18,20,.92);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121214; --surface:#1B1B1F; --chip:#232327; --line:#2C2C31;
  --ink:#F5F1E8; --muted:#A9A7A0;
  --tab-on-bg:#D8FF3C; --tab-on-ink:#121214;
  --focus:#D8FF3C; --header:rgba(18,18,20,.92);
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--header);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
button,a,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none !important}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--header);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar{max-width:460px;margin:0 auto;padding:14px 16px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.brand{font-family:var(--display);font-weight:900;font-size:1.65rem;line-height:.9;letter-spacing:-.02em;margin:0}
.brand span{display:block}
.people{display:flex;align-items:center;padding-top:2px}
.person{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);margin-left:-6px;background:var(--pink);color:#121214;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.person.me{background:var(--tab-on-bg);color:var(--tab-on-ink)}
.tabs{max-width:460px;margin:0 auto;padding:12px 16px 12px;display:flex;gap:6px}
.tab{appearance:none;border:0;background:var(--chip);color:var(--ink);padding:8px 14px;border-radius:999px;font-weight:700;font-size:.85rem;cursor:pointer}
.tab[aria-selected="true"]{background:var(--tab-on-bg);color:var(--tab-on-ink)}

main{max-width:460px;margin:0 auto;padding:6px 16px 24px}
.notice{background:var(--surface);border-radius:22px;padding:18px;margin:8px 0 16px}
.notice h2{margin:0 0 4px;font-size:1.05rem}
.notice p{margin:0;color:var(--muted)}

/* Inloggen */
.login{display:grid;gap:14px;background:var(--surface);border-radius:30px;padding:24px 22px;margin:24px 0}
.login h2{font-family:var(--display);font-weight:900;font-size:2rem;line-height:.95;letter-spacing:-.02em;margin:0 0 6px}
.login label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.login input{width:100%;padding:14px 16px;border-radius:16px;border:2px solid transparent;background:var(--chip);font-size:1rem}
.login input:focus{border-color:var(--focus);outline:none}
.form-error{margin:0;color:#E5484D;font-weight:700;min-height:1.45em}
.primary{appearance:none;border:0;border-radius:999px;height:54px;padding:0 22px;background:var(--pop);color:var(--on-pop);font-weight:700;font-size:1rem;cursor:pointer}
.primary:disabled{opacity:.6;cursor:default}

/* Stapel */
.deck{position:relative;height:min(560px,calc(100svh - 330px));min-height:420px}
.browse{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;color:var(--muted);font-size:.85rem;font-weight:700;min-height:40px}
.nav{appearance:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--chip);font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.nav:disabled{opacity:.35;cursor:default}
.card{position:absolute;inset:0;border-radius:30px;padding:18px;display:flex;flex-direction:column;
  background:var(--p-bg);color:var(--p-ink);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s;cursor:grab}
.card.behind{transform:translateY(12px) scale(.95);opacity:.55;pointer-events:none}
.card.dragging{cursor:grabbing}
.card.has-poster{--p-ink:var(--cream);color:var(--cream);background:#0b0b0d}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.card-info{position:relative;z-index:1;margin-top:auto}
/* Het verloop zit achter het tekstblok zelf, zodat de tekst leesbaar blijft hoe hoog dat blok ook is. */
.has-poster .card-info{margin:auto -18px -18px;padding:80px 18px 18px;
  background:linear-gradient(to bottom,rgba(10,10,12,0),rgba(10,10,12,.8) 70px,rgba(10,10,12,.94))}
.sticker{position:absolute;z-index:2;top:16px;right:16px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink);color:#121214;font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.02em;transform:rotate(-12deg)}
.card-title{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.02em;margin:0 0 10px;overflow-wrap:anywhere;hyphens:auto}
.card-director{font-weight:700;font-size:.92rem;margin:0 0 8px;opacity:.9}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pill{border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:700;background:rgba(245,241,232,.16)}
.pill.genre{background:var(--cream);color:#121214}
.card:not(.has-poster) .pill{background:color-mix(in srgb,var(--p-ink) 18%,transparent)}
.card:not(.has-poster) .pill.genre{background:var(--p-ink);color:var(--p-bg)}
.card-blurb{margin:0;font-size:.92rem;line-height:1.42;opacity:.88;max-width:38ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stamp{position:absolute;z-index:3;top:24px;padding:6px 16px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:1.8rem;line-height:1;opacity:0;pointer-events:none}
.stamp.yes{left:18px;background:var(--pop);color:#121214;transform:rotate(-10deg);opacity:var(--yes-o,0)}
.stamp.no{right:18px;background:var(--cream);color:#121214;transform:rotate(10deg);opacity:var(--no-o,0)}

.controls{display:flex;align-items:center;gap:8px;margin-top:16px}
.choice{appearance:none;border:0;flex:1;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1rem;cursor:pointer}
.choice.no{background:var(--chip);color:var(--ink)}
.choice.yes{background:var(--pop);color:var(--on-pop)}
.choice:active,.trailer:active{transform:scale(.96)}
.trailer{appearance:none;border:0;flex:none;width:56px;height:56px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-size:1.1rem;cursor:pointer}
.sub{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--muted);font-size:.88rem;min-height:2em}
.link{appearance:none;border:0;background:none;padding:6px 0;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.link:disabled{opacity:.4;cursor:default}

/* Alle films */
.progress{color:var(--muted);font-size:.88rem;font-weight:700;margin:0 0 14px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mini{appearance:none;border:0;position:relative;overflow:hidden;width:100%;aspect-ratio:2/3;border-radius:22px;padding:10px;background:var(--p-bg);color:var(--p-ink);display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer}
.mini.has-poster{--p-ink:var(--cream);color:var(--cream);background:#0b0b0d}
.mini.has-poster::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,12,0) 45%,rgba(10,10,12,.88) 100%)}
.mini > span{position:relative;z-index:1}
.mini-top{font-size:.75rem;font-weight:700}
.mini-top.fresh{background:var(--pink);color:#121214;border-radius:999px;padding:2px 9px}
.mini-title{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.01em;font-size:1.05rem;margin:auto 0 8px;overflow-wrap:anywhere}
.has-poster .mini-title{font-size:.8rem}
.mini-state{border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:700;background:var(--chip);color:var(--ink)}
.mini-state.is-yes{background:var(--cream);color:#121214}
.mini-state.is-match{background:var(--pop);color:#121214}
.mini-state.is-no{color:var(--muted)}

/* Kijklijst */
.count{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;margin-left:4px;padding:0 .35em;border-radius:999px;background:var(--pop);color:#121214;font-size:.72rem}
.tab[aria-selected="true"] .count{background:var(--tab-on-ink);color:var(--tab-on-bg)}
.progress-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 16px}
.prog{background:var(--surface);border-radius:20px;padding:12px 14px}
.prog-top{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:.85rem;margin-bottom:8px}
.prog-top span:last-child{color:var(--muted)}
.meter{height:10px;border-radius:999px;background:var(--chip);overflow:hidden}
.meter span{display:block;height:100%;min-width:10px;border-radius:999px;background:var(--pink)}
.prog.me .meter span{background:var(--pop)}
.seg{display:flex;background:var(--chip);border-radius:999px;padding:4px;margin:0 0 8px}
.seg button{flex:1;appearance:none;border:0;background:none;padding:9px;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--tab-on-bg);color:var(--tab-on-ink)}
.hint{color:var(--muted);font-size:.85rem;margin:0 0 12px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border-radius:22px;padding:8px 10px 8px 8px}
.thumb{appearance:none;border:0;padding:0;position:relative;width:52px;height:76px;border-radius:14px;overflow:hidden;background:var(--p-bg);color:var(--p-ink);cursor:pointer;flex:none}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rank{position:absolute;left:4px;bottom:4px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--pop);color:#121214;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.72rem}
.row-body{min-width:0}
.row h3{margin:0;font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.row p{margin:4px 0 0;color:var(--muted);font-size:.8rem;font-weight:500}
.row .plan{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:var(--cobalt);color:#fff;font-weight:700;font-size:.75rem}
.row-actions{display:flex;gap:6px}
.icon:disabled{opacity:.35;cursor:default}
.icon.play{background:var(--cobalt);color:#fff}
.icon.seen{font-weight:700}
.icon.seen:hover{background:var(--pop);color:#121214}
.handle{touch-action:none;cursor:grab;font-size:1.2rem;letter-spacing:-.1em}
.handle:active{cursor:grabbing}
.row.lifted{position:relative;z-index:3;background:var(--chip);box-shadow:0 14px 30px -10px rgba(0,0,0,.45);transition:none}
.row.lifted .thumb{pointer-events:none}
.row.is-seen .thumb{filter:grayscale(.6);opacity:.85}
.row.is-seen .rank{background:var(--cream);color:#121214}
.mini-state.is-seen{background:var(--cobalt);color:#fff}
h2.section .count{vertical-align:middle}
h2.section{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em;margin:28px 0 10px}

/* Helemaal bij */
.done{position:relative;background:var(--surface);border-radius:30px;padding:28px 22px 24px;margin:8px 0 0;overflow:hidden}
/* Naast de tweede, korte regel "bij." zodat hij de titel niet raakt. */
.done-sticker{top:56px;right:20px;width:66px;height:66px;font-size:.7rem;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:rotate(-12deg) scale(.4);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:1}}
.done-title{font-family:var(--display);font-weight:900;font-size:clamp(2rem,10.5vw,2.6rem);line-height:.95;letter-spacing:-.03em;margin:0 0 16px}
.done-lead{margin:0 0 18px;padding-right:64px;font-weight:700;font-size:1.02rem}
.done-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.stat{background:var(--chip);border-radius:22px;padding:14px 12px;display:grid;gap:2px}
.stat b{font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1;letter-spacing:-.02em}
.stat span{font-size:.8rem;font-weight:700;color:var(--muted)}
.stat.is-yes{background:var(--pop);color:#121214}
.stat.is-match{background:var(--pink);color:#121214}
.stat.is-yes span,.stat.is-match span{color:#121214;opacity:.75}
.done-note{color:var(--muted);font-size:.88rem;margin:0 0 20px}
.done-actions{display:flex;gap:8px;flex-wrap:wrap}
.done-actions .primary{flex:1 1 auto}
.secondary{appearance:none;border:0;border-radius:999px;height:54px;padding:0 22px;background:var(--chip);color:var(--ink);font-weight:700;font-size:1rem;cursor:pointer}
.done-undo{display:block;margin:16px auto 0}

.empty{text-align:center;padding:48px 12px;color:var(--muted)}
.empty h2{font-family:var(--display);font-weight:900;font-size:2rem;line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}

/* Trailer */
dialog{padding:0;border:0;border-radius:26px;background:var(--surface);color:var(--ink);width:min(960px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:hidden}
dialog::backdrop{background:rgba(10,10,12,.82)}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px}
.dialog-bar h2{margin:0;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video{aspect-ratio:16/9;background:#000}
.video iframe{width:100%;height:100%;border:0;display:block}
.icon{appearance:none;width:40px;height:40px;flex:none;border-radius:50%;border:0;background:var(--chip);display:grid;place-items:center;cursor:pointer;font-size:1rem}

.foot{max-width:460px;margin:0 auto;padding:0 16px 32px;color:var(--muted);font-size:.75rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.foot p{margin:0;max-width:30ch}
.foot .link{color:var(--muted);font-size:.85rem}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:700;font-size:.9rem;max-width:calc(100% - 32px);z-index:20}
.toast.pop{background:var(--pop);color:#121214}

@media (prefers-reduced-motion: reduce){.card{transition:none}.choice:active,.trailer:active{transform:none}.done-sticker{animation:none}}