:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#fff;background:#08122e;--yellow:#ffe044;--orange:#ff7138;--cyan:#46dcff;--blue:#132b68;--deep:#08122e;--muted:#bac7e2;--line:rgba(255,255,255,.18)}
*{box-sizing:border-box}html{min-width:320px;background:var(--deep);scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--deep)}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}[hidden]{display:none!important}.skip-link{position:fixed;z-index:120;top:-80px;left:16px;padding:12px 16px;border-radius:8px;background:#fff;color:#111}.skip-link:focus{top:12px}
.site-header{position:absolute;z-index:20;top:0;left:0;right:0;width:min(1180px,calc(100% - 36px));min-height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark,.modal-brand{display:flex;align-items:center;gap:11px}.wordmark-sign,.modal-brand>span{width:43px;height:43px;display:grid;place-items:center;transform:rotate(-5deg);border:3px solid #fff;border-radius:9px;background:var(--orange);font-size:13px;font-weight:950;box-shadow:4px 4px 0 #67366f}.wordmark>span:last-child{display:grid;font-size:19px;font-weight:950;line-height:1;letter-spacing:-.04em}.wordmark b,.site-footer b,.modal-brand i{color:var(--yellow)}.wordmark small{margin-top:5px;color:#b8c6e4;font-size:8px;letter-spacing:.14em;text-transform:uppercase}.site-header nav{display:flex;align-items:center;gap:9px}.site-header nav a,.site-header nav button{min-height:42px;padding:0 15px;border:0;border-radius:10px;background:rgba(8,18,46,.48);color:#fff;font:inherit;font-size:13px;font-weight:850;cursor:pointer;backdrop-filter:blur(8px)}.site-header nav .nav-action{border:1px solid rgba(255,224,68,.62);color:var(--yellow)}
.hero{position:relative;isolation:isolate;min-height:790px;height:100svh;display:grid;place-items:center;overflow:hidden;padding:110px 22px 105px}.hero-background{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero::before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(5,12,36,.2),rgba(5,12,36,.18) 48%,#08122e 100%),linear-gradient(90deg,rgba(5,12,36,.42),rgba(5,12,36,.2),rgba(5,12,36,.5))}.hero::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 48%,transparent 12%,rgba(4,10,31,.5) 82%)}.hero-inner{position:relative;z-index:4;width:min(720px,100%);display:grid;justify-items:center;text-align:center;text-shadow:0 5px 15px rgba(0,0,25,.72)}.hero-kicker{color:var(--cyan);font-size:12px;font-weight:950;letter-spacing:.17em;text-transform:uppercase}.hero h1{margin:15px 0 12px;display:grid;justify-items:center;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-weight:1000;line-height:.78;letter-spacing:-.075em;text-transform:uppercase;transform:rotate(-1deg)}.hero h1 span{font-size:clamp(72px,10vw,138px);color:#fff;-webkit-text-stroke:3px #162b64;text-shadow:0 6px 0 #162b64,0 12px 0 #091737,0 20px 30px rgba(0,0,25,.6)}.hero h1 strong{font-size:clamp(90px,12.5vw,172px);color:var(--yellow);-webkit-text-stroke:4px #d94735;text-shadow:0 7px 0 #d94735,0 14px 0 #84294b,0 24px 36px rgba(0,0,25,.65)}.hero-inner>p{max-width:38ch;margin:20px 0 26px;color:#f0f4ff;font-size:18px;font-weight:700;line-height:1.55}.hero-actions{display:grid;justify-items:center;gap:13px}.play-button{min-width:min(330px,88vw);min-height:68px;display:grid;grid-template-columns:45px 1fr;align-items:center;gap:13px;padding:8px 22px 8px 10px;border:0;border-radius:15px;background:linear-gradient(180deg,#fff79b,#ffe044 22%,#f2a918);color:#17203c;text-align:left;font:inherit;font-size:17px;font-weight:950;cursor:pointer;text-shadow:none;box-shadow:0 7px 0 #aa5810,0 16px 30px rgba(0,0,30,.45),inset 0 2px 0 rgba(255,255,255,.7)}.play-button i{width:45px;height:45px;display:grid;place-items:center;border-radius:11px;background:#142554;color:#fff;font-size:15px;font-style:normal}.play-button span{display:grid}.play-button small{margin-top:3px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.72}.login-button{min-height:44px;border:0;border-bottom:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:850;cursor:pointer;text-shadow:0 2px 7px #07102b}.control-bar{position:absolute;z-index:5;left:50%;bottom:28px;display:flex;align-items:center;gap:7px;transform:translateX(-50%);padding:7px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(7,16,43,.7);backdrop-filter:blur(12px)}.control-bar span{min-height:42px;display:flex;align-items:center;gap:9px;padding:0 14px;border-radius:9px;color:#dce6fa;font-size:11px;font-weight:800}.control-bar b{color:var(--yellow);font-size:16px}.speed-line{position:absolute;z-index:2;height:4px;border-radius:999px;background:linear-gradient(90deg,transparent,#fff,var(--cyan),transparent);filter:drop-shadow(0 0 8px #fff);opacity:.72}.speed-one{left:-7%;top:40%;width:29%;transform:rotate(-17deg)}.speed-two{right:-6%;top:31%;width:27%;transform:rotate(16deg)}
.how-to{padding:86px max(22px,calc((100% - 1080px)/2));text-align:center;background:#08122e}.section-heading>span{color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.16em}.section-heading h2{margin:10px 0 9px;font-size:clamp(36px,5vw,62px);line-height:1;letter-spacing:-.06em}.section-heading p{margin:0;color:var(--muted);font-size:15px}.how-to ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:38px 0 0;padding:0;list-style:none;text-align:left}.how-to li{min-height:142px;display:grid;grid-template-columns:auto 1fr;align-content:start;gap:15px;padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#101e47}.how-to li>b{width:33px;height:33px;display:grid;place-items:center;border-radius:9px;background:var(--yellow);color:#18213b;font-size:12px}.how-to li strong{font-size:17px}.how-to li p{margin:8px 0 0;color:#9dacca;font-size:13px;line-height:1.5}.section-cta{min-width:250px;min-height:55px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;margin-top:30px;padding:0 19px;border:0;border-radius:12px;background:var(--orange);color:#fff;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #8c3021}.site-footer{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px max(22px,calc((100% - 1080px)/2));border-top:1px solid rgba(255,255,255,.12);color:#c8d3e8}.site-footer p{margin:0;color:#8493b0;font-size:11px}
.auth-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,8,25,.8);backdrop-filter:blur(13px)}.auth-card{position:relative;width:min(440px,100%);max-height:calc(100dvh - 36px);overflow:auto;padding:29px;border:1px solid rgba(128,174,255,.3);border-radius:22px;background:#0d193d;box-shadow:0 34px 100px rgba(0,0,20,.7)}.auth-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#172653;color:#fff;font-size:23px;cursor:pointer}.modal-brand{height:45px;margin-bottom:16px}.modal-brand>span{width:39px;height:39px}.modal-brand>b{font-size:17px}.modal-brand i{font-style:normal}.auth-kicker{color:var(--cyan);font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.auth-card h2{margin:8px 0 7px;font-size:31px;line-height:1.05;letter-spacing:-.045em}.auth-intro{margin:0 0 21px;color:#aebbd5;font-size:13px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:19px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#07102a}.auth-tabs button{min-height:41px;border:0;border-radius:9px;background:transparent;color:#8392b2;font:inherit;font-size:13px;font-weight:850;cursor:pointer}.auth-tabs button[aria-selected="true"]{background:#24396f;color:#fff;box-shadow:inset 0 0 0 1px rgba(70,220,255,.28)}.auth-card form{display:grid;gap:13px}.auth-card label{display:grid;gap:7px;color:#e8eefb;font-size:12px;font-weight:800}.auth-card input{width:100%;min-height:49px;padding:0 14px;border:1px solid #415481;border-radius:10px;outline:0;background:#14244f;color:#fff;font:inherit;font-size:16px}.auth-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(70,220,255,.14)}.auth-submit{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border:0;border-radius:10px;background:var(--yellow);color:#17203c;font:inherit;font-weight:950;cursor:pointer;box-shadow:0 5px 0 #9d7413}.auth-error{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(255,100,104,.45);border-radius:10px;background:#38182c;color:#ffd0d4;font-size:12px;line-height:1.45}.auth-foot{margin:18px 0 0;color:#7483a2;font-size:10px;line-height:1.5;text-align:center}
button:hover,a:hover{filter:brightness(1.06)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media(max-width:760px){.site-header{min-height:72px}.wordmark-sign{width:38px;height:38px}.wordmark>span:last-child{font-size:16px}.site-header nav{gap:3px}.site-header nav a,.site-header nav button{padding-inline:9px;font-size:12px}.hero{height:auto;min-height:760px;padding-top:105px}.hero h1 span{font-size:clamp(63px,19vw,92px);-webkit-text-stroke-width:2px}.hero h1 strong{font-size:clamp(82px,25vw,118px);-webkit-text-stroke-width:3px}.hero-inner>p{font-size:16px}.hero-background{object-position:43% center}.control-bar{bottom:20px;width:calc(100% - 30px);justify-content:center}.control-bar span{padding-inline:8px;font-size:9px}.how-to{padding:65px 18px}.how-to ol{grid-template-columns:1fr}.how-to li{min-height:112px}.site-footer{align-items:flex-start;flex-direction:column;gap:6px;padding:24px 18px}}
@media(max-width:480px){.wordmark small{display:none}.site-header{width:calc(100% - 28px)}.site-header nav .nav-action{display:none}.hero{min-height:720px}.hero-kicker{font-size:10px}.hero h1{margin-top:20px}.hero-inner>p{max-width:30ch}.control-bar span:nth-child(3){display:none}.auth-modal{align-items:center;padding:18px}.auth-card{width:min(440px,100%);max-height:calc(100dvh - 36px);padding:25px 20px;border-radius:22px}.modal-brand{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Subway Pay brand refresh: use the favicon consistently and keep controls precise. */
.brand-mark{width:43px;height:43px;display:block;flex:0 0 auto;overflow:visible;transform:rotate(-4deg);filter:drop-shadow(4px 4px 0 rgba(93,40,122,.8))}.brand-mark rect{fill:#102657;stroke:#90e9ff;stroke-width:1.5}.brand-mark .brand-rail{fill:none;stroke:#ffe044;stroke-width:4;stroke-linecap:round}.brand-mark .brand-cross{fill:none;stroke:#ff7138;stroke-width:4;stroke-linecap:round}.brand-mark .brand-dot{fill:#46dcff}.modal-brand .brand-mark{width:39px;height:39px;transform:rotate(-2deg);filter:none}.hero h1{transform:none;font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:900;line-height:.82;letter-spacing:-.09em;text-shadow:none}.hero h1 span{color:#f7f9ff;-webkit-text-stroke:0;text-shadow:0 4px 0 #162b64,0 15px 28px rgba(0,0,25,.48)}.hero h1 strong{position:relative;color:var(--yellow);-webkit-text-stroke:0;text-shadow:0 4px 0 #b95c1a,0 15px 28px rgba(0,0,25,.48)}.hero h1 strong::after{content:"";position:absolute;left:7%;right:5%;bottom:-13px;height:5px;border-radius:999px;background:var(--orange);box-shadow:0 0 18px rgba(255,113,56,.5)}.control-bar b{min-width:29px;height:24px;display:grid;place-items:center;border:1px solid rgba(255,224,68,.45);border-radius:7px;font-size:10px;letter-spacing:.08em}.auth-close{display:grid;place-items:center;padding:0;line-height:0}.auth-close svg{width:18px;height:18px;display:block}.auth-close svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.auth-close:hover{border-color:rgba(70,220,255,.75);background:#203768;color:var(--cyan);filter:none}.auth-close:active{transform:scale(.96)}
@media(max-width:760px){.hero h1 span{font-size:clamp(63px,19vw,92px);-webkit-text-stroke-width:0}.hero h1 strong{font-size:clamp(82px,25vw,118px);-webkit-text-stroke-width:0}.control-bar span{padding-inline:8px;font-size:9px}}

.brand-mark{object-fit:contain;border-radius:12px}

/* Final mobile composition: the real Subway Surfers mark is the hero asset. */
.subway-landing{font-family:"Trebuchet MS",Arial,sans-serif}
.site-header{width:min(1180px,calc(100% - 40px));min-height:78px;align-items:center}
.wordmark{min-width:0;flex:0 1 auto}
.wordmark .brand-mark{width:42px;height:42px;border-radius:10px;transform:none;filter:drop-shadow(3px 3px 0 rgba(20,20,58,.75))}
.wordmark>span:last-child{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:17px;line-height:.95}
.site-header nav{margin-left:auto;flex:0 0 auto}
.site-header nav a,.site-header nav button{min-height:40px;border-radius:11px;background:#0b1738;box-shadow:0 4px 0 rgba(4,9,29,.35);font-family:"Trebuchet MS",Arial,sans-serif;font-size:12px;white-space:nowrap}
.hero{padding:104px 18px 72px}
.hero::before{background:linear-gradient(180deg,rgba(5,12,36,.2),rgba(5,12,36,.08) 42%,rgba(8,18,46,.94) 100%),linear-gradient(90deg,rgba(5,12,36,.35),rgba(5,12,36,.12),rgba(5,12,36,.42))}
.hero::after{background:linear-gradient(180deg,transparent 25%,rgba(4,10,31,.18) 62%,rgba(4,10,31,.62) 100%)}
.hero-inner{width:min(420px,100%);text-shadow:0 3px 10px rgba(0,0,25,.68)}
.hero-kicker{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:11px;letter-spacing:.2em}
.hero h1{width:100%;margin:11px 0 0;display:flex;justify-content:center;line-height:1;transform:none}
.hero-logo{position:relative;width:min(340px,92vw);height:146px;display:block;overflow:hidden;filter:drop-shadow(0 14px 10px rgba(4,8,27,.48))}
.hero-logo img{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;display:block}
.hero-inner>p{max-width:29ch;margin:14px 0 23px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:15px;font-weight:700;line-height:1.42}
.hero-actions{gap:10px}
.play-button{min-width:min(330px,calc(100vw - 54px));min-height:64px;border-radius:15px;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:16px;box-shadow:0 6px 0 #a85b10,0 12px 24px rgba(0,0,30,.38),inset 0 2px 0 rgba(255,255,255,.7)}
.play-button i{width:43px;height:43px;border-radius:11px}
.play-button small{font-family:"Trebuchet MS",Arial,sans-serif}
.login-button{font-family:"Trebuchet MS",Arial,sans-serif}
.speed-line,.control-bar{display:none}
@media(max-width:480px){
  .site-header{width:calc(100% - 32px);min-height:70px}
  .wordmark .brand-mark{width:37px;height:37px}
  .wordmark>span:last-child{font-size:15px}
  .site-header nav a,.site-header nav button{min-height:38px;padding-inline:12px;font-size:12px}
  .hero{min-height:100dvh;height:auto;padding:92px 16px 42px}
  .hero-logo{width:min(318px,92vw);height:146px}
  .hero-logo img{top:0}
  .hero-inner>p{margin-top:12px;margin-bottom:22px}
}

/* Mobile landing: keep the brand as the single visual anchor. */
.control-bar,
.how-to { display: none; }
.hero { min-height: 100dvh; height: auto; }
.hero-inner { transform: translateY(-1vh); }
@media (max-width:760px) {
  .site-header { justify-content: center; width: calc(100% - 28px); }
  .site-header nav { position: absolute; right: 0; }
  .wordmark { margin: 0 auto; }
  .hero { min-height: 100dvh; padding: 96px 18px 44px; }
  .hero-inner { width: min(360px, 100%); transform: none; }
  .hero-inner > p { max-width: 27ch; margin: 18px auto 24px; font-size: 15px; }
  .hero-actions { width: 100%; }
  .play-button { width: min(320px, 100%); }
}
@media (max-width:480px) {
  .hero h1 { margin-top: 14px; }
}

/* Final polish: let the real game logo own the page and keep supporting UI quiet. */
:root{font-family:"Segoe UI",Arial,sans-serif}
.subway-landing{font-family:"Segoe UI",Arial,sans-serif}
.site-header{width:min(1180px,calc(100% - 40px));min-height:76px;justify-content:flex-end;padding:0}
.site-header nav{margin-left:0;gap:0}
.site-header nav .account-button{min-width:118px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 17px;border:1px solid rgba(255,224,68,.72);border-radius:12px;background:#0b1738;color:#fff;box-shadow:0 4px 0 rgba(4,9,29,.42);font-family:"Segoe UI",Arial,sans-serif;font-size:13px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.site-header nav .account-button:hover{border-color:#ffe044;color:#ffe044}
.hero{padding:88px 18px 60px}
.hero-inner{width:min(420px,100%);transform:none;text-shadow:0 3px 12px rgba(0,0,25,.66)}
.hero-kicker{font-family:"Segoe UI",Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.22em}
.hero h1{margin:12px 0 0;transform:none}
.hero-logo{width:min(326px,88vw);height:142px}
.hero-logo img{top:0;left:50%;width:285px;transform:translateX(-50%)}
.hero-inner>p{max-width:31ch;margin:15px 0 23px;font-family:"Segoe UI",Arial,sans-serif;font-size:16px;font-weight:650;line-height:1.4;letter-spacing:-.015em}
.play-button{width:min(330px,calc(100vw - 54px));min-height:66px;font-family:"Segoe UI",Arial,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.01em}
.play-button span{line-height:1.1}
.play-button small{font-family:"Segoe UI",Arial,sans-serif;font-size:9px;font-weight:750;letter-spacing:.08em}
.login-button{font-family:"Segoe UI",Arial,sans-serif;font-size:13px;font-weight:700}
@media(max-width:480px){
  .site-header{width:calc(100% - 28px);min-height:68px}
  .site-header nav .account-button{min-width:116px;min-height:42px}
  .hero{min-height:100dvh;padding:82px 16px 40px}
  .hero-inner{width:min(344px,100%)}
  .hero-logo{width:min(326px,94vw);height:142px}
  .hero-logo img{top:0;left:50%;width:285px}
  .hero-inner>p{max-width:30ch;margin-top:14px;margin-bottom:22px;font-size:15px}
}

/* Keep the original arcade wordmark as the hero, never a generic product headline. */
.hero h1 {
  transform: rotate(-1deg);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 1000;
  line-height: .78;
  letter-spacing: -.075em;
  text-shadow: none;
}
.hero h1 span {
  color: #fff;
  -webkit-text-stroke: 3px #162b64;
  text-shadow: 0 6px 0 #162b64, 0 12px 0 #091737, 0 20px 30px rgba(0,0,25,.6);
}
.hero h1 strong {
  color: var(--yellow);
  -webkit-text-stroke: 4px #d94735;
  text-shadow: 0 7px 0 #d94735, 0 14px 0 #84294b, 0 24px 36px rgba(0,0,25,.65);
}
@media (max-width:760px) {
  .hero h1 span { -webkit-text-stroke-width: 2px; }
  .hero h1 strong { -webkit-text-stroke-width: 3px; }
}