:root {
  --paper: #f3ecd9;
  --sheet: #fbf7ea;
  --ink: #26231d;
  --faint: #6f6858;
  --rule: #c9bfa6;
  --red: #b3261e;
  --green: #1e6b3a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --heavy: "Arial Black", Impact, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1.45;
}

.form {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px clamp(14px, 4vw, 36px);
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 0 var(--rule);
}

.masthead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 3px double var(--ink);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.masthead p { margin: 0; }
.office { font-weight: 700; }
.formno { color: var(--faint); white-space: nowrap; }

h1 {
  margin: 20px 0;
  font-family: var(--heavy);
  font-size: clamp(27px, 7vw, 46px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-align: center;
}
.not { color: var(--red); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .1em; }

.lineup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 3vw, 24px);
}

.subject {
  display: block;
  touch-action: manipulation;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.subject:disabled { cursor: default; }

.plate {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.photo {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--rule);
  outline: 1px solid var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 200ms ease;
}
@media (hover: hover) {
  .subject:not(:disabled):hover .photo { transform: translateY(-3px); box-shadow: 0 5px 0 var(--ink); }
}
.subject:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.subject.geoff .photo img { filter: grayscale(1) contrast(.9) brightness(1.05); }

.stamp {
  position: absolute;
  top: 84%;
  left: 50%;
  padding: .12em .35em;
  border: .12em solid currentColor;
  border-radius: .12em;
  background: rgba(251, 247, 234, .86);
  font-family: var(--heavy);
  font-size: clamp(17px, 5.4vw, 38px);
  line-height: 1.1;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-11deg) scale(1);
  opacity: 0;
  pointer-events: none;
}
.stamp:empty { display: none; }
.revealed .stamp { opacity: 1; animation: thunk 200ms cubic-bezier(.2, 1.5, .4, 1); }
.subject.jeff .stamp { color: var(--green); }
.subject.geoff .stamp { color: var(--red); }

/* A win lands hard. A loss barely happens. */
.win .subject.jeff .stamp { animation: slam 280ms cubic-bezier(.2, 1.4, .4, 1); }
.lose .stamp { animation: none; }
.lose .subject.geoff .stamp { transform: translate(-50%, -50%) rotate(-11deg) scale(.68); }

@keyframes slam {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(3.4); }
  70% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

@keyframes thunk {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(2.2); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

.id {
  display: block;
  min-height: 4.6em;
  padding-top: 8px;
  overflow-wrap: anywhere;
}
.id strong { display: block; font-size: clamp(14px, 3.6vw, 18px); }
.id small { display: block; color: var(--faint); font-size: 12px; }
.id a { color: inherit; }

.ruling {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ruling p { margin: 0; }
.ruling p.right { color: var(--green); font-weight: 700; }
.ruling p.wrong { color: var(--ink); font-weight: 400; }

.next {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--sheet);
  font: 700 15px var(--mono);
  cursor: pointer;
}
.next:hover { background: var(--red); border-color: var(--red); }
.next:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.tally dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.tally dd { margin: 0; font-size: 20px; font-weight: 700; }

.rank { min-height: 1.45em; margin: -6px 0 14px; font-size: 13px; color: var(--faint); }

/* Promotion banner: crosses both photos, then clears so the faces show. */
.promo { display: none; }
.promo.show {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 50%;
  display: block;
  padding: .3em .7em;
  border: 4px solid var(--red);
  background: var(--sheet);
  color: var(--red);
  font: 700 clamp(11px, 2.8vw, 15px) var(--mono);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-4deg);
  opacity: 0;
  pointer-events: none;
  animation: promote 2400ms ease forwards;
}
.promo strong {
  display: block;
  font-family: var(--heavy);
  font-size: clamp(20px, 5.8vw, 34px);
  letter-spacing: 0;
  text-transform: none;
}
@keyframes promote {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(.95); }
  18%, 80% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
}

/* J-storm. Toggled by JSTORM_ENABLED in game.js. */
#jstorm {
  position: fixed;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#jstorm span {
  position: absolute;
  top: -60px;
  color: var(--green);
  font-family: var(--heavy);
  line-height: 1;
  animation: jfall linear forwards;
}
@keyframes jfall {
  to { transform: translateY(calc(100vh + 120px)) rotate(var(--spin)); }
}

.jolt { animation: jolt 240ms ease-out; }
@keyframes jolt {
  0%, 100% { transform: none; }
  30% { transform: translateY(5px); }
  65% { transform: translateY(-2px); }
}

footer { font-size: 12px; color: var(--faint); }
footer p { margin: 6px 0; }
footer a { color: inherit; }
.credit { min-height: 1.45em; }

/* Phones: the whole game fits above Safari's bottom bar. svh is the viewport
   with browser bars showing. The credits sit below the stats and may scroll. */
@media (max-width: 520px) {
  body { padding: 0; background: var(--sheet); }
  .form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    max-width: none;
    padding: 10px 14px;
    border: 0;
    box-shadow: none;
  }
  .masthead { padding-bottom: 5px; font-size: 10px; }
  .office { white-space: nowrap; }
  h1 { margin: 10px 0; font-size: clamp(22px, 6.8vw, 30px); white-space: nowrap; }
  .lineup { gap: 10px; }
  .plate { display: none; }
  .stamp { font-size: clamp(15px, 5vw, 22px); }
  .id { min-height: 56px; padding-top: 5px; }
  .id strong { font-size: 14px; line-height: 1.25; }
  .id small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .ruling { gap: 10px; min-height: 76px; padding: 7px 0; font-size: 13px; line-height: 1.35; }
  .next { padding: 0 12px; font-size: 14px; }
  .tally { gap: 4px; margin: 8px 0; }
  .rank { margin: -3px 0 6px; font-size: 12px; }
  .tally dt { font-size: 9px; letter-spacing: .02em; white-space: nowrap; }
  .tally dd { font-size: 17px; line-height: 1.2; }
  footer { margin-top: auto; font-size: 11px; }
  footer p { margin: 3px 0; }
  .credit { min-height: 0; }
}

/* Taller phones have room to spare, so let the game breathe. */
@media (max-width: 520px) and (min-height: 620px) {
  .form { padding-top: 16px; }
  h1 { margin: 20px 0 16px; }
  .plate { display: block; font-size: 11px; }
  .id { min-height: 66px; padding-top: 8px; }
  .id strong { font-size: 15px; }
  .id small { font-size: 12px; }
  .ruling { min-height: 84px; font-size: 14px; }
  .tally { margin: 14px 0; }
  .rank { margin: -6px 0 10px; font-size: 13px; }
  .tally dt { font-size: 10px; }
  .tally dd { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .revealed .stamp, .win .subject.jeff .stamp, .jolt { animation: none; }
  .promo.show { display: none; }
  .photo, .photo img { transition: none; }
}

noscript p { margin: 12px 0; }

/* Credits page */
.credits-list { list-style: none; margin: 16px 0 0; padding: 0; font-size: 13px; }
.credits-list li { padding: 7px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.credits-list a { color: inherit; }
.credits-page h1 { text-align: left; font-size: clamp(26px, 6vw, 38px); }