/* LuckZoo professional top + bottom console upgrade
   Inspired by the compact floating-console geometry in the supplied reference.
   Visual only: game logic, chip values, account/balance and ReBet behavior unchanged. */

/* ---------- TOP PHASE / PRIZING CAPSULE ---------- */
#game > .viewport .phase-crown{
  top:2px!important;
  left:35%!important;
  width:30%!important;
  height:40px!important;
  box-sizing:border-box!important;
  border:2px solid #e9b83f!important;
  border-top:0!important;
  border-radius:0 0 25px 25px!important;
  background:
    linear-gradient(180deg,#6c4715 0%,#321d08 32%,#0c0d09 72%,#241607 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,181,.55),
    inset 0 -3px 7px rgba(0,0,0,.50),
    0 4px 9px rgba(0,0,0,.45),
    0 0 8px rgba(255,191,55,.20)!important;
  gap:18px!important;
  color:#ffe07a!important;
  font-size:20px!important;
  letter-spacing:.3px!important;
  text-shadow:0 2px 2px #000!important;
}
#game > .viewport .phase-crown b{
  font-size:27px!important;
  color:#ffd44e!important;
  line-height:1!important;
}

/* ---------- BOTTOM FLOATING CONTROL CONSOLE ---------- */
#game > .viewport .console{
  position:relative!important;
  height:68px!important;
  width:auto!important;
  margin:0 58px!important;
  padding:0 13px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:230px minmax(0,1fr) 154px!important;
  align-items:center!important;
  gap:12px!important;
  overflow:visible!important;

  /* Curved floating gold console rather than a flat full-width strip. */
  border:2px solid #f2d16e!important;
  border-radius:34px 34px 12px 12px!important;
  background:
    linear-gradient(180deg,#f0cf78 0%,#d39b3b 24%,#9a6019 63%,#5a330b 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,250,206,.70),
    inset 0 -5px 10px rgba(74,34,3,.42),
    0 5px 10px rgba(0,0,0,.46),
    0 0 10px rgba(255,192,53,.18)!important;
}

/* subtle raised center behind the stake chips */
#game > .viewport .console::before{
  content:"";
  position:absolute;
  z-index:0;
  left:31%;
  right:23%;
  top:-13px;
  height:30px;
  border:2px solid #e7bf59;
  border-bottom:0;
  border-radius:36px 36px 0 0;
  background:linear-gradient(180deg,#d9aa50,#9a621c);
  box-shadow:inset 0 2px 0 rgba(255,245,188,.48),0 -3px 7px rgba(0,0,0,.24);
  pointer-events:none;
}
#game > .viewport .console > *{
  position:relative;
  z-index:1;
}

/* Account capsule: integrated into the gold console but visually clean. */
#game > .viewport .console .player{
  height:54px!important;
  box-sizing:border-box!important;
  padding:3px 10px 3px 4px!important;
  gap:9px!important;
  border:2px solid #d5a43d!important;
  border-radius:29px!important;
  background:linear-gradient(180deg,#4a2819,#211008)!important;
  box-shadow:inset 0 0 9px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.28)!important;
}
#game > .viewport .console .avatar{
  width:45px!important;
  height:45px!important;
  flex:0 0 45px!important;
  border-width:2px!important;
  box-shadow:inset 0 0 7px rgba(0,0,0,.55)!important;
}
#game > .viewport .console .player b{font-size:12px!important;line-height:1.05!important}
#game > .viewport .console .player strong{font-size:16px!important;line-height:1.1!important;margin-top:3px!important}

/* Stake chips float slightly above the console, like the reference. */
#game > .viewport .console .chips{
  align-self:start!important;
  margin-top:-7px!important;
  gap:8px!important;
  overflow:visible!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;
  border-width:4px!important;
  font-size:13px!important;
  box-shadow:
    0 4px 5px rgba(0,0,0,.48),
    inset 0 0 0 3px rgba(255,255,255,.18)!important;
}
#game > .viewport .console .chip.active{
  transform:translateY(-3px) scale(1.045)!important;
}

/* Separate professional ReBet pill, visually detached from the center rise. */
#game > .viewport .console .rebet{
  justify-self:stretch!important;
  height:48px!important;
  margin:0!important;
  border:2px solid #bde7b3!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,#4fc477 0%,#25904f 50%,#0d6534 100%)!important;
  color:#f3fff2!important;
  font-size:19px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
  text-shadow:0 2px 2px rgba(0,0,0,.55)!important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.20),
    0 3px 5px rgba(0,0,0,.38)!important;
}
#game > .viewport .console .rebet:active{
  transform:translateY(1px)!important;
}

/* Keep the compact shape stable inside the existing fixed 1600×900 game canvas. */

/* ===== V2 — board-aligned bars requested 2026-10-01 =====
   Board horizontal edges in the fixed 1366px canvas are ~92px / ~1276px.
   Keep both controls inside those same edges. */

/* Top status stays at the absolute top of the game canvas, not down near the
   Frog x100/top wheel row. */
#game > .viewport .phase-crown{
  top:0!important;
  left:34%!important;
  width:32%!important;
  height:38px!important;
  border-radius:0 0 22px 22px!important;
  z-index:40!important;
}
#game > .viewport .phase-crown b{font-size:26px!important}

/* Bottom console: exactly inside the board's left/right footprint and anchored
   to the bottom edge. Extra height grows UPWARD, so the board geometry itself
   is not shortened. */
