@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink: #14172B;
  --ink-light: #21253F;
  --ink-lighter: #2C314F;
  --paper: #F0E9D8;
  --paper-dim: #D9D0BA;
  --gold: #CBA135;
  --gold-bright: #E5C158;
  --teal: #3E7C7C;
  --teal-bright: #5AA3A3;
  --rule: rgba(240,233,216,0.14);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(203,161,53,0.08), transparent 45%),
    radial-gradient(ellipse at 90% 10%, rgba(62,124,124,0.10), transparent 40%),
    var(--ink);
  color:var(--paper);
  font-family:'Space Mono', monospace;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--teal-bright); }
a:hover{ color:var(--gold-bright); }

/* ---------- Header / nav ---------- */
header.site-header{
  border-bottom:1px solid var(--rule);
  padding:16px 24px;
}
.header-inner{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex-shrink:0;
}
.logo-tile{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  background:var(--paper);
  color:var(--ink);
  width:26px;
  height:26px;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  box-shadow:0 2px 0 rgba(0,0,0,0.35);
}
.logo-text{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  font-size:18px;
  color:var(--paper);
}

nav.site-nav{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
nav.site-nav a{
  color:var(--paper-dim);
  text-decoration:none;
  font-size:12px;
  padding:8px 10px;
  border-radius:4px;
  letter-spacing:0.02em;
  white-space:nowrap;
}
nav.site-nav a:hover{ color:var(--gold-bright); background:var(--ink-light); }
nav.site-nav a.current{ color:var(--gold-bright); background:var(--ink-light); }

/* ---------- Main layout ---------- */
main{
  max-width:820px;
  margin:0 auto;
  padding:48px 24px 90px;
}

.page-hero{
  text-align:center;
  margin-bottom:8px;
}

.eyebrow{
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--teal-bright);
  margin-bottom:14px;
}

h1{
  font-family:'Zilla Slab', serif;
  font-size:38px;
  line-height:1.15;
  color:var(--paper);
  margin:0 0 14px;
}

.lede{
  font-family:'Zilla Slab', serif;
  font-size:17px;
  color:var(--paper-dim);
  max-width:65ch;
  line-height:1.55;
  margin:0 auto 36px;
}

/* ---------- Cards / tool widget ---------- */
.card{
  background:var(--ink-light);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:28px;
  margin-bottom:24px;
}

label{
  display:block;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-bright);
  margin-bottom:10px;
}

input[type="text"], textarea, select{
  width:100%;
  background:var(--ink);
  border:1px solid var(--rule);
  border-radius:4px;
  color:var(--paper);
  font-family:'Space Mono', monospace;
  font-size:16px;
  padding:13px 15px;
}
textarea{ resize:vertical; min-height:110px; line-height:1.6; }

.checkbox-line{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--paper-dim);
  margin-top:16px;
}
.checkbox-line label{ margin:0; text-transform:none; letter-spacing:0; font-size:13px; color:var(--paper-dim); }
input[type="checkbox"]{ accent-color:var(--teal); width:16px; height:16px; }
input[type="range"]{ accent-color:var(--gold); width:140px; }

.control-line{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:18px;
}
.control-line label{ margin-bottom:0; }

.btn{
  font-family:'Space Mono', monospace;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:4px;
  padding:12px 20px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--gold); color:var(--ink); font-weight:700; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondary{ background:transparent; color:var(--paper); border-color:var(--rule); }
