/* Keep rapid game controls from triggering mobile double-tap zoom or text selection.
   Pinch zoom and text editing remain available. */
@media (any-pointer: coarse) {
  html, body { touch-action: manipulation; }
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, [contenteditable]:not([contenteditable="false"]) {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  }
}

/* A compact, consistently placed exit tab, above canvas and in-game menus. */
#gamenow-exit-launcher {
  position: fixed; inset: auto max(8px, env(safe-area-inset-right)) 46% auto;
  width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent;
  z-index: 2147483000; overflow: visible; color-scheme: dark;
}
#gamenow-exit-button {
  display: block; min-height: 44px; max-width: 132px; padding: 8px 12px;
  border: 1px solid #96a8ba; border-radius: 12px; background: #172333ee; color: #fff;
  font: 700 13px/1.3 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 3px 12px #0005; pointer-events: auto; white-space: normal;
}
#gamenow-exit-button:hover { background: #2c4058; border-color: #fff; }
#gamenow-exit-dialog {
  box-sizing: border-box; position: fixed; inset: 0; width: min(430px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow-y: auto;
  border: 1px solid #65788d; border-radius: 20px; background: #142032; color: #f4f7fb;
  font: 16px/1.6 system-ui, sans-serif; box-shadow: 0 20px 80px #0008; color-scheme: dark;
  z-index: 2147483647; text-align: left; overscroll-behavior: contain;
}
#gamenow-exit-dialog:not([open]) { display: none; }
#gamenow-exit-dialog::backdrop { background: #000a; }
#gamenow-exit-dialog h2 { margin: 0 0 12px; font: 800 24px/1.3 system-ui, sans-serif; color: #fff; }
#gamenow-exit-dialog p { margin: 10px 0; color: #e0e8f3; }
#gamenow-exit-dialog .gamenow-exit-note { color: #ffd18c; }
#gamenow-exit-dialog .gamenow-exit-account { color: #b6c8da; font-size: 13px; }
#gamenow-exit-status:empty { display: none; }
#gamenow-exit-dialog .gamenow-exit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
#gamenow-exit-dialog button {
  box-sizing: border-box; flex: 1 1 140px; min-height: 48px; padding: 10px 14px;
  border: 1px solid #899caf; border-radius: 12px; background: #2c415a; color: #fff;
  font: 700 15px/1.4 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; white-space: normal;
}
#gamenow-exit-dialog #gamenow-exit-confirm { background: #b73447; border-color: #ed8290; }
#gamenow-exit-dialog button:disabled { opacity: .65; cursor: wait; }
#gamenow-exit-dialog button:focus-visible, #gamenow-exit-button:focus-visible { outline: 3px solid #ffdc8a; outline-offset: 3px; }
@media (max-width: 480px) { #gamenow-exit-dialog { padding: 20px; } #gamenow-exit-button { padding-inline: 10px; max-width: 110px; } }

/* Only a small handle remains while playing on a phone or tablet. */
#gamenow-mobile-menu-launcher {
  display: none; position: fixed; inset: 50% max(0px, env(safe-area-inset-right)) auto auto;
  margin: 0; padding: 0; border: 0; width: auto; height: auto; overflow: visible;
  background: transparent; z-index: 2147483000;
}
#gamenow-mobile-menu-button {
  display: block; width: 44px; min-height: 48px; padding: 0; border: 1px solid #96a8ba;
  border-radius: 10px 0 0 10px; background: #172333c9; color: #fff;
  font: 700 20px/1 system-ui, sans-serif; touch-action: manipulation; cursor: pointer;
}
/* 손가락 기준(44px)을 지키되, 쉬는 동안에는 옅게 두어 게임 화면을 덜 가린다. */
#gamenow-mobile-menu-button { opacity: .72; transition: opacity .15s; }
#gamenow-mobile-menu-button:hover, #gamenow-mobile-menu-button:focus-visible, #gamenow-mobile-menu-button:active { opacity: 1; }
#gamenow-mobile-menu-button:focus-visible { outline: 3px solid #ffdc8a; outline-offset: 2px; }
/* 2026-10-15 점검: 폭 44px 손잡이가 오른쪽 가장자리의 게임 단추(골프 '나가기', 대시 JUMP 등)를 가렸다.
   폭을 24px 로 줄이고 높이를 늘려 누를 수 있는 넓이(24×64, WCAG 2.5.8 최소 24px)는 지키며 화면 안쪽으로 덜 나오게 한다. */
