/* euwinmalaysia.com - the EUWIN app storefront, .e4-* shell.
   A phone-width column at every screen size: near-black ground, jade green as the lead accent
   and brass kept for money. Static file: build_site.py never regenerates this. */
:root{
  --ink:#070d0c; --ink-2:#0c1613; --ink-3:#13211c; --ink-4:#1b2e27;
  --red:#12a079; --red-2:#0b6e54; --gold:#5de8bd; --gold-2:#16c795; --gold-3:#0a5d47;
  /* Brass is kept for money: a figure, a pool, a prize. It is the one warm thing on a cold
     column and the only place warmth appears at all. */
  --brass:#e0b765; --brass-2:#c9a24a;
  --txt:#e9fff8; --mut:#8aa89f; --line:rgba(93,232,189,.2); --line-2:rgba(255,255,255,.07);
  --ok:#3fcf8e;
  --col:540px; --bar:62px;
  --font:Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{margin:0;color:var(--txt);font-family:var(--font);line-height:1.6;
  padding:0 0 calc(var(--bar) + 18px);
  background:radial-gradient(900px 480px at 50% -60px,#0a2a20 0%,var(--ink-2) 45%,var(--ink) 100%) no-repeat,
    var(--ink)}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.28}
table{border-collapse:collapse;width:100%}

/* The whole site is one phone-width column, on a monitor as much as on a handset. */
.e4-shell{width:min(var(--col),100%);margin:0 auto;background:var(--ink-2);min-height:100vh;
  box-shadow:0 0 0 1px var(--line-2),0 24px 70px rgba(0,0,0,.5)}

/* ---------- buttons ---------- */
.e4-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  padding:0 17px;border-radius:11px;font-weight:800;font-size:14px;border:1px solid transparent;
  text-align:center;line-height:1.2}
.e4-btn.p{background:linear-gradient(180deg,var(--red),var(--red-2));color:#fff}
.e4-btn.g{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#02211d}
.e4-btn.o{background:var(--ink-3);color:var(--txt);border-color:var(--line)}
.e4-btn.w{width:100%}

/* ---------- header ---------- */
.e4-head{position:sticky;top:0;z-index:40;background:var(--ink)}
.e4-head .util{display:flex;align-items:center;gap:9px;padding:7px 13px;font-size:11px;
  color:var(--mut);background:#070d0d;border-bottom:1px solid var(--line-2)}
.e4-head .util .dom{font-weight:800;color:var(--gold)}
.e4-head .util .tag{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e4-head .lang{display:flex;gap:3px;flex:none}
.e4-head .lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  min-height:44px;border-radius:6px;border:1px solid var(--line-2);color:var(--mut);font-size:10.5px;
  font-weight:700;padding:0 5px;white-space:nowrap}
.e4-head .lang a.on{background:var(--gold);color:#02211d;border-color:transparent}
.e4-head .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
  border-bottom:1px solid var(--line)}
.e4-logo{display:flex;align-items:center;gap:8px;min-width:0}
.e4-logo svg{width:34px;height:34px;flex:none}
.e4-logo b{font-family:"Arial Black",Arial,sans-serif;font-size:21px;letter-spacing:.01em;
  white-space:nowrap;background:linear-gradient(180deg,#d6fff8,var(--gold) 55%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.e4-head .acts{display:flex;gap:7px;flex:none}
.e4-head .acts .e4-btn{min-height:38px;padding:0 13px;font-size:12.5px;border-radius:9px}

/* ---------- promo carousel ---------- */
.e4-car{position:relative;margin:12px 13px 0}
.e4-car .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
  scrollbar-width:none;border-radius:13px}
.e4-car .track::-webkit-scrollbar{display:none}
.e4-car .sl{position:relative;flex:0 0 100%;scroll-snap-align:center;border-radius:13px;
  overflow:hidden;border:1px solid var(--line)}
.e4-car .sl img{width:100%;aspect-ratio:16/9;object-fit:cover}
.e4-car .cap{position:absolute;inset:auto 0 0 0;display:grid;gap:5px;justify-items:start;
  padding:12px 13px;background:linear-gradient(180deg,rgba(5,9,9,0),rgba(5,9,9,.93))}
.e4-car .cap b{font-size:16px;line-height:1.25}
.e4-car .cap span{font-size:12px;color:var(--mut)}
.e4-car .cap .e4-btn{min-height:36px;padding:0 14px;font-size:12.5px;margin-top:3px}
.e4-car .dots{display:flex;justify-content:center;gap:0;padding:0}
/* The dot stays 8px; the hit area is 44. A carousel dot you cannot hit with a thumb is the
   most common tap-target miss on a phone-first shell. */
.e4-car .dots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.e4-car .dots button::after{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--ink-4)}
.e4-car .dots button.on::after{background:var(--gold);width:19px;border-radius:5px}

/* ---------- flip-digit jackpot ---------- */
.e4-jp{margin:13px;padding:15px 13px;border-radius:13px;text-align:center;
  background:linear-gradient(180deg,var(--ink-3),var(--ink));border:1px solid var(--line)}
.e4-jp .dg{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap}
.e4-jp .dg b{display:flex;align-items:center;justify-content:center;min-width:28px;height:40px;
  border-radius:7px;font-family:"Arial Black",Arial,sans-serif;font-size:24px;color:var(--brass);
  background:linear-gradient(180deg,#060a0a,#132020);border:1px solid var(--line);
  box-shadow:inset 0 -1px 0 rgba(125,253,235,.14)}
.e4-jp .dg i{font-style:normal;color:var(--gold-2);font-weight:900;font-size:20px;padding:0 1px}
.e4-jp .lb{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;
  font-size:12px;color:var(--mut)}
.e4-jp .lb em{font-style:normal;font-weight:900;color:var(--gold);letter-spacing:.1em}

/* ---------- category chips ---------- */
.e4-chips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:0 13px;margin:13px 0}
.e4-chips a{display:grid;justify-items:center;gap:5px;padding:9px 2px;border-radius:11px;
  background:var(--ink-3);border:1px solid var(--line-2);font-size:10px;font-weight:800;
  color:var(--txt);text-align:center;line-height:1.2;min-height:62px;align-content:center}
.e4-chips a span{font-size:20px;line-height:1}

/* ---------- benefit cards ---------- */
.e4-bens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 13px;margin:16px 0}
.e4-bens .bn{display:grid;gap:6px;align-content:start;padding:13px;border-radius:13px;
  background:var(--ink-3);border:1px solid var(--line-2)}
.e4-bens .i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;font-size:18px;background:linear-gradient(180deg,var(--red),var(--red-2))}
.e4-bens b{font-size:13.5px;color:var(--gold)}
.e4-bens p{margin:0;font-size:12px;color:var(--mut);line-height:1.5}

/* ---------- sections and game grids ---------- */
.e4-sec{margin:20px 0;padding:0 13px}
.e4-sec .sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.e4-sec .sh h2{font-size:15.5px;color:var(--txt);padding-left:11px;position:relative}
.e4-sec .sh h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold-2))}
.e4-sec .sh a{font-size:12px;font-weight:700;color:var(--mut)}
.gg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.gc{position:relative;display:grid;gap:0;border-radius:11px;overflow:hidden;background:var(--ink-3);
  border:1px solid var(--line-2)}
