/* ---------- the question sheet ---------- */
.qcard{background:transparent;border:0;border-radius:0;padding:0;overflow:visible;
  box-shadow:none}
/* The column wrappers are INVISIBLE by default — no box, children promoted to
   .qcard for layout — so every width below the breakpoint below is untouched. */
.qcol-ask,.qcol-do{display:contents}

/* ============================================================
   THE ROUND ON A DESKTOP: two columns, no scrolling.

   It used to be one column, and the result was APPENDED under the answer box:
   you scrolled to the bottom to type, the score and the Next button appeared
   below where you were looking, you scrolled further to read them, then the
   next question was back at the top. Measured on a 1440x820 laptop the round
   ran 536px past the bottom of the screen.

   The card is 1240px wide and the question inside it was a centred column of
   text, so the height was being spent on space the layout already had
   horizontally. Now the question holds the left column and never moves, and
   the right column carries what you DO: the reveal box and the answer row,
   which lockIn() hides, replaced in the same place by the score, the fact and
   Next. The card's height is therefore max(question, panel) instead of
   question + panel, and the whole round sits inside one screen.

   1024px, not 700px: between the two the card is too narrow to split into
   readable columns, so those widths keep the stacked layout.
   ============================================================ */
@media(min-width:1024px){
  .qcard{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:0 40px;padding:0 40px;align-items:start}
  .qcol-ask,.qcol-do{display:flex;flex-direction:column;min-width:0}
  /* The card owns the outer padding now, so the children give theirs up —
     otherwise every one of them would inset itself inside its own column. */
  .qcol-ask .qmeta{padding:26px 0 0;justify-content:flex-start}
  .qcol-ask .qtext{padding:0;text-align:left;
    font-size:calc(38px * var(--q-scale,1));margin-top:12px}
  .qcol-ask .qblurb{padding:0;margin-left:0;margin-right:0;text-align:left;max-width:none}
  .qcol-ask .qunit{padding:0;text-align:left}
  .qcol-do .scale-hint{padding:0 0 12px;justify-content:flex-start}
  .qcol-do .refbox{margin:26px 0 0}
  /* The trailing 26px is what stops Lock in sitting flush on the card's edge —
     it was 1px from it, because this row carried no bottom padding and the
     column added none of its own, so the button WAS the bottom of the card.
     It belongs HERE rather than on .qcol-do: lockIn() hides the answer row and
     shows the result in its place, so padding the column would charge the
     reveal for space it does not use, and the reveal is the taller of the two
     states — it is what decides whether a round still fits the screen. */
  .qcol-do .answer-row{padding:16px 0 26px;max-width:none;margin:0}
  .qcol-do .reveal{padding:0}
  /* The panel starts level with the question rather than at the very top of
     the card, so the two columns read as a pair instead of one floating. */
  .qcol-do{padding-top:14px}
  .qcol-do .fact{max-width:none;margin:16px 0 0;text-align:left}
  .qcol-do .next-wrap{padding:18px 0 0;justify-content:stretch}
  .qcol-do .next-wrap .primary{width:100%}
  .qcol-do .verdict-strip{text-align:left}
  .qcol-do .score-reveal{padding-top:14px}
  /* The bar chart goes. It is 200px showing the answer and the guess as two
     bars, directly above #themeReveal showing the answer and the guess as two
     numbers — the same fact twice, and the 200px is exactly what stood between
     this layout and no scrolling at all. The phone block below reached the
     same conclusion for the same reason and put it last; on a desktop there is
     no "last" worth having, so it is simply not drawn.
     Hiding the container is safe: lockIn() writes bar heights as inline styles
     and never reads them back. */
  .qcol-do .chart{display:none}

  /* ---- once the answer is on screen, the setup is spent ------------------
     The scale hint is a REFERENCE for guessing — "the biggest is 22" tells
     you the range you are aiming inside. After the reveal the actual answer
     is two lines above it, so the chip is stale context taking 69px (45 tall,
     plus 12 margin and 12 padding) at the top of the exact column that
     decides whether the round fits the screen.
     The short-phone block already reached this conclusion and hides the same
     three things; this is that trade on a desktop, and the reason the reveal
     needed 21px more than it had.
     `!important` for the same reason it is needed there: showQuestion sets
     scaleHint's display inline every question, and an inline style beats any
     rule that does not say this. */
  .qcard:has(.reveal.show) .qcol-do .scale-hint{display:none!important}

  /* The gap above Next was doubled — 16px of margin AND 18px of padding, 34px
     of nothing between the fact panel and the button. One of them is enough. */
  .qcol-do .next-wrap{padding:16px 0 26px;margin-top:0}
}

