/* The game is controlled on the map, using compass points and grid intersections. */
.grid-frame { position: relative; }
.grid-frame.with-grid { margin-left: 21px; margin-bottom: 23px; }
.grid-rows { position: absolute; top: 0; bottom: 0; left: -20px; width: 15px; font-size: 10px; font-weight: 600; }
.grid-rows span { position: absolute; transform: translateY(-50%); left: 0; }
.grid-columns { position: absolute; left: 0; right: 0; bottom: -21px; height: 14px; font-size: 10px; font-weight: 600; }
.grid-columns span { position: absolute; transform: translateX(-50%); }
.compass-arrow, .candidate-point { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #f7f6eff2; color: #36503e; border: 1px solid #859a75; font-size: 10px; font-weight: 600; padding: 0; z-index: 4; box-shadow: 0 1px 5px #304c3517; }
.compass-arrow::after, .candidate-point::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.compass-arrow:hover, .candidate-point:hover { background: #e2eacb; border-color: var(--green); }
.compass-arrow.selected, .candidate-point.selected { background: var(--green); color: white; border-color: var(--green); box-shadow: 0 0 0 3px #fcfbf5bb; }
.candidate-point { width: 32px; height: 32px; font-size: 12px; border-width: 2px; }
.candidate-point.missed { background: #e9e6dc; color: #9a998b; border-color: #abae9e; text-decoration: line-through; box-shadow: none; }
.candidate-point:disabled { pointer-events: none; }
.map-board { overflow: visible; border-radius: 3px; }
.map-board > img { border-radius: 3px; }
.map-panel .panel-label { min-height: 37px; gap: 8px; font-size: 10px; }
.panel-label strong { font-weight: 500; }
.zoom-map-button { padding: 6px 10px; font-size: 9px; flex-shrink: 0; border-radius: 20px; }
.view-panel { padding-top: 11px; }
.view-panel .panel-label { margin-bottom: 15px; }
.game-layout .view-panel .observation-note { margin-top: 20px; }
.attempt-feedback { margin: 19px 0; padding: 13px 16px; border: 1px solid #d6c7ad; border-radius: 4px; font-size: 12px; color: #8e6c47; background: #f2eddf; }
.submit-row { display: flex; flex-direction: column; max-width: 414px; border: none; margin-top: 14px; padding-top: 0; gap: 11px; align-items: stretch; }
.submit-row .button-primary { width: 100%; padding: 13px; font-size: 13px; }
.submit-row p { order: 1; text-align: center; font-size: 9px; }
.match-layout + .submit-row { max-width: none; flex-direction: row; align-items: center; }
.match-layout + .submit-row .button-primary { width: 220px; }
.match-layout + .submit-row p { order: 0; }
#zoom-dialog { width: min(780px, calc(100vw - 30px)); padding: 22px 31px 24px; max-height: calc(100dvh - 24px); }
.zoom-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; gap: 15px; }
.zoom-heading h2 { font: 500 22px var(--serif); margin: 0; }
#zoom-content .grid-frame { max-width: min(630px, calc(100dvh - 215px)); margin-left: auto; margin-right: auto; }
#zoom-content .with-grid { margin-left: max(21px, calc((100% - min(630px, 100dvh - 215px)) / 2)); }
.zoom-instruction { text-align: center; font-size: 11px; margin: 26px 0 14px; }
#zoom-confirm { display: flex; margin: auto; }
.angle-controls { display: flex; justify-content: center; gap: 7px; margin: 13px 0; }
.angle-button { border: 1px solid #d0d9c1; background: transparent; border-radius: 20px; padding: 5px 12px; font-size: 10px; }
.angle-button.selected { color: white; background: var(--green); border-color: var(--green); }
.match-option-frame { position: relative; }
.match-option-frame .match-option { width: 100%; display: block; }
.option-zoom { position: absolute; bottom: 8px; right: 8px; border: 1px solid #c6d0b9; border-radius: 50%; background: #f7f6efef; width: 27px; height: 27px; font-size: 17px; display: grid; place-items: center; padding: 0; }
.option-zoom:hover { background: #e2eacb; }
.zoom-option { display: block; width: min(630px, 100%, calc(100dvh - 215px)); margin: auto; border: 1px solid #cbd5bb; }
.result-card { margin-top: 25px; }
@media (max-width: 850px) { .game-layout { grid-template-columns: 1fr 1.2fr; gap: 23px; } .submit-row { max-width: 43%; } .view-caption { font-size: 9px; } }
@media (max-width: 600px) { .game-layout { display: flex; flex-direction: column; gap: 22px; } .game-layout .view-panel { order: -1; width: 100%; padding-top: 0; } .game-layout .map-panel { width: 100%; } .view-panel .panel-label { margin-bottom: 8px; } .game-view img { aspect-ratio: 1.76; } .submit-row { max-width: none; } .map-board { max-width: none; max-height: none; } .grid-frame { width: 100%; } .grid-frame.with-grid { width: calc(100% - 21px); } .compass-arrow { width: 31px; height: 31px; font-size: 9px; } .candidate-point { width: 33px; height: 33px; } .attempt-feedback { font-size: 11px; padding: 10px 12px; margin-bottom: 0; } .match-layout + .submit-row { flex-direction: column; align-items: stretch; } .match-layout + .submit-row .button-primary { width: 100%; } .match-layout + .submit-row p { order: 1; } #zoom-dialog { padding: 19px 22px; } #zoom-content .grid-frame { max-width: none; } #zoom-content .with-grid { margin-left: 20px; } .zoom-heading h2 { font-size: 20px; } }