/* 360×640 기준 화면을 기기에 맞춰 같은 배율로 확대·축소합니다. */
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:var(--aqua); }
#app { position:fixed; left:var(--game-left,0px); top:var(--game-top,0px); width:360px; height:640px; transform:scale(var(--game-scale,1)); transform-origin:top left; max-width:none; min-height:0; margin:0; overflow:auto; padding-top:40px; }


#app .screen { min-height:calc(var(--game-height) - 40px); padding-top:0; }
#app .title-screen { padding:0 6% 16px; }
.title-logo { margin-top:32px; width:360px; max-width:none; flex-shrink:0; }
.start-area { margin:20px 0 12px; }
.start-caption { font-size:20px; }
.stage-header { padding:6px 12px; gap:6px; }
.stage-header h1 { font-size:18px; }
#collection-count { margin:2px auto; }
.stage-instruction { margin:4px 8px 8px; font-size:11px; min-height:16px; }
.stage-grid { width:min(100%,calc((var(--game-height) - 200px) * .8)); padding:0 12px 6px; gap:12px 10px; }
.page-nav { margin:6px 0; }
#app .game-screen { flex-direction:column; gap:0; padding:0 0 6px; }
#app .game-top { width:100%; height:auto; min-height:0; }
.game-header { padding:4px 10px; gap:6px; }
.game-header > div { flex:1; min-width:0; }
.game-header .icon { flex-shrink:0; }
.game-header .eyebrow { font-size:13px; margin:0 0 3px; }
.game-header h1 { font-size:20px; line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.reference-area { padding:2px 10px 8px; gap:12px; }
.reference-frame { width:calc(var(--game-height) * .17); max-width:46%; padding:7px; }
.play-info { padding:3px 12px 8px; font-size:16px; gap:8px; }
#board-size { font-size:15px; opacity:1; white-space:nowrap; }
#move-label, #puzzle-info { height:34px; line-height:20px; padding:5px 9px; flex-shrink:0; }
#board-colors { display:flex; align-items:center; gap:4px; }
.board-color { width:13px; height:13px; border:1px solid rgb(18 47 50 / 60%); border-radius:50%; flex:none; }
#move-label img { width:20px; height:20px; }
#app .game-screen .board-wrap { width:calc(100% - 24px); max-width:none; flex-shrink:0; }
#app .game-screen .play-hint { display:block; margin:10px 12px 0; font-size:14px; line-height:1.4; }
#app .game-screen .play-hint[hidden] { display:none; }
dialog { width:calc(var(--game-width) - 24px); max-width:380px; max-height:calc(var(--game-height) - 24px); padding:16px 12px; }
.collection-picture { width:min(100%,220px,calc(var(--game-height) * .30)); margin:10px auto; }
dialog h2 { margin:0 0 12px; }
dialog .picture-name { margin:8px 0; font-size:16px; }
.sound-options { gap:12px; min-height:min(170px,calc(var(--game-height) * .25)); flex-wrap:wrap; }
.modal-actions { margin-top:12px; }


/* 모든 기기에서 360×640 기준 배치를 같은 배율로 표시합니다. */
dialog { position:fixed; inset:auto; left:var(--game-center-x,50%); top:var(--game-center-y,50%); margin:0; translate:-50% -50%; scale:var(--game-scale,1); transform-origin:center; }
dialog h2 { font-size:21px; }
#app { box-shadow:none; }