.btn-game { position: absolute; z-index: 2; left: 42.447916667%; bottom: 4.315789474%; width: 17.1875%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.btn-game:focus-visible { outline: 3px solid #006982; outline-offset: 5px; border-radius: 50px; }
html.game-open { overflow: hidden; }
#game-modal { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #d6e5e3; overflow: hidden; }
#game-modal::backdrop { background: rgba(0, 25, 35, .7); }
.game-stage { position: relative; width: 100%; height: 100%; background: url('../images/page/game_bg.png') center / cover no-repeat; }
.game-stage img { display: block; width: 100%; height: auto; }
.game-question { position: absolute; inset: 0; z-index: 2; overflow-y: auto; }
.game-stage .game-map { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain; opacity: 1; pointer-events: none; }
.game-stage.map-faded .game-map { opacity: .4; transition: opacity 1000ms ease; }
.game-question[hidden] { display: none; }
.game-question:not([hidden]) { animation: game-fade-in 1000ms ease-out both; }
@keyframes game-fade-in { from { opacity: 0; } to { opacity: 1; } }
.game-stage { container-type: inline-size; }
.game-stage [hidden] { display: none !important; }
.game-q1 { position: absolute; top: 10%; left: 25.2%; width: 49.6%; height: 80%; box-sizing: border-box; padding: clamp(16px, 3dvh, 32px) clamp(20px, 3.8cqw, 64px); border: 3px solid white; border-radius: 24px; background: #3e98c7; color: #fff; text-align: center; font-weight: 700; display: flex; flex-direction: column; justify-content: flex-start; justify-content: safe center; gap: 16px; overflow-y: auto; }
.game-q1 > * { flex-shrink: 0; }
.game-question-number { margin: 0; font-size: clamp(36px, 5dvh, 56px); line-height: 1.2; }
.game-q1 h2 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid white; font-size: clamp(18px, 2.6dvh, 24px); line-height: 1.5; }
.game-answer-list { list-style: none; margin: 0 auto; padding: 0; text-align: left; font-size: clamp(22px, 3.4dvh, 30px); line-height: 1.5; }
.game-answer-list label { display: flex; align-items: center; gap: .5em; cursor: pointer; }
.game-answer-list input[type="radio"] { appearance: auto; flex: 0 0 auto; width: .65em; height: .65em; margin: 0; font-size: inherit; accent-color: #ffeb32; cursor: pointer; }
.game-answer-list input[type="radio"]:focus-visible { outline: 2px solid #ffeb32; outline-offset: 4px; }
.game-answer-list strong, .game-answer-result { color: #ffeb32; }
.game-answer-explanation p { margin: 0; font-size: clamp(16px, 2.2dvh, 18px); line-height: 1.5; }
.game-answer-explanation .game-answer-result { margin-bottom: 10px; font-size: clamp(22px, 3dvh, 28px); }
@media (max-width: 767px) {
  .game-stage { background-image: url('../images/page/game_bg_m.png'); }
  .game-q1 { position: relative; top: auto; left: auto; width: 90%; height: auto; min-height: 0; margin: 60px auto 24px; justify-content: flex-start; gap: 16px; padding: 22px 18px; border: 3px solid white; border-radius: 20px; overflow-y: visible; }
  .game-question-number { font-size: 40px; }
  .game-q1 h2 { padding-bottom: 12px; font-size: 18px; }
  .game-answer-list { font-size: 22px; line-height: 1.6; }
  .game-answer-explanation p { font-size: 16px; }
  .game-answer-explanation .game-answer-result { margin-bottom: 10px; font-size: 23px; }
}
.game-close { position: absolute; right: 12px; top: 12px; z-index: 4; width: 40px; height: 40px; padding: 0; border: 2px solid white; border-radius: 50%; background: #003d50; color: white; font-size: 30px; line-height: 32px; cursor: pointer; }
.game-close:focus-visible { outline: 3px solid #ffdf36; outline-offset: 3px; }