.gc img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gc b{display:block;padding:7px 8px 9px;font-size:11px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gc em{position:absolute;top:6px;left:6px;z-index:2;font-style:normal;font-size:8.5px;font-weight:900;
  letter-spacing:.07em;padding:3px 6px;border-radius:5px;background:var(--red);color:#fff}

/* ---------- featured room ---------- */
.e4-feat{border-radius:13px;overflow:hidden;background:var(--ink-3);border:1px solid var(--line)}
.e4-feat>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.e4-feat .bd{display:grid;gap:9px;padding:13px}
.e4-feat .bd>b{font-size:16px;color:var(--gold)}
.e4-feat .bd>span{font-size:12.5px;color:var(--mut);margin-top:-5px}
.e4-feat .tip{border-left:3px solid var(--gold-2);padding:9px 0 9px 11px;background:rgba(125,253,235,.05);
  border-radius:0 9px 9px 0}
.e4-feat .tip strong{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:5px}
.e4-feat .tip ul{margin:0;padding-left:18px;display:grid;gap:5px}
.e4-feat .tip li{font-size:12px;color:var(--mut);font-style:italic;line-height:1.5}

/* ---------- promo cards ---------- */
.e4-promos{display:grid;gap:11px}
.e4-promos .pc{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0;border-radius:13px;
  overflow:hidden;background:var(--ink-3);border:1px solid var(--line-2)}
.e4-promos .pc img{width:100%;height:100%;min-height:150px;object-fit:cover}
.e4-promos .bd{display:grid;gap:6px;align-content:start;padding:12px}
.e4-promos .tp{display:flex;align-items:center;gap:8px}
.e4-promos .tp em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.08em;padding:3px 7px;
  border-radius:5px;background:var(--red);color:#fff}
.e4-promos .tp b{font-family:"Arial Black",Arial,sans-serif;font-size:21px;color:var(--gold)}
.e4-promos .bd strong{font-size:13.5px}
.e4-promos .bd p{margin:0;font-size:11.5px;color:var(--mut);line-height:1.5}
.e4-promos .mt{height:6px;border-radius:3px;background:var(--ink);overflow:hidden}
.e4-promos .mt i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.e4-promos .bd small{font-size:10.5px;color:var(--mut)}
.e4-promos .e4-btn{min-height:38px;font-size:12.5px}

/* ---------- winners ---------- */
.e4-wins{display:grid;gap:8px}
.e4-wins .wc{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:10px 12px;border-radius:11px;background:var(--ink-3);border:1px solid var(--line-2)}
.e4-wins .av{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;font-size:19px;background:var(--ink-4)}
.e4-wins .wc b{display:block;font-size:12.5px}
.e4-wins .wc small{display:block;font-size:10.5px;color:var(--mut)}
.e4-wins .amt{text-align:right}
.e4-wins .amt b{color:var(--ok);font-family:"Arial Black",Arial,sans-serif;font-size:14px}

/* ---------- written content ---------- */
.e4-content{padding:18px 13px 26px}
.e4-content h1{font-size:23px;margin-bottom:9px}
.e4-content h2{font-size:17px;color:var(--gold);margin:22px 0 8px}
.e4-content p{margin:0 0 12px}
.e4-content .lead{font-size:14.5px;color:#b9d6d2;margin-bottom:15px}
.e4-content ul{margin:0 0 14px;padding-left:20px;display:grid;gap:6px;color:#b9d6d2}
.e4-ph{display:grid;gap:9px;margin-bottom:18px}
.e4-ph img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:13px;border:1px solid var(--line-2)}
.e4-ph .eb{font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2)}
.e4-ph .act,.e4-content .act{display:flex;flex-wrap:wrap;gap:9px;margin-top:3px}
.e4-content .act{margin:0 0 18px}
.e4-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 18px}
.e4-kpis>div{display:grid;gap:2px;padding:12px;border-radius:11px;background:var(--ink-3);
  border:1px solid var(--line-2)}
.e4-kpis b{font-family:"Arial Black",Arial,sans-serif;font-size:19px;color:var(--brass)}
.e4-kpis span{font-size:11px;color:var(--mut);line-height:1.35}
.e4-steps{counter-reset:s;list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.e4-steps li{counter-increment:s;position:relative;padding:11px 13px 11px 46px;border-radius:11px;
  background:var(--ink-3);border:1px solid var(--line-2);font-size:13px}
.e4-steps li::before{content:counter(s);position:absolute;left:12px;top:10px;width:25px;height:25px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900;font-size:12.5px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#02211d}
.e4-tw{overflow-x:auto;border-radius:11px;border:1px solid var(--line-2);margin:0 0 18px}
.e4-tbl{font-size:12.5px;min-width:380px;background:var(--ink-3)}
.e4-tbl th{background:var(--ink);color:var(--gold);text-align:left;padding:9px 11px;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase}
.e4-tbl td{padding:9px 11px;border-top:1px solid var(--line-2);color:#b9d6d2}
.e4-faq{display:grid;gap:8px;margin:0 0 18px}
.e4-faq details{border-radius:11px;border:1px solid var(--line-2);background:var(--ink-3)}
.e4-faq summary{cursor:pointer;padding:12px 14px;font-weight:800;font-size:13.5px;color:var(--gold)}
.e4-faq p{margin:0;padding:0 14px 13px;font-size:13px;color:#b9d6d2}
.e4-band{display:grid;gap:11px;margin:22px 0 0;padding:17px;border-radius:13px;
  background:linear-gradient(140deg,var(--red-2),#013530);border:1px solid var(--line)}
.e4-band b{font-size:15px;line-height:1.4}

/* ---------- footer ---------- */
.e4-foot{display:grid;gap:15px;padding:22px 13px 26px;background:var(--ink);
  border-top:1px solid var(--line)}
.e4-foot .brand{display:grid;gap:9px}
.e4-foot p{margin:0;font-size:12px;color:var(--mut);line-height:1.6}
.e4-foot .links{display:flex;flex-wrap:wrap;gap:7px}
.e4-foot .links a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;
  color:var(--txt);padding:0 11px;border-radius:8px;background:var(--ink-3)}
.e4-foot .pay,.e4-foot .trust{display:flex;flex-wrap:wrap;gap:7px}
.e4-foot .pay span,.e4-foot .trust span{display:flex;align-items:center;justify-content:center;
  height:32px;padding:0 10px;border-radius:7px;background:#eafffb}
.e4-foot .pay img{max-height:18px;width:auto;object-fit:contain}
.e4-foot .trust img{max-height:20px;width:auto;object-fit:contain}
.e4-foot .legal{display:flex;align-items:flex-start;gap:10px;padding-top:13px;
  border-top:1px solid var(--line-2)}
.e4-foot .age{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;
  height:30px;border-radius:50%;border:2px solid var(--gold-2);color:var(--gold);font-weight:900;font-size:11px}
.e4-foot small{font-size:11px;color:var(--mut)}

/* ---------- fixed furniture ---------- */
.e4-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);
  width:min(var(--col),100%);margin:0 auto;height:var(--bar);padding-top:8px;
  background:linear-gradient(180deg,#101a1a,#060a0a);border-top:1px solid var(--line)}
.e4-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--mut);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  position:relative}
.e4-bar a .i{font-size:17px;line-height:1}
/* The centre slot lifts into a coin that overhangs the bar's top edge. */
.e4-bar a.mid{color:var(--gold);justify-content:flex-end;padding-bottom:7px}
.e4-bar a.mid .i{position:absolute;top:-20px;width:48px;height:48px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;font-size:25px;color:#fff;
  background:linear-gradient(180deg,var(--red),var(--red-2));border:3px solid #0a1111;
  box-shadow:0 4px 12px rgba(3,185,164,.4)}
.e4-side{position:fixed;right:9px;bottom:calc(var(--bar) + 16px);z-index:55;display:grid;gap:9px}
.e4-side a{display:grid;justify-items:center;gap:1px;width:54px;padding:8px 2px;border-radius:13px;
  background:rgba(13,21,21,.94);border:1px solid var(--line);color:var(--txt)}
.e4-side a span{font-size:18px;line-height:1}
.e4-side a em{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.04em;color:var(--mut)}

@media(min-width:1024px){
  /* Still the phone column, just floated on the ink field with the rail beside it rather than over. */
  .e4-shell{margin:18px auto 0;border-radius:18px;min-height:0;overflow:hidden}
  body{padding-bottom:calc(var(--bar) + 36px)}
  .e4-side{right:calc(50% - var(--col)/2 - 72px)}
}
@media(max-width:400px){
  .e4-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .e4-bens{grid-template-columns:minmax(0,1fr)}
  .gg{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Stack the promo card below ~400px. Keeping the side thumbnail squeezed it to 86x222, a 2.6:1
     sliver once the body text set the row height, and the house limit is 2.2:1. Stacked, the art
     gets a proper 16:9 crop and the card reads as a card. */
  .e4-promos .pc{grid-template-columns:minmax(0,1fr)}
  .e4-promos .pc img{height:auto;min-height:0;aspect-ratio:16/9}
  .e4-head .acts .e4-btn{padding:0 10px;font-size:11.5px}
  .e4-logo b{font-size:19px}
  .e4-jp .dg b{min-width:24px;height:36px;font-size:20px}
  .e4-content h1{font-size:21px}
  /* On a phone the column already fills the viewport, so the floating rail sits ON the content:
     at 375 the FAQ and Bonus buttons covered the labels of the Live and App chips. Keep ONE
     button, shrink it, and tuck it into the corner above the fixed bar. Nothing touching. */
  .e4-side{right:6px;bottom:calc(var(--bar) + 10px);gap:6px}
  .e4-side a{width:44px;padding:6px 2px}
  .e4-side a:nth-child(n+2){display:none}
  .e4-side a span{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .e4-car .track{scroll-behavior:auto}
}

/* ---------- entry offer bottom sheet ---------- */
.e4-sheet{position:fixed;inset:0;z-index:95;background:rgba(4,8,8,.8);display:none;
  align-items:flex-end;justify-content:center}
.e4-sheet.on{display:flex}
.e4-sheet .bx{position:relative;width:min(var(--col),100%);max-height:88vh;overflow:auto;
  border-radius:20px 20px 0 0;background:var(--ink-2);border:1px solid var(--line);border-bottom:0}
.e4-sheet .bx::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;border-radius:2px;background:var(--ink-4)}
.e4-sheet .x{position:absolute;top:11px;right:11px;z-index:3;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(7,11,11,.9);color:var(--txt);font-size:19px;
  line-height:1;cursor:pointer}
.e4-sheet img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:19px 19px 0 0;margin-top:16px}
.e4-sheet .bd{display:grid;gap:9px;padding:15px 15px 20px}
.e4-sheet .bd em{justify-self:start;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.08em;
  padding:3px 8px;border-radius:5px;background:var(--red);color:#fff}
.e4-sheet .bd b{font-size:18px;color:var(--gold)}
.e4-sheet .bd p{margin:0;font-size:13px;color:var(--mut);line-height:1.55}
.e4-sheet .later{min-height:42px;border:0;background:none;color:var(--mut);font:700 13px var(--font);
  cursor:pointer;border-radius:10px}

/* === image focal points (generated by emd_image_focus.py) === */
/* Faces found with OpenCV; the point of the picture that must survive the
   crop is pinned to the same point of the box. Regenerate, do not hand-edit. */
img[src$="/assets/img/game-dragon-tiger.jpg"]{object-position:20.1% 61.3%}
img[src$="/assets/img/game-speed-baccarat.jpg"]{object-position:46.3% 37.1%}
img[src$="/assets/img/promo-welcome.jpg"]{object-position:40.8% 32.7%}
/* === end image focal points === */