/*
 * Canonical portrait composition.
 * Design canvas: 1080 x 1920 (9:16). The whole canvas scales as one unit in
 * browsers while the editor keeps its separate desktop workspace.
 */
:root {
  --portrait-design-width: 1080px;
  --portrait-design-height: 1920px;
  --portrait-inline: clamp(12px, 4.45cqw, 48px);
  --portrait-block: clamp(10px, 1.65cqh, 32px);
}

body:not([data-scene="editor"]) .app-shell {
  width:min(100vw,calc(var(--app-height,100dvh) * .5625),var(--portrait-design-width));
  height:min(var(--app-height,100dvh),calc(100vw * 1.7777778),var(--portrait-design-height));
  min-width:0;
  min-height:0;
  aspect-ratio:9 / 16;
}

body:not([data-scene="editor"]) .scene {
  width:100%;
  height:100%;
  min-height:0;
  max-width:none;
}

/* Title: artwork, logo, copy and one primary action stay on a single canvas. */
#titleScene {
  display:grid;
  padding:max(var(--portrait-block),env(safe-area-inset-top)) var(--portrait-inline) max(var(--portrait-block),env(safe-area-inset-bottom));
  grid-template-rows:minmax(0,1fr) auto;
  align-content:stretch;
}
#titleScene .title-content {
  width:100%;
  min-height:0;
  max-height:none;
  grid-row:1;
  align-self:center;
}
#titleScene h1 {
  width:min(86cqw,900px);
  margin-bottom:clamp(22px,3.1cqh,60px);
  padding:clamp(24px,3.2cqh,62px) clamp(18px,4cqw,44px);
  font-size:clamp(58px,14.2cqw,148px);
}
#titleScene .title-copy {
  max-width:min(76cqw,720px);
  margin-bottom:clamp(28px,4.2cqh,80px);
  font-size:clamp(13px,2.1cqw,22px);
}
#titleScene #startButton {
  width:min(76cqw,420px);
  min-height:clamp(60px,7.4cqh,116px);
  font-size:clamp(18px,3cqw,30px);
}
#titleScene .title-footer {
  position:static;
  grid-row:2;
  align-self:end;
  justify-self:center;
}

/* Level select: header, progress, then one full card in a bounded swipe area. */
#levelScene {
  display:grid;
  padding:max(var(--portrait-block),env(safe-area-inset-top)) var(--portrait-inline) max(var(--portrait-block),env(safe-area-inset-bottom));
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
}
#levelScene .scene-header {
  position:relative;
  top:auto;
  min-height:clamp(54px,7.4cqh,142px);
  margin:0 0 clamp(10px,1.25cqh,24px);
  grid-template-columns:clamp(48px,10.8cqw,116px) minmax(0,1fr) clamp(48px,10.8cqw,116px);
  background:transparent;
}
#levelScene .scene-header h2 { font-size:clamp(25px,7.2cqw,76px); }
#levelScene .scene-header .eyebrow { font-size:clamp(8px,1.65cqw,18px); }
#levelScene .icon-button {
  width:clamp(48px,10.8cqw,116px);
  min-width:0;
  min-height:clamp(48px,10.8cqw,116px);
  border-radius:clamp(15px,3cqw,32px);
}
#levelScene .progress-panel {
  position:relative;
  top:auto;
  width:100%;
  min-height:clamp(72px,10.8cqh,208px);
  margin:0 0 clamp(10px,1.6cqh,30px);
  padding:clamp(11px,2cqh,38px) clamp(14px,3.2cqw,35px);
  gap:clamp(8px,1.5cqh,28px);
  border-radius:clamp(18px,4cqw,42px);
}
#levelScene .level-grid {
  width:calc(100% + 2 * var(--portrait-inline));
  min-height:0;
  margin-inline:calc(-1 * var(--portrait-inline));
  padding:clamp(8px,1.2cqh,22px) var(--portrait-inline) max(20px,env(safe-area-inset-bottom));
  gap:clamp(14px,3.4cqw,37px);
  scroll-padding-inline:var(--portrait-inline);
}
#levelScene .level-card {
  flex:0 0 calc(100% - 2 * var(--portrait-inline));
  min-height:0;
  height:min(118cqw,65cqh,1260px);
  aspect-ratio:auto;
  border-radius:clamp(22px,5cqw,54px);
}
#levelScene .level-silhouette {
  position:absolute;
  top:24%;
  right:auto;
  left:50%;
  width:min(52cqw,520px);
  margin:0;
  transform:translateX(-50%);
}

/* Game: status > answer > board > controls, matching global mobile puzzles. */
#gameScene {
  display:grid;
  padding:max(var(--portrait-block),env(safe-area-inset-top)) var(--portrait-inline) max(var(--portrait-block),env(safe-area-inset-bottom));
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
#gameScene .game-header {
  width:100%;
  min-height:clamp(54px,6.5cqh,124px);
  margin:0 0 clamp(8px,1.2cqh,23px);
  gap:clamp(5px,1.45cqw,16px);
}
#gameScene .game-level-nav,
#gameScene .move-counter,
#gameScene .coin-counter,
#gameScene .settings-button { min-height:clamp(52px,6.1cqh,118px); }
#gameScene .game-layout {
  display:grid;
  width:100%;
  min-height:0;
  margin:0;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  grid-auto-flow:row;
  align-content:space-between;
  justify-items:center;
  gap:clamp(8px,1.35cqh,26px);
}
#gameScene .target-card,
#gameScene.is-target-open .target-card {
  width:100%;
  min-height:clamp(82px,12.8cqh,246px);
  max-height:246px;
  margin:0;
  padding:clamp(8px,1.5cqh,28px) clamp(10px,3cqw,32px);
  grid-template-columns:minmax(72px,20.5cqw) minmax(54px,13cqw);
  justify-content:center;
  gap:clamp(12px,3cqw,32px);
}
#gameScene .target-card > .mini-board,
#gameScene .target-preview-wrap { width:clamp(68px,19.4cqw,210px); }
#gameScene .board-stage { width:100%; min-height:0; }
#gameScene .game-board {
  width:min(calc(100cqw - 2 * var(--portrait-inline)),48cqh,984px);
  max-width:100%;
}
#gameScene [data-mobile-dock].game-actions,
#gameScene .game-actions {
  width:100%;
  min-height:clamp(60px,8.4cqh,154px);
  margin:0;
  padding:clamp(5px,1.15cqh,20px) clamp(6px,5cqw,54px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(7px,5cqw,54px);
}
#gameScene .round-action { min-height:clamp(48px,6.3cqh,116px); }

/* Popups remain centered inside the portrait canvas rather than the monitor. */
#gameScene .result-overlay,
#gameScene .settings-overlay {
  width:100%;
  height:100%;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
#gameScene .result-card,
#gameScene .settings-card {
  width:min(86cqw,850px);
  max-height:78cqh;
}

/* Short phone browser viewports keep every gameplay region visible. */
@media (orientation:portrait) and (max-height:740px) {
  #gameScene { --portrait-block:8px; --portrait-inline:10px; }
  #gameScene .game-header { margin-bottom:7px; }
  #gameScene .game-layout { gap:7px; }
  #gameScene .target-card,
  #gameScene.is-target-open .target-card { min-height:76px; padding-block:6px; }
  #gameScene .target-card > .mini-board,
  #gameScene .target-preview-wrap { width:58px; }
  #gameScene .game-board { width:min(calc(100cqw - 20px),45.5cqh); }
  #gameScene [data-mobile-dock].game-actions,
  #gameScene .game-actions { min-height:57px; padding:5px; }
  #gameScene .round-action { min-height:46px; }
}