/* ===================== */
/* 1. Reset & Base Styles */
/* ===================== */
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top center,#2A0A85 0%,#1A0033 100%);color:#F5F5FF;min-height:100vh}
input:focus,select:focus,textarea:focus,button:focus{outline:none;box-shadow:none}
.tray input::selection{background:transparent}
h1{font-size:28px;line-height: 1.25}h2{font-size:24px;line-height: 1.3}h3{font-size:20px;line-height: 1.35}

/* ===================== */
/* 2. Header & Logo */
/* ===================== */
.header{background:#1A0033;padding:15px 0 15px 10px;position:relative}
.header-inner{max-width:900px;min-width:300px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding-left:20px;flex-wrap:wrap}
.logo-block{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.logo{display:flex;justify-content:flex-start;align-items:center;gap:4px;flex-wrap:wrap}
.tile{width:32px;height:32px;background-image:url("tile.png");background-size:100% 100%;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;color:#000}
.solver{font-size:28px;font-weight:700;font-style:italic;color:#C77DFF;margin-left:8px}
.tagline{font-size:14px;opacity:.85;width:100%;text-align:left;margin-top:5px;letter-spacing:.7px}

/* ===================== */
/* 3. Hamburger Menu */
/* ===================== */
#menu-toggle{display:none}
.hamburger-wrapper{position:relative;display:flex;align-items:flex-start;margin-right:10px}
.hamburger{display:flex;flex-direction:column;justify-content:space-between;width:25px;height:20px;cursor:pointer;margin:5px 15px 0 0}
.hamburger span{display:block;height:3px;width:100%;background-color:#C77DFF;border-radius:2px;transition:.3s}
#menu-toggle:checked + .hamburger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
#menu-toggle:checked + .hamburger span:nth-child(2){opacity:0}
#menu-toggle:checked + .hamburger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.hamburger-menu{position:absolute;top:70px;right:0;background:#2D0A55;padding:10px 20px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:9999;display:none;width:180px}
#menu-toggle:checked ~ .hamburger-menu{display:block}
.hamburger-menu ul{list-style:none;padding:0;margin:0}
.hamburger-menu li{margin-bottom:8px}
.hamburger-menu li:last-child{margin-bottom:0}
.hamburger-menu a{color:#fff;text-decoration:none;font-size:18px;display:block;padding:6px 0}
.hamburger-menu a:hover{background:rgba(199,125,255,.2);border-radius:5px}

/* ===================== */
/* 4. Wrapper & Boxes */
/* ===================== */
.wrapper{max-width:900px;min-width:300px;margin:auto;padding:0 10px 10px 10px}
.input-box,.results{background:rgba(32,0,63,.8);border-radius:14px;padding:20px;box-shadow:0 0 15px rgba(160,32,240,.3);margin:20px 0}
.results,.wordlist{font-size:16px;line-height:1.05}
.results{margin-bottom: 100px;}

/* ===================== */
/* 5. Tray / Inputs */
/* ===================== */
.tray-container{display:flex;flex-direction:column;gap:12px}
.tray-wrapper{display:flex;justify-content:center;padding:20px;background:#2D0A55;border-radius:10px}
.tray{display:flex;gap:6px;flex-wrap:wrap}
.tray input{box-sizing:border-box;width:60px;height:60px;background-color:transparent;background-image:url("tile60.png");background-repeat:no-repeat;border:none;text-align:center;font-size:32px;font-weight:bold;color:#000;opacity:.7;text-transform:uppercase;transition:transform .1s,opacity .1s;caret-color:transparent;user-select:none}
.tray input:focus{opacity:1;transform:scale(1.1)}
.tray input:not(:placeholder-shown){opacity:1}
.tile-highlight{opacity:1!important;transform:scale(1.1)}
.blink-underline{background-image:url("sprite60.png")!important;background-size:60px 120px;animation:blink60 1.1s infinite steps(1)}
@keyframes blink60{0%{background-position-y:0}50%{background-position-y:-60px}100%{background-position-y:0}}

/* ===================== */
/* 6. Advanced Row */
/* ===================== */
.advanced-row{display:none;gap:8px}
#toggleAdvanced:checked ~ .advanced-row{display:flex}
.advanced-row select,.advanced-row input{flex:1 1 50%;min-width:0;border-radius:8px;padding:0 10px;background:#3A0CA3;color:#fff;border:none;box-sizing:border-box;height:40px;font-size:14px}
.advanced-row input{border:2px solid #8F00FF;text-transform:uppercase;letter-spacing:4px}
#advancedRow input[name="letters"]::placeholder{color:#888;letter-spacing:normal;text-transform:none!important}

/* ===================== */
/* 7. Buttons */
/* ===================== */
.button-row{display:flex;gap:1%;width:100%;height:40px}
.button-row button,.advanced-label{border:none;cursor:pointer}
.clear-btn{width:24%;background:#3A0CA3;color:#fff;border-radius:8px}
.submit-btn{width:50%;background:linear-gradient(135deg,#C77DFF,#7B2CBF);color:#fff;border-radius:8px}

/* Advanced button logic */
.advanced-label{width:24%;background:#7B2CBF;color:#fff;display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;border-radius:8px}
.advanced-gear{display:inline}
.advanced-x{display:none;font-size:1.25em;font-weight:700;margin-left:0.25em;color:#bbb}
#toggleAdvanced:checked ~ .button-row .advanced-label .advanced-gear{display:none}
#toggleAdvanced:checked ~ .button-row .advanced-label .advanced-x{display:inline}

.submit-btn:hover{transform:scale(1.02);transition:.2s}
.clear-btn:hover,.advanced-label:hover{transform:scale(1.04);transition:.2s}

/* ===================== */
/* 8. Ads */
/* ===================== */
.ad-top,.ad-bottom{background:#2D0A55;text-align:center;color:#fff;z-index:100}
.ad-top{width:100%;max-width:900px;margin:20px auto;height:90px;display:none;border-radius:10px;line-height:90px}
.ad-bottom{position:fixed;bottom:0;left:0;right:0;width:100%;height:90px;display:none;line-height:90px}

/* ===================== */
/* 9. Word List & Results */
/* ===================== */

/* ===================== */
/* Results container */
/* ===================== */
.results-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;          /* ruimte tussen HIGH / MID / LOW */
}

/* ===================== */
/* Zones */
/* ===================== */
.zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 50px;
  row-gap: 4px;
}

@media (max-width: 599px) {
  .zone {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}


/* ===================== */
/* Results meta (count) */
/* ===================== */
.results-meta {
  margin-bottom: 20px;
  font-size: 125%;
  opacity: 0.7;
  text-align: center;

}

/* ===================== */
/* Word row */
/* ===================== */
.word {
  display: grid;
  grid-template-columns: 3ch 1fr auto; /* score | word | length */
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
 
/* ===================== */
/* Score */
/* ===================== */
.word .score {
  font-size: 15px;
  color: #F4E4B8;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* ===================== */
/* Word text */
/* ===================== */
.word-text {
  font-size: 16px;
  color: #F5F5FF;
  letter-spacing: 0.12em;
  text-transform: uppercase;  /* visueel alles uppercase */
  white-space: nowrap;
}

/* ===================== */
/* Joker letters */
/* ===================== */
.word-text .joker {
  display: inline-block;
  transform: skewX(-5deg);
  opacity: 0.65;     /* subtiel, niet schreeuwerig */
}

/* ===================== */
/* Word length */
/* ===================== */
.word .len {
  font-size: 13px;
  color: #F4E4B8;
  opacity: 0.65;
  white-space: nowrap;
}

/* ===================== */
/* Hierarchy */
/* ===================== */
.word-high .word-text {
  font-weight: 600;
  font-size: 102%;
}

.word-mid .word-text {
  font-weight: 400;
}

.word-low {
  opacity: 0.7;
}

/* ===================== */
/* Very small screens */
/* ===================== */
@media (max-width: 399px) {
  .word-text { font-size: 14px; }
  .word .score { font-size: 13px; }
  .word .len   { font-size: 11.5px; }
}

/* ===================== */
/* 10. Media Queries */
/* ===================== */
@media (max-width:600px){
  h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}
  .header{padding:10px 10px}
  .tile{width:28px;height:28px;font-size:14px}
  .solver{font-size:22px;margin-left:4px}
  .tagline{font-size:12px;margin-top:4px;letter-spacing:.8px}
  .wordlist{columns:2;font-size:14px;column-gap:30px}
  .tray-wrapper input{width:40px;height:40px;font-size:22px}
  .tray{gap:5px}
  .tray-wrapper{padding:10px}
  .tray input{background-image:url("tile40.png")}
  .advanced-row select,.advanced-row input,.button-row,.advanced-label{font-size:12px;height:28px;border-radius:5px}
  .clear-btn,.submit-btn,.advanced-label{font-size:12px;border-radius:5px}
  .results,.wordlist{font-size:14px}
  .input-box,.results{margin:10px 0}
  .input-box{padding:10px}
  .ad-top{height:60px;margin:10px auto}
  .ad-bottom{height:60px}
  .hamburger{width:20px;height:14px;margin-right:5px}
  .hamburger span{height:2px}
  .hamburger-menu{position:fixed;left:0;width:100%;top:66px;border-radius:0;padding:15px;box-sizing:border-box}
  .blink-underline{background-image:url("sprite40.png")!important;background-size:40px 80px;animation:blink40 1.1s infinite steps(1)}
  @keyframes blink40{0%{background-position-y:0}50%{background-position-y:-40px}100%{background-position-y:0}}
}

@media (max-width:400px){
   h1{font-size:22px}h2{font-size:18px}h3{font-size:14px}
  .header{padding:8px 10px}
  .tile{width:24px;height:24px;font-size:12px}
  .tagline{font-size:10px;letter-spacing:.9px}
  .solver{font-size:18px}
  .wordlist{grid-template-columns:1fr}
  .results,.wordlist{font-size:12px}
  .tray-wrapper input{width:32px;height:32px;font-size:16px}
  .tray{gap:4px}
  .tray input{background-image:url("tile32.png")}
  .input-box{padding:10px}
  .hamburger-menu{top:57px}
  .advanced-text{display:none}
  .blink-underline{background-image:url("sprite32.png")!important;background-size:32px 64px;animation:blink32 1.1s infinite steps(1)}
  @keyframes blink32{0%{background-position-y:0}50%{background-position-y:-32px}100%{background-position-y:0}}
}

/* ===================== */
/* 11. Height Based Sticky Logic */
/* ===================== */
@media (min-height:700px){.ad-top,.ad-bottom{display:block}}
@media (min-height:400px) and (max-height:699px){.ad-top{display:none}.ad-bottom{display:block}}
@media (max-height:399px){.ad-top,.ad-bottom{display:none}}

/* ===================== */
/* TYPOGRAPHY POLISH ONLY */
/* (geen layout wijzigingen) */
/* ===================== */

/* Basis tekstkleur: minder fel dan #F5F5FF */
html, body {
  color: #E7E7F2;
}

/* Paragrafen & lijsten – rustiger lezen */
p,
li {
  color: #CFCFE3;
  line-height: 1.6;
}

/* Headings – iets lichter maar niet schreeuwerig */
h1,
h2,
h3 {
  color: #F0EAFB;
}

/* Verticale spacing – alleen tekst, geen layout */
h1 { margin-bottom: 16px; }
h2 { margin-top: 56px; margin-bottom: 14px; }
h3 { margin-top: 24px; margin-bottom: 10px; }

p { margin-bottom: 14px; }
ul { margin-top: 6px; margin-bottom: 18px; }

/* Links – zichtbaar maar rustig */
a {
  color: #C77DFF;
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* Word list – belangrijkste oogbelasting-fix */
.word-text {
  color: #E7E7F2; /* ipv hard wit */
}

/* Scores & lengte warmer en minder fel */
.word .score,
.word .len {
  color: #E8D8A8;
}

/* Joker nog subtieler */
.word-text .joker {
  opacity: 0.55;
}


h2 + p {
  margin-top: 6px;
}




.hero-subtle {
  color: #B4B4CF;
  font-size: 14px;
  margin-top: 10px;
}