/* Nintai 2.1.10 — centered vertical scenes, edge-filled gutters, and compact Nursery layout. */

html,body{width:100%;height:100%;background:#0f0a07}
body{align-items:stretch!important;justify-content:stretch!important}
#game-container{
  width:100vw!important;max-width:none!important;
  height:var(--app-height,100dvh)!important;max-height:none!important;
  border-radius:0!important;
}
#canvas-wrapper{width:100%;background:#0f0a07!important}
#game-canvas,#nursery-canvas{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}

/* The preview receives most of the modal height. The choices stay compact
   enough that Buy remains visible on common phone screens. */
#modal-nursery>div:nth-child(2){min-height:180px;flex:1 1 auto!important;background:#0f0a07}
#modal-nursery>.nintai-nursery-controls-panel,
#modal-nursery>.bg-\[\#1f1510\]{
  flex:0 0 auto!important;max-height:42vh!important;overflow-y:auto!important;
  padding:7px 8px max(8px,env(safe-area-inset-bottom))!important;gap:6px!important;
}
#modal-nursery>.bg-\[\#1f1510\]>div>.text-\[9px\]{margin-bottom:3px!important;font-size:8px!important}
#nursery-species-row{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important}
#nursery-age-row{gap:5px!important}
.nursery-spec-tab{
  min-height:34px!important;padding:4px 12px 4px 4px!important;
  font-size:8px!important;line-height:1.05!important;border-radius:6px!important;
}
.nursery-age-tab{min-height:39px!important;padding:4px!important;border-radius:6px!important}
.nursery-age-tab span:first-child{font-size:9px!important}
.nursery-age-tab span:last-child{font-size:7px!important;margin-top:1px!important}
#btn-nursery-propagation{min-height:34px!important;padding:6px 9px!important;font-size:10px!important}
#nintai-nursery-action-stack{gap:5px!important}
#nintai-nursery-action-stack #btn-buy-preview{min-height:40px!important;padding:7px 10px!important;font-size:11px!important}
#nintai-nursery-action-stack #nursery-stock-refresh-v82{min-height:34px!important;padding:6px 10px!important;font-size:10px!important}
#nursery-reroll-btn{
  top:8px!important;right:9px!important;bottom:auto!important;left:auto!important;
  transform:none!important;padding:5px 9px!important;font-size:9px!important;
  background:rgba(15,10,7,.72)!important;backdrop-filter:blur(2px);
}

@media(max-width:350px){
  #nursery-species-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .nursery-spec-tab{min-height:32px!important;font-size:7.5px!important}
}
@media(max-height:650px){
  #modal-nursery>.nintai-nursery-controls-panel,
  #modal-nursery>.bg-\[\#1f1510\]{max-height:46vh!important;padding-top:5px!important;gap:4px!important}
  #nursery-species-row{gap:3px!important}
  .nursery-spec-tab{min-height:30px!important;padding-top:3px!important;padding-bottom:3px!important}
  .nursery-age-tab{min-height:35px!important}
  #nintai-nursery-action-stack #btn-buy-preview{min-height:36px!important}
}

/* Canvas elements must not flex-shrink back to the old 2:3 rectangle after
   the modal finishes laying out. The backing store preserves logical scale. The original 2:3 scene stays
   centered and unscaled while edge-derived gutters fill the wider viewport. */
#game-canvas,#nursery-canvas{
  flex:0 0 100%!important;
  min-width:100%!important;
  min-height:100%!important;
}

/* Short landscape phones use a two-column Nursery chooser so the purchase
   action stays on-screen while the preview still has useful height. */
@media (orientation:landscape) and (max-height:520px){
  #modal-nursery>div:first-child{padding:5px 10px!important;min-height:42px!important}
  #modal-nursery>div:nth-child(2){min-height:118px!important}
  #modal-nursery>.nintai-nursery-controls-panel,
  #modal-nursery>.bg-\[\#1f1510\]{
    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) minmax(220px,.9fr)!important;
    grid-template-rows:auto auto 1fr!important;
    column-gap:8px!important;row-gap:3px!important;
    max-height:46vh!important;padding:4px 8px max(5px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
  }
  #modal-nursery>.nintai-nursery-controls-panel>div:first-child,
  #modal-nursery>.bg-\[\#1f1510\]>div:first-child{grid-column:1;grid-row:1/4;min-width:0}
  #modal-nursery>.nintai-nursery-controls-panel>div:nth-child(2),
  #modal-nursery>.bg-\[\#1f1510\]>div:nth-child(2){grid-column:2;grid-row:1;min-width:0}
  #btn-nursery-propagation{grid-column:2;grid-row:2;min-height:28px!important;padding:3px 7px!important;font-size:8px!important}
  #nintai-nursery-action-stack{grid-column:2;grid-row:3;align-self:end;gap:3px!important}
  #nursery-species-row{gap:3px!important}
  .nursery-spec-tab{min-height:25px!important;padding:2px 10px 2px 3px!important;font-size:7px!important}
  .nursery-age-tab{min-height:29px!important;padding:2px!important}
  .nursery-age-tab span:first-child{font-size:8px!important}
  .nursery-age-tab span:last-child{font-size:6.5px!important}
  #nintai-nursery-action-stack #btn-buy-preview{min-height:30px!important;padding:4px 7px!important;font-size:9px!important}
  #nintai-nursery-action-stack #nursery-stock-refresh-v82{min-height:27px!important;padding:3px 7px!important;font-size:8px!important}
}