*{box-sizing:border-box}
:root{
  --bg:#050608;
  --panel:#071015;
  --panel2:#0b1418;
  --gold:#d7ad53;
  --gold2:#f1d27a;
  --text:#f4f0e7;
  --muted:#8f8a7f;
  --line:rgba(215,173,83,.38);
}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{overflow:hidden}
button{font:inherit}
.app{
  width:100vw;height:100dvh;overflow:hidden;
  display:grid;
  grid-template-rows:8vh 7vh 57vh 23vh 5vh;
  background:#050608;
}
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 4.2vw;border-bottom:1px solid rgba(215,173,83,.32);
  background:#071015;
}
.brandName{
  font-family:Cinzel,serif;font-size:clamp(20px,2.1vw,34px);letter-spacing:.05em;color:#f3dd9d
}
.brandSub{
  margin-top:2px;font-size:clamp(8px,.68vw,11px);font-weight:700;letter-spacing:.26em;color:#c6a65d
}
.tabs{
  display:grid;grid-template-columns:repeat(4,minmax(74px,1fr));
  border:1px solid rgba(215,173,83,.46);border-radius:8px;overflow:hidden;
  background:#071015
}
.tabs button{
  height:4.8vh;min-height:36px;border:0;border-right:1px solid rgba(255,255,255,.08);
  background:#071015;color:#ece8df;font-size:clamp(11px,.9vw,15px);font-weight:800;cursor:pointer
}
.tabs button:last-child{border-right:0}
.tabs button.on{background:#d8ad54;color:#17110a}
.tagline{
  justify-self:end;display:grid;gap:3px;text-align:left;
  font-size:clamp(7px,.63vw,10px);font-weight:700;letter-spacing:.24em;color:#b7afa0
}
.statusStrip{
  width:min(48vw,780px);justify-self:center;align-self:center;height:5.4vh;min-height:42px;
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(215,173,83,.56);border-radius:8px;background:#081116
}
.statusStrip>div{
  min-width:0;display:grid;align-content:center;justify-items:center;
  border-right:1px solid rgba(255,255,255,.1)
}
.statusStrip>div:last-child{border-right:0}
.statusStrip span{
  font-size:clamp(7px,.62vw,10px);font-weight:800;letter-spacing:.14em;color:#d1ad5f
}
.statusStrip strong{
  margin-top:2px;white-space:nowrap;font-size:clamp(10px,.86vw,14px);letter-spacing:.03em
}
.stage{
  position:relative;display:grid;grid-template-columns:25vw 50vw 25vw;
  min-height:0;overflow:hidden;background:#050608
}
.scene{
  position:relative;background-size:cover;background-position:center;
  filter:saturate(.78) brightness(.72)
}
.scene:after{
  content:"";position:absolute;inset:0;background:rgba(2,7,9,.24);pointer-events:none
}
.sceneLeft{
  background-image:url("/assets/macau-result-background-8k.jpg")
}
.sceneRight{
  background-image:url("/assets/macau-result-background-8k.jpg")
}
.sceneText{
  position:absolute;z-index:2;display:grid;gap:.6vh;color:#d7c899;text-shadow:0 2px 8px #000
}
.leftText{left:4.2vw;bottom:6vh}
.rightText{right:4vw;top:7vh;text-align:right}
.sceneText strong{
  font-family:Cinzel,serif;font-size:clamp(16px,1.7vw,28px);letter-spacing:.22em
}
.sceneText span{
  max-width:15vw;font-size:clamp(7px,.7vw,11px);line-height:1.55;letter-spacing:.2em
}
.fourCard{
  position:relative;z-index:3;align-self:stretch;
  margin:0 -1.5vw;padding:1.2vh 1.15vw 1vh;
  border:1px solid rgba(215,173,83,.82);border-radius:14px;background:#071015;
  box-shadow:0 0 0 1px rgba(244,213,129,.09) inset,0 0 28px rgba(215,173,83,.14)
}
.fourHeading{
  height:7.5vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1vw
}
.fourHeading>span{height:1px;background:rgba(215,173,83,.52)}
.fourHeading>div{text-align:center}
.fourHeading h1{
  margin:0;font-family:Cinzel,serif;font-size:clamp(20px,2.1vw,33px);font-weight:600;color:#e9c674;letter-spacing:.05em
}
.fourHeading p{
  margin:.4vh 0 0;font-size:clamp(7px,.65vw,10px);letter-spacing:.28em;color:#a79f91
}
.fourBoard{
  height:calc(100% - 7.5vh);display:grid;grid-template-rows:45% 55%;gap:1.1vh
}
.top3{
  width:min(32vw,500px);height:100%;margin:auto;
  display:grid;grid-template-rows:repeat(3,1fr);gap:.7vh
}
.prizeRow{
  min-height:0;display:grid;grid-template-columns:30% 70%;
  border:1px solid rgba(215,173,83,.66);border-radius:7px;overflow:hidden;background:#091116
}
.prizeLabel{
  display:grid;place-items:center;background:#d8ad54;color:#1b1409;
  font-family:Cinzel,serif;font-size:clamp(14px,1.3vw,22px);font-weight:700
}
.prizeValue{
  display:grid;place-items:center;font-size:clamp(30px,3vw,54px);font-weight:800;letter-spacing:.13em
}
.lower{
  min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2vw
}
.set{
  min-width:0;min-height:0;display:grid;grid-template-rows:3.6vh 1fr;
  border:1px solid rgba(215,173,83,.75);border-radius:8px;overflow:hidden;background:#081116
}
.setTitle{
  display:grid;place-items:center;margin:0;border-bottom:1px solid rgba(215,173,83,.48);
  font-family:Cinzel,serif;font-size:clamp(10px,1vw,16px);font-weight:600;color:#e2c270;letter-spacing:.05em
}
.setGrid{
  min-height:0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);
  padding:.5vh .6vw
}
.numberCell{
  min-width:0;min-height:0;display:grid;place-items:center;
  border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  font-size:clamp(12px,1.12vw,19px);font-weight:800;letter-spacing:.04em
}
.numberCell:nth-child(2n){border-right:0}
.numberCell:nth-last-child(-n+2){border-bottom:0}
.bottomGrid{
  min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.1vw;
  padding:1vh 4.2vw 1vh;background:#050608
}
.miniCard{
  min-width:0;min-height:0;display:grid;grid-template-rows:4.6vh 1fr 3.8vh;
  padding:.6vh .85vw;border:1px solid rgba(215,173,83,.62);border-radius:9px;background:#071015
}
.miniHead{
  display:flex;align-items:center;justify-content:space-between;min-width:0
}
.miniHead>div{display:grid}
.miniHead span{
  font-family:Cinzel,serif;font-size:clamp(11px,1.1vw,18px);color:#ebcf83
}
.miniHead small{
  margin-top:1px;font-size:clamp(6px,.58vw,9px);letter-spacing:.16em;color:#8f8a7f
}
.miniHead>b{color:#e9c46c;font-size:clamp(18px,1.8vw,28px)}
.rbBoard{
  min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.45vw;align-items:center
}
.rbSession{
  min-width:0;display:grid;justify-items:center;gap:.4vh
}
.rbSession span{
  font-size:clamp(7px,.65vw,10px);color:#a79f91
}
.rbSession strong{
  display:grid;place-items:center;width:clamp(34px,3.4vw,54px);aspect-ratio:1;
  border-radius:50%;border:2px solid #d5aa51;background:#10181c;
  font-size:clamp(14px,1.45vw,24px);color:#f1d27a
}
.totoBoard{
  min-height:0;display:grid;grid-template-columns:repeat(8,1fr);gap:.35vw;align-items:center
}
.totoBall{
  display:grid;place-items:center;aspect-ratio:1;border-radius:50%;
  border:2px solid #d5aa51;background:#10181c;color:#f5eee1;
  font-size:clamp(10px,1vw,17px);font-weight:800
}
.totoPlus{display:grid;place-items:center;color:#caa454;font-size:clamp(15px,1.35vw,22px);font-weight:900}
.miniMeta{
  display:flex;align-items:end;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);
  padding-top:.5vh
}
.miniMeta span{font-size:clamp(6px,.56vw,9px);letter-spacing:.12em;color:#8e8778}
.miniMeta strong{font-size:clamp(8px,.72vw,11px)}
.historyCard{grid-template-rows:4.6vh 1fr auto}
.historyButton{
  align-self:center;height:5vh;min-height:38px;border:1px solid rgba(215,173,83,.7);border-radius:999px;
  background:#071015;color:#e9c674;font-size:clamp(9px,.8vw,13px);font-weight:800;letter-spacing:.06em;cursor:pointer
}
.historyButton b{margin-left:1vw}
.historyCaption{
  padding:.5vh 0 .2vh;color:#8d877a;font-size:clamp(6px,.55vw,9px);letter-spacing:.1em
}
.focusTarget{transition:box-shadow .18s ease,border-color .18s ease}
.focusTarget.focused{border-color:#f0ce78;box-shadow:0 0 0 1px rgba(240,206,120,.22),0 0 24px rgba(215,173,83,.18)}
footer{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 2vw;border-top:1px solid rgba(215,173,83,.28);background:#071015;
  color:#8e877a;font-size:clamp(6px,.55vw,9px);font-weight:700;letter-spacing:.11em
}
footer span:nth-child(2){text-align:center}
footer span:last-child{text-align:right}

@media(max-width:700px){
  .app{grid-template-rows:8vh 7vh 58vh 22vh 5vh}
  .topbar{grid-template-columns:1fr auto;padding:0 3vw}
  .tagline{display:none}
  .brandName{font-size:4.4vw}
  .brandSub{font-size:1.8vw}
  .tabs{grid-column:1/-1;grid-row:2;align-self:end}
  .tabs button{min-width:0;height:4.2vh;font-size:2.6vw}
  .statusStrip{
    width:94vw;height:5.4vh
  }
  .statusStrip span{font-size:1.7vw}
  .statusStrip strong{font-size:2.4vw}
  .stage{grid-template-columns:1fr;padding:0 2vw}
  .scene{display:none}
  .fourCard{margin:0;padding:1vh 2vw}
  .fourHeading{height:6.6vh}
  .fourHeading h1{font-size:5vw}
  .fourHeading p{font-size:1.7vw}
  .fourBoard{height:calc(100% - 6.6vh);grid-template-rows:44% 56%;gap:.8vh}
  .top3{width:65vw;gap:.55vh}
  .prizeLabel{font-size:3.2vw}
  .prizeValue{font-size:8.2vw}
  .lower{gap:1.3vw}
  .set{grid-template-rows:3.2vh 1fr}
  .setTitle{font-size:2.4vw}
  .setGrid{padding:.35vh .7vw}
  .numberCell{font-size:3vw}
  .bottomGrid{padding:.8vh 2vw;gap:1vw}
  .miniCard{padding:.45vh 1vw;grid-template-rows:3.9vh 1fr 3vh}
  .miniHead span{font-size:2.3vw}
  .miniHead small{font-size:1.4vw}
  .miniHead>b{font-size:3.5vw}
  .rbSession span{font-size:1.45vw}
  .rbSession strong{width:8.5vw;font-size:3.2vw}
  .totoBoard{grid-template-columns:repeat(4,1fr);gap:.4vw}
  .totoBall{font-size:2.3vw}
  .totoPlus{font-size:3vw}
  .miniMeta span,.historyCaption{font-size:1.35vw}
  .miniMeta strong{font-size:1.7vw}
  .historyCard{grid-template-rows:3.9vh 1fr auto}
  .historyButton{height:4.2vh;min-height:0;font-size:1.9vw}
  footer{padding:0 2vw;font-size:1.25vw}
}
.brand{display:flex;align-items:center;gap:.8vw;min-width:max-content}
.brandLotus{width:clamp(34px,3.5vw,58px);height:clamp(26px,2.7vw,45px);object-fit:contain;object-position:center;mix-blend-mode:screen}
@media(max-width:700px){.brand{gap:1.5vw}.brandLotus{width:9vw;height:6.5vw}}


/* MACAU FULL-SCREEN BACKGROUND — approved visual */
.app{
  position:relative;
  isolation:isolate;
  z-index:3;
  background:#04070a;
}
.app::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(2,7,13,.10) 0%,rgba(2,7,13,.18) 46%,rgba(1,4,7,.30) 100%),
    url("/assets/macau-result-background-8k.jpg"),
    url("/assets/macau-result-background-8k.jpg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,left center,right center;
  background-size:100% 100%,55% 100%,55% 100%;
  filter:saturate(1.16) brightness(.92) contrast(1.06);
  transform:scale(1.012);
}
.app::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(1,7,10,.84) 0%,rgba(1,7,10,.63) 25%,rgba(1,7,10,.16) 52%,rgba(1,5,8,.03) 74%),
    linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.18) 39%,rgba(0,0,0,.18) 61%,rgba(0,0,0,.02));
}
.topbar{
  background:linear-gradient(180deg,rgba(5,14,20,.87),rgba(5,14,20,.66));
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border-bottom-color:rgba(230,184,83,.55);
  box-shadow:0 7px 28px rgba(0,0,0,.24);
}
.statusStrip{
  position:relative;
  z-index:4;
  background:linear-gradient(180deg,rgba(7,17,22,.93),rgba(4,12,16,.88));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 0 28px rgba(218,171,68,.12);
}
.stage{
  background:transparent;
}
.scene{
  background:transparent!important;
  filter:none;
}
.scene:after{
  background:linear-gradient(180deg,rgba(2,7,9,.02),rgba(2,7,9,.08));
}
.sceneLeft,.sceneRight{
  background-image:none!important;
}
.sceneText{
  color:#f1d38a;
  text-shadow:0 2px 14px #000,0 0 22px rgba(215,173,83,.24);
}
.fourCard{
  background:
    radial-gradient(circle at 50% 0%,rgba(216,173,83,.07),transparent 35%),
    linear-gradient(180deg,rgba(4,13,18,.96),rgba(3,10,14,.94));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-color:rgba(242,198,94,.96);
  box-shadow:
    0 0 0 1px rgba(255,230,157,.10) inset,
    0 0 18px rgba(226,174,65,.34),
    0 22px 55px rgba(0,0,0,.34);
}
.prizeRow,.set{
  background:linear-gradient(180deg,rgba(6,16,21,.96),rgba(4,11,15,.93));
}
.prizeLabel{
  background:linear-gradient(180deg,#f2cd70,#bd8730);
  box-shadow:inset 0 1px rgba(255,247,206,.58);
}
.bottomGrid{
  background:transparent;
}
.miniCard{
  background:
    radial-gradient(circle at 50% 0%,rgba(215,173,83,.045),transparent 42%),
    linear-gradient(180deg,rgba(4,14,19,.94),rgba(3,10,14,.91));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border-color:rgba(237,191,86,.84);
  box-shadow:0 8px 26px rgba(0,0,0,.28),0 0 17px rgba(218,171,68,.09);
}
footer{
  background:linear-gradient(180deg,rgba(4,12,16,.75),rgba(3,9,13,.88));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-top-color:rgba(222,177,75,.58);
}
.tabs{
  background:rgba(3,11,15,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.tabs button{
  background:rgba(4,13,18,.72);
}
.tabs button.on{
  background:linear-gradient(180deg,#f0cc70,#b47e29);
  color:#17110a;
  box-shadow:0 0 18px rgba(222,177,74,.34),inset 0 1px rgba(255,247,207,.55);
}
.rbSession strong,.totoBall{
  background:radial-gradient(circle at 34% 28%,#213239 0%,#0c171c 48%,#050d11 100%);
  box-shadow:0 7px 18px rgba(0,0,0,.38),inset 0 0 0 2px rgba(255,255,255,.03);
}

@media(max-width:700px){
  .app::before{
    background-image:
      linear-gradient(180deg,rgba(2,7,13,.16),rgba(1,5,9,.32)),
      url("/assets/macau-result-background-8k.jpg");
    background-repeat:no-repeat,no-repeat;
    background-position:center,center;
    background-size:100% 100%,cover;
    filter:saturate(1.12) brightness(.72) contrast(1.06);
  }
  .app::after{
    background:linear-gradient(180deg,rgba(1,6,10,.34),rgba(1,6,10,.69) 28%,rgba(1,6,10,.72) 72%,rgba(1,5,8,.54));
  }
  .fourCard,.miniCard,.statusStrip,.topbar,footer{
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
}



/* GLASS CONTAINERS — background stays visible through every panel */
.topbar{
  background:linear-gradient(180deg,rgba(4,13,18,.78),rgba(3,11,16,.68));
  backdrop-filter:blur(9px) saturate(1.12);
  -webkit-backdrop-filter:blur(9px) saturate(1.12);
}
.statusStrip{
  background:linear-gradient(180deg,rgba(5,16,21,.76),rgba(3,10,14,.70));
  backdrop-filter:blur(10px) saturate(1.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.12);
  border-color:rgba(236,191,88,.74);
}
.tabs{
  background:rgba(3,11,15,.68);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
}
.tabs button{
  background:rgba(3,12,16,.60);
}
.fourCard{
  background:
    radial-gradient(circle at 50% 0%,rgba(220,177,84,.075),transparent 40%),
    linear-gradient(180deg,rgba(3,13,18,.74),rgba(2,9,13,.70));
  backdrop-filter:blur(11px) saturate(1.13);
  -webkit-backdrop-filter:blur(11px) saturate(1.13);
  border-color:rgba(245,201,98,.95);
}
.prizeRow{
  background:linear-gradient(180deg,rgba(4,14,19,.90),rgba(2,9,13,.86));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.set{
  background:linear-gradient(180deg,rgba(4,14,19,.80),rgba(2,9,13,.76));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.setGrid{
  background:rgba(1,8,11,.18);
}
.numberCell{
  background:rgba(2,10,14,.18);
}
.miniCard{
  background:
    radial-gradient(circle at 50% 0%,rgba(217,173,81,.055),transparent 44%),
    linear-gradient(180deg,rgba(3,13,18,.69),rgba(2,9,13,.65));
  backdrop-filter:blur(9px) saturate(1.12);
  -webkit-backdrop-filter:blur(9px) saturate(1.12);
  border-color:rgba(239,193,89,.88);
}
.historyButton{
  background:rgba(2,10,14,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
footer{
  background:linear-gradient(180deg,rgba(3,11,15,.60),rgba(2,8,11,.70));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.rbSession strong,.totoBall{
  background:radial-gradient(circle at 34% 28%,rgba(33,50,57,.88) 0%,rgba(12,23,28,.82) 48%,rgba(5,13,17,.80) 100%);
}
@media(max-width:700px){
  .topbar{background:linear-gradient(180deg,rgba(4,13,18,.76),rgba(3,11,16,.66))}
  .statusStrip{background:linear-gradient(180deg,rgba(5,16,21,.74),rgba(3,10,14,.68))}
  .fourCard{
    background:
      radial-gradient(circle at 50% 0%,rgba(220,177,84,.065),transparent 40%),
      linear-gradient(180deg,rgba(3,13,18,.72),rgba(2,9,13,.68));
  }
  .set{background:linear-gradient(180deg,rgba(4,14,19,.78),rgba(2,9,13,.74))}
  .miniCard{background:linear-gradient(180deg,rgba(3,13,18,.67),rgba(2,9,13,.63))}
}


/* FINAL 16:9 DESIGN LOCK — 2026-09-20 */
.app{
  grid-template-rows:13vh 7vh 50vh 25vh 5vh;
  background:#02070b;
}
.app::before{
  background-image:
    linear-gradient(180deg,rgba(2,8,15,.03),rgba(2,8,15,.08) 60%,rgba(1,5,8,.17)),
    url("/assets/macau-result-background-8k.jpg"),
    url("/assets/macau-result-background-8k.jpg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center,left center,right center;
  background-size:100% 100%,49.5% 100%,50.5% 100%;
  filter:saturate(1.34) brightness(1.13) contrast(1.08);
  transform:none;
}
.app::after{
  background:
    radial-gradient(ellipse at 50% 45%,rgba(1,7,11,.72) 0%,rgba(1,7,11,.56) 27%,rgba(1,7,11,.15) 52%,rgba(1,5,8,0) 72%),
    linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.08) 34%,rgba(0,0,0,.08) 66%,rgba(0,0,0,.02));
}
.topbar{
  position:relative;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:visible;
}
.brand{
  position:absolute;
  left:16.4vw;
  top:.65vh;
  gap:.7vw;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));
}
.brandLotus{
  width:clamp(48px,4.15vw,70px);
  height:clamp(38px,3.3vw,56px);
}
.brandName{
  font-size:clamp(26px,2.55vw,43px);
  line-height:.92;
  letter-spacing:.035em;
  text-shadow:0 2px 11px rgba(0,0,0,.72);
}
.brandSub{
  margin-top:.55vh;
  font-size:clamp(8px,.74vw,12px);
  letter-spacing:.33em;
}
.tagline{
  position:absolute;
  right:11.8vw;
  top:1.35vh;
  display:grid;
  gap:.42vh;
  color:#eee9df;
  font-size:clamp(8px,.68vw,11px);
  line-height:1.25;
  text-shadow:0 2px 9px #000;
}
.tagline::after{
  content:"";
  display:block;
  width:70px;
  height:1px;
  margin-top:.6vh;
  margin-left:auto;
  background:linear-gradient(90deg,rgba(236,190,83,.18),#edc66d);
}
.tabs{
  position:absolute;
  left:50%;
  bottom:.45vh;
  transform:translateX(-50%);
  width:min(48.4vw,820px);
  height:5.45vh;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(239,195,91,.78);
  border-radius:8px;
  overflow:hidden;
  background:rgba(2,10,14,.77);
  box-shadow:0 0 14px rgba(223,174,59,.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.tabs button{
  height:100%;
  min-height:0;
  font-size:clamp(12px,1vw,17px);
  background:rgba(2,10,14,.72);
  border-right:1px solid rgba(255,255,255,.13);
}
.tabs button.on{
  background:linear-gradient(180deg,#f6d67b 0%,#dba53b 65%,#bd8126 100%);
  color:#171109;
  box-shadow:inset 0 1px rgba(255,250,215,.75),0 0 20px rgba(236,183,67,.35);
}
.statusStrip{
  width:min(48.4vw,820px);
  height:5.8vh;
  min-height:0;
  align-self:center;
  background:linear-gradient(180deg,rgba(3,14,19,.84),rgba(2,9,13,.77));
  border-color:rgba(242,198,95,.90);
  box-shadow:0 0 14px rgba(231,183,71,.17);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.statusStrip span{font-size:clamp(7px,.65vw,10px);color:#e7bb59}
.statusStrip strong{font-size:clamp(11px,.96vw,16px)}
.stage{
  grid-template-columns:25vw 50vw 25vw;
  background:transparent;
  overflow:visible;
}
.scene{background:transparent!important;filter:none}
.sceneLeft,.sceneRight{background-image:none!important}
.leftText{left:2.6vw;bottom:3.2vh}
.rightText{right:2.6vw;top:4vh}
.sceneText strong{font-size:clamp(14px,1.35vw,22px)}
.sceneText span{max-width:13vw;font-size:clamp(6px,.58vw,9px);line-height:1.55}
.fourCard{
  width:calc(100% - 14px);
  max-width:820px;
  justify-self:center;
  margin:0;
  padding:1vh .82vw .9vh;
  border-radius:11px;
  border-color:rgba(247,201,96,.96);
  background:
    radial-gradient(circle at 50% 0%,rgba(221,178,82,.07),transparent 38%),
    linear-gradient(180deg,rgba(3,13,18,.83),rgba(2,9,13,.79));
  box-shadow:
    0 0 0 1px rgba(255,232,159,.10) inset,
    0 0 13px rgba(229,178,65,.40),
    0 14px 42px rgba(0,0,0,.32);
  backdrop-filter:blur(8px) saturate(1.06);
  -webkit-backdrop-filter:blur(8px) saturate(1.06);
  overflow:hidden;
}
.fourCard::before,
.fourCard::after{
  content:none!important;
  display:none!important;
}
.fourHeading,.fourBoard{position:relative;z-index:1}
.fourHeading{
  height:6.2vh;
  gap:.85vw;
}
.fourHeading h1{font-size:clamp(24px,2.35vw,39px);color:#f0d17c}
.fourHeading p{margin:.18vh 0 0;font-size:clamp(7px,.61vw,10px);letter-spacing:.34em}
.fourBoard{
  height:calc(100% - 6.2vh);
  grid-template-rows:45% 55%;
  gap:.75vh;
}
.top3{
  width:min(28vw,470px);
  gap:.58vh;
}
.prizeRow{
  border-color:rgba(237,190,82,.84);
  background:linear-gradient(180deg,rgba(2,10,14,.96),rgba(1,7,10,.94));
  border-radius:6px;
  box-shadow:0 3px 14px rgba(0,0,0,.25);
}
.prizeLabel{
  background:linear-gradient(180deg,#f8d97f,#d9a23b 68%,#be842a);
  font-size:clamp(16px,1.45vw,24px);
}
.prizeValue{
  font-size:clamp(34px,3.25vw,55px);
  letter-spacing:.14em;
  color:#fbfaf4;
  text-shadow:0 1px 7px rgba(0,0,0,.72);
}
.lower{
  gap:.68vw;
}
.set{
  grid-template-rows:3vh 1fr;
  border-color:rgba(236,187,77,.85);
  background:linear-gradient(180deg,rgba(3,13,17,.76),rgba(2,9,13,.72));
  border-radius:7px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.setTitle{
  font-size:clamp(11px,1.08vw,18px);
  color:#f0d17c;
  border-bottom-color:rgba(231,181,70,.58);
}
.setGrid{padding:.18vh .45vw}
.numberCell{
  font-size:clamp(12px,1.02vw,17px);
  background:rgba(2,10,14,.27);
  border-color:rgba(255,255,255,.11);
}
.bottomGrid{
  width:min(64.6vw,1080px);
  justify-self:center;
  grid-template-columns:repeat(3,1fr);
  gap:.72vw;
  padding:1vh 0 .9vh;
  background:transparent;
}
.miniCard{
  padding:.6vh .72vw;
  grid-template-rows:4.2vh 1fr 3.1vh;
  border-color:rgba(242,195,86,.92);
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 0%,rgba(216,171,78,.06),transparent 44%),
    linear-gradient(180deg,rgba(3,13,18,.78),rgba(2,9,13,.74));
  box-shadow:0 0 12px rgba(227,176,59,.24),0 10px 25px rgba(0,0,0,.26);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.miniHead span{font-size:clamp(12px,1.08vw,18px);color:#f0d17c}
.miniHead small{font-size:clamp(6px,.55vw,9px);letter-spacing:.19em;color:#f2eee5}
.miniHead>b{font-size:clamp(18px,1.45vw,25px);color:#edc45d}
.rbSession span{font-size:clamp(7px,.58vw,9px);color:#eee8dc}
.rbSession strong{
  width:clamp(38px,3.15vw,52px);
  border-color:#e3b447;
  color:#f5db8b;
  background:radial-gradient(circle at 34% 28%,rgba(25,39,45,.96),rgba(5,13,17,.96) 67%);
}
.totoBoard{gap:.26vw}
.totoBall{
  border-color:#e3b447;
  font-size:clamp(10px,.92vw,15px);
}
.miniMeta{padding-top:.35vh}
.miniMeta span{font-size:clamp(6px,.52vw,8px);color:#e4ded2}
.miniMeta strong{font-size:clamp(8px,.68vw,11px)}
.historyButton{
  height:4.4vh;
  min-height:0;
  background:rgba(1,8,11,.68);
  border-color:rgba(232,186,79,.85);
  color:#f1d17b;
  font-size:clamp(9px,.78vw,13px);
}
.historyCaption{font-size:clamp(6px,.52vw,9px);color:#d8d1c4}
footer{
  background:linear-gradient(180deg,rgba(2,9,13,.72),rgba(1,6,9,.84));
  border-top-color:rgba(230,182,70,.62);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  padding:0 2.2vw;
  color:#d6d0c5;
}
@media (min-aspect-ratio: 16/9){
  .app{max-height:100dvh}
}
@media(max-width:700px){
  .app{grid-template-rows:13vh 7vh 55vh 21vh 4vh}
  .app::before{
    background-image:
      linear-gradient(180deg,rgba(1,6,10,.08),rgba(1,6,10,.18)),
      url("/assets/macau-result-background-8k.jpg");
    background-position:center,center;
    background-size:100% 100%,cover;
    filter:saturate(1.28) brightness(.88) contrast(1.08);
  }
  .app::after{
    background:linear-gradient(180deg,rgba(1,6,10,.24),rgba(1,6,10,.50) 28%,rgba(1,6,10,.58) 72%,rgba(1,5,8,.42));
  }
  .brand{
    left:50%;
    top:.55vh;
    transform:translateX(-50%);
    gap:1.1vw;
  }
  .brandLotus{width:10.5vw;height:7.4vw}
  .brandName{font-size:5vw;white-space:nowrap}
  .brandSub{font-size:1.7vw;text-align:center}
  .tagline{display:none}
  .tabs{
    bottom:.4vh;
    width:96vw;
    height:4.75vh;
  }
  .tabs button{font-size:2.6vw}
  .statusStrip{width:96vw;height:5.6vh}
  .statusStrip span{font-size:1.55vw}
  .statusStrip strong{font-size:2.35vw}
  .stage{grid-template-columns:1fr;padding:0 1.6vw}
  .scene{display:none}
  .fourCard{
    width:96vw;
    max-width:none;
    padding:.8vh 1.6vw .6vh;
  }
  .fourHeading{height:5.6vh}
  .fourHeading h1{font-size:5.5vw}
  .fourHeading p{font-size:1.6vw}
  .fourBoard{height:calc(100% - 5.6vh);grid-template-rows:43% 57%;gap:.55vh}
  .top3{width:67vw;gap:.45vh}
  .prizeLabel{font-size:3.1vw}
  .prizeValue{font-size:7.7vw}
  .lower{gap:1vw}
  .set{grid-template-rows:2.75vh 1fr}
  .setTitle{font-size:2.3vw}
  .numberCell{font-size:2.75vw}
  .bottomGrid{
    width:96vw;
    gap:.7vw;
    padding:.65vh 0 .5vh;
  }
  .miniCard{
    padding:.38vh .8vw;
    grid-template-rows:3.35vh 1fr 2.5vh;
  }
  .miniHead span{font-size:2.2vw}
  .miniHead small{font-size:1.22vw}
  .miniHead>b{font-size:3vw}
  .rbSession span{font-size:1.3vw}
  .rbSession strong{width:7.6vw;font-size:2.8vw}
  .totoBoard{grid-template-columns:repeat(4,1fr);gap:.28vw}
  .totoBall{font-size:2vw}
  .totoPlus{font-size:2.6vw}
  .miniMeta span,.historyCaption{font-size:1.12vw}
  .miniMeta strong{font-size:1.55vw}
  .historyCard{grid-template-rows:3.35vh 1fr auto}
  .historyButton{height:3.8vh;font-size:1.75vw}
  footer{font-size:1.08vw;padding:0 1.5vw}
}


/* TEXT CONTAINMENT FIX — prevent overflow / overlap without moving 4D layout */
.brand,
.brand > div,
.brandName,
.brandSub,
.tabs,
.tabs button,
.statusStrip,
.statusStrip > div,
.statusStrip span,
.statusStrip strong,
.fourCard,
.fourHeading,
.fourHeading > div,
.fourHeading h1,
.fourHeading p,
.fourBoard,
.top3,
.prizeRow,
.prizeLabel,
.prizeValue,
.lower,
.set,
.setTitle,
.setGrid,
.numberCell,
.bottomGrid,
.miniCard,
.miniHead,
.miniHead > div,
.miniHead span,
.miniHead small,
.rbBoard,
.rbSession,
.rbSession span,
.rbSession strong,
.totoBoard,
.totoBall,
.totoPlus,
.miniMeta,
.miniMeta span,
.miniMeta strong,
.historyButton,
.historyCaption,
footer,
footer span{
  min-width:0;
  min-height:0;
}

.brandName,
.brandSub,
.tabs button,
.statusStrip span,
.statusStrip strong,
.fourHeading h1,
.fourHeading p,
.prizeLabel,
.prizeValue,
.setTitle,
.numberCell,
.miniHead span,
.miniHead small,
.rbSession span,
.rbSession strong,
.totoBall,
.miniMeta span,
.miniMeta strong,
.historyButton,
.historyCaption,
footer span{
  overflow:hidden;
  text-overflow:ellipsis;
}

.brandName,
.brandSub,
.tabs button,
.statusStrip span,
.statusStrip strong,
.fourHeading h1,
.fourHeading p,
.prizeLabel,
.prizeValue,
.setTitle,
.numberCell,
.miniHead span,
.miniHead small,
.rbSession span,
.rbSession strong,
.totoBall,
.miniMeta span,
.miniMeta strong,
.historyButton{
  white-space:nowrap;
}

.brandName{line-height:1}
.brandSub{line-height:1.05}
.tabs button{line-height:1}
.statusStrip span{line-height:1}
.statusStrip strong{line-height:1.05}
.fourHeading{
  overflow:hidden;
  align-content:center;
}
.fourHeading h1{
  line-height:1;
}
.fourHeading p{
  line-height:1.1;
}
.fourBoard{
  overflow:hidden;
  grid-template-rows:minmax(0,45fr) minmax(0,55fr);
}
.top3{
  overflow:hidden;
  grid-template-rows:repeat(3,minmax(0,1fr));
}
.prizeRow{
  overflow:hidden;
  min-height:0;
}
.prizeLabel,
.prizeValue{
  min-height:0;
  height:100%;
  line-height:1;
  overflow:hidden;
}
.lower{
  overflow:hidden;
}
.set{
  overflow:hidden;
  grid-template-rows:minmax(0,3vh) minmax(0,1fr);
}
.setTitle{
  line-height:1;
  overflow:hidden;
}
.setGrid{
  overflow:hidden;
  grid-template-rows:repeat(5,minmax(0,1fr));
}
.numberCell{
  line-height:1;
  overflow:hidden;
}
.bottomGrid{
  overflow:hidden;
}
.miniCard{
  overflow:hidden;
}
.miniHead{
  overflow:hidden;
  gap:.35vw;
}
.miniHead > div{
  overflow:hidden;
}
.miniHead span{
  line-height:1.05;
}
.miniHead small{
  line-height:1.05;
}
.rbBoard,
.totoBoard{
  overflow:hidden;
}
.rbSession{
  overflow:hidden;
}
.rbSession span,
.rbSession strong,
.totoBall,
.totoPlus{
  line-height:1;
}
.miniMeta{
  overflow:hidden;
  gap:.4vw;
}
.miniMeta span,
.miniMeta strong{
  line-height:1;
}
.historyButton{
  overflow:hidden;
  line-height:1;
}
.historyCaption{
  line-height:1.15;
  overflow:hidden;
}
footer{
  overflow:hidden;
  gap:1vw;
}
footer span{
  line-height:1;
  white-space:nowrap;
}

/* Desktop text sizing guard */
@media(min-width:701px){
  .brandName{font-size:clamp(24px,2.25vw,38px)}
  .brandSub{font-size:clamp(8px,.66vw,11px)}
  .fourHeading h1{font-size:clamp(22px,2.05vw,34px)}
  .prizeLabel{font-size:clamp(14px,1.25vw,21px)}
  .prizeValue{font-size:clamp(30px,2.9vw,49px)}
  .miniHead span{font-size:clamp(11px,.98vw,16px)}
  .miniHead small{font-size:clamp(6px,.49vw,8px)}
}

/* Mobile text sizing guard */
@media(max-width:700px){
  .brand{
    width:90vw;
    max-width:90vw;
    justify-content:center;
  }
  .brand > div{
    max-width:70vw;
  }
  .brandName{
    font-size:4.5vw;
    max-width:70vw;
    text-align:center;
  }
  .brandSub{
    font-size:1.45vw;
    max-width:70vw;
    text-align:center;
  }
  .fourHeading h1{font-size:4.8vw}
  .fourHeading p{font-size:1.4vw}
  .fourBoard{
    grid-template-rows:minmax(0,43fr) minmax(0,57fr);
  }
  .top3{
    grid-template-rows:repeat(3,minmax(0,1fr));
  }
  .prizeLabel{font-size:2.8vw}
  .prizeValue{font-size:6.9vw}
  .set{
    grid-template-rows:minmax(0,2.65vh) minmax(0,1fr);
  }
  .setTitle{font-size:2.05vw}
  .numberCell{font-size:2.45vw}
  .miniCard{
    grid-template-rows:minmax(0,3.15vh) minmax(0,1fr) minmax(0,2.35vh);
  }
  .miniHead span{font-size:1.9vw}
  .miniHead small{font-size:1.02vw}
  .miniHead>b{font-size:2.5vw}
  .rbSession span{font-size:1.15vw}
  .rbSession strong{font-size:2.45vw}
  .totoBall{font-size:1.8vw}
  .totoPlus{font-size:2.25vw}
  .miniMeta span,.historyCaption{font-size:.98vw}
  .miniMeta strong{font-size:1.35vw}
  .historyCard{
    grid-template-rows:minmax(0,3.15vh) minmax(0,1fr) auto;
  }
  .historyButton{font-size:1.55vw}
  footer{font-size:.92vw}
}


/* FONT METRICS FIX — remove remaining glyph clipping */
.brandName{line-height:1.18}
.fourHeading h1{line-height:1.18}
.miniHead span{line-height:1.2}
.totoPlus{line-height:1.12}

@media(min-width:701px){
  .brandName{font-size:clamp(23px,2vw,32px)}
  .fourHeading h1{font-size:clamp(21px,1.8vw,29px)}
  .prizeValue{font-size:clamp(29px,2.7vw,45px)}
  .miniHead span{font-size:clamp(10px,.9vw,14px)}
  .totoPlus{font-size:clamp(14px,1.15vw,19px)}
}

@media(max-width:700px){
  .brandName{
    font-size:3.75vw;
    line-height:1.18;
  }
  .fourHeading h1{
    font-size:4.15vw;
    line-height:1.18;
  }
}


/* FINAL TEXT FIT — exact glyph height correction */
.brandName{line-height:1.25}
.fourHeading h1{line-height:1.25}

@media(min-width:701px){
  .prizeValue{font-size:clamp(28px,2.5vw,42px)}
}

@media(max-width:700px){
  .fourHeading h1{line-height:1.25}
}


/* MAIN VIEW: 4D + RB + TOTO ONLY */
.tabs{
  grid-template-columns:repeat(3,1fr);
  width:min(42vw,710px);
}
.bottomGrid{
  width:min(45vw,760px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-self:center;
  gap:.9vw;
}
@media(max-width:700px){
  .tabs{
    width:96vw;
    grid-template-columns:repeat(3,1fr);
  }
  .bottomGrid{
    width:96vw;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1vw;
  }
}


/* FINAL STACK: RB ABOVE, TOTO BELOW */
.bottomGrid{
  width:min(42vw,710px);
  justify-self:center;
  grid-template-columns:1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:.7vh;
  padding:.55vh 0 .65vh;
}
.miniCard{
  grid-template-rows:minmax(0,3.15vh) minmax(0,1fr) minmax(0,2.25vh);
  padding:.38vh .72vw;
}
.rbBoard{
  place-items:center;
}
.rbSession{
  gap:.2vh;
}
.rbSession strong{
  width:clamp(30px,4.2vh,42px);
  height:clamp(30px,4.2vh,42px);
}
.totoBoard{
  grid-template-columns:repeat(8,minmax(0,1fr));
  place-items:center;
  gap:.18vw;
}
.totoBall{
  width:clamp(28px,2.5vw,40px);
  height:clamp(28px,2.5vw,40px);
  aspect-ratio:auto;
}
.totoPlus{
  display:grid;
  place-items:center;
}

@media(max-width:700px){
  .bottomGrid{
    width:96vw;
    grid-template-columns:1fr;
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:.6vh;
    padding:.45vh 0 .55vh;
  }
  .miniCard{
    grid-template-rows:minmax(0,2.95vh) minmax(0,1fr) minmax(0,2.05vh);
    padding:.3vh 1vw;
  }
  .rbSession strong{
    width:min(7.2vw,32px);
    height:min(7.2vw,32px);
  }
  .totoBall{
    width:min(5.8vw,26px);
    height:min(5.8vw,26px);
  }
}


/* STACK FIT: RB content height */
.rbBoard{
  overflow:hidden;
  align-items:center;
}
.rbSession{
  gap:0;
  align-content:center;
}
.rbSession strong{
  width:clamp(28px,3.7vh,36px);
  height:clamp(28px,3.7vh,36px);
}
@media(max-width:700px){
  .rbSession strong{
    width:min(6.6vw,28px);
    height:min(6.6vw,28px);
  }
}


/* RB digit width fit */
.rbSession strong{
  width:clamp(30px,4vh,38px);
}
@media(max-width:700px){
  .rbSession strong{
    width:min(7.2vw,30px);
  }
}


/* CLEAN RESULT VIEW — TITLES + RESULT VALUES ONLY */
.app{
  grid-template-rows:13vh 62vh 25vh;
}
.brandSub,
.tagline,
.statusStrip,
.sceneText,
.fourHeading p,
.miniHead small,
.miniHead>b,
.miniMeta,
footer{
  display:none!important;
}
.stage{
  grid-row:2;
}
.bottomGrid{
  grid-row:3;
}
.fourHeading{
  height:5.2vh;
}
.fourBoard{
  height:calc(100% - 5.2vh);
}
.miniCard{
  grid-template-rows:minmax(0,3.2vh) minmax(0,1fr);
}
.miniHead{
  justify-content:center;
  text-align:center;
}
.miniHead>div{
  width:100%;
  display:block;
  text-align:center;
}
.miniHead span{
  display:block;
}
.rbSession{
  display:grid;
  place-items:center;
}
.rbSession span{
  display:none!important;
}
.rbBoard{
  grid-template-columns:repeat(3,minmax(0,1fr));
  place-items:center;
}
.totoBoard{
  grid-template-columns:repeat(8,minmax(0,1fr));
  place-items:center;
}
@media(max-width:700px){
  .app{
    grid-template-rows:13vh 62vh 25vh;
  }
  .fourHeading{
    height:5vh;
  }
  .fourBoard{
    height:calc(100% - 5vh);
  }
  .miniCard{
    grid-template-rows:minmax(0,2.8vh) minmax(0,1fr);
  }
  .miniHead span{
    font-size:2.1vw;
  }
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
}


/* BACKGROUND VISIBLE INSIDE CONTAINERS — final glass pass */
.app::after{
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(1,7,11,.34) 0%,
      rgba(1,7,11,.22) 28%,
      rgba(1,7,11,.08) 52%,
      rgba(1,5,8,0) 74%),
    linear-gradient(90deg,
      rgba(0,0,0,0),
      rgba(0,0,0,.03) 34%,
      rgba(0,0,0,.03) 66%,
      rgba(0,0,0,0));
}
.fourCard{
  background:
    radial-gradient(circle at 50% 0%,rgba(227,184,86,.07),transparent 42%),
    linear-gradient(180deg,rgba(3,13,18,.46),rgba(2,9,13,.40));
  backdrop-filter:blur(2.5px) saturate(1.12);
  -webkit-backdrop-filter:blur(2.5px) saturate(1.12);
  box-shadow:
    0 0 0 1px rgba(255,232,159,.12) inset,
    0 0 15px rgba(229,178,65,.34),
    0 12px 34px rgba(0,0,0,.22);
}
.prizeRow{
  background:linear-gradient(180deg,rgba(2,10,14,.62),rgba(1,7,10,.55));
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
.set{
  background:linear-gradient(180deg,rgba(3,13,17,.40),rgba(2,9,13,.34));
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
.setGrid{
  background:rgba(1,8,12,.06);
}
.numberCell{
  background:rgba(2,10,14,.12);
  text-shadow:0 2px 5px rgba(0,0,0,.85);
}
.miniCard{
  background:
    radial-gradient(circle at 50% 0%,rgba(216,171,78,.055),transparent 48%),
    linear-gradient(180deg,rgba(3,13,18,.38),rgba(2,9,13,.31));
  backdrop-filter:blur(2px) saturate(1.12);
  -webkit-backdrop-filter:blur(2px) saturate(1.12);
  box-shadow:
    0 0 0 1px rgba(255,230,157,.08) inset,
    0 0 12px rgba(227,176,59,.22),
    0 8px 20px rgba(0,0,0,.20);
}
.rbSession strong,
.totoBall{
  background:radial-gradient(circle at 34% 28%,
    rgba(27,42,49,.72) 0%,
    rgba(6,15,19,.64) 58%,
    rgba(3,10,13,.58) 100%);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
.fourHeading h1,
.miniHead span,
.prizeValue,
.setTitle,
.numberCell,
.rbSession strong,
.totoBall,
.totoPlus{
  text-shadow:0 2px 7px rgba(0,0,0,.88),0 0 10px rgba(0,0,0,.34);
}
@media(max-width:700px){
  .app::after{
    background:linear-gradient(180deg,
      rgba(1,6,10,.10),
      rgba(1,6,10,.24) 30%,
      rgba(1,6,10,.28) 72%,
      rgba(1,5,8,.18));
  }
  .fourCard{
    background:
      radial-gradient(circle at 50% 0%,rgba(227,184,86,.06),transparent 42%),
      linear-gradient(180deg,rgba(3,13,18,.48),rgba(2,9,13,.42));
  }
  .miniCard{
    background:
      linear-gradient(180deg,rgba(3,13,18,.40),rgba(2,9,13,.34));
  }
}


/* RB + TOTO SIZE UP — keep 4D unchanged */
.bottomGrid{
  width:min(54vw,900px);
  gap:.75vh;
}
.miniCard{
  padding:.42vh 1vw;
}
.miniHead{
  min-height:0;
}
.miniHead span{
  font-size:clamp(14px,1.15vw,19px);
  letter-spacing:.04em;
}
.rbBoard{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1vw;
}
.rbSession strong{
  width:clamp(40px,5.6vh,50px);
  height:clamp(40px,5.6vh,50px);
  font-size:clamp(17px,1.45vw,24px);
  border-width:2px;
}
.totoBoard{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:.5vw;
}
.totoBall{
  width:clamp(40px,3.4vw,48px);
  height:clamp(40px,3.4vw,48px);
  font-size:clamp(14px,1.05vw,18px);
  border-width:2px;
}
.totoPlus{
  font-size:clamp(18px,1.35vw,23px);
}

@media(max-width:700px){
  .bottomGrid{
    width:96vw;
    gap:.65vh;
  }
  .miniCard{
    padding:.35vh 1.25vw;
  }
  .miniHead span{
    font-size:3vw;
  }
  .rbBoard{
    gap:1.8vw;
  }
  .rbSession strong{
    width:min(9.5vw,38px);
    height:min(9.5vw,38px);
    font-size:3.5vw;
  }
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:.55vw;
  }
  .totoBall{
    width:min(8.5vw,34px);
    height:min(8.5vw,34px);
    font-size:2.8vw;
  }
  .totoPlus{
    font-size:3.3vw;
  }
}


/* UNIFIED RESULT NUMBER SIZE — match 1ST value */
:root{
  --main-result-number-size:clamp(28px,2.5vw,42px);
}
.prizeValue,
.numberCell,
.rbSession strong,
.totoBall{
  font-size:var(--main-result-number-size)!important;
  line-height:1!important;
}
.rbSession strong,
.totoBall{
  width:clamp(54px,4.1vw,60px);
  height:clamp(54px,4.1vw,60px);
}
.numberCell{
  font-weight:800;
}
@media(max-width:700px){
  :root{
    --main-result-number-size:6.9vw;
  }
  .rbSession strong,
  .totoBall{
    width:min(10.5vw,42px);
    height:min(10.5vw,42px);
  }
}


/* RB + TOTO CIRCLE FIT — larger circles, 1ST-sized numbers */
.miniCard{
  grid-template-rows:minmax(0,2.7vh) minmax(0,1fr);
  padding:.25vh .9vw;
}
.rbBoard,
.totoBoard{
  overflow:hidden;
  align-items:center;
}
.rbSession{
  display:grid;
  place-items:center;
  overflow:visible;
}
.rbSession strong,
.totoBall{
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:none;
  line-height:1!important;
  font-size:var(--main-result-number-size)!important;
  border-width:2px;
}
.rbSession strong{
  width:clamp(52px,7vh,60px);
  height:clamp(52px,7vh,60px);
}
.totoBoard{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:.35vw;
}
.totoBall{
  width:clamp(52px,4.25vw,60px);
  height:clamp(52px,4.25vw,60px);
}
.totoPlus{
  display:grid;
  place-items:center;
  font-size:var(--main-result-number-size)!important;
  line-height:1;
}

@media(max-width:700px){
  .miniCard{
    grid-template-rows:minmax(0,2.45vh) minmax(0,1fr);
    padding:.2vh .7vw;
  }
  .rbSession strong{
    width:min(11.2vw,44px);
    height:min(11.2vw,44px);
  }
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:.45vw;
  }
  .totoBall{
    width:min(10.8vw,42px);
    height:min(10.8vw,42px);
  }
}


/* FINAL RB/TOTO AUTO CIRCLE FIT */
.rbSession strong,
.totoBall{
  width:min(calc(var(--main-result-number-size) + 18px),100%)!important;
  height:auto!important;
  aspect-ratio:1/1;
  max-height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.totoPlus{
  width:min(calc(var(--main-result-number-size) + 18px),100%);
  height:min(calc(var(--main-result-number-size) + 18px),100%);
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  line-height:.88!important;
}
@media(max-width:700px){
  .rbSession strong,
  .totoBall{
    width:min(calc(var(--main-result-number-size) + 18px),100%)!important;
    height:auto!important;
  }
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 18px),100%);
    height:min(calc(var(--main-result-number-size) + 18px),100%);
  }
}


/* FINAL EQUAL RB/TOTO CIRCLE DIAMETER */
.rbSession strong,
.totoBall{
  width:calc(var(--main-result-number-size) + 18px)!important;
  height:calc(var(--main-result-number-size) + 18px)!important;
  max-width:100%;
  max-height:none!important;
  aspect-ratio:1/1;
  justify-self:center;
  align-self:center;
}
.rbSession{
  width:100%;
  height:100%;
  place-items:center;
}
.totoPlus{
  width:calc(var(--main-result-number-size) + 18px);
  height:calc(var(--main-result-number-size) + 18px);
  max-width:100%;
  max-height:none;
  justify-self:center;
  align-self:center;
}
@media(max-width:700px){
  .rbSession strong,
  .totoBall,
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 18px),11.2vw)!important;
    height:min(calc(var(--main-result-number-size) + 18px),11.2vw)!important;
  }
}


/* COMPACT TOP BAR — move category tabs up, enlarge result containers */
.app{
  grid-template-rows:9vh 64vh 27vh;
}
.topbar{
  height:9vh;
  min-height:0;
}
.brand{
  left:4vw;
  top:50%;
  transform:translateY(-50%);
}
.tabs{
  top:50%;
  bottom:auto;
  transform:translate(-50%,-50%);
  height:4.8vh;
}
.stage{
  min-height:0;
}
.fourCard{
  height:100%;
}
.bottomGrid{
  height:100%;
  padding:.45vh 0 .55vh;
  gap:.75vh;
}
.miniCard{
  min-height:0;
}

@media(max-width:700px){
  .app{
    grid-template-rows:10vh 63vh 27vh;
  }
  .topbar{
    height:10vh;
  }
  .brand{
    left:50%;
    top:.18vh;
    transform:translateX(-50%);
  }
  .tabs{
    top:auto;
    bottom:.15vh;
    transform:translateX(-50%);
    height:4.15vh;
  }
  .bottomGrid{
    height:100%;
    padding:.35vh 0 .45vh;
    gap:.6vh;
  }
}


/* PREMIUM BILLIARD BALLS + ONE ACTIVE ROLL */
.rbBoard,
.totoBoard{
  position:relative;
  isolation:isolate;
}
.rbSession strong,
.totoBall,
.billiardRollBall{
  position:relative;
  isolation:isolate;
  border-radius:50%;
  color:#111!important;
  border:2px solid rgba(245,207,111,.96)!important;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.25) 8% 13%,transparent 14%),
    radial-gradient(circle at 50% 50%,#f7f0df 0 33%,#e9dec5 34% 40%,transparent 41%),
    radial-gradient(circle at 35% 30%,#e9c96e 0%,#a27122 48%,#603c0d 71%,#1e1205 100%)!important;
  box-shadow:
    inset -8px -10px 15px rgba(0,0,0,.30),
    inset 7px 7px 12px rgba(255,244,195,.13),
    0 6px 14px rgba(0,0,0,.36),
    0 0 9px rgba(232,188,77,.22)!important;
  text-shadow:none!important;
}
.rbSession strong::after,
.totoBall::after,
.billiardRollBall::after{
  content:"";
  position:absolute;
  left:17%;
  top:13%;
  width:24%;
  height:13%;
  border-radius:50%;
  background:rgba(255,255,255,.56);
  filter:blur(.5px);
  transform:rotate(-28deg);
  pointer-events:none;
}
.rbSession strong,
.totoBall{
  transition:opacity .16s ease,filter .16s ease,transform .16s ease;
}
.rbSession strong.is-current-release,
.totoBall.is-current-release{
  opacity:.12;
  filter:blur(1px);
  transform:scale(.92);
}
.billiardRollLane{
  position:absolute;
  inset:0;
  z-index:8;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .14s ease;
}
.billiardRollLane[hidden]{
  display:none!important;
}
.billiardRollLane.is-active{
  opacity:1;
}
.billiardRollBall{
  position:absolute;
  left:8%;
  top:50%;
  width:calc(var(--main-result-number-size) + 24px);
  height:calc(var(--main-result-number-size) + 24px);
  max-width:16%;
  max-height:78%;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  will-change:left,transform;
}
.billiardRollBall .rollNumber{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:68%;
  height:68%;
  border-radius:50%;
  color:#111;
  font-size:var(--main-result-number-size);
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.billiardRollLane.roll-fast .billiardRollBall{
  animation:billiardTravel .34s linear infinite;
}
.billiardRollLane.roll-mid .billiardRollBall{
  animation:billiardTravel .58s linear infinite;
}
.billiardRollLane.roll-slow .billiardRollBall{
  animation:billiardTravel .92s ease-in-out infinite;
}
.billiardRollLane.roll-landed .billiardRollBall{
  left:50%;
  animation:billiardLand .42s cubic-bezier(.16,.84,.3,1) both;
  box-shadow:
    inset -8px -10px 15px rgba(0,0,0,.30),
    inset 7px 7px 12px rgba(255,244,195,.13),
    0 7px 16px rgba(0,0,0,.40),
    0 0 20px rgba(241,199,94,.50)!important;
}
@keyframes billiardTravel{
  0%{left:8%;transform:translate(-50%,-50%) scale(.97)}
  25%{transform:translate(-50%,-53%) scale(1)}
  50%{left:92%;transform:translate(-50%,-50%) scale(1.02)}
  75%{transform:translate(-50%,-47%) scale(1)}
  100%{left:8%;transform:translate(-50%,-50%) scale(.97)}
}
@keyframes billiardLand{
  0%{transform:translate(-50%,-50%) scale(1.06)}
  62%{transform:translate(-50%,-50%) scale(.94)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
@media(max-width:700px){
  .billiardRollBall{
    width:min(calc(var(--main-result-number-size) + 22px),13vw);
    height:min(calc(var(--main-result-number-size) + 22px),13vw);
    max-width:none;
    max-height:80%;
  }
}


/* ROLLING BALL NUMBER FIT — keep 1ST font size */
.billiardRollBall .rollNumber{
  width:84%;
  height:84%;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
}


/* HIGH-CONTRAST BILLIARD PASS — clear static + active balls */
.rbSession strong,
.totoBall{
  width:min(calc(var(--main-result-number-size) + 30px),100%)!important;
  height:auto!important;
  aspect-ratio:1/1;
  border:3px solid #f6d477!important;
  color:#050505!important;
  font-weight:900!important;
  background:
    radial-gradient(circle at 31% 22%,rgba(255,255,255,1) 0 6%,rgba(255,255,255,.52) 7% 12%,transparent 13%),
    radial-gradient(circle at 50% 50%,#fffdf8 0 35%,#eee5d3 36% 48%,transparent 49%),
    radial-gradient(circle at 34% 30%,#ffd970 0%,#d6a12d 39%,#8a5710 68%,#271505 100%)!important;
  box-shadow:
    inset -8px -10px 14px rgba(0,0,0,.34),
    inset 6px 6px 10px rgba(255,255,255,.16),
    0 0 0 1px rgba(255,249,214,.30),
    0 7px 15px rgba(0,0,0,.42),
    0 0 14px rgba(245,202,92,.38)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.88)!important;
}
.rbSession strong::after,
.totoBall::after{
  width:27%;
  height:15%;
  left:16%;
  top:11%;
  background:rgba(255,255,255,.78);
  filter:blur(.3px);
}

.billiardRollLane{
  z-index:20;
  background:
    radial-gradient(ellipse at center,rgba(248,205,92,.16),rgba(248,205,92,.045) 44%,transparent 72%),
    linear-gradient(90deg,transparent,rgba(255,226,145,.08) 14%,rgba(255,226,145,.08) 86%,transparent);
  border-top:1px solid rgba(245,205,100,.18);
  border-bottom:1px solid rgba(245,205,100,.18);
}
.billiardRollLane.is-active{
  opacity:1;
}
.billiardRollBall{
  width:clamp(74px,6.2vw,88px)!important;
  height:clamp(74px,6.2vw,88px)!important;
  max-width:none!important;
  max-height:88%!important;
  border:4px solid #ffe28c!important;
  color:#050505!important;
  background:
    radial-gradient(circle at 30% 20%,#fff 0 7%,rgba(255,255,255,.58) 8% 14%,transparent 15%),
    radial-gradient(circle at 50% 50%,#fff 0 36%,#f1e6d2 37% 50%,transparent 51%),
    radial-gradient(circle at 34% 30%,#ffdf73 0%,#d59d20 40%,#7e4a08 68%,#1e0f02 100%)!important;
  box-shadow:
    inset -12px -14px 18px rgba(0,0,0,.36),
    inset 8px 8px 14px rgba(255,255,255,.18),
    0 0 0 2px rgba(255,246,202,.22),
    0 8px 20px rgba(0,0,0,.48),
    0 0 26px rgba(255,210,82,.72)!important;
}
.billiardRollBall .rollNumber{
  width:78%;
  height:78%;
  color:#050505!important;
  font-weight:950!important;
  font-size:var(--main-result-number-size)!important;
  line-height:1!important;
  text-shadow:0 1px 0 #fff!important;
}
.billiardRollLane.roll-fast .rollNumber{
  animation:billiardNumberSpin .34s linear infinite;
}
.billiardRollLane.roll-mid .rollNumber{
  animation:billiardNumberSpin .58s linear infinite;
}
.billiardRollLane.roll-slow .rollNumber{
  animation:billiardNumberSpin .92s linear infinite;
}
.billiardRollLane.roll-landed .rollNumber{
  animation:none;
  transform:rotate(0deg);
}
@keyframes billiardNumberSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.billiardRollLane.roll-landed .billiardRollBall{
  box-shadow:
    inset -12px -14px 18px rgba(0,0,0,.34),
    inset 8px 8px 14px rgba(255,255,255,.18),
    0 0 0 2px rgba(255,249,215,.30),
    0 9px 22px rgba(0,0,0,.48),
    0 0 34px rgba(255,218,105,.95)!important;
}
@media(max-width:700px){
  .rbSession strong,
  .totoBall{
    width:min(calc(var(--main-result-number-size) + 26px),11.4vw)!important;
    height:min(calc(var(--main-result-number-size) + 26px),11.4vw)!important;
  }
  .billiardRollBall{
    width:min(calc(var(--main-result-number-size) + 34px),16vw)!important;
    height:min(calc(var(--main-result-number-size) + 34px),16vw)!important;
    max-height:88%!important;
  }
}


/* BILLIARD VISIBILITY FIX — perfect circle + clearer mobile TOTO */
.billiardRollLane{
  inset:1px;
  border:0!important;
  box-shadow:
    inset 0 1px rgba(245,205,100,.16),
    inset 0 -1px rgba(245,205,100,.16);
}
.billiardRollBall{
  --active-ball-size:clamp(60px,5vw,68px);
  width:var(--active-ball-size)!important;
  height:var(--active-ball-size)!important;
  max-width:none!important;
  max-height:none!important;
  min-width:var(--active-ball-size)!important;
  min-height:var(--active-ball-size)!important;
  aspect-ratio:1/1!important;
  border:4px solid #ffe69b!important;
  background:
    radial-gradient(circle at 29% 19%,#fff 0 8%,rgba(255,255,255,.62) 9% 15%,transparent 16%),
    radial-gradient(circle at 50% 50%,#fff 0 38%,#f6eddd 39% 52%,transparent 53%),
    radial-gradient(circle at 34% 30%,#ffe477 0%,#e1a91e 40%,#8d5306 70%,#241100 100%)!important;
  box-shadow:
    inset -10px -12px 17px rgba(0,0,0,.34),
    inset 7px 7px 12px rgba(255,255,255,.22),
    0 0 0 2px rgba(255,251,222,.36),
    0 8px 18px rgba(0,0,0,.45),
    0 0 30px rgba(255,216,90,.90)!important;
}
.billiardRollBall .rollNumber{
  width:88%;
  height:88%;
  overflow:hidden;
  color:#050505!important;
  font-weight:950!important;
}
.rbSession strong,
.totoBall{
  background:
    radial-gradient(circle at 30% 20%,#fff 0 7%,rgba(255,255,255,.54) 8% 13%,transparent 14%),
    radial-gradient(circle at 50% 50%,#fff 0 37%,#f0e6d5 38% 51%,transparent 52%),
    radial-gradient(circle at 34% 30%,#ffd95f 0%,#d09a20 40%,#7b4708 69%,#211000 100%)!important;
}
@media(max-width:700px){
  .totoBoard{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr));
    column-gap:1.6vw!important;
    row-gap:.15vh!important;
    place-items:center;
  }
  .totoBall{
    width:min(calc(var(--main-result-number-size) + 28px),13vw)!important;
    height:min(calc(var(--main-result-number-size) + 28px),13vw)!important;
  }
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 28px),13vw)!important;
    height:min(calc(var(--main-result-number-size) + 28px),13vw)!important;
  }
  .billiardRollBall{
    --active-ball-size:min(calc(var(--main-result-number-size) + 34px),15.5vw);
    width:var(--active-ball-size)!important;
    height:var(--active-ball-size)!important;
    min-width:var(--active-ball-size)!important;
    min-height:var(--active-ball-size)!important;
  }
}


/* CLEAR ROLL FINAL — readable number, larger lower area */
.app{
  grid-template-rows:9vh 61vh 30vh;
}
.billiardRollBall,
.billiardRollBall .rollNumber{
  box-sizing:border-box;
}
.billiardRollBall .rollNumber{
  animation:none!important;
  transform:none!important;
  width:92%;
  height:92%;
}
.billiardRollLane.roll-fast .billiardRollBall::after{
  animation:billiardGlossMove .34s linear infinite;
}
.billiardRollLane.roll-mid .billiardRollBall::after{
  animation:billiardGlossMove .58s linear infinite;
}
.billiardRollLane.roll-slow .billiardRollBall::after{
  animation:billiardGlossMove .92s ease-in-out infinite;
}
.billiardRollLane.roll-landed .billiardRollBall::after{
  animation:none;
}
@keyframes billiardGlossMove{
  0%{left:14%;top:10%;transform:rotate(-28deg) scale(1)}
  25%{left:54%;top:14%;transform:rotate(18deg) scale(.82)}
  50%{left:60%;top:56%;transform:rotate(82deg) scale(.72)}
  75%{left:18%;top:58%;transform:rotate(145deg) scale(.82)}
  100%{left:14%;top:10%;transform:rotate(332deg) scale(1)}
}
@media(max-width:700px){
  .app{
    grid-template-rows:10vh 60vh 30vh;
  }
}


/* MOBILE TOTO TWO-ROW FIT */
@media(max-width:700px){
  .totoBall,
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 26px),12vw)!important;
    height:min(calc(var(--main-result-number-size) + 26px),12vw)!important;
  }
  .totoBoard{
    row-gap:0!important;
  }
}


/* TOTO MOBILE — KEEP ONE HORIZONTAL ROW */
@media(max-width:700px){
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    column-gap:.55vw!important;
    row-gap:0!important;
    place-items:center;
    align-items:center;
    width:100%;
    min-width:0;
    overflow:hidden;
  }
  .totoBall,
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 16px),9.15vw)!important;
    height:min(calc(var(--main-result-number-size) + 16px),9.15vw)!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    flex:none;
  }
  .totoBall{
    font-size:min(var(--main-result-number-size),5.45vw)!important;
    line-height:1!important;
  }
  .totoPlus{
    font-size:min(var(--main-result-number-size),5.2vw)!important;
    line-height:1!important;
  }
  #toto{
    padding-left:.45vw!important;
    padding-right:.45vw!important;
  }
}


/* IVORY PEARL BILLIARD — premium RB/TOTO palette */
:root{
  --billiard-ink:#10243c;
  --billiard-ivory:#fffaf0;
  --billiard-ivory-deep:#e9dfcb;
  --billiard-ring:#d8b65f;
  --billiard-champagne:#d8ad4f;
  --billiard-champagne-deep:#9a681b;
}
#rb .miniHead span,
#toto .miniHead span{
  color:#f2dda3!important;
  font-weight:850!important;
  letter-spacing:.075em;
  text-shadow:0 2px 8px rgba(0,0,0,.42)!important;
}
.rbSession strong,
.totoBall{
  color:var(--billiard-ink)!important;
  font-weight:950!important;
  letter-spacing:-.045em;
  text-shadow:0 1px 0 rgba(255,255,255,.92)!important;
  border:2px solid var(--billiard-ring)!important;
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,1) 0 7%,rgba(255,255,255,.72) 8% 13%,transparent 14%),
    radial-gradient(circle at 50% 45%,#fffdf8 0 53%,#f6efe2 54% 67%,#e9dfcb 79%,#c9bda8 100%)!important;
  box-shadow:
    inset -7px -9px 14px rgba(67,53,31,.16),
    inset 5px 5px 9px rgba(255,255,255,.72),
    0 0 0 1px rgba(255,247,215,.18),
    0 5px 11px rgba(0,0,0,.28)!important;
}
.rbSession strong::after,
.totoBall::after{
  left:17%;
  top:12%;
  width:25%;
  height:13%;
  background:rgba(255,255,255,.80);
  filter:blur(.35px);
}
.totoBoard .totoBall:last-child{
  color:var(--billiard-ink)!important;
  border-color:#f0cf79!important;
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.50) 8% 13%,transparent 14%),
    radial-gradient(circle at 50% 45%,#f7dda0 0 46%,#e5bd66 47% 66%,var(--billiard-champagne) 67% 80%,var(--billiard-champagne-deep) 100%)!important;
  box-shadow:
    inset -8px -10px 14px rgba(69,40,5,.20),
    inset 5px 5px 9px rgba(255,245,205,.55),
    0 0 0 1px rgba(255,237,177,.23),
    0 5px 12px rgba(0,0,0,.30)!important;
}
.totoPlus{
  color:#e8c86e!important;
  font-weight:800!important;
  text-shadow:0 2px 7px rgba(0,0,0,.40)!important;
}
.billiardRollLane{
  background:
    radial-gradient(ellipse at center,rgba(255,247,222,.07),transparent 62%)!important;
}
.billiardRollBall{
  color:var(--billiard-ink)!important;
  border:3px solid #e3c36f!important;
  background:
    radial-gradient(circle at 29% 20%,#fff 0 8%,rgba(255,255,255,.75) 9% 14%,transparent 15%),
    radial-gradient(circle at 50% 45%,#fffdf8 0 53%,#f5eddf 54% 68%,#e7dcc7 81%,#c5b8a2 100%)!important;
  box-shadow:
    inset -8px -10px 14px rgba(63,48,28,.17),
    inset 6px 6px 10px rgba(255,255,255,.74),
    0 0 0 1px rgba(255,244,200,.22),
    0 7px 16px rgba(0,0,0,.34),
    0 0 16px rgba(231,196,111,.28)!important;
}
.billiardRollBall .rollNumber{
  color:var(--billiard-ink)!important;
  font-weight:950!important;
  letter-spacing:-.045em;
  text-shadow:0 1px 0 rgba(255,255,255,.95)!important;
}
.billiardRollLane.is-bonus-roll .billiardRollBall{
  border-color:#f0cf79!important;
  background:
    radial-gradient(circle at 29% 20%,#fff 0 8%,rgba(255,255,255,.55) 9% 14%,transparent 15%),
    radial-gradient(circle at 50% 45%,#f8e0a5 0 47%,#e7c069 48% 67%,#d6a947 68% 81%,#95651b 100%)!important;
  box-shadow:
    inset -8px -10px 14px rgba(69,40,5,.20),
    inset 6px 6px 10px rgba(255,246,208,.58),
    0 0 0 1px rgba(255,235,168,.25),
    0 7px 17px rgba(0,0,0,.35),
    0 0 19px rgba(229,190,91,.33)!important;
}
.billiardRollLane.roll-landed .billiardRollBall{
  box-shadow:
    inset -8px -10px 14px rgba(63,48,28,.17),
    inset 6px 6px 10px rgba(255,255,255,.74),
    0 0 0 1px rgba(255,244,200,.25),
    0 8px 18px rgba(0,0,0,.36),
    0 0 19px rgba(231,196,111,.36)!important;
}
.billiardRollLane.is-bonus-roll.roll-landed .billiardRollBall{
  box-shadow:
    inset -8px -10px 14px rgba(69,40,5,.20),
    inset 6px 6px 10px rgba(255,246,208,.58),
    0 0 0 1px rgba(255,235,168,.28),
    0 8px 18px rgba(0,0,0,.36),
    0 0 21px rgba(229,190,91,.40)!important;
}


/* MACAU CASINO BLACK — professional billiard result balls */
:root{
  --casino-ink:#081523;
  --casino-ivory:#f6f0e4;
  --casino-ivory-deep:#ddd3c2;
  --casino-gold:#c9a44e;
  --casino-gold-soft:#ddc57d;
  --casino-black:#050a10;
  --casino-navy:#0a1725;
  --casino-burgundy:#641923;
  --casino-burgundy-deep:#2c070d;
}

/* Titles: restrained champagne, no glow */
#rb .miniHead span,
#toto .miniHead span{
  color:var(--casino-gold-soft)!important;
  font-weight:800!important;
  letter-spacing:.065em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
}

/* Main RB + TOTO balls */
.rbSession strong,
.totoBall{
  color:var(--casino-ink)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-shadow:none!important;
  border:2px solid var(--casino-gold)!important;
  background:
    radial-gradient(circle at 29% 18%,rgba(255,255,255,.72) 0 5%,rgba(255,255,255,.18) 6% 10%,transparent 11%),
    radial-gradient(circle at 50% 50%,
      var(--casino-ivory) 0 34%,
      var(--casino-ivory-deep) 35% 39%,
      #91856f 40% 41%,
      transparent 42%),
    radial-gradient(circle at 34% 28%,
      #1b2d40 0%,
      #0c1927 38%,
      var(--casino-black) 72%,
      #010305 100%)!important;
  box-shadow:
    inset -7px -9px 13px rgba(0,0,0,.52),
    inset 5px 5px 8px rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.34)!important;
}

.rbSession strong::after,
.totoBall::after{
  left:17%!important;
  top:11%!important;
  width:23%!important;
  height:11%!important;
  background:rgba(255,255,255,.46)!important;
  filter:blur(.45px)!important;
  opacity:.72!important;
}

/* TOTO bonus: burgundy lacquer with the same ivory number disc */
.totoBoard .totoBall:last-child{
  color:var(--casino-ink)!important;
  border-color:var(--casino-gold-soft)!important;
  background:
    radial-gradient(circle at 29% 18%,rgba(255,255,255,.68) 0 5%,rgba(255,255,255,.15) 6% 10%,transparent 11%),
    radial-gradient(circle at 50% 50%,
      var(--casino-ivory) 0 34%,
      var(--casino-ivory-deep) 35% 39%,
      #8d7d65 40% 41%,
      transparent 42%),
    radial-gradient(circle at 34% 28%,
      #842936 0%,
      var(--casino-burgundy) 43%,
      #451019 72%,
      var(--casino-burgundy-deep) 100%)!important;
  box-shadow:
    inset -7px -9px 13px rgba(24,0,4,.50),
    inset 5px 5px 8px rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.35)!important;
}

.totoPlus{
  color:var(--casino-gold-soft)!important;
  font-weight:750!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
}

/* Active roll: same professional lacquer, no neon glow */
.billiardRollLane{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.018) 50%,transparent)!important;
  border:0!important;
  box-shadow:none!important;
}

.billiardRollBall{
  color:var(--casino-ink)!important;
  border:2px solid var(--casino-gold)!important;
  background:
    radial-gradient(circle at 29% 18%,rgba(255,255,255,.78) 0 5%,rgba(255,255,255,.20) 6% 10%,transparent 11%),
    radial-gradient(circle at 50% 50%,
      var(--casino-ivory) 0 34%,
      var(--casino-ivory-deep) 35% 39%,
      #91856f 40% 41%,
      transparent 42%),
    radial-gradient(circle at 34% 28%,
      #203348 0%,
      #0d1a29 40%,
      var(--casino-black) 72%,
      #010305 100%)!important;
  box-shadow:
    inset -8px -10px 14px rgba(0,0,0,.54),
    inset 5px 5px 9px rgba(255,255,255,.07),
    0 5px 12px rgba(0,0,0,.40)!important;
}

.billiardRollBall .rollNumber{
  color:var(--casino-ink)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-shadow:none!important;
}

.billiardRollLane.is-bonus-roll .billiardRollBall{
  border-color:var(--casino-gold-soft)!important;
  background:
    radial-gradient(circle at 29% 18%,rgba(255,255,255,.74) 0 5%,rgba(255,255,255,.18) 6% 10%,transparent 11%),
    radial-gradient(circle at 50% 50%,
      var(--casino-ivory) 0 34%,
      var(--casino-ivory-deep) 35% 39%,
      #8d7d65 40% 41%,
      transparent 42%),
    radial-gradient(circle at 34% 28%,
      #8a2b39 0%,
      var(--casino-burgundy) 43%,
      #451019 72%,
      var(--casino-burgundy-deep) 100%)!important;
  box-shadow:
    inset -8px -10px 14px rgba(24,0,4,.52),
    inset 5px 5px 9px rgba(255,255,255,.07),
    0 5px 12px rgba(0,0,0,.40)!important;
}

/* Final stop: micro-bounce only; no glow */
.billiardRollLane.roll-landed .billiardRollBall,
.billiardRollLane.is-bonus-roll.roll-landed .billiardRollBall{
  box-shadow:
    inset -8px -10px 14px rgba(0,0,0,.52),
    inset 5px 5px 9px rgba(255,255,255,.07),
    0 6px 13px rgba(0,0,0,.42)!important;
}


/* LUXURY RESULT BALLS — clean casino broadcast finish */
:root{
  --lux-ball-black-1:#182330;
  --lux-ball-black-2:#0b121a;
  --lux-ball-black-3:#020406;
  --lux-disc:#f4efe5;
  --lux-disc-edge:#d8cfbf;
  --lux-ink:#0b1826;
  --lux-ring:#a98c4d;
  --lux-ring-hi:#c3a968;
  --lux-burgundy-1:#661923;
  --lux-burgundy-2:#3c0c14;
  --lux-burgundy-3:#160307;
}

/* cleaner labels */
#rb .miniHead span,
#toto .miniHead span{
  color:#d9bf7d!important;
  font-weight:760!important;
  letter-spacing:.055em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.58)!important;
}

/* larger, restrained matte-gloss balls */
.rbSession strong,
.totoBall{
  box-sizing:border-box!important;
  color:var(--lux-ink)!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:-.02em!important;
  line-height:1!important;
  text-shadow:none!important;
  border:2px solid var(--lux-ring)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--lux-disc) 0 42%,
      var(--lux-disc-edge) 43% 46%,
      transparent 47%),
    radial-gradient(circle at 35% 30%,
      var(--lux-ball-black-1) 0%,
      var(--lux-ball-black-2) 44%,
      var(--lux-ball-black-3) 100%)!important;
  box-shadow:
    inset -5px -7px 10px rgba(0,0,0,.38),
    inset 4px 4px 7px rgba(255,255,255,.035),
    0 4px 9px rgba(0,0,0,.32)!important;
}

/* one subtle reflection only */
.rbSession strong::after,
.totoBall::after{
  content:""!important;
  position:absolute!important;
  left:22%!important;
  top:13%!important;
  width:18%!important;
  height:8%!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.28)!important;
  filter:blur(.25px)!important;
  opacity:.68!important;
  transform:rotate(-25deg)!important;
}

/* TOTO bonus: deep burgundy lacquer */
.totoBoard .totoBall:last-child{
  border-color:var(--lux-ring-hi)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--lux-disc) 0 42%,
      var(--lux-disc-edge) 43% 46%,
      transparent 47%),
    radial-gradient(circle at 35% 30%,
      var(--lux-burgundy-1) 0%,
      var(--lux-burgundy-2) 48%,
      var(--lux-burgundy-3) 100%)!important;
  box-shadow:
    inset -5px -7px 10px rgba(20,0,3,.42),
    inset 4px 4px 7px rgba(255,255,255,.035),
    0 4px 9px rgba(0,0,0,.33)!important;
}

.totoPlus{
  color:#cbb06a!important;
  font-weight:650!important;
  text-shadow:none!important;
}

/* active rolling ball uses the same visual language */
.billiardRollBall{
  box-sizing:border-box!important;
  border:2px solid var(--lux-ring)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--lux-disc) 0 42%,
      var(--lux-disc-edge) 43% 46%,
      transparent 47%),
    radial-gradient(circle at 35% 30%,
      #1d2b3a 0%,
      #0c141d 44%,
      #020406 100%)!important;
  box-shadow:
    inset -6px -8px 11px rgba(0,0,0,.40),
    inset 4px 4px 8px rgba(255,255,255,.04),
    0 5px 11px rgba(0,0,0,.36)!important;
}
.billiardRollBall .rollNumber{
  color:var(--lux-ink)!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
  text-shadow:none!important;
}
.billiardRollBall::after{
  left:22%!important;
  top:13%!important;
  width:18%!important;
  height:8%!important;
  background:rgba(255,255,255,.30)!important;
  filter:blur(.25px)!important;
  opacity:.72!important;
}
.billiardRollLane.is-bonus-roll .billiardRollBall{
  border-color:var(--lux-ring-hi)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--lux-disc) 0 42%,
      var(--lux-disc-edge) 43% 46%,
      transparent 47%),
    radial-gradient(circle at 35% 30%,
      #74202c 0%,
      #400d16 48%,
      #160307 100%)!important;
}
.billiardRollLane.roll-landed .billiardRollBall,
.billiardRollLane.is-bonus-roll.roll-landed .billiardRollBall{
  box-shadow:
    inset -6px -8px 11px rgba(0,0,0,.40),
    inset 4px 4px 8px rgba(255,255,255,.04),
    0 6px 12px rgba(0,0,0,.38)!important;
}

/* size hierarchy: RB large, TOTO 10–12% smaller */
.rbSession strong{
  width:clamp(64px,5vw,74px)!important;
  height:clamp(64px,5vw,74px)!important;
}
.totoBall{
  width:clamp(54px,4.35vw,64px)!important;
  height:clamp(54px,4.35vw,64px)!important;
}

@media(max-width:700px){
  .rbSession strong{
    width:min(calc(var(--main-result-number-size) + 27px),13.2vw)!important;
    height:min(calc(var(--main-result-number-size) + 27px),13.2vw)!important;
  }
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    column-gap:.38vw!important;
    row-gap:0!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .totoBall,
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 18px),10.05vw)!important;
    height:min(calc(var(--main-result-number-size) + 18px),10.05vw)!important;
  }
  .totoBall{
    font-size:min(var(--main-result-number-size),5.5vw)!important;
  }
  .totoPlus{
    font-size:min(var(--main-result-number-size),4.9vw)!important;
  }
}


/* FINAL REFERENCE BALL — match approved billiard visual */
:root{
  --ref-black-top:#26313b;
  --ref-black-mid:#10171f;
  --ref-black-deep:#020305;
  --ref-ivory:#f6edda;
  --ref-ivory-edge:#d8cdb9;
  --ref-gold:#c6a155;
  --ref-gold-hi:#e1c779;
  --ref-ink:#07111d;
  --ref-burgundy-top:#8b2634;
  --ref-burgundy-mid:#57121d;
  --ref-burgundy-deep:#1b0307;
}

/* clean broadcast labels */
#rb .miniHead span,
#toto .miniHead span{
  color:#d7bb74!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:700!important;
  letter-spacing:.045em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
}

/* approved black billiard ball */
.rbSession strong,
.totoBall{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  overflow:hidden!important;
  border:2px solid var(--ref-gold)!important;
  color:var(--ref-ink)!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-weight:950!important;
  font-style:normal!important;
  letter-spacing:-.055em!important;
  font-variant-numeric:tabular-nums!important;
  line-height:1!important;
  text-shadow:none!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--ref-ivory) 0 38%,
      var(--ref-ivory-edge) 39% 42%,
      var(--ref-gold-hi) 43% 46%,
      #7f622e 47% 49%,
      transparent 50%),
    radial-gradient(circle at 31% 25%,
      var(--ref-black-top) 0%,
      var(--ref-black-mid) 46%,
      var(--ref-black-deep) 100%)!important;
  box-shadow:
    inset -7px -9px 13px rgba(0,0,0,.55),
    inset 6px 6px 10px rgba(255,255,255,.055),
    0 5px 12px rgba(0,0,0,.35)!important;
}

/* restrained lacquer highlight */
.rbSession strong::after,
.totoBall::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:19%!important;
  top:10%!important;
  width:26%!important;
  height:11%!important;
  border-radius:50%!important;
  background:linear-gradient(90deg,rgba(255,255,255,.66),rgba(255,255,255,.12))!important;
  filter:blur(.45px)!important;
  transform:rotate(-29deg)!important;
  opacity:.72!important;
  pointer-events:none!important;
}

/* burgundy TOTO bonus */
.totoBoard .totoBall:last-child{
  border-color:var(--ref-gold-hi)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--ref-ivory) 0 38%,
      var(--ref-ivory-edge) 39% 42%,
      var(--ref-gold-hi) 43% 46%,
      #80612c 47% 49%,
      transparent 50%),
    radial-gradient(circle at 31% 25%,
      var(--ref-burgundy-top) 0%,
      var(--ref-burgundy-mid) 48%,
      var(--ref-burgundy-deep) 100%)!important;
  box-shadow:
    inset -7px -9px 13px rgba(25,0,4,.55),
    inset 6px 6px 10px rgba(255,255,255,.055),
    0 5px 12px rgba(0,0,0,.36)!important;
}

