/* same as v7.6 scoped styles (prefixed) */ 
.wordhelper-v76{--bg:#0f1115; --fg:#eaeaea; --muted:#fff; --card:#141821; --border:#404d62;
--tile:#bca574; --tile-edge:#8e7b4f; --tile-text:#101010; --tile-red:#b83a46; --tile-red-edge:#e19aa3;
--tile-joker:#325b2a; --tile-joker-edge:#778299; --tile-joker-text:#e9eefc; --accent:#eaeaea; --accent-soft: rgba(234,234,234,.08);
--gap:10px; --pill-bg: rgba(255,255,255,.06); --pill-border: rgba(255,255,255,.14); --success:#27ae60; --focus:#4c86ff}
.wordhelper-v76 .whv-wrap{max-width:920px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom);color:var(--fg)}
.wordhelper-v76 h1{font-size:1.18rem;margin:0 0 10px}
.wordhelper-v76 .whv-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:12px}
.wordhelper-v76 select,.wordhelper-v76 input,.wordhelper-v76 button{border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:12px;font-size:1rem}
.wordhelper-v76 select{padding:10px 12px}
.wordhelper-v76 input[type="text"]{padding:14px 16px;flex:1;min-width:200px;border:2px solid var(--border);outline:none}
.wordhelper-v76 input[type="text"]:focus{border-color:var(--focus); box-shadow:0 0 0 3px rgba(76,134,255,.25)}
.wordhelper-v76 button{padding:12px 14px}
.wordhelper-v76 .whv-primary{background:var(--accent);color:#000;border-color:var(--accent)}
.wordhelper-v76 .whv-hint{color:var(--muted);font-size:.95rem; padding:16px 0px 0px 16px; font-style:italic;}
.wordhelper-v76 .whv-section-title{font-weight:700;margin-bottom:18px; margin-left:12px;}
.wordhelper-v76 .whv-area{border:2px dashed var(--border);border-radius:14px;padding:12px;min-height:76px;overflow:hidden; margin-top:12px;}
.wordhelper-v76 .whv-tiles{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap}
.wordhelper-v76 .tile{width:50px;height:50px;border-radius:10px;border:1px solid var(--tile-edge);background:var(--tile);display:flex;align-items:center;justify-content:center;position:relative;font-weight:900;color:var(--tile-text);user-select:none;will-change:transform}
.wordhelper-v76 .tile small{position:absolute;right:6px;bottom:4px;font-size:.7rem;font-weight:800;color:#000}
.wordhelper-v76 .tile.red{background:var(--tile-red);border-color:var(--tile-red-edge);color:#fff}
.wordhelper-v76 .tile.joker{background:var(--tile-joker);border-color:var(--tile-joker-edge);color:var(--tile-joker-text)}
.wordhelper-v76 .tile.joker .joker-tag{position:absolute;right:6px;top:24px;font-size:.7rem;letter-spacing:.04em;opacity:.9; color:#fff;}
.wordhelper-v76.gaps-active .drop-gap{width:18px;height:52px;border:2px dashed var(--accent);border-radius:8px;transition:border-color .12s}
.wordhelper-v76 .drop-gap{width:0;height:52px;border:0;overflow:hidden;background:transparent}
.wordhelper-v76 .drop-gap.over{border-color:#fff}

/* .wordhelper-v76 .whv-langbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;justify-content:space-between} */
.whv-langbar{display:none;}
#whv-title{display:none;}
#whv-status{display:none;}
#whv-label-yourletters{ font-size:30px;}
input[type=text]{font-size:30px !important;
color:#fff !important;
font-weight:800 !important;
letter-spacing:0.02em !important;
}
input::placeholder {
  color: white !important;
}
#whv-intro{margin-bottom:16px;  font-style:normal;}

.wordhelper-v76 .whv-langleft{display:flex;align-items:center;gap:10px}
.wordhelper-v76 .whv-inputbox{display:flex;gap:10px;align-items:center;background:var(--accent-soft);border:1px solid var(--border);border-radius:14px;padding:10px;flex-wrap:wrap}
.wordhelper-v76 .whv-btn-tile{width:50px;height:50px;border-radius:10px;border:1px solid var(--tile-joker-edge);background:var(--tile-joker);color:var(--tile-joker-text);font-weight:900;display:flex;align-items:center;justify-content:center;position:relative}
.wordhelper-v76 .whv-btn-tile small{position:absolute;bottom:4px;font-size:.6rem;opacity:.9}
.wordhelper-v76 .whv-btn-clear{height:50px;border-radius:10px}
.wordhelper-v76 .whv-btn-search{font-size:1.05rem;font-weight:700;border-radius:12px}
.wordhelper-v76 .whv-palette{display:grid;grid-template-columns:repeat(auto-fit, minmax(44px, 1fr));gap:8px}
.wordhelper-v76 .whv-results{display:grid;gap:12px}
.wordhelper-v76 .group{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.wordhelper-v76 .groupHeader{position:sticky;top:0;background:rgba(20,24,33,.9);backdrop-filter: blur(6px);display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);z-index:1}
.wordhelper-v76 .groupHeader h3{margin:0;font-size:1rem}
.wordhelper-v76 .count{font-size:.9rem;color:var(--muted)}
.wordhelper-v76 .result-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));gap:8px;padding:10px}
.wordhelper-v76 .word-pill{padding:8px 10px;border:1px solid var(--pill-border);border-radius:10px;background:var(--pill-bg);text-align:center;letter-spacing:.02em}
.wordhelper-v76 .word-pill.copied{outline:2px solid var(--success)}
.wordhelper-v76 .whv-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#1c232e;color:#fff;border:1px solid #2a3342;border-radius:999px;padding:10px 14px;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .2s}
.wordhelper-v76 .whv-toast.show{opacity:1}
@media (max-width: 640px){
  .wordhelper-v76 #whv-rackInput{flex:1 1 100%}
  .wordhelper-v76 .whv-btn-search{width:100%}
}

/* Resultaten: flexibel i.p.v. grid met vaste kolommen */
.wordhelper-v76 .result-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wordhelper-v76 .word-pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border, #2a2f3a);
  background:var(--card, #0f1320);
  font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  white-space:normal;           /* mag afbreken */
  word-break:break-word;        /* lange woorden gaan netje door */
  max-width:100%;
}

/* Drop-gaps duidelijk en responsief */
.wordhelper-v76.gaps-active .drop-gap{
  width:18px;
  height:48px;
  border:2px dashed var(--accent, #8ab4ff);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  margin:0 2px;
}

/* Rode palette-letters moeten duidelijk “pakbaar” lijken */
.wordhelper-v76 .tile.red{
  cursor:grab;
}
.wordhelper-v76 .tile.red:active{
  cursor:grabbing;
}

.wordhelper-v76 .word-pill .whv-suffix {
  color: #ff6b6b;            /* rood accent */
  margin-left: 2px;
}
.wordhelper-v76 .result-grid{display:flex;flex-wrap:wrap;gap:8px}
.wordhelper-v76 .word-pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--border,#2a2f3a);background:var(--card,#0f1320);font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;white-space:normal;word-break:break-word;max-width:100%}
.wordhelper-v76.gaps-active .drop-gap{width:18px;height:48px;border:2px dashed var(--accent,#8ab4ff);border-radius:8px;background:rgba(255,255,255,.06);margin:0 2px}
.wordhelper-v76 .tile.red{cursor:grab}
.wordhelper-v76 .tile.red:active{cursor:grabbing}
/* highlight van alle fixed posities (prefix/suffix/midden) */
.wordhelper-v76 .word-pill .whv-fixed{color:#ff6b6b}
#whv-fixedCaption{display:none;}