:root{
  --paper:#e9dec4;
  --paper-card:#f2e9d3;
  --ink:#3a2b1b;
  --ink-soft:#6d5a41;
  --rule:#b7a582;
  --verm:#9c3524;   /* vermilion: structures / wrong */
  --tank:#3e6e7e;   /* tank and moat blue: correct */
  --ochre:#b07a2a;  /* hachure ochre */
  --stamp-green:#4e6b45;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'EB Garamond',Georgia,serif;color:var(--ink);
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255,250,235,.55) 0%, transparent 55%),
    radial-gradient(120% 120% at 50% 100%, rgba(90,60,20,.18) 0%, transparent 60%),
    var(--paper);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:28px 16px 18px;position:relative;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(93,70,40,.06) 119px 120px),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(93,70,40,.06) 119px 120px),
    radial-gradient(circle at 15% 20%, rgba(120,85,40,.08) 0 140px, transparent 220px),
    radial-gradient(circle at 85% 70%, rgba(120,85,40,.07) 0 160px, transparent 260px);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 8% 84%, rgba(140,95,45,.16) 0 7px, transparent 9px),
    radial-gradient(circle at 92% 12%, rgba(140,95,45,.13) 0 5px, transparent 7px),
    radial-gradient(circle at 78% 90%, rgba(140,95,45,.12) 0 4px, transparent 6px),
    radial-gradient(circle at 22% 8%, rgba(140,95,45,.10) 0 6px, transparent 8px);
}

.app{width:100%;max-width:700px;position:relative;z-index:1;margin:auto 0}

.hud{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-variant:small-caps;letter-spacing:.14em;font-size:.85rem;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);padding:0 6px 8px;margin-bottom:18px;
}
.hud .score b{color:var(--verm);font-weight:600}
.hud span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .streak{color:var(--ochre)}
.hud .streak.hot{color:var(--verm);font-weight:600}

.card{
  background:var(--paper-card);border:1px solid var(--ink);
  box-shadow:0 0 0 4px var(--paper-card), 0 0 0 5px var(--rule),
             0 18px 40px rgba(58,43,27,.28);
  padding:38px 38px 32px;position:relative;animation:settle .5s ease both;
}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card::before,.card::after{content:"✦";position:absolute;color:var(--ochre);font-size:.8rem;opacity:.85}
.card::before{top:8px;left:12px}
.card::after{bottom:8px;right:12px}

.eyebrow{font-variant:small-caps;letter-spacing:.26em;font-size:.85rem;color:var(--verm);margin-bottom:14px}
.eyebrow::after{content:"";display:block;width:64px;height:1px;background:var(--rule);margin-top:10px}

h1{font-family:'IM Fell English',serif;font-weight:400;
   font-size:clamp(2.2rem,6.5vw,3.2rem);line-height:1.05}
.subtitle{font-family:'IM Fell English',serif;font-style:italic;color:var(--ink-soft);
   font-size:1.12rem;margin-top:6px}
.tagline{color:var(--ink-soft);font-size:1.12rem;line-height:1.6;max-width:52ch;margin-top:16px}
.tagline em{color:var(--ink);font-style:italic;border-bottom:1px solid var(--ochre)}

.field{margin:28px 0 6px}
label{display:block;font-variant:small-caps;letter-spacing:.18em;font-size:.85rem;
  color:var(--ink-soft);margin-bottom:8px}
input[type=text]{
  width:100%;padding:12px 14px;font:inherit;font-size:1.08rem;color:var(--ink);
  background:rgba(255,252,242,.6);border:none;border-bottom:2px solid var(--ink);outline:none;
  transition:border-color .2s, background .2s;
}
input[type=text]::placeholder{color:#a5947a;font-style:italic}
input[type=text]:focus{border-color:var(--verm);background:rgba(255,252,242,.9)}

.btn{
  font-family:'EB Garamond',serif;font-variant:small-caps;letter-spacing:.2em;
  font-size:1.02rem;font-weight:600;color:var(--paper-card);
  background:var(--ink);border:1px solid var(--ink);padding:13px 30px;cursor:pointer;
  transition:background .18s, transform .12s, box-shadow .18s, border-color .18s;
  box-shadow:3px 3px 0 rgba(58,43,27,.28);
}
.btn:hover{background:var(--verm);border-color:var(--verm);transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(58,43,27,.3)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(58,43,27,.3)}
.btn:focus-visible{outline:3px solid var(--tank);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--ink-soft)}
.btn.ghost:hover{color:var(--verm);border-color:var(--verm);background:transparent;transform:none}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* relic shelf, reused on level-clear and results pages */
.shelf{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.shelf .slot{width:52px;height:52px;border:1px dashed var(--rule);display:flex;
  align-items:center;justify-content:center;background:rgba(255,252,242,.4)}
.shelf .slot img{width:36px;height:36px}
.shelf .slot.empty{opacity:.45}
.shelf-label{font-variant:small-caps;letter-spacing:.14em;font-size:.8rem;color:var(--ink-soft);width:100%}

/* confetti scraps, reused on level-clear and results pages */
.scrap{position:fixed;top:-16px;z-index:70;pointer-events:none;
  animation:fall linear forwards}
@keyframes fall{
  to{transform:translateY(110vh) rotate(var(--rot));opacity:.15}
}

.footer-note{margin-top:18px;font-size:.85rem;font-style:italic;color:var(--ink-soft);
  line-height:1.7;border-top:1px solid var(--rule);padding-top:12px}

/* credit */
.credit{
  margin-top:22px;text-align:center;font-variant:small-caps;letter-spacing:.28em;
  font-size:.82rem;color:var(--ink-soft);
}
.credit b{color:var(--verm);font-weight:600}
.credit-links{display:block;margin-top:6px;letter-spacing:.18em}
.credit-links a{color:var(--tank);text-decoration:none;border-bottom:1px dashed var(--rule);padding-bottom:1px;transition:color .15s,border-color .15s}
.credit-links a:hover,.credit-links a:focus-visible{color:var(--verm);border-color:var(--verm)}
.credit-links a:focus-visible{outline:2px solid var(--tank);outline-offset:2px}
.credit-links .sep{color:var(--ochre);margin:0 10px}
.credit::before{content:"✦ ";color:var(--ochre)}
.credit::after{content:" ✦";color:var(--ochre)}

.hidden{display:none !important}

@media (max-width:540px){
  .card{padding:28px 20px 26px}
  .relic-box{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}