/* plus stays understated */
.totoPlus{
  color:#c8aa61!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-weight:750!important;
  text-shadow:none!important;
}

/* size hierarchy */
.rbSession strong{
  width:clamp(66px,5.1vw,76px)!important;
  height:clamp(66px,5.1vw,76px)!important;
  font-size:clamp(28px,2.1vw,35px)!important;
}
.totoBall{
  width:clamp(56px,4.35vw,64px)!important;
  height:clamp(56px,4.35vw,64px)!important;
  font-size:clamp(24px,1.9vw,31px)!important;
}

/* rolling ball uses same approved artwork */
.billiardRollLane{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.billiardRollBall{
  box-sizing:border-box!important;
  border-radius:50%!important;
  border:2px solid var(--ref-gold)!important;
  color:var(--ref-ink)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--ref-ivory) 0 38%,
      var(--ref-ivory-edge) 39% 42%,
      var(--ref-gold-hi) 43% 46%,
      #7f622e 47% 49%,
      transparent 50%),
    radial-gradient(circle at 31% 25%,
      #2a3743 0%,
      #111820 46%,
      #020305 100%)!important;
  box-shadow:
    inset -7px -9px 13px rgba(0,0,0,.55),
    inset 6px 6px 10px rgba(255,255,255,.055),
    0 5px 12px rgba(0,0,0,.37)!important;
}
.billiardRollBall::after{
  left:19%!important;
  top:10%!important;
  width:26%!important;
  height:11%!important;
  background:linear-gradient(90deg,rgba(255,255,255,.68),rgba(255,255,255,.13))!important;
  filter:blur(.45px)!important;
  opacity:.74!important;
}
.billiardRollBall .rollNumber{
  color:var(--ref-ink)!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  text-shadow:none!important;
}
.billiardRollLane.is-bonus-roll .billiardRollBall{
  border-color:var(--ref-gold-hi)!important;
  background:
    radial-gradient(circle at 50% 50%,
      var(--ref-ivory) 0 38%,
      var(--ref-ivory-edge) 39% 42%,
      var(--ref-gold-hi) 43% 46%,
      #80612c 47% 49%,
      transparent 50%),
    radial-gradient(circle at 31% 25%,
      var(--ref-burgundy-top) 0%,
      var(--ref-burgundy-mid) 48%,
      var(--ref-burgundy-deep) 100%)!important;
}
.billiardRollLane.roll-landed .billiardRollBall,
.billiardRollLane.is-bonus-roll.roll-landed .billiardRollBall{
  box-shadow:
    inset -7px -9px 13px rgba(0,0,0,.55),
    inset 6px 6px 10px rgba(255,255,255,.055),
    0 6px 13px rgba(0,0,0,.40)!important;
}

