/* ===========================================================================
   THE WORLD SERIES CHALLENGE — layout A, "Bunting": the Series' own printed
   program. The owner's pick of the three in docs/mockups/worldseries/
   (21 Oct 2026); this is a.css from there, with the drag, the focus rings and
   the states the mockup could only draw.

   THE BUNTING IS CLOTH, THE SAME IN BOTH THEMES: red, cream and navy swags,
   the half-fans every park hangs for the Series. The PAGE flips: cream paper
   with navy ink by day, navy paper with cream ink by night, so the program is
   never a bright slab in a dark site. Playfair Display (web/index.html, for
   this sheet alone) sets the masthead, the numbers and the program copy;
   everything read to play is the site's Archivo.

   `.wsa` CARRIES THE TOKENS, and it is a class rather than #wsScreen because
   three things wear it: the challenge's screen, MLB Mode's banner (inside
   #mbScreen) and the row in the air during a drag (appended to <body>).

   NO CLASS HERE MAY BE A PREFIX OF ANOTHER FOLLOWED BY A HYPHEN, mlbmode.css's
   rule: wsa-box/wsa-boxscore and wsa-bx are told apart by the whole name.
   =========================================================================== */

.wsa{
  --wsa-paper:#1A2440; --wsa-paper2:#212C4C; --wsa-ink:#F3EBD9; --wsa-soft:#BDB6A6;
  --wsa-rule:rgba(243,235,217,.17); --wsa-red:#EC5A70; --wsa-blue:#9DB8EE; --wsa-gold:#E6C66E;
  --wsa-shadow:0 12px 30px rgba(0,0,0,.38);
  --wsa-face:'Playfair Display', Georgia, 'Times New Roman', serif;
  --wsa-cloth-red:#B5123A; --wsa-on-red:#FFF8EA;
}
html[data-theme="light"] .wsa{
  --wsa-paper:#F8F1E0; --wsa-paper2:#F0E6CD; --wsa-ink:#1B2A4A; --wsa-soft:#5B6378;
  --wsa-rule:rgba(27,42,74,.17); --wsa-red:#B5123A; --wsa-blue:#1F3A70; --wsa-gold:#9A7A22;
  --wsa-shadow:0 8px 24px rgba(27,42,74,.14);
}

/* ---- the bunting: three bands and a gold rosette at every join ---------- */
.wsa-bunting{display:block;height:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M0 0H120C104 46 16 46 0 0Z' fill='%23B5123A'/%3E%3Cpath d='M0 0H120C106 31 14 31 0 0Z' fill='%23F6F1E4'/%3E%3Cpath d='M0 0H120C108 17 12 17 0 0Z' fill='%231F3A70'/%3E%3Cg fill='%23F6F1E4'%3E%3Ccircle cx='42' cy='4.6' r='1.5'/%3E%3Ccircle cx='60' cy='6.6' r='1.5'/%3E%3Ccircle cx='78' cy='4.6' r='1.5'/%3E%3C/g%3E%3Ccircle cx='0' cy='3' r='4.5' fill='%23E6C66E'/%3E%3Ccircle cx='120' cy='3' r='4.5' fill='%23E6C66E'/%3E%3C/svg%3E") repeat-x 0 0/120px 34px;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.22))}

/* ---- the program ---------------------------------------------------------- */
.wsa-wrap{max-width:780px}
.wsa-prog{position:relative;background:var(--wsa-paper);color:var(--wsa-ink);
  border:1px solid var(--wsa-rule);border-radius:14px;overflow:hidden;
  box-shadow:var(--wsa-shadow);margin-bottom:18px}
.wsa-mast{text-align:center;padding:4px 18px 0}
.wsa-kick{display:flex;justify-content:center;align-items:center;gap:10px;
  font:800 10px/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--wsa-red)}
.wsa-kick > span + span::before{content:"\2605";margin-right:10px;color:var(--wsa-gold);letter-spacing:0}
.wsa-title{display:block;margin:6px 0 0;font:900 clamp(24px,3.6vw,34px)/1.05 var(--wsa-face);
  letter-spacing:.005em;color:var(--wsa-ink)}
.wsa-hud{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 18px 8px}
.wsa-of{font:700 italic 17px/1 var(--wsa-face);color:var(--wsa-red)}
.wsa-of i{font-weight:400;color:var(--wsa-soft)}
.wsa-tot{font:900 26px/1 var(--wsa-face);font-variant-numeric:lining-nums tabular-nums}

