/* Keep the entrance scene at one full viewport and let visitors reach the chart below. */
html:has(.splash-page) { height: auto; min-height: 100%; overflow-y: auto; overscroll-behavior-y: auto; }
body:has(.splash-page) { height: auto; min-height: 100svh; overflow: visible; overscroll-behavior-y: auto; }
.splash-page { height: auto; min-height: 100svh; overflow: visible; }
.traffic-site-footer { display: flow-root; clear: both; width: 100%; position: relative; background: #0b2541; padding: 1px 0; }
body.is-embedded-page > .traffic-site-footer { display: none; }
.traffic, .traffic *, .traffic::before, .traffic::after { box-sizing: border-box; }
.traffic { font-family: "Trebuchet MS",Verdana,Arial,sans-serif; text-align: left; text-shadow: none; letter-spacing: normal; }
.traffic button, .traffic input { box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; font-family: inherit; font-weight: 400; line-height: normal; }
.traffic button { cursor: pointer; width: auto; }
.traffic button:disabled { cursor: default; }
.traffic-jump { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 10px 18px; border: 1px solid #f8cf62; border-radius: 8px; background: #082a49e8; color: #fff4b6; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 15px #001d4255; }
.traffic-jump:hover { background: #174969; }
.traffic-jump:focus-visible,.traffic button:focus-visible,.traffic input:focus-visible,.traffic summary:focus-visible { outline: 3px solid #7cddf5; outline-offset: 3px; }
.traffic [hidden] { display: none !important; }
.traffic .eyebrow { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #f8cf62; }
.traffic { width: calc(100% - 32px); max-width: 1120px; margin: 28px auto 96px; border: 2px solid #b99545; border-radius: 14px; box-shadow: 0 15px 50px #15375655; padding: clamp(18px,3vw,30px); background: #0a2848; color: #fff4b6; }
.traffic-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.traffic-heading h2 { font: 700 clamp(24px,3vw,32px)/1.2 "Trebuchet MS",Verdana,Arial,sans-serif; letter-spacing: -.8px; margin: 0; }
.traffic-heading p:last-child { margin: 9px 0 0; font-size: 12px; color: #bdd4df; line-height: 1.6; }
.traffic-live { padding: 7px 10px; border: 1px solid #3b6177; border-radius: 20px; color: #c5dde8; background: #123956; font-size: 10px; white-space: nowrap; }
.traffic-summary { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; margin: 26px 0; }
.traffic-summary>div { border-left: 2px solid #3b6177; padding-left: 14px; min-width: 0; }
.traffic-summary span { display: block; font-size: 11px; color: #c5dde8; }
.traffic-summary strong { display: block; margin: 6px 0 5px; font: 700 36px/1.15 "Trebuchet MS",Verdana,Arial,sans-serif; letter-spacing: -1px; }
.traffic-summary small { display: block; font-size: 10px; line-height: 1.5; color: #bdd4df; }
.traffic-updated time { display: block; margin: 10px 0 8px; font-size: 12px; line-height: 1.6; }
.traffic-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid #3b6177; }
.traffic button { border: 1px solid #638091; border-radius: 7px; color: #fff4d8; background: #103756; padding: 8px 11px; font-size: 11px; }
.traffic button:hover:not(:disabled) { background: #1b4d6d; }
.traffic button:disabled { opacity: .55; }
.traffic-ranges { display: flex; gap: 4px; margin-right: auto; }
.traffic-ranges button[aria-pressed="true"] { color: #092740; background: #f8cf62; border-color: #f8cf62; }
.traffic-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #c5dde8; }
.traffic-toolbar input { max-width: 150px; min-height: 33px; border: 1px solid #638091; border-radius: 7px; padding: 5px 8px; font-size: 11px; background: #0b2c48; color: #fff4b6; }
.traffic-window { display: flex; align-items: center; gap: 8px; }
.traffic-window p { margin: 0; flex: 1; text-align: center; font-size: 12px; color: #c5dde8; }
.traffic-window button { white-space: nowrap; }
.traffic-instruction { font-size: 10px; line-height: 1.6; color: #bdd4df; margin: 18px 0 8px; }
.traffic-chart { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 7px; }
.traffic-axis { display: flex; flex-direction: column; justify-content: space-between; text-align: right; height: 174px; padding: 5px 0 0; font-size: 10px; color: #bdd4df; }
.traffic-scroll { min-width: 0; overflow-x: auto; padding: 4px 4px 9px; scrollbar-color: #638091 #103756; }
.traffic-bars { display: grid; grid-template-columns: repeat(var(--traffic-days,7),minmax(36px,1fr)); min-width: calc(var(--traffic-days,7)*41px - 5px); column-gap: 5px; padding-top: 6px; background: repeating-linear-gradient(to top,transparent 0,transparent 38px,#3b6177 39px,transparent 40px); background-size: 100% 160px; background-position: top 10px left; background-repeat: no-repeat; }
.traffic-bars .traffic-bar { display: grid; grid-template-rows: 160px 27px; padding: 0; border: 0; border-radius: 5px; background: transparent; min-width: 0; color: #c5dde8; opacity: 1; }
.traffic-bars .traffic-bar:hover:not(:disabled),.traffic-bars .traffic-bar[aria-pressed="true"] { background: #1b4d6d; }
.traffic-bar-track { height: 160px; display: flex; justify-content: center; align-items: end; position: relative; }
.traffic-bar-fill { height: var(--traffic-height,0%); min-height: 3px; width: min(62%,52px); border-radius: 5px 5px 1px 1px; background: #50cbea; border: 1px solid #83e1f6; }
.traffic-bar[aria-pressed="true"] .traffic-bar-fill { background: #f8cf62; border-color: #f8cf62; }
.traffic-bar[data-zero="true"] .traffic-bar-fill { background: #0a2848; border-color: #50cbea; }
.traffic-bar[data-unrecorded="true"] .traffic-bar-fill { background: #486e81; border-color: #486e81; }
.traffic-bar-value { position: absolute; bottom: calc(var(--traffic-height,0%) + 5px); font-size: 10px; line-height: 1; color: #fff4d8; }
.traffic-bar-label { align-self: center; font-size: 9px; white-space: nowrap; }
.traffic-selection { margin: 14px 0 0; padding: 13px 15px; background: #123956; border: 1px solid #3b6177; border-radius: 9px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.traffic-selection strong { display: block; font-size: 12px; font-weight: 600; }
.traffic-selection span { display: block; margin-top: 4px; font-size: 10px; color: #bdd4df; line-height: 1.6; }
.traffic-selection p { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.traffic-note,.traffic-status,.traffic-empty,.traffic-explanation { font-size: 10px; line-height: 1.7; color: #bdd4df; }
.traffic-empty { padding: 24px 10px; text-align: center; }
.traffic-status:empty { display: none; }
.traffic-status { color: #ffe5a2; }
.traffic-note { margin: 16px 0 8px; }
.traffic-explanation summary { cursor: pointer; color: #fff1bf; padding: 4px 0; }
.traffic-explanation p { max-width: 800px; }
@media(max-width:650px) { .traffic-heading { flex-direction: column; gap: 12px; } .traffic-summary { grid-template-columns: 1fr 1fr; gap: 18px; } .traffic-updated { grid-column: 1/-1; } .traffic-updated time { margin: 5px 0; } .traffic-window { flex-wrap: wrap; } .traffic-window p { order: -1; flex-basis: 100%; text-align: left; margin-bottom: 4px; } .traffic-window #traffic-next { margin-left: auto; } .traffic-toolbar { gap: 10px; } .traffic-ranges { width: 100%; } }
@media(max-width:380px) { .traffic-toolbar label { flex-direction: column; align-items: start; gap: 4px; } .traffic-selection { flex-direction: column; align-items: start; gap: 8px; } }

.traffic { color-scheme: dark; }
@media(max-width:650px) { .traffic { width: calc(100% - 20px); margin-top: 18px; } .traffic-jump { bottom: 58px; } }

/* Keep the original game viewport above the shared footer. HUDs travel with it. */
html:has([data-public-traffic-footer]) { --traffic-game-top: 0px; }
html[data-game-world-clock="active"]:has([data-public-traffic-footer]) { --traffic-game-top: var(--game-world-clock-height); }
html:has([data-public-traffic-footer]) :is(body.mmo-reset-body > main, body.has-react-shell.mmo-reset-body > main, body.mmo-battle-body > main, .mmo-reset-stage, .mmo-battle-page) { min-height: calc(100dvh - var(--traffic-game-top)); }
html:has([data-public-traffic-footer]) :is(.mmo-map-page, .mmo-shop-page, .mmo-battle-page) { position: relative; }
html:has([data-public-traffic-footer]) :is(.mmo-map-stage, .mmo-battle-stage) { position: relative; inset: auto; width: 100%; height: calc(100dvh - var(--traffic-game-top)); min-height: 0; }
html:has([data-public-traffic-footer]) .mmo-map-stage .map-avatar-presence-hud { position: absolute; top: 12px; }
html:has([data-public-traffic-footer]) .mmo-map-time-hud { position: absolute; top: 52px; }
html:has([data-public-traffic-footer]) .mmo-map-relationship-grid { position: absolute; }
html:has([data-public-traffic-footer]) .mmo-battle-hud { position: absolute; top: 14px; }
html:has([data-public-traffic-footer]) .mmo-battle-actions { position: absolute; }
@media(max-width:700px) { html:has([data-public-traffic-footer]) .mmo-battle-hud { top: 8px; } }