:root{
  --paper:#eadfc4;
  --paper-hi:#f4ecd8;
  --paper-lo:#ddd0b0;
  --ink:#20201c;
  --ink-soft:#3c3a33;
  --red:#b23a2e;
  --green:#3f7d4e;
  --amber:#c08a2c;
  --steel:#5b6470;
  --panel:rgba(244,236,216,.88);
  --line:2px solid #201f1b;
  --font-hand:"Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE",cursive,sans-serif;
  --font-body:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --shadow:2px 3px 0 rgba(32,31,27,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--paper);
  font-family:var(--font-body);color:var(--ink);overscroll-behavior:none;touch-action:none}

#app{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- paper overlays ---------- */
#paper-grain{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.5;
  background-image:var(--grain);background-repeat:repeat;mix-blend-mode:multiply}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(120% 100% at 50% 45%,rgba(255,255,255,0) 42%,rgba(74,60,32,.28) 100%)}
#frame-edge{position:absolute;inset:0;pointer-events:none;z-index:7;
  box-shadow:inset 0 0 0 3px rgba(32,31,27,.75),inset 0 0 26px 6px rgba(60,48,24,.25)}

/* ---------- shared paper card ---------- */
.paper-card,.gauge{
  background:var(--panel);
  border:var(--line);
  border-radius:5px 9px 6px 10px / 8px 6px 10px 5px;
  box-shadow:var(--shadow);
  padding:6px 9px;
  position:relative;
}
.paper-card::after{content:"";position:absolute;inset:2px;border:1px solid rgba(32,31,27,.25);
  border-radius:4px 7px 5px 8px/6px 5px 8px 4px;pointer-events:none}

.mini-kicker{display:block;font-family:var(--font-hand);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);opacity:.8}

/* ---------- top strip ---------- */
#hud-top{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;gap:8px;
  align-items:flex-start;padding:8px 10px;pointer-events:none}
#brand{pointer-events:none;font-family:var(--font-hand);color:var(--paper-hi);
  text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink);line-height:1;padding-top:2px;
  transform:rotate(-2deg);flex:0 0 auto}
#brand span{font-size:clamp(15px,2.6vw,26px)}
.brand-amp{color:var(--red)}
.brand-sub{display:block;font-size:clamp(9px,1.4vw,13px);letter-spacing:.35em;
  text-transform:uppercase;text-align:center;margin-top:1px}
#objective{pointer-events:none;flex:1 1 auto;min-width:0;display:flex;gap:8px;align-items:baseline;
  max-width:min(620px,62vw);margin:0 auto}
#objective-kicker{font-family:var(--font-hand);font-size:10px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--red);flex:0 0 auto}
#objective-text{font-size:clamp(12px,1.7vw,16px);line-height:1.15;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#hud-buttons{display:flex;gap:6px;pointer-events:auto;flex:0 0 auto}

/* ---------- buttons ---------- */
.ink-btn{font-family:var(--font-hand);color:var(--ink);background:var(--paper-hi);
  border:2px solid var(--ink);border-radius:6px 9px 7px 10px/9px 6px 10px 7px;
  box-shadow:var(--shadow);cursor:pointer;padding:6px 12px;font-size:14px;
  transition:transform .06s ease,box-shadow .06s ease;user-select:none}
.ink-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.ink-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.icon-btn{width:38px;height:38px;padding:0;font-size:17px;line-height:1}
.ink-btn.small{padding:3px 9px;font-size:12px}
.ink-btn.round{width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0;gap:0}
.ink-btn.round .glyph{font-size:20px;line-height:1}
.ink-btn.round small{font-size:9px;letter-spacing:.05em}
.ink-btn.big{font-size:clamp(16px,2.4vw,21px);padding:11px 26px;margin-top:8px}
#btn-sound.muted{opacity:.55;text-decoration:line-through}

/* ---------- left gauges ---------- */
#hud-left{position:absolute;z-index:10;left:10px;bottom:124px;display:flex;flex-direction:column;
  gap:8px;width:170px;pointer-events:none}