#game > .viewport .console{
  align-self:end!important;
  width:auto!important;
  height:82px!important;
  min-height:82px!important;
  margin:0 90px 0 92px!important;
  padding:5px 14px 0!important;
  grid-template-columns:220px minmax(0,1fr) 160px!important;
  gap:14px!important;
  border-radius:30px 30px 0 0!important;
  border-bottom:0!important;
  overflow:visible!important;
}

/* Raised centre remains contained inside the board-width console. */
#game > .viewport .console::before{
  left:29%!important;
  right:24%!important;
  top:-11px!important;
  height:27px!important;
  border-radius:34px 34px 0 0!important;
}

/* Larger stake buttons: increase height/diameter, not console width. */
#game > .viewport .console .chips{
  align-self:center!important;
  margin-top:-7px!important;
  gap:10px!important;
  overflow:visible!important;
}
#game > .viewport .console .chip{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  flex:0 0 64px!important;
  border-width:5px!important;
  font-size:16px!important;
}
#game > .viewport .console .chip.active{
  transform:translateY(-3px) scale(1.035)!important;
}

#game > .viewport .console .player{
  height:60px!important;
  border-radius:31px!important;
}
#game > .viewport .console .avatar{
  width:50px!important;
  height:50px!important;
  flex:0 0 50px!important;
}
#game > .viewport .console .rebet{
  height:54px!important;
  border-radius:28px!important;
  font-size:20px!important;
}


/* ===== V3 POSITION CORRECTION =====
   User reference: top status touches top edge; bottom console touches bottom edge.
   Remove the unnecessary raised strip above the bottom console. */

/* Remove the extra decorative/raised center bar completely. */
#game > .viewport .console::before{
  content:none!important;
  display:none!important;
}

/* Anchor the whole bottom console to the bottom of the fixed game viewport.
   Keep the already-approved height/width/chip sizing. */
#game > .viewport .console{
  position:absolute!important;
  left:218px!important;
  right:218px!important;
  bottom:0!important;
  top:auto!important;
  margin:0!important;
  width:auto!important;
  z-index:40!important;
}

/* Put the top BETTING / DRAWING / PRIZING capsule against the very top edge.
   It stays centered and no longer floats lower over the frog/x100 row. */
#game > .viewport .phase-crown{
  position:absolute!important;
  top:0!important;
  bottom:auto!important;
  left:35%!important;
  transform:none!important;
  margin:0!important;
  z-index:45!important;
}


/* ===== V4 ACTUAL VISUAL EDGE FIX =====
   viewport-lock.css scales the complete 1600x900 viewport to 92%.
   Because the scale is centered, top:0 and bottom:0 still leave about
   4% visual space around the canvas. These offsets compensate for it. */

/* Top status bar: visually touch the real top edge. */
#game > .viewport .phase-crown{
  top:-35px!important;
  bottom:auto!important;
}

/* Bottom console: visually touch the real lower edge. */
#game > .viewport .console{
  bottom:-35px!important;
  top:auto!important;
}

/* Ensure the old raised/decorative strip can never reappear. */
#game > .viewport .console::before,
#game > .viewport .console::after{
  content:none!important;
  display:none!important;
}


/* ===== V5 COMPLETE-VIEWPORT FIT + CENTERED HISTORY =====
   viewport-lock.js now reserves the 35px top + 35px bottom bar extensions,
   so both bars remain at their approved positions without being cropped. */

/* Center the 10 history icons in the full available right-side column. */
#game > .viewport .record-panel{
  height:100%!important;
  margin-top:0!important;
  padding:4px 3px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#game > .viewport #history{
  width:100%!important;
  height:auto!important;
  display:grid!important;
  grid-template-rows:repeat(10,48px)!important;
  gap:4px!important;
  align-content:center!important;
}
#game > .viewport #history .hist{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
}

/* ===== V6 TOP VISIBILITY + HORIZONTAL HISTORY CENTERING ===== */
/* The top status capsule is intentionally 35px above the machine. The machine's
   original overflow:hidden was clipping it. Allow only the machine wrapper to
   show the capsule; the locked game canvas itself remains unchanged. */
#game > .viewport .machine{
  overflow:visible!important;
}

/* History: restore board-height geometry and center the narrower box
   HORIZONTALLY inside the right-side grid column. Do not stretch it vertically. */
#game > .viewport .record-panel{
  width:58px!important;
  max-width:58px!important;
  justify-self:center!important;
  align-self:stretch!important;
  height:calc(100% - 38px)!important;
  margin-top:38px!important;
  padding:4px 3px!important;
  display:block!important;
}
#game > .viewport #history{
  width:100%!important;
  height:calc(100% - 4px)!important;
  display:block!important;
}
#game > .viewport #history .hist{
  width:auto!important;
  height:calc((100% - 30px)/10)!important;
  min-height:0!important;
  max-height:none!important;
  margin:2px 2px!important;
}

/* ===== V7 RESTORE TOP STATUS BAR TO SAFE ORIGINAL POSITION =====
   Edge placement is still clipped by the host canvas in some browsers/WebViews.
   Restore the proven in-canvas position above the Frog x100 row. */
#game > .viewport .phase-crown{
  position:absolute!important;
  top:2px!important;
  bottom:auto!important;
  left:35%!important;
  width:30%!important;
  transform:none!important;
  margin:0!important;
  z-index:45!important;
}