/* Lexilith PROD build — V0.9.6-puzzle-hotfix */
/* === Lexilith V0.9.3.3 — Clean Modern skin (DEV) === */

/* Design tokens */
:root {
  --bg: #F6F7F9;
  --bg-top: #FFFFFF;
  --text: #1E1E1E;
  --accent: #6C63FF;
  --accent-hover: #5548E0;
  --gold: #FFC107;
  --error: #E53935;
  --border: #DADCE0;

  --success:#4BAF8A;
  --warning:#E5C46B;
  --muted:#6B7280;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%);
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  margin:0; padding:1rem;
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width:720px; margin:0 auto .5rem;
}
.brand{margin:.2rem 0; font-weight:800; letter-spacing:.02em}
.header-actions .icon-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:700; cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
main{max-width:720px; margin:0 auto}

/* Cards / dialogs */
.card, .modal, .panel {
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.modal{ padding:0; width:min(520px,92vw); }
.modal::backdrop{ background:rgba(0,0,0,.35); }
.modal-content{ padding:1rem .9rem 1.1rem; }
.modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }

/* Board */
.board{display:grid; gap:.4rem; margin:1rem 0}
.word-row{display:flex; justify-content:center; gap:.4rem}
.cell{
  width:2.2rem; height:2.2rem; border:1px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--text); font-weight:800; font-size:1.1rem;
  letter-spacing:.04em;
}
.cell.revealed{ background:#fafafa; }

/* Guess area */
.guess-area{margin:.75rem 0 1.25rem}
.guess-form{display:flex; justify-content:center; gap:.45rem; flex-wrap:wrap}
#guess-input{
  min-width:260px; width:60%;
  font-size:16px; padding:.6rem .7rem; border-radius:8px; border:1px solid var(--border);
  background:#fff; color:var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
button, .btn{
  background: var(--accent);
  color:#fff; border-radius:8px; border:none; padding:10px 14px; cursor:pointer;
  transition: background .2s ease, transform .02s ease-in;
}
button:hover, .btn:hover{ background: var(--accent-hover); }
button:active, .btn:active{ transform: translateY(1px); }

.primary-btn{ background:var(--accent); }
.secondary-btn{ background:#fff; color:#1E1E1E; border:1px solid var(--border); }
.ghost-btn{ background:transparent; color:#1E1E1E; border:1px dashed var(--border); }
.theme-btn{ display:inline-block; margin:.6rem auto 0; }

/* Allowed lengths line (always visible) */
.allowed-lengths{
  font-size:.95rem; color:#333; margin-top:.4rem;
  transition:background-color 120ms ease;
  display:block; padding:.15rem .25rem; border-radius:6px;
}
.allowed-lengths--pulse{ animation: al-pulse 700ms ease-in-out 4; }
@keyframes al-pulse{
  0%{ background-color:transparent; }
  25%{ background-color: rgba(255,193,7,0.22); }
  100%{ background-color:transparent; }
}

/* Input invalid feedback */
.input-invalid{ animation: shake 250ms ease-in-out 2, input-hl 900ms ease-in-out 1; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}
@keyframes input-hl{
  0%{ box-shadow:0 0 0 0 rgba(255,193,7,0); background-color:transparent; }
  30%{ box-shadow:0 0 0 3px rgba(255,193,7,.35); background-color: rgba(255,193,7,.15); }
  100%{ box-shadow:0 0 0 0 rgba(255,193,7,0); background-color:transparent; }
}

/* Guess history chips */
.guess-history{ display:flex; flex-wrap:wrap; gap:.45rem .55rem; margin:.45rem auto 0; justify-content:center; }
.guess-chip{
  background:#111; color:#fff; padding:.34rem .75rem; border-radius:.6rem; font-size:.9rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.guess-chip.correct{ background:#22c55e; color:#fff; }

/* Eliminated letters */
.elims-title{ margin-top:.6rem; color:#444; font-size:.9rem; text-align:center; }
.elims{ display:flex; gap:.3rem; justify-content:center; margin-top:.3rem; flex-wrap:wrap; }
.elims .chip{
  background:#fff; border:1px solid var(--border); color:#333; border-radius:.45rem; padding:.18rem .48rem; font-weight:800; font-size:.86rem;
  letter-spacing:.04em; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.fade-in{ animation:fadeIn .35s ease-out; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* HUD */
.scoreboard{ font-size:.95rem; color:#333; margin:.9rem 0 .35rem; text-align:center; }
.status-row{ display:flex; justify-content:space-between; gap:.5rem; color:#444; font-size:.92rem; }

/* Toasts anchored above guess area */
.toast-anchor{ position: relative; min-height: 0; }
.lexi-toast {
  position: absolute; left: 0; right: 0; top: -40px;
  margin: 0 auto; width: max-content; max-width: 92%;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(17,17,17,.88); color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18); pointer-events: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.lexi-toast.show { opacity: 1; transform: translateY(0); }
.lexi-toast.success { background: rgba(22,163,74,.92); }
.lexi-toast.warn    { background: rgba(234,179,8,.92); }
.lexi-toast.error   { background: rgba(220,38,38,.92); }

/* Sections */
.howto{ max-width:720px; margin:1.25rem auto 0; text-align:left; background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem; }
.howto h2{ margin:.2rem 0 .4rem; }
.howto h3{ margin:.8rem 0 .3rem; }
.howto p,.howto li{ color:#333; }
.footer-note{ color:#555; font-size:.95rem; }

@media (max-width: 768px){
  .howto.collapsed .howto__content{ display:none; }
  .howto__toggle{ cursor:pointer; font-weight:700;   touch-action: pan-y;
}
}

/* Footer & utilities */
.app-footer{ max-width:720px; margin:1.25rem auto 0; text-align:center; color:#555; font-size:.85rem; }
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.small-hint{ color:#555; font-size:.9rem; margin-top:.25rem; }

/* Env badge (DEV label text; same style as PROD) */
.env-badge{
  position: fixed; right:8px; bottom:6px;
  padding:2px 6px; font-size:11px; line-height:1.2;
  color:#fff; border-radius:6px;
  background: rgba(17,24,39,0.35);
  z-index:9999; pointer-events:none;
}

/* How-to v0.9.6 rewrite */
.howto { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem; }
.howto__title { margin:.2rem 0 1rem; font-weight:800; color:#222; }
.howto__item { border-top:1px solid var(--border); }
.howto__item:first-of-type { border-top:none; }

.howto__toggle {
  width:100%; text-align:left; display:flex; align-items:center; gap:.6rem;
  padding:.55rem 0; background:transparent; border:none; cursor:pointer; font-weight:600; font-size:1.05rem;
}
.howto__icon { font-size:1.1rem; line-height:1; }
.howto__heading { color:#222; }

.howto__panel { padding:0 0 .6rem 1.8rem; }
.howto__list { margin:.2rem 0 0; padding-left:1rem; }
.howto__list li { margin:.35rem 0; line-height:1.45; }

/* Mobile accordion (≤768px): collapsed by default, tap to expand */
/* Prefers reduced motion: keep it simple */
@media (prefers-reduced-motion: reduce){
  .howto__toggle { transition:none; }
}

/* How-to v0.9.6 — global accordion behavior (collapsed by default on all viewports) */
.howto [data-accordion] .howto__panel { display:none; }
.howto [data-accordion] .howto__toggle[aria-expanded="true"] + .howto__panel { display:block; }