.source-page * { box-sizing: border-box; }
html.source-page, html.source-page body { margin: 0; font-family: Inter, "Segoe UI", sans-serif; color: #f7f7f4; --muted: #d7d9de; background: var(--tt-source-bg, #0a0b0d) !important; }
.game-wrap { position: absolute; top: 50%; left: 50%; width: 420px; transform-origin: center; }
.race-card { position: relative; width: 100%; height: 746.667px; background: #14161a; border: 1px solid #353a44; border-radius: 12px; display: flex; flex-direction: column; gap: 9px; padding: 13px; }
.race-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.race-title { font-weight: 900; font-size: 23px; line-height: 1.05; }
.subtitle, .small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.clock { font-size: 23px; font-weight: 900; font-variant-numeric: tabular-nums; }
.leader-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; }
#leadName { display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#distanceText { white-space: nowrap; color: #a3e3cc; }
.progress-track { height: 6px; background: #171f1b; margin-top: 7px; }
#progressFill { height: 100%; background: #a3d1bb; }
.race-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); gap: 6px; flex: 1; min-height: 0; }
.stage { position: relative; grid-column: 2; grid-row: 1; min-height: 0; background: #392e2b; overflow: hidden; }
#raceCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stage-label { text-align: center; font-size: 12px; line-height: 1.3; color: #fff1d8; }
.result { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 15px; background: #192822f5; padding: 12px; text-align: center; border: 1px solid #9bad8e; }
.result strong { display: block; font-size: 20px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.winners { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.play-instruction { font-size: 13px; line-height: 1.3; margin: 0; font-weight: 800; }
.gift-status { font-size: 12px; line-height: 1.3; height: 2.6em; overflow: hidden; margin: 0; color: var(--muted); overflow-wrap: anywhere; }

/* Separate verge columns keep gifts clear of the painted road at every size. */
#giftLegend, #giftLegend * { background: transparent; border: 0; box-shadow: none; text-shadow: -1px -1px 0 #14161a, 0 -1px 0 #14161a, 1px -1px 0 #14161a, -1px 0 0 #14161a, 1px 0 0 #14161a, -1px 1px 0 #14161a, 0 1px 0 #14161a, 1px 1px 0 #14161a; }
/* Counter the wrapper scale so hosted phone previews retain 14px text. */
#giftLegend { display: contents; pointer-events: none; font-size: max(14px, calc(14.1px / var(--source-scale, 1))); font-weight: 800; }
#giftLegend section { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; color: #a3e3cc; }
#giftLegend .gift-setback { grid-column: 3; color: #ffb397; }
#giftLegend h2 { flex: none; font-size: 1em; line-height: 1.1; margin: 0 0 6px; min-height: 3.75em; text-align: center; font-weight: 900; letter-spacing: 0; color: #ffd400; }
#giftLegend ul { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 2px; list-style: none; padding: 0; margin: 0; }
#giftLegend li { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#giftLegend .tt-core-gift-icon { flex: none; width: 20px; height: 20px; font-size: 18px; }
#giftLegend .gift-name { width: 100%; overflow-wrap: anywhere; font-size: 1em; line-height: 1.1; text-align: center; color: #f7f7f4; }
#giftLegend strong { font-size: 1em; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; }
html.tt-shell .free-action { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 20px; }
html.tt-shell .free-action legend { font-size: 15px; font-weight: 750; padding-right: 10px; }