:root{

  --bg:#0a0907;
  --bg2:#1a1612;

  --paper:#fff8e7;
  --paper-soft:#f0e6cc;

  --ink:#0a0907;

  --hot:#f5c842;

  --red:#8b1a1a;

  --green:#4a8f2c;

}

*{

  box-sizing:border-box;
  margin:0;
  padding:0;

}

html,
body{

  background:var(--bg);

  color:var(--paper);

  min-height:100vh;

  font-family:'Playfair Display',serif;

  overflow-x:hidden;

}

.page{

  max-width:720px;

  margin:0 auto;

  padding:24px 16px 80px;

}

.masthead{

  text-align:center;

  border-bottom:3px double var(--paper);

  padding-bottom:20px;

  margin-bottom:24px;

}

.kicker{

  font-family:'Special Elite',monospace;

  font-size:13px;

  letter-spacing:.3em;

  text-transform:uppercase;

  color:var(--hot);

  margin-bottom:12px;

}

h1{

  font-size:clamp(42px,10vw,64px);

  line-height:.9;

  font-style:italic;

  font-weight:900;

  text-shadow:4px 4px 0 var(--red);

}

.subtitle{

  margin-top:10px;

  font-family:'Special Elite',monospace;

  letter-spacing:.18em;

  text-transform:uppercase;

  font-size:14px;

}

.status{

  background:var(--paper);

  color:var(--ink);

  border-left:8px solid var(--hot);

  padding:18px;

  margin-bottom:18px;

  font-size:20px;

  line-height:1.45;

  font-style:italic;

}

.frame{

  background:var(--paper);

  color:var(--ink);

  border:4px solid var(--paper);

  padding:24px 18px 28px;

  position:relative;

  margin-bottom:20px;

}

.frame-label{

  position:absolute;

  top:-14px;

  left:18px;

  background:var(--bg);

  color:var(--paper);

  padding:2px 12px;

  font-family:'Special Elite',monospace;

  font-size:12px;

  letter-spacing:.25em;

  text-transform:uppercase;

}

.signal-wrap{

  display:flex;

  justify-content:center;

  margin-bottom:22px;

}

.signal-lamp{

  width:240px;

  height:240px;

  border-radius:50%;

  background:#1c1c1c;

  border:10px solid #000;

  transition:all .08s linear;

}

.signal-lamp.dot{

  background:#ffe28a;

  box-shadow:
  0 0 30px rgba(255,226,138,.8),
  0 0 90px rgba(255,226,138,.45);

}

.signal-lamp.dash{

  background:#ffb347;

  box-shadow:
  0 0 40px rgba(255,179,71,.95),
  0 0 120px rgba(255,179,71,.55);

}

.big-btn{

  width:100%;

  min-height:90px;

  margin-bottom:14px;

  border:4px solid var(--ink);

  font-family:'Special Elite',monospace;

  font-size:24px;

  letter-spacing:.15em;

  text-transform:uppercase;

  cursor:pointer;

}

.big-btn.hot{

  background:var(--hot);

  color:var(--ink);

}

.big-btn.green{

  background:var(--green);

  color:var(--paper);

}

.answer-box{

  width:100%;

  min-height:90px;

  margin-bottom:14px;

  border:4px solid var(--ink);

  background:var(--paper-soft);

  text-align:center;

  font-size:32px;

  padding:14px;

  font-family:'Special Elite',monospace;

  letter-spacing:.12em;

  text-transform:uppercase;

}

.mode-grid,
.top-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:10px;

  margin-bottom:18px;

}

.top-grid{

  grid-template-columns:1fr 1fr 1fr;

}

.mode-btn,
.top-btn{

  min-height:74px;

  background:var(--bg2);

  color:var(--paper);

  border:3px solid var(--paper);

  cursor:pointer;

  font-family:'Special Elite',monospace;

  font-size:16px;

  text-transform:uppercase;

  letter-spacing:.12em;

}

.mode-btn.active{

  background:var(--paper);

  color:var(--ink);

}

.footer{

  margin-top:40px;

  text-align:center;

  opacity:.6;

  font-family:'Special Elite',monospace;

  letter-spacing:.14em;

  font-size:12px;

}