/* I Want My Own Column -- presentation.
 *
 * The other two games on the shelf are framed as little windows, because both are boards
 * you look at. This one is a page you read, so it is framed as a page: one card of prose
 * at a time, and the choices underneath as a stack of full-width buttons rather than a row
 * of chips. A choice here is a sentence, sometimes a whole poem, and a sentence does not
 * fit in a chip.
 *
 * Three things carry the design.
 *
 *   The card is the passage.       One at a time, so there is nothing to scan ahead to.
 *   Dead ends turn amber.          You know you got it wrong before you read a word.
 *   The citation is the loudest     It is the reason the game exists. A wrong answer
 *   block on the page.              hands you a column to go read, and that block is
 *                                   styled to be more inviting than the retry button.
 *
 * Colors come from the site's own --purple and --blue where they exist so the three eras
 * carry it, plus a small local palette for the amber dead-end state, which the site has no
 * precedent for. The modern skin is dark, so every one of those locals is redefined at the
 * bottom rather than tinted -- amber-on-cream and amber-on-near-black are not the same
 * amber.
 */

:root {
  --adv-frame: #630096;
  --adv-face: #fff;
  --adv-ink: #111;

  /* the dead-end state */
  --adv-warn-edge: #c8912a;
  --adv-warn-face: #fffdf3;
  --adv-warn-ink: #7a5502;

  /* the citation block -- deliberately the friendliest thing on the page */
  --adv-cite-edge: #3301c3;
  --adv-cite-face: #f3f1ff;

  --adv-choice-face: #fff;
  --adv-choice-edge: #b9b3d6;
  --adv-choice-hover: #f3ecf8;

  --adv-chip-off: #cfcada;
  --adv-chip-on: #630096;
}

.adv-wrap { margin: 12px 0 18px; }

/* ---- the endorsement row ----
   Reads as a scoreboard and stays put between passages, so the three-of-three condition
   Mopkin set is always visible without a trip back to his desk. */
.adv-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font: bold 10px/1.4 Verdana, Geneva, sans-serif;
}
.adv-chips-count {
  color: var(--adv-frame);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 4px;
}
.adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--adv-chip-off);
  padding: 2px 8px 2px 6px;
  color: #8b8598;
  background: var(--adv-face);
  white-space: nowrap;
}
.adv-chip-dot {
  width: 7px;
  height: 7px;
  background: var(--adv-chip-off);
  display: inline-block;
}
.adv-chip.on {
  border-color: var(--adv-chip-on);
  color: var(--adv-chip-on);
}
.adv-chip.on .adv-chip-dot { background: var(--adv-chip-on); }
/* Lina is not one of the three and should not look like she is. */
.adv-chip.secret {
  border-style: dashed;
  border-color: #b8860b;
  color: #8a6508;
}
.adv-chip.secret .adv-chip-dot { background: #b8860b; }

/* ---- the passage card ---- */
.adv-card {
  border: 2px solid var(--adv-frame);
  background: var(--adv-face);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  padding: 14px 16px;
  outline: none;
}
.adv-title {
  margin: 0 0 8px;
  font: bold 15pt/1.25 Verdana, Geneva, sans-serif;
  color: var(--adv-frame);
}
.adv-speaker {
  font: bold 10px/1.4 Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #7a7488;
  margin-bottom: 8px;
}
.adv-text p { margin: 0 0 10px; }
.adv-text p:last-child { margin-bottom: 0; }

/* ---- dead ends ----
   The amber is the tell. You should know the answer was wrong from the color of the box,
   before reading a word of it, because the words are about what to go read next. */
.adv-card.dead {
  border-color: var(--adv-warn-edge);
  background: var(--adv-warn-face);
}
.adv-card.dead .adv-title { color: var(--adv-warn-ink); }

/* ---- the citation ----
   The whole point of the game. Getting something wrong is how you find the column you had
   not read, so this block outranks everything around it. */
.adv-cite {
  margin-top: 14px;
  border: 1px solid var(--adv-cite-edge);
  border-left-width: 5px;
  background: var(--adv-cite-face);
  padding: 9px 12px;
}
.adv-cite-hd {
  font: bold 10px/1.5 Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--adv-cite-edge);
  margin-bottom: 5px;
}
.adv-cite-hd a { color: var(--adv-cite-edge); text-decoration: underline; }
.adv-cite-bd { font-size: 10pt; }

/* ---- the reading list, on an ending ----
   Every column a dead end pointed you at, handed back in the order you tripped over
   them. */
