/* One shared game width keeps every scene, the header and the chat in proportion. */
:root{--game-max-width:1000px}
body{
  margin:0;
  padding:0;
  min-height:100dvh;
  background:#77cddd url('assets/approved/environment/ninja-sky-continuous-v1.png') center/cover fixed no-repeat;
}
.nw-game{
  width:100%;
  max-width:var(--game-max-width);
  min-width:0;
  margin-inline:auto;
  border:3px solid #4b2b19;
  box-shadow:0 0 0 1px #d5a653,0 8px 28px #25475955;
}
/* A narrow gilded wooden rim joins the painted header and chat at the sides. */
.nw-game::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  border:2px solid #bc853c;
  box-shadow:inset 0 0 0 1px #ffe0a0,inset 0 0 0 3px #57321d80;
}
/* Top-layer dialogs share the same limit without stretching smaller popups. */
body>dialog[open]{max-width:min(var(--game-max-width),calc(100vw - 12px))}
/* Keep the approved shop's complete purchase counter visible at its natural ratio. */
@media(min-width:601px){
  .nw-game[data-scene=armory]{height:max(100dvh,calc((min(100vw,1000px) - 6px)*.95933 + 66px));grid-template-rows:auto minmax(0,1fr) 60px}
}
.nw-game[data-scene=armory] .nw-stage{background:#84c9d9}
.nw-game[data-scene=armory] .ninja-chat{height:var(--chat-height);align-self:end;z-index:7}
/* The clan painting uses the same source scene ratio as the approved shop. */
@media(min-width:601px){
  .nw-game[data-scene=clan]{height:calc((min(100vw,1000px) - 6px)*.95933 + 66px);grid-template-rows:auto minmax(0,1fr) 60px}
}
.nw-game[data-scene=clan] .nw-stage{background:#a1ddea}
.nw-game[data-scene=clan] .ninja-chat{height:var(--chat-height);align-self:end;z-index:7}

/* The academy joins the live header and chat at the approved painting's ratio. */
@media(min-width:601px){.nw-game[data-scene=recruit]{height:calc((min(100vw,1000px) - 6px)*.95933 + 66px);grid-template-rows:auto minmax(0,1fr) 60px}}
.nw-game[data-scene=recruit] .nw-stage{background:#94d4e5}
.nw-game[data-scene=recruit] .ninja-chat{height:var(--chat-height);align-self:end;z-index:7}

/* Arena plates retain their illustrated proportions inside the shared 1000px shell. */
.nw-game[data-scene=arena],.nw-game[data-scene=history],.nw-game[data-scene=battle]{grid-template-rows:auto minmax(0,1fr) 60px}
.nw-game[data-scene=arena]{height:calc((min(100vw,1000px) - 6px)*1.069 + 66px)}
.nw-game[data-scene=history]{height:calc((min(100vw,1000px) - 6px)*1.152 + 66px)}
.nw-game[data-scene=battle]{height:calc((min(100vw,1000px) - 6px)*1.085 + 66px)}
.nw-game:is([data-scene=arena],[data-scene=history],[data-scene=battle]) .ninja-chat{height:var(--chat-height);align-self:end;z-index:7}
.nw-game:is([data-scene=arena],[data-scene=history],[data-scene=battle]) .nw-stage{background:#8dceed}
@media(max-width:600px){.nw-game:is([data-scene=arena],[data-scene=history],[data-scene=battle]){height:max(950px,100dvh)}}