#gamenow-mobile-menu-button { width: 24px; min-height: 64px; border-right: 0; border-radius: 9px 0 0 9px; font-size: 15px; }
body.gamenow-mobile-mode #gamenow-mobile-menu-launcher { display: block; }
body.gamenow-mobile-mode:not(.gamenow-mobile-expanded) #gamenow-guide-launcher,
body.gamenow-mobile-mode:not(.gamenow-mobile-expanded) #gamenow-exit-launcher { display: none !important; }
body.gamenow-mobile-expanded #gamenow-mobile-menu-launcher { display: none !important; }

/* 모든 게임 공통 소리 끄기(gamenow-exit.js gamenowAudio). 종료 단추 바로 아래 — 위에는 조작법 단추가 있다. */
#gamenow-sound-button {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: block; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid #96a8ba; border-radius: 12px; background: #172333ee; color: #fff;
  font: 20px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 3px 12px #0005; pointer-events: auto;
}
#gamenow-sound-button:hover { background: #2c4058; border-color: #fff; }
#gamenow-sound-button[aria-pressed="true"] { border-color: #ffb36b; }
#gamenow-sound-button:focus-visible { outline: 3px solid #ffdc8a; outline-offset: 3px; }

/* 효과 설정(gamenow-exit.js gamenowFeedback) — 소리 단추 바로 아래. */
#gamenow-fx-button {
  position: absolute; top: calc(100% + 60px); right: 0;
  display: block; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid #96a8ba; border-radius: 12px; background: #172333ee; color: #fff;
  font: 20px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 3px 12px #0005; pointer-events: auto;
}
/* 종료 단추가 화면 아래에 붙은 게임 — 위나 왼쪽으로 쌓는다(gamenow-exit.js placeStack). */
#gamenow-exit-launcher[data-stack="up"] #gamenow-sound-button { top: auto; bottom: calc(100% + 8px); }
#gamenow-exit-launcher[data-stack="up"] #gamenow-fx-button { top: auto; bottom: calc(100% + 60px); }
#gamenow-exit-launcher[data-stack="left"] #gamenow-sound-button { top: 0; right: calc(100% + 8px); }
#gamenow-exit-launcher[data-stack="left"] #gamenow-fx-button { top: 0; right: calc(100% + 60px); }
#gamenow-fx-button:hover { background: #2c4058; border-color: #fff; }
#gamenow-fx-button:focus-visible { outline: 3px solid #ffdc8a; outline-offset: 3px; }
#gamenow-fx-dialog {
  box-sizing: border-box; position: fixed; inset: 0; width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); margin: auto; padding: 22px; overflow-y: auto;
  border: 1px solid #65788d; border-radius: 20px; background: #142032; color: #f4f7fb;
  font: 16px/1.5 system-ui, sans-serif; box-shadow: 0 20px 80px #0008; color-scheme: dark;
  z-index: 2147483647; text-align: left; overscroll-behavior: contain;
}
#gamenow-fx-dialog:not([open]) { display: none; }
#gamenow-fx-dialog::backdrop { background: #000a; }
#gamenow-fx-dialog h2 { margin: 0 0 6px; font: 800 22px/1.3 system-ui, sans-serif; color: #fff; }
#gamenow-fx-dialog .gamenow-fx-note { margin: 0 0 12px; color: #b6c8da; font-size: 13px; }
#gamenow-fx-dialog .gamenow-fx-row {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 2px 10px;
  min-height: 48px; padding: 6px 0; border-top: 1px solid #ffffff1f; cursor: pointer;
}
#gamenow-fx-dialog .gamenow-fx-row input { width: 22px; height: 22px; margin: 0; accent-color: #ffdc8a; }
#gamenow-fx-dialog .gamenow-fx-row small { grid-column: 2; color: #b6c8da; font-size: 13px; }
#gamenow-fx-dialog .gamenow-fx-select { grid-template-columns: auto minmax(0, 1fr); }
/* 긴 선택지(es "Seguir el ajuste del dispositivo")가 칸을 밀어 창 밖으로 나가지 않게 */
#gamenow-fx-dialog .gamenow-fx-select select { min-width: 0; max-width: 100%; }
@media (max-width: 359px) { #gamenow-fx-dialog .gamenow-fx-select { grid-template-columns: minmax(0, 1fr); } }
#gamenow-fx-dialog .gamenow-fx-select select {
  min-height: 44px; padding: 6px 10px; border: 1px solid #899caf; border-radius: 10px;
  background: #2c415a; color: #fff; font: 15px/1.3 system-ui, sans-serif;
}
#gamenow-fx-dialog .gamenow-fx-select small { grid-column: 1 / -1; }
#gamenow-fx-dialog .gamenow-fx-row:has(input:disabled) { cursor: default; opacity: .7; }
#gamenow-fx-close {
  display: block; width: 100%; min-height: 48px; margin-top: 14px; padding: 10px 14px;
  border: 1px solid #899caf; border-radius: 12px; background: #2c415a; color: #fff;
  font: 700 15px/1.4 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
