/* Layout sync patch: copy the older working proportions onto the current styled build.
   Colours and gameplay stay in the live build. This file only restores sizing and spacing. */

.wrap{
  max-width:1520px !important;
}

.gameGrid{
  grid-template-columns: minmax(0,1fr) 340px !important;
  gap:12px !important;
}

.scene{
  height:460px !important;
}

.playerSprite{
  width:175px !important;
  bottom:0 !important;
}

.tiff{
  height:520px !important;
  padding:10px !important;
  gap:10px !important;
}

.turnWrap{
  padding:12px 8px !important;
}

.turnLbl{
  font-size:12px !important;
  letter-spacing:.6px !important;
}

.turnTimer{
  width:96px !important;
  height:96px !important;
  border-width:4px !important;
}

.turnTimer .inner{
  width:74px !important;
  height:74px !important;
  font-size:30px !important;
}

.tiffBox{
  min-height:120px !important;
}

.tiffPortrait{
  flex:4 1 0 !important;
  min-height:360px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#tiffanyPortraitWrap{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px !important;
  overflow:hidden !important;
}

#tiffanyPortraitStage{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:391px !important;
  height:391px !important;
  transform-origin:center center !important;
  transform:translate(0, 6px) scale(.72) !important;
}

.tiffReact{
  flex:1 1 120px !important;
  min-height:120px !important;
  max-height:none !important;
  padding:10px 12px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  font-size:14px !important;
  line-height:1.25 !important;
}

#tiffReact:empty{
  border:0 !important;
  background:transparent !important;
  min-height:0 !important;
  padding:0 !important;
  flex:0 0 0 !important;
}

.hudRow{
  margin-top:12px !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) 240px !important;
  gap:8px !important;
  align-items:stretch !important;
}

.panelHead{
  font-size:20px !important;
  padding:10px 10px !important;
}

.panelBody{
  min-height:82px !important;
  padding:10px 10px 8px !important;
}

.meta{
  font-size:13px !important;
}

.mojo{
  font-size:30px !important;
  padding:10px 0 !important;
}

.mojo span{
  font-size:18px !important;
}

.results{
  padding:10px !important;
  font-size:18px !important;
  gap:8px !important;
}

.results p{
  font-size:14px !important;
}

.chatBar{
  margin-top:10px !important;
  display:flex !important;
  grid-template-columns:none !important;
  gap:10px !important;
}

#chatInput{
  flex:1 1 auto !important;
  height:42px !important;
}

#sendBtn{
  width:auto !important;
  min-width:72px !important;
  height:42px !important;
}

.mmBox{
  width:min(520px, 90%) !important;
  padding:16px 18px !important;
}

.mmRing{
  width:92px !important;
  height:92px !important;
}

.mmRing .n{
  width:70px !important;
  height:70px !important;
  font-size:30px !important;
}