/* Article-owned game skin. Uses the original tier board's approved dark surface
   and tier colors in both site themes; shared site tokens supply typography. */
.cg,.cg-share-dialog {
  --cg-bg:#1a1a17;--cg-panel:#262622;--cg-rule:#48483f;--cg-ink:#fff;--cg-muted:#c8c8c0;
  --cg-s:#ff7f7f;--cg-a:#ffbf7f;--cg-b:#ffdf7f;--cg-c:#ffff7f;--cg-d:#bfff7f;--cg-hell:#ff4d4d;
  color:var(--cg-ink);background:var(--cg-bg);font-family:var(--sq-mono);font-size:.83rem;line-height:1.5;
}
.cg {padding:clamp(16px,3vw,28px);scroll-margin-top:20px}
.cg *, .cg-share-dialog * {box-sizing:border-box}
.cg [hidden],.cg-share-dialog [hidden] {display:none!important}
.cg button,.cg input,.cg-share-dialog button,.cg-share-dialog input {font:inherit}
.cg button,.cg summary,.cg-share-dialog button {cursor:pointer;touch-action:manipulation}
.cg button:disabled,.cg-share-dialog button:disabled {cursor:default;opacity:.55}
.cg :focus-visible,.cg-revisit :focus-visible,.cg-share-dialog :focus-visible {outline:3px solid var(--sq-hit);outline-offset:3px}
.cg p {margin:0 0 14px}
.cg h3,.cg h4,.cg-share-dialog h3 {margin:0;color:inherit;border:0;padding:0;letter-spacing:0;text-transform:none}
.cg-intro {display:flex;justify-content:space-between;align-items:center;gap:18px}
.cg #cg-title {font:800 clamp(2.6rem,6vw,4rem)/1 var(--sq-display);margin-bottom:12px}
.cg .cg-read {color:var(--cg-b);padding:10px 0;font-size:.73rem;white-space:nowrap}
.cg .cg-deck {max-width:60ch;color:var(--cg-muted);font-size:.84rem}
.cg .cg-crowd-note {max-width:72ch;color:var(--cg-muted);font-size:.72rem;margin:12px 0 4px}
.cg .cg-crowd-note a {color:var(--cg-b)}
.cg-tabs {display:flex;border-bottom:1px solid var(--cg-rule);margin:18px 0}
.cg-tab {background:transparent;color:var(--cg-muted);border:0;border-bottom:3px solid transparent;min-height:44px;padding:10px 20px}
.cg-tab[aria-pressed="true"] {color:var(--cg-ink);border-bottom-color:var(--cg-b)}
.cg-active {display:flex;align-items:center;gap:22px;min-height:162px;padding:12px 0 20px}
.cg .cg-portrait {width:120px;height:128px;object-fit:cover;background:var(--cg-panel);border-bottom:4px solid var(--cg-b);flex-shrink:0}
.cg-active-copy {min-width:0}
.cg-active h4 {font:800 clamp(1.8rem,4vw,2.7rem)/1.05 var(--sq-display);margin:5px 0 10px}
.cg .cg-current-tier {color:var(--cg-muted);margin:0}
.cg-vote-buttons {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.cg-vote-buttons button {min-height:58px;padding:8px 2px;border:2px solid transparent;color:#111;font:800 1.65rem/1 var(--sq-display)}
.cg [data-tier="s"],.cg [data-tier-row="s"] .cg-tier-label {background:var(--cg-s)}
.cg [data-tier="a"],.cg [data-tier-row="a"] .cg-tier-label {background:var(--cg-a)}
.cg [data-tier="b"],.cg [data-tier-row="b"] .cg-tier-label {background:var(--cg-b)}
.cg [data-tier="c"],.cg [data-tier-row="c"] .cg-tier-label {background:var(--cg-c)}
.cg [data-tier="d"],.cg [data-tier-row="d"] .cg-tier-label {background:var(--cg-d)}
.cg [data-tier="hell"],.cg [data-tier-row="hell"] .cg-tier-label {background:var(--cg-panel);color:var(--cg-hell);box-shadow:inset 0 0 0 1px var(--cg-rule)}
.cg-vote-buttons button[aria-pressed="true"] {border-color:#111;box-shadow:0 0 0 2px var(--cg-ink)}
.cg-vote-buttons button:hover:not(:disabled) {filter:brightness(1.12)}
.cg-step-actions {display:flex;justify-content:space-between;gap:8px;margin:4px 0 8px}
.cg-text {display:inline-flex;align-items:center;min-height:44px;padding:7px 0;border:0;background:transparent;color:var(--cg-muted,var(--sq-link));text-decoration:underline;text-underline-offset:3px;font-family:var(--sq-mono);font-size:.75rem}
.cg details {border-top:1px solid var(--cg-rule)}
.cg summary {padding:13px 0;min-height:46px;font-weight:600}
.cg-browse label {display:block;color:var(--cg-muted);font-size:.75rem;margin:6px 0}
.cg .cg-search {width:100%;min-height:44px;padding:10px;background:var(--cg-panel);color:var(--cg-ink);border:1px solid var(--cg-rule);border-radius:0;margin-bottom:12px}
.cg-search-results {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:300px;overflow-y:auto;padding:4px 4px 12px}
.cg-coach {display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 7px;align-items:center;text-align:left;padding:6px;min-height:50px;min-width:0;color:var(--cg-ink);background:var(--cg-panel);border:1px solid var(--cg-rule);border-radius:0}
.cg-coach img {grid-row:span 2;width:36px;height:40px;object-fit:cover}
.cg-coach-name {font-size:.69rem;line-height:1.3;overflow-wrap:anywhere}
.cg-coach small {font-size:.58rem;color:var(--cg-muted);line-height:1.3}
.cg-coach:hover:not(:disabled) {background:var(--cg-rule)}
.cg-save-row {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 18px}
.cg-count {font-size:.72rem;color:var(--cg-muted)}
.cg-btn {display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:10px 14px;background:var(--cg-ink,var(--sq-panel));color:var(--cg-bg,var(--sq-ink));border:1px solid var(--cg-ink,var(--sq-border));font:600 .73rem/1.4 var(--sq-mono);text-decoration:none;cursor:pointer;border-radius:0}
.cg-btn:hover:not(:disabled) {background:var(--cg-b,var(--sq-bg))}
.cg-tier-row {display:grid;grid-template-columns:48px minmax(0,1fr);border:1px solid var(--cg-rule);border-bottom:0;min-height:62px}
.cg-tier-row:last-child {border-bottom:1px solid var(--cg-rule)}
.cg-tier-label {display:flex;align-items:center;justify-content:center;font:800 1.15rem var(--sq-display);color:#111}
.cg-tier-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;align-content:center}
.cg-empty {padding:12px;color:var(--cg-muted)}
.cg-over .cg-tier-tiles {outline:2px dashed var(--cg-ink);outline-offset:-3px}
.cg .cg-note {font-size:.66rem;line-height:1.6;color:var(--cg-muted);margin:10px 0 16px}
.cg .cg-status {font-size:.73rem;color:var(--cg-b);margin:12px 0;min-height:1.5em}
.cg-footer {display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--cg-rule);padding-top:16px}
.cg-footer-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
.cg-save-note {max-width:29ch;color:var(--cg-muted);font-size:.62rem;text-align:right}
.cg-crowd-heading {display:flex;justify-content:space-between;align-items:center;gap:12px}
.cg-crowd-heading h4 {font:800 1.75rem var(--sq-display)}
.cg .cg-crowd-count {font-size:.74rem;color:var(--cg-muted)}
.cg-crowd-changes {margin-top:16px}
.cg-crowd-movement p,.cg-changes p {font-size:.73rem;margin:7px 0}
.cg-distribution {padding:14px;background:var(--cg-panel);margin:12px 0}
.cg-distribution h4 {font:800 1.5rem var(--sq-display);margin-bottom:6px}
.cg-bar-row {display:grid;grid-template-columns:38px minmax(0,1fr) 32px;gap:10px;align-items:center;min-height:30px}
.cg-bar-row meter {width:100%;height:18px;accent-color:var(--cg-b)}
.cg-shared {border:1px solid var(--cg-b);padding:14px;margin:18px 0}
.cg-shared h4 {font:800 1.7rem var(--sq-display);margin-bottom:14px}
.cg-shared .cg-coach:disabled {opacity:1}
.cg-shared p {font-size:.72rem;margin-top:14px}
.cg-revisit {margin:32px 0;padding:22px;border:1px solid var(--sq-border);background:var(--sq-panel)}
.cg-revisit strong {font:800 1.8rem var(--sq-display)}
.cg-revisit p {margin:8px 0 14px}
.cg-revisit .cg-text {margin-left:14px}
.cg-share-dialog {width:min(580px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:22px;border:2px solid var(--cg-rule);overflow:auto}
.cg-share-dialog::backdrop {background:#000b}
.cg-share-dialog h3 {font:800 2rem var(--sq-display);margin:0 0 12px}
.cg-share-dialog label {display:flex;gap:10px;align-items:center;min-height:44px}
.cg-share-dialog input[type="checkbox"] {width:20px;height:20px}
.cg-share-preview {display:block;width:100%;height:auto;margin:14px 0}
.cg-share-actions {display:flex;flex-wrap:wrap;gap:8px}
.cg-share-dialog .cg-share-url {display:block;width:100%;min-height:44px;padding:8px;background:var(--cg-panel);color:var(--cg-ink);border:1px solid var(--cg-rule);margin:12px 0}
.cg-share-dialog .cg-note {font-size:.7rem;color:var(--cg-muted)}
@media(max-width:600px) {
  .cg-intro {align-items:flex-start;gap:8px}
  .cg .cg-read {font-size:.65rem;white-space:normal;text-align:right;max-width:105px}
  .cg-active {gap:16px;min-height:144px}
  .cg .cg-portrait {width:90px;height:105px}
  .cg-search-results {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-tier-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-save-row {flex-wrap:wrap}
  .cg-save {width:100%}
  .cg-tier-row {grid-template-columns:36px minmax(0,1fr)}
  .cg-coach {grid-template-columns:28px minmax(0,1fr);gap:0 5px;padding:5px}
  .cg-coach img {width:28px;height:34px}
  .cg-coach-name {font-size:.6rem}
  .cg-footer {align-items:flex-start}
  .cg-save-note {max-width:20ch}
}
@media(max-width:370px) {.cg-tier-tiles {grid-template-columns:1fr}.cg {padding:12px}.cg-vote-buttons {gap:4px;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce) {.cg * {scroll-behavior:auto!important}}

.cg-signup{padding:18px;margin:16px 0;border:1px solid var(--sq-border,#596371)}.cg-signup h4{margin:0 0 12px;font:700 18px var(--mono,monospace);color:var(--sq-ink,#eee)}.cg-signup .beta-form{display:flex;flex-wrap:wrap;gap:10px}.cg-signup .beta-form input[type=email]{min-width:0;flex:1 1 180px;max-width:100%;font-size:16px}.cg-signup .beta-form button{min-height:44px}.cg-signup p{font-size:14px;line-height:1.5}.cg-signup .cg-signup-close{min-height:44px}

.coaching-scroll-signup[hidden],.cg-signup[hidden]{display:none!important}

/* ── the board ──────────────────────────────────────────────────────────────
   A tier list, which is a shape people already know from tiermaker: a coloured
   label at the left, a tray of cards to the right of it, one row per tier. */
.cg-row{display:flex;align-items:stretch;border:1px solid var(--cg-rule);border-top:0;background:var(--cg-panel)}
.cg-row:first-child{border-top:1px solid var(--cg-rule)}
.cg-row-label{display:flex;align-items:center;justify-content:center;flex:0 0 62px;font:700 26px/1 system-ui;color:#111;text-align:center}
.cg-row[data-tier-row=s] .cg-row-label{background:var(--cg-s)}
.cg-row[data-tier-row=a] .cg-row-label{background:var(--cg-a)}
.cg-row[data-tier-row=b] .cg-row-label{background:var(--cg-b)}
.cg-row[data-tier-row=c] .cg-row-label{background:var(--cg-c)}
.cg-row[data-tier-row=d] .cg-row-label{background:var(--cg-d)}
.cg-row[data-tier-row=hell] .cg-row-label{background:var(--cg-panel);color:var(--cg-hell);font-size:18px;box-shadow:inset 0 0 0 1px var(--cg-rule)}
.cg-row-spare .cg-row-label{background:#2f2f29;color:var(--cg-muted);font:600 13px/1.2 'IBM Plex Mono',monospace}
.cg-tray{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;flex:1;min-height:74px;padding:7px}
.cg-empty{align-self:center;color:#57574e;font:400 20px/1 'IBM Plex Mono',monospace;padding-left:6px}

/* A card is a thing you pick up, not a thing you select.
   Holding one on iOS started a text selection: the blue overlay, the drag
   handles, and the Copy/Paste callout over the top of the board -- while our
   own drag ran underneath it. The hold is exactly the gesture both want, so
   the browser has to be told this one is not text. */
.cg-card{display:flex;flex-direction:column;align-items:center;gap:2px;width:76px;padding:5px 3px;background:#1f1f1b;border:1px solid var(--cg-rule);color:var(--cg-ink);font:inherit;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative}
.cg-card img{width:48px;height:48px;object-fit:cover;object-position:top center;background:#2b2b25;pointer-events:none}
.cg-card-name{max-width:100%;overflow-wrap:anywhere;font:600 11px/1.2 system-ui;text-align:center}
/* overflow-wrap above is the net, not the plan: it stops a name escaping the
   card, and this stops it needing to. Measured rather than guessed --
   Schottenheimer sets 85.9px at the normal size, 71.9px at 9px, and 64.7px
   here, against the 68px a card has to give.
   On a phone the card is 62px and nothing legible fits on one line, so the
   name hyphenates instead of breaking wherever it likes: Schotten-heimer
   reads as typesetting, Schottenheimer split with no hyphen reads as a bug.
   overflow-wrap goes back to normal here so hyphenation is what happens. */
.cg-card-name.is-longish{font-size:10px;letter-spacing:-.01em;overflow-wrap:normal}
.cg-card-name.is-long{font-size:8px;letter-spacing:-.01em;overflow-wrap:normal}
.cg-card small{font:400 10px/1.2 'IBM Plex Mono',monospace;color:var(--cg-muted)}
.cg-card:focus-visible{outline:2px solid var(--cg-b);outline-offset:2px}
.cg-card[disabled]{cursor:default;opacity:.9}
/* Picked up by tapping: the card stays put and says so, because a card that
   vanished into a held state would leave nothing to tap again to cancel. */
.cg-card.is-picked{border-color:var(--cg-b);box-shadow:0 0 0 2px var(--cg-b)}
.cg-card.is-lifted{opacity:.35}
/* The card in the air. Positioned by its own top-left now rather than centred
   on the pointer, so it stays where it was grabbed instead of jumping. Tilted
   and lifted a little, because a card that looks picked up is the difference
   between "I am dragging this" and "something is following my finger". */
.cg-ghost{position:fixed;z-index:60;pointer-events:none;cursor:grabbing;
  transform:scale(1.06) rotate(-2deg);transform-origin:center;
  box-shadow:0 10px 24px rgba(0,0,0,.55);opacity:.97}
.cg-row.is-over{outline:2px solid var(--cg-b);outline-offset:-2px}
/* Where it will land. The row outline says which tier; these say where in it,
   which is the half the reader could not see before. */
.cg-card.is-next{box-shadow:-3px 0 0 0 var(--cg-b)}
.cg-row.is-tail .cg-tray::after{content:'';flex:0 0 3px;align-self:stretch;background:var(--cg-b);margin:6px 0}
/* Only while a card is actually in hand: setting this permanently would stop
   the page scrolling wherever a card happens to be under a finger. */
.cg.is-dragging .cg-card{touch-action:none}
/* No animation on the lifted card while it is being dragged: the ghost is the
   thing moving, and a transition on the original makes the row breathe under
   it every time the board re-renders. */
.cg.is-dragging .cg-card.is-lifted{transition:none}
/* The board itself too: a hold that starts a pixel outside a card would
   otherwise select the row around it. */
.cg-own-board,.cg-tray,.cg-row{-webkit-user-select:none;user-select:none}
.cg.is-dragging{-webkit-touch-callout:none}

/* Up and down, on the card you just tapped.
   Dragging from the bottom of the board to the top of it is a long way on a
   phone, and a drag that has to cross five rows is a drag that gets dropped
   in the wrong one. Tapping a coach gives him two arrows; each press moves him
   one tier. No gear, nothing to configure -- the two things anyone wants are
   the two things there. */
/* Four sides, which is where the four answers are: the tier is up or down,
   the place in the row is left or right. Anywhere else and the reader has to
   read the arrow to know what it does. */
.cg-nudge{position:absolute;width:19px;height:17px;padding:0;border:1px solid var(--cg-rule);
  background:#c0c0c0;color:#0a0a0a;font:700 9px/1 'IBM Plex Mono',monospace;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset -1px -1px 0 #808080, inset 1px 1px 0 #fff}
/* The way into the rest of a row, sized like a card so the row keeps its
   rhythm rather than growing a stub on the end. */
.cg-more{align-self:stretch;min-width:44px;padding:4px 8px;background:#c0c0c0;color:#0a0a0a;border:0;
  font:700 11px/1 'IBM Plex Mono',monospace;cursor:pointer;
  box-shadow:inset -1px -1px 0 #0a0a0a, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf}
.cg-more:active{box-shadow:inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf}
.cg-more:focus-visible{outline:2px solid var(--cg-b);outline-offset:2px}

.cg-nudge-up{top:-1px;left:50%;transform:translateX(-50%)}
.cg-nudge-down{bottom:-1px;left:50%;transform:translateX(-50%)}
.cg-nudge-left{left:-1px;top:50%;transform:translateY(-50%)}
.cg-nudge-right{right:-1px;top:50%;transform:translateY(-50%)}
.cg-nudge:active{box-shadow:inset 1px 1px 0 #808080, inset -1px -1px 0 #fff}
.cg-nudge:focus-visible{outline:2px solid var(--cg-b);outline-offset:1px}
.cg.is-dragging{cursor:grabbing;user-select:none}

/* ── three boards, one at a time ─────────────────────────────────────────────
   Native scroll-snap rather than a hand-written swipe handler: the browser
   already knows how a swipe should feel, and reimplementing it always gets
   the momentum wrong on somebody's device. */
/* The tabs move between boards; a finger does not.
   Swiping was competing with dragging a card: a drag that began with a bit of
   sideways travel took the board with it and landed the reader on a different
   tab, holding nothing. The panes still sit side by side and goTo still
   scrolls between them -- a container can be scrolled by script with its
   overflow hidden, which is exactly the asymmetry wanted here. */
.cg-rail{display:flex;align-items:flex-start;overflow:hidden;touch-action:pan-y;scrollbar-width:none;margin:8px 0 0}
@media (prefers-reduced-motion:no-preference){.cg-rail{transition:height .2s ease-out}}
.cg-rail::-webkit-scrollbar{display:none}
.cg-rail:focus-visible{outline:2px solid var(--cg-b);outline-offset:3px}
.cg-pane{flex:0 0 100%;min-width:100%;scroll-snap-align:start;padding:0 1px}
/* Above the boards, not below them: a control you find after scrolling past
   the thing it controls is a control most people never find. */
/* One row, and dressed for the window it lives in.
   They wrapped before, so Disagreements sat on a line of its own underneath --
   which reads as a different kind of control rather than the third of three.
   nowrap plus shrinking type keeps all three together at any width a phone
   has. The bevels are the Windows 95 ones: light top and left, dark bottom
   and right, and the selected tab wears the same bevel inverted, which is
   what pressed looked like in 1995 and still reads as pressed now. */
.cg-dots{display:flex;gap:4px;margin:14px 0 0;flex-wrap:nowrap}
.cg-dot{flex:0 1 auto;min-width:0;white-space:nowrap;padding:6px 10px;background:#c0c0c0;border:0;
  color:#0a0a0a;font:600 12px/1 'IBM Plex Mono',monospace;cursor:pointer;
  box-shadow:inset -1px -1px 0 #0a0a0a, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf}
.cg-dot[aria-selected=true]{background:#d8d4cc;
  box-shadow:inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf}
.cg-dot:active{box-shadow:inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf}
.cg-dot:focus-visible{outline:2px solid var(--cg-b);outline-offset:2px}

/* ── where you disagree ──────────────────────────────────────────────────── */
.cg-gaps h4{margin:4px 0 10px;font:700 15px/1.2 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--cg-b)}
.cg-gap{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--cg-rule)}
.cg-gap img{width:38px;height:38px;object-fit:cover;object-position:top center;flex:0 0 38px}
.cg-gap b{flex:0 1 auto;min-width:0;font:700 14px/1.2 system-ui}
.cg-gap-detail{margin-left:auto;font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--cg-muted);text-align:right}

/* The bot trap, which only works on bots if people cannot see it.
   It used to be hidden by `.beta-form .hp` in beta.css, and renaming the form
   to .cg-gate-form took it out of that selector's reach -- so a field labelled
   "Leave this empty" appeared next to the email box, which is either a puzzle
   or a mistake depending on how charitable the reader is feeling. Hidden here
   rather than by putting the old class back, so this panel does not depend on
   a stylesheet written for a different form. */
.cg-gate-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── the three things you can press ──────────────────────────────────────── */
.cg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 0}

@media (max-width:600px){
  .cg-row-label{flex:0 0 46px;font-size:20px}
  .cg-card{width:62px}
  .cg-card img{width:40px;height:40px}
  /* Smaller rather than stacked: three tabs on one line is the point. */
  .cg-dot{padding:6px 6px;font-size:10.5px;letter-spacing:-.02em}
  /* The badge already says which team it is, so the three letters under the
     name are the same fact twice -- and on a phone they are the difference
     between six rows that fit and six rows that do not. Kept on the community
     board, where the same line carries the vote count instead. */
  .cg-own-board .cg-card small{display:none}
  .cg-own-board .cg-card{padding:4px 3px;gap:1px}
  .cg-own-board .cg-card img{width:36px;height:36px}
  /* A 62px card has 56px to give and Schottenheimer sets 65px at the smallest
     size worth reading. Hyphenation was the obvious answer and does nothing:
     hyphens:auto only breaks words the browser's dictionary knows, and it does
     not know surnames. So the letters are squeezed instead of broken. Nothing
     is lost, the card keeps its width, and the row keeps its rhythm. */
  .cg-card-name.is-long{display:inline-block;transform:scaleX(.82);transform-origin:center}
  .cg-gap-detail{flex:1 0 100%;margin:4px 0 0;text-align:left}
}

/* The gap above the board.
   "RANK THE COACHES" is a section heading, and section headings carry a 56px
   break so they separate one part of an article from the next. This one is the
   first thing after the byline, where that break separates nothing and reads
   as a hole above the game. Scoped to this page: elsewhere the break is doing
   its job. */
#hero-game{margin-top:0}