/* sports.css: the last-one-out sports day (retro-sports.js and sports-*.js). Every rule lives under .tt-sports-.
   The stage is a size container: the layout follows the size of the game itself, in the page, pinned over it or on the whole screen alike.
   Things pinned to the picture (name tags, speech, the finger) are moved by the script with a transform; `translate` hangs each by its foot. */
.tt-sports-lead { margin: 0 0 .8rem; }
.tt-sports-help { margin: .7rem 0 0; font-size: .86rem; color: #5b5568; }
.tt-sports-stage {
  --ink: #2f2437; --paper: #fffaf0; --sun: #ffd23f; --coral: #ff6b4a; --mint: #2fc36b; --sky: #58b6ff; --blue: #3d7bff;
  position: relative; container: tt-sports / size; width: min(100%, 64rem); aspect-ratio: 9 / 17; max-height: 88vh; overflow: hidden;
  border-radius: 18px; background: #9fd8ff; color: var(--ink); line-height: 1.3; font-weight: 700;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
@media (min-width: 720px) { .tt-sports-stage { aspect-ratio: 16 / 10; } }
@media (orientation: landscape) and (max-height: 520px) { .tt-sports-stage { aspect-ratio: auto; height: 88vh; } }
.tt-sports-stage:not([data-phase="title"]) { touch-action: none; }
.tt-sports-stage.tt-sports-fill { position: fixed; inset: 0; z-index: 9999; width: auto; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-sports-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-sports-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
html.tt-sports-lock, html.tt-sports-lock body { overflow: hidden; overscroll-behavior: none; }
.tt-sports-stage .tt-sports-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; outline: none; touch-action: none; }
.tt-sports-stage p, .tt-sports-stage h3 { margin: 0; padding: 0; }
.tt-sports-stage i, .tt-sports-stage small { font-style: normal; font-family: inherit; }
.tt-sports-stage button { margin: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.tt-sports-stage button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tt-sports-stage .tt-sports-sorry { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: #2c2440; color: #fff; }

/* The edge of the screen says what the headmaster is doing: green to move, yellow when he is about to turn, red when he looks. */
.tt-sports-edge { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: box-shadow .12s linear; }
.tt-sports-stage[data-signal="go"] .tt-sports-edge { box-shadow: inset 0 0 0 5px rgba(47, 195, 107, .9), inset 0 0 46px 6px rgba(47, 195, 107, .3); }
.tt-sports-stage[data-signal="tell"] .tt-sports-edge { box-shadow: inset 0 0 0 7px rgba(255, 196, 0, .95), inset 0 0 60px 12px rgba(255, 196, 0, .45); animation: tt-sports-blink .16s steps(2, jump-none) infinite; }
.tt-sports-stage[data-signal="look"] .tt-sports-edge { box-shadow: inset 0 0 0 9px rgba(255, 45, 45, .95), inset 0 0 90px 22px rgba(255, 45, 45, .5); }

/* Words pinned to things in the picture */
.tt-sports-tags { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tt-sports-tags > * { position: absolute; left: 0; top: 0; will-change: transform; }
.tt-sports-tag { translate: -50% -100%; padding: 0 6px; border-radius: 7px; background: rgba(255, 255, 255, .8); font-size: .66rem; font-weight: 800; line-height: 1.4; white-space: nowrap; color: #3d3247; }
.tt-sports-tag.tt-sports-mine { z-index: 2; padding: 1px 8px; border: 2px solid var(--ink); background: var(--sun); font-size: .8rem; font-weight: 900; color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.tt-sports-bubble { z-index: 3; translate: -50% -100%; max-width: 172px; padding: 4px 10px 5px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(47, 36, 55, .4); font-size: .82rem; font-weight: 800; line-height: 1.25; text-align: center; word-break: keep-all; animation: tt-sports-pop-in .14s ease-out; }
.tt-sports-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tt-sports-pop { z-index: 4; translate: -50% -50%; color: #fff; font-size: 1.25rem; font-weight: 900; line-height: 1; white-space: nowrap; letter-spacing: -.01em;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 4px 0 var(--ink); }
.tt-sports-pop[data-tone="out"] { color: #ff9a8c; font-size: 1.5rem; }
.tt-sports-pop[data-tone="pass"] { color: #9dffbd; font-size: 1.4rem; }
.tt-sports-pop[data-tone="cheer"] { color: var(--sun); font-size: 1.15rem; }
.tt-sports-pointer { z-index: 5; translate: -50% -100%; margin-top: -10px; padding: 3px 11px 4px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--sun); box-shadow: 0 3px 0 var(--ink); font-size: .86rem; font-weight: 900; white-space: nowrap; }
.tt-sports-pointer::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 11px; height: 11px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tt-sports-pointer[data-off="yes"] { animation: tt-sports-blink .3s steps(2, jump-none) infinite; }
.tt-sports-pointer[data-off="yes"]::after { display: none; }

/* The strip at the top: who is left, how many are through, the clock. The three small buttons sit at the right. */
.tt-sports-hud { position: absolute; left: 0; top: 0; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 150px); pointer-events: none;
  padding: max(8px, env(safe-area-inset-top)) 0 0 max(8px, env(safe-area-inset-left)); }
.tt-sports-stage[data-phase="title"] .tt-sports-hud, .tt-sports-stage[data-phase="none"] .tt-sports-hud { display: none; }
.tt-sports-chip { display: flex; align-items: center; gap: 4px; box-sizing: border-box; height: 38px; padding: 0 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.tt-sports-chip b { font-size: 1.12rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tt-sports-left { background: var(--sun); }
.tt-sports-left[data-n="0"] { animation: tt-sports-bump-a .5s ease-out; }
.tt-sports-left[data-n="1"] { animation: tt-sports-bump-b .5s ease-out; }
.tt-sports-goal[data-n="0"] b { animation: tt-sports-bump-a .3s ease-out; }
.tt-sports-goal[data-n="1"] b { animation: tt-sports-bump-b .3s ease-out; }
.tt-sports-goal i { color: #6b5a78; }
.tt-sports-time.tt-sports-hurry { background: #ffe1dc; border-color: #c62626; color: #c62626; animation: tt-sports-beat .5s ease-in-out infinite; }
.tt-sports-tools { position: absolute; right: 0; top: 0; display: flex; gap: 4px; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 0; }
.tt-sports-stage .tt-sports-tools button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2.5px solid var(--ink); border-radius: 13px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-size: .8rem; line-height: 1; }
.tt-sports-stage .tt-sports-tools button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tt-sports-stage .tt-sports-tools [data-sound][aria-pressed="false"] { background: #d9d3de; color: #8a8192; text-decoration: line-through; }
.tt-sports-stage .tt-sports-tools [data-sound] { font-size: 1.2rem; }
.tt-sports-stage[data-phase="title"] .tt-sports-tools [data-pause], .tt-sports-stage[data-phase="none"] .tt-sports-tools { display: none; }

/* The chant of the headmaster, syllable by syllable, and whether he is looking */
.tt-sports-chant { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 52px); translate: -50% 0; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); box-sizing: border-box;
  padding: 5px 12px 5px 5px; border: 2.5px solid var(--ink); border-radius: 999px; background: rgba(255, 250, 240, .94); box-shadow: 0 3px 0 var(--ink); pointer-events: none; white-space: nowrap; }
.tt-sports-eye { flex: none; min-width: 4.6em; padding: 4px 9px; border-radius: 999px; background: #8c8496; color: #fff; font-size: .86rem; font-weight: 900; text-align: center; }
.tt-sports-chant[data-eye="go"] .tt-sports-eye { background: var(--mint); }
.tt-sports-chant[data-eye="tell"] .tt-sports-eye { background: #ffb300; color: var(--ink); animation: tt-sports-blink .16s steps(2, jump-none) infinite; }
.tt-sports-chant[data-eye="look"] .tt-sports-eye { background: #e62e2e; }
.tt-sports-chant[data-eye="look"] { border-color: #c62626; background: #ffe7e3; animation: tt-sports-jolt .1s linear 3; }
.tt-sports-chant > span { display: flex; gap: 1px; font-size: 1.02rem; font-weight: 900; letter-spacing: -.02em; }
.tt-sports-chant > span i { color: rgba(47, 36, 55, .28); transition: color .05s linear; }
.tt-sports-chant > span i.tt-sports-lit { color: var(--ink); }

/* The big words across the middle */
.tt-sports-banner { position: absolute; left: 50%; top: 24%; translate: -50% -50%; width: max-content; pointer-events: none; color: #fff; font-size: clamp(1.7rem, 9cqw, 3.4rem); font-weight: 900; line-height: 1.08; text-align: center; white-space: nowrap; letter-spacing: -.02em;
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 7px 0 var(--ink); }
.tt-sports-banner[data-n="0"] { animation: tt-sports-stamp-a .2s ease-out; }
.tt-sports-banner[data-n="1"] { animation: tt-sports-stamp-b .2s ease-out; }
.tt-sports-banner[data-tone="go"] { color: #8dffb5; }
.tt-sports-banner[data-tone="pass"] { color: var(--sun); }
.tt-sports-banner[data-tone="warn"] { color: #ff8f80; }
.tt-sports-count { position: absolute; left: 50%; top: 40%; translate: -50% -50%; display: grid; justify-items: center; pointer-events: none; color: #fff; text-align: center;
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 7px 0 var(--ink); }
.tt-sports-count b { font-size: clamp(4.6rem, 26cqmin, 8rem); font-weight: 900; line-height: .95; color: var(--sun); font-variant-numeric: tabular-nums; }
.tt-sports-count span { font-size: 1.5rem; font-weight: 900; }
.tt-sports-count[data-n="0"] b { animation: tt-sports-drop-a .22s ease-out; }
.tt-sports-count[data-n="1"] b { animation: tt-sports-drop-b .22s ease-out; }

/* The village head with the microphone, along the bottom */
.tt-sports-mc { position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: max-content; max-width: min(calc(100% - 20px), 40rem); min-height: 40px;
  padding: 4px 14px 4px 5px; border: 2.5px solid var(--ink); border-radius: 999px; background: rgba(255, 250, 240, .95); box-shadow: 0 3px 0 var(--ink); pointer-events: none; font-size: .88rem; line-height: 1.22; word-break: keep-all; }
.tt-sports-mc b { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--sun); font-size: .74rem; font-weight: 900; }
.tt-sports-mc[data-n="0"] { animation: tt-sports-rise-a .2s ease-out; }
.tt-sports-mc[data-n="1"] { animation: tt-sports-rise-b .2s ease-out; }
.tt-sports-stage[data-phase="title"] .tt-sports-mc, .tt-sports-stage[data-phase="guide"] .tt-sports-mc { display: none; }
.tt-sports-stage[data-input="touch"][data-phase="play"][data-me="in"] .tt-sports-mc { left: 10px; translate: none; max-width: calc(100% - 118px); border-radius: 18px; font-size: .8rem; }
.tt-sports-stage[data-me="watch"] .tt-sports-mc, .tt-sports-stage[data-phase="enter"] .tt-sports-mc { bottom: calc(72px + env(safe-area-inset-bottom)); }

/* Thumbs: a stick that appears under the left thumb, a round button or two at the right */
.tt-sports-pad { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; }
.tt-sports-stage[data-input="touch"][data-phase="play"][data-me="in"] .tt-sports-pad { display: block; }
.tt-sports-stick { position: absolute; left: 78px; top: calc(100% - 150px); width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid rgba(255, 255, 255, .75); border-radius: 50%; background: rgba(47, 36, 55, .3); }
.tt-sports-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 3px solid var(--ink); border-radius: 50%; background: rgba(255, 250, 240, .94); box-shadow: 0 3px 0 rgba(47, 36, 55, .5); }
.tt-sports-stage:not([data-stick]) .tt-sports-stick { left: 78px !important; top: calc(100% - 150px - env(safe-area-inset-bottom)) !important; opacity: .42; }
.tt-sports-stage:not([data-stick]) .tt-sports-stick i { transform: none !important; }
.tt-sports-stage .tt-sports-run, .tt-sports-stage .tt-sports-act { position: absolute; display: grid; place-items: center; padding: 6px; border: 3px solid var(--ink); border-radius: 50%; pointer-events: auto; touch-action: none; word-break: keep-all; line-height: 1.1; text-align: center; }
.tt-sports-stage .tt-sports-run { right: max(14px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 84px; height: 84px; background: rgba(255, 250, 240, .9); box-shadow: 0 5px 0 var(--ink); font-size: .95rem; font-weight: 900; }
.tt-sports-stage .tt-sports-run[aria-pressed="true"] { background: #8be3a8; transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tt-sports-stage .tt-sports-act { right: max(14px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 92px; height: 92px; background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--ink); font-size: 1.05rem; font-weight: 900; text-shadow: 0 2px 0 rgba(47, 36, 55, .45); }
.tt-sports-stage .tt-sports-act:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tt-sports-stage[data-event="chairs"] .tt-sports-run { display: none; }
/* The final needs both: run sits beside push, a thumb's roll away */
.tt-sports-stage[data-event="push"] .tt-sports-run { right: calc(max(14px, env(safe-area-inset-right)) + 102px); width: 80px; height: 80px; }
/* Two buttons under the right thumb leave the village head no room at the bottom: on the raft he talks from under the top strip. */
.tt-sports-stage[data-event="push"][data-input="touch"][data-phase="play"][data-me="in"] .tt-sports-mc { top: calc(max(8px, env(safe-area-inset-top)) + 48px); bottom: auto; left: 50%; translate: -50% 0; max-width: calc(100% - 20px); }

/* Out of the game and looking on */
.tt-sports-watch { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; gap: 8px; width: max-content; max-width: calc(100% - 16px); }
.tt-sports-stage .tt-sports-watch button, .tt-sports-stage .tt-sports-skip { min-width: 76px; min-height: 48px; padding: 0 14px; border: 2.5px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); font-size: .95rem; white-space: nowrap; }
.tt-sports-stage .tt-sports-watch button:active, .tt-sports-stage .tt-sports-skip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tt-sports-stage .tt-sports-watch [data-cheer] { background: var(--sun); }
.tt-sports-stage .tt-sports-watch [data-fast][aria-pressed="true"] { background: #8be3a8; }
.tt-sports-stage .tt-sports-skip { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }

/* The cards */
.tt-sports-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; display: grid; gap: 9px; box-sizing: border-box; width: min(calc(100% - 24px), 21.5rem); max-height: calc(100% - 16px); padding: 16px 18px 15px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 7px 0 var(--ink), 0 0 0 200vmax rgba(36, 26, 52, .34); text-align: center; word-break: keep-all; animation: tt-sports-pop-in .2s ease-out; }
.tt-sports-kicker { justify-self: center; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: var(--sun); font-size: .8rem; font-weight: 900; }
.tt-sports-card h3 { font-size: 1.6rem; font-weight: 900; line-height: 1.12; letter-spacing: -.02em; }
.tt-sports-stage .tt-sports-card button { min-height: 48px; padding: 0 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); font-size: .98rem; }
.tt-sports-stage .tt-sports-card button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tt-sports-stage .tt-sports-card .tt-sports-go { min-height: 56px; background: var(--coral); color: #fff; font-size: 1.18rem; font-weight: 900; text-shadow: 0 2px 0 rgba(47, 36, 55, .45); }
.tt-sports-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tt-sports-badge { justify-self: center; padding: 6px 14px; border: 2.5px dashed var(--ink); border-radius: 12px; background: #fff3c4; font-size: 1.02rem; font-weight: 900; rotate: -2deg; }
.tt-sports-rule { font-size: 1.05rem; font-weight: 900; line-height: 1.3; text-wrap: balance; }
.tt-sports-outline { justify-self: center; padding: 4px 12px; border-radius: 10px; background: #ffe1dc; color: #b3261e; font-size: .9rem; font-weight: 900; text-wrap: balance; }
.tt-sports-how { font-size: .8rem; font-weight: 700; color: #6b5a78; text-wrap: balance; }
.tt-sports-keys { font-size: .78rem; font-weight: 700; color: #6b5a78; }
.tt-sports-stage[data-input="touch"] .tt-sports-forkeys, .tt-sports-stage:not([data-input="touch"]) .tt-sports-fortouch { display: none; }

/* The title: a banner hung over the school yard */
.tt-sports-title { box-shadow: 0 7px 0 var(--ink), 0 0 0 200vmax rgba(36, 26, 52, .16); background: linear-gradient(#fffaf0 0 62%, #ffefc2); }
.tt-sports-title h3 { margin: 2px 0 4px; font-size: clamp(2.5rem, 13cqmin, 3.3rem); line-height: 1.02; color: var(--coral); rotate: -3deg;
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 7px 0 var(--ink); }
.tt-sports-title h3::first-line { color: var(--sun); }
.tt-sports-joke { position: relative; justify-self: center; max-width: 100%; margin-top: 4px; padding: 7px 13px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; font-size: .95rem; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.tt-sports-joke::before { content: ''; position: absolute; left: 50%; top: -8px; width: 10px; height: 10px; border: solid var(--ink); border-width: 2.5px 0 0 2.5px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tt-sports-me { font-size: .88rem; color: #6b5a78; }
.tt-sports-me b { display: inline-block; margin-left: 4px; padding: 1px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--sun); color: var(--ink); font-size: 1rem; font-weight: 900; }

/* The rule card: a picture, one line of how, one line of who goes home */
.tt-sports-guide { width: min(calc(100% - 20px), 24rem); gap: 8px; padding: 13px 15px 12px; cursor: pointer; }
.tt-sports-guide h3 { font-size: 1.75rem; color: var(--coral); text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 4px 0 var(--ink); }
.tt-sports-pic { overflow: hidden; border: 2.5px solid var(--ink); border-radius: 14px; background: #cfeeff; }
.tt-sports-pic svg { display: block; width: 100%; height: auto; }
.tt-sports-bar { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(47, 36, 55, .14); }
.tt-sports-bar i { display: block; height: 100%; border-radius: 999px; background: var(--coral); transform-origin: 0 50%; }

/* Going home, and getting through */
.tt-sports-out h3 { font-size: 1.5rem; }
.tt-sports-out h3 b { font-size: 3.4rem; color: var(--coral); font-variant-numeric: tabular-nums; }
.tt-sports-out h3 small { font-size: .95rem; color: #6b5a78; }
.tt-sports-final { box-shadow: 0 7px 0 var(--ink), 0 0 0 200vmax rgba(36, 26, 52, .22); }
.tt-sports-final .tt-sports-kicker { background: var(--coral); color: #fff; font-size: 1rem; }
.tt-sports-final h3 { font-size: 1.9rem; }
.tt-sports-final h3 b { font-size: 3.2rem; color: var(--coral); font-variant-numeric: tabular-nums; }
.tt-sports-final h3 small { font-size: .95rem; color: #6b5a78; }
.tt-sports-list { display: grid; gap: 2px; width: 100%; font-size: .86rem; font-weight: 700; color: #6b5a78; line-height: 1.4; }
.tt-sports-list span { display: flex; justify-content: space-between; gap: 12px; padding: 1px 2px; border-bottom: 1.5px dashed rgba(47, 36, 55, .16); white-space: nowrap; }
.tt-sports-list span b { color: var(--ink); font-weight: 900; }
.tt-sports-points { font-size: .95rem; font-weight: 800; white-space: nowrap; }
.tt-sports-points b { font-size: 1.55rem; color: var(--coral); font-variant-numeric: tabular-nums; }
.tt-sports-next { font-size: .8rem; color: #8a7a96; }
.tt-sports-pause { box-shadow: 0 7px 0 var(--ink), 0 0 0 200vmax rgba(36, 26, 52, .5); }

/* A wide screen: more room for everything */
@container tt-sports (min-width: 700px) {
  .tt-sports-chip { height: 44px; padding: 0 13px; font-size: .9rem; }
  .tt-sports-chip b { font-size: 1.3rem; }
  .tt-sports-tag { font-size: .74rem; }
  .tt-sports-tag.tt-sports-mine { font-size: .9rem; }
  .tt-sports-bubble { max-width: 220px; font-size: .92rem; }
  .tt-sports-pop { font-size: 1.5rem; }
  .tt-sports-pop[data-tone="out"] { font-size: 1.9rem; }
  .tt-sports-chant { top: max(8px, env(safe-area-inset-top)); padding: 6px 16px 6px 6px; }
  .tt-sports-chant > span { font-size: 1.3rem; gap: 2px; }
  .tt-sports-eye { font-size: 1rem; }
  .tt-sports-mc { font-size: 1rem; min-height: 46px; }
  .tt-sports-mc b { font-size: .84rem; }
}
/* A tall screen with room to spare */
@container tt-sports (min-width: 700px) and (min-height: 500px) {
  .tt-sports-card { width: min(calc(100% - 24px), 25rem); padding: 20px 24px 18px; gap: 11px; }
  .tt-sports-guide { width: min(calc(100% - 24px), 31rem); }
  .tt-sports-guide h3 { font-size: 2.1rem; }
  .tt-sports-rule { font-size: 1.2rem; }
  .tt-sports-outline { font-size: 1rem; }
  .tt-sports-how { font-size: .9rem; }
}
/* A big screen: the words grow with it */
@container tt-sports (min-width: 1100px) and (min-height: 640px) {
  .tt-sports-chip { font-size: 1.04rem; }
  .tt-sports-chip b { font-size: 1.5rem; }
  .tt-sports-tag { font-size: .84rem; }
  .tt-sports-tag.tt-sports-mine { font-size: 1.04rem; }
  .tt-sports-bubble { max-width: 250px; font-size: 1.05rem; }
  .tt-sports-pop { font-size: 1.8rem; }
  .tt-sports-pop[data-tone="out"] { font-size: 2.3rem; }
  .tt-sports-chant > span { font-size: 1.55rem; }
  .tt-sports-mc { font-size: 1.14rem; }
  .tt-sports-card { width: min(calc(100% - 24px), 28rem); }
  .tt-sports-guide { width: min(calc(100% - 24px), 36rem); }
  .tt-sports-how { font-size: 1rem; }
}
/* A phone on its side: low and wide. The cards lie down too. */
@container tt-sports (max-height: 440px) {
  .tt-sports-chip { height: 38px; font-size: .8rem; }
  .tt-sports-chip b { font-size: 1.1rem; }
  .tt-sports-chant { top: max(6px, env(safe-area-inset-top)); padding: 3px 12px 3px 4px; }
  .tt-sports-chant > span { font-size: 1.05rem; }
  .tt-sports-eye { font-size: .82rem; }
  .tt-sports-banner { top: 30%; font-size: clamp(1.6rem, 12cqh, 2.8rem); }
  .tt-sports-count { top: 44%; }
  .tt-sports-count b { font-size: 4.4rem; }
  .tt-sports-count span { font-size: 1.2rem; }
  .tt-sports-mc { font-size: .84rem; min-height: 38px; }
  .tt-sports-stage[data-input="touch"][data-phase="play"][data-me="in"] .tt-sports-mc { left: 50%; translate: -50% 0; max-width: calc(100% - 300px); }
  .tt-sports-stage[data-event="push"][data-input="touch"][data-phase="play"][data-me="in"] .tt-sports-mc { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: calc(100% - 440px); }
  /* The chairs fill the middle from top to bottom here, so the village head talks from the left margin. */
  .tt-sports-stage[data-event="chairs"] .tt-sports-mc, .tt-sports-stage[data-event="chairs"][data-input="touch"][data-phase="play"][data-me="in"] .tt-sports-mc {
    left: 10px; top: calc(max(6px, env(safe-area-inset-top)) + 46px); bottom: auto; translate: none; flex-direction: column; align-items: flex-start; gap: 3px; width: auto; max-width: min(176px, 25%); padding: 6px 10px; border-radius: 16px; }
  /* The chant sits between the three counters on the left and the three buttons on the right, not over the clock. */
  .tt-sports-chant { left: 312px; right: 158px; translate: none; width: fit-content; max-width: none; margin-inline: auto; }
  .tt-sports-stick { top: calc(100% - 96px); }
  .tt-sports-stage:not([data-stick]) .tt-sports-stick { top: calc(100% - 96px - env(safe-area-inset-bottom)) !important; }
  .tt-sports-card { gap: 6px; padding: 10px 16px; }
  .tt-sports-card h3 { font-size: 1.3rem; }
  .tt-sports-stage .tt-sports-card button { min-height: 44px; }
  .tt-sports-stage .tt-sports-card .tt-sports-go { min-height: 48px; font-size: 1.08rem; }
  .tt-sports-title { grid-template-columns: auto minmax(0, 17rem); align-items: center; column-gap: 20px; width: max-content; max-width: calc(100% - 20px); }
  .tt-sports-title > * { grid-column: 2; }
  .tt-sports-title > .tt-sports-kicker { grid-column: 1; grid-row: 1; align-self: end; }
  .tt-sports-title > h3 { grid-column: 1; grid-row: 2 / span 3; align-self: start; font-size: 2.7rem; }
  .tt-sports-title > .tt-sports-joke { grid-row: 1 / span 2; }
  .tt-sports-title .tt-sports-joke::before { display: none; }
  .tt-sports-title .tt-sports-keys { display: none; }
  .tt-sports-guide { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; column-gap: 14px; width: min(calc(100% - 20px), 41rem); }
  .tt-sports-guide > * { grid-column: 2; }
  .tt-sports-guide > .tt-sports-pic { grid-column: 1; grid-row: 1 / span 5; }
  .tt-sports-guide > .tt-sports-bar { grid-column: 1 / -1; }
  .tt-sports-guide h3 { font-size: 1.5rem; }
  .tt-sports-rule { font-size: .98rem; }
  .tt-sports-outline { font-size: .84rem; }
  .tt-sports-out, .tt-sports-final { width: min(calc(100% - 20px), 31rem); grid-template-columns: 1fr 1fr; align-items: center; column-gap: 14px; }
  .tt-sports-out > .tt-sports-row, .tt-sports-out > .tt-sports-points, .tt-sports-final > .tt-sports-go, .tt-sports-final > .tt-sports-next { grid-column: 1 / -1; }
  .tt-sports-out > .tt-sports-kicker, .tt-sports-final > .tt-sports-kicker { grid-column: 1 / -1; }
  .tt-sports-out h3 b { font-size: 2.6rem; }
  .tt-sports-final h3 b { font-size: 2.6rem; }
  .tt-sports-points b { font-size: 1.3rem; }
}
/* Short and narrow at once: the chant keeps its row with smaller letters, since a second row would hide the headmaster. */
@container tt-sports (max-height: 440px) and (max-width: 719px) {
  .tt-sports-chant { left: 294px; gap: 5px; padding-right: 9px; }
  .tt-sports-chant > span { font-size: .9rem; }
  .tt-sports-eye { min-width: 4em; padding: 3px 7px; font-size: .72rem; }
}
/* Narrower still, no gap is wide enough: the chant drops to a second row. */
@container tt-sports (max-height: 440px) and (max-width: 619px) {
  .tt-sports-chant { left: 50%; right: auto; top: calc(max(6px, env(safe-area-inset-top)) + 44px); translate: -50% 0; margin-inline: 0; max-width: calc(100% - 16px); }
}
/* A phone held upright: the strip at the top has to share one row with the three buttons */
@container tt-sports (max-width: 520px) {
  .tt-sports-left i { display: none; }
  .tt-sports-chip { height: 36px; padding: 0 8px; font-size: .74rem; gap: 3px; }
  .tt-sports-chip b { font-size: 1.05rem; }
}
/* The narrowest phones */
@container tt-sports (max-width: 379px) {
  .tt-sports-chip { padding: 0 7px; font-size: .72rem; gap: 3px; }
  .tt-sports-chip b { font-size: 1rem; }
  .tt-sports-chant { gap: 5px; padding-right: 9px; }
  .tt-sports-chant > span { font-size: .92rem; }
  .tt-sports-eye { min-width: 4.2em; padding: 4px 6px; font-size: .78rem; }
}

@keyframes tt-sports-pop-in { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes tt-sports-blink { 50% { opacity: .35; } }
@keyframes tt-sports-beat { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes tt-sports-jolt { 0%, 100% { margin-left: -3px; } 50% { margin-left: 3px; } }
@keyframes tt-sports-bump-a { 0% { scale: 1; } 30% { scale: 1.35; rotate: -6deg; } 100% { scale: 1; } }
@keyframes tt-sports-bump-b { 0% { scale: 1; } 30% { scale: 1.35; rotate: 6deg; } 100% { scale: 1; } }
@keyframes tt-sports-stamp-a { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }
@keyframes tt-sports-stamp-b { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }
@keyframes tt-sports-drop-a { from { scale: 1.6; } 60% { scale: .86; } to { scale: 1; } }
@keyframes tt-sports-drop-b { from { scale: 1.6; } 60% { scale: .86; } to { scale: 1; } }
@keyframes tt-sports-rise-a { from { opacity: 0; margin-bottom: -10px; } to { opacity: 1; margin-bottom: 0; } }
@keyframes tt-sports-rise-b { from { opacity: 0; margin-bottom: -10px; } to { opacity: 1; margin-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tt-sports-stage *, .tt-sports-stage *::before, .tt-sports-stage *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}