/* THE SCORECARD: a box a question, ruled like a printed one. */
.wsa-card{list-style:none;margin:0 18px;padding:0;display:grid;
  grid-template-columns:repeat(11,minmax(0,1fr));
  border:1.5px solid var(--wsa-ink);border-radius:3px;overflow:hidden}
.wsa-box{display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0}
.wsa-box + .wsa-box{border-left:1px solid var(--wsa-rule)}
.wsa-box b{font:800 9.5px/1 var(--font);padding:4px 0;color:var(--wsa-soft);
  border-bottom:1px solid var(--wsa-rule)}
.wsa-box i{font:700 14px/1 var(--wsa-face);font-style:normal;padding:6px 0;min-height:27px;
  font-variant-numeric:lining-nums}
.wsa-box.now{background:color-mix(in srgb,var(--wsa-red) 13%,transparent)}
.wsa-box.now b{color:var(--wsa-red)}

/* ---- a page of the program: the question --------------------------------- */
.wsa-page{padding:16px 18px 20px;margin-top:16px;border-top:3px double var(--wsa-rule)}
.wsa-qhead{display:flex;align-items:center;gap:12px;margin-bottom:8px;min-height:20px}
.wsa-worth{font:800 10px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--wsa-soft)}
.wsa-q{margin:0 0 14px;font:700 clamp(16px,2.1vw,19px)/1.42 var(--font);color:var(--wsa-ink)}
.wsa-q.small{font-size:14px;font-weight:600;color:var(--wsa-soft);margin-bottom:10px}
.wsa-hint{text-align:center;font:italic 400 14px/1.3 var(--wsa-face);color:var(--wsa-soft);margin:0 0 14px}

/* THE RUBBER STAMP for what a question paid, in the program's red. */
.wsa-stamp{margin-left:auto;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;width:68px;height:68px;margin-top:-24px;margin-bottom:-12px;
  border-radius:50%;border:3px double var(--wsa-red);color:var(--wsa-red);
  font:900 19px/1 var(--wsa-face);transform:rotate(-10deg);font-variant-numeric:lining-nums}
.wsa-stamp i{font:800 8.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  font-style:normal;margin-top:3px}

/* ---- ranking: a lineup card of felt pennants ------------------------------ */
.wsa-ladder{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;touch-action:pan-y}
.wsa-end{font:800 10px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;
  color:var(--wsa-soft);padding-left:44px;margin:0 0 8px}
.wsa-ladder + .wsa-end{margin:0 0 10px}
/* Sorting: the grip, the pennant, the club, the seat — the weekend's order
   (special.js wsRowHtml). Answered (.rev): the place, the pennant, the club,
   the points. */
.wsa-row{display:grid;grid-template-columns:24px 54px minmax(0,1fr) 30px;align-items:center;
  gap:12px;background:var(--wsa-paper2);color:var(--wsa-ink);border:1px solid var(--wsa-rule);
  border-radius:10px;padding:8px 10px;cursor:grab;user-select:none;-webkit-user-select:none}
.wsa-ladder.rev .wsa-row{grid-template-columns:30px 54px minmax(0,1fr) auto;padding:8px 14px 8px 8px}
.wsa-row:focus-visible{outline:2px solid var(--wsa-red);outline-offset:2px}
.wsa-slot{font:900 24px/1 var(--wsa-face);text-align:center;color:var(--wsa-red);
  font-variant-numeric:lining-nums}
/* A FELT PENNANT in the club's colours: the first is the felt, the second the
   stripe at the staff. A club with no colours on file is drawn in the ink. */
.wsa-pen{height:36px;display:flex;align-items:center;padding-left:9px;
  background:linear-gradient(90deg,var(--c2,var(--wsa-soft)) 0 5px,var(--c,var(--wsa-ink)) 5px);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.wsa-pen b{font:900 11px/1 var(--display);color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.4)}
.wsa-nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.wsa-nm b{font:800 15px/1.2 var(--font)}
.wsa-nm i{font:italic 400 13.5px/1.2 var(--wsa-face);color:var(--wsa-soft)}
/* Two by three dots, drawn in the middle of a larger box: the box is the
   finger's target, the dots are only the sign of it. */