/* mobile: TOTO stays one horizontal row */
@media(max-width:700px){
  .rbSession strong{
    width:min(calc(var(--main-result-number-size) + 27px),13.4vw)!important;
    height:min(calc(var(--main-result-number-size) + 27px),13.4vw)!important;
    font-size:min(var(--main-result-number-size),7vw)!important;
  }
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    column-gap:.28vw!important;
    row-gap:0!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .totoBall,
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 18px),10.15vw)!important;
    height:min(calc(var(--main-result-number-size) + 18px),10.15vw)!important;
  }
  .totoBall{
    font-size:min(var(--main-result-number-size),5.45vw)!important;
  }
  .totoPlus{
    font-size:min(var(--main-result-number-size),4.8vw)!important;
  }
}


/* FINAL RUBY RESULT BALLS — approved visual direction */
:root{
  --ruby-white:#fffdfa;
  --ruby-red-a:#d30b1b;
  --ruby-red-b:#ee1616;
  --ruby-red-c:#b70718;
  --ruby-red-d:#f02a21;
  --ruby-red-deep:#720714;
  --ruby-shadow:#3a0208;
  --ruby-gold:#d6ad4f;
  --ruby-gold-hi:#f0cf72;
}

/* Titles: clean champagne gold */
#rb .miniHead span,
#toto .miniHead span{
  color:#e0c47b!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.58)!important;
}

