:root{
  --bench:#2B2621;
  --olive:#4A5240;
  --olive-d:#343A2C;
  --steel:#8C8A83;
  --brass:#B08D4F;
  --tape:#EDE4CE;
  --ink:#241F1A;
  --bakelite:#2E2723;
  --cream:#E8DCC3;
  --amber:#D89B3C;
  --oxide:#B4341F;
  --hot:#E0522A;

  --stencil:'Arial Narrow','Roboto Condensed','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','DejaVu Sans Mono',Menlo,Consolas,monospace;

  --chamfer:14px;
  --key-ch:6px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bench);
  color:var(--cream);
  font-family:var(--stencil);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

.bench{position:fixed;inset:0;overflow:hidden}
.lamp{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 95% at 16% 4%, rgba(224,168,86,.30), rgba(180,130,60,.10) 34%, rgba(0,0,0,0) 60%),
    radial-gradient(160% 130% at 50% 50%, rgba(20,16,12,0) 42%, rgba(8,6,4,.62) 100%);
  pointer-events:none;
}
.grain{
  position:absolute;inset:0;opacity:.5;pointer-events:none;mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(94deg, rgba(255,240,210,.035) 0 2px, rgba(0,0,0,.05) 2px 4px, rgba(0,0,0,0) 4px 9px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.04) 1px 3px);
}

.stage{
  position:relative;min-height:100svh;height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2.4vmax,34px);
}

