/* X2 속도 표시와 게임 화면 가장자리 무지개 */
#speed-toggle{min-width:42px;height:36px;padding:0 9px;border:1px solid #ffffff70;border-radius:12px;background:#16394acc;color:white;font:800 14px system-ui;cursor:pointer;touch-action:none}
#speed-toggle[aria-pressed="true"]{background:#40568c;color:#fff;border-color:#b5d5ff;box-shadow:0 0 12px #b6aaff66}
#speed-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mobile-playing #speed-toggle{width:48px;height:44px;flex:0 0 48px;padding:0;font-size:16px}
.speed-glow{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s}
.double-speed .speed-glow{opacity:1}
.speed-glow::before,.speed-glow::after {
  content:"";position:absolute;left:-10%;width:120%;height:50px;
  background:linear-gradient(90deg,#ff3d72,#ffad32,#fff05a,#38ed9a,#37bfff,#9562ff,#ff59c7,#ffad32);
  background-size:220% 100%;filter:blur(5px) saturate(1.5);opacity:.88;
  mask-image:linear-gradient(#000 0%,#000b 35%,transparent 100%);
  animation:rainbow-flow 5s ease-in-out infinite alternate;
}
.speed-glow::before{top:-5px}
.speed-glow::after{bottom:-5px;transform:rotate(180deg);animation-delay:-2.5s}
@keyframes rainbow-flow{from{background-position:0% 50%;translate:-2% 0}to{background-position:100% 50%;translate:2% 0}}
@media(prefers-reduced-motion:reduce){.speed-glow::before,.speed-glow::after{animation:none}}
/* 대기/플레이 동일 크기, 700px 경계에서 폭이 튀지 않는 레이아웃 */
body:not(.mobile-playing) #game,
body:not(.mobile-playing) #game:has(#overlay:not(.hidden)){
 width:min(100%,864px);height:auto;min-height:var(--game-panel-min-height,360px);aspect-ratio:1.8 / 1;margin-inline:auto;
}
body:not(.mobile-playing) #overlay,
body:not(.mobile-playing) #overlay:not(.hidden){
 position:absolute;inset:0;min-height:0;padding:12px;overflow:visible;
}
body:not(.mobile-playing) #overlay .panel{max-height:none;overflow:visible;margin-block:auto;flex-shrink:0}

.popup.perfect-popup{color:#ffd54a;font-size:30px;font-weight:900;white-space:nowrap;-webkit-text-stroke:.5px #714600;text-shadow:0 2px 3px #49300a,0 0 10px #ffbd4580;z-index:8}
/* 재시작/일시정지 패널은 HUD, Perfect, X2 효과보다 위에 표시합니다. */
#overlay{z-index:40;background:#09273b55;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#game:has(#overlay:not(.hidden)) #world,
#game:has(#exit-dialog[open]) #world{filter:blur(2px)}
#game:has(#overlay:not(.hidden)) .hud,
#game:has(#exit-dialog[open]) .hud{filter:blur(2px);pointer-events:none}
#exit-dialog::backdrop{background:#09273b55;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#result-exit{display:block;width:min(100%,250px);min-height:44px;margin:10px auto 0;border:1px solid #a7bfd0;border-radius:24px;background:#eef5fa;color:#17466a;font-size:15px;font-weight:700;cursor:pointer}
#result-exit[hidden]{display:none}
#result-exit:focus-visible{outline:3px solid #0068b7;outline-offset:2px}
/* 모바일 길게 누르기 메뉴와 이미지 드래그 차단: 게임 영역에만 적용 */
#game,#game *{
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 user-select:none;
}
#game img{-webkit-user-drag:none}
/* 모바일 가로 화면의 결과 패널은 버튼까지 한 화면 안에 표시합니다. */
.mobile-playing #overlay .panel{width:min(90%,520px);padding:12px 18px;overflow:visible;max-height:none}
.mobile-playing #overlay .panel>.eyebrow,
.mobile-playing #overlay .panel>.browser-guide{display:none}
.mobile-playing #overlay .panel h2{font-size:22px;line-height:1.2;margin:4px 0 8px}
.mobile-playing #overlay .panel p{font-size:12px;line-height:1.4;margin:6px 0}
.mobile-playing #overlay .panel .start-notice{font-size:10px;padding:6px;margin:6px 0 10px}
.mobile-playing #overlay .panel .primary{min-height:40px;padding:8px 16px;font-size:15px}
.mobile-playing #overlay .panel:has(#result-exit:not([hidden])) .primary,
.mobile-playing #result-exit:not([hidden]){display:inline-block;vertical-align:middle;width:calc(50% - 8px);min-height:40px;margin:0 2px}