#gamenow-fx-dialog :focus-visible { outline: 3px solid #ffdc8a; outline-offset: 2px; }

/* 색 외 안내(GameNowFeedback.cue) — 모양 글자와 테두리 모양으로 구분한다. 색은 덧붙임일 뿐이다. */
#gamenow-cue-layer {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  pointer-events: none; z-index: 2147482000; color-scheme: dark;
}
#gamenow-cue-live { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gamenow-cue {
  position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
  border: 2px solid #fff; border-radius: 999px; background: #0b1220e6; color: #fff;
  font: 800 16px/1.2 system-ui, sans-serif; box-sizing: border-box; max-width: calc(100vw - 16px); white-space: normal; overflow-wrap: anywhere; text-shadow: 0 1px 2px #000;
  animation: gamenow-cue-rise var(--gamenow-cue-ms, 900ms) ease-out forwards;
}
.gamenow-cue-glyph {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #0b1220; font-size: 15px; text-shadow: none;
}
.gamenow-cue-ok { border-color: #8df0b0; }
.gamenow-cue-miss { border-style: dashed; border-color: #ffb0a8; }
.gamenow-cue-blocked { border-style: double; border-width: 4px; border-color: #ffd08a; }
.gamenow-cue-best { border-color: #ffe27a; }
.gamenow-cue-blocked .gamenow-cue-glyph, .gamenow-cue-warn .gamenow-cue-glyph { border-radius: 4px; }
.gamenow-cue-still { animation-name: gamenow-cue-fade; }
@keyframes gamenow-cue-rise {
  0% { opacity: 0; transform: translate(-50%, -30%); }
  15% { opacity: 1; transform: translate(-50%, -50%); }
  75% { opacity: 1; transform: translate(-50%, -60%); }
  100% { opacity: 0; transform: translate(-50%, -85%); }
}
@keyframes gamenow-cue-fade { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 결과 카드(GameNowFeedback.result) — 게임 결과 화면의 글자색을 따른다. */
.gamenow-fb-card {
  box-sizing: border-box; display: grid; gap: 8px; width: 100%; margin: 12px 0 0; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: 12px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit; font: 14px/1.5 system-ui, sans-serif; text-align: left;
}
.gamenow-fb-row { display: grid; grid-template-columns: 1.4em auto 1fr; gap: 4px 8px; align-items: baseline; }
.gamenow-fb-glyph { font-weight: 800; text-align: center; }
.gamenow-fb-row strong { font-weight: 800; white-space: nowrap; }
.gamenow-fb-text { min-width: 0; overflow-wrap: anywhere; }
.gamenow-fb-practice {
  grid-column: 2 / -1; justify-self: start; min-height: 44px; padding: 8px 14px;
  border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit;
  font: 700 14px/1.3 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
.gamenow-fb-practice:nth-child(3) { grid-column: 3; }
.gamenow-fb-practice:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* 다음 게임(GameNowFeedback.next, U05) — 결과 카드 아래 보조 링크. 강조는 게임의 '다시 하기' 하나로 두고 이것은 옅게. */
.gamenow-fb-next {
  box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline;
  width: 100%; min-height: 44px; margin: 8px 0 0; padding: 10px 14px; border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 12px; color: inherit; font: 14px/1.4 system-ui, sans-serif; text-align: left; text-decoration: none; touch-action: manipulation;
}
.gamenow-fb-next-label { grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 700; opacity: .75; white-space: nowrap; }
.gamenow-fb-next strong { min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.gamenow-fb-next-reason { min-width: 0; font-size: 13px; opacity: .8; overflow-wrap: anywhere; }
.gamenow-fb-next:hover strong { text-decoration: underline; }
.gamenow-fb-next:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }