.runner-dialog {
  position:fixed;inset:0;margin:auto;padding:0;width:min(1080px,96vw);
  height:min(680px,91dvh);max-width:100%;max-height:100dvh;box-sizing:border-box;
  overflow:hidden;border:3px solid #a7b992;border-radius:27px;background:#c7e2df;
  color:#425844;isolation:isolate;font-family:Nunito,'Segoe UI',system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;
}
.runner-dialog::backdrop{background:#31493880;backdrop-filter:blur(4px)}
.runner-dialog [hidden]{display:none!important}
.runner-track{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
.runner-track:focus-visible{outline:3px solid #9b87b2;outline-offset:-4px}
.runner-hud{
  position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));display:flex;gap:7px;align-items:center;pointer-events:none;
}
.runner-hud button,.runner-label,.runner-distance,.runner-card{pointer-events:auto}
.runner-icon,.runner-play{
  min-height:48px;border:2px solid #b3c09c;border-radius:15px;background:#fff8df;color:#476147;
  font-family:inherit;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #97ad88;
}
.runner-icon{flex:0 0 48px;width:48px;padding:0;line-height:1;font-size:21px;display:grid;place-items:center}
.runner-icon:active,.runner-play:active{transform:translateY(2px);box-shadow:0 1px 0 #97ad88}
.runner-icon:disabled,.runner-play:disabled{opacity:.58;cursor:default}
.runner-label{flex:1;min-width:0}
.runner-label h2{font-size:clamp(15px,3vw,24px);font-weight:850;line-height:1.1;margin:0;color:#48674e;text-shadow:0 1px 0 #f4f3d6}
.runner-distance{
  flex:none;display:grid;place-items:center;min-width:54px;min-height:42px;box-sizing:border-box;
  padding:3px 10px;background:#fff3d6;border:2px solid #d8c79c;border-radius:15px;color:#6b6645;
  font-size:clamp(15px,2.6vw,20px);font-weight:850;font-variant-numeric:tabular-nums;
}
.runner-card{
  position:absolute;top:clamp(76px,16%,118px);left:50%;transform:translateX(-50%);width:max-content;
  max-width:calc(100% - 26px);z-index:1;box-sizing:border-box;display:grid;justify-items:center;gap:8px;
  padding:14px clamp(16px,3vw,30px) 17px;background:#fffaeaf2;border:2px solid #c9cfad;border-radius:24px;
  box-shadow:0 4px 0 #a2b49059,0 8px 24px #81885d16;text-align:center;
}
.runner-card-title{margin:0;color:#526d50;font-size:clamp(18px,3vw,25px);font-weight:850;line-height:1.1}
.runner-note,.runner-notice{margin:0;color:#526b54;font-size:14px;font-weight:650;text-align:center}
.runner-notice:empty{display:none}
.runner-card:has(.pet-picker:not([hidden])){width:min(350px,calc(100% - 26px))}
.runner-play{min-width:150px;padding:4px 16px;background:#e4edc8;font-size:17px}
.runner-actions{display:flex;justify-content:center;align-items:center;gap:8px}
.game-guide-button{position:relative;display:grid;place-items:center;flex:0 0 auto;min-width:48px;min-height:48px;padding:0;border:2px solid #b9abcd;border-radius:15px;background:#f3edf8;box-shadow:0 2px 0 #b4a6bf}
.game-guide-button::before{content:'▶';display:grid;place-items:center;width:26px;height:20px;border-radius:9px;background:#807098;color:#fffdf6;font:700 12px/1 system-ui}
.game-guide-button::after{content:'';position:absolute;top:calc(50% + 8px);left:calc(50% - 8px);border-top:6px solid #807098;border-right:7px solid transparent}
.game-guide-button[hidden]{display:none}
.runner-record{display:grid;gap:2px}
.runner-result-meters{font-size:clamp(32px,6.8vw,46px);line-height:1;color:#697c50;font-variant-numeric:tabular-nums}
.runner-best{font-size:13px;color:#64774f;font-weight:750}
.runner-countdown,.runner-hint{
  position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;text-align:center;
}
.runner-countdown{top:26%;font-weight:900;color:#637e58;font-size:clamp(48px,12vw,84px);line-height:1;text-shadow:0 3px 0 #fff4cc,0 5px 0 #c3cca2}
.runner-hint{bottom:max(14px,env(safe-area-inset-bottom));border-radius:15px;padding:6px 14px;color:#526b4e;background:#fffae3e6;font-size:14px;font-weight:750;white-space:nowrap}
@media(max-width:760px),(max-height:520px){
  .runner-dialog{width:100%;height:100dvh;border:0;border-radius:0;max-width:none}
}
@media(max-height:450px) and (min-width:520px){
  .runner-hud{top:max(6px,env(safe-area-inset-top))}
  .runner-card{top:clamp(61px,18%,76px);gap:4px;padding:8px 18px 11px}
  .runner-note{font-size:12px}.runner-card-title{font-size:17px}
  .runner-hint{bottom:6px}
}
@media(max-width:359px){
  .runner-hud{gap:4px;left:6px;right:6px}
  .runner-label h2{font-size:13px}.runner-distance{min-width:43px;padding-inline:4px}
}