:root{
  --bg:#f4ede1; --panel:#ece4d3; --panel-2:#e0d8c7; --line:#c8bfb0;
  --ink:#1a1612; --muted:#7a7060;
  --gold:#9c7a14; --good:#1a7030; --bad:#b02020;
  --serif:"Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:Georgia,"Times New Roman",serif;
  min-height:100dvh; display:flex; justify-content:center;
  padding:env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));
}
.wrap{width:100%; max-width:520px; display:flex; flex-direction:column}

header{position:relative; padding:10px 0 8px; text-align:center; border-top:4px double var(--ink); border-bottom:2px solid var(--ink)}

.burger{position:absolute; top:8px; left:0}
.burger summary{
  list-style:none; cursor:pointer; width:36px; height:36px; display:grid; place-items:center;
  font-size:19px; line-height:1; color:var(--ink); user-select:none;
}
.burger summary::-webkit-details-marker{display:none}
.burger summary::marker{content:""}
.burger-menu{
  position:absolute; top:38px; left:0; z-index:5; min-width:170px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.15);
  display:flex; flex-direction:column; padding:6px 0;
}
.burger-menu a{
  padding:11px 16px; color:var(--ink); text-decoration:none; text-align:left;
  font-family:var(--sans); font-size:13px; letter-spacing:.03em;
}
.burger-menu a:hover{background:var(--panel-2); color:var(--gold)}
.wordmark{
  font-family:var(--serif); font-weight:900; letter-spacing:.05em;
  font-size:clamp(30px,9vw,48px); margin:0; text-transform:uppercase; line-height:1;
}
.wordmark span{color:var(--gold)}
.wordmark a{color:inherit;text-decoration:none}
.rule{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:6px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--sans)}
.rule::before,.rule::after{content:"";height:1px;width:28px;background:var(--line)}

main{flex:1; padding:2px 0 14px}
.switch{
  margin-top:14px; padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); font-size:13px; color:var(--muted); text-align:center;
}
.switch a{color:var(--gold); text-decoration:none; font-weight:600}
.switch a:hover{text-decoration:underline}
.hidden{display:none !important}

.lede{font-family:var(--serif); font-style:italic; font-size:clamp(20px,5.2vw,26px); line-height:1.4; margin:8px 0 28px}
.lede em{font-style:normal; font-weight:700}
.btn{
  width:100%; border:2px solid var(--ink); border-radius:0; padding:15px 16px;
  font-size:14px; font-weight:700; letter-spacing:.1em; cursor:pointer;
  font-family:var(--sans); text-transform:uppercase;
  background:var(--ink); color:var(--bg);
  transition:opacity .1s ease;
}
.btn:hover{opacity:.82}
.btn:active{opacity:.65}
.btn+.btn{margin-top:10px}
a.btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}

.progress{display:flex; gap:4px; margin-bottom:20px}
.progress i{flex:1; height:3px; background:var(--line)}
.progress i.done{background:var(--ink)}
.progress i.on{background:var(--muted)}

.q{font-family:var(--serif); font-weight:700; font-size:clamp(22px,5.6vw,30px); line-height:1.25; margin:16px 0 22px}

.opts{display:flex; flex-direction:column}
.opt{
  text-align:left; width:100%; cursor:pointer; font-family:Georgia,"Times New Roman",serif;
  background:transparent; border:1px solid var(--ink); margin-top:-1px;
  color:var(--ink); padding:13px 16px; font-size:16px; line-height:1.3;
  display:flex; align-items:center; gap:12px;
  transition:background .1s ease, color .1s ease;
}
.opt .key{
  flex:none; width:22px; height:22px; border:1px solid currentColor; border-radius:0;
  display:grid; place-items:center; font-size:11px; font-weight:700; font-family:var(--sans);
}
.opt:hover:not(:disabled){background:var(--ink); color:var(--bg)}
.opt:active:not(:disabled){opacity:.8}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--good); border-width:2px; background:rgba(26,112,48,.09); color:var(--ink); z-index:1; position:relative}
.opt.correct .key{border-color:var(--good); background:var(--good); color:var(--bg)}
.opt.wrong{border-color:var(--bad); border-width:2px; background:rgba(176,32,32,.07); color:var(--ink); z-index:1; position:relative}
.opt.wrong .key{border-color:var(--bad); background:var(--bad); color:var(--bg)}
.opt.dim{opacity:.3}