/* Ruby ball base */
.rbSession strong,
.totoBall{
  position:relative!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  overflow:hidden!important;
  color:var(--ruby-white)!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-weight:950!important;
  font-style:normal!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:-.045em!important;
  line-height:1!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.24),
    0 2px 5px rgba(0,0,0,.26)!important;
  border:2px solid rgba(112,0,10,.88)!important;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.34) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff4b48 0%,#df111d 38%,#a60715 70%,#4b0108 100%)!important;
  box-shadow:
    inset -8px -10px 15px rgba(47,0,4,.48),
    inset 6px 6px 11px rgba(255,255,255,.12),
    0 5px 12px rgba(0,0,0,.34)!important;
}

/* One clean glossy reflection */
.rbSession strong::after,
.totoBall::after{
  content:""!important;
  position:absolute!important;
  left:20%!important;
  top:12%!important;
  width:26%!important;
  height:11%!important;
  border-radius:50%!important;
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.10))!important;
  transform:rotate(-28deg)!important;
  filter:blur(.35px)!important;
  opacity:.84!important;
  pointer-events:none!important;
}

/* RB variation */
.rbSession:nth-child(1) strong{
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.34) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff3d45 0%,#c90c1c 40%,#8f0614 72%,#3c0107 100%)!important;
}
.rbSession:nth-child(2) strong{
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.94) 0 5%,rgba(255,255,255,.36) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff5c33 0%,#f01b16 39%,#b70a12 70%,#510106 100%)!important;
}
.rbSession:nth-child(3) strong{
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.91) 0 5%,rgba(255,255,255,.31) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ef3342 0%,#bb091a 40%,#7a0614 72%,#330107 100%)!important;
}

/* TOTO variation across the row */
.totoBall:nth-child(1){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.34) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff3f3d 0%,#d41119 40%,#970713 72%,#3f0107 100%)!important;
}
.totoBall:nth-child(2){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.38) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff6a39 0%,#ef1b15 39%,#b40a10 71%,#4d0105 100%)!important;
}
.totoBall:nth-child(3){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.91) 0 5%,rgba(255,255,255,.30) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#f44740 0%,#bd0a17 40%,#800512 72%,#320106 100%)!important;
}
.totoBall:nth-child(4){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.93) 0 5%,rgba(255,255,255,.34) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff4750 0%,#d00d1d 40%,#910713 72%,#3b0107 100%)!important;
}
.totoBall:nth-child(5){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.37) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff6941 0%,#ea1d17 39%,#ad0b12 70%,#480105 100%)!important;
}
.totoBall:nth-child(6){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.32) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff4250 0%,#c50c1c 40%,#850513 72%,#350106 100%)!important;
}

/* Bonus: deep ruby + gold rim */
.totoBoard .totoBall:last-child{
  border:3px solid var(--ruby-gold-hi)!important;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.90) 0 5%,rgba(255,255,255,.28) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#b72b3c 0%,#760918 42%,#4a0610 72%,#1c0105 100%)!important;
  box-shadow:
    inset -8px -10px 15px rgba(31,0,4,.54),
    inset 6px 6px 11px rgba(255,255,255,.09),
    0 0 0 1px rgba(104,67,8,.36),
    0 5px 12px rgba(0,0,0,.36)!important;
}

.totoPlus{
  color:#d8b65b!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-weight:800!important;
  text-shadow:0 1px 2px rgba(0,0,0,.48)!important;
}

/* Active roll uses ruby style */
.billiardRollLane{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.billiardRollBall{
  box-sizing:border-box!important;
  border-radius:50%!important;
  border:2px solid rgba(112,0,10,.88)!important;
  color:var(--ruby-white)!important;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.36) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff5547 0%,#e21318 39%,#a60913 70%,#470106 100%)!important;
  box-shadow:
    inset -8px -10px 15px rgba(47,0,4,.48),
    inset 6px 6px 11px rgba(255,255,255,.12),
    0 6px 13px rgba(0,0,0,.38)!important;
}
.billiardRollBall::after{
  left:20%!important;
  top:12%!important;
  width:26%!important;
  height:11%!important;
  background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.10))!important;
  filter:blur(.35px)!important;
  opacity:.86!important;
}
.billiardRollBall .rollNumber{
  color:var(--ruby-white)!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.24),
    0 2px 5px rgba(0,0,0,.26)!important;
}
.billiardRollLane.is-bonus-roll .billiardRollBall{
  border:3px solid var(--ruby-gold-hi)!important;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.90) 0 5%,rgba(255,255,255,.28) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#b72b3c 0%,#760918 42%,#4a0610 72%,#1c0105 100%)!important;
}

/* Size hierarchy */
.rbSession strong{
  width:clamp(68px,5.25vw,78px)!important;
  height:clamp(68px,5.25vw,78px)!important;
  font-size:clamp(29px,2.18vw,36px)!important;
}
.totoBall{
  width:clamp(57px,4.45vw,66px)!important;
  height:clamp(57px,4.45vw,66px)!important;
  font-size:clamp(24px,1.95vw,32px)!important;
}

/* HP: one horizontal TOTO row */
@media(max-width:700px){
  .rbSession strong{
    width:min(calc(var(--main-result-number-size) + 29px),13.7vw)!important;
    height:min(calc(var(--main-result-number-size) + 29px),13.7vw)!important;
    font-size:min(var(--main-result-number-size),7.1vw)!important;
  }
  .totoBoard{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    column-gap:.24vw!important;
    row-gap:0!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .totoBall,
  .totoPlus{
    width:min(calc(var(--main-result-number-size) + 19px),10.25vw)!important;
    height:min(calc(var(--main-result-number-size) + 19px),10.25vw)!important;
  }
  .totoBall{
    font-size:min(var(--main-result-number-size),5.55vw)!important;
  }
  .totoPlus{
    font-size:min(var(--main-result-number-size),4.8vw)!important;
  }
}


/* TOTO BONUS NUMBER — keep text white */
.totoBoard .totoBall:last-child{
  color:#fffdfa!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.24),
    0 2px 5px rgba(0,0,0,.26)!important;
}
.billiardRollLane.is-bonus-roll .billiardRollBall .rollNumber{
  color:#fffdfa!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.24),
    0 2px 5px rgba(0,0,0,.26)!important;
}


/* MACAU RB — 3 centered main balls + 10 centered history balls */
#rb .miniCard,
#rb.miniCard{
  overflow:hidden;
}
.rbBoard{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-items:stretch!important;
  gap:.35vh!important;
  overflow:hidden!important;
}
.rbMainRow{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,auto);
  justify-content:center;
  align-items:center;
  gap:clamp(30px,5.2vw,70px);
}
.rbMainRow .rbSession{
  display:grid;
  place-items:center;
  min-width:0;
}
.rbMainRow .rbSession strong{
  width:clamp(58px,4.65vw,68px)!important;
  height:clamp(58px,4.65vw,68px)!important;
  font-size:clamp(25px,1.95vw,32px)!important;
}
.rbHistoryRow{
  width:100%;
  display:grid;
  grid-template-columns:repeat(10,auto);
  justify-content:center;
  align-items:center;
  gap:clamp(5px,.58vw,9px);
  overflow:hidden;
  white-space:nowrap;
}
.rbHistoryBall{
  position:relative;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:none;
  width:clamp(23px,1.8vw,28px);
  height:clamp(23px,1.8vw,28px);
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(112,0,10,.72);
  color:#fffdfa;
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-weight:900;
  font-size:clamp(11px,.82vw,14px);
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-.035em;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.72) 0 5%,rgba(255,255,255,.22) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#e53a3b 0%,#b20c18 43%,#760611 73%,#2d0105 100%);
  box-shadow:
    inset -4px -5px 7px rgba(47,0,4,.42),
    inset 3px 3px 5px rgba(255,255,255,.08),
    0 2px 5px rgba(0,0,0,.26);
}
.rbHistoryBall:nth-child(3n+2){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.76) 0 5%,rgba(255,255,255,.24) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#f04d37 0%,#ca1715 42%,#8c0910 72%,#350104 100%);
}
.rbHistoryBall:nth-child(3n){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.70) 0 5%,rgba(255,255,255,.20) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#d92c42 0%,#a00a1b 43%,#670611 73%,#270104 100%);
}
@media(max-width:700px){
  .rbBoard{
    gap:.22vh!important;
  }
  .rbMainRow{
    gap:7vw;
  }
  .rbMainRow .rbSession strong{
    width:min(12vw,48px)!important;
    height:min(12vw,48px)!important;
    font-size:min(6.4vw,26px)!important;
  }
  .rbHistoryRow{
    gap:1.15vw;
  }
  .rbHistoryBall{
    width:min(6.25vw,25px);
    height:min(6.25vw,25px);
    font-size:min(3.05vw,12.5px);
  }
}

/* RB rolling layer remains above both rows */
#rbBoard .billiardRollLane{
  z-index:30;
}


/* RB EQUAL DISTRIBUTION — equal spacing from left to right */
.rbMainRow{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  justify-content:stretch!important;
  justify-items:center!important;
  align-items:center!important;
  gap:0!important;
}
.rbHistoryRow{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  justify-content:stretch!important;
  justify-items:center!important;
  align-items:center!important;
  gap:0!important;
  overflow:hidden!important;
}
@media(max-width:700px){
  .rbMainRow,
  .rbHistoryRow{
    gap:0!important;
  }
}


/* TOP-RIGHT HISTORY */
.historyTopButton{
  position:absolute;
  z-index:15;
  right:3.2vw;
  top:50%;
  transform:translateY(-50%);
  min-width:clamp(82px,7.8vw,118px);
  height:clamp(31px,4.2vh,40px);
  padding:0 1.05vw;
  border:1px solid rgba(211,177,92,.72);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(9,18,27,.90),rgba(3,9,14,.94));
  color:#e0c47b;
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:clamp(11px,.9vw,14px);
  font-weight:800;
  letter-spacing:.10em;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04);
}
.historyTopButton:hover,
.historyTopButton:focus-visible{
  border-color:#e0c47b;
  color:#fff0bd;
  outline:none;
}
.historyOverlay{
  position:fixed;
  z-index:100;
  inset:0;
  display:grid;
  place-items:start end;
  padding:9.5vh 2.8vw 2.8vh;
  background:rgba(0,5,10,.46);
  backdrop-filter:blur(8px);
}
.historyOverlay[hidden]{
  display:none!important;
}
.historyPanel{
  width:min(460px,92vw);
  max-height:78vh;
  overflow:hidden;
  border:1px solid rgba(212,178,90,.76);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(4,15,25,.98),rgba(3,9,15,.98));
  box-shadow:0 22px 55px rgba(0,0,0,.48);
}
.historyPanelHead{
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px 0 19px;
  border-bottom:1px solid rgba(212,178,90,.26);
}
.historyPanelHead strong{
  color:#e0c47b;
  font-family:Cinzel,Georgia,serif;
  font-size:15px;
  letter-spacing:.10em;
}
.historyPanelHead button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(212,178,90,.28);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#f5e3af;
  font-size:21px;
  line-height:1;
  cursor:pointer;
}
.historyList{
  max-height:calc(78vh - 54px);
  overflow:auto;
  padding:8px 10px 12px;
}
.historyRow{
  display:grid;
  grid-template-columns:98px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:62px;
  padding:10px 9px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.historyRow:last-child{
  border-bottom:0;
}
.historyRowMeta{
  min-width:0;
  display:grid;
  gap:3px;
}
.historyCategory{
  color:#e0c47b;
  font-size:13px;
  font-weight:850;
}
.historyDate{
  color:rgba(244,242,234,.62);
  font-size:10px;
  font-weight:600;
}
.historyResult{
  min-width:0;
  color:#fffdfa;
  font-size:13px;
  font-weight:750;
  line-height:1.4;
  text-align:right;
  overflow-wrap:anywhere;
}

@media(max-width:700px){
  .historyTopButton{
    right:2vw;
    top:.8vh;
    transform:none;
    min-width:58px;
    height:28px;
    padding:0 2.1vw;
    font-size:2.05vw;
    letter-spacing:.07em;
  }
  .historyOverlay{
    place-items:start center;
    padding:9.8vh 2vw 2vh;
  }
  .historyPanel{
    width:96vw;
    max-height:84vh;
    border-radius:14px;
  }
  .historyPanelHead{
    height:48px;
  }
  .historyList{
    max-height:calc(84vh - 48px);
  }
  .historyRow{
    grid-template-columns:76px minmax(0,1fr);
    gap:8px;
    min-height:56px;
    padding:8px;
  }
  .historyCategory{font-size:3vw}
  .historyDate{font-size:2.35vw}
  .historyResult{font-size:2.9vw}
}


/* INTERNATIONAL FULL-SCREEN HISTORY */
.historyOverlay{
  position:fixed!important;
  z-index:1000!important;
  inset:0!important;
  padding:0!important;
  overflow:auto!important;
  display:block!important;
  background:
    linear-gradient(180deg,rgba(2,9,14,.80),rgba(2,8,13,.90)),
    url("/assets/macau-result-background-8k.jpg") center/cover fixed!important;
  backdrop-filter:none!important;
}
.historyOverlay[hidden]{
  display:none!important;
}
.historyPage{
  min-height:100dvh;
  width:100%;
  display:grid;
  grid-template-rows:auto auto 1fr;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(26,48,63,.18),transparent 42%),
    linear-gradient(180deg,rgba(3,11,18,.16),rgba(2,8,13,.58));
}
.historyPageHeader{
  min-height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 4vw;
  border-bottom:1px solid rgba(215,173,83,.34);
  background:rgba(4,14,22,.82);
  backdrop-filter:blur(12px);
}
.historyPageBrand{
  justify-self:start;
  font-family:Cinzel,Georgia,serif;
  font-size:clamp(18px,1.8vw,30px);
  color:#f0d894;
  letter-spacing:.055em;
}
.historyPageTitle{
  justify-self:center;
  font-family:Cinzel,Georgia,serif;
  font-size:clamp(18px,1.65vw,28px);
  color:#e0c47b;
  letter-spacing:.12em;
}
.historyCloseButton{
  justify-self:end;
  min-width:86px;
  height:36px;
  padding:0 16px;
  border:1px solid rgba(215,173,83,.62);
  border-radius:999px;
  background:rgba(4,12,18,.78);
  color:#f2dda3;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
}
.historyToolbar{
  width:min(1120px,94vw);
  margin:18px auto 8px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
}
.historyCategoryTabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(72px,1fr));
  border:1px solid rgba(215,173,83,.42);
  border-radius:10px;
  overflow:hidden;
  background:rgba(4,14,22,.78);
}
.historyCategoryTabs button{
  height:38px;
  padding:0 18px;
  border:0;
  border-right:1px solid rgba(255,255,255,.07);
  background:transparent;
  color:#eae7df;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.historyCategoryTabs button:last-child{
  border-right:0;
}
.historyCategoryTabs button.on{
  background:#d7ad53;
  color:#181109;
}
.historyDateFilters{
  display:grid;
  grid-template-columns:repeat(2,150px);
  gap:10px;
}
.historyDateFilters label{
  display:grid;
  gap:5px;
  color:#cdbb8d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.historyDateFilters input{
  height:38px;
  width:100%;
  padding:0 11px;
  border:1px solid rgba(215,173,83,.34);
  border-radius:9px;
  outline:none;
  background:rgba(4,14,22,.82);
  color:#fffdf8;
  font:700 12px Inter,Arial,sans-serif;
}
.historyDateFilters input:focus{
  border-color:#d7ad53;
}
.historyArchive{
  width:min(1120px,94vw);
  margin:0 auto;
  padding:8px 0 42px;
  display:grid;
  gap:14px;
  align-content:start;
}
.historyResultCard{
  border:1px solid rgba(215,173,83,.58);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(5,18,29,.84),rgba(3,11,18,.90));
  box-shadow:0 14px 32px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
}
.historyResultCard[hidden]{
  display:none!important;
}
.historyCardHead{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 18px;
  border-bottom:1px solid rgba(215,173,83,.20);
}
.historyCardIdentity{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.historyCardCategory{
  color:#e0c47b;
  font-family:Cinzel,Georgia,serif;
  font-size:16px;
  letter-spacing:.07em;
}
.historyCardDate{
  color:#fffdfa;
  font-size:12px;
  font-weight:700;
}
.historyCardPeriod{
  color:rgba(244,240,231,.54);
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
}
.history4DBody{
  padding:16px 18px 18px;
  display:grid;
  gap:14px;
}
.history4DTop{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.history4DPrize{
  min-height:86px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  border:1px solid rgba(215,173,83,.30);
  border-radius:12px;
  background:rgba(3,12,19,.48);
}
.history4DLabel{
  color:#cdb570;
  font-size:11px;
  font-weight:850;
  letter-spacing:.07em;
}
.history4DValue{
  color:#fffdfa;
  font-size:clamp(26px,2.35vw,38px);
  line-height:1;
  font-weight:900;
}
.history4DSets{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.history4DSet{
  border:1px solid rgba(215,173,83,.22);
  border-radius:12px;
  overflow:hidden;
  background:rgba(3,12,19,.36);
}
.historySetTitle{
  margin:0;
  padding:9px 10px;
  text-align:center;
  border-bottom:1px solid rgba(215,173,83,.18);
  color:#d8bd78;
  font-size:11px;
  letter-spacing:.08em;
}
.historySetGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  background:rgba(215,173,83,.09);
}
.historySetNumber{
  min-height:38px;
  display:grid;
  place-items:center;
  background:rgba(3,12,19,.88);
  color:#fffdfa;
  font-size:14px;
  font-weight:800;
}
.historyRbBody{
  min-height:118px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
}
.historyRbBall,
.historyTotoBall{
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fffdfa;
  font-family:Inter,Arial,sans-serif;
  font-weight:950;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.30);
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.88) 0 5%,rgba(255,255,255,.28) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff4d48 0%,#d6111b 41%,#900713 72%,#350106 100%);
  box-shadow:inset -6px -8px 12px rgba(47,0,4,.46),0 4px 10px rgba(0,0,0,.30);
}
.historyRbBall{
  width:68px;
  height:68px;
  font-size:30px;
  border:2px solid rgba(112,0,10,.82);
}
.historySession{
  color:#cdbb8d;
  font-size:11px;
  font-weight:750;
}
.historyTotoLine{
  min-height:118px;
  display:grid;
  grid-template-columns:repeat(8,auto);
  justify-content:center;
  align-items:center;
  gap:clamp(8px,1.1vw,16px);
  padding:18px;
}
.historyTotoBall{
  width:58px;
  height:58px;
  font-size:25px;
  border:2px solid rgba(112,0,10,.82);
}
.historyTotoBall[data-variant="1"]{
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.91) 0 5%,rgba(255,255,255,.30) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff6a3c 0%,#ed1d17 40%,#ad0a11 72%,#410105 100%);
}
.historyTotoBall[data-variant="2"]{
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.86) 0 5%,rgba(255,255,255,.25) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#e73a48 0%,#b40b1b 41%,#730511 72%,#2c0105 100%);
}
.historyTotoPlus{
  color:#d8b65b;
  font-size:28px;
  font-weight:850;
}
.historyTotoBonus{
  border:3px solid #f0cf72;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.86) 0 5%,rgba(255,255,255,.24) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#b72b3c 0%,#760918 42%,#4a0610 72%,#1c0105 100%);
}

