:root {
  --oak: #3a2214;
  --oak-line: rgba(0,0,0,.22);
  --paper: #f2e5c7;
  --paper-edge: #d9c493;
  --ink: #1d2236;
  --red: #c7352b;
  --brass: #d3a02f;
  --on-oak: #f2e5c7;
  --white: #fbf7ee;
  box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --oak: #1c110a; --oak-line: rgba(0,0,0,.4); --paper: #eadcbc; --paper-edge: #cdb77f; --on-oak: #e9dcc0; }
}
:root[data-theme="dark"] { --oak: #1c110a; --oak-line: rgba(0,0,0,.4); --paper: #eadcbc; --paper-edge: #cdb77f; --on-oak: #e9dcc0; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background-color: var(--oak);
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, var(--oak-line) 46px 48px);
  color: var(--ink);
  font-family: 'Special Elite', 'Courier New', Courier, monospace;
  font-size: 1.05rem; line-height: 1.6;
}
main { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 6rem; }
h1, h2, h3 { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; line-height: 1.12; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 8vw, 3rem); }
h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
h3 { font-size: 1.15rem; margin-bottom: .3em; }
p { margin: 0 0 1em; }
a { color: inherit; }

.paper { background: var(--paper); border: 2px solid var(--paper-edge); border-radius: 3px; padding: 1.4rem 1.2rem 1.5rem; margin: 1.5rem 0 0; box-shadow: 5px 5px 0 rgba(0,0,0,.35); }
.docket { font-size: .95rem; margin-bottom: 1.2rem; border-bottom: 2px dashed var(--ink); padding-bottom: .8rem; }
.nav { color: var(--on-oak); font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.nav a { color: var(--on-oak); }

.btn { font: inherit; font-size: 1.05rem; background: var(--brass); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; padding: .7rem 1.2rem; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .08s, box-shadow .08s; text-decoration: none; display: inline-block; }
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.btn.red { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn[disabled], .btn.locked { opacity: .5; cursor: not-allowed; transform: none; }
.actions { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.small { font-size: .9rem; opacity: .85; }
.plea { display: inline-block; color: var(--red); border: 2px solid var(--red); padding: 0 .45rem; transform: rotate(-3deg); font-size: .9rem; }
.judge { background: rgba(199,53,43,.1); border-left: 4px solid var(--red); padding: .5rem .8rem; }
.who { font-family: 'Alfa Slab One', Georgia, serif; font-size: .9rem; }
.letter { border-left: 4px solid var(--ink); padding-left: 1rem; }
.stage[hidden] { display: none; }
.todo { background: #fff3a8; outline: 2px dashed var(--red); padding: 0 .3em; }

/* ---------- Hub doors ---------- */
.doors { display: grid; gap: 1rem; margin-top: 1.5rem; }
.door { display: block; text-decoration: none; background: var(--paper); border: 2px solid var(--paper-edge); border-radius: 3px; padding: 1.2rem; box-shadow: 5px 5px 0 rgba(0,0,0,.35); color: var(--ink); position: relative; }
.door h2 { margin-bottom: .2em; }
.door .tag { position: absolute; top: .8rem; right: .8rem; }
.door.locked { opacity: .6; pointer-events: none; }
.door.locked::after { content: "🔒"; position: absolute; right: 1rem; bottom: 1rem; font-size: 1.6rem; }

/* ---------- Wall ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem 1.2rem; margin-top: 1.6rem; align-items: start; }
.polaroid { background: var(--white); padding: .7rem .7rem 1rem; box-shadow: 0 10px 20px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.2); border-radius: 2px; transform: rotate(var(--tilt, 0deg)); transition: transform .2s; }
.polaroid:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.polaroid .img { aspect-ratio: 1 / 1; background: #111; display: grid; place-items: center; overflow: hidden; }
.polaroid .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .img.empty { background: repeating-linear-gradient(45deg, #2a2a2a 0 10px, #222 10px 20px); color: #ddd; text-align: center; padding: 1rem; font-size: .9rem; }
.polaroid .cap { margin-top: .7rem; font-size: .95rem; line-height: 1.35; }
.polaroid .cap b { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; display: block; font-size: .95rem; }
.polaroid .cap .cam { color: var(--red); font-size: .8rem; }
.polaroid .tools { margin-top: .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.polaroid .tools button, .polaroid .tools label { font: inherit; font-size: .85rem; background: var(--brass); border: 2px solid var(--ink); border-radius: 3px; padding: .25rem .6rem; cursor: pointer; }
.polaroid .tools .del { background: transparent; color: var(--red); border-color: var(--red); }
.tools input[type=file] { display: none; }
.stack > .tools label { font: inherit; font-size: .85rem; background: var(--brass); border: 2px solid var(--ink); border-radius: 3px; padding: .25rem .6rem; cursor: pointer; color: var(--ink); }
.progress { margin-top: .5rem; height: 6px; background: #ddd; }
.progress i { display: block; height: 100%; background: var(--red); width: 0; transition: width .2s; }
.stack { display: grid; gap: 1rem; }
#toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 3px; font-size: .95rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 99; }
#toast.on { opacity: 1; }

/* ---------- Patch notes ---------- */
.release { border-top: 2px dashed var(--ink); padding-top: 1rem; margin-top: 1.4rem; }
.release:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.ver { font-family: 'Alfa Slab One', Georgia, serif; font-size: 1.2rem; }
.badge { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border: 2px solid var(--ink); border-radius: 3px; margin-left: .4rem; vertical-align: middle; }
.badge.feat { border-color: #2e7d32; color: #2e7d32; }
.badge.fix { border-color: var(--red); color: var(--red); }
.badge.breaking { background: var(--red); color: #fff; border-color: var(--red); }
.notes { padding-left: 1.2rem; margin: .4rem 0 0; }
.notes li { margin-bottom: .55em; }
.notes code { background: rgba(0,0,0,.08); padding: 0 .3em; border-radius: 2px; font-family: 'Courier New', monospace; font-size: .95em; }
.known { background: rgba(211,160,47,.25); border-left: 4px solid var(--brass); padding: .6rem .9rem; }

/* ---------- Court / stamps ---------- */
.verdict-wrap { text-align: center; padding: .5rem 0; }
.gavel { font-size: 3rem; display: inline-block; }
.stamp { display: inline-block; font-family: 'Alfa Slab One', Georgia, serif; color: var(--red); border: 6px solid var(--red); padding: .05em .35em; font-size: clamp(2rem, 11vw, 3.6rem); letter-spacing: .03em; margin: .3rem 0 0; opacity: 0; transform: rotate(-7deg) scale(3); }
.stamp.slam { animation: slam .45s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-7deg) scale(3); } 70% { opacity: 1; transform: rotate(-7deg) scale(.94); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
body.shake { animation: shake .35s linear; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,4px); } 40% { transform: translate(6px,-4px); } 60% { transform: translate(-4px,-3px); } 80% { transform: translate(4px,3px); } }
.fall { position: fixed; top: -2rem; z-index: 60; pointer-events: none; font-size: 1.6rem; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
.exhibit { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; padding: .9rem 0; border-top: 1px solid var(--paper-edge); }
.exhibit:first-of-type { border-top: 0; }
.exhibit b { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: .95rem; }
.exhibit p { margin: 0 0 .5em; }
@media (max-width: 420px) { .exhibit { grid-template-columns: 1fr; gap: .2rem; } }
@media (prefers-reduced-motion: reduce) { .btn, .polaroid { transition: none; } .stamp { opacity: 1; transform: rotate(-7deg); animation: none; } body.shake { animation: none; } }