:root {
  --navy: #0b2e59;
  --sky: #41b6e6;
  --ink: #222;
  --paper: #fffdf5;
  --link: #0645ad;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: #d6d6d6;
  font: 13px/1.5 Verdana, Tahoma, Geneva, sans-serif;
  color: var(--ink);
  padding-top: 44px;
}
a { color: var(--link); }
.muted { color: #777; }
.small { font-size: 11px; }
.red { color: #c00; }

/* ---------- game bar (the game itself, not the fake government site) ---------- */
#gamebar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 50;
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: #141414; color: #eee;
  font-family: system-ui, -apple-system, sans-serif;
}
.gb-title { font-weight: 800; letter-spacing: .08em; font-size: 13px; color: #ffd23f; white-space: nowrap; }
.gb-level { flex: 1; min-width: 0; font-size: 13px; color: #bbb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-right { display: flex; gap: 10px; align-items: center; }
#timer { font: 700 18px ui-monospace, Menlo, monospace; color: #ffd23f; min-width: 84px; text-align: right; }
#restart { background: #333; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
@media (max-width: 600px) {
  #gamebar { gap: 10px; }
  .gb-title { display: none; }
}

/* ---------- fake government site ---------- */
#gov { max-width: 980px; margin: 16px auto 32px; background: #fff; border: 1px solid #9a9a9a; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gov-header { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: linear-gradient(#123d72, #0b2e59); color: #fff; }
.seal { flex: none; }
.gov-office { font: bold 22px Georgia, 'Times New Roman', serif; }
.gov-sub { font-size: 11px; color: #cfe0f5; }
.gov-hours { margin-left: auto; font-size: 11px; text-align: right; color: #cfe0f5; white-space: nowrap; }
.gov-nav { background: var(--sky); border-top: 1px solid #8fd3f0; border-bottom: 2px solid #2a8fb8; display: flex; flex-wrap: wrap; }
.gov-nav a { color: #06304f; font-weight: bold; font-size: 12px; padding: 7px 12px; text-decoration: none; border-right: 1px solid #8fd3f0; }
.gov-nav a:hover { background: #7fcdee; text-decoration: underline; }
.gov-notice { background: #fff6bf; border-bottom: 1px solid #e0cf6a; padding: 6px 18px; font-size: 12px; }
.gov-notice::before { content: '⚠ '; }
.gov-notice:empty { display: none; }
.gov-crumbs { padding: 8px 18px; font-size: 11px; color: #666; border-bottom: 1px dotted #ccc; }
#page { padding: 14px 18px 28px; min-height: 420px; }
#page h1 { font: normal 24px Georgia, serif; color: var(--navy); margin: 6px 0 10px; border-bottom: 1px solid #ccc; padding-bottom: 6px; }
#page h3 { font-size: 14px; color: var(--navy); margin: 18px 0 6px; }
.lede { font-size: 14px; }
.gov-footer { background: #efefef; border-top: 1px solid #ccc; padding: 12px 18px; font-size: 11px; color: #555; }
.parody { margin-top: 6px; color: #888; }
@media (max-width: 700px) {
  body { padding-top: 44px; }
  #gov { margin: 0 0 24px; border-left: 0; border-right: 0; }
  .gov-header { padding: 10px 16px; }
  .gov-office { font-size: 18px; }
  .gov-hours { display: none; }
  .seal { width: 44px; height: 44px; }
  #page, .gov-crumbs, .gov-notice, .gov-footer { padding-left: 16px; padding-right: 16px; }
}

/* ---------- forms ---------- */
.govform fieldset { border: 1px solid #aaa; padding: 10px 14px; margin: 0 0 12px; background: #f7f7f7; min-width: 0; }
.govform legend { font-weight: bold; color: var(--navy); padding: 0 4px; }
.field { margin: 10px 0; }
.field > label, .field .label { display: block; font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.field input[type=text], .field select {
  font: 13px Verdana, sans-serif; padding: 3px 4px; border: 1px solid #7a7a7a; border-radius: 0; background: #fff; max-width: 100%;
}
.field input:disabled { background: #e6e6e6; color: #666; }
.field .radio { font-weight: normal; margin-right: 14px; }
.hint { font-size: 11px; color: #555; margin: 2px 0 8px; }
.footnote { font-size: 11px; color: #555; }
.btn {
  font: 13px Verdana, sans-serif; padding: 4px 14px; border: 1px solid #707070;
  background: linear-gradient(#fdfdfd, #dcdcdc); border-radius: 3px; cursor: pointer; color: #111;
}
.btn:active { background: linear-gradient(#dcdcdc, #fdfdfd); }
.btn[disabled] { color: #999; cursor: default; }
.btnrow { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btnrow.center { justify-content: center; }
.errorbox { border: 2px solid #c00; background: #fde8e8; color: #900; padding: 8px 12px; margin-bottom: 12px; font-weight: bold; }
.okbox { border: 2px solid #2e7d32; background: #e8f5e9; color: #1b5e20; padding: 10px 12px; font-weight: bold; margin: 12px 0; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #999; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* layout with a "paper" reference card next to a form */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.two-col > aside { grid-column: 2; grid-row: 1; }
.two-col > form { grid-column: 1; grid-row: 1; }
@media (max-width: 700px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col > aside, .two-col > form { grid-column: auto; grid-row: auto; }
}
.paper {
  background: var(--paper); border: 1px solid #c9bf9a; box-shadow: 2px 3px 0 rgba(0,0,0,.12);
  padding: 12px 14px; font-family: 'Courier New', monospace; transform: rotate(-.6deg);
}
.sticky { position: sticky; top: 56px; z-index: 5; }
.paper-head { font-size: 11px; letter-spacing: .1em; color: #776; border-bottom: 1px dashed #c9bf9a; margin-bottom: 6px; padding-bottom: 4px; }
.paper-label { font-size: 11px; color: #555; }
.paper-big { font-size: 20px; font-weight: bold; letter-spacing: .04em; }
.paper-small { font-size: 10px; color: #776; margin-top: 6px; }

/* level 1: PIN rows */
.pin-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.pin-row label { width: 180px; font-size: 12px; }
.pin-row input { width: 30px; text-align: center; font: 16px 'Courier New', monospace; padding: 2px; border: 1px solid #7a7a7a; }

/* level 2: picture test */
.captcha { margin: 16px 0; max-width: 400px; }
.cap-box {
  display: flex; align-items: center; gap: 12px; border: 1px solid #d3d3d3; background: #f9f9f9; border-radius: 3px;
  padding: 14px 12px; box-shadow: 0 0 4px rgba(0,0,0,.08); font-family: Roboto, Arial, sans-serif;
}
.cap-check { width: 28px; height: 28px; border: 2px solid #c1c1c1; border-radius: 2px; background: #fff; cursor: pointer; flex: none; position: relative; padding: 0; }
.cap-check.spin { border-radius: 50%; border-color: #4a90e2 #e0e0e0 #e0e0e0 #e0e0e0; animation: spin .8s linear infinite; }
.cap-check.done { border-color: transparent; background: none; }
.cap-check.done::after { content: '✔'; color: #0a9d58; font-size: 26px; line-height: 26px; position: absolute; left: 0; top: -2px; }
.cap-label { flex: 1; font-size: 13px; }
.cap-brand { font-size: 10px; color: #555; text-align: center; line-height: 1.3; }
.cap-challenge { border: 1px solid #ccc; margin-top: 8px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); font-family: Roboto, Arial, sans-serif; }
.cap-head { background: #1a73e8; color: #fff; padding: 14px 16px; font-size: 14px; margin: 6px 6px 0; }
.cap-head strong { display: block; font-size: 22px; line-height: 1.25; }
.cap-head span { display: block; font-size: 12px; margin-top: 4px; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; }
.cap-tile { padding: 0; border: 0; aspect-ratio: 1; cursor: pointer; position: relative; background: #eee; overflow: hidden; }
.cap-tile > svg, .cap-tile > .ph { width: 100%; height: 100%; display: block; transition: transform .12s; }
.cap-tile.sel > svg, .cap-tile.sel > .ph { transform: scale(.82); }
.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cap-name { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; line-height: 1.25; padding: 2px 4px; text-align: left; }
.cap-tile.sel::after {
  content: '✓'; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: #1a73e8; color: #fff; font-size: 14px; line-height: 22px; text-align: center;
}
.cap-hint { margin: 0 6px; padding: 6px 8px; background: #fff8e1; border: 1px solid #f0d97a; font-size: 12px; }
.cap-msg { color: #d93025; font-size: 13px; min-height: 20px; padding: 2px 10px; }
.cap-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; padding: 8px 10px; }
.cap-icons button { background: none; border: 0; font-size: 18px; color: #666; cursor: pointer; padding: 0 6px; }
.cap-verify { background: #1a73e8; color: #fff; border: 0; border-radius: 2px; padding: 9px 22px; font-weight: bold; cursor: pointer; text-transform: uppercase; }

.dialog { background: #ece9d8; border: 1px solid #0b2e59; width: min(460px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 3px 3px 10px rgba(0,0,0,.4); }
.dialog-title { background: linear-gradient(#2a5ea8, #0b2e59); color: #fff; font-weight: bold; font-size: 12px; padding: 4px 8px; }
.dialog-body { padding: 12px 14px; overflow: auto; font-size: 13px; }
.dialog-body.legal, .dialog-body .legal { font: 11px/1.45 'Times New Roman', serif; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid #c9c5b2; }
.dialog-buttons .btn { min-width: 76px; }

/* level 1: Before You Begin */
.wall p, .wall li { font-size: 13px; }
.wall ol, .wall ul { padding-left: 24px; }
.wall li { margin: 3px 0; }
.wall table { border-collapse: collapse; margin: 6px 0 10px; font-size: 12px; }
.wall td, .wall th { border: 1px solid #bbb; padding: 3px 8px; text-align: left; vertical-align: top; }
.wall th { background: #eef2f7; }
.agree { border-top: 1px solid #ccc; margin-top: 22px; padding-top: 12px; font-size: 12px; }
.agree label { display: flex; gap: 8px; align-items: flex-start; }
.agree input { margin-top: 2px; }

.credits { background: #fff; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 12px 16px; }
.credits-head { display: flex; justify-content: space-between; align-items: center; }
.credits ul { padding-left: 18px; font-size: 12px; }
.credits li { margin: 3px 0; }

/* level 3: fake PDF viewer */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pdf { background: #525659; width: min(660px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.pdf-bar { display: flex; align-items: center; gap: 8px; color: #eee; padding: 6px 10px; font: 12px system-ui, sans-serif; background: #323639; }
.pdf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-bar button { background: #4a4f53; color: #eee; border: 1px solid #666; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.pdf-bar button[disabled] { opacity: .4; cursor: default; }
.pdf-page { background: #fff; margin: 14px; padding: 28px 34px; overflow: auto; font: 13px/1.55 'Times New Roman', serif; min-height: 440px; }
.pdf-page h2 { font-size: 16px; margin: 0 0 10px; }
.pdf-page table { border-collapse: collapse; margin: 8px 0; }
.pdf-page td, .pdf-page th { border: 1px solid #000; padding: 2px 12px; text-align: left; }
.pdf-page .center { text-align: center; }
.pdf-loading { color: #888; font-style: italic; }
@media (max-width: 600px) { .pdf-page { padding: 16px; margin: 8px; } }

/* level 4: registration card */
.regcard {
  background: linear-gradient(135deg, #eef5ea, #dfe9f3); border: 1px solid #8aa; border-radius: 6px;
  padding: 12px 14px; font: 12px/1.45 'Courier New', monospace;
}
.regcard .rc-title { font-weight: bold; font-size: 11px; letter-spacing: .08em; border-bottom: 1px solid #8aa; padding-bottom: 4px; margin-bottom: 6px; }
.regcard dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0; }
.regcard dt { color: #556; }
.regcard dd { margin: 0; font-weight: bold; }

/* ---------- splash and finish screens (game voice) ---------- */
.game-card { font-family: system-ui, -apple-system, sans-serif; max-width: 600px; margin: 10px auto; text-align: center; }
.game-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: #777; font-weight: 600; }
#page .game-title { font: 800 40px/1.1 system-ui, -apple-system, sans-serif; color: #141414; border: 0; margin: 6px 0 14px; padding: 0; }
.game-card p { font-size: 15px; line-height: 1.55; }
.btn-take {
  font: 800 20px system-ui, sans-serif; background: #ffd23f; color: #141414; border: 2px solid #141414;
  border-radius: 6px; padding: 12px 28px; cursor: pointer; box-shadow: 3px 3px 0 #141414; margin: 10px 0;
}
.btn-take:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #141414; }
.btn-share {
  font: 700 15px system-ui, sans-serif; background: #fff; color: #141414; border: 2px solid #141414;
  border-radius: 6px; padding: 8px 20px; cursor: pointer; margin: 0 0 8px; min-width: 200px;
}
.btn-share:active { background: #f1f1f1; }
.now-serving { font: 14px ui-monospace, Menlo, monospace; color: #555; margin-bottom: 18px; }
.big-time { font: 800 56px ui-monospace, Menlo, monospace; margin: 4px 0 10px; }
.splits, .board { margin: 0 auto 14px; border-collapse: collapse; font-size: 14px; }
.splits td, .board td, .board th { padding: 4px 12px; border-bottom: 1px solid #e3e3e3; text-align: left; }
.splits td:last-child, .board td:nth-child(3) { font-family: ui-monospace, Menlo, monospace; text-align: right; }
.board th { font-size: 12px; color: #777; font-weight: 600; }
.name-entry { text-align: left; border: 1px solid #aaa; background: #f7f7f7; padding: 12px 16px; margin: 14px 0; font-family: Verdana, sans-serif; font-size: 13px; }
#page .name-entry h3 { margin-top: 0; }
.slots { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.slot { width: 52px; height: 64px; border: 2px solid #999; font: bold 36px 'Courier New', monospace; display: flex; align-items: center; justify-content: center; background: #fff; }
.slot.active { border-color: #1a73e8; background: #eef4ff; }
.progress { height: 14px; background: #ddd; border: 1px solid #999; margin: 8px 0; }
.progress > div { height: 100%; width: 0; background: repeating-linear-gradient(45deg, #2e7d32 0 10px, #43a047 10px 20px); transition: width 4.6s linear; }