/* Region map puzzle */
.rg-map { width: 100%; height: auto; display: block; touch-action: manipulation; }
.rg-play.drag .rg-map { touch-action: none; }
.rg-preview .rg-map { max-width: 35rem; margin: 0 auto; }
.rg-map .rg-r, .rg-print .rg-r { fill: #fff; stroke: #4A5570; stroke-width: 1.2; fill-rule: evenodd; vector-effect: non-scaling-stroke; }
.rg-map .rg-r.placed { fill: var(--c, #CDEFC9); }
.rg-play.find .rg-r:not(.placed) { cursor: pointer; }
.rg-play.find .rg-r:not(.placed):hover { fill: #F3F6FB; }
.rg-map .rg-r:focus-visible { outline: none; stroke: var(--sky); stroke-width: 4; }
.rg-map .rg-r.nope { fill: #E7EAF0; }
.rg-map .rg-r.hint { fill: #FFF6D8; stroke: var(--ink); stroke-width: 3; }
.rg-frame { fill: transparent; stroke: #8A93A8; stroke-dasharray: 6 4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rg-play.find .rg-frame { cursor: pointer; }
.rg-label { font: 700 .9375rem/1 var(--f-b), var(--cjk); text-anchor: middle; dominant-baseline: middle; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: .1875rem; pointer-events: none; }
.rg-label.just { font-size: 1.25rem; }
.rg-tray { fill: #F6F8FC; stroke: var(--edge); stroke-dasharray: 8 6; }
.rg-piece { cursor: grab; }
.rg-piece.lift { cursor: grabbing; }
.rg-piece .rg-hit { fill: transparent; }
.rg-piece .rg-p { fill: #CDE3FF; stroke: var(--ink); stroke-width: 2; fill-rule: evenodd; vector-effect: non-scaling-stroke; }
.rg-piece.lift .rg-p { fill: #FFF6D8; }
.rg-play { width: min(100%, 45rem); }
.ho .rg-play .rg-map { max-height: calc(100dvh - 10.625rem); width: auto; max-width: 100%; margin: 0 auto; }
.rg-ask { margin: 0; text-align: center; font: 600 clamp(1.125rem, 4.5vw, 1.625rem)/1.3 var(--f-b), var(--cjk); padding: .5rem; }
.rg-ask b { font-family: var(--f-d), var(--cjk); }
.rg-source { font-size: .8125rem; }
/* paper */
.rg-sheet { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4mm; align-items: start; }
.rg-print { width: 100%; height: auto; max-height: calc(var(--ph, 297mm) - 100mm); }
.rg-print .rg-r { stroke: #1D2433; stroke-width: .9; }
.rg-num { font-weight: 700; font-family: var(--f-m); text-anchor: middle; dominant-baseline: middle; fill: #1D2433; paint-order: stroke; stroke: #fff; stroke-width: .1875rem; }
.rg-list { columns: 2; column-gap: 3mm; font-size: 9pt; margin: 0; padding-left: 6mm; }
.rg-list li { break-inside: avoid; margin-bottom: 1.6mm; }
.rg-list .blank { display: inline-block; width: 85%; border-bottom: .3mm solid #1D2433; height: 4.5mm; }
.keyview .rg-list { columns: 3; }

.ho .rg-play.zoom { width: auto; }
.ho .rg-play.zoom .rg-map { width: 200vw; max-width: none; max-height: none; }
.ho:has(.rg-play.zoom) .ho-main { place-items: start; }
.rg-zoom { justify-self: center; }