:root{--soot:#0c0a08;--brass:#b08d47;--brass2:#6b5226;--cream:#efe6cf;--amber:#ffb347;--blue:#5cc8ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--soot);color:var(--cream);font-family:'Big Shoulders Stencil Display',sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#scene-container{position:fixed;inset:0}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)}
#grain{position:fixed;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:g .4s steps(3) infinite}
@keyframes g{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-2%)}}
#plate{position:fixed;top:14px;left:14px;padding:10px 16px;background:linear-gradient(135deg,#caa55a,#7a5c28 60%,#b08d47);color:#1d1408;border:2px solid #3a2a10;box-shadow:inset 0 0 0 2px rgba(255,230,160,.4),0 6px 20px #000;border-radius:3px;pointer-events:none}
#plate .t{font-family:'Cinzel',serif;font-weight:800;font-size:15px;letter-spacing:.12em}
#plate .s{font-size:14px;font-weight:800;letter-spacing:.08em;margin-top:2px}
#caption{position:fixed;bottom:90px;left:0;right:0;text-align:center;font-family:'UnifrakturCook',serif;font-size:clamp(22px,4.5vw,48px);color:var(--amber);text-shadow:0 0 24px rgba(255,170,60,.8),0 2px 0 #000;opacity:0;transition:opacity .6s;pointer-events:none;padding:0 12px}
#caption.on{opacity:1}
#hint{position:fixed;bottom:50px;left:0;right:0;text-align:center;font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,230,207,.6);pointer-events:none}
#corner{position:fixed;right:14px;bottom:44px;display:flex;flex-direction:column;gap:8px}
#corner button,#log button,#enter{font-family:'Big Shoulders Stencil Display',sans-serif;font-weight:800;letter-spacing:.15em;background:#1a140c;color:var(--brass);border:1px solid var(--brass2);padding:8px 14px;cursor:pointer}
#corner button:hover{color:var(--amber);border-color:var(--amber)}
#log{position:fixed;right:14px;bottom:130px;width:min(360px,92vw);max-height:55vh;display:flex;flex-direction:column;background:linear-gradient(#e9dcb8,#d4c291);color:#2b1d0b;font-family:'Cinzel',serif;box-shadow:0 10px 40px #000;border:1px solid #6b5226;padding:12px}
#log.hidden{display:none}
.lh{font-weight:800;font-size:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #6b5226;padding-bottom:6px}
.lh button{padding:0 8px!important}
#logbody{overflow:auto;flex:1;font-size:12px;margin:6px 0}
#logbody div{padding:4px 0;border-bottom:1px dotted #8a7040}
#logbody i{color:#6b3d10}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,4,3,.88);z-index:10}
#start .inner{max-width:520px;text-align:center;padding:24px}
#start h1{font-family:'UnifrakturCook',serif;font-size:clamp(34px,7vw,60px);color:var(--amber);margin:0 0 12px;text-shadow:0 0 30px rgba(255,160,50,.5)}
#start p{font-family:'Cinzel',serif;font-size:16px;line-height:1.5}
#start .small{font-size:13px;opacity:.8}
#enter{font-size:20px;padding:12px 28px;margin-top:10px}
#enter:hover{background:var(--brass);color:#000}
#remix{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;color:var(--brass);text-decoration:none;border:1px dashed var(--brass2);padding:3px 10px;background:rgba(0,0,0,.5)}