/* A SHORT desktop window — 1024x768 with browser chrome, or a laptop with the
   dock and a bookmarks bar. The two columns already fit the question; it is
   the result column that runs over, so the spacing between its four blocks
   comes in and the fact panel gives up its padding. Same trade the phone
   block makes at max-height:740px, for the same reason: on a screen this
   short, breathing room costs more than it returns. */
@media(min-width:1024px) and (max-height:800px){
  .qcol-do{padding-top:6px}
  .qcol-do .score-reveal{padding-top:6px}
  .qcol-do .verdict-strip{padding-top:6px}
  .qcol-do .fact{margin-top:6px;padding:9px 16px;font-size:14px;line-height:1.5}
  /* Tighter above, but the trailing space stays: this is the whole point of
     the change, and 18px is what stops the button sitting on the card edge. */
  .qcol-do .next-wrap{padding:9px 0 18px}
  .qcol-do .sr-score{margin-top:6px}
  .qcol-ask .qmeta{padding-top:16px}
  .qcol-ask .qtext{font-size:calc(33px * var(--q-scale,1));margin-top:8px}
}
.qmeta{padding:26px 40px 0;margin:0;justify-content:center;display:flex;gap:8px}
.pill,.pill.cat,.pill.easy,.pill.medium,.pill.hard{
  font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:none;border:0;border-radius:0;color:var(--text-muted);padding:0}
.pill.easy{color:var(--mint)}
.pill.medium{color:var(--gold)}
.pill.hard{color:var(--rust-text)}
/* Longhand rather than the `font:` shorthand, here and on the other two
   question rules. `font: 900 calc(46px * var(--q-scale,1))/1.08 ...` is legal but
   the slash after a calc() is a parser trap not worth setting for the next
   person editing this. */
.qtext{font-family:var(--display);font-weight:900;
  font-size:calc(46px * var(--q-scale,1));line-height:1.08;letter-spacing:-.025em;
  padding:0 40px;margin:14px 0 0;text-align:center;color:var(--text)}
.qblurb{padding:0 40px;margin:12px auto 0;font-size:15px;line-height:1.55;
  color:var(--text-soft);max-width:62ch;text-align:center;font-weight:500}
.qblurb:empty{display:none}
.qunit{padding:0 40px;margin-top:8px;text-align:center;font-size:13.5px;
  color:var(--text-muted)}
.qunit b{color:var(--gold);font-weight:700}

.qmedia{margin:0}
.qmedia.has-media{padding:18px 40px 0;display:flex;justify-content:center}
.media-fig{margin:0;position:relative;border-radius:12px;overflow:hidden;border:0;
  box-shadow:0 5px 0 rgba(0,0,0,.35)}
/* ONE BOX, AND EVERY QUESTION IMAGE GETS IT.

   Only the HEIGHT used to be fixed, so a figure shrink-wrapped to whatever
   aspect ratio Wikipedia happened to return: measured on real questions, a
   portrait came out 118px wide, a crest 200 and a landscape 301. The slot
   changed shape on every question. Flags were a second size again — 150x100
   against the photos' 200 tall — so the card moved when a national record
   followed a world record.

   The size lives in two custom properties and NOTHING sets width or height
   directly any more. A breakpoint overrides --mw/--mh and both kinds follow,
   which is what makes it structurally impossible for a flag and a photo to
   disagree again. 3:2 throughout. */