.reveal{margin-top:18px; border-left:3px solid var(--ink); padding:2px 0 2px 14px; animation:rise .25s ease}
.reveal h4{margin:0 0 5px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-family:var(--sans)}
.reveal p{margin:0; color:var(--muted); font-size:15px; line-height:1.55; font-style:italic}
.reveal .src{display:block; margin-top:8px; font-size:11px; color:var(--muted); font-style:normal; font-family:var(--sans); letter-spacing:.08em; text-transform:uppercase}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.score{font-family:var(--serif); font-weight:900; font-size:72px; line-height:1; text-align:center; margin:-14px 0 2px}
.score small{font-size:28px; color:var(--muted); font-weight:700}
.verdict{text-align:center; color:var(--muted); font-size:16px; line-height:1.5; margin:6px 0 14px; font-style:italic}
.squares{text-align:center; font-size:30px; letter-spacing:6px; margin-bottom:14px}
.stats{display:flex; gap:8px; margin-bottom:14px}
.stat{flex:1; border:1px solid var(--line); padding:8px 8px; text-align:center}
.stat b{display:block; font-size:24px; font-family:var(--serif); font-weight:700}
.stat span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-family:var(--sans)}
.recap{margin-bottom:14px}
.recap div{display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; color:var(--muted); line-height:1.35; font-style:italic}
.recap div span{flex:none; font-style:normal}
.next{text-align:center; color:var(--muted); font-size:13px; margin-top:12px; font-family:var(--sans)}
.next b{color:var(--ink); font-variant-numeric:tabular-nums; font-size:18px; margin-left:6px; font-family:var(--serif)}
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,12px); opacity:0;
  background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:0;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-family:var(--sans);
  pointer-events:none; transition:.22s ease;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
footer{text-align:center; color:var(--muted); font-size:11px; padding:10px 0 4px; border-top:1px solid var(--line); font-family:var(--sans); letter-spacing:.04em}
footer a{color:var(--gold);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}
.err{border:1px solid var(--line); padding:20px; color:var(--muted); text-align:center; font-style:italic}

/* --- archive / recap pages (server-rendered, no JS required) --- */
.qblock{margin-bottom:30px}
.qblock .answer{
  font-family:Georgia,"Times New Roman",serif; font-size:16px; line-height:1.3;
  padding:13px 16px; border:2px solid var(--good); background:rgba(26,112,48,.09);
  display:flex; align-items:center; gap:12px;
}
.qblock .answer .key{
  flex:none; width:22px; height:22px; border:1px solid var(--good); background:var(--good);
  color:var(--bg); display:grid; place-items:center; font-size:11px; font-weight:700; font-family:var(--sans);
}
.archive-list{list-style:none; margin:0; padding:0}
.archive-list li{border-top:1px solid var(--line)}
.archive-list a{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:14px 2px; color:var(--ink); text-decoration:none; font-family:var(--sans); font-size:14px;
}
.archive-list a:hover{color:var(--gold)}
.archive-list .num{color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; flex:none}
.page-nav{display:flex; justify-content:space-between; gap:10px; margin:26px 0 4px; font-family:var(--sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.page-nav a, .page-nav span{padding:9px 14px; border:1px solid var(--line); text-decoration:none; color:var(--ink)}
.page-nav a:hover{border-color:var(--ink)}
.page-nav span{color:var(--muted); opacity:.5}

/* --- /suggest page --- */
#suggest-form{display:flex; gap:8px; margin-bottom:24px}
#suggest-input{
  flex:1; min-width:0; border:1px solid var(--ink); padding:13px 14px; font-size:15px;
  font-family:Georgia,"Times New Roman",serif; background:var(--bg); color:var(--ink);
}
#suggest-form .btn{width:auto; flex:none}
.suggestions{list-style:none; margin:0; padding:0}
.suggestions li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-top:1px solid var(--line); padding:12px 2px; font-size:15px;
}
.suggestions li:last-child{border-bottom:1px solid var(--line)}
.vote-btn{
  flex:none; display:flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  padding:7px 12px; font-family:var(--sans); font-size:12px; font-weight:700;
}
.vote-btn:hover:not(:disabled){background:var(--ink); color:var(--bg)}
.vote-btn:disabled{border-color:var(--line); color:var(--muted); cursor:default}