@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Oswald:wght@500;700&display=swap');

/* Palette — 3 colors max + black/white:
   --brass #C9A227 · --rust #A63A2B · --moss #6B7040
   + ink #141210 (black) + bone #EDE6D6 (white) */
:root{
  --brass:#C9A227; --rust:#A63A2B; --moss:#6B7040;
  --ink:#141210; --ink2:#1d1915; --bone:#EDE6D6;
  --paper:#e2d8bd;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Special Elite','Courier New',monospace;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(201,162,39,.10), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(166,58,43,.12), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px);
  min-height:100vh;
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:50;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:#000;padding:8px 12px;z-index:99;font-weight:bold}
.skip:focus{left:8px;top:8px}

#app{max-width:860px;margin:0 auto;padding:20px 16px 48px}
.masthead{text-align:center;border:3px double var(--brass);padding:18px 14px 14px;
  background:linear-gradient(178deg,var(--ink2),var(--ink));
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 rgba(166,58,43,.8);
  transform:rotate(-.4deg)}
.kicker{font-size:11px;letter-spacing:2px;color:var(--brass);margin:0 0 6px}
h1{font-family:Oswald,Impact,sans-serif;font-size:clamp(30px,7vw,54px);margin:0;letter-spacing:1px;line-height:1}
.stamp{display:inline-block;background:var(--brass);color:#111;padding:0 10px;transform:rotate(-2deg);
  box-shadow:3px 3px 0 var(--rust)}
.stamp.alt{background:var(--rust);color:var(--bone);transform:rotate(1.5deg);box-shadow:3px 3px 0 var(--brass)}
.sub{margin:10px 0 0;font-size:14px}
.sub strong{color:var(--brass)}
kbd{display:inline-block;border:1px solid var(--bone);border-bottom-width:3px;border-radius:4px;
  padding:0 6px;font-family:inherit;font-size:.85em;background:#000;color:var(--bone);white-space:nowrap}
.btn kbd{border-color:#111;color:#111;background:rgba(255,255,255,.25)}

/* HUD */
.hud{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px}
.meter{border:2px solid var(--bone);background:#0c0a08;padding:8px 10px;position:relative;
  box-shadow:4px 4px 0 rgba(107,112,64,.7)}
.meter:nth-child(odd){transform:rotate(.3deg)} .meter:nth-child(even){transform:rotate(-.3deg)}
.meter-head{display:flex;justify-content:space-between;font-size:13px;letter-spacing:1px;margin-bottom:6px}
.meter-head span:last-child{color:var(--brass);font-weight:bold}
.bar{height:16px;background:#000;border:1px solid var(--bone);position:relative;overflow:hidden}
.fill{height:100%;width:100%;transition:width .15s linear}
.fill.flame{background:repeating-linear-gradient(-45deg,var(--brass) 0 8px,#8a6d14 8px 16px)}
.fill.flame.low{background:repeating-linear-gradient(-45deg,var(--rust) 0 8px,#5f1f16 8px 16px);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{filter:brightness(1.6)}}
.fill.oil{background:repeating-linear-gradient(-45deg,var(--moss) 0 8px,#3c4023 8px 16px)}
.tickmarks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.55) 9px 10px)}
.windbars{display:flex;gap:3px;align-items:flex-end;height:16px}
.windbars i{width:12px;background:var(--brass);display:block;border:1px solid #000}
.windbars i.neg{background:var(--rust)}
.timebox .meter-head{margin-bottom:2px}

/* Track */
#trackWrap{margin:6px 0}
#track{position:relative;height:220px;border:3px solid var(--bone);border-radius:4px;overflow:hidden;
  background:
    linear-gradient(transparent 62%, rgba(0,0,0,.75) 62%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(237,230,214,.07) 46px 47px),
    radial-gradient(ellipse at 50% 120%, rgba(201,162,39,.16), transparent 60%),
    linear-gradient(#0e0c0a,#171310);
  box-shadow:inset 0 0 60px #000, 5px 5px 0 rgba(166,58,43,.8);
  outline-offset:4px;
}
#track:focus-visible{outline:3px dashed var(--brass)}
#track::before{content:"RELAY LINE — KEEP OUT OF THE GUTTER WIND";position:absolute;top:6px;left:10px;
  font-size:10px;letter-spacing:2px;color:rgba(237,230,214,.5)}
#windArrow{position:absolute;top:34px;left:50%;font-size:30px;color:var(--brass);
  text-shadow:2px 2px 0 var(--rust);transition:left .5s;opacity:.9}
#posts{position:absolute;inset:auto 0 46px 0;height:90px}
.post{position:absolute;bottom:0;transform:translateX(-50%);text-align:center;width:70px}
.post .pole{width:6px;height:52px;background:var(--bone);margin:0 auto;box-shadow:2px 0 0 #000}
.post .lamp{font-size:30px;filter:grayscale(1) brightness(.6);transition:filter .3s}
.post.lit .lamp{filter:none;animation:sway 1.1s ease-in-out infinite alternate}
.post.lit .lamp::after{content:"";display:block}
.post .halo{position:absolute;top:-14px;left:50%;width:54px;height:54px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.55),transparent 65%);opacity:0}
.post.lit .halo{opacity:1;animation:pulse 1.2s ease-in-out infinite alternate}
.post .tag{font-size:10px;letter-spacing:1px;background:#000;border:1px solid var(--brass);color:var(--brass);padding:0 4px}
.post.next .tag{background:var(--rust);border-color:var(--rust);color:#fff;animation:blink .7s steps(2) infinite}
@keyframes pulse{to{transform:translateX(-50%) scale(1.25);opacity:.7}}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
#player{position:absolute;bottom:44px;left:0;width:54px;transform:translateX(-50%);transition:none;z-index:5}
#player .cage{font-size:34px;filter:drop-shadow(0 0 12px rgba(201,162,39,.9))}
#player .glow{position:absolute;top:-12px;left:50%;width:64px;height:64px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.5),transparent 65%)}
#player.shelter .cage{filter:drop-shadow(0 0 4px rgba(107,112,64,1))}
#player.stoke .cage{animation:stoke .3s}
@keyframes stoke{50%{transform:scale(1.25) rotate(-8deg)}}
.spark{position:absolute;width:6px;height:6px;background:var(--brass);border-radius:50%;pointer-events:none;z-index:6}
.status{text-align:center;min-height:44px;margin:10px 0;padding:8px;border:2px dashed var(--rust);
  background:rgba(166,58,43,.12);font-size:14px}
.status.win{border-color:var(--brass);background:rgba(201,162,39,.15)}
#passHint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%) rotate(-1deg);
  background:var(--brass);color:#111;font-weight:bold;padding:4px 10px;font-size:13px;
  box-shadow:3px 3px 0 var(--rust);animation:blink .6s steps(2) infinite;z-index:7}

/* Buttons / sections */
.controls{margin:14px 0}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.btn{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;
  background:var(--brass);color:#111;border:2px solid #000;padding:9px 12px;cursor:pointer;
  box-shadow:3px 3px 0 var(--rust);transform:rotate(-.4deg)}
.btn:nth-child(even){background:var(--bone);transform:rotate(.4deg);box-shadow:3px 3px 0 var(--moss)}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--rust)}
.btn:focus-visible{outline:3px dashed var(--rust);outline-offset:3px}
.howto{border:2px solid var(--moss);padding:8px 12px;background:rgba(107,112,64,.12);margin-top:10px}
.howto summary{cursor:pointer;font-family:Oswald,sans-serif;letter-spacing:1px;color:var(--brass)}
.howto summary:focus-visible{outline:3px dashed var(--brass);outline-offset:2px}
.howto ul{margin:8px 0;padding-left:20px;font-size:13.5px;line-height:1.7}
.ledger,.sharebox{border:3px double var(--bone);padding:12px 14px;margin:14px 0;background:rgba(0,0,0,.4)}
.ledger h2,.sharebox h2{font-family:Oswald,sans-serif;margin:0 0 8px;letter-spacing:2px;font-size:18px;color:var(--brass)}
#log{margin:0;padding-left:22px;font-size:13px;max-height:150px;overflow:auto}
#log li{margin:3px 0;border-bottom:1px dotted rgba(237,230,214,.25);padding-bottom:3px}
.fine{font-size:12px;opacity:.75}
.foot{text-align:center;margin-top:18px;font-size:12px;opacity:.85}
.foot .fine{opacity:.65}

/* focus everywhere for keyboard-only use */
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px dashed var(--brass);outline-offset:2px}

@media (max-width:480px){
  .hud{grid-template-columns:1fr 1fr}
  #track{height:200px}
  .btn{font-size:12px;padding:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}