/* PULO DA CAVERNA — corrida lateral, uma fase, sprites animadas, sem SQL. */
#enter-runner-cave{
  position:absolute;z-index:10;left:55%;bottom:11%;
  transform:translateX(-50%);min-height:54px;
  padding:11px 20px;border:3px solid #785126;border-radius:15px;
  background:linear-gradient(180deg,#ffe5a4,#e9a64d);
  color:#3d2918;font-weight:900;font-size:clamp(13px,1.5vw,19px);
  white-space:nowrap;box-shadow:0 5px 0 #624226,0 12px 24px #0006;
  animation:cave-enter-pulse 2s ease-in-out infinite;
}
#enter-runner-cave:hover{filter:brightness(1.08)}
#enter-runner-cave span{margin-left:8px}
#enter-runner-cave:focus-visible{outline:3px solid #c9ffdd;outline-offset:4px}
@keyframes cave-enter-pulse{50%{box-shadow:0 5px 0 #624226,0 12px 35px #fbdc8c9c}}
.runner-dialog{
  margin:0;padding:0;width:100vw;max-width:none;height:100vh;height:100dvh;
  max-height:none;overflow:hidden;background:#0b1622;border:0;border-radius:0;color:#f5f2e8;
}
.runner-dialog::backdrop{background:#080d16ed}
.runner-dialog *{box-sizing:border-box}
.runner-shell{
  min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;
  display:flex;flex-direction:column;background:#0e1b29;
}
.runner-topbar{
  min-height:67px;height:67px;padding:10px clamp(12px,2.7vw,34px);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-bottom:1px solid #a4cfbf30;
  background:linear-gradient(90deg,#182e35,#142331);
  position:relative;z-index:15;
}
.runner-brand{display:flex;align-items:center;gap:11px;min-width:0}
.runner-brand-mark{font-size:30px}
.runner-kicker{display:block;color:#a7deca;font-size:9px;font-weight:900;letter-spacing:.16em}
.runner-brand h2{margin:3px 0 0;color:#fff1cb;font-size:clamp(17px,2vw,23px);line-height:1.1}
.runner-exit{
  min-height:39px;padding:9px 15px;border-radius:11px;border:1px solid #b6d4d04f;
  background:#344d57;color:#fff7e3;font-size:13px;font-weight:800;
}
.runner-exit:hover{background:#486672}
.runner-arena{
  flex:1;min-height:0;position:relative;isolation:isolate;overflow:hidden;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:#162837;cursor:pointer;
}
#runner-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}
.runner-character{
  position:absolute;z-index:4;pointer-events:none;
  transform-origin:center bottom;
  filter:drop-shadow(0 4px 2px #09172088);
  will-change:top;
}
.runner-dog-sprite{
  display:block;width:100%;height:100%;
  background-image:url('assets/dogs-stages.webp');
  background-size:300% 330%;
  background-position:0% 0%;
  background-repeat:no-repeat;
  transform:scaleX(-1);
  transform-origin:center bottom;
}
.runner-dog-sprite[data-coat="branco"]{background-position-x:50%}
.runner-dog-sprite[data-coat="preto"]{background-position-x:100%}
.runner-dog-sprite[data-age="jovem"]{background-position-y:43.48%}
.runner-dog-sprite[data-age="adulto"]{background-size:300% 253.85%;background-position-y:100%}
.runner-dog-sprite[data-golden="true"]{filter:drop-shadow(0 0 8px #ffe7a168)}
.runner-character.is-running .runner-dog-sprite.walk-ready{
  background-size:var(--run-atlas-size,400% 237.037037%);
  background-position:0% var(--run-atlas-y1,10.810811%);
  animation:runner-real-steps .76s steps(1,end) infinite;
}
.runner-character.is-jumping .runner-dog-sprite.walk-ready{animation-play-state:paused}
.runner-character[data-phase="ready"] .runner-dog-sprite.walk-ready,
.runner-character[data-phase="paused"] .runner-dog-sprite.walk-ready,
.runner-character[data-phase="over"] .runner-dog-sprite.walk-ready{animation-play-state:paused}
@keyframes runner-real-steps{
  0%{background-position:0% var(--run-atlas-y1)}
  12.5%{background-position:33.333333% var(--run-atlas-y1)}
  25%{background-position:66.666667% var(--run-atlas-y1)}
  37.5%{background-position:100% var(--run-atlas-y1)}
  50%{background-position:0% var(--run-atlas-y2)}
  62.5%{background-position:33.333333% var(--run-atlas-y2)}
  75%{background-position:66.666667% var(--run-atlas-y2)}
  87.5%{background-position:100% var(--run-atlas-y2)}
  100%{background-position:0% var(--run-atlas-y1)}
}
.runner-hud{
  position:absolute;z-index:6;inset:12px 13px auto;display:flex;gap:9px;
  align-items:flex-start;pointer-events:none;
}
.runner-score-box{
  min-width:105px;padding:9px 13px;
  display:flex;flex-direction:column;gap:2px;
  border:1px solid #b2ddca63;border-radius:13px;
  background:#0c2232d9;box-shadow:0 4px 14px #0a1b2491;
}
.runner-score-box span{color:#b5dece;font-size:9px;font-weight:950;letter-spacing:.07em}
.runner-score-box strong{color:#ffe4a4;font-size:clamp(22px,3vw,30px);line-height:1.2;font-weight:950;font-variant-numeric:tabular-nums}
.runner-level-label{margin:auto;background:#0b2333ae;color:#f2e4b9;font-size:10px;letter-spacing:.1em;font-weight:900;padding:10px;border-radius:99px}
.runner-pause{
  pointer-events:auto;width:45px;height:44px;margin-left:0;
  border:1px solid #ffffff6a;border-radius:12px;background:#143a47dd;
  color:white;font-size:23px;font-weight:900;
}
.runner-overlay{
  position:absolute;inset:0;z-index:9;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:linear-gradient(180deg,#06152055,#061420ba);
}
.runner-overlay[hidden],.runner-hud[hidden],.runner-mobile-controls[hidden]{display:none!important}
.runner-intro{pointer-events:none;align-items:flex-start;background:linear-gradient(180deg,#14243318,#08142185)}
.runner-intro-copy{margin:13vh auto 0;text-align:center;text-shadow:0 2px 18px #000c}
.runner-intro-copy h3{color:#fff3d2;font-size:clamp(24px,4vw,42px);margin:12px 0 8px}
.runner-intro-copy p{color:#dfeadd;margin:0;font-size:clamp(13px,1.5vw,17px)}
.runner-panel{
  width:min(100%,520px);max-height:100%;overflow-y:auto;
  padding:clamp(18px,3.5vw,32px);
  background:linear-gradient(150deg,#2b414bea,#152832f5);
  border:1px solid #a2d6bf80;border-radius:23px;
  box-shadow:0 20px 65px #040d19b9,0 0 40px #62ccaa19;
  text-align:center;overscroll-behavior:contain;
}
.runner-panel h3{margin:16px 0 9px;color:#fff5da;font-size:clamp(26px,4vw,37px);line-height:1.08}
.runner-panel p{margin:8px auto 18px;font-size:14px;line-height:1.5;color:#dae8e1}
.runner-chip{
  display:inline-block;background:#446752a8;color:#ffebad;border-radius:99px;
  padding:7px 12px;font-size:10px;letter-spacing:.12em;font-weight:950;
}
.runner-instructions{
  display:flex;flex-direction:column;gap:8px;
  margin:18px 0;color:#e4f5e9;text-align:left;font-size:12px;
}
.runner-instructions span{background:#ffffff11;padding:12px;border-radius:10px}
.runner-primary{
  min-height:50px;padding:13px 24px;cursor:pointer;
  border:2px solid #ffe8b6;border-radius:13px;
  background:linear-gradient(#ffe4a4,#f4ae58);color:#3f2d19;
  font-size:16px;font-weight:950;box-shadow:0 4px 0 #a87a3b;
}
.runner-primary:hover{filter:brightness(1.06)}
.runner-primary:active{transform:translateY(2px);box-shadow:0 2px 0 #a87a3b}
.runner-secondary{
  min-height:49px;padding:12px 15px;
  background:#385965;color:#eef8f2;border:1px solid #b7d8d0;
  border-radius:12px;font-size:13px;font-weight:800;
}
.runner-results{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0}
.runner-results>div{
  display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:13px;
  background:#e5f8ec16;border:1px solid #ffffff2c;
}
.runner-results>div span{font-size:10px;color:#afd8c6;font-weight:900}
.runner-results>div strong{font-size:27px;color:#ffe1a5;font-variant-numeric:tabular-nums}
.runner-ranking{
  padding:13px 17px;margin-bottom:17px;
  border:1px solid #ffffff18;background:#0f2631c4;border-radius:13px;
  text-align:left;
}
.runner-ranking h4{font-size:14px;color:#ffefca;margin:2px 0 9px}
.runner-ranking h4 small{font-size:11px;color:#bcd3ce;font-weight:500}
.runner-ranking ol{margin:0;padding-left:20px;max-height:100px;overflow-y:auto}
.runner-ranking li{color:#deeee8;font-size:12px;line-height:1.8}
.runner-ranking li strong{float:right;color:#ffe3a5;font-variant-numeric:tabular-nums}
.runner-finish-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.runner-mobile-controls{
  position:absolute;z-index:7;bottom:clamp(13px,3vh,29px);left:0;right:0;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.runner-mobile-controls button{
  pointer-events:auto;touch-action:manipulation;
  min-width:145px;min-height:62px;padding:11px 20px;
  border:2px solid #fff5be;border-radius:18px;
  background:#e4aa57d9;color:#392816;font-size:19px;font-weight:1000;
  box-shadow:0 5px 18px #0007;backdrop-filter:blur(4px);
}
.runner-mobile-controls button:active{transform:scale(.97);background:#ffce80}
.runner-footnote{
  min-height:28px;flex:none;display:grid;place-items:center;
  text-align:center;padding:4px;background:#091723;color:#b1c9be;font-size:10px;
}
.runner-dialog button:focus-visible{outline:3px solid #d1ffed;outline-offset:4px}
@media(max-width:700px){
  #enter-runner-cave{left:55%;bottom:8%;min-height:44px;padding:8px 12px;font-size:12px}
  .runner-topbar{min-height:57px;height:57px;padding:7px 11px}
  .runner-brand{gap:6px}
  .runner-brand-mark{font-size:23px}
  .runner-kicker{font-size:8px;letter-spacing:.08em}
  .runner-brand h2{font-size:15px}
  .runner-exit{padding:8px;font-size:12px}
  .runner-hud{inset:8px 8px auto;gap:6px}
  .runner-score-box{min-width:0;padding:7px 10px}
  .runner-score-box span{font-size:8px}
  .runner-score-box strong{font-size:21px}
  .runner-level-label{display:none}
  .runner-pause{margin-left:auto;min-height:42px}
  .runner-overlay{padding:12px}
  .runner-panel{padding:18px 15px;border-radius:17px}
  .runner-panel h3{font-size:28px}
  .runner-instructions{gap:6px;margin:11px 0}
  .runner-instructions span{padding:9px}
  .runner-mobile-controls{bottom:12px}
  .runner-mobile-controls button{min-height:57px;min-width:132px}
  .runner-footnote{min-height:23px;font-size:8px}
}
@media(max-height:560px){
  .runner-topbar{min-height:45px;height:45px}
  .runner-footnote{display:none}
  .runner-panel{padding:11px 20px}
  .runner-panel h3{font-size:23px;margin:8px 0}
  .runner-panel p{margin:4px 0 8px}
  .runner-instructions{margin:7px 0}
  .runner-instructions span{padding:5px}
  .runner-results{margin:6px 0}
  .runner-ranking{padding:6px 14px;margin-bottom:7px}
  .runner-ranking ol{max-height:60px}
  .runner-mobile-controls button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){#enter-runner-cave{animation:none}.runner-character .runner-dog-sprite.walk-ready{animation-duration:1.05s}}

/* Status do ranking: sempre indicar se a gravação foi online ou só local. */
.runner-network-status{
  font-size:12px;
  color:#cce8d8;
  background:#12374799;
  border:1px solid #8cbcac68;
  border-radius:10px;
  padding:9px 12px;
  margin:10px 0 15px;
  line-height:1.45;
}
.runner-primary:disabled{opacity:.7;cursor:wait}
.runner-ranking h4 small{overflow-wrap:anywhere}
@media(max-width:700px){
  .runner-network-status{font-size:11px;margin:8px 0 12px;padding:7px 9px}
}