.btn-secondary:hover{ border-color:var(--teal-bright); color:var(--teal-bright); }
.btn-row{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

.tile-output{
  display:flex; flex-wrap:wrap; gap:8px;
  min-height:60px; align-items:center;
}
.out-tile{
  font-family:'Zilla Slab', serif;
  font-weight:600;
  font-size:24px;
  background:var(--paper);
  color:var(--ink);
  width:40px; height:40px;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 0 rgba(0,0,0,0.35);
}
.out-tile.space{ background:transparent; box-shadow:none; width:18px; }

.placeholder-text{
  color:var(--paper-dim);
  font-size:14px;
  font-style:italic;
  opacity:0.7;
}

.batch-list{ display:flex; flex-direction:column; }
.batch-row{
  display:flex; align-items:baseline; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--rule); font-size:14px;
}
.batch-row:last-child{ border-bottom:none; }
.batch-scrambled{ color:var(--gold-bright); font-weight:700; letter-spacing:0.03em; flex:1; }
.batch-original{ color:var(--paper-dim); font-size:12px; }
.batch-idx{ color:var(--teal-bright); font-size:11px; width:22px; flex-shrink:0; }

.solve-group-heading{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-bright); padding:16px 0 6px; border-bottom:1px solid var(--rule);
}
.solve-group-heading:first-child{ padding-top:0; }

.game-stats{ display:flex; gap:24px; margin-bottom:20px; flex-wrap:wrap; }
.stat{ font-size:12px; color:var(--paper-dim); }
.stat b{ color:var(--gold-bright); font-size:18px; display:block; font-family:'Zilla Slab',serif; }
.category-picker{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.cat-btn{
  background:var(--ink); border:1px solid var(--rule); color:var(--paper-dim);
  padding:8px 14px; border-radius:20px; font-family:'Space Mono',monospace;
  font-size:12px; cursor:pointer; text-transform:capitalize;
}
.cat-btn.active{ background:var(--teal); color:var(--paper); border-color:var(--teal); }
.game-word{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:24px 0 12px; }
.answer-skeleton{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.skeleton-slot{
  width:28px; height:32px; border-bottom:2px solid var(--rule);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;
  font-family:'Zilla Slab', serif; font-weight:700; font-size:17px; color:var(--gold-bright);
}
.skeleton-slot.filled{ border-bottom-color:var(--gold-bright); }
.guess-row{ display:flex; gap:10px; }
.guess-row input{ flex:1; }
.feedback{ margin-top:14px; font-size:13px; min-height:20px; }
.feedback.correct{ color:var(--teal-bright); }
.feedback.wrong{ color:var(--gold-bright); }
.hint-text{ margin-top:8px; font-size:12px; color:var(--paper-dim); }

/* ---------- Content sections ---------- */
.content h2{
  font-family:'Zilla Slab', serif;
  font-size:22px;
  color:var(--gold-bright);
  margin:38px 0 12px;
}
.content h3{
  font-family:'Zilla Slab', serif;
  font-size:16px;
  color:var(--paper);
  margin:20px 0 6px;
}
.content p, .content li{
  font-size:14px;
  line-height:1.75;
  color:var(--paper-dim);
  max-width:70ch;
}
.content ol, .content ul{ padding-left:20px; }
.faq-item{ margin-bottom:18px; }

.cta-row{ margin-top:28px; }
.cta-link{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  padding:12px 20px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.03em;
}
.cta-link:hover{ filter:brightness(1.08); color:var(--ink); }

/* ---------- Ad slot ---------- */
.ad-slot{
  margin:32px 0;
  padding:12px;
  border:1px dashed var(--rule);
  border-radius:6px;
  text-align:center;
  min-height:90px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.ad-slot .ad-label{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-dim); opacity:0.5; position:absolute; top:8px; left:12px;
}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--rule);
  padding:32px 24px;
  text-align:center;
}
.footer-inner{ max-width:1080px; margin:0 auto; }
.footer-nav{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:14px;
}
.footer-nav a{ color:var(--teal-bright); text-decoration:none; font-size:12px; }
.footer-nav a:hover{ color:var(--gold-bright); text-decoration:underline; }
.footer-tagline{ color:var(--paper-dim); font-size:12px; opacity:0.75; }

@media (max-width:640px){
  h1{ font-size:30px; }
  .card{ padding:20px; }
  nav.site-nav{ justify-content:flex-start; }
}