:root{
  --bg: #132821; --bg-deep: #0d1e18;
  --paper: #efe3c8; --ink: #241c12; --ink-soft: #5b5140;
  --rust: #b5451b; --rust-dark: #8c3414; --brass: #8c6e3e;
  --green-line: #2f6f63; --ok: #3c6e4a; --bad: #a3341f;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(1200px 800px at 20% -10%, #1c3b30, var(--bg-deep) 60%);
  color: var(--ink); font-family:'Lora', Georgia, serif; min-height:100vh; padding: 28px 16px 60px;
}
h1,h2,h3{ font-family:'Oswald','Arial Narrow',sans-serif; margin:0; }
.mono{ font-family:'IBM Plex Mono', monospace; }
#app{ max-width: 760px; margin: 0 auto; }
.masthead{ color: var(--paper); text-align:center; margin-bottom: 26px; }
.masthead .kicker{ color: var(--brass); font-family:'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.16em; margin-bottom: 6px; }
.masthead h1{ font-size: 2.1rem; font-weight: 700; color: var(--paper); }
.masthead .sub{ color: #b9c9c0; font-size: 0.92rem; margin-top: 6px; }
.card{ background: var(--paper); border-radius: 3px; padding: 26px; box-shadow: 0 18px 40px rgba(0,0,0,0.35); margin-bottom: 20px; }
.stamp{ position:absolute; top:-14px; right:18px; width:58px; height:58px; border-radius:50%; border:2.5px solid var(--rust); color:var(--rust);
  display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.05rem; background:var(--paper);
  transform: rotate(6deg); line-height:1; text-align:center; }
.stamp small{ display:block; font-size:0.5rem; letter-spacing:0.08em; font-weight:600; }
.card{ position:relative; }
label{ display:block; font-size:0.82rem; color: var(--ink-soft); margin-bottom:5px; font-family:'IBM Plex Mono',monospace; }
input[type=text], input[type=password]{ width:100%; font-family:'IBM Plex Mono', monospace; font-size:1rem; padding:10px 12px;
  border:1.5px solid var(--ink-soft); background:#fbf6e9; border-radius:2px; color:var(--ink); }
input:focus{ outline:2px solid var(--green-line); outline-offset:1px; }
button{ font-family:'Oswald', sans-serif; font-weight:600; font-size:0.95rem; padding:10px 18px; border-radius:2px; border:none; cursor:pointer; }
.btn-primary{ background: var(--rust); color: var(--paper); }
.btn-primary:hover{ background: var(--rust-dark); }
.btn-ghost{ background: transparent; border:1.5px solid var(--ink-soft); color: var(--ink); }
.btn-ghost:hover{ background: rgba(36,28,18,0.06); }
.btn-small{ font-size:0.8rem; padding:6px 10px; }
button:disabled{ opacity:0.45; cursor:not-allowed; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.field{ margin-bottom:16px; }
.helptext{ font-size:0.82rem; color: var(--ink-soft); margin-top:4px; }
.divider{ border:none; border-top:1.5px solid rgba(36,28,18,0.18); margin:18px 0; }
.word-clue{ border:1.5px solid rgba(36,28,18,0.18); border-radius:2px; padding:14px 16px; margin-bottom:14px; background:rgba(255,255,255,0.28); }
.word-clue h4{ font-family:'Oswald',sans-serif; font-size:0.95rem; margin-bottom:8px; color: var(--ink-soft); }
.clue-text{ font-size:1.02rem; margin-bottom:10px; }
.clue-text i{ color: var(--ink-soft); font-size:0.82rem; }
.letters{ font-family:'IBM Plex Mono',monospace; font-size:1.3rem; letter-spacing:0.12em; margin:8px 0; }
.mode-toggle{ display:flex; gap:6px; margin-bottom:10px; }
.mode-toggle button{ padding:5px 10px; font-size:0.78rem; }
.mode-toggle button.active{ background: var(--green-line); color: var(--paper); }
.mode-toggle button:not(.active){ background: rgba(36,28,18,0.08); color: var(--ink-soft); }
.banner{ padding:10px 14px; border-radius:2px; font-size:0.9rem; margin-bottom:14px; font-family:'IBM Plex Mono',monospace; }
.banner.ok{ background: rgba(60,110,74,0.15); border:1.5px solid var(--ok); color:#244d33; }
.banner.bad{ background: rgba(163,52,31,0.12); border:1.5px solid var(--bad); color: var(--bad); }
.banner.info{ background: rgba(140,110,62,0.15); border:1.5px solid var(--brass); color:#5c4a26; }
.progress-list{ list-style:none; margin:0; padding:0; }
.progress-list li{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid rgba(36,28,18,0.12); font-family:'IBM Plex Mono',monospace; font-size:0.86rem; }
.progress-list li:last-child{ border-bottom:none; }
.bar-track{ background: rgba(36,28,18,0.12); border-radius:6px; height:7px; flex:1; margin:0 12px; overflow:hidden;}
.bar-fill{ background: var(--green-line); height:100%; }
.you{ color: var(--rust); font-weight:600; }
.topline{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; flex-wrap:wrap; gap:8px;}
.score-pill{ background: var(--brass); color: var(--paper); font-family:'IBM Plex Mono',monospace; padding:4px 10px; border-radius:12px; font-size:0.8rem; font-weight:600; }
.admin-link{ text-align:center; margin-top:18px; }
.admin-link a{ color:#7f9a8f; font-size:0.78rem; font-family:'IBM Plex Mono',monospace; text-decoration:none; border-bottom:1px dotted #7f9a8f; }
.admin-link a:hover{ color: var(--paper); }
textarea{ width:100%; min-height:60px; font-family:'Lora',serif; font-size:0.92rem; padding:8px 10px; border:1.5px solid var(--ink-soft); border-radius:2px; background:#fbf6e9; }
.seg-admin{ border:1.5px solid rgba(36,28,18,0.2); border-radius:2px; padding:14px; margin-bottom:14px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .two-col{grid-template-columns:1fr;} }
.loading{ color:#b9c9c0; text-align:center; padding:40px 0; font-family:'IBM Plex Mono',monospace; }
.sync-badge{ position:fixed; bottom:14px; right:14px; background:var(--brass); color:var(--paper); font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem; padding:6px 12px; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,0.3); }
table{ width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:0.85rem; }
th,td{ text-align:left; padding:7px 8px; border-bottom:1px solid rgba(36,28,18,0.14); }
th{ color: var(--ink-soft); font-weight:600; }