/* Authenticated game lobby only. No in-race, payment or account-modal overrides. */
@font-face {
  font-family: "Subway Lobby";
  src: url("/assets/platform/subway-surf/subway-original/assets/font/lilita-one.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.subway-lobby { --lobby-ink: #093b60; --lobby-yellow: #ffdb39; --lobby-display: "Subway Lobby", "Arial Black", sans-serif; }
.subway-lobby .app-shell--portal { background: #095891; }
.subway-lobby .portal-topbar { height: calc(76px + env(safe-area-inset-top)); padding-inline: max(22px, calc((100vw - 1380px) / 2)); background: #064276; border-bottom: 3px solid #032d54; box-shadow: none; backdrop-filter: none; }
.subway-lobby .desktop-nav { gap: 25px; }
.subway-lobby .desktop-nav :is(a, button) { padding: 12px 0; border: 0; background: none; color: #e5f7ff; font-size: 12px; font-weight: 850; cursor: pointer; }
.subway-lobby .desktop-nav :is(a, button):hover { color: #ffdc42; }
.subway-lobby .portal-topbar .balance-pill { border: 2px solid #7cccf0; border-radius: 12px; background: #073359; }
.subway-lobby .portal-topbar .balance-pill strong { color: #fff9db; }
.subway-lobby .portal-topbar .deposit-shortcut { border: 2px solid #fff0a3; box-shadow: 0 3px 0 #a55b14; background: #ffd33b; color: #14314b; }
.subway-lobby .portal-main { inset: calc(76px + env(safe-area-inset-top)) 0 0; padding: 20px max(22px, calc((100vw - 1380px) / 2)) 42px; }
.subway-lobby .portal-main :is(button, a):focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.subway-station { isolation: isolate; position: relative; display: grid; grid-template-columns: 105px minmax(0, 1fr) 320px; grid-template-rows: 91px minmax(425px, 1fr) 43px; gap: 0 22px; min-height: 596px; padding: 17px 25px 0; overflow: hidden; border: 3px solid #05355c; border-radius: 22px; background: #72d5f2; box-shadow: 0 8px 0 #03345b, inset 0 0 0 2px #d3f7ff; color: #092f4c; }
.subway-station svg, .subway-tools svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.subway-station__scenery { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: linear-gradient(#41bce9, #c5f3e3 69%, #eab781 69%); }
.subway-station__sun { position: absolute; top: 63px; right: 30%; width: 130px; height: 130px; border-radius: 50%; background: #fff3a7; box-shadow: 0 0 0 20px #fffbd02e, 0 0 0 40px #fffbd019; }
.subway-station__skyline { position: absolute; inset: 24% -1px 24%; background: #67b9c9; opacity: .6; clip-path: polygon(0 44%, 3% 44%, 3% 18%, 11% 18%, 11% 52%, 17% 52%, 17% 30%, 22% 30%, 22% 4%, 27% 4%, 27% 48%, 37% 48%, 37% 19%, 45% 19%, 45% 47%, 54% 47%, 54% 0, 61% 0, 61% 36%, 65% 36%, 65% 20%, 71% 20%, 71% 43%, 78% 43%, 78% 10%, 88% 10%, 88% 40%, 94% 40%, 94% 29%, 100% 29%, 100% 100%, 0 100%); }
.subway-station__rail { position: absolute; left: -2%; right: -2%; top: 37%; height: 23%; border-block: 10px solid #176782; background: repeating-linear-gradient(90deg, transparent 0 155px, #176782 155px 169px); transform: rotate(-2deg); opacity: .65; }
.subway-station__train { position: absolute; top: 38%; left: 9%; width: 90%; height: 215px; display: flex; align-items: flex-start; gap: 31px; padding: 21px 45px; border: 6px solid #106087; border-radius: 46px 46px 14px 14px; background: linear-gradient(#e8faff 0 58%, #ffd658 58% 75%, #24a9d0 75% 90%, #075778 90%); box-shadow: inset 0 7px 0 #fff, 0 12px 0 #153955; transform: rotate(-2deg); }
.subway-station__train > i { flex: 1; min-width: 88px; height: 87px; border: 6px solid #1784aa; border-radius: 15px 15px 4px 4px; background: linear-gradient(135deg, #1b5e83 0 45%, #3896b5 45% 52%, #1b5e83 52% 66%, #3896b5 66% 70%, #1b5e83 70%); box-shadow: inset 0 5px 0 #104a69; }
.subway-station__floor { position: absolute; inset: 73% -45% -60%; transform: perspective(460px) rotateX(36deg); transform-origin: center top; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 6px), #be91695e calc(25% - 6px) 25%), repeating-linear-gradient(0deg, transparent 0 62px, #be91695e 62px 66px), #e9b77c; border-top: 13px solid #f8dc9a; box-shadow: 0 -8px 0 #975e32; }
.subway-station__heading { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; grid-column: 1 / -1; }
.subway-station__edition { display: inline-block; padding: 5px 9px; border-radius: 5px; background: #075885; color: #e9fbff; font-size: 9px; letter-spacing: .12em; font-weight: 900; }
.subway-station__heading h1 { margin: 8px 0 0; color: #fff; font-family: var(--lobby-display); font-size: 35px; font-weight: 400; line-height: 1; text-shadow: 0 3px 0 #095a86; -webkit-text-stroke: 3px #095a86; paint-order: stroke fill; }
.subway-station__heading h1 em { color: #ffdf46; font-style: normal; }
.subway-best { display: flex; align-items: center; gap: 11px; padding: 11px 16px; min-width: 174px; background: #075e8f; color: #ffda3d; border: 2px solid #dcf6ff; border-radius: 13px; box-shadow: 0 4px 0 #004169; }
.subway-best > svg { width: 31px; height: 31px; }
.subway-best span { color: #ceebf9; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.subway-best strong { display: block; margin-top: 2px; color: #fff; font-family: var(--lobby-display); font-weight: 400; font-size: 25px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.subway-best small { display: block; margin-top: 3px; color: #d0e8f2; font-size: 8px; font-weight: 600; }
.subway-best small b { color: #ffe06b; }
.subway-tools { position: relative; z-index: 2; grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 17px; align-items: center; padding-top: 18px; }
.subway-tool { --tool-tilt: -4deg; --tool-delay: 0s; appearance: none; display: grid; justify-items: center; gap: 7px; width: 90px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.subway-tool > span { display: grid; place-items: center; width: 63px; height: 61px; border: 3px solid #fff5b3; border-radius: 18px; background: #ffcb37; box-shadow: 0 5px 0 #a75d18, inset 0 4px 0 #ffe989; color: #925018; transform: rotate(var(--tool-tilt)); transition: transform .18s ease-out; animation: subway-tool-idle 6.4s ease-in-out var(--tool-delay) infinite; }
.subway-tool > span > svg { width: 35px; height: 35px; stroke-width: 2; }
.subway-tool strong { font-size: 11px; font-weight: 900; text-shadow: 0 2px 2px #033e68, 0 0 5px #033e68; }
.subway-tool--history { --tool-tilt: 3deg; --tool-delay: -1.6s; }
.subway-tool--powers { --tool-delay: -3.2s; }
.subway-tool--help { --tool-tilt: 3deg; --tool-delay: -4.8s; }
.subway-tool--history > span { background: #23b9ef; border-color: #d9f7ff; color: #075176; box-shadow: 0 5px 0 #075a86, inset 0 4px 0 #85e0fc; }
.subway-tool--powers > span { background: #9b74ee; border-color: #e5d8ff; color: #fff6ab; box-shadow: 0 5px 0 #4b3582, inset 0 4px 0 #c1a1f6; }
.subway-tool--help > span { background: #68cc4a; border-color: #e4ffb3; color: #216321; box-shadow: 0 5px 0 #3b7e25, inset 0 4px 0 #a3e86d; }
.subway-tool:focus-visible > span { animation: none; transform: translateY(-3px) rotate(0) scale(1.05); }
.subway-tool:active > span { animation: none; transform: translateY(4px) rotate(0) scale(.96); }
/* Logo, interactive model and play button own separate rows: none may cover
   another control when the desktop window is narrow or the ranking grows. */
.subway-station__center { position: relative; display: grid; grid-template-rows: 64px minmax(245px, 1fr) 106px; justify-items: center; grid-column: 2; grid-row: 2; min-width: 0; }
.subway-station__graffiti { position: relative; z-index: 1; align-self: start; width: min(64%, 215px); transform: rotate(-5deg); filter: drop-shadow(0 3px 0 #082e4d); pointer-events: none; }
.subway-station__graffiti img { display: block; width: 100%; height: auto; }
.subway-station__graffiti > span { display: block; margin-top: -8px; color: #fff6b2; font-family: var(--lobby-display); font-size: 12px; letter-spacing: .09em; text-align: center; }
.subway-runner { position: relative; grid-row: 2; align-self: stretch; width: 100%; max-width: 460px; min-width: 0; min-height: 0; margin: 0; touch-action: pan-y; }
.subway-runner__art { position: absolute; top: 0; bottom: 34px; left: 50%; width: auto; aspect-ratio: 292 / 536; transform: translateX(-50%); background: url("/assets/platform/subway-surf/subway-original/assets/preload/splash.png") left center / auto 100% no-repeat; clip-path: polygon(20% 1%, 65% 1%, 70% 13%, 76% 18%, 85% 16%, 93% 23%, 98% 30%, 91% 41%, 78% 43%, 73% 50%, 67% 55%, 76% 65%, 79% 74%, 91% 89%, 92% 95%, 82% 100%, 17% 100%, 12% 94%, 1% 66%, 19% 53%, 24% 43%, 8% 47%, 0 44%, 0 39%, 12% 35%, 20% 26%, 18% 16%); pointer-events: none; }
.subway-runner__shadow { position: absolute; bottom: 29px; left: 30%; width: 40%; height: 17px; border-radius: 50%; background: #66442144; filter: blur(3px); pointer-events: none; }
.subway-runner__viewport { position: absolute; inset: 0 0 34px; display: block; width: 100%; height: calc(100% - 34px); border: 0; background: transparent; opacity: 0; pointer-events: none; }
.subway-runner--ready .subway-runner__viewport { opacity: 1; pointer-events: auto; }
.subway-runner__viewport { color-scheme: normal; }
.subway-runner--ready :is(.subway-runner__art, .subway-runner__shadow) { visibility: hidden; }
.subway-runner__hint { position: absolute; bottom: 1px; left: 50%; box-sizing: border-box; width: max-content; max-width: calc(100% - 4px); margin: 0; padding: 4px 9px; border: 1px solid #ffffff91; border-radius: 20px; background: #e9fbffdf; color: #164f6b; font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; text-wrap: balance; transform: translateX(-50%); pointer-events: none; }
.subway-runner__controls { position: absolute; z-index: 2; top: 3px; right: 3px; display: flex; gap: 5px; }
.subway-runner__controls button { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 7px; border: 1px solid #fff; border-radius: 50%; background: #e9fbffeb; color: #164f6b; cursor: pointer; touch-action: manipulation; }
.subway-runner__controls button:focus-visible { outline: 3px solid #06365a; outline-offset: 3px; box-shadow: 0 0 0 3px #fff1a1; }
.subway-runner__controls button:disabled { opacity: .55; cursor: default; }
.subway-runner[hidden], .subway-runner [hidden] { display: none; }
.subway-start { position: relative; z-index: 2; grid-row: 3; align-self: end; width: min(100% - 14px, 335px); padding-bottom: 5px; text-align: center; }
.subway-start__button { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; min-height: 75px; padding: 11px 24px; border: 4px solid #fff5a7; border-radius: 21px; box-shadow: 0 7px 0 #b96815, 0 10px 0 #794615, inset 0 5px 0 #fff088; background: linear-gradient(#ffe351, #ffc828); color: #153c58; cursor: pointer; transform: rotate(-2deg); transition: transform .18s ease-out; animation: subway-play-idle 5.4s ease-in-out infinite; touch-action: manipulation; }
.subway-start__button::after { content: ""; position: absolute; z-index: -1; inset: -40% auto -40% -45%; width: 27%; background: linear-gradient(90deg, transparent, #fff9c499, transparent); transform: skewX(-22deg) translateX(-180%); animation: subway-play-shine 5.4s ease-in-out infinite; pointer-events: none; }
.subway-start__button > span { font-family: var(--lobby-display); font-size: 42px; font-weight: 400; line-height: 1; }
.subway-start__button > svg:first-child { fill: currentColor; width: 25px; height: 25px; }
.subway-start__button > svg:last-child { margin-left: auto; width: 26px; }
.subway-start__button:focus-visible { animation: none; transform: rotate(0) translateY(-3px); }
.subway-start__button:active { animation: none; transform: rotate(0) translateY(4px); box-shadow: 0 3px 0 #b96815; }
.subway-start p { margin: 15px 0 0; color: #593a20; font-size: 10px; font-weight: 850; }
.subway-leaderboard { position: relative; align-self: start; grid-column: 3; grid-row: 2; margin: 19px 0 18px; padding: 26px 17px 15px; border: 3px solid #fff5c6; border-radius: 17px; background: #fff8df; box-shadow: 0 6px 0 #b77922, 0 10px 22px #14566b30; color: #123e5d; }
.subway-leaderboard__ribbon { position: absolute; top: -18px; left: 7px; right: 7px; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px; border: 2px solid #fff1ac; border-radius: 9px; background: #ffbd26; box-shadow: 0 3px 0 #b47119; font-size: 10px; font-weight: 950; }
.subway-leaderboard__ribbon svg { width: 21px; height: 21px; }
.subway-leaderboard__eyebrow { color: #817048; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.subway-leaderboard h2 { margin: 8px 0 5px; color: #075b95; font-family: var(--lobby-display); font-size: 32px; font-weight: 400; line-height: .98; }
.subway-leaderboard h2 em { color: #e18111; font-style: normal; }
.subway-leaderboard header > p { margin: 8px 0 16px; font-size: 10px; font-weight: 650; color: #6e6b51; }
.subway-leaderboard__preview { min-height: 83px; border-top: 1px solid #ead7a0; }
.subway-ranking-empty { margin: 0; padding: 20px 8px; color: #6e674e; font-size: 12px; line-height: 1.5; text-align: center; }
.subway-leaderboard__status { margin: 9px 0; color: #766e52; font-size: 9px; line-height: 1.4; }
.subway-leaderboard__open { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 9px; border: 2px solid #76d8f6; border-radius: 9px; background: #087fc6; box-shadow: 0 3px 0 #064775; color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; }
.subway-leaderboard__open > svg { width: 18px; height: 18px; }
.subway-leaderboard__prize { display: flex; align-items: center; gap: 11px; margin-top: 17px; padding-top: 13px; border-top: 1px dashed #cbb77d; }
.subway-leaderboard__prize > svg { flex: 0 0 30px; width: 30px; height: 30px; color: #d48c19; }
.subway-leaderboard__prize p { margin: 0; }
.subway-leaderboard__prize strong { display: block; color: #795015; font-size: 11px; }
.subway-leaderboard__prize span { display: block; margin-top: 4px; color: #756b4e; font-size: 9px; line-height: 1.4; }
.subway-ranking-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 43px; padding: 7px 2px; border-bottom: 1px solid #ebddae; font-size: 11px; }
.subway-ranking-row__position { display: grid; place-items: center; width: 24px; height: 26px; color: #8b5914; background: #ffdf72; border-radius: 7px; font-family: var(--lobby-display); font-size: 16px; }
.subway-ranking-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.subway-ranking-row__distance { color: #096d9f; font-weight: 900; font-variant-numeric: tabular-nums; }
.subway-leaderboard .subway-rank-row { grid-template-columns: 27px minmax(0, 1fr) auto; min-height: 43px; gap: 7px; padding: 6px 2px; border-color: #ebddae; font-size: 11px; }
.subway-leaderboard .subway-rank-place { height: 28px; border-radius: 7px; font-size: 12px; }
.subway-leaderboard .subway-rank-row > strong { color: #096d9f; font-size: 11px; }
.subway-leaderboard .subway-rank-caption { margin: 8px 0; color: #766e52; font-size: 9px; }
.subway-leaderboard .subway-rank-empty { padding: 17px 2px; font-size: 11px; color: #655e45; }
.subway-leaderboard .subway-rank-empty strong { font-size: 13px; color: #174d6a; }
.subway-leaderboard .subway-rank-prizes { gap: 5px; margin: 16px 0 0; }
.subway-leaderboard .subway-rank-prizes > div { padding: 8px 3px; border-width: 1px; border-radius: 8px; }
.subway-leaderboard .subway-rank-prizes small { font-size: 8px; }
.subway-leaderboard .subway-rank-prizes strong { font-size: 12px; }
.subway-leaderboard [data-subway-prizes-preview] > .subway-rank-caption { margin-top: 17px; text-align: center; }
.subway-station__footer { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #634a2c; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.subway-station__footer > span { display: flex; gap: 7px; align-items: center; }
.subway-station__footer i { width: 6px; height: 6px; border-radius: 50%; background: #249a4a; box-shadow: 0 0 0 3px #d4e195; }
.subway-station__footer > a { display: flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.subway-station__footer svg { width: 15px; height: 15px; }
.subway-lobby .performance-strip { margin-top: 23px; border: 2px solid #2b89be; border-radius: 14px; background: #064776; padding: 8px; box-shadow: 0 4px 0 #033759; backdrop-filter: none; }
.subway-lobby .performance-strip > article, .subway-lobby .performance-strip > button { border-color: #2c80ad; background: #064776; border-radius: 8px; }
.subway-lobby .performance-strip strong { color: #fff5b1; }
.subway-lobby .performance-strip small { color: #c1e1ee; }
.subway-lobby .performance-strip > button { background: #085b90; color: #ffdd5e; }
.subway-lobby .portal-main .power-guide { margin-top: 23px; border: 2px solid #2b89be; border-radius: 14px; background: #064776; }
.subway-lobby .portal-main .power-guide .section-kicker { color: #ffdb4e; }
.subway-lobby .portal-main .power-guide h2 { font-family: var(--lobby-display); font-weight: 400; letter-spacing: .01em; }
.subway-lobby-campaign { margin: 23px 0 0; padding: 0; overflow: hidden; border: 2px solid #2b89be; border-radius: 14px; background: #064776; }
.subway-lobby-campaign img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
/* The stage replaces the bundled poster, but an operator's uploaded campaign
   remains visible and manageable through the existing media slot. */
.subway-lobby-campaign:has(img[src^="/assets/platform/subway-surf/subway-original/art.png"]) { display: none; }

@media (min-width: 1450px) {
  .subway-station { min-height: 660px; grid-template-rows: 91px minmax(489px, 1fr) 43px; }
  .subway-station__center { grid-template-rows: 76px minmax(290px, 1fr) 112px; }
  .subway-station__graffiti { width: 235px; }
  .subway-leaderboard { margin-top: 37px; }
}
@media (max-width: 1050px) {
  .subway-lobby .desktop-nav { display: none; }
  .subway-station { grid-template-columns: 78px minmax(0, 1fr) 265px; gap: 0 13px; padding-inline: 17px; }
  .subway-tools { padding-top: 24px; }
  .subway-tool { width: 75px; }
  .subway-station__graffiti { width: min(72%, 190px); }
  .subway-start__button { gap: 14px; padding-inline: 16px; }
  .subway-start__button > span { font-size: 35px; }
  .subway-leaderboard { padding-inline: 13px; }
  .subway-leaderboard__ribbon { font-size: 8px; }
}
/* Keep the full primary action above the fold on laptop-height displays.
   The ranking still shows all three positions and configured prizes. */
@media (min-width: 761px) and (max-height: 820px) {
  .subway-lobby .portal-main { padding-top: 16px; }
  .subway-station { min-height: 0; grid-template-rows: 74px minmax(365px, 1fr) 31px; padding-top: 13px; }
  .subway-station__heading h1 { margin-top: 6px; font-size: 29px; }
  .subway-best { padding: 6px 13px; }
  .subway-best span { display: block; line-height: 1.15; }
  .subway-best strong { margin-top: 1px; font-size: 21px; line-height: 1.1; }
  .subway-best small { margin-top: 1px; font-size: 7px; line-height: 1.15; }
  .subway-station__center { grid-template-rows: 49px minmax(245px, 1fr) 96px; }
  .subway-station__graffiti { width: min(64%, 166px); }
  .subway-station__graffiti > span { display: none; }
  .subway-tools { padding-top: 12px; gap: 11px; }
  .subway-tool > span { width: 53px; height: 51px; border-radius: 15px; }
  .subway-tool > span > svg { width: 29px; height: 29px; }
  .subway-tool strong { font-size: 10px; }
  .subway-start__button { min-height: 66px; }
  .subway-start__button > span { font-size: 37px; }
  .subway-start p { margin-top: 13px; }
  .subway-leaderboard { margin-top: 12px; margin-bottom: 10px; padding: 23px 15px 13px; }
  .subway-leaderboard__ribbon { min-height: 32px; font-size: 9px; }
  .subway-leaderboard h2 { margin-top: 5px; font-size: 25px; line-height: 1.05; }
  .subway-leaderboard h2 > br { display: none; }
  .subway-leaderboard h2 em::before { content: " "; }
  .subway-leaderboard header > p { margin: 5px 0 9px; font-size: 9px; }
  .subway-leaderboard .subway-rank-row { min-height: 37px; padding-block: 4px; }
  .subway-leaderboard .subway-rank-place { height: 26px; }
  .subway-leaderboard .subway-rank-caption { margin: 6px 0; font-size: 8px; }
  .subway-leaderboard__status { margin: 7px 0; font-size: 8px; }
  .subway-leaderboard__open { min-height: 37px; padding-block: 7px; font-size: 10px; }
  .subway-leaderboard .subway-rank-prizes { margin-top: 12px; }
  .subway-leaderboard .subway-rank-prizes > div { padding: 6px 3px; }
  .subway-leaderboard .subway-rank-prizes strong { margin-top: 3px; font-size: 11px; }
  .subway-leaderboard .subway-rank-empty { padding-block: 13px; }
}
@media (max-width: 760px) {
  .subway-lobby .portal-topbar { height: calc(65px + env(safe-area-inset-top)); padding: calc(7px + env(safe-area-inset-top)) 12px 7px; }
  .subway-lobby .portal-topbar .brand .brand__lockup { display: block; width: 105px; height: auto; }
  .subway-lobby .portal-topbar .brand .brand__symbol { display: none; }
  .subway-lobby .portal-topbar .balance-pill { min-width: 92px; min-height: 43px; padding: 5px 8px; }
  .subway-lobby .portal-topbar .balance-pill span { font-size: 7px; }
  .subway-lobby .portal-topbar .balance-pill strong { font-size: 12px; }
  .subway-lobby .topbar-account { gap: 7px; }
  .subway-lobby .portal-topbar .profile-shortcut { min-width: 39px; width: 39px; padding: 3px; }
  .subway-lobby .portal-topbar .profile-shortcut > svg { display: none; }
  .subway-lobby .portal-topbar .deposit-shortcut { min-width: 38px; width: 38px; min-height: 39px; padding: 5px; }
  .subway-lobby .portal-topbar .deposit-shortcut > span { display: none; }
  .subway-lobby .portal-main { inset: calc(65px + env(safe-area-inset-top)) 0 calc(72px + env(safe-area-inset-bottom)); padding: 0 0 25px; }
  .subway-station { display: grid; grid-template-columns: 68px minmax(0, 1fr) 65px; grid-template-rows: 78px 380px 28px auto; gap: 0 3px; min-height: 0; padding: 15px 14px 20px; border: 0; border-bottom: 4px solid #053d66; border-radius: 0; box-shadow: none; }
  .subway-station__heading h1 { font-size: 27px; margin-top: 7px; }
  .subway-station__edition { font-size: 7px; padding: 4px 6px; }
  .subway-station__heading > div:first-child { min-width: 0; }
  .subway-best { flex-shrink: 0; min-width: 0; gap: 7px; padding: 7px 9px; border-radius: 10px; }
  .subway-best > svg { width: 22px; height: 22px; }
  .subway-best span { font-size: 6px; }
  .subway-best strong { font-size: clamp(15px, 4.4vw, 18px); }
  .subway-best small { font-size: 6px; }
  .subway-station__scenery { bottom: auto; height: 525px; }
  .subway-station__sun { width: 94px; height: 94px; top: 98px; right: 3%; }
  .subway-station__train { width: 165%; left: -10%; top: 38%; height: 173px; gap: 24px; padding: 19px; border-radius: 35px; }
  .subway-station__train > i { min-width: 70px; height: 63px; }
  .subway-station__rail { top: 33%; height: 27%; }
  .subway-tools { grid-column: 1 / -1; display: grid; grid-template-columns: 63px 1fr 63px; grid-template-rows: 76px 76px; align-content: start; gap: 24px 0; padding-top: 63px; pointer-events: none; }
  .subway-tool { width: 63px; gap: 7px; pointer-events: auto; }
  .subway-tool > span { width: 51px; height: 51px; border-radius: 15px; }
  .subway-tool > span > svg { width: 29px; height: 29px; }
  .subway-tool strong { font-size: 9px; }
  .subway-tool--ranking { grid-column: 1; grid-row: 1; }
  .subway-tool--history { grid-column: 3; grid-row: 1; }
  .subway-tool--powers { grid-column: 1; grid-row: 2; }
  .subway-tool--help { grid-column: 3; grid-row: 2; }
  .subway-station__center { grid-column: 1 / -1; grid-row: 2; grid-template-rows: 52px minmax(0, 1fr) 96px; }
  .subway-station__graffiti { width: 168px; }
  .subway-station__graffiti > span { display: none; }
  .subway-runner { max-width: calc(100% - 126px); }
  .subway-runner__hint { padding-inline: 6px; font-size: 8px; }
  /* Keep the 3D face and drag area clear even at 320px. These two controls
     sit beside the logo, one at each edge, not on top of the character. */
  .subway-runner__controls { top: -46px; left: -62px; right: -62px; justify-content: space-between; }
  .subway-runner__controls button { min-width: 44px; min-height: 44px; }
  .subway-start { width: 235px; max-width: 83%; padding-bottom: 5px; }
  .subway-start__button { min-height: 59px; padding: 8px 17px; border-width: 3px; border-radius: 17px; gap: 16px; }
  .subway-start__button > span { font-size: 34px; }
  .subway-start__button > svg:first-child { width: 21px; height: 21px; }
  .subway-start__button > svg:last-child { width: 21px; }
  .subway-start p { margin-top: 13px; font-size: 8px; }
  .subway-station__footer { grid-row: 3; padding-top: 3px; justify-content: center; font-size: 7px; }
  .subway-station__footer > a { display: none; }
  .subway-leaderboard { grid-column: 1 / -1; grid-row: 4; margin: 34px 0 0; padding: 24px 18px 16px; border-radius: 15px; }
  .subway-leaderboard__ribbon { left: 26px; right: 26px; font-size: 10px; }
  .subway-leaderboard header { position: relative; padding-right: 30px; }
  .subway-leaderboard h2 { font-size: 29px; }
  .subway-leaderboard h2 > br { display: none; }
  .subway-leaderboard h2 em::before { content: " "; }
  .subway-leaderboard header > p { margin-top: 7px; margin-bottom: 13px; font-size: 11px; }
  .subway-leaderboard__preview { min-height: 64px; }
  .subway-leaderboard__prize span, .subway-leaderboard__status { font-size: 10px; }
  .subway-leaderboard__prize strong { font-size: 12px; }
  .subway-leaderboard__open { min-height: 45px; font-size: 12px; }
  .subway-lobby-campaign { margin: 16px 12px 0; }
  .subway-lobby .performance-strip { margin: 16px 12px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 5px; }
  .subway-lobby .performance-strip > article, .subway-lobby .performance-strip > button { min-width: 0; min-height: 61px; padding: 8px; }
  .subway-lobby .performance-strip strong { font-size: 16px; }
  .subway-lobby .performance-strip small { font-size: 9px; }
  .subway-lobby .performance-strip__icon { display: none; }
  .subway-lobby .portal-main .power-guide { margin: 16px 12px 0; padding: 22px 17px; }
  .subway-lobby .portal-bottom-nav { display: flex; height: calc(72px + env(safe-area-inset-bottom)); background: #054373; border-top: 3px solid #76c8ed; box-shadow: none; }
  .subway-lobby .portal-bottom-nav .nav-item small { color: #d8edf7; }
  .subway-lobby .portal-bottom-nav .nav-item.is-active small { color: #ffdc42; }
  .subway-lobby .portal-bottom-nav .diamond-button--play > small { color: #153c58; font-weight: 900; }
  .subway-lobby .portal-bottom-nav .diamond-button--play > span { animation: subway-nav-play-idle 5.4s ease-in-out infinite; }
  .subway-lobby .portal-bottom-nav .diamond-button--play:focus-visible { outline: 3px solid #fff3aa; outline-offset: 3px; }
  .subway-lobby .portal-bottom-nav .diamond-button--play:focus-visible > span { animation: none; transform: scale(1.06); }
  .subway-lobby .portal-bottom-nav .diamond-button--play:active > span { animation: none; transform: scale(.94); }
}
@media (max-width: 365px) {
  .subway-lobby .portal-topbar { display: flex; justify-content: space-between; padding-inline: 8px; }
  .subway-lobby .portal-topbar .brand .brand__lockup { width: 87px; }
  .subway-lobby .portal-topbar .topbar-account { display: flex; gap: 5px; }
  .subway-station { padding-inline: 10px; }
  .subway-station__heading h1 { font-size: 23px; }
  .subway-best { padding: 7px; gap: 4px; }
  .subway-best > svg { width: 18px; }
  .subway-best strong { font-size: 17px; }
}
/* Short, staggered accents only animate transforms; the whole page does not
   breathe or trigger layout work. Interaction always takes priority. */
@keyframes subway-tool-idle {
  0%, 58%, 100% { transform: translateY(0) rotate(var(--tool-tilt)); }
  65% { transform: translateY(-5px) rotate(calc(var(--tool-tilt) + 5deg)); }
  72% { transform: translateY(0) rotate(calc(var(--tool-tilt) - 3deg)); }
  79% { transform: translateY(-2px) rotate(var(--tool-tilt)); }
  86% { transform: translateY(0) rotate(var(--tool-tilt)); }
}
@keyframes subway-play-idle {
  0%, 67%, 100% { transform: rotate(-2deg) translateY(0) scale(1); }
  76% { transform: rotate(-1deg) translateY(-3px) scale(1.025); }
  86% { transform: rotate(-2deg) translateY(0) scale(1); }
}
@keyframes subway-play-shine {
  0%, 65% { transform: skewX(-22deg) translateX(-180%); opacity: 0; }
  69% { opacity: 1; }
  83%, 100% { transform: skewX(-22deg) translateX(700%); opacity: 0; }
}
@keyframes subway-nav-play-idle {
  0%, 68%, 100% { transform: translateY(0) scale(1); }
  77% { transform: translateY(-2px) scale(1.08); }
  87% { transform: translateY(0) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .subway-tool:hover > span { animation: none; transform: translateY(-3px) rotate(0) scale(1.05); }
  .subway-start__button:hover { animation: none; transform: rotate(0) translateY(-3px) scale(1.015); }
  .subway-tool:active > span { transform: translateY(4px) rotate(0) scale(.96); }
  .subway-start__button:active { transform: rotate(0) translateY(4px); }
}
@media (pointer: coarse) {
  .subway-runner__controls button { min-width: 44px; min-height: 44px; }
}
.subway-lobby-motion-paused .subway-tool > span,
.subway-lobby-motion-paused .subway-start__button,
.subway-lobby-motion-paused .subway-start__button::after { animation-play-state: paused; }
.subway-lobby-motion-paused .portal-bottom-nav .diamond-button--play > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .subway-start__button, .subway-start__button::after, .subway-tool > span { animation: none; transition: none; }
  .subway-start__button::after { display: none; }
  .subway-lobby .portal-bottom-nav .diamond-button--play > span { animation: none; transition: none; }
}