/* Grape Expectations.
 *
 * Two typefaces on purpose. Press Start 2P does the chrome - logo, HUD,
 * buttons, tags - because that is what makes it read as a machine on this
 * shelf. The questions and answers are set in a normal serif, because a
 * 200-character tasting note in an 8x8 pixel font is unreadable at any size
 * that fits on a phone, and DESIGN.md 3.2a makes legibility the rule that
 * actually binds. See DESIGN.md 3.0 on taking the licence.
 */

/* Self-hosted: the game makes no network calls at all. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('press-start-2p.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #f4ead8;
  --dim: #b9a88c;
  --wine: #4a0d21;
  --wine-lo: #2a0512;
  --wine-hi: #6d1730;
  --gold: #e8b64c;
  --gold-lo: #8a6416;
  --good: #57c77a;
  --bad: #e4585c;
  --warn: #e8b64c;
  --panel: #1b0a10;
  --pixel: 'Press Start 2P', monospace;
  --body: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% -10%, #3a0a1a 0%, #11060a 60%, #090406 100%);
  color: var(--ink);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
}

/* ---------------- The cabinet ---------------- */
#machine {
  width: min(100%, 760px);
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 3px solid var(--gold-lo);
  border-radius: 4px;
  box-shadow: 0 0 0 3px #000, 0 14px 40px rgba(0, 0, 0, .7);
  overflow: hidden;
}

#marquee {
  flex: none;
  background: linear-gradient(180deg, var(--wine-hi), var(--wine) 60%, var(--wine-lo));
  border-bottom: 3px solid var(--gold-lo);
  padding: 10px 12px;
  text-align: center;
}

.logo {
  font-family: var(--pixel);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 1px;
}

#hud {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid rgba(232, 182, 76, .3);
}
.stat { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.stat b { font-family: var(--pixel); font-size: 13px; color: var(--ink); }
.stat i {
  font-family: var(--pixel); font-size: 8px; font-style: normal;
  color: var(--dim); letter-spacing: .5px;
}

/* ---------------- The screen ---------------- */
#screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 18px;
}

.card { display: flex; flex-direction: column; gap: 14px; }
.card[hidden] { display: none; }

h1 {
  margin: 0;
  font-family: var(--pixel);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
}

.question {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  text-shadow: none;
  margin: 0;
}

.tag {
  margin: 0;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim);
}

.sub {
  margin: 0;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 1px;
}

.blurb { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.tally { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); }
.tiny { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dim); }

.rules {
  border: 2px solid var(--gold-lo);
  border-radius: 3px;
  padding: 12px 14px;
  background: rgba(74, 13, 33, .35);
}
.rules h2 {
  margin: 0 0 8px;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1px;
}
.rules ul { margin: 0; padding-left: 18px; }
.rules li { font-size: 16px; line-height: 1.6; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

/* ---------------- Answers ---------------- */
#answers { display: flex; flex-direction: column; gap: 8px; }

.answer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  background: #2a1118;
  border: 2px solid #573042;
  border-radius: 3px;
  cursor: pointer;
}
.answer:hover:not(:disabled) { background: #3a1722; border-color: var(--gold-lo); }
.answer:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.answer:disabled { cursor: default; }

.answer .key {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 11px;
  color: var(--gold);
  background: #12060a;
  border: 2px solid var(--gold-lo);
  border-radius: 2px;
}

.answer.right { background: #12401f; border-color: var(--good); }
.answer.right .key { color: var(--good); border-color: var(--good); }
.answer.wrong { background: #48101a; border-color: var(--bad); }
.answer.wrong .key { color: var(--bad); border-color: var(--bad); }
.answer.faded { opacity: .45; }

#verdict:empty { display: none; }
#verdict {
  border-left: 5px solid var(--gold-lo);
  padding: 4px 0 4px 12px;
  font-size: 17px;
  line-height: 1.5;
}
#verdict .vhead { font-family: var(--pixel); font-size: 11px; letter-spacing: 1px; }
#verdict.ok { border-left-color: var(--good); }
#verdict.ok .vhead { color: var(--good); }
#verdict.no { border-left-color: var(--bad); }
#verdict.no .vhead { color: var(--bad); }
#verdict .note { display: block; margin-top: 6px; color: var(--dim); font-size: 16px; }

/* ---------------- Buttons ---------------- */
.big, #sound, #nameForm button {
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1.6;
  color: #1b0a10;
  background: linear-gradient(180deg, var(--gold), #c8922f);
  border: 2px solid #3a2405;
  border-radius: 3px;
  padding: 13px 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 #3a2405;
  letter-spacing: 1px;
}
.big:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a2405; }
.big:focus-visible, #sound:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.big[hidden] { display: none; }

#sound {
  position: fixed;
  top: 8px; left: 8px;
  font-size: 9px;
  padding: 7px 9px;
  z-index: 5;
}

/* ---------------- Scoreboard ---------------- */
#nameForm { display: flex; flex-direction: column; gap: 8px; }
#nameForm label {
  font-family: var(--pixel); font-size: 10px; color: var(--gold); letter-spacing: 1px;
}
.namerow { display: flex; gap: 8px; }
#nameInput {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--pixel);
  font-size: 12px;
  padding: 12px;
  color: var(--ink);
  background: #12060a;
  border: 2px solid var(--gold-lo);
  border-radius: 3px;
  text-transform: uppercase;
}
#nameInput:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board:empty { display: none; }
.board li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background: #220d14;
  border: 2px solid #3b1b26;
  border-radius: 3px;
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.6;
}
.board li.you { border-color: var(--gold); background: #3a1722; }
.board .rank { color: var(--dim); width: 28px; flex: none; }
.board .who { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .pts { color: var(--gold); }
.board .got { color: var(--dim); font-size: 9px; }

/* A flex display beats the browser's own [hidden] rule, so anything the game
   hides from script needs saying explicitly. */
#hud[hidden], #nameForm[hidden], #answers[hidden] { display: none; }


/* ---------------- Opening-screen tabs ---------------- */
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--gold-lo);
  padding-bottom: 0;
}
.tab {
  flex: 1 1 0;
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--dim);
  background: #12060a;
  border: 2px solid #3b1b26;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  padding: 12px 8px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.tab.on {
  color: var(--panel);
  background: linear-gradient(180deg, var(--gold), #c8922f);
  border-color: #3a2405;
}

.panel { display: flex; flex-direction: column; gap: 14px; }
.panel[hidden] { display: none; }

/* ---------------- Small screens ---------------- */
@media (max-width: 560px) {
  .logo { font-size: 11px; }
  .tab { font-size: 9px; padding: 11px 4px; letter-spacing: 0; }
  .stat b { font-size: 11px; }
  .stat i { font-size: 7px; }
  h1 { font-size: 12px; }
  .question { font-size: 18px; }
  .answer { font-size: 16px; padding: 11px 12px; gap: 10px; }
  .blurb, .tally { font-size: 16px; }
  #screen { padding: 12px 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .big:active { transform: none; }
}