@media(max-width:700px){
  .historyPageHeader{
    min-height:58px;
    grid-template-columns:1fr auto;
    padding:0 3vw;
  }
  .historyPageBrand{
    font-size:4vw;
  }
  .historyPageTitle{
    display:none;
  }
  .historyCloseButton{
    min-width:64px;
    height:31px;
    padding:0 10px;
    font-size:2.4vw;
  }
  .historyToolbar{
    width:96vw;
    margin:10px auto 6px;
    display:grid;
    gap:8px;
  }
  .historyCategoryTabs{
    grid-template-columns:repeat(4,1fr);
  }
  .historyCategoryTabs button{
    height:34px;
    padding:0 4px;
    font-size:2.7vw;
  }
  .historyDateFilters{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .historyDateFilters label{
    font-size:2.15vw;
  }
  .historyDateFilters input{
    height:34px;
    font-size:2.7vw;
  }
  .historyArchive{
    width:96vw;
    gap:9px;
    padding:5px 0 24px;
  }
  .historyResultCard{
    border-radius:12px;
  }
  .historyCardHead{
    min-height:46px;
    padding:8px 11px;
  }
  .historyCardIdentity{
    gap:8px;
  }
  .historyCardCategory{
    font-size:3.25vw;
  }
  .historyCardDate{
    font-size:2.55vw;
  }
  .historyCardPeriod{
    max-width:38vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:2.2vw;
  }
  .history4DBody{
    padding:9px 10px 11px;
    gap:8px;
  }
  .history4DTop{
    gap:6px;
  }
  .history4DPrize{
    min-height:64px;
    gap:3px;
    border-radius:9px;
  }
  .history4DLabel{
    font-size:2.4vw;
  }
  .history4DValue{
    font-size:5.6vw;
  }
  .history4DSets{
    gap:7px;
  }
  .historySetTitle{
    padding:7px 4px;
    font-size:2.25vw;
  }
  .historySetNumber{
    min-height:29px;
    font-size:2.7vw;
  }
  .historyRbBody,
  .historyTotoLine{
    min-height:92px;
  }
  .historyRbBall{
    width:54px;
    height:54px;
    font-size:24px;
  }
  .historySession{
    font-size:2.45vw;
  }
  .historyTotoLine{
    grid-template-columns:repeat(8,minmax(0,1fr));
    justify-items:center;
    gap:.45vw;
    padding:10px 7px;
  }
  .historyTotoBall{
    width:min(10vw,40px);
    height:min(10vw,40px);
    font-size:5vw;
  }
  .historyTotoPlus{
    font-size:5.4vw;
  }
}


/* HISTORY 4D VALUE FIT */
.history4DValue{
  display:grid!important;
  place-items:center!important;
  min-height:42px!important;
  padding:2px 0!important;
  overflow:hidden!important;
}
@media(max-width:700px){
  .history4DValue{
    min-height:34px!important;
    padding:1px 0!important;
  }
}


/* RB MAIN SESSION TIME */
.rbMainRow .rbSession{
  align-content:center!important;
  gap:clamp(3px,.45vh,5px)!important;
}
.rbMainRow .rbSession .rbSessionTime{
  display:block!important;
  color:#d8bd78!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:clamp(10px,.78vw,12px)!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  opacity:.92!important;
}
@media(max-width:700px){
  .rbMainRow .rbSession{
    gap:2px!important;
  }
  .rbMainRow .rbSession .rbSessionTime{
    font-size:min(2.55vw,10.5px)!important;
    letter-spacing:.035em!important;
  }
}


/* HEADER SPACE RECLAIM + ENLARGED RESULT PANELS */
.app{grid-template-rows:6vh 61vh 33vh!important}
.topbar{height:6vh!important}
.brand{top:50%!important}
.historyTopButton{top:50%!important;transform:translateY(-50%)!important}
.bottomGrid{
  width:min(48vw,820px)!important;
  grid-template-rows:minmax(0,1.2fr) minmax(0,.8fr)!important;
  gap:.8vh!important;
  padding:.35vh 0 .45vh!important;
}
#rb.miniCard{min-height:0!important}
#rbBoard{
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:1.35vh!important;
  padding:.35vh 0 .65vh!important;
}
.rbHistoryRow{margin-top:.15vh!important}
@media(max-width:700px){
  .app{grid-template-rows:7vh 60vh 33vh!important}
  .topbar{height:7vh!important}
  .brand{top:50%!important;transform:translate(-50%,-50%)!important}
  .historyTopButton{top:50%!important;transform:translateY(-50%)!important}
  .bottomGrid{width:96vw!important;grid-template-rows:minmax(0,1.2fr) minmax(0,.8fr)!important}
  #rbBoard{gap:.95vh!important;padding:.25vh 0 .45vh!important}
}


/* LIVE RB + TOTO — VERTICAL NUMBER ROLL INSIDE ORIGINAL BALL */
.nanasSlotReel{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  font:inherit;
  font-variant-numeric:tabular-nums;
  contain:paint;
  background:transparent;
  color:inherit;
}
.nanasSlotTrack{
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  white-space:pre!important;
  text-align:center;
  font:inherit;
  font-weight:950!important;
  color:#fffdfa!important;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
.nanasSlotStopping,
.nanasSlotFinal{
  outline:0!important;
  background:transparent!important;
}
.rbSession strong:has(.nanasSlotReel),
.totoBall:has(.nanasSlotReel){
  overflow:hidden!important;
  transform:none!important;
}
.rbSession strong .nanasSlotReel,
.rbSession strong .nanasSlotTrack,
.totoBall .nanasSlotReel,
.totoBall .nanasSlotTrack{
  display:block!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:inherit!important;
  font-weight:950!important;
  color:#fffdfa!important;
  opacity:1!important;
  visibility:visible!important;
}
.rbSession strong .nanasSlotReel,
.totoBall .nanasSlotReel{
  border-radius:50%!important;
}
.rbSession strong .nanasSlotTrack,
.totoBall .nanasSlotTrack{
  white-space:pre!important;
  text-overflow:clip!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  text-align:center!important;
  width:100%!important;
}

/* COMPACT TITLES — 4D / RB / TOTO */
.fourCard{padding-top:.45vh}
.fourHeading{
  height:2.4vh;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:0;
  padding:.1vh 0 0 .1vw;
}
.fourHeading>span{display:none!important}
.fourHeading>div{text-align:left!important}
.fourHeading h1{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(11px,.9vw,14px);
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
}
.fourBoard{height:calc(100% - 2.4vh)}
.miniCard{grid-template-rows:2.4vh minmax(0,1fr)!important;padding-top:.4vh}
.miniHead{align-items:flex-start;justify-content:flex-start;min-height:0;line-height:1}
.miniHead span{
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(11px,.9vw,14px);
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
}
@media(max-width:700px){
  .fourCard{padding-top:.35vh}
  .fourHeading{height:2.1vh;padding:.05vh 0 0 .2vw}
  .fourHeading h1{font-size:2.7vw}
  .fourBoard{height:calc(100% - 2.1vh)}
  .miniCard{grid-template-rows:2.1vh minmax(0,1fr)!important;padding-top:.3vh}
  .miniHead span{font-size:2.7vw}
}

/* MOBILE BOTTOM SAFE AREA — keep TOTO fully visible */
@media(max-width:700px){
  .app{
    height:100dvh!important;
    min-height:100dvh!important;
    grid-template-rows:7% 60% 33%!important;
    padding-bottom:max(env(safe-area-inset-bottom),12px)!important;
  }
  .bottomGrid{
    min-height:0!important;
    grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr)!important;
    padding-bottom:0!important;
  }
  #toto{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:0!important;
  }
  #totoBoard{
    min-height:0!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* HISTORY DATE PICKER — labels inside controls */
.historyDateFilters .historyDateField{
  height:40px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:0 8px 0 11px;
  border:1px solid rgba(215,173,83,.34);
  border-radius:9px;
  background:rgba(4,14,22,.82);
  color:#cdbb8d;
  cursor:pointer;
}
.historyDateFilters .historyDateField:focus-within{
  border-color:#d7ad53;
  box-shadow:0 0 0 1px rgba(215,173,83,.14);
}
.historyDateField>span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.historyDateFilters .historyDateField input[type="date"]{
  min-width:0;
  width:100%;
  height:38px;
  padding:0;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fffdf8;
  font:700 12px Inter,Arial,sans-serif;
  text-align:right;
  cursor:pointer;
  color-scheme:dark;
}
.historyDateFilters .historyDateField input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.85;
}
@media(max-width:700px){
  .historyDateFilters .historyDateField{
    height:36px;
    gap:6px;
    padding:0 7px 0 9px;
  }
  .historyDateField>span{font-size:2.15vw}
  .historyDateFilters .historyDateField input[type="date"]{
    height:34px;
    font-size:2.7vw;
  }
}

/* TOP 3 — label inside number container */
.prizeRow{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
}
.prizeLabel{
  position:absolute!important;
  left:10px!important;
  top:8px!important;
  z-index:2!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#e7c56f!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(10px,.78vw,13px)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.07em!important;
}
.prizeValue{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  padding:0 14px!important;
}
@media(max-width:700px){
  .prizeLabel{
    left:8px!important;
    top:6px!important;
    font-size:2.35vw!important;
  }
  .prizeValue{padding:0 10px!important}
}

/* HISTORY SEMUA — 1ST / 2ND / 3RD vertical */
.historyArchive.historyAllMode .history4DTop{
  width:min(440px,100%);
  margin:0 auto;
  grid-template-columns:1fr!important;
  gap:6px!important;
}
.historyArchive.historyAllMode .history4DPrize{
  position:relative;
  min-height:68px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:0;
}
.historyArchive.historyAllMode .history4DLabel{
  position:absolute;
  left:10px;
  top:8px;
  z-index:1;
  font-size:10px;
  line-height:1;
}
.historyArchive.historyAllMode .history4DValue{
  width:100%;
  text-align:center;
}
@media(max-width:700px){
  .historyArchive.historyAllMode .history4DTop{
    width:100%;
    gap:5px!important;
  }
  .historyArchive.historyAllMode .history4DPrize{
    min-height:58px;
  }
  .historyArchive.historyAllMode .history4DLabel{
    left:8px;
    top:6px;
    font-size:2.35vw;
  }
  .historyArchive.historyAllMode .history4DValue{
    font-size:6.2vw;
  }
}

