*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  background:#fff;
  color:#000;
}

.view{display:none;max-width:1100px;margin:0 auto;padding:20px 24px}
.view.active{display:block}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
#highscoreBar{font-weight:700;letter-spacing:1px}
.icons{display:flex;gap:12px}
.icon-btn{
  background:#000;color:#fff;border:4px solid #000;
  padding:6px 10px;border-radius:16px;cursor:pointer;font-size:22px;line-height:1
}
.icon-btn:hover{background:#e30000;border-color:#ddd}

.title{font-size:44px;text-align:center;margin:32px 0 16px}
.accent{color:#ff0000}
.menu-buttons{display:flex;flex-direction:column;gap:18px;align-items:center;margin-top:18px}

.pill-btn{
  background:#000;color:#fff;border:6px solid #000;border-radius:999px;
  padding:18px 36px;cursor:pointer;font-size:24px;min-width:280px;
  transition:.12s transform ease, .12s background ease, .12s border-color ease, .12s color ease;
}
.pill-btn.primary{background:#e30000;border-color:#e30000}
.pill-btn.small{min-width:150px;padding:12px 20px;font-size:22px}
.pill-btn.big{min-width:420px;font-size:32px;padding:24px 40px}
.pill-btn.red{background:#e30000;border-color:#000}
.pill-btn:hover{background:#e30000;color:#fff;border-color:#ddd}
.pill-btn:active{transform:translateY(1px)}

.time-row{display:flex;gap:16px;align-items:center;justify-content:center;margin:12px auto 10px}
.time-row.hidden{display:none}
.time-input{
  font:inherit;text-align:center;width:120px;border-radius:999px;border:5px solid #000;padding:8px 14px
}

.ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:780px;margin:26px auto}
.op{font-size:36px;display:flex;gap:10px;align-items:center;user-select:none}
.op input{display:none}
.op .check{
  width:32px;height:32px;border:5px solid #000;border-radius:4px;display:inline-block;position:relative;margin-left:10px
}
.op input:checked + .check::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;background:#e30000;border-radius:50%;
}
.op:hover .check{border-color:#ddd;}

.actions{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:24px}

.hud{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.timer{border:7px solid #000;padding:8px 18px;border-radius:999px;display:inline-block;font-size:32px}
.qnum{font-weight:700;font-size:18px;opacity:.6}

.countdown{position:fixed;top:28%;left:50%;transform:translateX(-50%);
  background:#e30000;color:#fff;padding:28px 120px;border-radius:12px;font-size:80px;border:8px solid #e30000}
.countdown.hidden{display:none}

.question-box{
  margin:90px auto 20px;max-width:680px;border:6px solid #000;border-radius:6px;
  font-size:56px;text-align:center;padding:28px 24px
}
.answer-row{display:flex;justify-content:center;margin-top:46px}
.answer-input{width:360px;border:none;border-bottom:6px solid #000;font-size:32px;outline:none;text-align:left;padding:6px 2px}

.pill-btn.quit{position:fixed;left:24px;top:24px}

.result{font-size:42px;margin:8px auto 20px;display:block;text-align:center}

.lb-title{font-size:48px;text-align:center;color:#ffbf00;letter-spacing:2px;margin:10px 0 22px}
.lb-menu{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:16px auto 24px}
.lb-table{border-collapse:collapse;margin:0 auto;width:520px;max-width:90%}
.lb-table th,.lb-table td{border-bottom:2px solid #ddd;padding:8px 10px;text-align:left}
.lb-table th:first-child,.lb-table td:first-child{text-align:center;width:80px}
.lb-note{text-align:center;margin-bottom:10px;color:#333;opacity:.8}
.back{position:fixed;left:24px;top:24px}

.settings{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.settings label{display:flex;flex-direction:column;gap:6px;font-size:20px}
.settings label.inline{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:18px}
.settings input[type='text']{font:inherit;border:3px solid #000;border-radius:10px;padding:8px 10px}
.hidden{display:none}