:root {
  color-scheme: dark !important;
  --paper: #292a24;
  --paper-light: #37372e;
  --paper-shadow: #181a16;
  --ink: #e1d5b9;
  --muted-ink: #aaa188;
  --vermilion: #c45c46;
  --mustard: #c69b3b;
  --bottle: #587969;
  --bg: var(--paper) !important;
  --panel: var(--paper-light) !important;
  --card: var(--paper-light) !important;
  --glass: rgba(55, 55, 46, .82) !important;
  --muted: var(--muted-ink) !important;
  --accent: var(--vermilion) !important;
  --success: #4f775b !important;
  --danger: #a93226 !important;
}

html { background: #181a16; }

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(225,213,185,.055), transparent 28%),
    repeating-linear-gradient(0deg, rgba(225,213,185,.018) 0 1px, transparent 1px 4px),
    var(--paper) !important;
  color: var(--ink) !important;
  font-family: "Trebuchet MS", "Gill Sans", system-ui, sans-serif !important;
  letter-spacing: .005em;
}

h1, h2, h3, .card h2 {
  color: var(--ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-shadow: none !important;
}

h1::after {
  content: "";
  display: block;
  width: 74px;
  height: 5px;
  margin-top: 10px;
  background: var(--vermilion);
  box-shadow: 27px 0 0 var(--mustard);
}

p, li, label, .muted, .intro, .footer-note, .score-meta { color: var(--muted-ink) !important; }
strong { color: var(--ink); }
em { color: var(--bottle); }
hr { border: 0; border-top: 2px solid rgba(225,213,185,.28); margin: 22px 0; }

.hero {
  overflow: hidden;
  border: 2px solid var(--ink) !important;
  border-radius: 2px !important;
  background: var(--paper-light) !important;
  box-shadow: 8px 8px 0 rgba(0,0,0,.28) !important;
}

.hero::after {
  content: "A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z";
  display: block;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(225,213,185,.28);
  color: var(--bottle);
  font-family: "Courier New", monospace;
  font-size: clamp(.55rem, 1.35vw, .78rem);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.hero h1::after { display: none; }
.word-a { color: var(--ink) !important; }
.word-b { color: var(--vermilion) !important; }
.dot { color: var(--mustard) !important; }
.tagline { color: var(--bottle) !important; }

.category {
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
  background: rgba(55,55,46,.76) !important;
  color: var(--ink) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
.category span { color: var(--vermilion) !important; }

.card, .panel, .score-panel {
  border: 1px solid rgba(225,213,185,.38) !important;
  border-radius: 3px !important;
  background: rgba(55,55,46,.9) !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,.24) !important;
}
.card { position: relative; }
.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(225,213,185,.11);
  pointer-events: none;
}
.card > * { position: relative; }

button, .button {
  border: 2px solid var(--ink) !important;
  border-radius: 2px !important;
  background: var(--vermilion) !important;
  color: #fffaf0 !important;
  font-family: "Trebuchet MS", "Gill Sans", system-ui, sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 #11130f !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}
button:hover, .button:hover { background: #a84634 !important; transform: translate(1px,1px) !important; box-shadow: 2px 2px 0 #11130f !important; }
button:active, .button:active { transform: translate(3px,3px) !important; box-shadow: none !important; }
button.ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

input[type="text"], input[type="number"], input:not([type]) {
  border: 2px solid var(--ink) !important;
  border-radius: 2px !important;
  background: #414137 !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 3px 3px 0 rgba(0,0,0,.24) !important;
}
input::placeholder { color: #918970 !important; }
input:focus { outline: 3px solid rgba(212,166,42,.45) !important; outline-offset: 2px; }

.letter-grid { gap: 7px !important; }
.game-board-row { align-items: flex-start !important; }
.letter-cell {
  border: 1px solid rgba(225,213,185,.38) !important;
  border-radius: 2px !important;
  background: #444238 !important;
  color: var(--ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.28);
}
.letter-cell.unrevealed { opacity: .58 !important; border-style: dashed !important; }
.letter-cell.used, .letter-cell.start-used, .letter-cell.filled {
  background: var(--bottle) !important;
  color: #fffaf0 !important;
  border-color: var(--ink) !important;
}
.letter-cell.next-required {
  background: var(--mustard) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--vermilion) !important;
}
.letter-cell.ignored-letter, .letter-cell.pickup {
  background: #403f34 !important;
  color: var(--bottle) !important;
  border: 2px dashed var(--bottle) !important;
  box-shadow: 2px 2px 0 rgba(49,91,76,.18) !important;
}
.letter-cell.pickup-collected {
  background: var(--bottle) !important;
  color: #fffaf0 !important;
  border: 3px double var(--mustard) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.letter-cell.unavailable-letter, .letter-cell.unavailable {
  background: repeating-linear-gradient(135deg,#302f29 0 4px,#39382f 4px 8px) !important;
  color: #817b69 !important;
  border: 2px solid #746e5f !important;
}

.letter-key-swatch { border-radius: 1px !important; }
.letter-key-swatch.starting { background: #444238 !important; border-color: var(--ink) !important; }
.letter-key-swatch.pickup { background: #403f34 !important; border-color: var(--bottle) !important; }
.letter-key-swatch.pickup-collected { background: var(--bottle) !important; border-color: var(--mustard) !important; box-shadow: none !important; }

.progress { border: 1px solid var(--ink); border-radius: 1px !important; background: #1f211c !important; }
.progress i, .progress > i { background: var(--vermilion) !important; }
.hl { color: var(--vermilion) !important; }
.status-warning { color: #8a6411 !important; }
.status-danger { color: var(--danger) !important; }

a { color: #91b9b0 !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
footer { border-color: rgba(225,213,185,.25) !important; color: #938a73 !important; }

#starfield-bg { mix-blend-mode: normal !important; opacity: .18 !important; }
#answerFeedback, #message.success { background: #33463b !important; border-color: #73917f !important; color: #dce8d7 !important; }
#message.error { background: #4c302b !important; border-color: var(--vermilion) !important; color: #f0c8bd !important; }

.help-body { padding: 0 !important; }
.help-page { max-width: 940px; margin: 0 auto; padding: 54px 24px 72px; }
.help-header { padding-bottom: 24px; border-bottom: 1px solid rgba(225,213,185,.28); }
.help-kicker {
  margin-bottom: 12px;
  color: var(--mustard);
  font-family: "Courier New", monospace;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.help-page h1 { width: auto; margin: 0; font-size: clamp(2.5rem,8vw,4.8rem); line-height: .95; }
.help-page h1::after { margin-top: 18px; }
.help-intro { max-width: 580px; margin: 24px 0 0; font-size: 1.08rem; line-height: 1.65; }
.help-section {
  position: relative;
  min-width: 0;
  padding: 22px 22px 20px;
  border: 1px solid rgba(225,213,185,.28);
  border-top: 4px solid var(--bottle);
  background: rgba(55,55,46,.72);
  box-shadow: 4px 4px 0 rgba(0,0,0,.2);
}
.help-section::before {
  content: attr(data-guide);
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(225,213,185,.3);
  font: 800 .8rem "Courier New", monospace;
  letter-spacing: .08em;
}
.help-section h2 { margin: 0 44px 10px 0; font-size: 1.45rem; }
.help-section p { margin: 0; line-height: 1.62; }
.help-featured { margin: 24px 0 16px; border-top-color: var(--vermilion); }
.help-example {
  margin-top: 18px !important;
  padding: 14px 16px;
  border-left: 3px solid var(--mustard);
  background: rgba(24,26,22,.42);
}
.help-example strong, .help-example span { display: block; }
.help-example strong { margin-bottom: 5px; color: var(--mustard); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.help-example span { margin-bottom: 6px; color: var(--ink); font-family: Georgia,"Times New Roman",serif; font-size: 1.08rem; }
.help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.help-nav { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(225,213,185,.28); }

@media (max-width: 700px) {
  .hero::after { overflow: hidden; }
  .card, .panel { box-shadow: 3px 3px 0 rgba(0,0,0,.24) !important; }
  .help-page { padding: 34px 16px 52px; }
  .help-grid { grid-template-columns: 1fr; }
  .help-section { padding: 19px 18px 18px; }
  .help-nav .button { display: block; text-align: center; }
}