.wsa-grip{box-sizing:border-box;width:24px;height:32px;padding:6px 5px;opacity:.75;cursor:grab;
  touch-action:none;background:radial-gradient(circle,var(--wsa-soft) 1.4px,transparent 1.9px)
    0 0/7px 7px content-box;background-clip:content-box;background-origin:content-box}
/* THE DRAG: the row's seat goes dashed, a copy of it rides the pointer, and
   the rest slide (deckgauntlet.js's dgg* helpers move them). */
.wsa-ladder.wsa-sorting .wsa-row{transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.wsa-ladder.wsa-snap .wsa-row{transition:none}
.wsa-row.wsa-lift{background:transparent;border-style:dashed}
.wsa-row.wsa-lift > *{visibility:hidden}
.wsa-row.wsa-lift > .wsa-slot{visibility:visible}
.wsa-ghostbox{position:fixed;inset:0;pointer-events:none;z-index:9999}
.wsa-row.wsa-ghost{position:fixed;margin:0;cursor:grabbing;will-change:transform;
  box-shadow:0 14px 28px rgba(0,0,0,.35);border-color:var(--wsa-red)}
.wsa-ladder.rev .wsa-row{cursor:default}
.wsa-val{display:block;margin-top:1px}
.wsa-val b{font:900 16px/1.1 var(--wsa-face);font-variant-numeric:lining-nums;color:var(--wsa-ink)}
.wsa-val i{font:600 11.5px/1 var(--font);font-style:normal;color:var(--wsa-soft);margin-left:4px}
.wsa-pts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:76px;
  font:900 16px/1 var(--font);font-variant-numeric:tabular-nums}
.wsa-pts i{font:700 9.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  font-style:normal;color:var(--wsa-soft);white-space:nowrap}
.wsa-pts.hit i{color:var(--wsa-blue)}

/* ---- a year or a number: a ticket, the stub torn along the perforation --- */
.wsa-ticket{display:flex;align-items:stretch;max-width:430px;margin:4px auto 10px;
  background:var(--wsa-paper2);border:1.5px solid var(--wsa-ink);border-radius:10px;overflow:hidden}
.wsa-stub{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  min-width:88px;padding:10px 12px;background:var(--wsa-cloth-red);color:var(--wsa-on-red);
  border-right:2px dashed var(--wsa-paper2)}
.wsa-stub i{font:800 8.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;font-style:normal}
.wsa-stub b{font:900 italic 21px/1 var(--wsa-face)}
.wsa-field{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 16px}
.wsa-field input{width:100%;max-width:230px;background:none;border:0;
  border-bottom:2px solid var(--wsa-ink);border-radius:0;padding:0 0 2px;outline:none;
  font:900 48px/1.1 var(--wsa-face);letter-spacing:.16em;text-align:center;color:var(--wsa-ink);
  font-variant-numeric:lining-nums}
.wsa-field input:focus{border-bottom-color:var(--wsa-red)}

/* ---- multiple choice: four ticket stubs ----------------------------------- */
.wsa-second{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:0 0 12px;
  padding:9px 12px;border-left:4px solid var(--wsa-red);border-radius:0 8px 8px 0;
  background:color-mix(in srgb,var(--wsa-red) 12%,transparent);font-size:14px;line-height:1.4}
.wsa-second b{font:900 italic 17px/1 var(--wsa-face);color:var(--wsa-red)}
.wsa-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.wsa-opt{display:flex;align-items:stretch;padding:0;text-align:left;min-height:60px;overflow:hidden;
  background:var(--wsa-paper2);color:var(--wsa-ink);border:1.5px solid var(--wsa-rule);
  border-radius:10px;cursor:pointer;font:600 14px/1.35 var(--font)}
.wsa-opt:focus-visible{outline:2px solid var(--wsa-red);outline-offset:2px}
.wsa-let{flex:none;width:42px;display:flex;align-items:center;justify-content:center;
  font:900 21px/1 var(--wsa-face);color:var(--wsa-red);border-right:2px dashed var(--wsa-rule)}
