/* css/layout.css — 3열 레이아웃(260 / 가운데 / 280), 900px·520px 반응형, 터치 */
#app{display:flex; justify-content:center;}
#screen{width:min(1280px,100%);}
#game{display:grid; grid-template-columns:260px minmax(0,1fr) 280px; gap:10px; align-items:start;}
.col{display:flex; flex-direction:column; gap:10px; min-width:0;}
.stage{position:relative; aspect-ratio:16/9; border:2px solid var(--gold); border-radius:4px; overflow:hidden; background:#2a0c1c;
  box-shadow:inset 0 0 0 2px var(--red3), inset 0 0 0 3px var(--gold-dk);}
.st-bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.st-hero{position:absolute; left:50%; bottom:1%; height:94%; transform:translateX(-50%); z-index:3; pointer-events:none;}
.st-hero svg,.st-hero canvas{height:100%; width:auto; display:block; filter:drop-shadow(0 4px 5px rgba(0,0,0,.5));}
.st-hero canvas{image-rendering:pixelated; image-rendering:crisp-edges;}
.st-over{position:absolute; left:0; right:0; top:8%; text-align:center; z-index:6; pointer-events:none;}
.scap{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:rgba(26,6,16,.9); border:2px solid var(--gold);
  color:var(--gold-lt); padding:5px 16px; border-radius:4px; font-size:13px; white-space:nowrap; z-index:7;}

/* 데스크톱 3열: 오른쪽 위 프로필 이름을 가리지 않게 BGM 조절은 오른쪽 아래로 */
@media(min-width:901px){ .bgm-ctrl{top:auto; bottom:8px;} }
@media(max-width:900px){
  #game{grid-template-columns:1fr; max-width:640px; margin:0 auto;}
  #game > .col.center{order:0;} #game > .col.left{order:1;} #game > .col.right{order:2;}
  #statBox details{margin-top:4px;}
}
@media(max-width:520px){
  body{padding:6px;}
  .menu-grid{grid-template-columns:repeat(3,1fr) !important;}
  .bgm-ctrl{top:4px; right:4px; padding:2px 8px;}
  .bgm-ctrl input[type=range]{width:56px;}
  .datebox .big{font-size:34px !important;}
  .modal-box{padding:10px !important;}
}
@media(hover:none){ .mi,.pm-btn,.li,.tab{min-height:36px;} }