.media-fig{--mw:264px;--mh:176px;width:var(--mw);max-width:100%}
.media-fig img{display:block;width:100%;height:var(--mh)}
/* A FLAG IS NEVER CROPPED, and that is the other half of "the same size".
   cover fills the box by trimming, so a square flag was drawn zoomed in while
   a 3:2 one was not — same box, visibly different scale, which is exactly what
   made two flags look like different sizes. contain draws every flag at its
   own proportions inside the same box, so they are all directly comparable.
   Nepal is not even a rectangle; there is no honest way to crop it. */
.flag-fig img{object-fit:contain;background:rgba(0,0,0,.25)}
/* CROPPED FROM THE TOP THIRD, not the middle. object-fit:cover trims whatever
   does not fit, and centring that trim on a portrait removes the head and
   leaves the torso — which is what a question about Napoleon was showing.
   Wikipedia's lead image is a portrait far more often than not, and where it
   is a building or a landscape the interesting part is rarely the very bottom
   either, so biasing upwards costs those nothing. */
.photo-fig img{object-fit:cover;object-position:50% 22%;filter:saturate(.95)}
.media-fig figcaption{font:700 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;background:rgba(0,0,0,.55);color:var(--on-accent);padding:7px 10px;
  display:flex;justify-content:space-between;gap:8px}
.media-credit{color:var(--gold-dim)}

.scale-hint{padding:16px 40px 0;display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center}
/* var(--text-soft), not a literal. This was #CBD9D6 — a pale grey picked
   against the dark sheet, which is most of the chip's text: the SUBJECT sits
   here ("Argentina"), while the number below uses --text and the label uses
   --text-muted, both of which already flip with the theme. So in light mode
   the number and the label darkened and the name alone stayed near-white on
   near-white. --text-soft is the variable for this exact role and is
   #B4C6C4 dark / #28393C light. */
.scale-chip{background:var(--sheet);border:0;border-radius:999px;
  font-size:13px;padding:8px 15px;color:var(--text-soft);display:inline-flex;
  align-items:center;gap:8px}
.scale-chip b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.scale-chip .k{font-size:9.5px;letter-spacing:.14em;color:var(--text-muted);
  background:none;padding:0;margin:0}

/* ---------- reference reveal ---------- */
.refbox{background:var(--sheet);border:0;border-radius:16px;
  margin:20px 40px 0;padding:16px 20px}
.refbox .rlbl{font-size:10px;letter-spacing:.14em;color:var(--gold);margin-bottom:9px}
.ref-desc{font-size:13.5px;color:var(--text-soft);line-height:1.55}
.ref-desc b{color:var(--text)}
.ref-input,.answer-row input,.mp-field input,.mp-chat-row input,.mp-linkrow input{
  background:var(--field);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-family:var(--font);font-size:15px;font-weight:600;padding:11px 14px}
.ref-input::placeholder,.answer-row input::placeholder{color:var(--text-muted)}
.ref-input:focus,.answer-row input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
/* THE SAME BUG THE MODALS HAD, and the note above .modal describes it exactly:
   this floats above the page and its fill was hardcoded #1B2C30, while
   .ac-item below paints its text with var(--text). In light mode --text is
   near-black, so the list became dark grey lettering on a dark teal slab
   hanging over a white page — the reveal picker, unreadable, on both the
   single-name box and the distance pair.

   --overlay is the token for precisely this ("anything that floats ABOVE the
   page"), so the panel is white in light and #16262B in dark. That is five
   hex units off the old dark value and puts this list on the same fill as
   every other floating surface, which is the point of having the token. */
.ac{position:absolute;top:48px;left:0;right:0;z-index:20;background:var(--overlay);
  border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;
  max-height:230px;overflow-y:auto;box-shadow:0 14px 30px rgba(0,0,0,.55);display:none}