.wsa-otx{display:flex;align-items:center;padding:9px 12px}
.wsa-opt.sel{border-color:var(--wsa-red);box-shadow:inset 0 0 0 1.5px var(--wsa-red)}
.wsa-opt.sel .wsa-let{background:var(--wsa-red);color:var(--wsa-on-red);border-right-color:transparent}
.wsa-opt.out{cursor:default;opacity:.55}
.wsa-opt.out .wsa-otx{text-decoration:line-through;text-decoration-color:var(--wsa-red);
  text-decoration-thickness:2px}
.wsa-opt.out .wsa-let{color:var(--wsa-soft)}
.wsa-opt.out{background:var(--wsa-paper2);color:var(--wsa-ink);border-color:var(--wsa-rule)}
/* THE SITE'S BUTTON HOVER IS A PANEL COLOUR (base.css `button:hover`), which
   would turn a stub grey under the pointer. These keep the paper and say
   "hover" with the border instead — GATED AS THAT RULE IS, to a pointer that
   can hover (tests/test_touchhover.js), so a phone keeps no sticky hover. */
@media (hover:hover) and (pointer:fine){
  .wsa-opt:hover{background:var(--wsa-paper2);
    border-color:color-mix(in srgb,var(--wsa-red) 45%,var(--wsa-rule))}
  .wsa-opt.sel:hover{border-color:var(--wsa-red)}
  .wsa-opt.out:hover{background:var(--wsa-paper2);border-color:var(--wsa-rule);transform:none}
  .wsa .gg-go:hover{background:var(--wsa-cloth-red);color:var(--wsa-on-red);filter:brightness(1.08)}
  .wsa .gg-go:disabled:hover{filter:none;transform:none}
  .wsa-banner:hover{background:var(--wsa-paper);
    border-color:color-mix(in srgb,var(--wsa-red) 45%,var(--wsa-rule))}
  .wsa-banner:hover .wsa-bgo{transform:translateY(-1px)}
}

/* ---- the answer, printed with its photograph ------------------------------ */
.wsa-ans{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:10px 12px;
  background:var(--wsa-paper2);border:1.5px solid var(--wsa-ink);border-radius:10px}
.wsa-ans .wsa-let{width:34px;height:34px;border:0;border-radius:50%;
  background:var(--wsa-red);color:var(--wsa-on-red);font-size:18px}
.wsa-ans b{font:800 16px/1.3 var(--font)}
.wsa-anslab{font:800 10px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--wsa-soft)}
.wsa-anslab + b{font:900 26px/1 var(--wsa-face);font-variant-numeric:lining-nums}
.wsa-yours{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.wsa-yours > span{font:800 10.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;border:1px solid var(--wsa-rule);color:var(--wsa-soft)}
.wsa-yours > .no{text-decoration:line-through}
.wsa-yours > .ok{color:var(--wsa-ink);border-color:var(--wsa-ink)}
.wsa-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;
  align-items:start;margin:4px 0 16px}
