/* LuckZoo Fixed Game Canvas v2
   The approved game is always laid out at 1366 x 640 CSS pixels.
   Only the whole canvas is uniformly scaled to fit the device/browser.
   This file is loaded AFTER zoo.css so responsive reflow rules cannot alter
   the approved internal geometry on smaller screens. */

:root{
  --lz-design-width:1366px;
  --lz-design-height:640px;
}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden!important;
  overscroll-behavior:none;
  background:#020806;
}

#game{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:#020806;
  touch-action:manipulation;
}

/* Fixed internal design canvas.  Never let viewport-based CSS change it. */
#game > .viewport{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--lz-design-width)!important;
  height:var(--lz-design-height)!important;
  min-width:var(--lz-design-width)!important;
  min-height:var(--lz-design-height)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0 8px!important;
  grid-template-rows:minmax(0,1fr) 66px!important;
  overflow:hidden!important;
  transform:translate(-50%,-50%) scale(var(--lz-fit-scale,1));
  transform-origin:center center!important;
  will-change:transform;
}

/* Freeze the approved 1366px-wide composition.  These overrides neutralize
   zoo.css max-width media rules when the *device* is narrow. */
#game > .viewport .game-row{
  grid-template-columns:78px minmax(0,1fr) 76px!important;
  gap:6px!important;
  min-height:0!important;
}
#game > .viewport .left-panel{
  padding-top:12px!important;
  gap:9px!important;
  overflow:hidden!important;
}
#game > .viewport .left-panel .home-round{
  width:58px!important;
  height:58px!important;
  margin:0 0 5px!important;
  font-size:24px!important;
}
#game > .viewport .left-status,
#game > .viewport .side-room{
  width:66px!important;
}
#game > .viewport .side-room{
  min-height:50px!important;
  padding:5px 3px!important;
  border-width:2px!important;
}
#game > .viewport .side-room #room{
  font-size:10px!important;
}

/* 640px design height intentionally uses the compact-height geometry. */
#game > .viewport .machine{padding-top:38px!important}
#game > .viewport .phase-crown{height:43px!important}
#game > .viewport .record-panel{
  height:calc(100% - 38px)!important;
  margin-top:38px!important;
  padding:4px 3px!important;
}
#game > .viewport #history{gap:3px!important}
#game > .viewport .hist .hi img{
  max-width:48px!important;
  max-height:48px!important;
}

#game > .viewport .inner{
  right:calc(11.111111% + 14px)!important;
}

#game > .viewport .console{
  height:64px!important;
  margin:0 22px!important;
  padding:0 10px!important;
  grid-template-columns:minmax(180px,240px) minmax(0,1fr) minmax(120px,190px)!important;
  gap:8px!important;
}
#game > .viewport .player{height:58px!important}
#game > .viewport .avatar{width:48px!important;height:48px!important}
#game > .viewport .rebet{height:48px!important;font-size:20px!important}

/* V7 approved stake-chip geometry, fixed regardless of device width. */
#game > .viewport .console .chips{gap:8px!important}
#game > .viewport .console .chip{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  flex:0 0 52px!important;
  font-size:13px!important;
  border-width:4px!important;
}

/* Approved overlay sizes must also be part of the fixed canvas. */
#game > .viewport .bet-mark{
  width:18px!important;
  height:18px!important;
  font-size:6px!important;
  border-width:2px!important;
}
#game > .viewport #lz-bot-overlay .lz-bet-badge{
  font-size:8px!important;
  padding:1px 4px!important;
}

/* Keep browser touch gestures from selecting/dragging the scaled game art. */
#game > .viewport,
#game > .viewport *{
  -webkit-tap-highlight-color:transparent;
}
#game > .viewport img{
  -webkit-user-drag:none;
  user-select:none;
}