.ac.show{display:block}
/* placeAC sets top/bottom/left/width itself now — this only has to stop the
   base `top:48px` winning over the inline value when the list opens upward. */
.ac.up{top:auto}
.ac-item{padding:10px 14px;cursor:pointer;font-size:14px;color:var(--text);
  border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;
  align-items:center;gap:8px}
.ac-item:last-child{border-bottom:none}
.ac-item.active,.ac-item:hover{background:var(--gold);color:var(--ink-2);font-weight:700}
.ac-cost{font:700 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--text-muted)}
.ac-item.active .ac-cost,.ac-item:hover .ac-cost{color:var(--ink-2)}
.flag-mini{width:22px;height:15px;object-fit:cover;border-radius:2px;flex:none}
.ref-result{margin-top:10px}
.ref-result .rc{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted)}
.ref-result .rv{font:900 21px/1.2 var(--display);color:var(--gold);margin-top:3px}
.ref-skip{margin-top:10px;font-size:13px;color:var(--text-muted)}
.ref-skip a,.skip a{color:var(--gold);cursor:pointer;font-weight:700}

/* ---------- answer ---------- */
.answer-row{display:flex;gap:10px;justify-content:center;align-items:stretch;
  padding:24px 40px 0;max-width:760px;margin:0 auto}
.answer-row input{flex:1;font:900 30px/1 var(--display);letter-spacing:-.01em;
  text-align:left;padding:20px 22px;border-radius:14px;border:2px solid #2B4A5E;
  background:var(--field);font-variant-numeric:tabular-nums}