.wsa-photo{margin:0;padding:8px 8px 7px;background:#F6F1E4;transform:rotate(-1.4deg);
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 20px rgba(0,0,0,.28)}
.wsa-photo img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;background:#ddd}
.wsa-photo.wsa-tall img{object-fit:contain;background:#E9E2CF}
.wsa-story.wsa-nophoto{grid-template-columns:minmax(0,1fr)}
.wsa-photo figcaption{font:italic 400 12px/1.35 var(--wsa-face);color:#30333B;padding-top:6px}
.wsa-photo figcaption span{display:block;margin-top:2px;font:600 9.5px/1.3 var(--font);
  font-style:normal;letter-spacing:.05em;color:#6B6B6B}
.wsa-photo figcaption a{color:inherit;text-decoration:none}
.wsa-photo figcaption a:hover{text-decoration:underline}
.wsa-fact{margin:0;font:400 16.5px/1.6 var(--wsa-face);color:var(--wsa-ink)}
.wsa-fact::first-letter{float:left;font:900 46px/.82 var(--wsa-face);margin:5px 7px 0 0;color:var(--wsa-red)}

/* ---- the buttons, in the program's red ------------------------------------ */
.wsa .gg-go{background:var(--wsa-cloth-red);color:var(--wsa-on-red)}
.wsa .gg-go:disabled{opacity:.45}
.wsa-go{width:100%}
/* The arrow on "Next question" is drawn, so the button's name is its words. */
.wsa-go.wsa-on::after{content:"\00a0\2192"}
.wsa-next{margin-top:4px}

/* ---- the back page: the final score --------------------------------------- */
.wsa-final{padding-top:4px}
.wsa-back{background:var(--wsa-paper);color:var(--wsa-ink);border:1px solid var(--wsa-rule);
  border-radius:14px;overflow:hidden;box-shadow:var(--wsa-shadow);padding:0 18px 18px;margin-bottom:16px}
.wsa-back .wsa-bunting{margin:0 -18px 14px}
.wsa-final .wsa-back .cap{color:var(--wsa-soft)}
.wsa-final .big{font-family:var(--wsa-face);font-weight:900;color:var(--wsa-red);
  font-variant-numeric:lining-nums tabular-nums;margin:6px 0 4px}
.wsa-back .gg-signin-line{color:var(--wsa-soft)}
/* THE BOX SCORE: a cell per question, its number over its points, so a phone
   can wrap it into two rows of six rather than squeeze twelve into one. */
.wsa-boxscore{display:grid;grid-template-columns:repeat(11,minmax(0,1fr)) 66px;margin:16px 0 0;
  border:1.5px solid var(--wsa-ink);border-radius:3px;overflow:hidden}
.wsa-bx{display:flex;flex-direction:column;min-width:0;text-align:center}
.wsa-bx + .wsa-bx{border-left:1px solid var(--wsa-rule)}
.wsa-bx i{font:800 9.5px/1 var(--font);font-style:normal;color:var(--wsa-soft);padding:5px 0;
  border-bottom:1px solid var(--wsa-rule)}
.wsa-bx b{font:700 14px/1 var(--wsa-face);padding:7px 0;font-variant-numeric:lining-nums}
.wsa-bx.tot i{color:var(--wsa-red)}
.wsa-bx.tot b{font-weight:900;color:var(--wsa-red)}
.wsa-more{width:100%;font-size:15px;padding:14px 22px}
.wsa-two{display:flex;gap:10px;margin-top:10px}
.wsa-two .gg-stand{flex:1}
.wsa-final #wsBoardSlot{margin-top:18px}

/* ---- MLB Mode's banner: the program's cover, over the thirty clubs -------- */
.wsa-banner{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) auto;
  align-items:center;gap:18px;width:100%;margin:0 0 16px;padding:44px 20px 18px;
  background:var(--wsa-paper);color:var(--wsa-ink);border:1px solid var(--wsa-rule);border-radius:14px;
  box-shadow:var(--wsa-shadow);text-align:left;cursor:pointer;overflow:hidden;font-family:var(--font)}
.wsa-banner:focus-visible{outline:3px solid var(--wsa-red);outline-offset:2px}
.wsa-banner .wsa-bunting{position:absolute;left:0;right:0;top:0}
.wsa-bimg img{display:block;width:132px;aspect-ratio:4 / 3;object-fit:cover;
  border:5px solid #F6F1E4;transform:rotate(-2.5deg);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.wsa-btx{display:flex;flex-direction:column;gap:6px;min-width:0}
.wsa-banner .wsa-kick{justify-content:flex-start}
.wsa-banner .wsa-title{margin:0;font-size:clamp(22px,3vw,30px)}
.wsa-bsub{font-size:14px;line-height:1.4;color:var(--wsa-soft)}
.wsa-bgo{background:var(--wsa-cloth-red);color:var(--wsa-on-red);padding:13px 22px;border-radius:10px;
  font:900 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}

/* ---- the letter board: a bunting fan on the challenge's entry -------------
   The entry is drawn by taproom.css in the weekend's place, as a side entry
   in smaller letters than The Gauntlet's (layout C, 22 Oct 2026), and
   carries one thing of its own: the small
   red, white and blue fan of layout A's bunting. It came off on 21 Oct 2026
   for the weekend's format and went back on the next day (the owner: "use the
   small red white and blue flag you had earlier"), out of the line's way:

     A COMPUTER   pinned on the board's top-right corner, over the frame. The
                  entry is one line now, and the corner it hung from before
                  is where PLAY NOW sits.
     A PHONE      hanging from the board's bottom edge under the challenge's
                  PLAY, its row being the board's last — the top-right corner
                  is The Gauntlet's, with its sticker on it. */
#home .tr-tgb-ws{position:relative}
#home .tr-tgb-ws .wsa-fan{position:absolute;z-index:1;pointer-events:none;
  top:-17px;right:-20px;width:56px;height:28px;border-radius:0 0 56px 56px;
  background:radial-gradient(circle at 50% 0,#1F3A70 0 36%,#F6F1E4 36% 50%,#B5123A 50% 63%,
    #F6F1E4 63% 76%,#B5123A 76%);
  box-shadow:0 3px 8px rgba(0,0,0,.45)}
#home .tr-tgb-ws .wsa-fan::before{content:"";position:absolute;left:50%;top:-4px;width:10px;height:10px;
  margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF3C0,#B08A2A 70%)}

/* ---- a phone ---------------------------------------------------------------- */
@media (max-width:700px){
  .wsa-wrap{padding:0 10px}
  .wsa-bunting{height:24px;background-size:84px 24px}
  /* THE MASTHEAD STEPS ASIDE MID-GAME ON A PHONE: the pill over the card
     already names the challenge, and the bunting and the scorecard carry the
     look. Every line saved is a line of question on screen. */
  .wsa-prog .wsa-mast{display:none}
  .wsa-title{font-size:22px;margin-top:4px}
  .wsa-kick{font-size:9px}
  .wsa-hud{padding:8px 12px 6px}
  .wsa-tot{font-size:22px}
  .wsa-card{margin:0 12px}
  .wsa-box b{font-size:8.5px;padding:3px 0}
  .wsa-box i{font-size:11.5px;padding:5px 0;min-height:23px}
  .wsa-page{padding:12px 12px 14px;margin-top:12px}
  .wsa-q{font-size:15.5px;margin-bottom:10px}
  .wsa-row{grid-template-columns:24px 42px minmax(0,1fr) 24px;gap:9px;padding:7px 6px}
  .wsa-ladder.rev .wsa-row{grid-template-columns:24px 42px minmax(0,1fr) auto;padding:7px 8px 7px 6px}
  .wsa-pts{min-width:0;font-size:15px}
  .wsa-pts i{font-size:8.5px;letter-spacing:.06em}
  .wsa-slot{font-size:20px}
  .wsa-pen{height:30px;padding-left:7px}
  .wsa-pen b{font-size:9.5px}
  .wsa-nm b{font-size:14px}
  .wsa-nm i{font-size:12.5px}
  .wsa-val b{font-size:14.5px}
  .wsa-end{padding-left:34px}
  .wsa-opts{grid-template-columns:1fr;gap:7px}
  .wsa-opt{min-height:48px;font-size:13.5px}
  .wsa-let{width:36px;font-size:18px}
  .wsa-otx{padding:7px 10px}
  .wsa-field input{font-size:40px}
  .wsa-stub{min-width:72px}
  .wsa-story{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .wsa-photo{transform:none;padding:6px 6px 5px}
  .wsa-photo img{aspect-ratio:16 / 9;max-height:150px}
  .wsa-fact{font-size:15px;line-height:1.5}
  .wsa-fact::first-letter{font-size:38px}
  .wsa-stamp{width:58px;height:58px;font-size:16px}
  /* THE WAY ON STAYS IN REACH: an answer's story can run past a short
     phone's fold, so its button rides the bottom edge rather than waiting
     under the copy. */
  .wsa-next{position:sticky;bottom:0;margin:0 -12px -14px;padding:10px 12px 12px;
    background:linear-gradient(transparent,var(--wsa-paper) 30%)}
  .wsa-boxscore{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wsa-bx:nth-child(7){border-left:0}
  .wsa-bx:nth-child(n+7){border-top:1px solid var(--wsa-ink)}
  .wsa-bx b{font-size:15px}
  .wsa-two{flex-direction:column}
  .wsa-banner{grid-template-columns:80px minmax(0,1fr);padding:34px 14px 14px;gap:12px}
  .wsa-bimg img{width:80px}
  .wsa-bgo{grid-column:1 / -1;text-align:center}
  .wsa-banner .wsa-title{font-size:21px}
  /* THE FAN HANGS FROM THE BOARD'S BOTTOM EDGE on a phone (see the letter
     board's note above). */
  #home .tr-tgb-ws .wsa-fan{top:auto;bottom:-29px;right:26px;width:44px;height:22px}
}
@media (prefers-reduced-motion: reduce){
  .wsa-ladder.wsa-sorting .wsa-row{transition:none}
}