/* ---------- bench props ---------- */
.props{position:absolute;inset:0;pointer-events:none;z-index:1}
.props .coil{
  position:absolute;left:3%;bottom:9%;width:clamp(56px,9vmin,104px);aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #241F1A 0 11%, transparent 11%),
    repeating-radial-gradient(circle at 50% 50%, #b9ad91 0 2px, #8d8368 2px 4px);
  box-shadow:0 10px 16px rgba(0,0,0,.55);
  opacity:.5;filter:brightness(.75);
}
.props .pencil{
  position:absolute;right:9%;top:14%;width:clamp(60px,11vmin,130px);height:5px;
  transform:rotate(-12deg);transform-origin:right center;
  background:linear-gradient(90deg, rgba(140,40,24,0), rgba(160,60,38,.8) 40%, #7d2f1e);
  filter:blur(.6px);opacity:.22;
}
.props .screw{
  position:absolute;right:12%;bottom:16%;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e2c17f, var(--brass) 60%, #6d5329);
  box-shadow:0 3px 5px rgba(0,0,0,.6);
}
.props .screw::after{content:"";position:absolute;inset:3px 1px;border-top:2px solid #4a3a1e;transform:rotate(28deg)}
.props .chips{
  position:absolute;left:14%;top:16%;width:60px;height:26px;opacity:.4;
  background:
    radial-gradient(3px 2px at 8px 6px, #c9bfa6, transparent),
    radial-gradient(2px 2px at 26px 16px, #c9bfa6, transparent),
    radial-gradient(3px 2px at 44px 8px, #bdb49c, transparent);
}
@media (max-width:640px){.props{display:none}}

/* ---------- device ---------- */
.device{position:relative;width:min(980px,95vw);z-index:2}

.lid{
  position:absolute;left:3%;right:3%;bottom:100%;height:clamp(52px,10vmin,110px);
  transform-origin:bottom center;transform:perspective(1100px) rotateX(52deg);
  background:linear-gradient(180deg,var(--olive-d),#2b3123);
  clip-path:polygon(var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%,0 var(--chamfer));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:clamp(4px,1vmin,10px);gap:3px;
  box-shadow:0 -6px 18px rgba(0,0,0,.45) inset;
}
.lid-plate{
  font-weight:700;letter-spacing:.22em;font-size:clamp(13px,2.3vmin,26px);
  color:var(--cream);opacity:.95;
}
.lid-sub{font-size:clamp(6px,1.1vmin,11px);letter-spacing:.18em;color:var(--steel);opacity:.7;text-align:center;padding:0 1em}

.case{
  position:relative;
  background:linear-gradient(160deg,#565f4a,var(--olive) 40%,var(--olive-d) 100%);
  clip-path:polygon(var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)),0 var(--chamfer));
  padding:clamp(8px,1.5vmin,16px);
  box-shadow:0 26px 50px rgba(0,0,0,.6), 0 2px 0 #2c3223, inset 0 0 0 1px rgba(0,0,0,.4);
}
.case::after{ /* chipped paint corners */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(6px 5px at 0% 0%, #6f6f66, transparent),
    radial-gradient(8px 6px at 100% 100%, #6f6f66, transparent),
    radial-gradient(5px 5px at 100% 0%, #6f6f66, transparent);
  opacity:.55;
  clip-path:polygon(var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)),0 var(--chamfer));
}

.panel{
  position:relative;
  background:linear-gradient(150deg,#9b9992,var(--steel) 45%,#6f6d67 100%);
  padding:clamp(8px,1.4vmin,15px);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
  display:flex;flex-direction:column;gap:clamp(6px,1.1vmin,12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 40px rgba(0,0,0,.28);
  background-blend-mode:normal;
}
.panel::before{ /* brushed steel scratches */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(92deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.06) 1px 2px, rgba(0,0,0,0) 2px 5px);
  clip-path:inherit;
}
.panel-screen-screw{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9d6cd,#8C8A83 60%,#4f4d49);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.panel-screen-screw::after{content:"";position:absolute;inset:2.5px 1px;border-top:1.5px solid #3c3a37;transform:rotate(34deg)}
.panel-screen-screw.tl{left:7px;top:7px}.panel-screen-screw.tr{right:7px;top:7px}
.panel-screen-screw.bl{left:7px;bottom:7px}.panel-screen-screw.br{right:7px;bottom:7px}

/* ---------- head ---------- */
.panel-head{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(6px,1.4vmin,16px);
}
.level-plate{
  display:flex;align-items:baseline;gap:.4em;
  background:linear-gradient(160deg,#c6a666,var(--brass) 55%,#8a6d38);
  color:#2a2110;padding:.28em .6em;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.5), 0 2px 3px rgba(0,0,0,.4);
}
.lp-cap{font-size:clamp(7px,1.15vmin,12px);letter-spacing:.24em;font-weight:700;opacity:.8}
.lp-num{font-family:var(--mono);font-weight:700;font-size:clamp(15px,3vmin,30px);line-height:1}
.lp-range{font-size:clamp(7px,1.1vmin,11px);letter-spacing:.1em;opacity:.7;text-decoration:line-through;text-decoration-color:rgba(42,33,16,.7)}

.status-lamp{justify-self:start;width:clamp(16px,3vmin,30px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #4a3b13, #26200f 70%);border:2px solid #3a3323;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.8);position:relative;transition:box-shadow .18s}
.status-lamp i{position:absolute;inset:22%;border-radius:50%;background:#3a301a;transition:background .18s, box-shadow .18s}
.status-lamp.live i{background:var(--amber);box-shadow:0 0 16px 4px rgba(216,155,60,.75),inset 0 0 6px rgba(255,240,210,.9)}
.status-lamp.danger i{background:var(--oxide);box-shadow:0 0 20px 6px rgba(180,52,31,.85)}
.status-lamp.pulse i{animation:lampPulse .5s ease-out 2}
.status-lamp.warm i{background:#8a6528;box-shadow:0 0 12px 3px rgba(216,155,60,.55)}
@keyframes lampPulse{0%{background:var(--amber);box-shadow:0 0 22px 8px rgba(216,155,60,.9)}100%{background:#3a301a;box-shadow:none}}

.op-plate{justify-self:end;text-align:right;display:flex;flex-direction:column;line-height:1.1}
.op-cap{font-size:clamp(6px,1vmin,10px);letter-spacing:.3em;color:#33312e;opacity:.75}
.op-name{font-family:var(--mono);font-size:clamp(9px,1.5vmin,15px);color:#201c18;font-weight:700;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.timer{width:clamp(64px,13vmin,132px);aspect-ratio:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.clock{width:100%;height:100%;display:block}
#needleG{transform-origin:60px 60px}
#needle{filter:drop-shadow(0 0 2px rgba(180,52,31,.5))}

/* ---------- prompt ---------- */
.prompt{
  font-weight:700;letter-spacing:.16em;text-align:center;
  font-size:clamp(9px,1.5vmin,15px);color:#241F1A;
  background:rgba(237,228,206,.55);padding:.3em .5em;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
  box-shadow:inset 0 0 12px rgba(0,0,0,.12);
}
.prompt.danger{color:var(--oxide)}

/* ---------- tape ---------- */
.panel-body{display:flex;flex-direction:column;gap:clamp(6px,1vmin,12px)}
@media (min-width:760px){
  .panel-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,24%);gap:clamp(8px,1.4vmin,16px);align-items:stretch}
}

.tape-main{
  position:relative;min-height:clamp(70px,12vmin,140px);
  background:
    linear-gradient(180deg, #f2ead6, var(--tape) 30%, #e2d7bd 100%);
  padding:clamp(8px,1.4vmin,16px) clamp(10px,1.8vmin,20px);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  box-shadow:inset 0 2px 12px rgba(36,31,26,.22), inset 0 0 0 1px rgba(36,31,26,.14);
  display:flex;align-items:center;
  overflow:hidden;
}
.tape-main::after{ /* faint horizontal fold lines */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 21px, rgba(36,31,26,.05) 21px 22px);
}
.cells{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;width:100%;position:relative;z-index:1}
.cell{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:clamp(26px,5vmin,56px);height:clamp(34px,7vmin,74px);
  padding:0 .28em;
  border-left:1px dashed rgba(36,31,26,.28);
  font-family:var(--mono);font-weight:700;font-size:clamp(16px,3.6vmin,42px);
}
.cell:first-child{border-left:0}
.cell.num{color:var(--ink)}
.cell.num.flash{animation:numPop .4s ease-out}
@keyframes numPop{0%{transform:scale(.7);color:var(--oxide)}100%{transform:scale(1)}}

/* bracket rails: raised but clearly not a key */
.cell.brk{
  font-family:var(--stencil);color:#3b3730;font-size:clamp(18px,4vmin,42px);font-weight:700;
  min-width:clamp(12px,2.2vmin,22px);text-shadow:0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.25);
}
.cell.brk.gone{opacity:.15;transition:opacity .3s}

/* bakelite key */
.cell.key{
  border:0;background:none;padding:0;margin:0 .12em;cursor:pointer;
  min-width:clamp(36px,7vmin,80px);height:clamp(40px,8vmin,86px);
  -webkit-tap-highlight-color:transparent;
}
.key-face{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  background:linear-gradient(180deg,#3d352e,#2a2320 55%,var(--bakelite));
  color:var(--cream);
  font-size:clamp(18px,3.9vmin,44px);font-weight:700;font-family:var(--mono);
  clip-path:polygon(var(--key-ch) 0,calc(100% - var(--key-ch)) 0,100% var(--key-ch),100% calc(100% - var(--key-ch)),calc(100% - var(--key-ch)) 100%,var(--key-ch) 100%,0 calc(100% - var(--key-ch)),0 var(--key-ch));
  box-shadow:
    0 3px 0 #17120f,
    0 6px 7px rgba(20,15,12,.55),
    inset 0 1px 0 rgba(232,220,195,.22),
    inset 0 -2px 4px rgba(0,0,0,.6);
  transition:transform .07s steps(2), box-shadow .12s;
  text-shadow:0 1px 1px rgba(0,0,0,.7), 0 0 1px rgba(0,0,0,.8);
}
.key-face::before{ /* thumb scuff ring */
  content:"";position:absolute;inset:12% 14%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 42%, rgba(232,220,195,.10) 44%, transparent 62%);
  opacity:.7;pointer-events:none;
}
.cell.key:hover .key-face, .cell.key:focus-visible .key-face{
  transform:translateY(-2px);
  box-shadow:
    0 5px 0 #17120f,
    0 9px 11px rgba(20,15,12,.55),
    0 0 16px 2px rgba(216,155,60,.6),
    inset 0 1px 0 rgba(232,220,195,.30);
}
.cell.key:focus-visible{outline:none}
.cell.key:hover .key-face, .cell.key.lit .key-face{border-color:var(--amber)}
.cell.key.down .key-face{
  transform:translateY(3px);
  box-shadow:0 0 0 #17120f, inset 0 3px 6px rgba(0,0,0,.8), inset 0 1px 0 rgba(232,220,195,.1);
}
.cell.key.done{opacity:.5}
.cell.key.bad .key-face{background:linear-gradient(180deg,#7a2a1c,#4d1b12);color:#f2d9cc}

.grease{position:absolute;inset:-8% -6%;pointer-events:none;overflow:visible;z-index:3}
.grease path{fill:none;stroke:var(--oxide);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

/* solution tape */
.sol-block{display:flex;flex-direction:column;gap:clamp(5px,0.9vmin,10px);min-width:0}
.knobs{display:flex;gap:clamp(5px,0.9vmin,10px)}
.sol-head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:clamp(8px,1.3vmin,13px);letter-spacing:.22em;color:#2b2823;font-weight:700}
.sol-count{font-family:var(--mono);letter-spacing:0}
.sol-count b{font-size:1.2em}
.sol-tape{
  flex:1;min-height:clamp(46px,8vmin,110px);
  background:linear-gradient(180deg,#efe6d0,#ddd2b6);
  padding:clamp(5px,0.9vmin,10px);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  box-shadow:inset 0 2px 8px rgba(36,31,26,.25), inset 0 0 0 1px rgba(36,31,26,.16);
  overflow-y:auto;overflow-x:hidden;
  font-family:var(--mono);color:var(--ink);
  display:flex;flex-direction:column;gap:.28em;justify-content:flex-end;
  font-size:clamp(9px,1.5vmin,15px);
}
.sol-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:printIn .22s ease-out}
.sol-line .eq{opacity:.55;margin:0 .3em}
.sol-line b{color:var(--oxide)}
@keyframes printIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.sol-empty{opacity:.4;font-size:.85em;letter-spacing:.15em;font-family:var(--stencil)}

.sound-knob{
  display:flex;align-items:center;gap:.55em;justify-content:center;flex:1;
  background:linear-gradient(180deg,#3d352e,var(--bakelite));
  color:var(--cream);border:0;cursor:pointer;padding:.5em .7em;
  font-family:var(--mono);font-size:clamp(8px,1.2vmin,12px);letter-spacing:.18em;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  box-shadow:0 2px 0 #17120f, inset 0 1px 0 rgba(232,220,195,.2);
}
.sound-knob .knob-led{width:.7em;height:.7em;border-radius:50%;background:var(--amber);box-shadow:0 0 8px rgba(216,155,60,.9)}
.sound-knob[aria-pressed="false"]{color:#8f887a}
.sound-knob[aria-pressed="false"] .knob-led{background:#4a4238;box-shadow:none}

/* ---------- foot ---------- */
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:1em;
  padding:0 clamp(2px,1vmin,10px);min-width:0;
  font-size:clamp(6px,1vh,11px);letter-spacing:.2em}
.foot-note{color:#2e2b26;opacity:.7;min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:600px){.foot-note{display:none}.panel-foot{justify-content:center}}
.foot-warn{color:var(--oxide);font-weight:700;letter-spacing:.3em;white-space:nowrap;
  border:1px solid var(--oxide);padding:.15em .5em;
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}

/* ---------- seam / explosion ---------- */
.seam{
  position:absolute;left:6%;right:6%;top:50%;height:2px;transform:translateY(-50%) scaleX(0);
  background:#fff;box-shadow:0 0 18px 6px rgba(255,255,255,.9);opacity:0;pointer-events:none;z-index:5;
}
.seam.open{animation:seamOpen .35s ease-out forwards}
@keyframes seamOpen{0%{opacity:0;transform:translateY(-50%) scaleX(0)}60%{opacity:1}100%{opacity:1;transform:translateY(-50%) scaleX(1)}}

.device.jolt{animation:jolt .5s steps(3)}
@keyframes jolt{
  0%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-6px,3px) rotate(-.8deg)}
  40%{transform:translate(5px,-4px) rotate(.7deg)}
  60%{transform:translate(-4px,2px) rotate(-.5deg)}
  80%{transform:translate(3px,-2px) rotate(.3deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.device.danger .level-plate{box-shadow:inset 0 1px 0 rgba(255,240,200,.3),0 0 14px rgba(180,52,31,.8)}
.device.danger .op-name{color:var(--oxide)}

.flash{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;background:#fff}
.flash.fire{animation:flashSeq 1.5s ease-out forwards}
@keyframes flashSeq{
  0%{opacity:0;background:#fff}
  5%{opacity:1;background:#fff}
  14%{opacity:1;background:var(--hot)}
  30%{opacity:.96;background:var(--oxide)}
  55%{opacity:.86;background:#3a150c}
  100%{opacity:0;background:#1a0d08}
}
.wreck{position:fixed;inset:0;pointer-events:none;z-index:55;opacity:0;transition:opacity .45s;
  background:url("assets/img/wreck.jpg") center/cover no-repeat;
  filter:brightness(.72) contrast(1.05) sepia(.12);
}
.wreck::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 46%, rgba(20,8,4,.15), rgba(8,5,4,.82) 100%),
             linear-gradient(180deg, rgba(30,10,6,.45), rgba(6,4,3,.55))}
.wreck.show{opacity:1;animation:wreckSettle 5s ease-out forwards}
@keyframes wreckSettle{0%{transform:scale(1.08)}100%{transform:scale(1)}}
.soot{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.soot i{position:absolute;top:-8%;width:3px;height:3px;border-radius:50%;background:rgba(20,14,10,.75);
  box-shadow:1px 0 1px rgba(0,0,0,.4);animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.9}100%{transform:translateY(112vh) translateX(30px);opacity:0}}

.verdict{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(72% 62% at 50% 50%, rgba(18,11,7,.35), rgba(8,5,4,.82));padding:20px}
.verdict-inner{text-align:center;max-width:min(620px,92vw)}
.verdict-line{font-weight:700;letter-spacing:.12em;font-size:clamp(24px,6.4vmin,66px);
  color:var(--oxide);text-shadow:0 3px 0 #210803, 0 0 34px rgba(180,52,31,.85), 0 0 6px rgba(0,0,0,.9)}
.verdict-line.good{color:var(--amber);text-shadow:0 3px 0 #3c280c, 0 0 34px rgba(216,155,60,.8), 0 0 6px rgba(0,0,0,.9)}
.verdict-sub{margin-top:.7em;font-size:clamp(10px,1.8vmin,16px);letter-spacing:.2em;color:#e6dcc6;
  text-shadow:0 1px 3px #000}
.verdict-btn{margin-top:1.6em;background:linear-gradient(180deg,#3d352e,var(--bakelite));color:var(--cream);
  border:0;cursor:pointer;padding:.8em 1.6em;font-family:var(--stencil);font-weight:700;
  font-size:clamp(11px,1.9vmin,17px);letter-spacing:.22em;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  box-shadow:0 3px 0 #17120f, inset 0 1px 0 rgba(232,220,195,.22)}
.verdict-btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 #17120f, 0 0 18px rgba(216,155,60,.5), inset 0 1px 0 rgba(232,220,195,.3)}

.stand{position:absolute;right:clamp(8px,3vw,40px);bottom:clamp(8px,3vh,32px);z-index:3;width:clamp(140px,20vmin,230px)}
.stand-card{background:linear-gradient(180deg,#efe6d0,#ddd2b6);color:var(--ink);padding:.7em .8em;
  transform:rotate(-2.4deg);
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
  box-shadow:1px 8px 16px rgba(0,0,0,.55);font-size:clamp(8px,1.3vmin,12px)}
.stand-card h4{margin:0 0 .5em;font-size:.9em;letter-spacing:.2em;border-bottom:1px solid rgba(36,31,26,.3);padding-bottom:.4em}
.stand-row{display:flex;justify-content:space-between;gap:.6em;font-family:var(--mono);line-height:1.7}
.stand-row .r{opacity:.5}
.stand-row.me{color:var(--oxide);font-weight:700}
@media (max-width:760px){.stand{display:none}}

.hint{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;
  font-size:clamp(7px,1.5vmin,11px);letter-spacing:.16em;color:#8f887a;opacity:.7;
  text-align:center;pointer-events:none;white-space:nowrap;max-width:96vw;overflow:hidden}

.verdict-steps{margin-top:1em;font-family:var(--mono);font-size:clamp(10px,1.7vmin,16px);
  color:#d3c7ae;line-height:1.9;letter-spacing:.02em;text-shadow:0 1px 3px #000}
.verdict-steps .done{color:var(--amber)}
.verdict-steps .miss{color:#e2704a}

.rules{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 60% at 50% 50%, rgba(30,20,14,.6), rgba(8,6,4,.9));padding:20px}
.rules-inner{max-width:560px;width:100%;
  background:linear-gradient(180deg,#efe6d0,#ddd2b6);color:var(--ink);
  padding:clamp(14px,2.4vmin,26px);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:0 20px 40px rgba(0,0,0,.6)}
.rules-title{font-weight:700;letter-spacing:.24em;font-size:clamp(12px,2.2vmin,20px);margin-bottom:.7em;
  border-bottom:1px solid rgba(36,31,26,.3);padding-bottom:.5em}
.rules-list{margin:0 0 1.2em;padding-left:1.3em;font-size:clamp(10px,1.7vmin,15px);line-height:1.65;letter-spacing:.02em}
.rules-list b{color:var(--oxide)}
.rules .verdict-btn{color:var(--cream)}
.rules-knob{background:linear-gradient(180deg,#3d352e,var(--bakelite));color:var(--cream)}