
:root{
 --gold:#e7b52d;--gold2:#ffd967;--deep:#020705;--track:#111625;
 --green1:#2fa832;--green2:#084817;--blue1:#4840b8;--blue2:#151354
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020806;color:#fff;font-family:Arial,Helvetica,sans-serif}
button,input{font:inherit;color:inherit}.hide{display:none!important}
body{
 background:
 radial-gradient(circle at 50% 16%,#215f39 0%,#0b2819 24%,#04110b 58%,#010604 100%);
}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;
 background:repeating-linear-gradient(120deg,transparent 0 80px,#74b66a12 80px 82px,transparent 82px 160px)
}

/* entry/login */
.entry{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#02100bd9}
.entry-card,.modal-card{width:min(390px,92vw);padding:30px;border:2px solid var(--gold);border-radius:22px;background:linear-gradient(#10251d,#06100c);box-shadow:0 0 45px #f5bd2d30;text-align:center}
.brand{font-size:44px;font-weight:1000;letter-spacing:-3px}.brand span,.logo span{color:#f1b82c}
.sub{color:#69dc6f;font-weight:900;letter-spacing:3px;margin-bottom:18px}
.entry button,.modal-card button{display:block;width:100%;padding:12px;margin:9px 0;border:1px solid #f0c04b;border-radius:10px;background:linear-gradient(#33bd58,#08772d);font-weight:900}
.entry button.dark,.modal-card button.dark{background:#111}
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#000b}
.modal-card input{display:block;width:100%;padding:11px;margin:8px 0;background:#050c09;border:1px solid #594a1e;border-radius:8px}

/* entire game must fit exactly in one browser viewport */
.viewport{
 width:min(1600px,100vw);height:100dvh;margin:auto;
 display:grid;
 grid-template-rows:58px minmax(0,1fr) 78px 46px;
 padding:0 10px;
 overflow:hidden;
}
.topbar{min-height:0;display:flex;align-items:center;border-bottom:1px solid #705617;background:#040b08ec}
.logo{font-size:24px;font-weight:1000;line-height:18px}.logo small{display:block;font-size:8px;letter-spacing:1px;color:#74dc75}
.topbar nav{display:flex;height:100%;margin-left:14px}.topbar nav button{border:0;border-left:1px solid #263329;background:#06100d88;padding:0 16px;font-size:16px}
.top-wallet{margin-left:auto;display:flex;align-items:center;gap:7px;border:2px solid #bb8a22;border-radius:16px;padding:4px 7px 4px 11px;color:#ffd54e}
.top-wallet button{border:0;border-radius:6px;background:#19a544;font-size:18px}.room{min-width:165px;text-align:center;font-size:14px}.room i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#21dd7d;margin-right:6px}

/* middle */
.game-row{
 min-height:0;overflow:hidden;
 display:grid;
 grid-template-columns:72px minmax(0,1fr) 132px;
 gap:7px;
 align-items:stretch;
}
.left-panel{min-height:0;display:flex;flex-direction:column;align-items:center;padding-top:17px;overflow:hidden}
.home-round{width:58px;height:58px;border-radius:50%;border:3px solid var(--gold);background:#07130f;font-size:24px;box-shadow:0 0 14px #f1b82d3c}
.free-bets{margin-top:11px;width:58px;height:58px;border-radius:50%;border:3px solid var(--gold);background:radial-gradient(circle,#1e58c2,#06132a);display:grid;place-items:center;align-content:center}
.free-bets strong{font-size:21px}.free-bets small{font-size:8px;font-weight:900}.turns{font-size:21px;color:#e8c34c;margin:8px}
.lever{flex:1;min-height:65px;width:26px;border-left:6px solid #b28021;position:relative}
.lever span{position:absolute;top:0;left:-17px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6d55,#bd0000 65%);box-shadow:0 0 11px #ffc044}

/* machine and phase */
.machine{
 min-width:0;min-height:0;height:100%;
 position:relative;
 padding-top:43px;
 display:flex;
 align-items:stretch;
 overflow:hidden;
}
.phase-crown{
 position:absolute;z-index:20;top:0;left:31%;width:38%;height:49px;
 border:3px solid var(--gold);border-radius:0 0 29px 29px;
 background:linear-gradient(#4b3210,#090c0a);
 display:flex;align-items:center;justify-content:center;gap:20px;
 color:#ffd85d;font-size:23px;font-weight:1000;
 box-shadow:0 0 15px #ffbd3533
}
.phase-crown b{font-size:31px}
.board{
 position:relative;flex:1;min-width:0;min-height:0;
 border:4px solid #d7a328;border-radius:14px;background:#05080d;
 box-shadow:0 0 0 3px #4a350d,0 0 21px #edb32e37,inset 0 0 20px #000;
 overflow:hidden;
}

/* true 28-cell perimeter */
.track{position:absolute;inset:6px;z-index:2}
.track-cell{
 position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;
 background:linear-gradient(#131827,#090c14);border:1px solid #31384b
}
.track-cell .icon{
 font-size:clamp(20px,min(3.2vw,5.2vh),44px);
 line-height:1;
 filter:drop-shadow(0 2px 2px #000)
}
.track-cell .caption{position:absolute;bottom:1px;font-size:7px;font-weight:900;color:#ffd765;text-shadow:0 1px 2px #000}
.track-cell.special{background:linear-gradient(#2b1c38,#10091b)}
.track-cell.active{z-index:9;border:3px solid #fff396;background:#443b0e;box-shadow:inset 0 0 16px #ffec63aa,0 0 14px #ffc925}
.track-cell.winner{z-index:10;border:4px solid #fff7b8;animation:pulse .38s infinite alternate;box-shadow:inset 0 0 23px #ffd500b3,0 0 23px #ffd000}
@keyframes pulse{to{filter:brightness(1.6)}}

/* inner Luck55-like inset */
.inner{
 position:absolute;z-index:5;
 left:11.62%;right:11.62%;top:16.55%;bottom:16.55%;
 min-width:0;min-height:0;
 display:grid;grid-template-columns:28% 44% 28%;
 gap:4px;padding:4px;border:2px solid #d8a52b;background:#07100c
}
.left-bets,.right-bets{
 min-width:0;min-height:0;
 display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr .63fr;gap:4px
}
.card,.wide,.shark-card{
 min-width:0;min-height:0;position:relative;border:2px solid #f0c758;border-radius:5px;padding:0;overflow:hidden;cursor:pointer;
 box-shadow:inset 0 0 10px #0008
}
.card .emoji{
 height:100%;display:flex;align-items:center;justify-content:center;
 font-size:clamp(32px,min(5vw,8.5vh),72px);
 line-height:1
}
.card footer{
 position:absolute;left:0;right:0;bottom:0;
 padding:4px 6px;background:#04110ad9;color:#ffe367;text-align:left;font-weight:900;
 font-size:clamp(10px,min(1vw,1.7vh),16px)
}
.card footer b{float:right}.beast{background:linear-gradient(135deg,var(--green1),var(--green2))}.bird{background:linear-gradient(135deg,var(--blue1),var(--blue2))}
.wide{
 grid-column:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900
}
.wide>span{font-size:clamp(12px,min(1.5vw,2.5vh),20px);letter-spacing:4px;line-height:1}
.wide strong{font-size:clamp(19px,min(2.3vw,3.8vh),31px);line-height:1.1}
.wide b{font-size:1.18em;margin-left:6px}
.beast-wide{background:linear-gradient(#23a735,#064c15)}.bird-wide{background:linear-gradient(#4d42bd,#171460)}
.card.selected,.wide.selected,.shark-card.selected{outline:3px solid #fff27e;filter:brightness(1.18)}

.center-bets{min-width:0;min-height:0;display:grid;grid-template-rows:1.18fr 34px 1fr;gap:4px}
.battle-card{
 min-height:0;border:2px solid #dfae32;border-radius:52% 52% 10px 10px;
 background:radial-gradient(circle,#174938,#071b12 53%,#a26e1a 54%,#211507 59%);
 display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden
}
.battle-art{display:flex;align-items:center;justify-content:center;gap:10px;line-height:1}
.battle-art span{font-size:clamp(30px,min(4.5vw,7vh),66px)}.battle-art i{font-size:16px;color:#ffd760;font-weight:900}
.battle-card>strong{font-size:clamp(14px,min(1.7vw,2.7vh),21px);color:#ffd75c;line-height:1}.battle-card small{font-size:7px}
.total-bet{border:2px solid #e6b63c;border-radius:18px;background:#070c10;display:flex;align-items:center;justify-content:space-around;color:#ffd966;font-size:clamp(13px,min(1.5vw,2.2vh),20px)}
.total-bet b{font-size:1.3em}
.shark-card{background:linear-gradient(#0a79c9,#05265c)}
.shark-card .emoji{height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(42px,min(7vw,10.5vh),94px);line-height:1}
.shark-card footer{position:absolute;left:8px;bottom:3px;font-size:clamp(18px,min(2.2vw,3.5vh),29px);font-weight:900;line-height:1}
.shark-card footer b{display:block;color:#c4e7ff}

/* record locked to machine height, never under console */
.record-panel{
 min-height:0;height:calc(100% - 43px);margin-top:43px;
 border:3px solid #d8a62c;border-radius:16px;background:linear-gradient(#151109,#07100d);
 overflow:hidden;box-shadow:0 0 16px #e4ae3035
}
.record-panel h2{text-align:center;color:#ffd34f;font-size:18px;margin:6px;border-bottom:1px solid #80611d;padding-bottom:6px}
.hist{
 height:calc((100% - 46px)/10 - 3px);
 min-height:27px;margin:2px 5px;border:1px solid #5a481d;border-radius:5px;
 display:flex;align-items:center;gap:6px;padding:2px 6px;background:#07100d;overflow:hidden
}
.hist .hi{font-size:clamp(18px,min(2vw,3.4vh),28px)}.hist b{display:block;font-size:9px}.hist small{color:#f3d168;font-size:8px}

/* bottom console: compact enough to remain fully visible */
.console{
 min-height:0;height:74px;
 display:grid;grid-template-columns:220px minmax(0,1fr) 142px;align-items:center;gap:10px;
 margin:0 54px;padding:0 12px;
 background:linear-gradient(#e4bd62,#996419);border:2px solid #f2d57a;border-radius:38px 38px 10px 10px;
 box-shadow:0 0 15px #ffbf3440
}
.player{height:58px;border:2px solid #d8a12c;border-radius:31px;background:#28130c;display:flex;align-items:center;gap:9px;padding:4px}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(#245e3a,#06130d);border:3px solid #f1c64d;color:#ffd557;font-weight:1000}
.player b,.player strong{display:block}.player b{font-size:13px}.player strong{color:#ffd13e;font-size:17px;margin-top:2px}
.chips{display:flex;justify-content:center;gap:7px;min-width:0}
.chip{
 width:58px;height:58px;border-radius:50%;border:6px dashed #f5e9c7;
 box-shadow:0 3px 5px #0008,inset 0 0 0 4px #ffffff30;
 font-size:17px;font-weight:1000;text-shadow:0 2px 3px #000;transition:.12s
}
.chip.active{transform:translateY(-5px) scale(1.06);box-shadow:0 0 15px #fff29d}
.chip.green{background:#15912d}.chip.blue{background:#1771bf}.chip.purple{background:#7430c3}.chip.red{background:#b72d26}.chip.gold{background:#a66b13}.chip.black{background:#24282b}
.rebet{height:52px;border-radius:28px;border:3px solid #b9ee9d;background:linear-gradient(#3bc961,#087d2c);font-size:22px;font-weight:900;box-shadow:inset 0 0 10px #fff5,0 3px 6px #0007}

.promos{min-height:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 165px;align-items:center;overflow:hidden}
.promos div{display:grid;grid-template-columns:auto 1fr;column-gap:5px;font-size:17px}.promos b{font-size:10px;color:#ffd65a}.promos small{grid-column:2;font-size:8px;white-space:nowrap}

.winner{
 position:absolute;z-index:50;left:35%;top:30%;width:30%;height:35%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:radial-gradient(circle,#21472d,#060b09 72%);border:4px solid #f3c743;border-radius:20px;
 box-shadow:0 0 38px #ffd12b
}
.winner small{color:#ffd64e;font-weight:900}.winner-emoji{font-size:clamp(45px,min(6vw,9vh),82px)}.winner strong{font-size:20px;color:#ffe06b}
.bet-mark{position:absolute;z-index:20;width:24px;height:24px;border-radius:50%;background:#1d9c36;border:3px dashed #fff7c0;display:grid;place-items:center;font-size:8px;font-weight:900;pointer-events:none}
#toast{position:fixed;z-index:200;left:50%;bottom:14px;transform:translateX(-50%);padding:9px 15px;border-radius:8px;background:#000d;border:1px solid #d6a52d;display:none}

/* Smaller browser heights such as the user's 1366×768 screenshot (page viewport ~640px) */
@media(max-height:700px){
 .viewport{grid-template-rows:56px minmax(0,1fr) 72px 40px}
 .topbar nav button{padding:0 14px}
 .machine{padding-top:40px}.phase-crown{height:46px;font-size:21px}.phase-crown b{font-size:29px}
 .record-panel{height:calc(100% - 40px);margin-top:40px}
 .console{height:68px}.player{height:54px}.avatar{width:44px;height:44px}
 .chip{width:54px;height:54px;border-width:5px}.rebet{height:48px;font-size:20px}
 .promos{margin:0 150px}.promos div{font-size:15px}.promos b{font-size:9px}.promos small{font-size:7px}
}

/* Prevent content inflation from forcing the board into the console */
.game-row,.machine,.board,.inner,.left-bets,.right-bets,.center-bets,.record-panel{min-height:0}


/* ===== PART 4D CASINO POLISH ===== */

/* deeper luxury gold treatment */
.board{
  border-color:#f0bf38;
  box-shadow:
    0 0 0 2px #533704,
    0 0 24px #f6bd3450,
    inset 0 0 28px #000,
    inset 0 0 0 1px #ffdb7040;
}
.phase-crown{
  background:linear-gradient(180deg,#6d470e 0%,#2a1704 48%,#080b08 100%);
  border-color:#f6ca4d;
  box-shadow:0 0 16px #ffc83a70,inset 0 0 14px #ffdf7040;
}
.inner{
  border-color:#efbd3c;
  box-shadow:inset 0 0 16px #0008;
}

/* Candidate cards: casino-like glass, richer color and golden inner edge */
.card,.wide,.shark-card{
  border-color:#f4c64d;
  box-shadow:
    inset 0 0 0 1px #fff2a638,
    inset 0 -16px 24px #0005,
    0 1px 4px #000a;
}
.beast{
  background:
    radial-gradient(circle at 50% 25%,#4cdb55 0,#1e9d36 34%,#07501a 72%,#032c0d 100%);
}
.bird{
  background:
    radial-gradient(circle at 50% 25%,#7169ea 0,#4943bf 35%,#24206c 72%,#10103a 100%);
}
.beast-wide{
  background:linear-gradient(180deg,#35c94d,#0c7d24 52%,#064216);
}
.bird-wide{
  background:linear-gradient(180deg,#655bd8,#3e35a9 52%,#1b175c);
}
.shark-card{
  background:
    radial-gradient(circle at 50% 25%,#25a9ef,#086db9 42%,#063e7d 72%,#041e45);
}
.card .emoji{
  text-shadow:0 4px 8px #000;
  filter:drop-shadow(0 5px 3px #0008) saturate(1.18);
  transform:translateY(-4%);
}
.card:hover .emoji,.wide:hover,.shark-card:hover .emoji{
  filter:drop-shadow(0 5px 4px #000a) saturate(1.3) brightness(1.12);
}
.card footer{
  border-top:1px solid #f3cf6655;
  background:linear-gradient(90deg,#031008ed,#0b2117e8);
}
.shark-card .emoji i{
  font-style:normal;
  filter:drop-shadow(0 7px 4px #001a35) saturate(1.25);
}

/* center artwork */
.battle-card{
  background:
    radial-gradient(circle at 50% 42%,#1a6251 0,#0b3529 45%,#9c6d1b 47%,#4d3108 52%,#100b04 65%);
  box-shadow:inset 0 0 24px #000a,0 0 8px #f6bd3640;
}
.vs-bird,.vs-beast{
  filter:drop-shadow(0 7px 5px #000c) saturate(1.2);
}
.total-bet{
  background:linear-gradient(180deg,#131820,#06090c);
  box-shadow:inset 0 0 12px #000,0 0 7px #d5a83740;
}

/* Track cells */
.track-cell{
  border-color:#384159;
  background:linear-gradient(180deg,#161c2d 0%,#0a0d16 100%);
  box-shadow:inset 0 -8px 13px #0006;
}
.track-cell .icon{
  filter:drop-shadow(0 4px 3px #000a) saturate(1.18);
}
.track-cell:nth-child(1),.track-cell:nth-child(27),.track-cell:nth-child(28){background:linear-gradient(#282013,#10100d)}
.track-cell:nth-child(2),.track-cell:nth-child(3),.track-cell:nth-child(4){background:linear-gradient(#173921,#0a1710)}
.track-cell:nth-child(6),.track-cell:nth-child(7),.track-cell:nth-child(8){background:linear-gradient(#152e48,#091523)}
.track-cell.golden-shark{
  background:radial-gradient(circle at 50% 40%,#ffd94b 0,#b97b08 42%,#3d2300 75%,#100900 100%);
  border-color:#ffe98a;
  box-shadow:inset 0 0 18px #ffe06275,0 0 7px #e7b52d;
}
.track-cell.golden-shark .icon{
  font-size:clamp(22px,min(3.6vw,5.5vh),48px);
  filter:sepia(1) saturate(3.2) hue-rotate(350deg) brightness(1.35) drop-shadow(0 3px 3px #2c1800);
}
.track-cell.golden-shark .caption{
  color:#fff2a6;
  text-shadow:0 1px 2px #000,0 0 4px #b46d00;
}

/* Winner: NO background/card, just candidate floating over the game */
.winner{display:none!important}
.winner-float{
  position:absolute;
  z-index:60;
  left:36%;
  top:29%;
  width:28%;
  height:33%;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  box-shadow:none;
  text-align:center;
}
.winner-float .winner-emoji{
  font-size:clamp(70px,min(9vw,15vh),135px);
  line-height:1;
  animation:winnerPop .35s cubic-bezier(.2,1.6,.3,1);
  filter:
    drop-shadow(0 8px 4px #000c)
    drop-shadow(0 0 16px #ffd94f)
    saturate(1.3)
    brightness(1.08);
}
.winner-float strong{
  margin-top:5px;
  padding:3px 14px;
  border-radius:20px;
  background:#050a08c9;
  border:1px solid #efbf43;
  color:#ffe06b;
  font-size:clamp(16px,min(1.7vw,2.8vh),24px);
  text-shadow:0 2px 3px #000;
}
@keyframes winnerPop{
  0%{transform:scale(.25);opacity:0}
  70%{transform:scale(1.18);opacity:1}
  100%{transform:scale(1)}
}

/* Track highlight is more compact, not bleeding outside tiles */
.track-cell.active{
  border:3px solid #fff0a0;
  background:linear-gradient(#56460f,#1a1504);
  box-shadow:inset 0 0 15px #ffe35a99,0 0 10px #ffc821;
}
.track-cell.winner{
  border:4px solid #fff9c1;
  box-shadow:inset 0 0 20px #ffd900c2,0 0 18px #ffd000;
}

/* console more casino-like */
.console{
  background:
    linear-gradient(180deg,#f2cf77 0%,#bc842d 47%,#74460e 100%);
  border-color:#ffe49a;
  box-shadow:inset 0 1px 0 #fff7cf,0 0 14px #efb83435;
}
.player{
  background:linear-gradient(180deg,#351d10,#1c0c07);
  border-color:#f1c555;
}
.rebet{
  background:linear-gradient(180deg,#4bd879,#119741 52%,#08722d);
  border-color:#e5ffbe;
  box-shadow:inset 0 2px 4px #fff5,0 0 10px #2adb6355;
}


/* ===== PART 4E ALIGNMENT FIX ===== */
.left-panel{
  justify-content:flex-start;
  padding-top:18px;
}
.left-panel .home-round{margin-bottom:18px}
.left-panel .lever{margin-top:8px}

/* Approved reference geometry: 9 top + 6 right + 7 bottom + 6 left */
.track{position:absolute;inset:6px;z-index:2}
.inner{
  left:11.111%;
  right:11.111%;
  top:12.5%;
  bottom:12.5%;
  padding:5px;
  gap:5px;
}
.left-bets,.right-bets{grid-template-rows:1fr 1fr .72fr;gap:5px}
.center-bets{grid-template-rows:1.28fr 42px 1.12fr;gap:5px}

/* Golden Shark top-center */
.track-cell.golden-shark{
  background:radial-gradient(circle at 50% 42%,#ffe16d 0,#c68b0d 38%,#5d3500 68%,#160c00 100%);
  border-color:#ffef99;
  box-shadow:inset 0 0 18px #ffe06275,0 0 8px #e7b52d;
}
.track-cell.golden-shark .icon{
  filter:sepia(1) saturate(4) hue-rotate(350deg) brightness(1.4) drop-shadow(0 3px 3px #2b1700);
}
.track-cell.golden-shark .caption{color:#fff2a6}

/* Winner remains floating, without a background card */
.winner-float{
  left:38%;
  top:30%;
  width:24%;
  height:31%;
}

/* keep all game layers separated */
.machine,.board{overflow:hidden}
.console{position:relative;z-index:5}


/* ===== PART 4F: CONFIRMED 9 + 5 + 9 + 5 PERIMETER ===== */
.track{
  position:absolute;
  inset:6px;
  z-index:2;
}

/* One true 9x7 frame: side cells equal the top/bottom cell size */
.track-cell{
  border-radius:0;
}

/* Inner betting board begins exactly after one perimeter row/column */
.inner{
  left:11.111111%;
  right:11.111111%;
  top:14.285714%;
  bottom:14.285714%;
  padding:5px;
  gap:5px;
}

/* Maintain balanced center proportions inside corrected frame */
.left-bets,.right-bets{
  grid-template-rows:1fr 1fr .70fr;
  gap:5px;
}
.center-bets{
  grid-template-rows:1.25fr 40px 1.08fr;
  gap:5px;
}

/* Prevent any box from bleeding across the perimeter */
.board,.track,.inner{
  overflow:hidden;
}


/* ===== PART 4G: INNER BOARD + WINNER CONTINUITY FIX ===== */

/* Pull the inner board farther away from the right perimeter.
   This specifically prevents Pigeon / Eagle / Bird x2 from sitting under the 28-box track. */
.inner{
  left:11.45%;
  right:12.65%;
  top:14.65%;
  bottom:14.65%;
  padding:4px;
  gap:4px;
}

/* Slightly tighter columns so the right-side cards remain fully inside the inner gold frame. */
.inner{
  grid-template-columns:27.5% 44.5% 28%;
}
.left-bets,.right-bets{
  gap:4px;
  grid-template-rows:1fr 1fr .68fr;
}
.center-bets{
  gap:4px;
  grid-template-rows:1.24fr 38px 1.06fr;
}

/* Keep inner right card borders clearly separated from the outer result cells. */
.right-bets{
  padding-right:2px;
}
.right-bets .card,
.right-bets .wide{
  max-width:100%;
}

/* Strong winning perimeter state — remains visible throughout PRIZING. */
.track-cell.winner,
.track-cell.winner-lock{
  z-index:15!important;
  border:4px solid #fff7b2!important;
  background:linear-gradient(180deg,#68530c,#211900)!important;
  box-shadow:
    inset 0 0 24px #ffe24ec9,
    0 0 8px #fff1a0,
    0 0 24px #ffd21f!important;
  animation:winnerTrackPulse .34s infinite alternate!important;
}
@keyframes winnerTrackPulse{
  from{filter:brightness(1.15);transform:scale(.97)}
  to{filter:brightness(1.72);transform:scale(1)}
}

/* The winning candidate visibly travels FROM the final perimeter box to the center.
   This makes the announcement feel connected to the 28-box result instead of "losing" the winner. */
.winner-flight{
  position:absolute;
  z-index:80;
  width:1px;height:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  line-height:1;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.8);
  filter:
    drop-shadow(0 4px 4px #000)
    drop-shadow(0 0 8px #ffe35b);
  transition:
    left .58s cubic-bezier(.22,.85,.3,1),
    top .58s cubic-bezier(.22,.85,.3,1),
    transform .58s cubic-bezier(.2,1.4,.3,1),
    filter .58s ease;
}
.winner-flight.go{
  left:50%!important;
  top:44%!important;
  transform:translate(-50%,-50%) scale(2.05);
  filter:
    drop-shadow(0 8px 5px #000c)
    drop-shadow(0 0 22px #ffd84b)
    saturate(1.25)
    brightness(1.1);
}

/* Center announcement stays transparent: candidate only + small result label. */
.winner-float{
  left:39%;
  top:29%;
  width:22%;
  height:32%;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.winner-float .winner-emoji{
  font-size:clamp(68px,min(8vw,13vh),122px);
}
.winner-float strong{
  background:#050908d8;
  border:1px solid #f1c247;
  box-shadow:0 0 10px #0009;
}

/* Preserve track geometry; only the inner board is reduced. */
.track{
  inset:6px;
}


/* ===== PART 4H: REFERENCE ORDER + SYMMETRIC BETTING AREA ===== */

/*
  Outer frame is a real 9 x 7 perimeter.
  Inner betting area is inset equally from the perimeter on ALL FOUR SIDES.
  There is no extra right-side or left-side margin.
*/
.track{
  position:absolute;
  inset:6px;
  z-index:2;
}

/* Equal visual clearance from the four perimeter edges */
.inner{
  left:11.85%;
  right:11.85%;
  top:15.05%;
  bottom:15.05%;
  padding:0;
  gap:5px;
  border:0;                /* remove the extra center-container border */
  background:transparent;
  overflow:visible;
  grid-template-columns:28% 44% 28%;
}

/* Keep left and right betting groups exactly symmetrical */
.left-bets,
.right-bets{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  gap:5px;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr .70fr;
}

.center-bets{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  gap:5px;
  grid-template-rows:1.23fr 38px 1.08fr;
}

/* no right-only adjustment */
.right-bets{
  padding-right:0;
}

/* betting cards stay inside their own cells */
.card,.wide,.shark-card,.battle-card,.total-bet{
  max-width:100%;
  max-height:100%;
}

/* perimeter candidate never vanishes during winner presentation */
.track-cell.winner .icon,
.track-cell.winner-lock .icon{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* winner flight is a detached visual clone */
.winner-flight{
  pointer-events:none;
}


/* ===== PART 4I: STATIC TRACK + TRUE EQUAL INNER MARGINS ===== */

/*
  The confirmed perimeter is a 9 x 7 frame:
  one cell = 11.111111% wide and 14.285714% high.

  The betting area now starts exactly ONE perimeter cell inward,
  plus the SAME 5px clearance on all four sides.
  This removes the unequal left/right/top/bottom gaps.
*/
.inner{
  left:calc(11.111111% + 5px)!important;
  right:calc(11.111111% + 5px)!important;
  top:calc(14.285714% + 5px)!important;
  bottom:calc(14.285714% + 5px)!important;

  padding:0!important;
  margin:0!important;
  gap:5px!important;
  border:0!important;
  background:transparent!important;

  grid-template-columns:28% 44% 28%!important;
}

/* Both side betting blocks are exactly mirrored. */
.left-bets,
.right-bets{
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  gap:5px!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr .70fr!important;
}

.center-bets{
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  gap:5px!important;
  grid-template-rows:1.23fr 38px 1.08fr!important;
}

/* No asymmetric right-only adjustment at all. */
.right-bets{padding-right:0!important}
.left-bets{padding-left:0!important}

/*
  Result-track animation is now a completely separate rectangle.
  It moves OVER the static 28-box track, so a winning emoji can never
  disappear from its perimeter tile during DRAWING or PRIZING.
*/
.track-highlight{
  position:absolute;
  z-index:40;
  pointer-events:none;
  border:3px solid #fff1a0;
  background:#ffe44a18;
  box-shadow:
    inset 0 0 17px #ffe45a9c,
    0 0 12px #ffc61e;
  transition:left .025s linear,top .025s linear;
}
.track-highlight.winner-stop{
  z-index:45;
  border:4px solid #fff8b9;
  background:#ffd93a24;
  box-shadow:
    inset 0 0 25px #ffe141b8,
    0 0 9px #fff2a8,
    0 0 25px #ffd21f;
  animation:trackStopPulse .34s infinite alternate;
}
@keyframes trackStopPulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.55)}
}

/* Never transform or hide the real perimeter candidate. */
.track-cell,
.track-cell .icon{
  opacity:1!important;
  visibility:visible!important;
}
.track-cell.winner-lock{
  z-index:3!important;
  transform:none!important;
}
.track-cell.winner-lock .icon{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* Keep candidate cards perfectly contained in the inner grid. */
.card,.wide,.shark-card,.battle-card,.total-bet{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
}

/* Thin card borders only; no enclosing betting-area border. */
.card,.wide,.shark-card{
  border-width:2px!important;
}


/* Center phase text is intentionally light and borderless so it does not
   disturb the corrected betting-box geometry. */
.center-phase{
  position:absolute;
  z-index:24;
  left:50%;
  top:43.2%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  min-width:190px;
  pointer-events:none;
  color:#ffd84d;
  text-align:center;
  text-shadow:0 2px 4px #000,0 0 12px #000;
  font-weight:900;
  letter-spacing:.6px;
}
.center-phase span{
  font-size:clamp(13px,1.25vw,20px);
}
.center-phase b{
  font-size:clamp(18px,1.65vw,27px);
  color:#fff2a5;
}

/* During the actual winner announcement, keep the phase readable above it. */
.winner-float{
  z-index:30;
}


/* ===== PART 4K: BET LOCK + HISTORY SYNC ===== */

/* Locked betting cards cannot send clicks to the API. */
[data-area].bet-locked,
#rebet.bet-locked{
  pointer-events:none!important;
  cursor:not-allowed!important;
  filter:saturate(.72) brightness(.86);
}

/* Winner remains on the 28-box perimeter; history newest result is visually first. */
#history .hist:first-child{
  border-color:#e6b83f;
  box-shadow:inset 0 0 8px #d9aa2a25;
}

/* Part 4O changes drawing speed only; UI geometry is unchanged. */


/* Candidate artwork upgrade — visual content only, existing geometry remains locked. */
.card .emoji img{
  width:92%;height:92%;object-fit:contain;display:block;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.62));
}
.shark-card .emoji img{
  width:84%;height:96%;object-fit:contain;display:block;
  filter:drop-shadow(0 7px 4px rgba(0,0,0,.65));
}
.battle-art .vs-bird,.battle-art .vs-beast{
  display:flex;align-items:center;justify-content:center;
}
.battle-art .vs-bird img,.battle-art .vs-beast img{
  width:72px;height:72px;max-width:8vw;max-height:10vh;object-fit:contain;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.65));
}
.group-icons{
  display:flex!important;align-items:center;justify-content:center;gap:1px;height:28px;
}
.group-icons img{
  width:27px;height:27px;object-fit:contain;margin:0 -2px;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.55));
}
.track-cell .icon{
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.track-cell .icon img{
  width:78%;height:78%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.62));
}
.hist .hi{
  display:flex;align-items:center;justify-content:center;
}
.hist .hi img{
  width:31px;height:31px;object-fit:contain;display:block;
}
.winner-emoji img{
  width:100%;height:100%;max-width:110px;max-height:110px;object-fit:contain;
  filter:drop-shadow(0 8px 5px rgba(0,0,0,.75));
}
.winner-runner img{
  width:100%;height:100%;object-fit:contain;
}


/* ===== COMPACT BOARD V1 — approved reference layout ===== */
/* Top Home/History/wallet/room bar is removed visually; live targets remain in DOM for JS. */
.topbar{display:none!important}

/* Use the released top/promo space for the board itself. */
.viewport{
  width:min(1600px,100vw)!important;
  height:100dvh!important;
  grid-template-rows:minmax(0,1fr) 78px!important;
  padding:0 8px!important;
}
.game-row{
  grid-template-columns:78px minmax(0,1fr) 76px!important;
  gap:6px!important;
  min-height:0!important;
}
.machine{padding-top:43px!important}

/* Left: Home + balance + room players. No lever/handle. */
.left-panel{padding-top:12px!important;overflow:hidden!important;gap:9px!important}
.left-panel .home-round{margin:0 0 5px!important;width:58px!important;height:58px!important;flex:0 0 auto}
.lever{display:none!important}
.left-status{width:66px;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.side-balance,.side-room{
  min-height:48px;border:2px solid #d9aa2b;border-radius:13px;
  background:linear-gradient(180deg,#15150e,#07100d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#ffd44d;text-align:center;box-shadow:inset 0 0 8px #0008;
}
.side-balance small,.side-room small{font-size:8px;color:#d8e6dc;line-height:1.05}
.side-balance b{font-size:13px;line-height:1.1}
.side-room{color:#fff;position:relative}
.side-room i{width:7px;height:7px;border-radius:50%;background:#22d77b;margin-bottom:2px}
.side-room span{font-size:14px;font-weight:900;line-height:1}

/* Right record: image-only, no RECORD title and no candidate names/multipliers. */
.record-panel{height:calc(100% - 43px)!important;margin-top:43px!important;border-radius:16px!important;padding:4px 3px!important}
.record-panel h2{display:none!important}
#history{height:100%;display:grid;grid-template-rows:repeat(10,minmax(0,1fr));gap:3px}
.hist{
  height:auto!important;min-height:0!important;margin:0!important;padding:1px!important;
  display:grid!important;place-items:center!important;border-radius:50%!important;
  background:#07100d!important;border:2px solid #b88c21!important;overflow:hidden!important;
}
.hist>span:not(.hi){display:none!important}
.hist .hi{width:100%!important;height:100%!important;display:grid!important;place-items:center!important}
.hist .hi img{width:82%!important;height:82%!important;max-width:48px!important;max-height:48px!important;object-fit:contain!important}

/* Bottom bonus strip removed. */
.promos{display:none!important}

/* Console remains fixed to the board width and scales without changing proportions. */
.console{
  height:72px!important;margin:0 22px!important;
  grid-template-columns:minmax(180px,240px) minmax(0,1fr) minmax(120px,190px)!important;
  gap:8px!important;padding:0 10px!important;border-radius:36px 36px 10px 10px!important;
}
.chips{gap:clamp(3px,.55vw,8px)!important}
.chip{width:clamp(43px,4.1vw,60px)!important;height:clamp(43px,4.1vw,60px)!important;font-size:clamp(13px,1.2vw,18px)!important}
.rebet{font-size:clamp(17px,1.6vw,24px)!important}

/* Candidate amounts and wheel visuals scale with the board instead of viewport overflow. */
.bet-mark{width:clamp(18px,1.55vw,25px)!important;height:clamp(18px,1.55vw,25px)!important;font-size:clamp(6px,.55vw,9px)!important}
.track-cell .icon img{width:72%!important;height:72%!important;max-width:100%!important;max-height:100%!important}

/* Keep winner fixed at a strong center size; remove oversized start pop. */
.winner-float{left:39%!important;top:29%!important;width:22%!important;height:32%!important}
.winner-float .winner-emoji{animation:none!important;width:clamp(76px,8vw,118px)!important;height:clamp(76px,8vw,118px)!important}
.winner-emoji img{max-width:none!important;max-height:none!important;width:100%!important;height:100%!important}
.winner-flight.go{transform:translate(-50%,-50%) scale(1.45)!important}

/* Lower resolutions: preserve the same composition rather than spreading/collapsing. */
@media(max-width:1100px){
 .game-row{grid-template-columns:62px minmax(0,1fr) 62px!important;gap:4px!important}
 .left-status{width:54px}.home-round{width:50px!important;height:50px!important}
 .console{margin:0 10px!important;grid-template-columns:170px minmax(0,1fr) 130px!important}
 .player{height:52px!important}.avatar{width:43px!important;height:43px!important}
 .hist .hi img{max-width:38px!important;max-height:38px!important}
}
@media(max-height:700px){
 .viewport{grid-template-rows:minmax(0,1fr) 66px!important}
 .machine{padding-top:38px!important}.phase-crown{height:43px!important}
 .record-panel{height:calc(100% - 38px)!important;margin-top:38px!important}
 .console{height:64px!important}
 .chip{width:48px!important;height:48px!important}
}


/* ===== COMPACT BOARD V2 — left room players fix ===== */
.left-status{
  width:66px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
}
.side-room{
  width:66px!important;
  min-height:50px!important;
  padding:5px 3px!important;
  border:2px solid #d9aa2b!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#15150e,#07100d)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  text-align:center!important;
  box-shadow:inset 0 0 8px #0008,0 0 8px #d9aa2b22!important;
}
.side-room i{
  display:block!important;
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  border-radius:50%!important;
  background:#21dd7d!important;
  margin:0 0 3px!important;
  box-shadow:0 0 6px #21dd7d!important;
}
.side-room #room{
  display:block!important;
  width:100%!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:900!important;
  color:#fff!important;
  white-space:normal!important;
}
@media(max-width:1100px){
  .left-status,.side-room{width:54px!important}
  .side-room #room{font-size:9px!important}
}


/* ===== FULL RESPONSIVE OVERLAY FIX V3 =====
   Board geometry stays intact; all visual overlays scale with it. */
:root{--lz-board-scale:1}

.viewport{
  max-width:1600px!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
.machine,.board,.inner{min-width:0!important;min-height:0!important}
.board{overflow:visible!important}

/* Real candidate total badges and visual wheel content shrink with board. */
.bet-mark{
  width:clamp(14px,1.55vw,25px)!important;
  height:clamp(14px,1.55vw,25px)!important;
  min-width:0!important;
  font-size:clamp(5px,.55vw,9px)!important;
  border-width:clamp(1px,.12vw,2px)!important;
}
.total-row{font-size:clamp(12px,1.25vw,20px)!important}
.total-row b{font-size:clamp(14px,1.45vw,23px)!important}

/* Keep the board composition proportional on narrower desktop/mobile widths. */
@media(max-width:900px){
  .game-row{grid-template-columns:48px minmax(0,1fr) 48px!important;gap:3px!important}
  .left-panel{gap:5px!important}
  .left-panel .home-round{width:42px!important;height:42px!important}
  .left-status,.side-room{width:42px!important}
  .side-room{min-height:39px!important;padding:2px!important}
  .side-room #room{font-size:7px!important}
  .record-panel{padding:2px!important}
  #history{gap:1px!important}
  .console{margin:0 4px!important;padding:0 5px!important;grid-template-columns:135px minmax(0,1fr) 105px!important}
  .player{height:44px!important}
  .avatar{width:36px!important;height:36px!important}
  .chip{width:38px!important;height:38px!important;font-size:11px!important}
  .rebet{font-size:14px!important}
}
@media(max-width:650px){
  .game-row{grid-template-columns:38px minmax(0,1fr) 38px!important;gap:2px!important}
  .left-panel .home-round{width:34px!important;height:34px!important;font-size:14px!important}
  .left-status,.side-room{width:34px!important}
  .side-room{min-height:32px!important;border-width:1px!important}
  .side-room #room{font-size:6px!important}
  .console{grid-template-columns:100px minmax(0,1fr) 78px!important;height:48px!important}
  .player{height:38px!important}
  .avatar{width:31px!important;height:31px!important}
  .chips{gap:2px!important}
  .chip{width:30px!important;height:30px!important;font-size:9px!important;border-width:2px!important}
  .rebet{font-size:11px!important}
}


/* ===== FINAL BOARD ALIGNMENT FIX V4 ===== */

/* 1) Right betting block must finish BEFORE the right-side perimeter column.
   Left side already aligns correctly, so only increase the RIGHT inner inset. */
.inner{
  right:calc(11.111111% + 14px)!important;
}

/* Keep the right betting cards strictly inside that corrected edge. */
.right-bets{
  overflow:hidden!important;
  padding-right:0!important;
}
.right-bets .card,
.right-bets .wide{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

/* 2) Smaller candidate betting amount badges.
   Real-player amount circles. */
.bet-mark{
  width:18px!important;
  height:18px!important;
  font-size:6px!important;
  border-width:2px!important;
  line-height:1!important;
}

/* Candidate total pills from bot/display feed are also visually smaller. */
#lz-bot-overlay .lz-bet-badge{
  font-size:8px!important;
  line-height:1!important;
  padding:1px 4px!important;
  border-radius:8px!important;
  min-width:0!important;
}

/* Landed simulated chips should not visually dominate the candidate cards. */
#lz-bot-overlay .lz-landed-chip{
  font-size:6px!important;
}

/* Small-screen proportional tightening. */
@media(max-width:1100px){
  .inner{right:calc(11.111111% + 11px)!important}
  .bet-mark{width:15px!important;height:15px!important;font-size:5px!important;border-width:1px!important}
  #lz-bot-overlay .lz-bet-badge{font-size:7px!important;padding:1px 3px!important}
}


/* ===== FINAL TWO UI FIXES V5 ===== */

/* Bottom betting chips: larger circles with smaller, perfectly centered labels. */
.console .chips{
  align-items:center!important;
}
.console .chip{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  font-size:15px!important;
  text-align:center!important;
}

/* Highlight border uses the JS 2px equal inset and must not add geometry outside it. */
.track-highlight{
  box-sizing:border-box!important;
}

/* Scale the same controls down proportionally on smaller app/browser widths. */
@media(max-width:1100px){
  .console .chip{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    font-size:13px!important;
  }
}
@media(max-width:800px){
  .console .chip{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    font-size:11px!important;
  }
}


/* ===== WHEEL TRAIL LAYER V6 =====
   Visual trail only. No track dimensions/order/positions are changed. */

.track-cell.wheel-trail-6{
  background:linear-gradient(180deg,#3e350d,#171403)!important;
  box-shadow:inset 0 0 8px #ffe46035!important;
}
.track-cell.wheel-trail-5{
  background:linear-gradient(180deg,#51430d,#201903)!important;
  box-shadow:inset 0 0 10px #ffe46050!important;
}
.track-cell.wheel-trail-4{
  background:linear-gradient(180deg,#68540d,#2a2003)!important;
  box-shadow:inset 0 0 12px #ffe46068!important;
}
.track-cell.wheel-trail-3{
  background:linear-gradient(180deg,#7e650d,#352803)!important;
  box-shadow:inset 0 0 14px #ffe46085!important;
}
.track-cell.wheel-trail-2{
  background:linear-gradient(180deg,#98790e,#493704)!important;
  box-shadow:inset 0 0 16px #ffe460a0!important;
}
.track-cell.wheel-trail-1{
  background:linear-gradient(180deg,#b48f10,#5a4305)!important;
  box-shadow:inset 0 0 20px #fff07ac4,0 0 7px #ffd92f!important;
}

/* Keep actual candidate artwork visible over the trail. */
.track-cell[class*="wheel-trail-"] .icon{
  opacity:1!important;
  visibility:visible!important;
  position:relative;
  z-index:2;
}

/* Winner remains the strongest layer. */
.track-cell.winner-lock{
  z-index:15!important;
}

/* The moving rectangle remains above the illuminated trail. */
.track-highlight{
  z-index:50!important;
}


/* ===== FINAL EXACT FIT V7 ===== */

/* Bottom stake chips: smaller than V5 and comfortably inside the gold console. */
.console .chips{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:0!important;
  overflow:visible!important;
}

.console .chip{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  padding:0!important;
  margin:0!important;
  flex:0 0 52px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  font-size:13px!important;
  font-weight:1000!important;
  text-align:center!important;
  border-width:4px!important;
  transform-origin:center center!important;
}

.console .chip.active{
  transform:translateY(-3px) scale(1.04)!important;
}

/* Responsive reductions preserve the same proportion. */
@media(max-width:1100px){
  .console .chips{gap:6px!important}
  .console .chip{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
    flex-basis:46px!important;
    font-size:11px!important;
    border-width:3px!important;
  }
}
@media(max-width:800px){
  .console .chips{gap:4px!important}
  .console .chip{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
    flex-basis:40px!important;
    font-size:10px!important;
    border-width:3px!important;
  }
}

/* Wheel highlight: its JS coordinates are now corrected to the board's inner
   coordinate system; CSS must not add extra size or offset. */
#trackHighlight.track-highlight{
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  transform:none!important;
  border-width:2px!important;
  border-radius:0!important;
}
#trackHighlight.track-highlight.winner-stop{
  border-width:2px!important;
}


/* ===== 28-BOX CANDIDATE ICON SIZE UPDATE =====
   Visual-only: does not change the 28 track cells or their geometry. */

/* 26 regular perimeter candidates: 10% larger than the current 72% size */
.track-cell .icon img{
  width:79.2%!important;
  height:79.2%!important;
  max-width:100%!important;
  max-height:100%!important;
}

/* Both special sharks: use the full icon area inside their existing cells */
.track-cell .icon img[src$="/shark.png"],
.track-cell .icon img[src$="shark.png"],
.track-cell .icon img[src$="/goldenshark.png"],
.track-cell .icon img[src$="goldenshark.png"]{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

/* ===== MOBILE WINNER LABEL + HISTORY VISIBILITY FIX =====
   Visual-only. Does not change wheel/RNG/track/betting/payout logic. */

/* History: remove the circular frame so the candidate artwork can use the
   full record slot, especially on narrow mobile/WebView layouts. */
#history .hist{
  border-radius:0!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  overflow:visible!important;
}
#history .hist .hi{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
#history .hist .hi img{
  width:96%!important;
  height:96%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
}

/* Keep the result name clearly below the winner artwork instead of allowing
   the two elements to overlap when the board is compressed on mobile. */
.winner-float{
  row-gap:clamp(8px,1.1vh,14px)!important;
}
.winner-float strong{
  position:relative!important;
  z-index:2!important;
  flex:0 0 auto!important;
  margin-top:0!important;
  white-space:nowrap!important;
}

@media(max-width:900px), (max-height:700px){
  .winner-float{
    height:36%!important;
    justify-content:center!important;
    row-gap:clamp(10px,1.8vh,16px)!important;
  }
  .winner-float .winner-emoji{
    flex:0 0 auto!important;
  }
  .winner-float strong{
    margin-top:0!important;
    transform:translateY(2px)!important;
    font-size:clamp(11px,1.55vw,17px)!important;
    line-height:1.15!important;
  }
}

@media(max-width:650px), (max-height:520px){
  #history .hist .hi img{
    width:100%!important;
    height:100%!important;
  }
  .winner-float{
    row-gap:8px!important;
  }
  .winner-float strong{
    font-size:clamp(9px,1.45vw,14px)!important;
    padding:2px 8px!important;
  }
}
\n\n/* ===== FINAL HISTORY CANDIDATE CLARITY =====\n   Visual-only. Adds separation between recent winners and enlarges only the\n   candidate artwork; game board, wheel cells and logic are untouched. */\n#history{\n  gap:5px!important;\n  padding:2px 1px!important;\n}\n#history .hist{\n  padding:1px 0!important;\n  min-height:0!important;\n}\n#history .hist .hi{\n  width:100%!important;\n  height:100%!important;\n  padding:0!important;\n}\n#history .hist .hi img{\n  width:100%!important;\n  height:100%!important;\n  max-width:58px!important;\n  max-height:58px!important;\n  object-fit:contain!important;\n  transform:scale(1.08)!important;\n  transform-origin:center!important;\n}\n@media(max-width:1100px){\n  #history{gap:4px!important}\n  #history .hist .hi img{\n    max-width:48px!important;\n    max-height:48px!important;\n    transform:scale(1.10)!important;\n  }\n}\n@media(max-width:650px), (max-height:520px){\n  #history{gap:3px!important}\n  #history .hist .hi img{\n    max-width:none!important;\n    max-height:none!important;\n    transform:scale(1.12)!important;\n  }\n}\n

/* ===== PLAYER BET AMOUNT VISIBILITY FIX =====
   Visual-only: keeps the player's own wager visible on the selected candidate.
   No wheel, RNG, wallet, betting or payout calculations are changed. */
#betMarks.bet-marks{
  position:absolute!important;
  inset:0!important;
  z-index:90!important;
  pointer-events:none!important;
  overflow:visible!important;
}
#betMarks .bet-mark{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:clamp(24px,2.15vw,34px)!important;
  height:clamp(24px,2.15vw,34px)!important;
  min-width:24px!important;
  min-height:24px!important;
  padding:0 3px!important;
  border:2px dashed #fff4a3!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 32% 28%,#fff4a8 0 8%,#d72f2f 9% 44%,#7f0d0d 45% 63%,#e3b52e 64% 75%,#694907 76%)!important;
  color:#fffbd5!important;
  font-size:clamp(7px,.72vw,11px)!important;
  font-weight:1000!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000!important;
  box-shadow:0 0 8px #000b,0 0 9px #f0bf35!important;
  transform:translate(-50%,-50%)!important;
  opacity:1!important;
  visibility:visible!important;
}
#betMarks .bet-mark.bet-mark-closed,
#betMarks.bet-marks-closed .bet-mark{
  width:auto!important;
  height:auto!important;
  min-width:30px!important;
  min-height:0!important;
  padding:3px 6px!important;
  border:2px solid #ffe15a!important;
  border-radius:7px!important;
  background:rgba(3,10,7,.82)!important;
  color:#ffe56b!important;
  font-size:clamp(8px,.78vw,12px)!important;
  box-shadow:0 0 0 1px #6d4d08 inset,0 0 10px #e6b62a!important;
}
@media(max-width:650px), (max-height:520px){
  #betMarks .bet-mark{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    min-height:25px!important;
    font-size:10px!important;
    border-width:1px!important;
  }
  #betMarks .bet-mark.bet-mark-closed,
  #betMarks.bet-marks-closed .bet-mark{
    width:auto!important;
    height:auto!important;
    min-width:25px!important;
    min-height:0!important;
    padding:2px 4px!important;
    font-size:11px!important;
    border-width:1px!important;
  }
}

/* ===== PLAYER-ONLY BET FONT SIZE FIX =====
   Visual-only. Enlarges only the authenticated/guest player's own bet marks.
   Bot/public bet badges under #lz-bot-overlay are intentionally unchanged. */
#betMarks .bet-mark{
  font-size:clamp(10px,.95vw,14px)!important;
}

#betMarks .bet-mark.bet-mark-closed,
#betMarks.bet-marks-closed .bet-mark{
  font-size:clamp(11px,1.05vw,15px)!important;
}

@media(max-width:650px), (max-height:520px){
  #betMarks .bet-mark{
    font-size:13px!important;
  }

  #betMarks .bet-mark.bet-mark-closed,
  #betMarks.bet-marks-closed .bet-mark{
    font-size:14px!important;
  }
}



/* ===== LUCKZOO SAFE GAME START COVER =====
   Visual-only cover. It prevents the old entry UI, chips, or a partially
   initialized board from flashing while the existing game initializes.
   It does NOT resize/reposition the board, track, hotspots, or wheel. */
#lzGameLoadingCover{
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#03130c!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#lzGameLoadingCover.lz-ready{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .22s ease,visibility 0s linear .22s!important;
}
#lzGameLoadingCover .lz-game-loader{
  width:min(420px,76vw)!important;
  text-align:center!important;
}
#lzGameLoadingCover .lz-game-loader-title{
  margin-bottom:14px!important;
  color:#ffd85a!important;
  font-size:clamp(20px,3vw,34px)!important;
  font-weight:1000!important;
  letter-spacing:1px!important;
  text-shadow:0 2px 5px #000!important;
}
#lzGameLoadingCover .lz-game-loader-track{
  width:100%!important;
  height:18px!important;
  overflow:hidden!important;
  border:2px solid #d6a52d!important;
  border-radius:12px!important;
  background:#06110d!important;
  box-shadow:inset 0 0 8px #000,0 0 12px #d6a52d55!important;
}
#lzGameLoadingCover .lz-game-loader-fill{
  width:0!important;
  height:100%!important;
  border-radius:10px!important;
  background:linear-gradient(90deg,#159b43,#67e57e 48%,#ffe05b)!important;
  box-shadow:0 0 14px #55e98580!important;
  transition:width .18s ease!important;
}
#lzGameLoadingCover .lz-game-loader-text{
  margin-top:9px!important;
  color:#d9e8dd!important;
  font-size:clamp(11px,1.5vw,15px)!important;
}
to{width:92%}}

/* ===== BOT LANDED CHIP NUMBER FIT FIX =====
   Bot/public chips only. Keep their compact size but guarantee 3-digit
   amounts such as 250 fit completely inside instead of clipping to 50. */
#lz-bot-overlay .lz-landed-chip{
  box-sizing:border-box!important;
  min-width:24px!important;
  width:auto!important;
  height:20px!important;
  padding:0 4px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
  line-height:1!important;
  font-size:7px!important;
  letter-spacing:-.15px!important;
}
@media(max-width:1100px), (max-height:650px){
  #lz-bot-overlay .lz-landed-chip{
    min-width:21px!important;
    height:18px!important;
    padding:0 3px!important;
    font-size:6.5px!important;
  }
}


/* Absolute startup isolation:
   bot/public chips are appended to body after the loading cover.
   Keep that overlay invisible until the loading cover is released. */
#lzGameLoadingCover:not(.lz-ready) ~ #lz-bot-overlay{
  visibility:hidden!important;
  opacity:0!important;
}

#lzGameLoadingCover .lz-game-loader-title span{color:#ffd13e!important}
#lzGameLoadingCover .lz-game-progress-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:14px!important;margin:0 2px 8px!important
}
#lzGameLoadingCover .lz-game-progress-head b{
  color:#dfece3!important;font-size:clamp(11px,1.5vw,14px)!important;font-weight:800!important
}
#lzGameLoadingCover .lz-game-progress-head strong{
  min-width:44px!important;color:#ffd13e!important;font-size:clamp(12px,1.6vw,15px)!important;
  font-weight:1000!important;text-align:right!important
}


/* =========================================================
   LuckZoo Help + Record Artwork UI
   Does not change board / track / hotspot geometry.
   ========================================================= */

/* HELP button: directly below the live Players indicator on the left rail. */
.side-help{
  flex:0 0 auto;
  width:58px;
  height:58px;
  margin:8px 0 8px;
  padding:0;
  border:3px solid #e3b43b;
  border-radius:50%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:0;
  background:
    radial-gradient(circle at 35% 28%,#fff2a0 0 5%,transparent 6%),
    radial-gradient(circle,#254a34 0%,#0a2116 67%,#04110b 100%);
  color:#ffd95b;
  box-shadow:0 0 13px #e8b93842,inset 0 0 0 2px #304936;
  cursor:pointer;
  line-height:1;
}
.side-help>span{
  font-size:25px;
  font-weight:1000;
  line-height:.88;
}
.side-help>small{
  margin-top:3px;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.5px;
  color:#fff4ad;
}
.side-help:active{transform:scale(.96)}

/* Help artwork modal. It is viewport-fixed and therefore cannot resize game layout. */
.help-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:10px!important;
  background:rgba(0,0,0,.78)!important;
  backdrop-filter:blur(3px);
}
.help-overlay.hide{display:none!important}
.help-artwork{
  position:relative!important;
  width:min(94vw,1280px)!important;
  aspect-ratio:3/2!important;
  max-height:94vh!important;
  background:transparent!important;
  border:0!important;
}
.help-artwork>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

/* Transparent click target placed exactly over the red X painted into help.webp. */
.help-close-hotspot{
  position:absolute!important;
  z-index:3!important;
  right:1.7%!important;
  top:2.1%!important;
  width:7.3%!important;
  height:11.0%!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}
.help-close-hotspot:focus-visible{
  outline:2px solid #fff29a!important;
  outline-offset:2px!important;
}

/* Landscape APK / short browser: fit the complete Help artwork without cropping. */
@media (orientation:landscape) and (max-height:650px){
  .help-artwork{
    width:auto!important;
    height:min(93vh,610px)!important;
    max-width:96vw!important;
  }
  .side-help{
    width:50px!important;
    height:50px!important;
    margin:5px 0!important;
  }
  .side-help>span{font-size:21px!important}
  .side-help>small{font-size:6px!important}
}


/* Help must remain completely clean: no public/bot chips above artwork. */
body:has(#helpOverlay:not(.hide)) #lz-bot-overlay{
  visibility:hidden!important;
  opacity:0!important;
}
