/* Rule of Thumb — the hall. One skin for rot.bg and rot.bg/<CODE>. Self-hosted fonts, no external loads.
   Tokens: black, cream, gold (the locked three) + the stone/oak/torch atmosphere of the RPG direction (21 Sep). */
@font-face{font-family:'Press Start 2P';font-weight:400;font-display:swap;src:url(fonts/pressstart2p-400-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Press Start 2P';font-weight:400;font-display:swap;src:url(fonts/pressstart2p-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-weight:400 600;font-display:swap;src:url(fonts/montserrat-400-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-weight:400 600;font-display:swap;src:url(fonts/montserrat-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#000000; --cream:#F7F2EF; --gold:#C9A24A;
  --stone:#14110E; --stone-2:#1B1612; --oak:#2A2118; --oak-2:#3A2A1C; --bronze:#8A6D3B; --bronze-d:#4A3A22;
  --torch:#E08A2E; --moss:#7BC96F; --blood:#D9534F; --sky:#5B8DEF;
  --text:#E9E2DA; --muted:#A79C8E; --rule:#2E261E;
  --px:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--stone)}
body{margin:0;background:var(--stone);color:var(--text);font-family:"Montserrat","Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none;border-bottom:2px solid var(--bronze-d)}
a:hover{border-bottom-color:var(--gold)}
img{max-width:100%;display:block}
.px{font-family:"Press Start 2P",monospace;text-transform:uppercase;letter-spacing:.06em;line-height:1.7}
h1,h2,h3{font-family:"Press Start 2P",monospace;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin:0 0 .6em;line-height:1.5}
h1{font-size:clamp(18px,3.4vw,30px)}
h2{font-size:clamp(12px,1.8vw,16px);color:var(--gold)}
h3{font-size:11px;color:var(--gold)}
p{margin:0 0 1em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* the frame every panel wears: bronze rim, dark seam, corner rivets */
.panel{position:relative;background:var(--stone-2);border:var(--px) solid var(--bronze);box-shadow:0 0 0 var(--px) var(--stone),0 0 0 calc(var(--px)*2) var(--bronze-d);padding:22px 22px 18px;margin:calc(var(--px)*2)}
.panel::before,.panel::after{content:"";position:absolute;width:8px;height:8px;background:var(--gold);top:-8px;left:-8px;box-shadow:0 0 0 2px var(--stone)}
.panel::after{left:auto;right:-8px}
.panel .rivet{position:absolute;width:8px;height:8px;background:var(--gold);bottom:-8px;left:-8px;box-shadow:0 0 0 2px var(--stone)}
.panel .rivet.r{left:auto;right:-8px}
.panel h2,.panel h3{margin-top:0}
.panel.gold{border-color:var(--gold)}

/* top bar: mark, name, the three facts */
.topbar{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:var(--px) solid var(--bronze-d)}
.topbar .mark{width:56px;height:56px;image-rendering:pixelated;background:var(--cream);border:var(--px) solid var(--bronze);box-shadow:0 0 0 var(--px) var(--stone)}
.topbar .name{font-family:"Press Start 2P",monospace;font-size:12px;color:var(--cream);letter-spacing:.06em;line-height:1.8}
.topbar .name small{display:block;font-size:8px;color:var(--gold)}
.topbar .hud{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.hud .chip{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--cream);background:var(--oak);border:var(--px) solid var(--bronze-d);padding:10px 12px;letter-spacing:.06em;line-height:1.6}
.hud .chip b{color:var(--gold);font-weight:400}

/* the hall: hero panel with the pixel scene */
.hall{position:relative;overflow:hidden;background:#0F0C0A;padding:0}
.hall .scene{display:block;width:100%;height:clamp(220px,34vw,360px);object-fit:cover;image-rendering:pixelated;border-bottom:var(--px) solid var(--bronze-d)}
.hall .over{position:relative;padding:28px 26px 26px;background:linear-gradient(180deg,#1B1612,#14110E)}
.hall .lede{max-width:640px;font-size:18px;color:var(--cream)}
.da{color:var(--gold)}
.strip{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold);letter-spacing:.06em;margin-top:18px}
.strip .step{background:var(--stone);border:var(--px) solid var(--bronze-d);padding:10px 12px;color:var(--cream)}
.strip .arrow{color:var(--torch)}

/* content blocks */
section.block{padding:34px 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:calc(var(--px)*4)}
dl.six{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0}
dl.six div{background:var(--oak);border:var(--px) solid var(--bronze-d);padding:14px 16px}
dl.six dt{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold);letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase;line-height:1.7}
dl.six dd{margin:0;color:var(--text)}
ol.quest{list-style:none;margin:0;padding:0;counter-reset:q}
ol.quest li{position:relative;padding:12px 0 12px 54px;border-top:2px solid var(--rule);counter-increment:q}
ol.quest li:first-child{border-top:0}
ol.quest li::before{content:counter(q);position:absolute;left:0;top:10px;width:36px;height:36px;display:grid;place-items:center;background:var(--stone);border:var(--px) solid var(--bronze);color:var(--gold);font-family:"Press Start 2P",monospace;font-size:11px}
ol.quest b{display:block;color:var(--cream);font-weight:600;margin-bottom:2px}
.note{color:var(--muted);font-size:15.5px}
.people p{margin:0 0 12px}
.people b{display:block;color:var(--cream);font-weight:600}
.people span{color:var(--muted)}
ul.links{list-style:none;padding:0;margin:0;display:flex;gap:14px;flex-wrap:wrap}
ul.links a{display:inline-block;font-family:"Press Start 2P",monospace;font-size:10px;padding:14px 18px;background:var(--oak);border:var(--px) solid var(--bronze);color:var(--cream);letter-spacing:.06em;line-height:1.6}
ul.links a:hover{background:var(--oak-2);border-color:var(--gold)}
footer{padding:26px 0 40px;color:var(--muted);font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.06em;text-align:center;line-height:2}
.quote{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold);text-align:center;line-height:2;letter-spacing:.06em;padding:8px 0}

/* buttons and states (dashboard) */
.btn{display:inline-block;font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:.06em;line-height:1.6;padding:16px 20px;background:var(--oak);border:var(--px) solid var(--bronze);color:var(--cream);cursor:pointer;text-align:center;box-shadow:0 var(--px) 0 var(--bronze-d)}
.btn:hover{background:var(--oak-2);border-color:var(--gold)}
.btn.big{display:block;width:100%;padding:22px 20px;font-size:12px}
.btn.go{background:#24361F;border-color:var(--moss);color:#DDF5D6}
.btn.back{background:#3A1F1E;border-color:var(--blood);color:#F7D9D7}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.state{display:inline-block;font-family:"Press Start 2P",monospace;font-size:8px;padding:6px 8px;border:2px solid;letter-spacing:.04em;line-height:1.4;text-transform:uppercase}
.state.wait{color:#FBE08A;border-color:var(--torch)}
.state.ok{color:#DDF5D6;border-color:var(--moss)}
.state.live{color:#DDF5D6;border-color:var(--moss);background:#24361F}
.state.sched{color:#D6E2FB;border-color:var(--sky)}
.state.back{color:#F7D9D7;border-color:var(--blood)}
.state.prep{color:var(--muted);border-color:var(--rule)}
.flag{display:inline-block;width:12px;height:12px;background:var(--blood);box-shadow:0 0 0 2px var(--stone);vertical-align:middle;margin-left:8px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stats div{background:var(--oak);border:var(--px) solid var(--bronze-d);padding:12px 14px}
.stats .k{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--gold);letter-spacing:.06em;line-height:1.7}
.stats .v{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--cream);margin-top:6px;line-height:1.6}
table.plain{width:100%;border-collapse:collapse;font-size:15px}
table.plain th{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--gold);text-align:left;padding:8px 6px;border-bottom:2px solid var(--bronze-d);letter-spacing:.06em}
table.plain td{padding:9px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .d{min-height:74px;background:var(--oak);border:2px solid var(--rule);padding:6px;font-size:12px;color:var(--muted)}
.cal .d .n{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--muted)}
.cal .box{display:block;margin-top:5px;padding:5px 6px;font-size:11px;line-height:1.3;color:var(--stone);border:2px solid #000;text-decoration:none}
.cal .box.wait{background:var(--torch)} .cal .box.ok,.cal .box.sched{background:var(--moss)} .cal .box.live{background:#4DA84A;color:#fff} .cal .box.back{background:var(--blood);color:#fff} .cal .box.prep{background:#6b6258;color:#fff}
.item{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:18px}
.item img{border:var(--px) solid var(--bronze);image-rendering:auto;background:#000}
.cap{white-space:pre-wrap;background:var(--oak);border:var(--px) solid var(--bronze-d);padding:12px 14px;font-size:15px;margin-bottom:10px}
.cap .lab{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--gold);display:block;margin-bottom:8px;letter-spacing:.06em}
textarea,input[type=text],input[type=password]{width:100%;background:var(--stone);color:var(--cream);border:var(--px) solid var(--bronze-d);padding:12px;font-family:"Montserrat",sans-serif;font-size:16px}
textarea:focus,input:focus{outline:none;border-color:var(--gold)}
.fp{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--muted);letter-spacing:.04em}
.door{max-width:520px;margin:60px auto}
.msg{padding:12px 14px;border:var(--px) solid var(--bronze-d);background:var(--oak);margin-bottom:12px}
.msg.bad{border-color:var(--blood)}
.msg.good{border-color:var(--moss)}
@media (max-width:720px){.item{grid-template-columns:1fr}.topbar .hud{display:none}.cal{grid-template-columns:repeat(2,1fr)}.panel{padding:16px 14px 14px}}