:root {
    --bg: #0b0e14;
    --sclera: #f4f2ee;
    --iris-low: #2f6b4a;
    --iris-mid: #b8790f;
    --iris-high: #b0301f;
    --iris-idle: #3a4152;
    --text: #e8e6df;
    --muted: #8b93a5;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    background: var(--bg); color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
  }
  .stage {
    height: 100vh; width: 100vw;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.2vh;
  }
  .eye-wrap {
    position: relative; width: min(70vw, 620px);
    display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
  }
  svg.eye { width: 100%; height: auto; display: block; }
  .eyelid-top, .eyelid-bottom {
    d: path("M10,110 Q200,10 390,110 Q200,150 10,110 Z");
    transition: d 0.9s ease;
  }
  .iris { transition: fill 0.6s ease, opacity 0.9s ease; }
  .pupil { fill: #05070a; }
  .eyeball { transition: opacity 0.9s ease; }
  .eyeball.loading { animation: dart 2.2s ease-in-out infinite; }
  /* Niets gebeurt al even — de iris valt in slaap i.p.v. eindeloos wakker te
     staren, in drie stappen (1/3, 2/3, helemaal dicht) i.p.v. in één keer.
     Zelfde pad-vorm op de zichtbare ooglid-outline en op de clipPath erboven
     (zie index.html), zodat de iris/pupil mee "onder het ooglid" verdwijnt
     i.p.v. over een gekrompen ooglid heen te blijven steken. */
  .stage.drowsy-1 .eyelid-top { d: path("M10,110 Q200,41 390,110 Q200,139 10,110 Z"); }
  .stage.drowsy-2 .eyelid-top { d: path("M10,110 Q200,73 390,110 Q200,127 10,110 Z"); }
  .stage.sleeping .eyelid-top { d: path("M10,110 Q200,104 390,110 Q200,116 10,110 Z"); }
  .stage.drowsy-2 .eyeball, .stage.sleeping .eyeball { opacity: 0; }
  .zzz {
    position: absolute; top: 4%; right: 14%; pointer-events: none;
    opacity: 0; transition: opacity 0.8s ease;
  }
  .stage.sleeping .zzz { opacity: 1; }
  .zzz span {
    display: inline-block; color: var(--muted); font-weight: 700; opacity: 0;
  }
  .stage.sleeping .zzz span { animation: zzz-float 2.6s ease-in infinite; }
  .zzz span:nth-child(1) { font-size: 13px; animation-delay: 0s; }
  .zzz span:nth-child(2) { font-size: 17px; animation-delay: 0.6s; }
  .zzz span:nth-child(3) { font-size: 21px; animation-delay: 1.2s; }
  @keyframes zzz-float {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(10px, -20px); }
  }
  @keyframes dart {
    0%   { transform: translate(-55px, -7px); }
    12%  { transform: translate(40px, 6px); }
    27%  { transform: translate(-25px, 9px); }
    41%  { transform: translate(58px, -7px); }
    58%  { transform: translate(-50px, 4px); }
    73%  { transform: translate(20px, -9px); }
    88%  { transform: translate(-12px, 7px); }
    100% { transform: translate(-55px, -7px); }
  }
  #domain {
    background: var(--sclera); border: none; outline: none;
    text-align: center; color: #14171d;
    font-size: clamp(16px, 2.4vw, 26px);
    font-family: inherit; font-weight: 500;
    width: min(60vw, 420px);
    padding: 14px 22px;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    letter-spacing: 0.01em;
  }
  #domain::placeholder { color: #9a9c9f; }
  #domain:disabled { opacity: 0.55; cursor: default; }
  .hint {
    color: var(--muted); font-size: 13px; letter-spacing: 0.04em;
    min-height: 1.4em; text-align: center;
  }
  .results {
    width: min(90vw, 640px);
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s ease;
  }
  .results.open { max-height: 60vh; overflow-y: auto; }
  .score-row {
    display: flex; align-items: baseline; gap: 10px; justify-content: center;
    margin-bottom: 14px;
  }
  .score-num { font-size: 34px; font-weight: 700; }
  .score-label { color: var(--muted); font-size: 13px; }
  .flag {
    background: #131826; border-left: 3px solid var(--iris-mid);
    padding: 10px 14px; margin: 0 0 8px; border-radius: 2px;
    font-size: 14px; line-height: 1.4; color: var(--text);
  }
  .flag.clean { border-left-color: var(--iris-low); color: var(--muted); }
  .flag.red { border-left-color: var(--iris-high); }
  .flag-title { font-weight: 600; margin-bottom: 3px; }
  .flag-body { color: var(--muted); font-size: 13px; }
  a.dl {
    display: block; text-align: center; margin-top: 14px;
    color: var(--muted); font-size: 12px; text-decoration: underline;
  }
  #cancel {
    display: none;
    background: none; border: 1px solid var(--muted); color: var(--muted);
    font-size: 12px; letter-spacing: 0.04em; font-family: inherit;
    padding: 6px 16px; border-radius: 999px; cursor: pointer;
  }
  #cancel.visible { display: inline-block; }
  #cancel:active { opacity: 0.7; }

  .legal { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); }
  .legal a { color: var(--muted); }