.answer-row input:focus{border-color:#3D6E8C;outline:2px solid var(--gold);outline-offset:2px;}

/* ---- the race-time input -------------------------------------------------
   Sits where #guess would, and takes its place rather than joining it: one of
   the two is always display:none, so there is never a question with two live
   guess fields.

   Each unit is its own box with its own label under it, which is the whole
   point — "2 hr 4 min 30 sec" cannot be misread the way a bare 2:04:30 can,
   and a sprint never shows an hours box to leave at zero. `flex:1` on the
   group and on each field keeps it the same width as the plain input, so the
   row does not resize as the deck changes. */
.time-input{flex:1;display:flex;gap:8px}
.tfield{flex:1;position:relative;display:flex;flex-direction:column}
.time-input input{flex:1;width:100%;font:900 30px/1 var(--display);
  letter-spacing:-.01em;text-align:center;padding:20px 10px 24px;
  border-radius:14px;border:2px solid #2B4A5E;background:var(--field);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
/* The spinners are 30px of arrows beside a number the player types. On a
   three-box row they eat the digits. */
.time-input input::-webkit-outer-spin-button,
.time-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.time-input input:focus{border-color:#3D6E8C;outline:2px solid var(--gold);outline-offset:2px;}
.tfield span{position:absolute;left:0;right:0;bottom:7px;text-align:center;
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);pointer-events:none}

/* CE / BCE, on year questions only.

   `padding:0 18px` was enough on a laptop and nowhere else: the answer row is
   a flex ROW there, so `align-items:stretch` gave the button the input's
   height for free. On a phone the row is a COLUMN, stretch governs width
   instead, and with no vertical padding the only thing left setting the
   height was the 12px line — a 12px-tall control you are expected to hit
   with a thumb. It carries its own height now. */
.era-toggle{font:700 12px/1 var(--mono);letter-spacing:.1em;background:var(--sheet-2);
  border:0;border-radius:12px;color:var(--text);padding:14px 18px;cursor:pointer;
  min-height:44px}
.era-toggle:hover{background:var(--sheet-3)}
/* Selected, not primary. Filled gold was fine when this was a small chip
   beside the input; now that it is a full-width button stacked directly above
   Lock in, a second solid gold block reads as a second thing to press. An
   outline says "this one is on" without competing with the action. */
.era-toggle[aria-pressed="true"]{background:rgba(var(--gold-rgb),.15);
  box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
.era-toggle[aria-pressed="true"]:hover{background:rgba(var(--gold-rgb),.24)}

/* The base sheet styles `button.primary` — a tag+class selector — so these
   have to carry the tag too or the old blue gradient keeps winning. */
.primary,button.primary,.share-btn,button.share-btn{
  font:900 16px/1 var(--display);letter-spacing:.03em;
  text-transform:uppercase;background:var(--gold);background-image:none;
  color:var(--ink-2);border:0;
  border-radius:12px;padding:18px 34px;cursor:pointer;
  box-shadow:0 5px 0 var(--gold-sh);transition:transform .1s,box-shadow .1s}
.primary:hover,button.primary:hover,.share-btn:hover,button.share-btn:hover{
  background:var(--gold-hi);background-image:none}
.primary:active,.share-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-sh)}
.primary:disabled,button.primary:disabled,.share-btn:disabled{opacity:.45;
  box-shadow:0 5px 0 var(--gold-sh);cursor:default;transform:none}
.share-btn.ghost{background:var(--sheet-2);color:var(--text);box-shadow:0 5px 0 rgba(0,0,0,.3)}
.share-btn.ghost:hover{background:var(--sheet-3)}
#lockBtn{min-width:210px}
.lock-wrap{display:flex;justify-content:center;padding:18px 40px 0}
.answer-note{text-align:center;font-size:13.5px;color:var(--text-muted);line-height:1.5;
  padding:14px 40px 0;max-width:56ch;margin:0 auto}


/* ---------- the reveal ---------- */
.reveal{padding:0 40px}
/* `.sr-score` is a SIBLING of `.sr-nums`, not a third column of it — the
   two readings sit on one line and the score sits centred beneath them. */
.score-reveal{padding:26px 0 0}
.sr-nums{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.sr-side{display:flex;flex-direction:column;gap:3px;min-width:0}
.sr-side.right{text-align:right;align-items:flex-end}
.sr-lbl{font-size:10px;letter-spacing:.14em;color:var(--text-muted)}
.sr-who{font-size:12.5px;color:var(--text-soft);font-weight:600}
.sr-val{font:900 34px/1.1 var(--display);color:var(--text);margin-top:2px;
  font-variant-numeric:tabular-nums}
.sr-val.you{color:var(--gold)}
.sr-score{display:flex;align-items:baseline;justify-content:center;gap:9px;
  background:rgba(87,184,148,.12);border:1px solid rgba(87,184,148,.4);
  border-radius:14px;padding:13px 24px;margin:20px auto 0;width:max-content}
.sr-score #srNum{font:900 38px/1 var(--display);color:var(--mint);
  font-variant-numeric:tabular-nums}
.sr-score i{font-style:normal;font:700 13px/1 var(--mono);letter-spacing:.1em;
  color:var(--text-muted);display:inline}
.sr-track{height:8px;background:var(--sheet-2);border-radius:99px;margin:18px 0 8px;
  position:relative;overflow:hidden}
.sr-fill{height:100%;background:var(--gold);border-radius:99px;
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.sr-ref{display:flex;justify-content:space-between;font:700 11px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.sr-ref b{color:var(--gold);font-weight:700}
.sr-ref span{white-space:nowrap}

/* the two-bar comparison keeps its shape, loses the gradients */
.chart{display:flex;gap:44px;justify-content:center;align-items:flex-end;
  padding:24px 0 0;height:200px}
.col{width:104px;gap:9px}
.bar-val{font:900 20px/1 var(--display);color:var(--text);font-variant-numeric:tabular-nums}
.bar{border-radius:10px 10px 0 0;box-shadow:none}
.bar.answer{background:var(--m-unl);box-shadow:none}
.bar.guess,.bar.guess.grey{background:#3E5A5C;box-shadow:none}
.bar.guess.green{background:var(--mint);box-shadow:none}
.bar.guess.gold{background:var(--gold);box-shadow:none}
.bar.guess.yellow{background:#E8C44C;box-shadow:none}
.bar.guess.orange{background:var(--rust);box-shadow:none}
.bar.guess.red{background:var(--red);box-shadow:none}
.bar-lbl{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted)}
.bars{padding:20px 0 0}
.bar-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;
  align-items:center;padding:7px 0}
.bar-key{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted)}
.bar-key i{font-style:normal;color:var(--gold)}
.bar-track{height:10px;background:var(--sheet-2);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:var(--gold);
  transition:width .55s cubic-bezier(.4,0,.2,1)}
.bar-fig{font:900 15px/1 var(--display);color:var(--text);font-variant-numeric:tabular-nums}
.bar-note{font-size:13px;color:var(--text-muted);padding-top:8px}
.bar-note b{color:var(--text)}

.verdict-strip{display:flex;justify-content:center;padding:20px 0 0;margin:0;
  min-height:0}
.verdict-chip{font:900 13px/1 var(--display);letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:12px 24px;
  background:var(--sheet-2);color:var(--text);border:0}
/* the coloured variants keep their tint but drop the base's border */
.verdict-chip.gold,.verdict-chip.green,.verdict-chip.yellow,
.verdict-chip.orange,.verdict-chip.red{border:0;box-shadow:none}
.fact{background:var(--sheet);border:0;border-radius:16px;
  font-size:15px;line-height:1.6;color:var(--text-soft);text-align:center;
  padding:18px 22px;max-width:66ch;margin:20px auto 0}
.fact b{color:var(--text)}
.fact .fact-tag{display:block;font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fact .src{display:block;margin-top:9px;font:400 11.5px/1.4 var(--mono);
  color:var(--text-muted)}
.next-wrap{display:flex;justify-content:center;padding:24px 0 34px}

/* ---------- the run HUD ---------- */
.mode-banner{display:flex;align-items:center;gap:14px;padding:15px 32px;
  background:var(--bar-tint);font-size:13.5px;color:var(--text-muted);
  border:0;border-radius:0;margin:0}
.mode-banner .mb-left{font-weight:700;display:flex;align-items:center;gap:12px}
.mode-banner .tag,.mode-banner .mb-left .tag,
.mode-banner .tag.daily,.mode-banner .tag.unlimited,.mode-banner .tag.archive{
  font:700 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;background:var(--sheet-2);color:var(--text);padding:8px 13px;
  border-radius:8px;letter-spacing:.12em}
.mode-banner .tag.daily{background:var(--m-daily)}
.mode-banner .tag.unlimited{background:var(--m-unl)}
.mode-banner .tag.archive{background:var(--m-party)}
.mode-banner a{margin-left:auto;font:700 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);cursor:pointer;text-decoration:none}
.mode-banner a:hover{color:var(--text)}
.hud{background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  padding:16px 32px;margin:0;box-shadow:none;
  display:flex;align-items:center;gap:20px}
.hud-top{display:flex;align-items:center;gap:20px;margin:0;flex:1;
  justify-content:space-between}
.score-block{display:flex;align-items:baseline;gap:9px;order:2}
.score-num{font:900 26px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.score-lbl{font-size:10.5px;letter-spacing:.12em;color:var(--text-muted)}
.dots{display:flex;gap:6px;order:1}
.dot{width:22px;height:7px;border-radius:99px;background:var(--sheet-2);
  border:0;transition:background .3s}
.dot.cur{background:#CBD9D6;box-shadow:none}
.dot.gold,.dot.g{background:var(--gold)}
.dot.green{background:var(--mint)}
.dot.yellow,.dot.y{background:var(--gold)}
.dot.orange,.dot.o{background:var(--rust)}
.dot.red,.dot.r{background:var(--red)}
.health{height:0;border:0;background:none;overflow:hidden}
.health-fill{display:none}