:root{--brass:#c9a24a;--brass-d:#7d5f21;--brass-l:#f0d37e;--cream:#f1e6c8;--iron:#2a2119;--iron-l:#4b3c30;--copper:#b8693a;--bg:#14100d}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--cream);overflow:hidden;font-family:Georgia,"Times New Roman",serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-user-select:none;user-select:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));background:rgba(10,7,5,.72);overflow-y:auto;z-index:5;animation:fade .25s ease-out}
#title{background:radial-gradient(ellipse at center,rgba(10,7,5,.55),rgba(10,7,5,.88))}
.screen[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{width:min(100%,440px);margin:auto;padding:26px 24px 22px;border-radius:14px;border:3px solid var(--brass-d);background:linear-gradient(180deg,#3a2e25,#1c1510);box-shadow:0 0 0 2px #000,inset 0 0 0 2px rgba(240,211,126,.18),0 20px 60px rgba(0,0,0,.7);position:relative;line-height:1.5}
.panel::before,.panel::after{content:"";position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f6e3a6,#a98332 55%,#3d2c10);box-shadow:0 1px 2px #000}
.panel::before{left:10px}.panel::after{right:10px}
.panel.wide{width:min(100%,640px)}
h1{margin:4px 0 8px;font-size:clamp(32px,8vw,48px);line-height:1.05;text-align:center;color:var(--brass-l);text-shadow:0 2px 0 #4a3510,0 4px 14px rgba(0,0,0,.8);letter-spacing:.02em;text-transform:uppercase}
h2{margin:2px 0 10px;font-size:26px;color:var(--brass-l);text-shadow:0 2px 0 #4a3510;text-align:center}
.kicker{margin:0;text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#d8c48a}
.lead{text-align:center;font-size:17px;margin:6px 0 18px}
p{margin:0 0 10px}
.small{font-size:13px;color:#cdbf9a;text-align:center;margin:12px 0 0}
.quote{font-style:italic;font-size:17px}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.btn{font:700 17px Georgia,serif;color:var(--cream);padding:13px 18px;min-height:48px;border-radius:10px;border:2px solid #000;cursor:pointer;background:linear-gradient(180deg,#5a4a3b,#2b211a);box-shadow:inset 0 1px 0 rgba(255,230,170,.3),0 3px 0 #0b0806;transition:transform .08s,filter .15s}
.btn:hover{filter:brightness(1.18)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,230,170,.3),0 1px 0 #0b0806}
.btn.primary{background:linear-gradient(180deg,#e0b455,#8c6a22);color:#24160a;text-shadow:0 1px 0 rgba(255,235,170,.6)}
.btn.danger{background:linear-gradient(180deg,#7a3a2c,#3c1810)}
:focus-visible{outline:3px solid #fff3b0;outline-offset:2px}
.link{background:none;border:0;color:#cdbf9a;text-decoration:underline;font:inherit;cursor:pointer;padding:6px}
.emblem{width:84px;height:84px;margin:-6px auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f8ecc4 0 28%,transparent 29%),conic-gradient(from 0deg,#c9a24a,#7d5f21,#f0d37e,#7d5f21,#c9a24a);border:4px solid #3b2a10;box-shadow:0 0 0 2px #000,0 6px 16px #000;position:relative}
.emblem::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:30px;background:#7a1f12;border-radius:2px;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(40deg)}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid rgba(240,211,126,.18);font-size:17px}
.row input[type=range]{width:55%;accent-color:var(--brass)}
.row input[type=checkbox]{width:26px;height:26px;accent-color:var(--brass)}
.tips{padding-left:20px;margin:6px 0 12px}.tips li{margin:5px 0}
.g{color:#7fd079}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:14px;margin:8px 0}
.keys div:last-child{grid-column:1/-1}
kbd{display:inline-block;min-width:22px;padding:1px 6px;margin:0 2px;border-radius:5px;border:1px solid #000;background:linear-gradient(#5a4a3b,#2b211a);box-shadow:0 2px 0 #000;font:700 13px system-ui,sans-serif;text-align:center}
.choices{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.choice{text-align:left;font:inherit;color:var(--cream);padding:14px 16px;border-radius:10px;border:2px solid #000;cursor:pointer;background:linear-gradient(180deg,#4b3c30,#251c15);box-shadow:inset 0 1px 0 rgba(255,230,170,.25),0 3px 0 #0b0806}
.choice:hover{filter:brightness(1.2)}
.choice b{display:block;font-size:18px;color:var(--brass-l);margin-bottom:3px}
.choice span{font-size:14.5px;color:#e2d6b6;line-height:1.35}
.choice kbd{float:right;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.stat{padding:9px 12px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(240,211,126,.22)}
.stat small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cdbf9a}
.stat strong{font-size:22px;color:var(--cream)}
.stat strong.bad{color:#ff9a84}.stat strong.ok{color:#9be08f}.stat strong.warn{color:#f5cd62}
#e-text p{font-size:17px;text-align:left}
.tone-good h2{color:#9be08f}.tone-bitter h2{color:#f5cd62}.tone-dark h2,.tone-fail h2{color:#ff9a84}
@media (max-width:480px){.panel{padding:22px 16px 18px}.btn{font-size:16px}.stats{grid-template-columns:1fr 1fr}.keys{grid-template-columns:1fr}.row input[type=range]{width:45%}}
@media (max-height:640px){.panel{padding:16px}.lead{margin-bottom:8px}.emblem{display:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}.btn{transition:none}}
.reduce .screen{animation:none}