.adv-reading {
  margin-top: 16px;
  border-top: 1px solid var(--adv-cite-edge);
  padding-top: 10px;
}
.adv-reading-hd {
  font: bold 10px/1.5 Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--adv-cite-edge);
  margin-bottom: 6px;
}
.adv-reading-list { margin: 0; padding-left: 20px; font-size: 10pt; }
.adv-reading-list li { margin-bottom: 3px; }

.adv-card.ending { border-width: 3px; }
.adv-card.ending-secret { border-color: #b8860b; }
.adv-card.ending-secret .adv-title { color: #8a6508; }

/* ---- the choices ----
   Full-width rows, not a row of chips: some of these are three lines of poetry. The number
   badge is not decoration -- the number keys pick, which is the cheese maze's "Move using
   the number keys!" doing a second job. */
.adv-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.adv-choice {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--adv-choice-edge);
  background: var(--adv-choice-face);
  color: var(--adv-ink);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.5;
  padding: 8px 12px;
  cursor: pointer;
}
.adv-choice:hover {
  background: var(--adv-choice-hover);
  border-color: var(--adv-frame);
}
.adv-choice:focus-visible { outline: 2px solid var(--adv-frame); outline-offset: 1px; }
.adv-choice-link { text-decoration: none; }
.adv-choice-link:hover { text-decoration: none; }
.adv-num {
  flex: 0 0 auto;
  font: bold 10px/1.7 Verdana, Geneva, sans-serif;
  color: #fff;
  background: var(--adv-frame);
  min-width: 17px;
  height: 17px;
  text-align: center;
  align-self: flex-start;
  margin-top: 2px;
}

/* ===================================================================== 2001 and 2003
   Squarer and tighter, to sit with the tab strip. */
[data-era="2001"] .adv-card,
[data-era="2003"] .adv-card { box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); }
[data-era="2001"] .adv-title,
[data-era="2003"] .adv-title { font-size: 13pt; }

/* ===================================================================== modern
   The modern skin is dark, so these are redefinitions rather than tweaks: an amber that
   reads as a warning on cream is mud on near-black, and a violet that reads as a link on
   white disappears into the background. */
[data-era="modern"] {
  --adv-frame: #8b5cf6;
  --adv-face: #17142b;
  --adv-ink: #e7e3f5;

  --adv-warn-edge: #d9a63c;
  --adv-warn-face: #241d10;
  --adv-warn-ink: #f0c46a;

  --adv-cite-edge: #7dd3fc;
  --adv-cite-face: #12212c;

  --adv-choice-face: #1c1830;
  --adv-choice-edge: #3a3159;
  --adv-choice-hover: #251f42;

  --adv-chip-off: #3a3159;
  --adv-chip-on: #c9a6ff;
}
[data-era="modern"] .adv-card {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  padding: 20px 22px;
}
[data-era="modern"] .adv-title { color: #c9a6ff; }
[data-era="modern"] .adv-card.dead .adv-title { color: var(--adv-warn-ink); }
[data-era="modern"] .adv-cite { border-radius: 8px; }
[data-era="modern"] .adv-cite-hd,
[data-era="modern"] .adv-cite-hd a,
[data-era="modern"] .adv-reading-hd { color: var(--adv-cite-edge); }
[data-era="modern"] .adv-chip { border-radius: 999px; background: transparent; }
[data-era="modern"] .adv-chip-dot { border-radius: 50%; }
[data-era="modern"] .adv-chips-count { color: #c9a6ff; }
[data-era="modern"] .adv-choice {
  border-radius: 10px;
  color: var(--adv-ink);
  font-size: 11pt;
}
[data-era="modern"] .adv-choice:hover { border-color: #8b5cf6; }
[data-era="modern"] .adv-num { border-radius: 6px; color: #17142b; background: #c9a6ff; }
[data-era="modern"] .adv-card.ending-secret { border-color: #d9a63c; }
[data-era="modern"] .adv-card.ending-secret .adv-title { color: #f0c46a; }

/* ---- phones ----
   The choices are the interface, so they get the room. The chip row wraps to as many lines
   as it needs rather than scrolling sideways: on a two-line row you can still see at a
   glance who has vouched, which is the only thing it is for. */
@media (max-width: 620px) {
  .adv-card { padding: 12px 13px; }
  .adv-title { font-size: 13pt; }
  .adv-choice { padding: 10px 11px; }
  .adv-chips { gap: 5px; }
}