.runner-game-header { border-bottom: 1px solid #eadfd3; background: #fffaf3; }
.runner-header-inner { width: min(calc(100% - 32px), 1180px); min-height: 104px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.runner-logo { display: flex; align-items: center; gap: 14px; color: var(--game-brown-900); }
.runner-logo-icon { width: 74px; height: 74px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--game-brown-900); border-radius: 50%; background: white; }
.runner-logo-icon img { width: 86px; max-width: none; transform: translateX(-3px); }
.runner-logo-icon .mascot-sprite { width: 86px; flex: 0 0 86px; transform: translateX(-3px); }
.runner-logo strong { display: block; font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1; letter-spacing: -.035em; }
.runner-logo small { display: block; margin-top: 7px; color: var(--game-muted); font-size: .73rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.runner-header-tools { display: flex; align-items: center; gap: 18px; }
.runner-scoreboard { display: flex; overflow: hidden; border: 1px solid #ddcfc0; border-radius: 18px; background: #fffefd; }
.runner-scoreboard > span { min-width: 142px; padding: 11px 20px; text-align: center; }
.runner-scoreboard > span + span { border-left: 1px solid #ddcfc0; }
.runner-scoreboard small { display: block; color: var(--game-muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.runner-scoreboard strong { display: block; margin-top: 2px; color: var(--game-brown-900); font: 900 1.55rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.runner-scoreboard em { display: block; max-width: 130px; margin: 4px auto 0; overflow: hidden; color: var(--game-muted); font-size: .61rem; font-style: normal; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.runner-section { padding: 28px 16px 54px; background: radial-gradient(circle at 12% 10%, rgba(209,138,73,.12), transparent 25%), var(--game-cream); }
.runner-shell { width: min(100%, 980px); margin-inline: auto; }
.runner-icon-button { width: 48px; height: 48px; border: 1px solid #e6ccb0; border-radius: 14px; cursor: pointer; background: white; font-size: 1.2rem; }
.runner-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; min-height: 360px; max-height: 620px; border: 3px solid var(--game-brown-900); border-radius: 27px; background: #b9d8cf; box-shadow: var(--game-shadow); touch-action: manipulation; user-select: none; }
.runner-stage canvas { display: block; width: 100%; height: 100%; outline: 0; }
.runner-hud { position: absolute; z-index: 2; top: 16px; left: 17px; right: 17px; display: flex; justify-content: space-between; pointer-events: none; color: var(--game-brown-900); font-size: clamp(.68rem, 1.5vw, .83rem); font-weight: 900; letter-spacing: .08em; }
.runner-hud span { min-width: 105px; padding: 8px 12px; border-radius: 12px; background: rgba(255,254,253,.88); box-shadow: 0 4px 14px rgba(60,33,21,.1); }
.runner-hud span:last-child { text-align: right; }
.runner-overlay { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: rgba(255,250,242,.76); color: var(--game-brown-900); backdrop-filter: blur(2px); }
.runner-overlay[hidden] { display: none; }
[data-game-over].runner-overlay { inset: 12% 18%; border: 1px solid #d8c3ad; border-radius: 24px; background: rgba(255,250,242,.94); box-shadow: 0 18px 60px rgba(60,33,21,.18); }
[data-game-over].runner-overlay.is-record { border-color: #d68b3f; background: linear-gradient(145deg, rgba(255,250,242,.98), rgba(255,231,190,.98)); box-shadow: 0 18px 70px rgba(197,112,36,.28); }
.runner-overlay h2 { max-width: 630px; margin: 4px 0 8px; font-size: clamp(1.8rem, 5vw, 3.35rem); line-height: 1; letter-spacing: -.045em; }
.runner-overlay p { margin: 5px 0; color: var(--game-muted); }
.runner-eyebrow { font-size: .76rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.runner-dog-badge { width: 185px; height: 182px; display: grid; place-items: center; margin-bottom: -12px; font-size: 1.9rem; transform: rotate(-2deg); }
.runner-dog-badge img { width: 136px; max-width: none; filter: drop-shadow(0 6px 5px rgba(60,33,21,.12)); }
.runner-dog-badge .mascot-sprite { width: 182px; flex: 0 0 182px; filter: drop-shadow(0 6px 5px rgba(60,33,21,.12)); }
.runner-finish-badge { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: var(--game-caramel); font-size: 1.8rem; transform: rotate(-3deg); }
.runner-result-stats { display: grid; grid-template-columns: repeat(2, minmax(115px,1fr)); gap: 8px; width: min(100%, 360px); margin: 10px 0 4px; }
.runner-result-stats span { padding: 8px 10px; border: 1px solid #ead2b8; border-radius: 12px; background: rgba(255,255,255,.62); }
.runner-result-stats small { display: block; color: var(--game-muted); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.runner-result-stats strong { color: var(--game-brown-900); font-size: .9rem; }
.runner-record-gap { min-height: 1.2em; font-size: .82rem; font-weight: 800; }
.runner-record-form { width: min(100%, 390px); margin-top: 8px; }
.runner-record-form label { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 900; }
.runner-record-form > div { display: flex; gap: 7px; }
.runner-record-form input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #cda77f; border-radius: 11px; background: white; color: var(--game-brown-900); font: inherit; }
.runner-record-form .games-button { flex: 0 0 auto; margin: 0; padding: 11px 14px; }
.runner-record-form p { min-height: 1.2em; font-size: .78rem; }
.runner-record-form [hidden] { display: none !important; }
.runner-milestone { position: absolute; z-index: 3; top: 20%; left: 50%; width: max-content; max-width: 80%; padding: 10px 20px; border: 1px solid rgba(210,141,70,.7); border-radius: 999px; background: rgba(255,250,242,.92); color: var(--game-brown-900); text-align: center; box-shadow: 0 12px 35px rgba(86,45,25,.2); transform: translateX(-50%); animation: milestone-pop 2.6s ease both; pointer-events: none; }
.runner-milestone strong,.runner-milestone span { display: block; }
.runner-milestone strong { font-size: 1.05rem; }
.runner-milestone span { margin-top: 2px; font-size: .7rem; font-weight: 800; }
@keyframes milestone-pop { 0% { opacity: 0; transform: translate(-50%,18px) scale(.8); } 14%,72% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-14px) scale(.96); } }
.runner-main-button { margin-top: 18px; background: var(--game-caramel); color: var(--game-brown-950); }
.runner-main-button:hover { background: #e5a05e; }
.runner-overlay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 5px; }
.runner-overlay-actions .games-button { margin-top: 12px; }
.runner-text-link { width: 100%; margin-top: 5px; color: var(--game-brown-700); font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
.runner-record-line { font-size: 1.03rem; }
.runner-share-status { min-height: 1.4em; font-size: .82rem; }
kbd { padding: 3px 7px; border: 1px solid #a98c73; border-bottom-width: 3px; border-radius: 6px; background: rgba(255,255,255,.7); font: inherit; font-size: .75rem; font-weight: 900; }
.runner-live-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.runner-info { padding: 76px 0; background: white; }
.runner-info-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 46px; align-items: start; }
.runner-info h2 { margin: 12px 0 12px; color: var(--game-brown-900); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; }
.runner-info p { color: var(--game-muted); }
.runner-info aside { padding: 26px; border-radius: 22px; background: var(--game-cream); border: 1px solid #ecd6bc; }
.runner-info aside h2 { margin-top: 0; font-size: 1.45rem; }
.runner-info aside a { color: var(--game-brown-700); font-weight: 900; }
.runner-care-note { padding-top: 13px; border-top: 1px solid #e7d1b7; font-size: .9rem; }
@media (max-width: 700px) {
  .runner-header-inner { min-height: 84px; gap: 9px; }
  .runner-logo-icon { width: 54px; height: 54px; }
  .runner-logo-icon img { width: 66px; }
  .runner-logo-icon .mascot-sprite { width: 66px; flex-basis: 66px; }
  .runner-logo strong { font-size: 1.05rem; }
  .runner-logo small { margin-top: 4px; font-size: .53rem; letter-spacing: .08em; }
  .runner-header-tools { gap: 7px; }
  .runner-scoreboard > span { min-width: 70px; padding: 8px 7px; }
  .runner-scoreboard small { font-size: .5rem; }
  .runner-scoreboard strong { font-size: .9rem; letter-spacing: .02em; }
  .runner-scoreboard em { max-width: 62px; font-size: .45rem; }
  .runner-icon-button { width: 39px; height: 39px; border-radius: 12px; font-size: 1rem; }
  .runner-section { padding: 24px 10px 38px; }
  .runner-stage { min-height: 510px; aspect-ratio: 3 / 4; border-radius: 22px; }
  .runner-info-grid { grid-template-columns: 1fr; }
  .runner-overlay { padding: 20px; }
  .runner-overlay h2 { font-size: clamp(1.75rem, 9vw, 2.65rem); }
  .runner-dog-badge { width: 145px; height: 142px; margin-bottom: -10px; }
  .runner-dog-badge .mascot-sprite { width: 142px; flex-basis: 142px; }
  .runner-finish-badge { width: 54px; height: 54px; }
  [data-game-over].runner-overlay { inset: 3% 3%; padding: 14px; overflow-y: auto; }
  [data-game-over].runner-overlay h2 { font-size: 2rem; }
  [data-game-over] .runner-finish-badge { width: 44px; height: 44px; border-radius: 14px; font-size: 1.35rem; }
  [data-game-over] .runner-eyebrow { font-size: .62rem; }
  [data-game-over] .runner-overlay-actions .games-button { margin-top: 6px; }
  .runner-result-stats { gap: 5px; margin-top: 6px; }
  .runner-record-form > div { flex-direction: column; }
  .runner-record-form .games-button { width: 100%; }
}
@media (max-width: 410px) {
  .runner-logo-icon { display: none; }
  .runner-scoreboard > span { min-width: 61px; }
}
[data-theme="night"] .runner-section { background: radial-gradient(circle at 85% 8%, rgba(216,161,106,.1), transparent 25%), #0b111a; }
[data-theme="night"] .runner-logo { color: #f5d8a2; }
[data-theme="night"] .runner-logo-icon { border-color: #d8a16a; background: #111925; box-shadow: 0 0 18px rgba(216,161,106,.18); }
[data-theme="night"] .runner-scoreboard { border-color: #5d4932; background: #101721; box-shadow: 0 0 18px rgba(216,161,106,.08); }
[data-theme="night"] .runner-scoreboard > span + span { border-color: #5d4932; }
[data-theme="night"] .runner-scoreboard small,
[data-theme="night"] .runner-scoreboard strong { color: #f5d8a2; }
[data-theme="night"] .runner-icon-button { border-color: #5d4932; background: #101721; color: #f5d8a2; }
[data-theme="night"] .runner-stage { border-color: #d8a16a; box-shadow: 0 0 30px rgba(216,161,106,.14); }
[data-theme="night"] .runner-hud span { background: rgba(9,16,26,.88); color: #f5d8a2; }
[data-theme="night"] .runner-overlay { background: rgba(7,13,22,.76); color: #f5d8a2; }
[data-theme="night"] .runner-overlay p { color: #c5b394; }
[data-theme="night"] [data-game-over].runner-overlay { border-color: #665136; background: rgba(10,17,27,.95); box-shadow: 0 0 40px rgba(216,161,106,.16); }
[data-theme="night"] [data-game-over].runner-overlay.is-record { border-color: #d8a16a; background: linear-gradient(145deg, rgba(10,17,27,.98), rgba(42,29,20,.98)); }
[data-theme="night"] .runner-result-stats span { border-color: #5d4932; background: rgba(19,28,40,.76); }
[data-theme="night"] .runner-result-stats strong { color: #f5d8a2; }
[data-theme="night"] .runner-record-form input { border-color: #6a5337; background: #111925; color: #f5d8a2; }
[data-theme="night"] .runner-milestone { border-color: #d8a16a; background: rgba(10,17,27,.94); color: #f5d8a2; box-shadow: 0 0 30px rgba(216,161,106,.22); }
[data-theme="night"] kbd { border-color: #d8a16a; background: #111925; color: #f5d8a2; }
[data-theme="night"] .games-button--light { border-color: #6a5337; background: #131c28; color: #f5d8a2; }
[data-theme="night"] .runner-info { background: #0e1621; }
[data-theme="night"] .runner-info aside { border-color: #4d412f; background: #111925; }
[data-theme="night"] .runner-care-note { border-color: #4d412f; }

/* Tela final: ocupa o palco inteiro e não deixa o cenário competir com o resultado. */
[data-game-over].runner-overlay{inset:0;border:0;border-radius:23px;padding:18px 28px;background:radial-gradient(circle at 50% 0,rgba(225,161,95,.2),transparent 38%),#fffaf2;box-shadow:none;backdrop-filter:none;overflow-y:auto}
[data-game-over].runner-overlay.is-record{border:0;background:radial-gradient(circle at 50% 0,rgba(225,161,95,.32),transparent 42%),#fff6e7;box-shadow:none}
[data-game-over] .runner-finish-badge{width:44px;height:44px;border-radius:50%;font-size:1.3rem;transform:none;box-shadow:0 8px 22px rgba(136,73,34,.16)}
[data-game-over] .runner-eyebrow{margin:4px 0 0;font-size:.65rem}
[data-game-over].runner-overlay h2{margin:2px 0 3px;font-size:clamp(2rem,4vw,2.75rem)}
[data-game-over].runner-overlay>p[data-result-message]{margin:2px 0 5px;font-size:.88rem}
[data-game-over] .runner-result-stats{width:min(100%,330px);margin:5px 0 2px}
[data-game-over] .runner-result-stats span{padding:6px 9px}
[data-game-over] .runner-record-gap,[data-game-over] .runner-record-line{min-height:0;margin:2px 0;font-size:.78rem}
[data-game-over] .runner-record-form{margin:4px 0 0}
[data-game-over] .runner-record-form label{margin-bottom:4px;font-size:.74rem}
[data-game-over] .runner-record-form input{padding:9px 12px}
[data-game-over] .runner-record-form .games-button{padding:9px 13px}
[data-game-over] .runner-record-form p{margin:2px 0;min-height:0}
[data-game-over] .runner-overlay-actions{margin-top:3px}
[data-game-over] .runner-overlay-actions .games-button{min-height:42px;margin-top:5px;padding:9px 15px}
[data-game-over] .runner-text-link{width:auto;margin:5px 5px 0;font-size:.78rem}
[data-game-over] .runner-share-status{min-height:0;margin:1px 0;font-size:.72rem}
[data-theme="night"] [data-game-over].runner-overlay,[data-theme="night"] [data-game-over].runner-overlay.is-record{border:0;background:radial-gradient(circle at 50% 0,rgba(216,161,106,.18),transparent 40%),#0a111b;box-shadow:none}
@media(max-width:700px){[data-game-over].runner-overlay{inset:0;padding:16px 14px;border-radius:19px}[data-game-over] .runner-record-form>div{flex-direction:row}[data-game-over] .runner-record-form .games-button{width:auto}}
@media(max-width:430px){[data-game-over] .runner-record-form>div{flex-direction:column}[data-game-over] .runner-record-form .games-button{width:100%}}
.runner-result-art{width:150px;height:128px;display:block;object-fit:contain;margin:-8px 0 -15px;filter:drop-shadow(0 8px 8px rgba(74,39,21,.16));animation:result-arrive .55s cubic-bezier(.2,.8,.2,1) both}
.runner-scoreboard em{font-size:.7rem;font-weight:900;line-height:1.15}
@keyframes result-arrive{from{opacity:0;transform:translateY(12px) scale(.86)}to{opacity:1;transform:none}}
@media(max-width:700px){.runner-result-art{width:118px;height:104px;margin:-5px 0 -12px}.runner-scoreboard em{font-size:.54rem}}
.runner-result-layout{width:min(100%,780px);display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:28px;align-items:center}.runner-result-content{min-width:0;text-align:left}.runner-result-content .runner-result-stats{width:100%}.runner-result-content .runner-overlay-actions{justify-content:flex-start}.runner-result-content .runner-text-link{align-self:center}.runner-result-content .runner-record-form{width:100%}.runner-result-art{width:100%;height:auto;max-height:320px;margin:0;align-self:center}.runner-result-content .runner-eyebrow,.runner-result-content h2,.runner-result-content>p{text-align:left}.runner-result-content .runner-record-line{text-align:left}
@media(max-width:700px){.runner-result-layout{grid-template-columns:150px minmax(0,1fr);gap:14px}.runner-result-art{width:150px;height:180px;max-height:none}.runner-result-content .runner-overlay-actions{gap:5px}.runner-result-content .runner-overlay-actions .games-button{padding:8px 10px}.runner-result-content .runner-text-link{font-size:.7rem}}
@media(max-width:520px){.runner-result-layout{display:flex;flex-direction:column;gap:0}.runner-result-art{width:112px;height:92px;margin:-5px 0 -9px}.runner-result-content{text-align:center}.runner-result-content .runner-eyebrow,.runner-result-content h2,.runner-result-content>p,.runner-result-content .runner-record-line{text-align:center}.runner-result-content .runner-overlay-actions{justify-content:center}}
.runner-result-layout.has-no-medal{width:min(100%,520px);grid-template-columns:minmax(0,1fr)}