style.css

@font-face{font-family:FonteTerror;src:url('assets/fonts/murder.ttf')}
:root{color-scheme:dark;--blood:#df302e;--text:#e9e6de;--muted:#a9aaa4;--line:#ffffff26;--panel:#0b0d0fe8;--mono:'Courier New',monospace}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#08090a;color:var(--text);font-family:Montserrat,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}[hidden]{display:none!important}button:focus-visible,input:focus-visible{outline:2px solid #f8c883;outline-offset:4px}button:disabled{cursor:default;opacity:.45}.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) contrast(1.1)}.fx-vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#050607d9,transparent 80%),radial-gradient(ellipse at 65% 42%,transparent 20%,#000b 100%)}.fx-noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.045;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#000 3px,#000 4px)}
.game-header{position:fixed;top:26px;left:34px;right:90px;z-index:40;display:flex;align-items:center;justify-content:flex-end;gap:20px;pointer-events:none}.game-header>*{pointer-events:auto}.menu-bottom i{display:inline-block;width:5px;height:5px;background:var(--blood);margin-right:10px;box-shadow:0 0 9px #e32f2f}.btn{border:1px solid var(--line);background:#0e1114cc;color:var(--text);padding:12px 18px;font-size:13px;min-height:44px;border-radius:2px}.btn:hover{border-color:#d24440;background:#341416e8}.btn--blood-primary{background:#781c20db;border-color:#de4540}.btn--blood-primary:hover{background:#a72429}.btn--blood-ghost{background:#0005}.utility{font:10px var(--mono);letter-spacing:1px;min-height:34px;padding:8px 12px}.floating-fullscreen{position:fixed;right:34px;top:26px;z-index:40;font-size:21px;width:38px;min-height:34px;padding:3px}
.overlay{position:fixed;inset:0;z-index:2;display:flex;align-items:center;padding:90px 8vw 76px}.game-menu{width:min(470px,100%);position:relative}.hud-label{font:10px var(--mono);letter-spacing:2px;color:var(--muted)}.logo{display:block;width:min(420px,100%);height:auto;margin:24px 0 6px;filter:drop-shadow(0 6px 24px #000)}.menu-caption{font:10px var(--mono);letter-spacing:5px;color:#a49c96;margin:0 0 32px 5px}.controls{display:grid;gap:8px}.menu-choice{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 20px;min-height:74px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);border-left:3px solid #68615f;background:linear-gradient(90deg,#0a0c10eb,#0a0c1080)}.menu-choice.btn--blood-primary{border-left-color:var(--blood);background:linear-gradient(90deg,#75191de8,#32121595)}.menu-choice:hover,.menu-choice:focus-visible{background:linear-gradient(90deg,#872227e8,#301015a0);border-left-color:#ff6057}.menu-choice>span:nth-child(2){flex:1}.menu-choice strong{font-size:15px;letter-spacing:2px;font-weight:700}.menu-choice small{display:block;font:11px var(--mono);color:#b5aca6;margin-top:8px;line-height:1.5}.menu-arrow{color:#ed564b;font-size:22px}.menu-choice kbd{font:10px var(--mono);color:#b9aaa4}.menu-bottom{position:absolute;left:34px;right:34px;bottom:26px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:16px;font:9px var(--mono);letter-spacing:1.8px;color:#9a9490}.menu-reticle{position:absolute;top:43%;left:73%;width:42px;height:42px;border:1px solid #ffffff17;pointer-events:none}.menu-reticle:before,.menu-reticle:after{content:'';position:absolute;background:#ffffff40}.menu-reticle:before{height:1px;width:12px;left:14px;top:20px}.menu-reticle:after{width:1px;height:12px;left:20px;top:14px}
progress{appearance:none;display:block;width:100%;border:0;height:3px;background:#57444066;margin-top:12px}progress::-webkit-progress-bar{background:#57444066}progress::-webkit-progress-value{background:var(--blood)}progress::-moz-progress-bar{background:var(--blood)}.quiz-title{font-size:clamp(18px,2.3vw,25px);line-height:1.5;font-weight:600}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quiz-options .btn{text-align:left;width:100%;min-height:62px;font-size:14px;border-left:3px solid #726662;background:#121316c9;padding:14px 18px}.quiz-options .btn:hover,.quiz-options .btn:focus-visible{border-left-color:#ff5647;background:#421719dc}.quiz-image{display:block;width:auto;max-width:100%;max-height:200px;object-fit:contain;margin:12px auto;background:white}.option-figure{display:grid;gap:8px}.option-image{width:100%;max-height:130px;object-fit:contain;background:white}.option-caption{font:12px var(--mono)}.answer-feedback{font:12px var(--mono);min-height:17px;margin-top:18px;color:#e9b69b}.status-bar{position:fixed;z-index:25;top:87px;left:50%;transform:translateX(-50%);background:#0a0b0dbb;padding:8px 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;border-top:1px solid #9d403b;font:11px var(--mono);pointer-events:none}.status-bar>.hud-label{grid-column:1/-1;font-size:8px;color:#918480}.status-bar #lives{color:#ed8b7c}.status-bar #score{color:#dad1be}

.modal-backdrop{position:fixed;inset:0;z-index:1000;background:#000c;display:grid;place-items:center;padding:24px;overflow-y:auto}.modal{width:min(100%,600px);max-height:85dvh;overflow-y:auto;background:#0d0f12f5;border:1px solid #705752;border-top:2px solid var(--blood);padding:30px}.modal-title{font-family:var(--mono);font-size:23px;margin:12px 0 16px}.modal-text{font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:24px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:700px){.game-header{top:16px;left:18px;right:66px}.floating-fullscreen{top:16px;right:18px}.utility{font-size:9px}.overlay{padding:80px 7vw 85px}.game-menu{max-width:410px}.logo{width:310px;max-width:100%;margin:20px 0 8px}.menu-caption{font-size:8px;letter-spacing:3px;margin-bottom:22px}.menu-choice{padding:13px 14px;min-height:66px}.menu-choice strong{font-size:12px}.menu-choice small{font-size:10px}.menu-bottom{left:18px;right:18px;bottom:18px;font-size:8px;line-height:1.6}.menu-bottom>span:last-child{display:none}.menu-reticle{display:none}.status-bar{left:18px;right:18px;top:auto;bottom:18px;transform:none;display:flex;align-items:center;justify-content:space-between;font-size:10px;background:#080a0deb}.status-bar>.hud-label{font-size:8px}.quiz-options{grid-template-columns:1fr}.quiz-options .btn{min-height:48px;font-size:13px;padding:11px 13px}.quiz-title{font-size:18px}.quiz-image{max-height:160px}.option-image{max-height:110px}.answer-feedback{margin-top:12px;font-size:10px}.modal{padding:22px}.modal-title{font-size:20px}}
@media(max-height:590px) and (min-width:701px){.overlay{padding-top:68px;padding-bottom:54px}.logo{width:250px;margin:12px 0 0}.menu-caption{margin-bottom:14px}.menu-choice{min-height:56px;padding:8px 14px}.menu-choice small{margin-top:3px}.option-image{max-height:90px}.quiz-image{max-height:110px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important}}
/* Menu inicial compacto: título e ações formam a HUD principal. */
.game-menu{width:min(390px,100%)}
.logo{width:min(350px,100%);margin:0 0 28px}
.menu-choice{min-height:58px;padding:11px 16px}
.menu-choice strong{font-size:13px;letter-spacing:2.2px}
.menu-choice kbd{font-size:9px}
.menu-arrow{font-size:18px}
.menu-bottom{display:none}
@media(max-width:700px){.game-menu{max-width:340px}.logo{width:min(290px,100%);margin-bottom:22px}.menu-choice{min-height:54px;padding:9px 13px}.menu-choice strong{font-size:12px}}
/* Indicadores de sobrevivência: corações e placar em moldura de HUD. */
.status-bar{top:24px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);display:flex;align-items:center;gap:0;padding:0;background:#080a0de8;border:1px solid #ffffff30;border-top:2px solid #a63131;box-shadow:0 7px 26px #0009;min-height:58px;font-family:var(--mono)}
.vitality-widget,.score-widget{display:flex;align-items:center;gap:12px;padding:10px 16px}
.vitality-widget{border-right:1px solid #ffffff24}.status-bar .hud-label{font-size:8px;letter-spacing:1.5px;color:#aaa19a;white-space:nowrap}.life-pips{display:flex;gap:6px}.life-pip{font-family:Arial,sans-serif;font-size:19px;line-height:1;color:#df413d;text-shadow:0 0 9px #c1272780}.life-pip.is-lost{color:#454448;text-shadow:none;opacity:.55}.score-value{font-size:18px;color:#f0dfba;min-width:22px;text-align:right}
@media(max-width:700px){.status-bar{top:auto;left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:max-content;min-height:50px}.vitality-widget,.score-widget{gap:8px;padding:8px 12px}.life-pip{font-size:17px}.score-value{font-size:16px}}
/* Tela de derrota: ver "FIM DE PARTIDA com sprites" no fim do arquivo. */

/* Cronômetro circular com leitura imediata de arcade. */



/* Centraliza o menu de entrada no cenário. */
.overlay{justify-content:center}
.game-menu{margin-inline:auto;text-align:center}
.logo{margin:0 auto 28px}
@media(max-width:700px){.logo{margin:0 auto 22px}}
/* ===== FUGA INFERNAL: corrida da coruja (js/runner-mode.js) ===== */
.runner{position:fixed;inset:0;z-index:12}
.runner-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;cursor:pointer}
.runner-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);margin:0;font:11px var(--mono);letter-spacing:2px;color:#e9e6decc;pointer-events:none;transition:opacity .6s;white-space:nowrap}
.runner-hint.is-hidden{opacity:0}
.runner-question{position:absolute;top:150px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 190px);overflow-y:auto;padding:20px 24px;background:linear-gradient(110deg,#090c0ff2,#0b0c0ee0);border:1px solid #91827b44;border-top:2px solid #94312c;box-shadow:0 12px 70px #0008;animation:runnerPanelIn .35s ease-out}
.runner-question-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.runner-question-head .hud-label{font-size:9px;color:#dd7065;letter-spacing:2px;white-space:nowrap}
.runner-question-head progress{flex:1;height:6px;accent-color:#df302e}
.runner-question .quiz-title{margin:0 0 14px}
.runner-question.is-game-over{top:50%;transform:translate(-50%,-50%);width:min(540px,calc(100% - 32px));padding:0}
@keyframes runnerPanelIn{from{opacity:0;translate:0 -12px}}
@media(max-width:700px){.runner-question{top:110px;padding:14px;max-height:calc(100dvh - 300px)}.runner-hint{bottom:90px;font-size:9px;letter-spacing:1px}}
/* ===== HUD com moldura (hud-frame-3.webp) e corações animados (hearts-sheet.webp, 6x3) ===== */
/* Posições medidas na moldura: VIDAS termina em ~19% e PONTOS em ~64% da largura; divisor em 49,5%. */
#statusBar.status-bar{--hud-y:53%;position:fixed;top:18px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:clamp(300px,calc(100vw - 520px),560px);aspect-ratio:761/104;min-height:0;padding:0;display:block;gap:0;background:url(assets/images/hud-frame-3.webp) center/100% 100% no-repeat;border:0;box-shadow:none;filter:drop-shadow(0 6px 18px #000a);container-type:inline-size}
#statusBar .hud-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#statusBar .vitality-widget,#statusBar .score-widget{position:absolute;top:var(--hud-y);transform:translateY(-50%);display:flex;align-items:center;gap:0;padding:0;border:0}
#statusBar .vitality-widget{left:21.5%;width:26%}
#statusBar .score-widget{left:66.5%;width:26.5%}
#statusBar .life-pips{display:flex;align-items:center;gap:1.2cqw}
#statusBar .life-pip{display:block;height:6.2cqw;aspect-ratio:96/82;font-size:0;color:transparent;text-shadow:none;opacity:1;background:url(assets/images/hearts-sheet.webp) 0 0/600% 300% no-repeat}
#statusBar .life-pip.is-alive{animation:heartBeat .95s steps(6,jump-none) infinite}
#statusBar .life-pip.is-filling{background-position:0 100%;animation:heartFill .7s steps(6,jump-none) both,heartBeat .95s steps(6,jump-none) infinite}
#statusBar .life-pip.is-breaking{animation:heartBreak .7s steps(6,jump-none) forwards}
#statusBar .life-pip.is-lost{background-position:100% 50%;animation:none}
@keyframes heartBeat{from{background-position:0 0}to{background-position:100% 0}}
@keyframes heartBreak{from{background-position:0 50%}to{background-position:100% 50%}}
@keyframes heartFill{from{background-position:0 100%}to{background-position:100% 100%}}
#statusBar .score-value{--digit-h:5.4cqw;display:inline-flex;align-items:center;gap:.1cqw;transform-origin:left center;min-width:0;filter:drop-shadow(0 0 .8cqw #ff3b1f80) drop-shadow(0 1px 0 #000)}
#statusBar .score-value.is-bump{animation:scoreBump .45s ease-out}
@keyframes scoreBump{35%{transform:scale(1.35);filter:brightness(1.35) drop-shadow(0 0 1.6cqw #ff6a2fcc)}}
@media(max-width:700px){#statusBar.status-bar{top:auto;bottom:14px;width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){#statusBar .life-pip.is-alive,#statusBar .life-pip.is-filling{animation:none;background-position:0 0}#statusBar .life-pip.is-breaking{animation:none;background-position:100% 50%}}
/* ===== Botões de som e tela cheia com sprite (sound-btn-sheet.webp / fullscreen-btn-sheet.webp, 3x2) ===== */
/* Colunas: normal · passando o mouse · pressionado. Linhas: estado (aria-pressed). O texto fica só para leitores de tela. */
#soundBtn,#fullscreenBtn{--sx:0%;--sy:100%;padding:0;border:0;border-radius:0;min-height:0;box-shadow:none;font-size:0;color:transparent;text-shadow:none;background-color:transparent;background-repeat:no-repeat;background-size:300% 200%;background-position:var(--sx) var(--sy);filter:drop-shadow(0 4px 10px #000a);transition:filter .15s}
#soundBtn{width:131px;height:46px;background-image:url(assets/images/sound-btn-sheet.webp)}
#fullscreenBtn{top:26px;right:34px;width:55px;height:46px;background-image:url(assets/images/fullscreen-btn-sheet.webp);background-size:300% 200%}
#fullscreenBtn{--sy:0%}
#soundBtn[aria-pressed="true"]{--sy:0%}
#soundBtn[aria-pressed="false"]{--sy:100%}
#fullscreenBtn[aria-pressed="true"]{--sy:100%}
#soundBtn:hover,#soundBtn:focus-visible,#fullscreenBtn:hover,#fullscreenBtn:focus-visible{--sx:50%;filter:drop-shadow(0 0 12px #ff3b1f88)}
#soundBtn:active,#fullscreenBtn:active{--sx:100%}
#soundBtn:focus-visible,#fullscreenBtn:focus-visible{outline:2px solid #ff6a4d;outline-offset:2px}
.game-header{right:99px}
@media(max-width:700px){#soundBtn{width:108px;height:38px}#fullscreenBtn{top:16px;right:18px;width:46px;height:38px}.game-header{top:16px;right:72px}}

/* Intro: a logo stays on screen until the remote media can play. */
.loading-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#08090a;opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.3,0,1,1),visibility .45s}
.loading-logo{display:block;width:min(350px,72vw);height:auto;filter:drop-shadow(0 8px 28px #000);animation:introLogoIn .7s cubic-bezier(.2,0,0,1) both}
body.is-loading .bg-video,body.is-loading .fx-vignette,body.is-loading .fx-noise,body.is-loading .overlay,body.is-loading .game-header,body.is-loading #fullscreenBtn{visibility:hidden}
body.is-ready .loading-intro{opacity:0;visibility:hidden;pointer-events:none}
body.is-ready .bg-video{animation:introVideoIn .55s ease-out both}
@keyframes introLogoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes introVideoIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.loading-logo{animation:none}.loading-intro,body.is-ready .bg-video{transition:none;animation:none}}

/* ===== MOBILE: aviso para deitar o celular (js/orientation.js) ===== */
.rotate-screen{display:none}
@media(pointer:coarse) and (orientation:portrait) and (max-width:600px){
.rotate-screen{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 38%,#4a1215 0,#08090a 70%)}
.rotate-phone{width:54px;height:92px;margin-bottom:18px;border:3px solid #e9e6de;border-radius:10px;box-shadow:0 0 22px #df302e88;animation:rotatePhone 2.2s ease-in-out infinite}
.rotate-title{font:700 20px Montserrat,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#f1e8df}
.rotate-text{font:12px var(--mono);line-height:1.6;color:var(--muted);max-width:260px}
.rotate-screen .btn{margin-top:10px;font:11px var(--mono);letter-spacing:1px}
}
@keyframes rotatePhone{0%,20%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}

/* ===== MOBILE DEITADO: HUD, botões e menu =====
   Celular deitado = tela de toque em paisagem com pouca altura, ou qualquer tela
   deitada com até 500px de altura (simuladores). Desktop não entra aqui.
   HUD separado: VIDAS/PONTOS no canto esquerdo, som e tela cheia no direito. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-height:500px){
.runner,body{--hud-w:clamp(170px,27vw,220px);--q-top:calc(12px + var(--hud-w) * 104 / 761)}
#statusBar.status-bar{top:6px;bottom:auto;left:12px;right:auto;transform:none;width:var(--hud-w)}
.game-header{top:6px;left:auto;right:52px;gap:0}
#soundBtn{width:74px;height:26px}
#fullscreenBtn{top:6px;right:12px;width:31px;height:26px}
.runner-hint{bottom:44px;font-size:9px;letter-spacing:1px}
.overlay{padding:44px 24px 12px}
.game-menu{max-width:340px}
.logo{width:auto;max-width:min(300px,100%);max-height:calc(100dvh - 130px);margin:0 auto 14px}
.menu-choice{min-height:48px;padding:8px 14px}
.menu-choice strong{font-size:12px}
.modal-backdrop{padding:12px}
.modal{padding:16px 20px;max-height:calc(100dvh - 24px)}
.modal-title{font-size:18px;margin:0 0 8px}
.modal-text{font-size:12px;line-height:1.5;margin-bottom:14px}
.modal-actions .btn{min-height:40px;padding:8px 14px}
}

/* ===== MOBILE DEITADO: pergunta ocupa a tela toda abaixo do HUD, sem rolagem ===== */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-height:500px){
.runner-question{top:var(--q-top);bottom:8px;left:8px;right:8px;transform:none;width:auto;height:auto;max-height:none;display:flex;flex-direction:column;overflow-y:auto;padding:10px 14px}
.runner:has(.runner-question:not([hidden])) .runner-hint{opacity:0}
.runner-question-head{gap:10px;margin-bottom:6px}
.runner-question-head .hud-label{font-size:8px;letter-spacing:1.5px}
.runner-question-head progress{height:4px;margin-top:0}
.runner-question .quiz-title{font-size:clamp(14px,4.4dvh,18px);line-height:1.35;margin:0 0 8px}
/* Respostas crescem para preencher o espaço: alvos grandes para o dedo */
.quiz-options{flex:1;min-height:0;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px}
.quiz-options .btn{min-height:40px;font-size:clamp(13px,4dvh,16px);padding:6px 14px}
/* Alternativas com gráfico: quatro lado a lado e imagem limitada à altura que sobra */
.quiz-options:has(.option-figure){grid-template-columns:repeat(4,1fr)}
.quiz-options:has(.option-figure) .btn{padding:6px;min-height:0;display:flex}
.option-figure{gap:4px;width:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto}
.option-image{height:100%;max-height:none;min-height:0;background:none}
.option-caption{font-size:11px}
.quiz-image{max-height:28dvh;margin:6px auto}
.answer-feedback{margin-top:6px;min-height:14px;font-size:10px}
}

/* ===== MOBILE: áreas seguras (notch/câmera) com viewport-fit=cover =====
   O cenário ocupa a tela inteira; HUD e pergunta ficam fora do notch. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-height:500px){
.runner,body{--safe-t:env(safe-area-inset-top,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--q-top:calc(12px + var(--safe-t) + var(--hud-w) * 104 / 761)}
#statusBar.status-bar{top:calc(6px + var(--safe-t));left:calc(12px + var(--safe-l))}
.game-header{top:calc(6px + var(--safe-t));right:calc(52px + var(--safe-r))}
#fullscreenBtn{top:calc(6px + var(--safe-t));right:calc(12px + var(--safe-r))}
.runner-question{left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));bottom:calc(8px + var(--safe-b))}
.overlay{padding-left:calc(24px + var(--safe-l));padding-right:calc(24px + var(--safe-r))}
}
.rotate-screen{padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom))}
/* Estados do controle: sprite 2x2 em assets/images/control.png. */
.quiz-options .quiz-option-key{display:inline-block;margin-right:.45em;font:700 .9em var(--mono);color:#f0ae65;white-space:nowrap}
.quiz-options .quiz-option-content{min-width:0}
.quiz-options:has(.option-figure) .quiz-option-content{flex:1;min-width:0}
.runner-question.is-gamepad-active .quiz-option-key{color:#ffbd70;text-shadow:0 0 8px #ff552c88}
.quiz-options .btn.is-gamepad-selected{border-left-color:#ff5647;background:#421719dc;box-shadow:0 0 14px #ff3b1f55}
.gamepad-status,.gamepad-side-status{background-image:url('assets/images/control.png');background-repeat:no-repeat;background-size:200% 200%;aspect-ratio:2/1;pointer-events:none}
.gamepad-status{position:fixed;z-index:45;top:82px;left:50%;transform:translateX(-50%);width:min(210px,48vw);background-position:0 0}
.gamepad-status.is-connected{background-position:0 100%}
.gamepad-status[hidden],.gamepad-side-status[hidden]{display:none}
.gamepad-status-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gamepad-side-status{--sound-button-width:131px;position:absolute;top:50%;right:calc(var(--sound-button-width) + 10px);width:176px;transform:translateY(-50%);background-position:100% 0}
.gamepad-side-status.is-connected{background-position:100% 100%}
.gamepad-side-status.is-connecting{background-position:100% 14%;animation:gamepadConnecting .22s steps(1,end) infinite alternate}
@keyframes gamepadConnecting{to{opacity:.68}}
body.in-game .gamepad-status,body.in-game .gamepad-side-status{display:none}
@media(max-width:700px){.gamepad-status{top:62px;width:min(178px,52vw)}.gamepad-side-status{--sound-button-width:108px;width:142px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-height:500px){.gamepad-status{top:42px;width:132px}.gamepad-side-status{--sound-button-width:74px;width:116px}}
/* Aberto pela Tela de Início já está em tela cheia: o botão não faz sentido */
body.is-standalone #fullscreenBtn{display:none}
body.is-standalone .game-header{right:calc(12px + env(safe-area-inset-right,0px))}

/* ===== Vídeo de fundo no Safari: sem o botão nativo de play por cima ===== */
.bg-video{pointer-events:none}
.bg-video::-webkit-media-controls,.bg-video::-webkit-media-controls-start-playback-button,.bg-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}

/* ===== Toques no celular: sem seleção azul, sem menu de imagem, sem zoom de toque duplo =====
   Tocar rápido (pular) fazia o navegador selecionar textos/imagens como um "Ctrl+A". */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img,video,canvas{-webkit-user-drag:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}

/* ===== Coração perdendo vida a cada erro na pergunta (hearts-sheet linha 3, de trás para frente) =====
   --drain-x vem de js/hud.js: 60% quase cheio · 40% metade · 20% quase vazio. */
#statusBar .life-pip.is-draining{background-position:var(--drain-x) 100%;animation:heartDrain .45s ease-out}
#statusBar .life-pip.is-draining.is-critical{animation:heartDrain .45s ease-out,heartCritical .7s ease-in-out .45s infinite}
#statusBar .life-pip.is-refilling{animation:heartRefill .45s steps(3,jump-none) both,heartBeat .95s steps(6,jump-none) .45s infinite}
@keyframes heartDrain{30%{transform:scale(.72);filter:brightness(1.8) drop-shadow(0 0 6px #ff2a1a)}}
@keyframes heartCritical{50%{opacity:.5;filter:drop-shadow(0 0 5px #ff2a1a)}}
@keyframes heartRefill{from{background-position:var(--drain-x) 100%}to{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){#statusBar .life-pip.is-draining,#statusBar .life-pip.is-draining.is-critical{animation:none}#statusBar .life-pip.is-refilling{animation:none;background-position:0 0}}

/* ===== FIM DE PARTIDA com sprites (gameover-panel / gameover-buttons / digits-sheet) =====
   Tudo posicionado em cqw sobre o painel de 1619x971 px (1cqw = 16,19 px da arte),
   então o cartão fica igual em qualquer tamanho. Medidas tiradas da própria imagem. */
.runner-question.is-game-over{--go-top:110px;top:calc(var(--go-top) + (100dvh - var(--go-top) - 10px) / 2);left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);display:block;width:min(760px,calc(100% - 32px),calc((100dvh - var(--go-top) - 16px) * 1619 / 971));height:auto;max-height:none;padding:0;overflow:visible;background:none;border:0;box-shadow:none}
.game-over-card{position:relative;width:100%;aspect-ratio:1619/971;background:url(assets/images/gameover-panel.webp) center/100% 100% no-repeat;container-type:inline-size;filter:drop-shadow(0 18px 40px #000d)}
.go-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Motivo: no lugar do título apagado da arte (x 299–1314, y 248–354) */
.game-over-title{position:absolute;left:12%;right:12%;top:15.3cqw;height:6.6cqw;margin:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font:400 6.3cqw/1 Georgia,'Times New Roman',serif;color:#f4e6cf;text-shadow:0 .25cqw 0 #3a1a10,0 .4cqw 1.2cqw #000,0 0 2cqw #ff6a2f33}
/* Pontuação: à direita de "QUESTÕES CERTAS", entre as duas linhas (centro y 489) */
.game-over-result{position:absolute;left:53.5%;top:30.2cqw;transform:translateY(-50%);margin:0;padding:0;border:0}
.go-number{--digit-h:8.6cqw;display:flex;align-items:center;gap:.2cqw;filter:drop-shadow(0 .3cqw .6cqw #000)}
.sprite-digit{display:block;height:var(--digit-h);width:calc(var(--digit-h) * var(--w) / 214);background:url(assets/images/digits-sheet.webp) no-repeat;background-size:calc(var(--digit-h) * 1680 / 214) var(--digit-h);background-position:calc(var(--digit-h) * (-168 * var(--d) - (168 - var(--w)) / 2) / 214) 0}
/* Botões: lado a lado na faixa de baixo (centro y 705) */
.game-over-actions{position:absolute;left:0;right:0;top:39.8cqw;display:flex;justify-content:center;gap:2cqw;margin:0}
.go-btn{width:34.6cqw;aspect-ratio:1200/257.5;padding:0;border:0;border-radius:0;min-height:0;background:url(assets/images/gameover-buttons.webp) 0 0/100% 200% no-repeat;transition:filter .15s,transform .1s;filter:drop-shadow(0 .4cqw .8cqw #000c)}
.go-btn--home{background-position:0 100%}
.go-btn.is-gamepad-selected{filter:brightness(1.3) drop-shadow(0 0 .5cqw #ffd29a) drop-shadow(0 0 1.6cqw #ff3b1f)}
.game-over-control-hint{position:absolute;left:0;right:0;top:49.1cqw;text-align:center;font:700 clamp(7px,1.2cqw,11px)/1.2 var(--mono);letter-spacing:.08em;color:#e7d2bd;text-shadow:0 1px 4px #000;pointer-events:none}
.go-btn:hover,.go-btn:focus-visible{filter:brightness(1.22) drop-shadow(0 0 1.4cqw #ff3b1fb0)}
.go-btn:active{transform:scale(.97)}
/* Foco de teclado = o mesmo brilho do hover, sem retângulo por cima da arte */
.go-btn:focus-visible{outline:none;filter:brightness(1.3) drop-shadow(0 0 .5cqw #ffd29a) drop-shadow(0 0 1.6cqw #ff3b1f)}
.game-over-card{animation:goCardIn .45s cubic-bezier(.2,0,0,1) both}
@keyframes goCardIn{from{opacity:0;transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){.game-over-card{animation:none}}
/* Celular deitado: centraliza abaixo da barra de VIDAS/PONTOS */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-height:500px){
.runner-question.is-game-over{--go-top:var(--q-top)}
}

/* ===== Fundo da partida: game-bg.mp4 aparece com fade só durante o jogo ===== */
.game-video{opacity:0;transition:opacity .6s ease;filter:brightness(.9) contrast(1.08) saturate(1.1);transform:scaleX(-1)}   /* espelhado para o cenário avançar no sentido da corrida */
body.is-ready .game-video{animation:none}
body.in-game .game-video{opacity:1}

/* Telas maiores: mesma faixa da luta do mobile, presa embaixo, para não cobrir a arena.
   Vem antes do bloco mobile, que sobrescreve estas mesmas propriedades no celular deitado. */
@media(min-width:701px){
.runner-question.is-fight-question:not(.is-game-over){top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;right:auto;transform:translateX(-50%);width:min(1100px,calc(100% - 48px));height:auto;max-height:none;overflow:visible;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head head" "title opts" "fb fb";column-gap:24px;align-items:center;padding:10px 18px 12px;background:linear-gradient(0deg,#07090cf0,#090c0fcc);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.runner-question.is-fight-question .runner-question-head{grid-area:head;margin-bottom:6px}
.runner-question.is-fight-question .quiz-title{grid-area:title;margin:0;white-space:nowrap;font-size:clamp(22px,2.2vw,30px)}
.runner-question.is-fight-question .quiz-options{grid-area:opts;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.runner-question.is-fight-question .quiz-options .btn{min-width:0;min-height:52px;padding:10px 12px;text-align:center;white-space:nowrap;font-size:16px}
.runner-question.is-fight-question .answer-feedback{grid-area:fb;margin-top:6px}
.runner-question.is-fight-question .answer-feedback:empty{display:none}
}

/* Mobile deitado: deixa a arena livre e mantém a pergunta da luta embaixo. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px),(orientation:landscape) and (max-height:500px){
.runner-question.is-fight-question:not(.is-game-over){top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));transform:none;width:auto;height:auto;max-height:40dvh;display:flex;flex-direction:column;overflow-y:auto;padding:8px 12px}
.runner-question.is-fight-question .runner-question-head{margin-bottom:4px}
.runner-question.is-fight-question .quiz-title{font-size:clamp(15px,4dvh,19px);line-height:1.2;margin:0 0 6px}
.runner-question.is-fight-question .quiz-options{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:6px}
.runner-question.is-fight-question .quiz-options .btn{min-width:0;min-height:38px;padding:5px 6px;text-align:center;white-space:nowrap;font-size:clamp(12px,3.5dvh,15px)}
.runner-question.is-fight-question .answer-feedback{margin-top:4px;min-height:12px}
.runner-question.is-near-catch{opacity:0;pointer-events:none;transition:opacity .16s ease,visibility .16s ease;visibility:hidden}
/* Uma faixa só: conta à esquerda, respostas à direita. Menos altura = mais arena visível. */
.runner-question.is-fight-question:not(.is-game-over){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head head" "title opts" "fb fb";column-gap:14px;align-items:center;max-height:none;overflow:visible;padding:6px 10px 8px;background:linear-gradient(0deg,#07090cf0,#090c0fcc);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.runner-question.is-fight-question .runner-question-head{grid-area:head;margin-bottom:2px}
.runner-question.is-fight-question .quiz-title{grid-area:title;margin:0;white-space:nowrap;font-size:clamp(18px,6dvh,26px)}
.runner-question.is-fight-question .quiz-options{grid-area:opts}
.runner-question.is-fight-question .quiz-options .btn{min-height:44px;font-size:clamp(14px,4.4dvh,18px)}
.runner-question.is-fight-question .answer-feedback{grid-area:fb}
.runner-question.is-fight-question .answer-feedback:empty{display:none}
}

/* Botão de início desenhado: start-button.webp tem os dois estados empilhados
   (em cima normal, embaixo aceso). Um sprite só, então o hover troca sem piscar. */
.start-button{display:block;width:100%;aspect-ratio:1200/190;padding:0;border:0;background:url('assets/images/start-button.webp') 0 0/100% 200% no-repeat;filter:drop-shadow(0 6px 18px #000a);transition:filter .15s,transform .1s}
.start-button:hover,.start-button:focus-visible{background-position:0 100%;filter:drop-shadow(0 0 16px #ff3b1f66) drop-shadow(0 6px 18px #000a)}
.start-button:focus-visible{outline:none}
.start-button:active{transform:scale(.985)}
.start-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Seleção pelo controle no menu inicial */
#soundBtn.is-gamepad-selected,#fullscreenBtn.is-gamepad-selected{--sx:50%;filter:drop-shadow(0 0 12px #ff3b1f88);outline:2px solid #ff6a4d;outline-offset:2px}
.start-button.is-gamepad-selected{background-position:0 100%;filter:drop-shadow(0 0 16px #ff3b1f66) drop-shadow(0 6px 18px #000a)}
.rotate-screen .btn.is-gamepad-selected,.modal .btn.is-gamepad-selected{outline:2px solid #ff6a4d;outline-offset:2px}

/* Telas grandes (TV, monitor de sala): a pergunta do checkpoint cresce junto com a tela
   para dar leitura de longe. Escala em vw/vh, então vale tanto para 1080p quanto 4K. */
@media(min-width:1600px) and (min-height:860px){
.runner-question:not(.is-fight-question):not(.is-game-over){top:clamp(150px,15vh,320px);width:62vw;max-height:calc(100dvh - clamp(150px,15vh,320px) - 40px);padding:clamp(20px,2vw,80px) clamp(24px,2.4vw,96px);border-top-width:clamp(2px,.2vw,6px)}
.runner-question:not(.is-fight-question) .runner-question-head{gap:clamp(14px,1vw,40px);margin-bottom:clamp(12px,1.4vh,40px)}
.runner-question:not(.is-fight-question) .runner-question-head .hud-label{font-size:clamp(9px,.8vw,30px)}
.runner-question:not(.is-fight-question) .runner-question-head progress{height:clamp(6px,.7vh,20px)}
.runner-question:not(.is-fight-question) .quiz-title{font-size:clamp(25px,2.6vw,110px);margin-bottom:clamp(14px,2vh,60px)}
.runner-question:not(.is-fight-question) .quiz-options{gap:clamp(10px,1vw,40px)}
.runner-question:not(.is-fight-question) .quiz-options .btn{min-height:clamp(62px,8vh,220px);font-size:clamp(14px,1.6vw,68px);padding:clamp(14px,1.2vw,48px) clamp(18px,1.5vw,60px);border-left-width:clamp(3px,.3vw,10px)}
.runner-question:not(.is-fight-question) .quiz-image{max-height:clamp(200px,24vh,700px)}
.runner-question:not(.is-fight-question) .option-image{max-height:clamp(130px,15vh,440px)}
.runner-question:not(.is-fight-question) .option-caption{font-size:clamp(12px,1vw,40px)}
.runner-question:not(.is-fight-question) .answer-feedback{font-size:clamp(12px,1.1vw,44px);min-height:1.4em;margin-top:clamp(18px,2vh,60px)}
}