:root{ --bg:#16211a; --paneel:#1f2e24; --rand:#33493a; --accent:#e8b44a; --accent2:#8fce8f;
    --tekst:#e6eede; --dof:#93a996; }
  *{box-sizing:border-box; -webkit-user-select:none; user-select:none;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--tekst);
    font-family:Georgia,'Times New Roman',serif;}
  #app{max-width:760px;margin:0 auto;padding:12px;}
  h1{font-size:1.5em;margin:.2em 0;color:var(--accent2);}
  .sub{color:var(--dof);font-size:.85em;margin-bottom:8px;}
  .hud{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
  .chip{background:var(--paneel);border:1px solid var(--rand);border-radius:8px;padding:6px 12px;font-size:.9em;}
  .chip b{color:var(--accent);}
  #kas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:var(--paneel);
    border:1px solid var(--rand);border-radius:12px;padding:12px;}
  .vak{aspect-ratio:1;background:#182319;border:2px dashed #2c4032;border-radius:10px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
    touch-action:manipulation;
    font-size:1.7em;position:relative;transition:transform .12s, box-shadow .12s;}
  .vak:focus-visible, button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
  .vak{color:var(--tekst);padding:0;}
  .vak .tier{position:absolute;bottom:3px;right:6px;font-size:.42em;color:var(--dof);}
  .vak.vol{border-style:solid;border-color:#3d5a45;background:#1d2c20;}
  /* v0.5: selectie en doel zonder schaalsprong; doelvakken krijgen naast kleur ook een ＋-teken */
  .vak.gekozen{border-style:solid;border-color:var(--accent);background:#2e3b22;box-shadow:0 0 0 3px var(--accent);z-index:2;}
  .vak.paar,.vak.hint{border-style:solid;border-color:var(--accent);}
  .vak.paar::after,.vak.hint::after{content:"＋";position:absolute;top:2px;left:5px;font-size:.45em;color:var(--accent);}
  .vak.hint{animation:hint 2.4s ease-in-out 3;}
  .vak.sleep{opacity:.45;}
  .vak.nieuw{animation:pop .3s ease-out;}
  @keyframes pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
  @keyframes hint{50%{box-shadow:0 0 0 3px rgba(232,180,74,.35)}}
  #sleepBeeld{position:fixed;left:0;top:0;z-index:60;pointer-events:none;font-size:2em;}
  @media(prefers-reduced-motion:reduce){.vak{transition:none}.vak.nieuw,.vak.hint{animation:none}}
  .paneel{background:var(--paneel);border:1px solid var(--rand);border-radius:10px;padding:12px;margin:10px 0;}
  .vtitel{color:var(--accent2);font-size:.95em;margin-bottom:6px;}
  button{font-family:inherit;font-size:.9em;background:#2a3d30;color:var(--tekst);
    border:1px solid var(--rand);border-radius:8px;padding:9px 10px;cursor:pointer;touch-action:manipulation;}
  button:hover:not(:disabled){background:#345043;}
  button:disabled{opacity:.4;cursor:default;}
  .rij{display:flex;justify-content:space-between;align-items:center;gap:8px;
    border-bottom:1px dashed var(--rand);padding:6px 0;font-size:.9em;}
  .klein{font-size:.78em;color:var(--dof);}
  #tafelBalk{height:10px;background:#12190f;border-radius:5px;overflow:hidden;margin:6px 0;}
  #tafelBalk div{height:100%;background:var(--accent2);transition:width .25s;}
  #gids{display:flex;flex-wrap:wrap;gap:6px;}
  .soort{background:#182319;border:1px solid var(--rand);border-radius:8px;padding:6px 10px;
    font-size:1.2em;text-align:center;min-width:64px;}
  .soort .naam{display:block;font-size:.5em;color:var(--dof);}
  .soort.onbekend{filter:grayscale(1);opacity:.35;}
  .soort.volgende{opacity:.8;border:2px dashed var(--accent);}
  #doel .stap{color:var(--accent);}
  #mergeInfo{min-height:2.6em;margin:4px 0 8px;font-size:.85em;}
  /* v0.5: hoekige huisstijl (Pausito-hub/Sim Orangerie), Bloesemhof-kleuren blijven */
  .chip,.paneel,#kas,.soort,button,dialog,.melding,#tafelBalk{border-radius:3px;}
  .vak{border-radius:2px;}
  #meldingen{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:50;}
  .melding{background:var(--accent);color:#241b06;border-radius:8px;padding:8px 16px;margin-top:6px;
    font-size:.9em;box-shadow:0 4px 14px rgba(0,0,0,.4);}
  dialog{background:var(--paneel);color:var(--tekst);border:2px solid var(--accent2);border-radius:12px;
    max-width:440px;font-family:inherit;}
  dialog::backdrop{background:rgba(0,0,0,.6);}
  /* v0.5.1: bord en meldingen nooit onder de vaste onderbalk (.game-tools) of de sticky HUD. --bh-balk/--bh-hud zet het spel
     zelf uit de gemeten hoogte; html[data-game=bloesemhof] gaat boven de gedeelde runtime-regels zonder die te wijzigen. */
  html[data-game=bloesemhof]{scroll-padding-bottom:calc(var(--bh-balk,7rem) + 8px);scroll-padding-top:calc(var(--bh-hud,0px) + 8px);}
  html[data-game=bloesemhof] #app{max-width:min(100%,760px);}
  #kas{max-width:max(240px,calc((100dvh - var(--bh-balk,64px) - var(--bh-hud,40px) - 66px) * 1.25 + 58px));margin-inline:auto;}
  #meldingen{bottom:calc(var(--bh-balk,0px) + 10px);pointer-events:none;max-width:calc(100% - 24px);}
  .melding{border-radius:3px;}
  /* eindhint: na drie pulsen blijft een kleine, stilstaande ring rond het paar (ook bij reduced-motion) */
  html[data-game=bloesemhof] #kas .vak.hint{box-shadow:0 0 0 2px rgba(232,180,74,.55),0 3px 0 #284c3933;}
  html[data-game=bloesemhof] #kas .vak.gekozen{box-shadow:0 0 0 3px var(--accent);}
  @media(max-width:560px){
    .hud{gap:6px;}.chip{padding:5px 9px;font-size:.82em;}
    .paneel{padding:10px;margin:8px 0;}
    html[data-game=bloesemhof] .game-tools{row-gap:.25rem;padding-top:.4rem;}
    html[data-game=bloesemhof] .game-tools [role=status]{order:-1;flex:1 1 100%;line-height:1.3;}
    html[data-game=bloesemhof] .game-tools .game-save-menu:not([open]){flex:0 1 8.5em;text-align:right;}
    html[data-game=bloesemhof] .game-save-menu:not([open]) summary{justify-content:flex-end;}
  }
#tafelVul{width:0%}.uitleg{margin:6px 0}.koraal-titel{color:var(--accent2);margin-top:0}.platform-nav,.platform-footer{padding:16px;max-width:760px;margin:auto}.platform-nav a,.platform-footer a{color:var(--accent2)}.platform-footer{padding-bottom:110px;font-size:.85rem}