/* RB MACAU = ASIA LOTTERY RESULTS */
#rbBoard{
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:12px!important;
  padding:8px 0 4px!important;
  overflow:hidden!important;
}
.rbMainRow{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
}
.rbMainRow .rbSession{
  display:grid!important;
  place-items:center!important;
  gap:5px!important;
  min-width:0!important;
}
.rbMainRow .rbSession strong{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;

  width:68px!important;
  height:68px!important;
  overflow:hidden!important;
  border-radius:50%!important;
  border:2px solid rgba(112,0,10,.88)!important;
  color:#fffdfa!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:30px!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  text-shadow:0 1px 0 rgba(0,0,0,.24),0 2px 5px rgba(0,0,0,.26)!important;
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.34) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#ff4b48 0%,#df111d 38%,#a60715 70%,#4b0108 100%)!important;
  box-shadow:inset -8px -10px 15px rgba(47,0,4,.48),inset 6px 6px 11px rgba(255,255,255,.12),0 5px 12px rgba(0,0,0,.34)!important;
}
.rbMainRow .rbSession .rbSessionTime{
  display:block!important;
  color:#8b1119!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.05em!important;
  line-height:1!important;

  white-space:nowrap!important;
}
.rbHistoryRow{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  justify-items:center!important;
  align-items:center!important;
  gap:4px!important;
  overflow:hidden!important;
}
.rbHistoryBall{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  border:1px solid rgba(112,0,10,.72)!important;
  color:#fffdfa!important;
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums!important;
  line-height:1!important;
  letter-spacing:-.035em!important;

  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.72) 0 5%,rgba(255,255,255,.22) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#e53a3b 0%,#b20c18 43%,#760611 73%,#2d0105 100%)!important;
  box-shadow:inset -4px -5px 7px rgba(47,0,4,.42),inset 3px 3px 5px rgba(255,255,255,.08),0 2px 5px rgba(0,0,0,.26)!important;
}
.rbHistoryBall:nth-child(3n+2){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.76) 0 5%,rgba(255,255,255,.24) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#f04d37 0%,#ca1715 42%,#8c0910 72%,#350104 100%)!important;
}
.rbHistoryBall:nth-child(3n){
  background:
    radial-gradient(circle at 31% 23%,rgba(255,255,255,.70) 0 5%,rgba(255,255,255,.20) 6% 10%,transparent 11%),
    radial-gradient(circle at 36% 30%,#d92c42 0%,#a00a1b 43%,#670611 73%,#270104 100%)!important;
}
@media(max-width:700px){
  #rbBoard{gap:8px!important;padding:6px 0 2px!important}
  .rbMainRow .rbSession{gap:2px!important}
  .rbMainRow .rbSession strong{
    width:min(12vw,48px)!important;
    height:min(12vw,48px)!important;

    font-size:min(6.4vw,26px)!important;
  }
  .rbMainRow .rbSession .rbSessionTime{
    font-size:min(2.55vw,10.5px)!important;
  }
  .rbHistoryRow{gap:1vw!important}
  .rbHistoryBall{
    width:min(6.25vw,25px)!important;
    height:min(6.25vw,25px)!important;
    font-size:min(3.05vw,12.5px)!important;
  }
}

/* RB CENTER LOCK — satu pusat untuk angka statis + spin */
.rbMainRow .rbSession strong,
.rbHistoryBall{
  position:relative!important;
  text-indent:0!important;
  letter-spacing:0!important;
}
.rbMainRow .rbSession .rbMainValue,
.rbHistoryValue{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-indent:0!important;
  font:inherit!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1,"kern" 0!important;
  font-kerning:none!important;
  white-space:nowrap!important;
}
.rbMainRow .rbSession strong .nanasSlotReel,
.rbMainRow .rbSession strong .nanasSlotTrack{
  text-indent:0!important;
  letter-spacing:0!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1,"kern" 0!important;
  font-kerning:none!important;
}

/* NATIONAL PUBLIC PORTAL — 2026-09-21 */
html{scroll-behavior:smooth}
body{overflow-x:hidden!important;overflow-y:auto!important}
#results,#number-check,#schedule,#how-it-works,#help,#responsible-play{scroll-margin-top:76px}
.portalInfoButton{
  position:absolute;z-index:15;left:3.2vw;top:50%;transform:translateY(-50%);
  min-width:clamp(70px,6.5vw,98px);height:clamp(31px,4.2vh,40px);display:grid;place-items:center;
  padding:0 1vw;border:1px solid rgba(211,177,92,.72);border-radius:999px;
  background:linear-gradient(180deg,rgba(9,18,27,.90),rgba(3,9,14,.94));
  color:#e0c47b;text-decoration:none;font-size:clamp(11px,.9vw,14px);font-weight:800;letter-spacing:.10em;
  box-shadow:0 5px 14px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04)
}
.portalInfoButton:hover,.portalInfoButton:focus-visible{border-color:#e0c47b;color:#fff0bd;outline:none}
.resultStatusBadge{
  width:auto!important;height:auto!important;padding:4px 8px!important;border:1px solid rgba(65,190,128,.45)!important;
  border-radius:999px!important;background:rgba(29,122,78,.13)!important;color:#8fe0b2!important;
  font:800 clamp(7px,.55vw,10px) Inter,Arial,sans-serif!important;letter-spacing:.09em!important
}
.publicPortal{position:relative;z-index:2;min-height:100vh;background:radial-gradient(circle at 50% 0,rgba(174,130,45,.12),transparent 28%),linear-gradient(180deg,#071015 0,#04080b 46%,#030608 100%);color:#f4f0e7}
.publicNav{position:sticky;top:0;z-index:60;height:64px;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.2vw,38px);padding:0 24px;border-top:1px solid rgba(215,173,83,.24);border-bottom:1px solid rgba(215,173,83,.32);background:rgba(5,13,18,.94);backdrop-filter:blur(12px)}
.publicNav a{color:#c8c1b4;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.09em;white-space:nowrap}
.publicNav a:hover{color:#f0cf79}
.portalHero{width:min(1180px,92vw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:48px;align-items:center;padding:74px 0 64px;border-bottom:1px solid rgba(215,173,83,.22)}
.portalEyebrow{display:block;color:#d8b65f;font-size:11px;font-weight:800;letter-spacing:.22em}
.portalHero h2,.portalSectionHead h2,.responsibleSection h2{margin:10px 0 12px;font-family:Cinzel,Georgia,serif;color:#f0d487;font-weight:600;letter-spacing:.025em}
.portalHero h2{max-width:760px;font-size:clamp(34px,4.3vw,66px);line-height:1.03}
.portalHeroCopy p{max-width:690px;margin:0;color:#aaa397;font-size:15px;line-height:1.75}
.nextDrawCard{min-height:260px;padding:28px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(215,173,83,.58);border-radius:18px;background:linear-gradient(180deg,rgba(12,24,29,.94),rgba(5,12,16,.94));box-shadow:0 22px 50px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04)}
.nextDrawCard>span{color:#9c9588;font-size:10px;font-weight:800;letter-spacing:.22em}
.nextDrawCard>strong{margin-top:20px;color:#f2d681;font-family:Cinzel,Georgia,serif;font-size:24px;letter-spacing:.04em}
.nextDrawCard>b{margin-top:6px;color:#fff;font-size:48px;line-height:1}
.nextDrawCard>small{margin-top:10px;color:#aaa397;font-size:13px;font-weight:700;letter-spacing:.06em}
.nextDrawCard>em{margin-top:26px;padding-top:18px;border-top:1px solid rgba(215,173,83,.24);color:#d8b65f;font-size:14px;font-style:normal;font-weight:800;letter-spacing:.12em}
.portalSection{width:min(1180px,92vw);margin:0 auto;padding:68px 0;border-bottom:1px solid rgba(215,173,83,.18)}
.portalSectionHead{max-width:760px;margin-bottom:30px}
.portalSectionHead>span{color:#a78d50;font-size:10px;font-weight:800;letter-spacing:.2em}
.portalSectionHead h2{font-size:clamp(27px,3vw,42px)}
.portalSectionHead p{margin:0;color:#9e978b;font-size:14px;line-height:1.65}
.numberCheckPanel{display:grid;grid-template-columns:180px minmax(0,1fr) 140px;gap:12px;align-items:end;padding:22px;border:1px solid rgba(215,173,83,.38);border-radius:14px;background:rgba(8,18,22,.78)}
.numberCheckPanel label{display:grid;gap:8px}
.numberCheckPanel label>span{color:#9d9689;font-size:9px;font-weight:800;letter-spacing:.16em}
.numberCheckPanel select,.numberCheckPanel input{width:100%;height:48px;padding:0 14px;border:1px solid rgba(215,173,83,.32);border-radius:9px;outline:0;background:#081116;color:#fffdf8;font:800 14px Inter,Arial,sans-serif}
.numberCheckPanel select:focus,.numberCheckPanel input:focus{border-color:#e0bd66;box-shadow:0 0 0 2px rgba(224,189,102,.12)}
.numberCheckPanel button{height:48px;border:1px solid #d7ad53;border-radius:9px;background:#d7ad53;color:#191207;font-weight:900;letter-spacing:.09em;cursor:pointer}
.numberCheckResult{margin-top:14px;padding:18px 20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(5,12,16,.72);color:#9f988d;font-size:13px;line-height:1.6}
.numberCheckResult.has-match{border-color:rgba(72,188,126,.35)}
.numberCheckResult.is-warning{border-color:rgba(215,173,83,.38);color:#d8bd79}
.checkSummary{color:#d8b65f;font-size:11px;font-weight:900;letter-spacing:.14em}
.checkEmpty{margin:8px 0 0}
.checkMatchGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.checkMatchCard{min-width:0;padding:14px;border:1px solid rgba(215,173,83,.24);border-radius:10px;background:#071015}
.checkMatchHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.checkCategory{color:#d8b65f;font-size:10px;font-weight:900;letter-spacing:.12em}
.checkNumber{font-size:20px;letter-spacing:.06em}
.checkPosition{display:block;margin-top:10px;color:#eee8dc;font-size:12px}
.checkMeta{display:block;margin-top:5px;color:#8e877b;font-size:10px}
.drawScheduleGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.drawScheduleCard{min-height:150px;padding:18px;border:1px solid rgba(215,173,83,.32);border-radius:12px;background:linear-gradient(180deg,rgba(9,19,24,.88),rgba(5,12,16,.88))}
.drawScheduleCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawCategory{color:#a99668;font-size:10px;font-weight:900;letter-spacing:.13em}
.drawTime{color:#f2d681;font-size:22px}
.drawLabel{display:block;margin-top:24px;color:#fff;font-family:Cinzel,Georgia,serif;font-size:18px}
.drawScheduleNote{display:block;margin-top:8px;color:#807a70;font-size:9px;font-weight:800;letter-spacing:.14em}
.infoCardGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.infoCard{padding:24px;border:1px solid rgba(215,173,83,.3);border-radius:14px;background:rgba(7,16,21,.78)}
.infoCard>b{display:inline-grid;place-items:center;min-width:46px;height:30px;padding:0 10px;border:1px solid rgba(215,173,83,.42);border-radius:999px;color:#e2c36f;font-size:11px;letter-spacing:.1em}
.infoCard h3{margin:20px 0 8px;color:#f1ecdf;font-size:18px}
.infoCard p{margin:0;color:#9d968b;font-size:13px;line-height:1.7}
.faqList{display:grid;gap:10px}
.faqList details{border:1px solid rgba(215,173,83,.28);border-radius:10px;background:rgba(7,16,21,.76);overflow:hidden}
.faqList summary{padding:17px 20px;color:#e9e2d6;font-size:13px;font-weight:800;cursor:pointer;list-style:none}
.faqList summary::-webkit-details-marker{display:none}
.faqList summary::after{content:'+';float:right;color:#d8b65f;font-size:18px}
.faqList details[open] summary::after{content:'−'}
.faqList details p{margin:0;padding:0 20px 18px;color:#9e978b;font-size:13px;line-height:1.7}
.responsibleSection{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:30px}
.responsibleMark{width:100px;height:100px;display:grid;place-items:center;border:2px solid #d7ad53;border-radius:50%;color:#f1d37d;font:700 30px Cinzel,Georgia,serif}
.responsibleSection h2{font-size:clamp(26px,2.6vw,38px)}
.responsibleSection p{max-width:760px;margin:0;color:#9e978b;font-size:13px;line-height:1.7}
.publicFooter{min-height:120px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:28px max(4vw,24px);border-top:1px solid rgba(215,173,83,.28);background:#03070a;color:#7f796f;font-size:10px;font-weight:700;letter-spacing:.08em}
.publicFooter nav{display:flex;gap:22px}
.publicFooter a{color:#aaa295;text-decoration:none}
.publicFooter a:hover{color:#e8cc7c}
.publicFooter>div:last-child{text-align:right}
.historySearchField{height:40px;display:flex;align-items:center;gap:8px;padding:0 9px 0 11px;border:1px solid rgba(215,173,83,.28);border-radius:9px;background:rgba(6,15,20,.7)}
.historySearchField>span{color:#b99d5b;font-size:9px;font-weight:900;letter-spacing:.14em}
.historySearchField input{min-width:180px;width:100%;height:36px;padding:0;border:0;outline:0;background:transparent;color:#fffdf8;font:700 12px Inter,Arial,sans-serif}
.historySearchField input::placeholder{color:#706b63}
@media(max-width:900px){
  .publicNav{justify-content:flex-start;overflow-x:auto;padding:0 18px;gap:24px}
  .publicNav::-webkit-scrollbar{display:none}
  .portalHero{grid-template-columns:1fr;gap:28px;padding:54px 0}
  .nextDrawCard{min-height:210px}
  .drawScheduleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkMatchGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .publicFooter{grid-template-columns:1fr;justify-items:center;text-align:center}
  .publicFooter>div:last-child{text-align:center}
}
@media(max-width:700px){
  .brandSub{display:none!important}
  .portalInfoButton{left:2vw;min-width:64px;height:30px;font-size:2.45vw}
  .historyTopButton{right:2vw!important;min-width:76px!important;height:30px!important;font-size:2.45vw!important}
  .publicNav{height:54px;gap:22px}
  .publicNav a{font-size:10px}
  .portalHero,.portalSection{width:92vw}
  .portalHero{padding:42px 0 38px}
  .portalHero h2{font-size:9vw}
  .portalHeroCopy p{font-size:13px}
  .nextDrawCard{padding:22px}
  .nextDrawCard>b{font-size:42px}
  .portalSection{padding:46px 0}
  .portalSectionHead h2{font-size:7vw}
  .numberCheckPanel{grid-template-columns:1fr;padding:16px}
  .numberCheckPanel select,.numberCheckPanel input,.numberCheckPanel button{height:46px}
  .checkMatchGrid,.infoCardGrid,.drawScheduleGrid{grid-template-columns:1fr}
  .responsibleSection{grid-template-columns:74px 1fr;gap:18px}
  .responsibleMark{width:70px;height:70px;font-size:22px}
  .publicFooter nav{gap:12px;flex-wrap:wrap;justify-content:center}
  .historySearchField{width:100%}
  .historySearchField input{min-width:0}
}
#fourMeta{white-space:nowrap!important;letter-spacing:.12em!important;font-size:clamp(7px,.56vw,9px)!important}
.miniHead small{max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
  #fourMeta{font-size:1.7vw!important;letter-spacing:.04em!important}
  .miniHead small{max-width:64vw;font-size:1.75vw!important;letter-spacing:.04em!important}
  .resultStatusBadge{font-size:1.55vw!important;padding:3px 6px!important}
}
.portalHeroActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.portalHeroActions button,.portalNoticeBar button{height:40px;padding:0 14px;border:1px solid rgba(215,173,83,.44);border-radius:8px;background:#071015;color:#e5c873;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.portalHeroActions button:hover,.portalNoticeBar button:hover{border-color:#e5c873;color:#fff0bd}
.portalNoticeBar{width:min(1180px,92vw);margin:28px auto 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid rgba(215,173,83,.28);border-radius:10px;background:rgba(8,18,22,.74)}
.portalNoticeBar>span{color:#d7ad53;font-size:9px;font-weight:900;letter-spacing:.16em}
.portalNoticeBar>div{min-width:0;color:#bbb3a7;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portalNoticeBar button{height:34px}
.numberHistoryPanel{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;align-items:end;padding:20px;border:1px solid rgba(215,173,83,.34);border-radius:12px;background:rgba(8,18,22,.76)}
.numberHistoryPanel label{display:grid;gap:8px}.numberHistoryPanel label>span{color:#9d9689;font-size:9px;font-weight:800;letter-spacing:.16em}
.numberHistoryPanel input{width:100%;height:48px;padding:0 14px;border:1px solid rgba(215,173,83,.32);border-radius:9px;outline:0;background:#081116;color:#fffdf8;font:800 14px Inter,Arial,sans-serif}
.numberHistoryPanel button{height:48px;border:1px solid #d7ad53;border-radius:9px;background:#d7ad53;color:#191207;font-weight:900;letter-spacing:.07em;cursor:pointer}
.numberHistoryResult{margin-top:14px;padding:18px 20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(5,12,16,.72);color:#9f988d;font-size:13px;line-height:1.6}
.numberHistoryResult.has-history{border-color:rgba(72,188,126,.32)}
.numberHistoryResult.is-warning{border-color:rgba(215,173,83,.38);color:#d8bd79}
.numberHistorySummary{display:flex;align-items:center;justify-content:space-between;gap:14px}
.numberHistoryNumber{color:#fff;font-size:28px;letter-spacing:.08em}
.numberHistoryCount{color:#d8b65f;font-size:10px;font-weight:900;letter-spacing:.14em}
.numberHistoryEmpty{margin:10px 0 0}
.numberHistoryTimeline{display:grid;gap:8px;margin-top:16px}
.numberHistoryRow{display:grid;grid-template-columns:140px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(215,173,83,.20);border-radius:9px;background:#071015}
.numberHistoryDate{color:#aaa397;font-size:11px;font-weight:700}.numberHistoryPrize{color:#f0d487;font-size:12px}.numberHistoryPeriod{color:#767168;font-size:10px}
@media(max-width:700px){
  .portalHeroActions{display:grid;grid-template-columns:1fr}
  .portalHeroActions button{width:100%}
  .portalNoticeBar{grid-template-columns:1fr;gap:8px;margin-top:18px}
  .portalNoticeBar>div{white-space:normal;line-height:1.5}
  .portalNoticeBar button{width:100%}
  .numberHistoryPanel{grid-template-columns:1fr;padding:16px}
  .numberHistoryRow{grid-template-columns:1fr;gap:3px}
  .numberHistoryPeriod{margin-top:2px}
}
@media print{
  body{background:#fff!important;color:#000!important}
  .publicPortal,.historyOverlay,.portalInfoButton,.historyTopButton{display:none!important}
  .app{height:auto!important;min-height:100vh!important;background:#fff!important;filter:none!important}
  .app::before,.app::after,.scene{display:none!important}
  .fourCard,.miniCard{background:#fff!important;color:#000!important;box-shadow:none!important;border-color:#999!important}
  .prizeValue,.numberCell,.rbMainValue,.totoBall{color:#000!important;text-shadow:none!important}
}

/* NATIONAL PORTAL STAGE 3 — MULTILINGUAL + HELP CENTRE */
#draw-info{scroll-margin-top:76px}
.languageSwitch{display:flex;align-items:center;gap:3px;margin-left:8px;padding-left:12px;border-left:1px solid rgba(215,173,83,.24)}
.languageSwitch button{height:30px;min-width:34px;padding:0 8px;border:1px solid rgba(215,173,83,.22);border-radius:6px;background:transparent;color:#8f887d;font-size:10px;font-weight:900;cursor:pointer}
.languageSwitch button:hover{border-color:rgba(215,173,83,.56);color:#ead083}
.languageSwitch button.on{border-color:#d7ad53;background:rgba(215,173,83,.16);color:#f2d681}
.drawInfoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.drawInfoCard{min-height:210px;padding:24px;border:1px solid rgba(215,173,83,.30);border-radius:14px;background:linear-gradient(180deg,rgba(9,19,24,.86),rgba(5,12,16,.86))}
.drawInfoCategory{display:inline-grid;place-items:center;min-width:48px;height:30px;padding:0 10px;border:1px solid rgba(215,173,83,.42);border-radius:999px;color:#e2c36f;font-size:10px;font-weight:900;letter-spacing:.1em}
.drawInfoCardTitle{margin:18px 0 6px;color:#f1ecdf;font-size:19px}
.drawInfoTime{display:block;color:#f0d487;font-size:19px;line-height:1.4}
.drawInfoBodyText{margin:16px 0 0;color:#9d968b;font-size:13px;line-height:1.7}
.statusLegend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.statusLegendItem{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(5,12,16,.7)}
.statusLegendName{font-size:10px;letter-spacing:.1em}.statusLegendItem.published .statusLegendName{color:#8fe0b2}.statusLegendItem.scheduled .statusLegendName{color:#e7c974}
.statusLegendText{color:#9d968b;font-size:12px;line-height:1.5}
.helpArticleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:30px}
.helpArticleCard{position:relative;min-height:190px;padding:20px;text-align:left;border:1px solid rgba(215,173,83,.28);border-radius:12px;background:rgba(7,16,21,.78);color:#f4f0e7;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.helpArticleCard:hover{transform:translateY(-2px);border-color:rgba(215,173,83,.58);background:rgba(10,21,26,.88)}
.helpArticleIndex{color:#8e7c52;font-size:9px;font-weight:900;letter-spacing:.15em}
.helpArticleCardTitle{margin:16px 0 8px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:17px;line-height:1.25}
.helpArticleSummary{margin:0;color:#9d968b;font-size:12px;line-height:1.65}
.helpArticleOpen{position:absolute;left:20px;bottom:17px;color:#c5a75e;font-size:9px;letter-spacing:.11em}
.quickAnswersTitle{margin:8px 0 12px;color:#a78d50;font-size:10px;font-weight:900;letter-spacing:.16em}
.helpArticleOverlay{position:fixed;z-index:150;inset:0;display:grid;place-items:center;padding:28px;background:rgba(0,5,9,.74);backdrop-filter:blur(12px)}
.helpArticleOverlay[hidden]{display:none!important}
.helpArticlePage{width:min(820px,94vw);max-height:88vh;overflow:auto;border:1px solid rgba(215,173,83,.55);border-radius:18px;background:linear-gradient(180deg,#08141a,#040a0e);box-shadow:0 32px 90px rgba(0,0,0,.55)}
.helpArticlePage>header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px;border-bottom:1px solid rgba(215,173,83,.22);background:rgba(7,16,21,.96);backdrop-filter:blur(10px)}
.helpArticlePage>header span{color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.16em}
.helpArticlePage>header h2{margin:8px 0 0;color:#f1d681;font-family:Cinzel,Georgia,serif;font-size:clamp(24px,3vw,38px);line-height:1.1}
.helpArticlePage>header button{width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(215,173,83,.35);border-radius:50%;background:#071015;color:#e6c66f;font-size:24px;line-height:1;cursor:pointer}
.helpArticleBody{padding:28px 30px 34px}
.helpArticleLead{margin:0 0 22px;color:#c8c0b3;font-size:15px;line-height:1.75}
.helpArticleParagraph{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.07)}
.helpArticleStep{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(215,173,83,.32);border-radius:50%;color:#d7ad53;font-size:9px;font-weight:900}
.helpArticleText{margin:4px 0 0;color:#a9a195;font-size:13px;line-height:1.75}
body.modalOpen{overflow:hidden!important}
@media(max-width:900px){
  .languageSwitch{margin-left:0;padding-left:10px}
  .drawInfoGrid,.helpArticleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statusLegend{grid-template-columns:1fr}
}
@media(max-width:700px){
  #draw-info{scroll-margin-top:64px}
  .languageSwitch{position:sticky;right:0;background:rgba(5,13,18,.96);padding:0 0 0 10px}
  .languageSwitch button{height:28px;min-width:32px;padding:0 6px;font-size:9px}
  .drawInfoGrid,.helpArticleGrid{grid-template-columns:1fr}
  .drawInfoCard{min-height:0}
  .statusLegendItem{grid-template-columns:1fr;gap:5px}
  .helpArticleCard{min-height:175px}
  .helpArticleOverlay{padding:12px}
  .helpArticlePage{width:100%;max-height:92vh;border-radius:14px}
  .helpArticlePage>header{padding:20px}
  .helpArticleBody{padding:22px 20px 28px}
  .helpArticleLead{font-size:13px}
  .helpArticleParagraph{grid-template-columns:38px 1fr;gap:10px}
}

/* NATIONAL PORTAL STAGE 4 — SEARCH / NEWS / CONTACT / LEGAL */
#news,#contact{scroll-margin-top:76px}
.siteSearchButton{height:30px;padding:0 10px;border:1px solid rgba(215,173,83,.28);border-radius:6px;background:transparent;color:#c8c1b4;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.siteSearchButton:hover{border-color:#d7ad53;color:#f0cf79}
.newsGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.newsCard{position:relative;min-height:210px;padding:24px;border:1px solid rgba(215,173,83,.30);border-radius:14px;background:linear-gradient(180deg,rgba(9,19,24,.88),rgba(5,12,16,.88))}
.newsType{color:#b69a59;font-size:9px;font-weight:900;letter-spacing:.15em}
.newsCard h3{margin:18px 0 10px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:19px;line-height:1.25}
.newsCard p{margin:0 0 34px;color:#9d968b;font-size:13px;line-height:1.7}
.newsDate{position:absolute;left:24px;bottom:20px;color:#747067;font-size:9px;letter-spacing:.08em}
.contactPanel{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;padding:22px;border:1px solid rgba(215,173,83,.34);border-radius:14px;background:rgba(8,18,22,.78)}
.contactPanel label{display:grid;gap:8px}.contactPanel label>span{color:#9d9689;font-size:9px;font-weight:800;letter-spacing:.14em}
.contactPanel input,.contactPanel select,.contactPanel textarea{width:100%;border:1px solid rgba(215,173,83,.32);border-radius:9px;outline:0;background:#081116;color:#fffdf8;font:700 13px Inter,Arial,sans-serif}
.contactPanel input,.contactPanel select{height:46px;padding:0 13px}.contactPanel textarea{padding:12px 13px;resize:vertical;min-height:110px}
.contactMessageField{grid-column:1/-1}.contactPanel button{grid-column:2;justify-self:end;height:44px;padding:0 20px;border:1px solid #d7ad53;border-radius:9px;background:#d7ad53;color:#191207;font-weight:900;letter-spacing:.08em;cursor:pointer}
.issueReportActions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.contactResult{margin-top:14px;padding:16px 18px;white-space:pre-wrap;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(5,12,16,.7);color:#918b80;font-size:12px;line-height:1.6}
.contactResult.is-ready{border-color:rgba(72,188,126,.30);color:#bdb5a8}
.publicFooter button{padding:0;border:0;background:transparent;color:#aaa295;font:inherit;font-size:10px;cursor:pointer}.publicFooter button:hover{color:#e8cc7c}
.siteSearchOverlay,.infoOverlay{position:fixed;z-index:170;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,5,9,.76);backdrop-filter:blur(12px)}
.siteSearchOverlay[hidden],.infoOverlay[hidden]{display:none!important}
.siteSearchPage,.infoOverlayPage{width:min(900px,94vw);max-height:88vh;overflow:hidden;border:1px solid rgba(215,173,83,.55);border-radius:18px;background:linear-gradient(180deg,#08141a,#040a0e);box-shadow:0 32px 90px rgba(0,0,0,.56)}
.siteSearchPage>header,.infoOverlayPage>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid rgba(215,173,83,.22)}
.siteSearchPage>header span,.infoOverlayPage>header span{color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.15em}
.siteSearchPage>header h2,.infoOverlayPage>header h2{margin:7px 0 0;color:#f1d681;font-family:Cinzel,Georgia,serif;font-size:28px}
.siteSearchPage>header button,.infoOverlayPage>header button{width:38px;height:38px;border:1px solid rgba(215,173,83,.35);border-radius:50%;background:#071015;color:#e6c66f;font-size:24px;cursor:pointer}
.siteSearchBar{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.siteSearchBar input{width:100%;height:50px;padding:0 16px;border:1px solid rgba(215,173,83,.35);border-radius:10px;outline:0;background:#071015;color:#fff;font:700 14px Inter,Arial,sans-serif}
.siteSearchBar input:focus{border-color:#d7ad53;box-shadow:0 0 0 2px rgba(215,173,83,.10)}
.siteSearchResults{max-height:60vh;overflow:auto;padding:14px}
.siteSearchHint{padding:28px;text-align:center;color:#807a70;font-size:12px}
.siteSearchResult{width:100%;display:grid;grid-template-columns:80px minmax(0,1fr);gap:4px 14px;padding:14px 16px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;text-align:left;color:#fff;cursor:pointer}
.siteSearchResult:hover{background:rgba(215,173,83,.06)}
.siteSearchResult>span{grid-row:1/3;color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.12em;padding-top:3px}
.siteSearchResult>b{font-size:13px;color:#eee8dc}.siteSearchResult>small{color:#8f887d;font-size:11px;line-height:1.45}
.infoOverlayPage{overflow:auto}
.infoOverlayBody{padding:24px 28px 30px}
.infoLegalRow{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.07)}
.infoLegalRow:first-child{border-top:0}
.infoLegalRow>span{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(215,173,83,.30);border-radius:50%;color:#d7ad53;font-size:9px;font-weight:900}
.infoLegalRow>p{margin:3px 0 0;color:#aaa296;font-size:13px;line-height:1.75}
@media(max-width:1000px){
  .newsGrid{grid-template-columns:1fr}
  .siteSearchButton{position:sticky;right:0;background:rgba(5,13,18,.96)}
}
@media(max-width:700px){
  #news,#contact{scroll-margin-top:64px}
  .siteSearchButton{height:28px;padding:0 8px;font-size:9px}
  .newsCard{min-height:0}
  .contactPanel{grid-template-columns:1fr;padding:16px}
  .contactMessageField,.contactPanel button{grid-column:auto}
  .contactPanel button{width:100%;justify-self:stretch}
  .siteSearchOverlay,.infoOverlay{padding:10px}
  .siteSearchPage,.infoOverlayPage{width:100%;max-height:92vh;border-radius:14px}
  .siteSearchPage>header,.infoOverlayPage>header{padding:18px}
  .siteSearchBar{padding:14px}
  .siteSearchResults{padding:8px;max-height:66vh}
  .siteSearchResult{grid-template-columns:60px 1fr;padding:12px 10px}
  .infoOverlayBody{padding:18px}
  .infoLegalRow{grid-template-columns:36px 1fr;gap:10px}
}
.publicNav{max-width:100vw!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;padding-left:max(24px,calc((100vw - 1180px)/2))!important;padding-right:max(24px,calc((100vw - 1180px)/2))!important}
.publicNav>*{flex:0 0 auto}
.publicNav::-webkit-scrollbar{height:0}

/* NATIONAL PORTAL STAGE 5 — GUIDE / STATISTICS / CALENDAR / STATUS */
#prize-guide,#statistics,#draw-calendar,#status-centre{scroll-margin-top:76px}
.prizeGuideGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.prizeGuideCard{min-height:170px;padding:20px;border:1px solid rgba(215,173,83,.30);border-radius:12px;background:linear-gradient(180deg,rgba(9,19,24,.86),rgba(5,12,16,.86))}
.prizeGuideCard>span{color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.14em}
.prizeGuideCard h3{margin:18px 0 8px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:17px}
.prizeGuideCard p{margin:0;color:#9d968b;font-size:12px;line-height:1.65}
.statisticsGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.statCard{min-height:130px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px;border:1px solid rgba(215,173,83,.25);border-radius:12px;background:rgba(7,16,21,.78);text-align:center}
.statCard strong{color:#f1d681;font-size:32px;line-height:1}
.statCard span{margin-top:10px;color:#969085;font-size:10px;font-weight:800;line-height:1.4}
.statisticsNote{margin-top:14px;padding:13px 15px;border-left:2px solid rgba(215,173,83,.48);background:rgba(215,173,83,.04);color:#8f897e;font-size:11px;line-height:1.6}
.drawCalendar{display:grid;gap:8px}
.calendarRow{display:grid;grid-template-columns:150px minmax(0,1fr) 100px;align-items:center;gap:14px;padding:14px 16px;border:1px solid rgba(215,173,83,.22);border-radius:10px;background:rgba(7,16,21,.72)}
.calendarDate{color:#aaa397;font-size:11px;font-weight:700}
.calendarRow b{color:#eee8dc;font-size:13px}.calendarRow strong{justify-self:end;color:#f0d487;font-size:17px}
.statusCentreGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.statusCentreCard{position:relative;min-height:120px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(7,16,21,.76)}
.statusCentreCard>span{display:block;color:#918a7f;font-size:9px;font-weight:900;letter-spacing:.14em}
.statusCentreCard>strong{display:block;margin-top:16px;color:#eee8dc;font-size:18px}
.statusCentreCard>i{position:absolute;right:18px;top:18px;width:9px;height:9px;border-radius:50%;background:#d7ad53;box-shadow:0 0 0 4px rgba(215,173,83,.08)}
.statusCentreCard.ok>i{background:#5fd298;box-shadow:0 0 0 4px rgba(95,210,152,.08)}
.statusCentreCard.ok>strong{color:#8fe0b2}.statusCentreCard.wait>strong{color:#e7c974}
.statusCheckedAt{margin-top:12px;color:#777168;font-size:10px;font-weight:700;letter-spacing:.06em;text-align:right}
@media(max-width:1050px){.prizeGuideGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.statisticsGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
 #prize-guide,#statistics,#draw-calendar,#status-centre{scroll-margin-top:64px}
 .prizeGuideGrid,.statisticsGrid,.statusCentreGrid{grid-template-columns:1fr}
 .prizeGuideCard,.statCard{min-height:0}
 .calendarRow{grid-template-columns:1fr auto;gap:5px 12px}
 .calendarDate{grid-column:1/-1}.calendarRow strong{grid-column:2;grid-row:2}
 .statusCheckedAt{text-align:left}
}

/* NATIONAL PORTAL STAGE 6 — ARCHIVE / DRAW DETAIL / ACCESSIBILITY */
.skipLink{position:fixed;z-index:500;left:14px;top:14px;transform:translateY(-180%);padding:10px 14px;border:1px solid #d7ad53;border-radius:8px;background:#071015;color:#f0d487;font-size:12px;font-weight:900;text-decoration:none;transition:transform .15s ease}
.skipLink:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #f0cf79!important;outline-offset:3px!important}
.historyArchiveFilters{display:grid;grid-template-columns:repeat(2,118px);gap:8px}
.historyArchiveFilters label{display:grid;gap:5px;color:#cdbb8d;font-size:9px;font-weight:800;letter-spacing:.08em}
.historyArchiveFilters select{width:100%;height:38px;padding:0 10px;border:1px solid rgba(215,173,83,.34);border-radius:9px;outline:0;background:rgba(4,14,22,.82);color:#fffdf8;font:700 11px Inter,Arial,sans-serif}
.historyDetailButton{height:28px;padding:0 10px;border:1px solid rgba(215,173,83,.42);border-radius:7px;background:rgba(215,173,83,.08);color:#e3c46f;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.historyDetailButton:hover{border-color:#d7ad53;color:#fff0bd}
.drawDetailOverlay{position:fixed;z-index:190;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,5,9,.78);backdrop-filter:blur(12px)}
.drawDetailOverlay[hidden]{display:none!important}
.drawDetailPage{width:min(920px,94vw);max-height:90vh;overflow:auto;border:1px solid rgba(215,173,83,.62);border-radius:18px;background:linear-gradient(180deg,#08141a,#04090d);box-shadow:0 34px 100px rgba(0,0,0,.6)}
.drawDetailPage>header{position:sticky;top:0;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px;border-bottom:1px solid rgba(215,173,83,.24);background:rgba(7,16,21,.97);backdrop-filter:blur(10px)}
.drawDetailPage>header>div{min-width:0}.drawDetailPage>header span{color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.15em}
.drawDetailPage>header h2{margin:8px 0 5px;color:#f1d681;font-family:Cinzel,Georgia,serif;font-size:clamp(28px,3.3vw,44px);line-height:1}
.drawDetailPage>header p{margin:0;color:#999287;font-size:11px;font-weight:700;line-height:1.5}
.drawDetailPage>header>button{width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(215,173,83,.35);border-radius:50%;background:#071015;color:#e6c66f;font-size:24px;cursor:pointer}
.drawDetailActions{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.drawDetailActions button{height:36px;padding:0 13px;border:1px solid rgba(215,173,83,.36);border-radius:8px;background:#071015;color:#e4c56f;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.drawDetailActions button:hover{border-color:#d7ad53;color:#fff0bd}
.drawDetailBody{padding:26px 28px 32px}
.detailTop3{width:min(560px,100%);margin:0 auto;display:grid;gap:8px}
.detailPrizeBox{position:relative;min-height:82px;display:grid;place-items:center;border:1px solid rgba(215,173,83,.42);border-radius:10px;background:rgba(7,16,21,.78)}
.detailPrizeLabel{position:absolute;left:12px;top:10px;color:#c9aa61;font-size:10px;font-weight:900;letter-spacing:.1em}
.detailPrizeValue{color:#fff;font-size:clamp(34px,4.2vw,54px);letter-spacing:.12em}
.detailSets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.detailSet{border:1px solid rgba(215,173,83,.28);border-radius:10px;overflow:hidden;background:rgba(7,16,21,.70)}
.detailSetTitle{margin:0;padding:11px 14px;border-bottom:1px solid rgba(215,173,83,.22);color:#e2c270;font-family:Cinzel,Georgia,serif;font-size:13px;text-align:center}
.detailSetGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.detailSetNumber{display:grid;place-items:center;min-height:42px;border-right:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);color:#eee8dd;font-size:14px;font-weight:800}
.detailSetNumber:nth-child(2n){border-right:0}.detailUnavailable{margin:0;padding:22px;color:#817b71;font-size:12px;text-align:center}
.detailSingleResult{min-height:240px;display:flex;align-items:center;justify-content:center;gap:28px}
.detailBall,.detailTotoBall{display:grid;place-items:center;border-radius:50%;border:2px solid #d5aa51;background:radial-gradient(circle at 36% 30%,#ff4b48 0%,#df111d 38%,#a60715 70%,#4b0108 100%);box-shadow:inset -8px -10px 15px rgba(47,0,4,.48),0 8px 22px rgba(0,0,0,.3);color:#fffdfa}
.detailBall{width:112px;height:112px;font-size:46px}.detailSingleMeta{display:grid;gap:9px}.detailSingleLabel{color:#a18f65;font-size:10px;font-weight:900;letter-spacing:.15em}.detailSingleSession{color:#f0d487;font-size:27px}
.detailTotoLine{min-height:210px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.detailTotoBall{width:76px;height:76px;font-size:29px;font-weight:900}.detailTotoPlus{color:#d8b65f;font-size:28px;font-weight:900}.detailTotoBonus{border-width:3px;border-color:#f0cf72}
@media(max-width:900px){
 .historyToolbar{flex-wrap:wrap!important}.historyArchiveFilters{order:3;width:100%;grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .historyArchiveFilters{gap:6px}.historyArchiveFilters select{height:36px;font-size:2.5vw}
 .historyDetailButton{height:26px;padding:0 8px;font-size:2vw}
 .drawDetailOverlay{padding:10px}.drawDetailPage{width:100%;max-height:93vh;border-radius:14px}
 .drawDetailPage>header{padding:18px}.drawDetailActions{display:grid;grid-template-columns:1fr;gap:6px;padding:12px 16px}
 .drawDetailActions button{width:100%}.drawDetailBody{padding:20px 16px 26px}
 .detailPrizeBox{min-height:68px}.detailPrizeValue{font-size:8vw}.detailSets{grid-template-columns:1fr}
 .detailBall{width:88px;height:88px;font-size:36px}.detailSingleResult{min-height:190px;gap:20px}
 .detailTotoLine{min-height:180px;gap:7px}.detailTotoBall{width:52px;height:52px;font-size:21px}
}
@media print{
 body.printDrawDetail>*:not(#drawDetailOverlay){display:none!important}
 body.printDrawDetail #drawDetailOverlay{position:static!important;display:block!important;padding:0!important;background:#fff!important;backdrop-filter:none!important;color:#000!important}
 body.printDrawDetail .drawDetailPage{width:100%!important;max-height:none!important;overflow:visible!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#000!important}
 body.printDrawDetail .drawDetailPage>header{position:static!important;background:#fff!important;border-bottom:2px solid #222!important}
 body.printDrawDetail .drawDetailPage>header h2,body.printDrawDetail .detailPrizeValue,body.printDrawDetail .detailSetNumber,body.printDrawDetail .detailSingleSession{color:#000!important}
 body.printDrawDetail .drawDetailPage>header>button,body.printDrawDetail .drawDetailActions{display:none!important}
 body.printDrawDetail .detailPrizeBox,body.printDrawDetail .detailSet{background:#fff!important;border-color:#555!important}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* NATIONAL PORTAL STAGE 7 — HOME / CATEGORY PAGES / ANNOUNCEMENT CENTRE */
#home,#category-4d,#category-rb,#category-toto{scroll-margin-top:76px}
.homeDashboard{width:min(1180px,92vw);margin:34px auto 0;padding:34px;border:1px solid rgba(215,173,83,.30);border-radius:18px;background:linear-gradient(180deg,rgba(8,18,23,.90),rgba(4,10,14,.86));box-shadow:0 18px 48px rgba(0,0,0,.20)}
.homeDashboardHead{max-width:780px}
.homeDashboardHead>span,.homeUpcomingHead>span{color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.16em}
.homeDashboardHead h2{margin:9px 0 10px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:clamp(28px,3.4vw,46px);line-height:1.08}
.homeDashboardHead p{margin:0;color:#9f988c;font-size:13px;line-height:1.65}
.latestResultCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.latestResultCard{min-width:0;display:flex;flex-direction:column;padding:20px;border:1px solid rgba(215,173,83,.28);border-radius:14px;background:rgba(5,13,18,.80)}
.latestResultCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.latestResultCardHead>span{color:#e5c46d;font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:700}
.latestResultCardHead>b{padding:4px 7px;border:1px solid rgba(95,210,152,.28);border-radius:999px;background:rgba(95,210,152,.07);color:#8fe0b2;font-size:8px;letter-spacing:.08em}
.latestResultValue{display:block;min-height:52px;margin-top:20px;color:#fff;font-size:clamp(20px,2vw,30px);line-height:1.35;letter-spacing:.035em;word-break:break-word}
.latestResultMeta{display:block;margin-top:8px;color:#817b71;font-size:10px;line-height:1.5}
.latestResultCard button{align-self:flex-start;margin-top:20px;height:36px;padding:0 13px;border:1px solid rgba(215,173,83,.38);border-radius:8px;background:#071015;color:#e3c36d;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.latestResultCard button:disabled{opacity:.35;cursor:default}

.homeUpcomingHead{display:flex;align-items:end;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06)}
.homeUpcomingHead h3{margin:6px 0 0;color:#eee8dc;font-size:18px}
.homeUpcomingCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.homeUpcomingCard{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid rgba(215,173,83,.22);border-radius:10px;background:rgba(7,16,21,.70)}
.homeUpcomingIdentity{min-width:0;display:grid;gap:5px}
.homeUpcomingIdentity>span{color:#a99058;font-size:8px;font-weight:900;letter-spacing:.12em}
.homeUpcomingIdentity>strong{overflow:hidden;color:#eee8dc;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.homeUpcomingTime{flex:0 0 auto;display:grid;justify-items:end;gap:4px}
.homeUpcomingTime>b{color:#f0d487;font-size:18px}
.homeUpcomingTime>small{color:#7d776e;font-size:9px}
.homeQuickLinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.homeQuickLinks button{height:36px;padding:0 13px;border:1px solid rgba(215,173,83,.28);border-radius:8px;background:rgba(215,173,83,.05);color:#cdb36d;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.homeQuickLinks button:hover{border-color:#d7ad53;color:#fff0bd}
.categoryInfoSection{position:relative}
.categoryInfoHero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:28px}
.categoryInfoEyebrow{color:#a78d50;font-size:10px;font-weight:900;letter-spacing:.18em}
.categoryInfoHero h2{margin:8px 0 10px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:clamp(36px,4.6vw,64px);line-height:1}
.categoryInfoHero p{max-width:760px;margin:0;color:#9e978b;font-size:13px;line-height:1.7}
.categoryInfoStatus{min-width:190px;display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid rgba(215,173,83,.22);border-radius:10px;background:rgba(7,16,21,.72)}
.categoryInfoStatus>i{width:10px;height:10px;border-radius:50%;background:#d7ad53;box-shadow:0 0 0 4px rgba(215,173,83,.08)}
.categoryInfoStatus.is-published>i{background:#5fd298;box-shadow:0 0 0 4px rgba(95,210,152,.08)}
.categoryInfoStatus>div{min-width:0;display:grid;gap:4px}
.categoryInfoStatus span{color:#e8dfd2;font-size:10px;font-weight:900;letter-spacing:.08em}
.categoryInfoStatus small{overflow:hidden;color:#777168;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.categoryInfoFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.categoryFactCard{min-height:112px;padding:16px;border:1px solid rgba(215,173,83,.22);border-radius:10px;background:rgba(7,16,21,.72)}
.categoryFactCard>span{display:block;color:#897f6b;font-size:8px;font-weight:900;letter-spacing:.12em}
.categoryFactCard>strong{display:block;margin-top:12px;color:#eee7db;font-size:15px;line-height:1.45;word-break:break-word}
.categoryFactCard>small{display:block;margin-top:7px;color:#777168;font-size:9px}
.categoryInfoActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.categoryInfoActions button{height:38px;padding:0 14px;border:1px solid rgba(215,173,83,.34);border-radius:8px;background:#071015;color:#e4c56e;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.categoryInfoActions button:hover{border-color:#d7ad53;color:#fff0bd}

.yearArchivePanel{margin-top:28px;border:1px solid rgba(215,173,83,.24);border-radius:12px;background:rgba(7,16,21,.68);overflow:hidden}
.yearArchiveHead{padding:17px 18px;border-bottom:1px solid rgba(215,173,83,.18)}
.yearArchiveHead>span{color:#a78d50;font-size:9px;font-weight:900;letter-spacing:.14em}
.yearArchiveHead h3{margin:6px 0 0;color:#eee8dc;font-size:17px}
.yearArchiveTable{display:grid}
.yearArchiveRow{display:grid;grid-template-columns:1.2fr repeat(4,1fr);align-items:center;min-height:46px;border-bottom:1px solid rgba(255,255,255,.055)}
.yearArchiveRow:last-child{border-bottom:0}
.yearArchiveRow>*{padding:0 16px;text-align:center;color:#bcb4a7;font-size:11px}
.yearArchiveRow>*:first-child{text-align:left}
.yearArchiveHeader{background:rgba(215,173,83,.045)}
.yearArchiveHeader>span{color:#8e8679;font-size:8px;font-weight:900;letter-spacing:.11em}
.yearArchiveRow>strong{color:#f0d487;font-size:13px}
.announcementCentre{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px}
.announcementFeatured{min-height:300px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px;border:1px solid rgba(215,173,83,.36);border-radius:16px;background:radial-gradient(circle at 85% 10%,rgba(215,173,83,.12),transparent 34%),linear-gradient(180deg,rgba(10,21,26,.94),rgba(5,12,16,.90))}
.announcementFeatureBadge{display:inline-flex;padding:5px 8px;border:1px solid rgba(215,173,83,.34);border-radius:999px;color:#caaa5f;font-size:8px;font-weight:900;letter-spacing:.11em}
.announcementFeatured h3{max-width:650px;margin:20px 0 10px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:clamp(25px,2.8vw,40px);line-height:1.08}
.announcementFeatured p{max-width:650px;margin:0;color:#9f988c;font-size:13px;line-height:1.65}
.announcementFeatured strong{display:block;margin-top:20px;color:#eee7db;font-size:12px;line-height:1.6}
.announcementFeatured button,.announcementRow button{height:36px;padding:0 13px;border:1px solid rgba(215,173,83,.38);border-radius:8px;background:#071015;color:#e4c56e;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.announcementFeatured button{margin-top:22px}
.announcementArchive{display:grid;gap:9px}
.announcementRow{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:1px solid rgba(215,173,83,.22);border-radius:11px;background:rgba(7,16,21,.72)}
.announcementRow>span{color:#a99058;font-size:8px;font-weight:900;letter-spacing:.1em}
.announcementRow h4{margin:0;color:#eee8dc;font-size:13px}
.announcementRow p{margin:5px 0 0;color:#8f887d;font-size:11px;line-height:1.5}
.announcementRow small{display:block;margin-top:6px;color:#716b63;font-size:9px;line-height:1.4}
#news .newsGrid{display:none}

@media(max-width:1050px){
 .homeUpcomingCards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .announcementCentre{grid-template-columns:1fr}
}
@media(max-width:800px){
 .latestResultCards{grid-template-columns:1fr}
 .categoryInfoFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 #home,#category-4d,#category-rb,#category-toto{scroll-margin-top:64px}
 .homeDashboard{width:92vw;margin-top:22px;padding:20px;border-radius:14px}
 .homeDashboardHead h2{font-size:7.5vw}
 .latestResultCards{margin-top:20px;gap:10px}
 .latestResultCard{padding:16px}
 .latestResultValue{min-height:0;font-size:6.2vw}
 .homeUpcomingCards{grid-template-columns:1fr;gap:7px}
 .homeUpcomingCard{padding:12px}
 .homeQuickLinks{display:grid;grid-template-columns:1fr 1fr}
 .homeQuickLinks button{width:100%}
 .categoryInfoHero{grid-template-columns:1fr}
 .categoryInfoStatus{width:100%;min-width:0}
 .categoryInfoFacts{grid-template-columns:1fr}
 .categoryInfoActions{display:grid;grid-template-columns:1fr}
 .categoryInfoActions button{width:100%}
 .yearArchiveRow{grid-template-columns:1.2fr repeat(4,.8fr)}
 .yearArchiveRow>*{padding:0 6px;font-size:2.45vw}
 .yearArchiveHeader>span{font-size:2vw}
 .announcementFeatured{min-height:0;padding:22px}
 .announcementFeatured h3{font-size:7vw}
 .announcementRow{grid-template-columns:52px 1fr}
 .announcementRow button{grid-column:1/-1;width:100%}
}

/* FINAL NATIONAL PORTAL — ARCHIVE CENTRE / ABOUT / FINAL POLISH */
#archive-centre,#about{scroll-margin-top:76px}
.archiveCentreToolbar{display:grid;grid-template-columns:160px 130px 130px minmax(220px,1fr);gap:10px;align-items:end;padding:18px;border:1px solid rgba(215,173,83,.28);border-radius:12px;background:rgba(7,16,21,.74)}
.archiveCentreToolbar label{display:grid;gap:7px}.archiveCentreToolbar label>span{color:#998f7b;font-size:8px;font-weight:900;letter-spacing:.13em}
.archiveCentreToolbar select,.archiveCentreToolbar input{width:100%;height:42px;padding:0 12px;border:1px solid rgba(215,173,83,.30);border-radius:8px;outline:0;background:#071015;color:#fff;font:700 12px Inter,Arial,sans-serif}
.archiveCentreToolbar select:focus,.archiveCentreToolbar input:focus{border-color:#d7ad53;box-shadow:0 0 0 2px rgba(215,173,83,.08)}
.archiveCentreSummary{margin:14px 0 8px;color:#a58f5b;font-size:10px;font-weight:900;letter-spacing:.11em}
.archiveCentreList{display:grid;gap:7px}
.archiveCentreRow{display:grid;grid-template-columns:70px 190px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 14px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(6,14,18,.68)}
.archiveCentreCategory{color:#d8b65f;font-size:10px;font-weight:900;letter-spacing:.1em}
.archiveCentreIdentity{min-width:0;display:grid;gap:3px}.archiveCentreIdentity strong{overflow:hidden;color:#eee8dc;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.archiveCentreIdentity small{color:#817b71;font-size:9px}
.archiveCentreResult{min-width:0;overflow:hidden;color:#a8a095;font-size:11px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.archiveCentreRow button{height:32px;padding:0 11px;border:1px solid rgba(215,173,83,.34);border-radius:7px;background:#071015;color:#e2c46d;font-size:8px;font-weight:900;letter-spacing:.07em;cursor:pointer}
.archiveCentreRow button:disabled{opacity:.35}.archiveCentreActions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.archiveCentreActions button{height:38px;padding:0 14px;border:1px solid rgba(215,173,83,.34);border-radius:8px;background:#071015;color:#e2c46d;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}

.categoryArchiveMini{margin-top:20px;border:1px solid rgba(215,173,83,.20);border-radius:10px;overflow:hidden;background:rgba(5,12,16,.58)}
.categoryArchiveMiniHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(215,173,83,.15)}
.categoryArchiveMiniHead span{color:#9b8b68;font-size:8px;font-weight:900;letter-spacing:.12em}.categoryArchiveMiniHead b{color:#d8b65f;font-size:11px}
.categoryArchiveMiniRow{width:100%;display:grid;grid-template-columns:100px 180px minmax(0,1fr);align-items:center;gap:12px;padding:11px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;text-align:left;cursor:pointer}
.categoryArchiveMiniRow:last-child{border-bottom:0}.categoryArchiveMiniRow:hover{background:rgba(215,173,83,.04)}
.categoryArchiveMiniRow span{color:#817b71;font-size:9px}.categoryArchiveMiniRow strong{overflow:hidden;color:#eee8dc;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.categoryArchiveMiniRow small{overflow:hidden;color:#8f887d;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.categoryArchiveEmpty{margin:0;padding:14px;color:#6e6962;text-align:center}
.aboutGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.aboutCard{min-height:190px;padding:22px;border:1px solid rgba(215,173,83,.24);border-radius:12px;background:rgba(7,16,21,.72)}
.aboutCard>span{color:#8e7c52;font-size:9px;font-weight:900;letter-spacing:.15em}.aboutCard h3{margin:16px 0 8px;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:18px}.aboutCard p{margin:0;color:#9d968b;font-size:12px;line-height:1.7}
.publicInformationPanel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.publicInformationPanel>div{padding:16px;border:1px solid rgba(215,173,83,.20);border-radius:9px;background:rgba(5,12,16,.62)}
.publicInformationPanel span{display:block;color:#81796b;font-size:8px;font-weight:900;letter-spacing:.11em}.publicInformationPanel strong{display:block;margin-top:10px;color:#e7e0d4;font-size:11px;line-height:1.45}

@media(max-width:900px){
 .archiveCentreToolbar{grid-template-columns:1fr 1fr}.archiveCentreSearch{grid-column:1/-1}
 .archiveCentreRow{grid-template-columns:60px 170px minmax(0,1fr)}.archiveCentreRow button{grid-column:1/-1;width:100%}
 .publicInformationPanel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 #archive-centre,#about{scroll-margin-top:64px}
 .archiveCentreToolbar{grid-template-columns:1fr;padding:14px}.archiveCentreSearch{grid-column:auto}
 .archiveCentreRow{grid-template-columns:1fr;gap:5px;padding:12px}.archiveCentreResult{white-space:normal}
 .archiveCentreActions{display:grid;grid-template-columns:1fr}.archiveCentreActions button{width:100%}
 .categoryArchiveMiniRow{grid-template-columns:1fr;gap:3px}.categoryArchiveMiniRow small{white-space:normal}
 .aboutGrid,.publicInformationPanel{grid-template-columns:1fr}
 .aboutCard{min-height:0}
}
@media print{
 body.printArchiveCentre>*:not(#publicPortal){display:none!important}
 body.printArchiveCentre #publicPortal>*:not(#archive-centre){display:none!important}
 body.printArchiveCentre #archive-centre{display:block!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;color:#000!important}
 body.printArchiveCentre #archive-centre::before{content:"MACAU RESULT — PUBLIC RESULT ARCHIVE";display:block;margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid #222;color:#000;font:700 22px Georgia,serif}
 body.printArchiveCentre .portalSectionHead h2,body.printArchiveCentre .archiveCentreIdentity strong,body.printArchiveCentre .archiveCentreResult{color:#000!important}
 body.printArchiveCentre .archiveCentreToolbar,body.printArchiveCentre .archiveCentreActions,body.printArchiveCentre .archiveCentreRow button{display:none!important}
 body.printArchiveCentre .archiveCentreRow{display:grid!important;grid-template-columns:70px 170px 1fr!important;background:#fff!important;border-color:#aaa!important;break-inside:avoid}
 body.printArchiveCentre .archiveCentreCategory,body.printArchiveCentre .archiveCentreIdentity small,body.printArchiveCentre .archiveCentreSummary{color:#333!important}
 body.printDrawDetail .drawDetailPage::before{content:"MACAU RESULT — PUBLIC RESULT DOCUMENT";display:block;padding:18px 26px 0;color:#000;font:700 16px Georgia,serif;letter-spacing:.08em}
}

/* ORGANIZED NATIONAL PORTAL — FINAL INFORMATION ARCHITECTURE */
.portalLayoutHidden{display:none!important}
.publicNavOrganized{justify-content:center!important;gap:clamp(16px,2.4vw,34px)!important;overflow:visible!important;padding-left:24px!important;padding-right:24px!important}
.publicNavOrganized>a{position:relative}
.publicNavOrganized>a.on{color:#f0cf79!important}
.publicNavOrganized>a.on::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:#d7ad53;border-radius:2px}
.portalBrandLink{margin-right:auto!important;color:#f0d487!important;font-family:Cinzel,Georgia,serif!important;font-size:14px!important;letter-spacing:.06em!important}
.publicNavOrganized .languageSwitch{margin-left:auto}
.portalViewHeader{width:min(1180px,92vw);margin:0 auto;padding:44px 0 24px;border-bottom:1px solid rgba(215,173,83,.18)}
.portalViewHeader>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:20px}
.portalViewEyebrow{color:#a88f57;font-size:9px;font-weight:900;letter-spacing:.17em}
.portalViewTitle{margin:8px 0 0;color:#f0d487;font-family:Cinzel,Georgia,serif;font-size:clamp(28px,3.6vw,50px);line-height:1}
.portalViewSubnav{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.portalViewSubnav.is-empty{display:none}
.portalViewSubnav button{height:36px;padding:0 13px;border:1px solid rgba(215,173,83,.26);border-radius:8px;background:rgba(7,16,21,.72);color:#a99f90;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.portalViewSubnav button:hover,.portalViewSubnav button.on{border-color:#d7ad53;background:rgba(215,173,83,.10);color:#f0d487}

.portalOrganized[data-portal-view="home"] .portalHero{padding:38px 0 34px;gap:34px}
.portalOrganized[data-portal-view="home"] .portalHero h2{font-size:clamp(30px,3.5vw,52px)}
.portalOrganized[data-portal-view="home"] .portalHeroCopy p{font-size:13px}
.portalOrganized[data-portal-view="home"] .portalHeroActions{display:none!important}
.portalOrganized[data-portal-view="home"] .nextDrawCard{min-height:205px;padding:24px}
.portalOrganized[data-portal-view="home"] .homeDashboard{margin-top:24px;padding:26px}
.portalOrganized[data-portal-view="home"] .homeDashboardHead h2{font-size:clamp(25px,2.8vw,38px)}
.portalOrganized[data-portal-view="home"] .portalNoticeBar{margin-top:18px;margin-bottom:38px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.homeNoticeActions{display:flex;align-items:center;gap:8px}
.homeNoticeButton,.homeStatusButton{height:34px;padding:0 11px;border:1px solid rgba(215,173,83,.28);border-radius:8px;background:#071015;color:#d6bb72;font-size:8px;font-weight:900;letter-spacing:.08em;cursor:pointer;white-space:nowrap}
.homeStatusButton{display:flex;align-items:center;gap:7px;color:#91dcb1;border-color:rgba(95,210,152,.24);background:rgba(95,210,152,.04)}
.homeStatusButton i{width:7px;height:7px;border-radius:50%;background:#5fd298;box-shadow:0 0 0 3px rgba(95,210,152,.08)}
.homeNoticeButton:hover{border-color:#d7ad53;color:#fff0bd}
.homeStatusButton:hover{border-color:rgba(95,210,152,.52);color:#b4efcb}
.portalOrganized:not([data-portal-view="home"]) .portalSection{padding-top:42px}
.portalOrganized:not([data-portal-view="home"]) .publicFooter{margin-top:26px}

@media(max-width:900px){
 .publicNavOrganized{justify-content:flex-start!important;overflow-x:auto!important;padding-left:16px!important;padding-right:16px!important;gap:20px!important}
 .publicNavOrganized::-webkit-scrollbar{display:none}
 .portalBrandLink{margin-right:0!important}
 .publicNavOrganized .languageSwitch{margin-left:0!important}
 .publicNavOrganized>a.on::after{bottom:-18px}
 .portalOrganized[data-portal-view="home"] .portalNoticeBar{grid-template-columns:1fr;gap:9px}
 .homeNoticeActions{justify-content:flex-start;flex-wrap:wrap}
}
@media(max-width:700px){
 .publicNavOrganized{height:54px!important;gap:18px!important;padding-left:14px!important;padding-right:14px!important}
 .publicNavOrganized>a{font-size:9.5px!important}
 .portalBrandLink{font-size:11px!important}
 .publicNavOrganized>a.on::after{bottom:-17px}
 .portalViewHeader{width:92vw;padding:28px 0 18px}
 .portalViewTitle{font-size:7.6vw}
 .portalViewEyebrow{font-size:2vw}
 .portalViewSubnav{display:flex;flex-wrap:nowrap;overflow-x:auto;margin-top:16px;padding-bottom:2px}
 .portalViewSubnav::-webkit-scrollbar{display:none}
 .portalViewSubnav button{flex:0 0 auto;height:34px;font-size:2.25vw}
 .portalOrganized[data-portal-view="home"] .portalHero{padding:30px 0 26px;gap:22px}
 .portalOrganized[data-portal-view="home"] .portalHero h2{font-size:8vw}
 .portalOrganized[data-portal-view="home"] .nextDrawCard{min-height:180px;padding:20px}
 .portalOrganized[data-portal-view="home"] .homeDashboard{margin-top:18px;padding:18px}
 .portalOrganized[data-portal-view="home"] .portalNoticeBar{margin-bottom:26px}
 .homeNoticeActions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .homeNoticeButton,.homeStatusButton{width:100%;justify-content:center}
}

/* HYBRID HEADER — DESKTOP TOP NAV / MOBILE HAMBURGER */
.hybridHeader{
  position:fixed!important;top:0;left:0;right:0;z-index:240;
  width:100%;height:72px!important;min-height:72px!important;display:flex!important;align-items:center!important;
  gap:26px;padding:0 clamp(20px,3.2vw,52px)!important;
  background:rgba(5,14,20,.96)!important;
  border-bottom:1px solid rgba(215,173,83,.34)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
}
.hybridHeader .brand{flex:0 0 auto;cursor:pointer;outline:none}
.hybridHeader .brand:focus-visible{outline:2px solid #f0cf79!important;outline-offset:5px!important;border-radius:6px}
.topbarNavMount{min-width:0;flex:1 1 auto;height:100%;display:flex;align-items:center;justify-content:flex-end}
.hybridHeader .publicNavOrganized{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;
  width:auto!important;max-width:none!important;height:100%!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:clamp(14px,1.6vw,26px)!important;padding:0!important;
  overflow:visible!important;background:transparent!important;border:0!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.hybridHeader .publicNavOrganized .portalBrandLink{display:none!important}
.hybridHeader .publicNavOrganized>a{height:72px;display:flex;align-items:center;white-space:nowrap;font-size:10px!important}
.hybridHeader .publicNavOrganized>a.on::after{bottom:0!important}
.hybridHeader .publicNavOrganized .siteSearchButton{flex:0 0 auto;height:34px}
.hybridHeader .publicNavOrganized .languageSwitch{flex:0 0 auto;margin:0!important;padding-left:12px!important}
.topbarMobileActions{display:none}
.mobileMenuExtras{display:none}
.mobileMenuBackdrop{display:none}

@media(max-width:1120px){
  .hybridHeader{gap:18px;padding-left:22px!important;padding-right:22px!important}
  .hybridHeader .brandSub{display:none}
  .hybridHeader .publicNavOrganized{gap:15px!important}
  .hybridHeader .publicNavOrganized>a{font-size:9px!important}
}

@media(max-width:760px){
  .hybridHeader{
    height:58px;gap:10px;padding:0 14px!important;
    justify-content:space-between!important;
  }
  .hybridHeader .brand{min-width:0;max-width:calc(100% - 92px)}
  .hybridHeader .brandLotus{flex:0 0 auto}
  .hybridHeader .brandText{min-width:0}
  .hybridHeader .brandName{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hybridHeader .brandSub{display:none!important}
  .topbarNavMount{position:absolute;width:0;height:0;overflow:visible}
  .topbarMobileActions{display:flex;align-items:center;gap:7px;margin-left:auto}
  .mobileHeaderSearch,.mobileMenuToggle{
    width:36px;height:36px;display:grid;place-items:center;
    border:1px solid rgba(215,173,83,.28);border-radius:8px;
    background:rgba(7,16,21,.82);color:#e7c872;cursor:pointer;
  }
  .mobileHeaderSearch{font-size:21px;line-height:1}
  .mobileMenuToggle{position:relative;padding:0}
  .mobileMenuToggle span{
    position:absolute;left:9px;width:16px;height:1.5px;border-radius:2px;
    background:#e7c872;transition:transform .18s ease,opacity .18s ease,top .18s ease;
  }
  .mobileMenuToggle span:nth-child(1){top:11px}
  .mobileMenuToggle span:nth-child(2){top:17px}
  .mobileMenuToggle span:nth-child(3){top:23px}
  body.mobileMenuOpen .mobileMenuToggle span:nth-child(1){top:17px;transform:rotate(45deg)}
  body.mobileMenuOpen .mobileMenuToggle span:nth-child(2){opacity:0}
  body.mobileMenuOpen .mobileMenuToggle span:nth-child(3){top:17px;transform:rotate(-45deg)}

  .hybridHeader .publicNavOrganized{
    position:fixed!important;z-index:246;top:66px!important;right:10px!important;left:auto!important;
    width:min(330px,calc(100vw - 20px))!important;height:auto!important;max-height:calc(100dvh - 78px)!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:0!important;padding:10px!important;overflow-y:auto!important;overflow-x:hidden!important;
    border:1px solid rgba(215,173,83,.34)!important;border-radius:14px!important;
    background:rgba(5,14,20,.985)!important;box-shadow:0 26px 70px rgba(0,0,0,.54)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
    opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;
  }
  body.mobileMenuOpen .hybridHeader .publicNavOrganized{opacity:1;transform:none;pointer-events:auto}
  .hybridHeader .publicNavOrganized>a{
    width:100%;height:46px!important;display:flex!important;align-items:center!important;
    padding:0 12px!important;border-bottom:1px solid rgba(255,255,255,.055);
    color:#d9d2c5!important;font-size:11px!important;letter-spacing:.08em!important;
  }
  .hybridHeader .publicNavOrganized>a.on{color:#f0cf79!important}
  .hybridHeader .publicNavOrganized>a.on::after{display:none!important}
  .hybridHeader .publicNavOrganized .siteSearchButton{display:none!important}
  .hybridHeader .publicNavOrganized .languageSwitch{
    width:100%;display:flex!important;justify-content:flex-start!important;gap:6px!important;
    margin:8px 0 0!important;padding:10px 8px!important;border-left:0!important;border-top:1px solid rgba(215,173,83,.18)!important;
  }
  .hybridHeader .publicNavOrganized .languageSwitch button{flex:1 1 0;height:34px}
  .mobileMenuExtras{
    width:100%;display:grid!important;margin-top:2px;padding-top:4px;
    border-top:1px solid rgba(215,173,83,.12);
  }
  .mobileMenuExtras a{
    height:42px;display:flex;align-items:center;padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.045);
    color:#958d80;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.08em;
  }
  .mobileMenuExtras a:hover{color:#e7c872}
  .mobileMenuBackdrop{
    position:fixed;z-index:239;inset:58px 0 0;display:block;
    border:0;background:rgba(0,3,6,.54);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .16s ease;
  }
  body.mobileMenuOpen .mobileMenuBackdrop{opacity:1;pointer-events:auto}
  body.mobileMenuOpen{overflow:hidden!important}
}

/* MOBILE MENU VISIBILITY FIX */
@media(max-width:760px){
  .hybridHeader{z-index:1000!important}
  .hybridHeader .publicNavOrganized{
    z-index:1002!important;
    background:#071015!important;
    border:1px solid rgba(229,196,109,.68)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.78),0 0 0 1px rgba(215,173,83,.08) inset!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    opacity:0!important;visibility:hidden!important;
    transform:translateY(-6px)!important;
  }
  body.mobileMenuOpen .hybridHeader .publicNavOrganized{
    opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;
  }
  .hybridHeader .publicNavOrganized>a{
    color:#f3eee4!important;
    font-size:12px!important;font-weight:800!important;
    text-shadow:none!important;
    background:transparent!important;
  }
  .hybridHeader .publicNavOrganized>a:hover,
  .hybridHeader .publicNavOrganized>a.on{
    color:#f0cf79!important;
    background:rgba(215,173,83,.08)!important;
  }
  .hybridHeader .publicNavOrganized .languageSwitch button{
    color:#d9d1c3!important;font-size:10px!important;font-weight:800!important;
    border-color:rgba(215,173,83,.28)!important;background:#0b171d!important;
  }
  .hybridHeader .publicNavOrganized .languageSwitch button.on{
    color:#f0cf79!important;border-color:#d7ad53!important;background:rgba(215,173,83,.12)!important;
  }
  .mobileMenuExtras a{
    color:#c7bdad!important;font-size:10px!important;font-weight:800!important;
  }
  .mobileMenuExtras a:hover{color:#f0cf79!important;background:rgba(215,173,83,.06)!important}
  .mobileMenuBackdrop{z-index:999!important;background:rgba(0,3,6,.66)!important;backdrop-filter:blur(4px)!important}
}

/* DEDICATED MOBILE DRAWER — 2026-09-21 */
.mobilePortalDrawer{display:none}
@media(max-width:760px){
  .hybridHeader .publicNavOrganized{display:none!important}
  .mobilePortalDrawer{
    position:fixed;z-index:1102;top:66px;right:10px;
    width:min(340px,calc(100vw - 20px));max-height:calc(100dvh - 78px);
    display:flex;flex-direction:column;overflow:auto;
    border:1px solid rgba(229,196,109,.72);border-radius:14px;
    background:#071015;color:#f3eee4;
    box-shadow:0 26px 80px rgba(0,0,0,.82);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
    pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  }
  body.mobileMenuOpen .mobilePortalDrawer{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .mobileDrawerHead{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(215,173,83,.20)}
  .mobileDrawerTitle{color:#f0cf79;font-size:10px;font-weight:900;letter-spacing:.14em}
  .mobileDrawerClose{width:32px;height:32px;border:1px solid rgba(215,173,83,.28);border-radius:8px;background:#0b171d;color:#f0cf79;font-size:21px;line-height:1;cursor:pointer}
  .mobileDrawerNav,.mobileDrawerExtras{display:grid;padding:6px}
  .mobileDrawerNav button,.mobileDrawerExtras button{
    width:100%;height:48px;display:flex;align-items:center;padding:0 12px;
    border:0;border-bottom:1px solid rgba(255,255,255,.055);
    background:transparent;color:#f3eee4;text-align:left;
    font-size:12px;font-weight:800;letter-spacing:.08em;cursor:pointer
  }
  .mobileDrawerNav button:hover,.mobileDrawerExtras button:hover{background:rgba(215,173,83,.08);color:#f0cf79}
  .mobileDrawerExtras button{height:44px;color:#c7bdad;font-size:10px}
  .mobileDrawerDivider{height:1px;margin:2px 10px;background:rgba(215,173,83,.16)}
  .mobileDrawerLanguage{display:grid;gap:8px;padding:12px}
  .mobileDrawerLanguage>span{color:#9f947f;font-size:9px;font-weight:900;letter-spacing:.12em}
  .mobileDrawerLanguage>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .mobileDrawerLanguage button{
    height:34px;border:1px solid rgba(215,173,83,.28);border-radius:7px;
    background:#0b171d;color:#d9d1c3;font-size:10px;font-weight:800;cursor:pointer
  }
  .mobileDrawerLanguage button.on{border-color:#d7ad53;background:rgba(215,173,83,.12);color:#f0cf79}
  .mobileMenuBackdrop{z-index:1100!important;inset:58px 0 0!important;background:rgba(0,3,6,.70)!important;backdrop-filter:blur(4px)!important}
}

/* MOBILE PREMIUM POLISH — 2026-09-21 */
@media(max-width:760px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:68px}
  body{font-size:14px}
  .hybridHeader{height:60px!important;padding:0 12px!important;gap:8px!important}
  .hybridHeader .brand{max-width:calc(100% - 94px)!important;gap:8px!important}
  .hybridHeader .brandLotus{width:34px!important;height:34px!important;object-fit:contain}
  .hybridHeader .brandName{font-size:15.5px!important;letter-spacing:.035em!important}
  .topbarMobileActions{gap:6px!important}
  .mobileHeaderSearch,.mobileMenuToggle{width:38px!important;height:38px!important;border-radius:10px!important}
  .mobilePortalDrawer{top:68px!important;right:8px!important;width:calc(100vw - 16px)!important;max-height:calc(100dvh - 76px)!important;border-radius:14px!important}
  .mobileDrawerHead{height:50px!important;padding:0 12px!important}
  .mobileDrawerNav,.mobileDrawerExtras{padding:5px 7px!important}
  .mobileDrawerNav button{height:50px!important;padding:0 14px!important;font-size:12.5px!important}
  .mobileDrawerExtras button{height:46px!important;padding:0 14px!important;font-size:10.5px!important}
  .mobileDrawerLanguage{padding:12px 10px 14px!important}
  .mobileDrawerLanguage button{height:40px!important;font-size:11px!important}

  .portalHero,.homeDashboard,.portalNoticeBar,.portalViewHeader,.portalSection,.publicFooter{width:calc(100% - 24px)!important;max-width:none!important}
  .portalHero{padding:26px 0 20px!important;gap:18px!important}
  .portalHeroCopy{max-width:none!important}
  .portalHero .portalEyebrow{font-size:9px!important;letter-spacing:.14em!important}
  .portalHero h2{font-size:28px!important;line-height:1.12!important;margin:7px 0 9px!important}
  .portalHeroCopy>p{font-size:12.5px!important;line-height:1.6!important}
  .homeDashboard{margin-top:16px!important;padding:16px!important;border-radius:14px!important}
  .homeDashboardHead h2{font-size:24px!important;line-height:1.15!important;margin:7px 0 8px!important}
  .homeDashboardHead p{font-size:12px!important;line-height:1.55!important}
  .latestResultCards{margin-top:16px!important;gap:9px!important}
  .latestResultCard{padding:14px!important;border-radius:12px!important}
  .latestResultCardHead>span{font-size:15px!important}
  .latestResultValue{font-size:22px!important;line-height:1.25!important;margin-top:14px!important;min-height:0!important}
  .latestResultMeta{font-size:10px!important;margin-top:7px!important}
  .latestResultCard button{min-height:44px!important;height:44px!important;margin-top:14px!important;padding:0 14px!important;border-radius:9px!important}
  .homeQuickLinks{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:14px!important}
  .homeQuickLinks button{min-height:44px!important;height:44px!important;font-size:9.5px!important;border-radius:9px!important}
  .portalNoticeBar{margin-top:14px!important;margin-bottom:24px!important;padding:12px!important;border-radius:12px!important;gap:8px!important}
  .portalNoticeBar>div{font-size:11.5px!important;line-height:1.45!important}
  .homeNoticeActions{grid-template-columns:1fr!important;gap:7px!important}
  .homeNoticeButton,.homeStatusButton{height:42px!important;min-height:42px!important;border-radius:9px!important}

  .portalViewHeader{padding:24px 0 15px!important}
  .portalViewEyebrow{font-size:8.5px!important}
  .portalViewTitle{font-size:27px!important;line-height:1.08!important}
  .portalViewSubnav{margin-top:14px!important;gap:6px!important}
  .portalViewSubnav button{height:40px!important;min-height:40px!important;padding:0 13px!important;font-size:9.5px!important;border-radius:9px!important}

  .portalSection{padding-top:24px!important;padding-bottom:8px!important}
  .portalSectionHead{margin-bottom:16px!important}
  .portalSectionHead>span{font-size:8.5px!important;letter-spacing:.14em!important}
  .portalSectionHead h2{font-size:24px!important;line-height:1.12!important;margin:7px 0 8px!important}
  .portalSectionHead p{font-size:12px!important;line-height:1.55!important}
  .categoryInfoHero{gap:14px!important}
  .categoryInfoHero h2{font-size:38px!important;margin:6px 0 8px!important}
  .categoryInfoHero p{font-size:12px!important;line-height:1.55!important}
  .categoryInfoStatus{padding:11px 12px!important;border-radius:10px!important}
  .categoryInfoFacts{gap:8px!important;margin-top:16px!important}
  .categoryFactCard{min-height:0!important;padding:13px!important;border-radius:10px!important}
  .categoryFactCard>span{font-size:8px!important}
  .categoryFactCard>strong{font-size:14px!important;margin-top:8px!important}
  .categoryInfoActions{gap:7px!important;margin-top:13px!important}
  .categoryInfoActions button{height:44px!important;min-height:44px!important;border-radius:9px!important;font-size:9.5px!important}
  .categoryArchiveMini{margin-top:14px!important;border-radius:10px!important}
  .categoryArchiveMiniRow{padding:11px 12px!important;min-height:54px!important}

  .numberCheckPanel,.numberHistoryPanel,.archiveCentreToolbar,.contactPanel{padding:14px!important;gap:10px!important;border-radius:12px!important}
  .numberCheckPanel,.numberHistoryPanel,.archiveCentreToolbar{grid-template-columns:1fr!important}
  .numberCheckPanel label,.numberHistoryPanel label,.archiveCentreToolbar label,.contactPanel label{gap:6px!important}
  .numberCheckPanel label>span,.numberHistoryPanel label>span,.archiveCentreToolbar label>span,.contactPanel label>span{font-size:8.5px!important}
  .numberCheckPanel input,.numberCheckPanel select,.numberHistoryPanel input,.archiveCentreToolbar input,.archiveCentreToolbar select,.contactPanel input,.contactPanel select,.contactPanel textarea,.historySearchField input,.historyDateField input,.historyArchiveFilters select{font-size:16px!important}
  .numberCheckPanel input,.numberCheckPanel select,.numberHistoryPanel input,.archiveCentreToolbar input,.archiveCentreToolbar select,.contactPanel input,.contactPanel select{height:46px!important;min-height:46px!important}
  .numberCheckPanel button,.numberHistoryPanel button,.contactPanel button,.archiveCentreActions button{height:46px!important;min-height:46px!important;border-radius:9px!important}
  .numberCheckResult,.numberHistoryResult,.contactResult{padding:14px!important;border-radius:10px!important;font-size:12px!important}
  .archiveCentreRow{padding:12px!important;border-radius:9px!important}
  .archiveCentreRow button{height:42px!important;min-height:42px!important}
  .archiveCentreActions{gap:7px!important;margin-top:10px!important}

  .drawInfoGrid,.prizeGuideGrid,.statisticsGrid,.statusCentreGrid,.helpArticleGrid,.aboutGrid,.publicInformationPanel{gap:9px!important}
  .drawInfoCard,.prizeGuideCard,.statCard,.statusCentreCard,.helpArticleCard,.aboutCard{padding:15px!important;border-radius:11px!important}
  .drawInfoCardTitle,.prizeGuideCard h3,.helpArticleCardTitle,.aboutCard h3{font-size:16px!important}
  .drawInfoBodyText,.prizeGuideCard p,.helpArticleSummary,.aboutCard p{font-size:11.5px!important;line-height:1.55!important}
  .statCard{min-height:94px!important}
  .statCard strong{font-size:27px!important}
  .statusCentreCard{min-height:94px!important}
  .faqList details{border-radius:10px!important}
  .faqList summary{min-height:48px!important;padding:13px 14px!important;font-size:12px!important;line-height:1.35!important}
  .faqList details p{padding:0 14px 14px!important;font-size:11.5px!important;line-height:1.55!important}

  .siteSearchPage,.infoOverlayPage,.helpArticlePage,.drawDetailPage{width:calc(100vw - 16px)!important;max-width:none!important;border-radius:14px!important}
  .siteSearchPage>header,.infoOverlayPage>header,.helpArticlePage>header,.drawDetailPage>header{padding:16px!important}
  .siteSearchPage>header button,.infoOverlayPage>header button,.helpArticlePage>header button,.drawDetailPage>header>button{width:40px!important;height:40px!important}
  .siteSearchBar{padding:12px!important}
  .siteSearchBar input{height:48px!important;font-size:16px!important}
  .siteSearchResult{min-height:58px!important;padding:12px!important}
  .drawDetailActions{padding:10px 12px!important;gap:7px!important}
  .drawDetailActions button{height:44px!important;min-height:44px!important;border-radius:9px!important}
  .drawDetailBody{padding:16px 12px 20px!important}

  .historyPage{width:100vw!important;max-width:none!important}
  .historyPageHeader{min-height:58px!important;padding:10px 12px!important}
  .historyCloseButton{min-height:40px!important;height:40px!important}
  .historyControls{padding:10px 12px!important;gap:8px!important}
  .historyCategoryTabs{gap:6px!important}
  .historyCategoryTabs button{min-height:40px!important;height:40px!important}
  .historySearchField input,.historyDateField input,.historyArchiveFilters select{min-height:44px!important;height:44px!important}
  .historyResultCard{border-radius:11px!important}
  .historyDetailButton{min-height:38px!important;height:38px!important;font-size:9px!important}

  .publicFooter{padding:18px 0 26px!important;gap:12px!important}
  .publicFooter nav{gap:10px 14px!important}
  .publicFooter a,.publicFooter button{min-height:40px!important;display:inline-flex!important;align-items:center!important}
}

/* MOBILE TEXT CONTRAST FIX — 2026-09-21 */
@media(max-width:760px){
  body,.publicPortal{color:#F3EEE4!important}

  .portalHeroCopy>p,
  .homeDashboardHead p,
  .portalSectionHead p,
  .categoryInfoHero p,
  .drawInfoBodyText,
  .prizeGuideCard p,
  .helpArticleSummary,
  .aboutCard p,
  .faqList details p,
  .statisticsNote,
  .statusLegendText,
  .contactResult,
  .numberCheckResult,
  .numberHistoryResult,
  .siteSearchResult small,
  .helpArticleLead,
  .helpArticleText{
    color:#D8D0C4!important;
  }

  .latestResultMeta,
  .categoryArchiveMiniRow span,
  .categoryArchiveMiniRow small,
  .archiveCentreIdentity small,
  .numberHistoryDate,
  .numberHistoryPeriod,
  .checkMeta,
  .historyCardDate,
  .historyCardPeriod,
  .historySession,
  .statusCheckedAt,
  .newsDate,
  .publicFooter,
  .publicFooter a,
  .publicFooter button{
    color:#C8BFB1!important;
  }

  .categoryFactCard>span,
  .archiveCentreToolbar label>span,
  .numberCheckPanel label>span,
  .numberHistoryPanel label>span,
  .contactPanel label>span,
  .portalSectionHead>span,
  .portalHero .portalEyebrow,
  .portalViewEyebrow,
  .categoryInfoEyebrow,
  .helpArticleIndex,
  .newsType,
  .announcementFeatureBadge,
  .statusCentreCard>span,
  .publicInformationPanel span{
    color:#D7BD78!important;
  }

  .categoryFactCard>strong,
  .archiveCentreResult,
  .archiveCentreIdentity strong,
  .categoryArchiveMiniRow strong,
  .statusCentreCard>strong,
  .publicInformationPanel strong,
  .announcementRow h4,
  .announcementFeatured strong,
  .faqList summary,
  .helpArticleCardTitle,
  .drawInfoCardTitle,
  .prizeGuideCard h3,
  .aboutCard h3{
    color:#F4EFE6!important;
  }

  .latestResultValue,
  .history4DValue,
  .historySetNumber,
  .historyRbBall,
  .historyTotoBall,
  .checkNumber,
  .numberHistoryNumber,
  .detailPrizeValue,
  .detailSetNumber,
  .detailBall,
  .detailTotoBall{
    color:#FFFFFF!important;
  }

  input,select,textarea{
    color:#FFFFFF!important;
    -webkit-text-fill-color:#FFFFFF!important;
  }
  input::placeholder,textarea::placeholder{
    color:#AFA79B!important;
    opacity:1!important;
  }

  .mobileDrawerNav button{color:#F7F2E8!important}
  .mobileDrawerExtras button{color:#DDD4C6!important}
  .mobileDrawerLanguage>span{color:#D7BD78!important}
  .mobileDrawerLanguage button{color:#EEE7DB!important}
  .mobileDrawerLanguage button.on{color:#F0CF79!important}

  .homeStatusButton{color:#A9E7C3!important}
  .homeNoticeButton{color:#F0CF79!important}

  .archiveCentreRow button,
  .categoryInfoActions button,
  .latestResultCard button,
  .homeQuickLinks button,
  .portalViewSubnav button,
  .drawDetailActions button,
  .historyDetailButton{
    color:#F0CF79!important;
  }
}

/* RB SESSION LABEL CONTRAST FIX */
.rbSessionTime{
  color:#FFFFFF!important;
  text-shadow:0 1px 2px rgba(0,0,0,.65)!important;
}
@media(max-width:760px){
  .rbSessionTime{
    color:#FFFFFF!important;
    -webkit-text-fill-color:#FFFFFF!important;
    font-weight:900!important;
    text-shadow:0 1px 2px rgba(0,0,0,.75)!important;
  }
}

/* FULL CATEGORY HISTORY — no 5-row cap */
.categoryArchiveMini{max-height:560px;overflow:auto}
.categoryArchiveMiniHead{position:sticky;top:0;z-index:2;background:#081116}
@media(max-width:760px){
  .categoryArchiveMini{max-height:62vh}
}

/* GENERATED ARCHIVE 2020-12-01 → 2026-08-21 */
.generatedArchiveBadge{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border:1px solid rgba(215,173,83,.38);border-radius:999px;background:rgba(215,173,83,.08);color:#e5c66f;font:900 8px/1 Inter,Arial,sans-serif;letter-spacing:.08em;white-space:nowrap}
.generatedArchiveNotice{margin:12px 0 0;padding:11px 13px;border:1px solid rgba(215,173,83,.24);border-radius:9px;background:rgba(215,173,83,.055);color:#cfc5b5;font-size:11px;font-weight:750;line-height:1.5}
.historyCardPeriodWrap{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.historyBatchFooter,.archiveBatchFooter{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px}
.historyBatchCount,.archiveBatchFooter span{color:#c8bfb1;font-size:10px;font-weight:900;letter-spacing:.06em}
.historyLoadMore,.archiveBatchFooter button,.categoryArchiveViewAll{min-height:42px;padding:0 18px;border:1px solid rgba(215,173,83,.36);border-radius:9px;background:#071015;color:#f0cf79;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.categoryArchiveViewAll{width:calc(100% - 24px);margin:12px}
@media(max-width:760px){
 .historyCardPeriodWrap{justify-content:flex-start}
 .generatedArchiveBadge{min-height:22px;font-size:8.5px}
 .historyBatchFooter,.archiveBatchFooter{position:sticky;bottom:0;z-index:3;background:#071015}
 .historyLoadMore,.archiveBatchFooter button,.categoryArchiveViewAll{min-height:46px}
}

@media(max-width:700px){.issueReportActions{grid-column:auto;display:grid;grid-template-columns:1fr;width:100%}.generatedArchiveNotice{font-size:11px}}


/* MOBILE RESULT COLLISION GUARD — 2026-09-22 */
@media(max-width:700px){
  .hybridHeader{
    height:60px!important;
    min-height:60px!important;
  }
  .app{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    grid-template-rows:64px minmax(0,1.82fr) minmax(0,1fr)!important;
    padding-bottom:max(env(safe-area-inset-bottom),12px)!important;
  }
  .stage{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    padding:4px 2vw 0!important;
  }
  #four{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .fourHeading{
    height:22px!important;
    min-height:22px!important;
    padding:2px 0 0 .2vw!important;
  }
  .fourBoard{
    height:calc(100% - 22px)!important;
    grid-template-rows:minmax(0,42fr) minmax(0,58fr)!important;
    gap:8px!important;
  }
  .top3,.lower{min-height:0!important}
  .bottomGrid{
    height:100%!important;
    min-height:0!important;
    grid-template-rows:minmax(0,1.2fr) minmax(0,.8fr)!important;
    gap:8px!important;
    padding:8px 0 0!important;
    overflow:hidden!important;
  }
  #rb.miniCard,#toto.miniCard{min-height:0!important}
  .miniCard{
    grid-template-rows:24px minmax(0,1fr)!important;
    padding-top:4px!important;
  }
  #rbBoard,#totoBoard{min-height:0!important}
}

/* MACAU RESULT RESPONSIVE 16K BACKGROUND — 2026-09-22 */
.sceneLeft,.sceneRight{background-image:none!important}
.app::before{
  background-image:
    linear-gradient(180deg,rgba(2,7,13,.13),rgba(1,5,9,.28)),
    url("/assets/macau-result-background-8k.jpg")!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:center,center!important;
  background-size:100% 100%,cover!important;
  filter:saturate(1.14) brightness(.82) contrast(1.05)!important;
  transform:none!important;
}
.publicPortal{
  background:
    linear-gradient(180deg,rgba(3,11,16,.78),rgba(2,8,12,.86)),
    url("/assets/macau-result-background-8k.jpg") center top/cover fixed!important;
}
.historyOverlay{
  background:
    linear-gradient(180deg,rgba(2,9,14,.80),rgba(2,8,13,.90)),
    url("/assets/macau-result-background-8k.jpg") center/cover fixed!important;
}
@media(min-width:2560px),(min-width:1440px) and (min-resolution:1.75dppx){
  .app::before{
    background-image:
      linear-gradient(180deg,rgba(2,7,13,.13),rgba(1,5,9,.28)),
      url("/assets/macau-result-background-16k.jpg")!important;
  }
  .publicPortal{
    background:
      linear-gradient(180deg,rgba(3,11,16,.78),rgba(2,8,12,.86)),
      url("/assets/macau-result-background-16k.jpg") center top/cover fixed!important;
  }
  .historyOverlay{
    background:
      linear-gradient(180deg,rgba(2,9,14,.80),rgba(2,8,13,.90)),
      url("/assets/macau-result-background-16k.jpg") center/cover fixed!important;
  }
}
@media(max-width:1024px) and (orientation:portrait){
  .app::before{
    background-image:
      linear-gradient(180deg,rgba(2,7,13,.12),rgba(1,5,9,.27)),
      url("/assets/macau-result-background-mobile-6k.jpg")!important;
    background-position:center,center!important;
  }
  .publicPortal{
    background:
      linear-gradient(180deg,rgba(3,11,16,.76),rgba(2,8,12,.86)),
      url("/assets/macau-result-background-mobile-6k.jpg") center top/cover scroll!important;
  }
  .historyOverlay{
    background:
      linear-gradient(180deg,rgba(2,9,14,.80),rgba(2,8,13,.90)),
      url("/assets/macau-result-background-mobile-6k.jpg") center/cover scroll!important;
  }
}


/* DESKTOP RESULT HEADER CLEARANCE — 2026-09-22 */
@media(min-width:701px){
  .app{
    height:100dvh!important;
    min-height:100dvh!important;
    grid-template-rows:76px minmax(0,1.85fr) minmax(0,1fr)!important;
  }
  .stage{
    grid-row:2!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .fourCard{
    height:100%!important;
    min-height:0!important;
  }
  .bottomGrid{
    grid-row:3!important;
    height:100%!important;
    min-height:0!important;
    padding-top:.45vh!important;
    padding-bottom:.45vh!important;
  }
}


/* CONTACT IDENTITY + LEGAL & PRIVACY — PREVIEW 2026-09-24 */
.contactIdentityPanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.25fr);gap:12px;margin-bottom:12px}
.contactIdentityCard{min-height:118px;padding:18px 20px;border:1px solid rgba(215,173,83,.34);border-radius:14px;background:linear-gradient(180deg,rgba(8,18,22,.82),rgba(5,12,16,.74));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.contactIdentityCard>span{display:block;color:#b99c58;font-size:9px;font-weight:900;letter-spacing:.15em}
.contactOfficeCard>strong{display:block;min-height:42px;margin-top:18px;color:#f2ede4;font-size:14px;line-height:1.6;letter-spacing:.02em}
.contactEmailCard>a{display:inline-flex;align-items:center;min-height:42px;margin-top:18px;color:#f2ede4;font-size:14px;font-weight:800;line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
.contactEmailCard>a:hover{color:#e8cc7c}
.contactLegalActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.contactLegalActions button{min-height:44px;padding:0 14px;border:1px solid rgba(215,173,83,.52);border-radius:9px;background:#071015;color:#e8cc7c;font-size:10px;font-weight:900;letter-spacing:.09em;cursor:pointer}
.contactLegalActions button:hover{border-color:#e6c66f;background:rgba(215,173,83,.08)}
.infoLegalCopy{min-width:0}
.infoLegalCopy h3{margin:0 0 7px;color:#eee8dc;font-size:13px;line-height:1.35;letter-spacing:.01em}
.infoLegalCopy p{margin:0;color:#aaa296;font-size:13px;line-height:1.75}
@media(max-width:700px){
  .contactIdentityPanel{grid-template-columns:1fr;gap:8px;margin-bottom:10px}
  .contactIdentityCard{min-height:96px;padding:14px;border-radius:12px}
  .contactOfficeCard>strong{min-height:32px;margin-top:12px}
  .contactLegalActions{grid-template-columns:1fr;margin-top:12px}
  .contactLegalActions button{min-height:46px}
  .infoLegalCopy h3{font-size:12.5px}
  .infoLegalCopy p{font-size:11.5px;line-height:1.65}
}