.gauge{display:flex;flex-direction:column;align-items:center}
#speed-dial{position:relative;width:150px;height:150px;padding:4px;background:var(--panel)}
#speed-dial svg{width:100%;height:100%;overflow:visible}
.dial-ring{fill:var(--paper-hi);stroke:var(--ink);stroke-width:3}
.dial-redline{stroke:var(--red);stroke-width:2.5;opacity:.75}
#dial-needle{stroke:var(--ink);stroke-width:3;stroke-linecap:round;transform-origin:60px 60px}
.dial-hub{fill:var(--ink)}
#dial-ticks line{stroke:var(--ink);stroke-width:1.6}
#dial-ticks line.major{stroke-width:3}
#speed-read{position:absolute;top:56%;left:0;right:0;text-align:center;pointer-events:none}
#speed-read #speed-val{font-family:var(--font-hand);font-size:30px;line-height:1}
#speed-read em{display:block;font-size:9px;letter-spacing:.2em;font-style:normal;opacity:.7}
#levers{display:flex;flex-direction:column;gap:4px}
.lever-row{display:grid;grid-template-columns:66px 1fr 34px;align-items:center;gap:5px}
.lever-row label{font-family:var(--font-hand);font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.lever-row span{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.lever-track{height:11px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper-lo);
  overflow:hidden}
.lever-fill{height:100%;width:0%;transition:width .1s linear}
.lever-fill.throttle{background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 5px,#a9761f 5px,#a9761f 10px)}
.lever-fill.brake{background:repeating-linear-gradient(45deg,var(--red),var(--red) 5px,#8a2a20 5px,#8a2a20 10px)}
.lever-fill.steam{background:repeating-linear-gradient(45deg,var(--steel),var(--steel) 5px,#454d57 5px,#454d57 10px)}
.lever-fill.damage{background:repeating-linear-gradient(45deg,var(--red),var(--red) 4px,#6d241c 4px,#6d241c 8px)}

/* ---------- right status ---------- */
#hud-right{position:absolute;z-index:10;right:10px;top:60px;width:172px;display:flex;
  flex-direction:column;gap:8px;pointer-events:none}
#next-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 8px}
#next-card .mini-kicker{grid-column:1/3}
.signal-lamp{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);grid-row:2/4;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4)}
.signal-lamp.green{background:radial-gradient(circle at 35% 30%,#8fd39a,var(--green))}
.signal-lamp.red{background:radial-gradient(circle at 35% 30%,#e08578,var(--red))}
.signal-lamp.amber{background:radial-gradient(circle at 35% 30%,#e8c47a,var(--amber))}
#next-info strong{display:block;font-family:var(--font-hand);font-size:13px;line-height:1.1}
#next-info span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.8}
#dispatch{display:flex;flex-direction:column;gap:3px}
.disp-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:6px}
.disp-row b{font-variant-numeric:tabular-nums}
.dmg-track{flex:1 1 auto;max-width:70px;height:9px;border:1.5px solid var(--ink);border-radius:3px;
  background:var(--paper-lo);overflow:hidden}
#switch-card{pointer-events:auto;text-align:center}
#switch-name{font-family:var(--font-hand);font-size:14px;margin:1px 0 4px}

/* ---------- right hand controls ---------- */
#hud-controls{position:absolute;z-index:10;right:12px;bottom:14px;display:flex;gap:9px;align-items:flex-end}
#btn-lamp.on{background:var(--amber)}

/* ---------- pad ---------- */
#pad{position:absolute;z-index:10;left:12px;bottom:14px;display:flex;gap:10px;align-items:flex-end}
.pad-col{display:flex;flex-direction:column;gap:6px}
.pad-btn{width:60px;height:46px;font-size:16px;line-height:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font-family:var(--font-hand);color:var(--ink);
  background:var(--paper-hi);border:2px solid var(--ink);border-radius:6px 9px 7px 10px/9px 6px 10px 7px;
  box-shadow:var(--shadow);cursor:pointer;user-select:none}
.pad-btn small{font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.pad-btn.brake{background:#f2ded8}
.pad-btn.wide{height:60px;width:60px}
.pad-btn:active{transform:translate(2px,2px);box-shadow:0 0 0}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:14px;background:rgba(46,38,22,.45);backdrop-filter:blur(2px);overflow:auto}
.overlay.hidden{display:none}
.intro-card{background:var(--paper);border:3px solid var(--ink);border-radius:8px 14px 9px 15px/13px 9px 15px 8px;
  box-shadow:6px 8px 0 rgba(32,31,27,.5);padding:clamp(14px,3vw,30px);max-width:660px;width:100%;
  text-align:center;position:relative}
.intro-rule{position:absolute;left:24px;right:24px;top:10px;height:3px;background:var(--ink);
  border-radius:2px;opacity:.6}
.intro-card h1{font-family:var(--font-hand);font-size:clamp(22px,4.6vw,42px);margin:10px 0 6px;line-height:1}
.intro-card h1 em{color:var(--red);font-style:normal}
.intro-tag{font-size:clamp(12px,1.7vw,15px);line-height:1.45;margin:0 auto 12px;max-width:52ch}
.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin:0 auto 8px;
  max-width:540px}
.intro-cols h3{font-family:var(--font-hand);font-size:14px;margin:0 0 4px;color:var(--red);
  border-bottom:1.5px solid var(--ink);display:inline-block}
.intro-cols ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.5}
.help-list{text-align:left;max-width:52ch;margin:6px auto 10px;font-size:13.5px;line-height:1.5;
  padding-left:18px}
.intro-note{font-size:11px;opacity:.7;margin:8px 0 0}
#outro-stats{margin:6px auto 8px;max-width:330px;text-align:left;font-size:14px}
#outro-stats .disp-row{margin:3px 0;font-size:14px}
#toast{position:absolute;z-index:15;left:50%;top:16%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast-line{font-family:var(--font-hand);font-size:clamp(13px,2vw,18px);background:var(--paper-hi);
  border:2px solid var(--ink);border-radius:5px 9px 6px 10px/8px 6px 10px 5px;padding:4px 14px;
  box-shadow:var(--shadow);animation:pop .35s ease both}
.toast-line.bad{background:#f0d6d0}
.toast-line.good{background:#d9ead9}
@keyframes pop{from{transform:translateY(8px) scale(.9);opacity:0}to{transform:none;opacity:1}}

/* ---------- compact orders card, sits in the corner and never blanks the view ---------- */
.orders-card{position:absolute;z-index:18;left:12px;top:64px;width:min(288px,50vw);
  background:rgba(244,236,216,.94);border:2px solid var(--ink);
  border-radius:6px 11px 7px 12px/10px 7px 12px 6px;box-shadow:var(--shadow);
  padding:8px 11px 10px;animation:pop .3s ease both}
.orders-card.hidden{display:none}
.orders-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1.5px solid rgba(32,31,27,.35);padding-bottom:4px;margin-bottom:5px}
.orders-note{font-size:11.5px;line-height:1.35;margin:0 0 4px}
.orders-card .help-list{font-size:11.5px;line-height:1.4;padding-left:15px;margin:0}
@media (max-aspect-ratio:1/1){
  .orders-card{top:auto;bottom:150px;left:8px;width:min(280px,80vw)}
}

/* ---------- portrait / narrow ---------- */
@media (max-aspect-ratio:1/1){
  #hud-top{flex-wrap:wrap;padding:6px}
  #brand{order:1}
  #hud-buttons{order:2;margin-left:auto}
  #objective{order:3;flex-basis:100%;max-width:none;margin:4px 0 0;justify-content:center}
  #objective-text{white-space:normal;text-align:center}
  #hud-left{bottom:150px;width:118px;gap:5px}
  #speed-dial{width:104px;height:104px}
  #speed-read #speed-val{font-size:22px}
  #levers .lever-row{grid-template-columns:58px 1fr 30px}
  #levers .lever-row label{font-size:8.5px}
  #hud-right{top:auto;bottom:150px;width:130px;gap:5px}
  #dispatch{display:none}
  #pad{bottom:10px;gap:7px}
  .pad-btn{width:52px;height:42px}
  .pad-btn.wide{width:52px;height:52px}
  #hud-controls{bottom:10px;gap:7px}
  .ink-btn.round{width:48px;height:48px}
  .intro-cols{grid-template-columns:1fr}
}

@media (max-height:430px){
  #speed-dial{width:96px;height:96px}
  #hud-left{bottom:104px}
  #hud-right{bottom:78px;top:auto}
  .pad-btn{height:38px;width:50px}
  .pad-btn.wide{height:46px}
  #levers{display:none}
}
@media (max-width:360px){
  #speed-dial{width:88px;height:88px}
  #hud-right{width:116px}
  .pad-btn{width:46px}
}