/* KISSY918 Casino: light app shell, white panels, deep teal and gold. Namespaced .kl- */
:root{
  --teal:#0c5361; --teal-2:#0a414c; --teal-3:#e4f2f4; --teal-4:#1a8296;
  --gold:#d6a53c; --gold-2:#b4852a; --gold-3:#fdf4e2;
  --ink:#16252a; --mut:#6b8188; --line:#dfe8ea; --bg:#f4f7f8; --card:#fff;
  --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;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;padding-bottom:118px}
a{color:var(--teal-4);text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.3}
table{border-collapse:collapse;width:100%}
.kl-app{max-width:980px;margin:0 auto;background:var(--card);min-height:100vh;
  box-shadow:0 0 40px rgba(12,83,97,.08)}
.kl-pad{padding:0 14px}

/* ---------- header ---------- */
.kl-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.kl-head .row{max-width:980px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:10px;padding:9px 14px}
.kl-burger{background:none;border:0;color:var(--ink);font-size:21px;line-height:1;min-width:44px;
  min-height:44px;padding:0;cursor:pointer}
.kl-logo{display:flex;align-items:center;gap:8px;justify-self:center;min-width:0}
.kl-logo svg{width:34px;height:34px;flex:none}
.kl-logo .wm{display:flex;flex-direction:column;line-height:1;min-width:0}
.kl-logo .wm b{font-family:"Arial Black",Arial,sans-serif;font-size:21px;color:var(--teal);white-space:nowrap}
.kl-logo .wm small{font-size:8px;letter-spacing:.3em;color:var(--gold-2);font-weight:800;margin-top:4px;white-space:nowrap}
.kl-lang{display:flex;gap:3px;justify-self:end}
.kl-lang a{display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;
  color:var(--mut);border:1px solid var(--line);border-radius:7px;min-width:40px;min-height:44px;
  padding:0 7px;line-height:1;white-space:nowrap}
.kl-lang a.on{color:#fff;background:var(--teal);border-color:var(--teal)}
.kl-say{display:flex;align-items:center;gap:9px;margin:0 0 10px;background:var(--teal-3);border-radius:10px;
  padding:9px 12px;color:var(--teal-2);font-size:12.5px;font-weight:700}
.kl-say .i{flex:none;font-size:15px}
.kl-say span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-drawer{display:none;border-top:1px solid var(--line);background:#fff;padding:4px 14px 10px}
.kl-drawer a{display:block;color:var(--ink);font-weight:700;font-size:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.kl-open .kl-drawer{display:block}

/* ---------- floor ---------- */
.kl-banner{position:relative;margin:12px 0 0;border-radius:14px;overflow:hidden;
  border:1px solid var(--line)}
.kl-banner img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* The photo is light and its subject sits on the left, so the copy goes right on a soft
   scrim. Without it the banner was a large picture carrying no message and no CTA. */
.kl-banner .ov{position:absolute;inset:0 0 0 auto;width:min(56%,460px);display:flex;
  flex-direction:column;justify-content:center;gap:9px;padding:18px 22px;text-align:left;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92) 22%,rgba(255,255,255,.97))}
.kl-banner .ov strong{font-size:22px;line-height:1.2;color:var(--teal)}
.kl-banner .ov em{font-style:normal;font-size:13.5px;color:#3c565c;font-weight:600}
.kl-banner .ov a{align-self:flex-start}
.kl-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.kl-floor{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;margin:14px 0 0}
.kl-quick{display:grid;gap:10px;align-content:start}
.kl-quick a{display:grid;justify-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:11px 6px;color:var(--teal-2);font-size:11px;font-weight:800;text-align:center;
  box-shadow:0 4px 12px rgba(12,83,97,.06)}
.kl-quick img{width:52px;height:52px;object-fit:contain;border-radius:10px}
.kl-tabs{display:flex;gap:6px;overflow-x:auto;background:var(--teal);border-radius:12px;padding:5px;
  scrollbar-width:none}
.kl-tabs::-webkit-scrollbar{display:none}
.kl-tabs a{flex:none;display:flex;align-items:center;gap:6px;color:#cfe6eb;font-size:12.5px;font-weight:800;
  padding:9px 13px;border-radius:9px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.kl-tabs a.on{background:#fff;color:var(--teal)}
.kl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 0}
.kl-tile{display:block;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;
  box-shadow:0 4px 12px rgba(12,83,97,.05);min-width:0}
.kl-tile img{width:100%;aspect-ratio:1/1;object-fit:cover}
.kl-tile b{display:block;font-size:11.5px;padding:8px 9px 3px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kl-tile small{display:block;font-size:10px;padding:0 9px 9px;color:var(--mut);font-weight:700}
.kl-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 10px}
.kl-sh h2{font-size:16px;color:var(--teal)}
.kl-sh a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:11.5px;
  font-weight:800;color:var(--gold-2)}
.kl-strip{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kl-strip span{display:flex;align-items:center;justify-content:center;height:34px;min-width:64px;background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:5px 9px}
.kl-strip span img{max-height:21px;width:auto;object-fit:contain}
.kl-strip span.t{background:var(--teal-3);color:var(--teal-2);font-size:11px;font-weight:800;border-color:transparent}
/* A logo whose ink is partly near-white needs a dark chip or those strokes disappear. */
.kl-strip span.dark{background:var(--teal);border-color:var(--teal)}
.kl-promo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kl-promo figure{margin:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}
.kl-promo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.kl-promo figcaption{padding:10px 12px 12px}
.kl-promo figcaption b{display:block;font-size:14px;color:var(--teal)}
.kl-promo figcaption span{display:block;font-size:12px;color:var(--mut);margin:3px 0 9px}

/* ---------- written content ---------- */
.kl-content{padding:16px 14px 28px;max-width:860px;margin:0 auto}
.kl-content h1{font-size:27px;color:var(--teal)}
.kl-content h2{font-size:19px;color:var(--teal);margin:24px 0 9px;padding-left:11px;border-left:4px solid var(--gold)}
.kl-content p{margin:0 0 13px;color:#2f4248}
.kl-content ul{margin:0 0 13px;padding-left:20px;color:#2f4248}
.kl-content li{margin:0 0 6px}
.kl-content .lead{font-size:16px;color:#1f3338}
.kl-ph{display:grid;grid-template-columns:286px minmax(0,1fr);gap:20px;align-items:center;margin:0 0 6px}
.kl-ph .eb{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-2);background:var(--gold-3);border-radius:20px;padding:5px 11px;margin-bottom:11px}
.kl-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.kl-ph .act{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}
.kl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 18px}
.kl-kpis>div{background:var(--teal-3);border-radius:13px;padding:12px 11px;min-width:0}
.kl-kpis b{display:block;font-size:20px;color:var(--teal);font-family:"Arial Black",Arial,sans-serif}
.kl-kpis span{display:block;font-size:11px;color:var(--mut);margin-top:3px}
.kl-steps{counter-reset:kl;list-style:none;margin:0 0 15px;padding:0}
.kl-steps li{counter-increment:kl;position:relative;padding:11px 12px 11px 44px;margin:0 0 8px;border-radius:12px;
  background:var(--gold-3);color:#3a2d16}
.kl-steps li:before{content:counter(kl);position:absolute;left:11px;top:10px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:12px;color:#fff;background:var(--gold-2)}
.kl-tw{overflow-x:auto;margin:0 0 15px}
.kl-tbl{font-size:13.5px;min-width:430px}
.kl-tbl th{text-align:left;padding:10px 12px;background:var(--teal);color:#fff;font-size:12px;
  letter-spacing:.03em;text-transform:uppercase}
.kl-tbl td{padding:10px 12px;border-top:1px solid var(--line);color:#2f4248}
.kl-tbl tr:nth-child(even) td{background:#f7fafb}
.kl-faq details{border:1px solid var(--line);border-radius:12px;margin:0 0 8px;background:#fff}
.kl-faq summary{cursor:pointer;padding:12px 14px;font-weight:800;color:var(--teal);font-size:14px;list-style:none}
.kl-faq summary::-webkit-details-marker{display:none}
.kl-faq summary:after{content:"+";float:right;color:var(--gold-2);font-weight:900}
.kl-faq details[open] summary:after{content:"\2013"}
.kl-faq p{margin:0;padding:0 14px 13px;color:#2f4248;font-size:13.5px}
.kl-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:13px;margin:22px 0 0;
  padding:17px 19px;border-radius:15px;background:linear-gradient(100deg,var(--teal),var(--teal-4))}
.kl-band b{font-size:16px;color:#fff;max-width:46ch}

/* ---------- buttons ---------- */
.kl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:13px 17px;
  font-weight:800;font-size:14px;line-height:1;text-align:center;border:0;cursor:pointer;color:#fff}
.kl-btn.p{background:linear-gradient(180deg,var(--teal-4),var(--teal))}
.kl-btn.g{background:linear-gradient(180deg,#eab94d,var(--gold-2));color:#2e2206}
.kl-btn.o{background:#fff;border:2px solid var(--teal);color:var(--teal)}
.kl-btn.w{width:100%}
.kl-btn.lg{padding:15px 22px;font-size:15.5px}

/* ---------- footer ---------- */
.kl-foot{background:var(--teal-2);color:#cfe1e5;margin-top:8px}
.kl-foot .w{max-width:980px;margin:0 auto;padding:24px 14px 20px}
.kl-foot h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.kl-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:18px}
.kl-foot a{display:flex;align-items:center;min-height:44px;color:#cfe1e5;font-size:13px;margin:0}
.kl-foot p{font-size:13px;margin:0}
.kl-foot .pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kl-foot .pay span{display:flex;align-items:center;justify-content:center;height:29px;background:#fff;
  border-radius:7px;padding:4px 8px}
.kl-foot .pay img{max-height:19px;width:auto;object-fit:contain}
.kl-foot .legal{margin-top:17px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:space-between}
.kl-foot .age{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--gold-2);
  color:#fff;font-size:9.5px;font-weight:900;margin-right:6px;vertical-align:-5px}

/* ---------- bottom nav + sticky cta ---------- */
.kl-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  height:58px;background:#fff;border-top:1px solid var(--line)}
.kl-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mut);
  font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;min-width:0;padding:0 2px;
  text-align:center;overflow:hidden}
.kl-nav a .i{font-size:18px;line-height:1}
.kl-nav a span:not(.i){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-nav a.on{color:var(--teal)}
.kl-scta{position:fixed;left:0;right:0;bottom:58px;z-index:59;padding:8px 12px;background:rgba(255,255,255,.96);
  border-top:1px solid var(--line)}
.kl-scta .in{max-width:980px;margin:0 auto}
.kl-scta a{display:flex;width:100%;justify-content:center;font-size:15px;padding:12px;border-radius:11px}

/* ---------- entry popup ---------- */
.kl-pop{position:fixed;inset:0;z-index:90;background:rgba(10,30,36,.66);display:none;align-items:center;
  justify-content:center;padding:16px}
.kl-pop.on{display:flex}
.kl-pop .bx{position:relative;width:min(390px,100%);max-height:90vh;overflow:auto;background:#fff;
  border-radius:17px;padding:17px;text-align:center}
.kl-pop img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:13px}
.kl-pop b{display:block;font-size:18px;color:var(--teal)}
.kl-pop span{display:block;font-size:13px;color:var(--mut);margin:7px 0 13px}
.kl-pop .x{position:absolute;top:9px;right:11px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--mut);font-size:17px;line-height:1;cursor:pointer;z-index:2}

@media(max-width:760px){
  /* The page head is a fixed 286px image track beside the text. Below this width that leaves
     the text column too narrow to hold its own buttons, and the page scrolled sideways. */
  .kl-ph{grid-template-columns:minmax(0,1fr);gap:14px}
  /* On a phone the heading, lead and buttons come first and the picture follows, so the
     call to action sits high in the first screenful instead of under the sticky bar. */
  .kl-ph img{order:1;aspect-ratio:16/10}
  .kl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kl-promo{grid-template-columns:1fr}
  .kl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kl-foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  /* On a phone the picture becomes a filling background and the copy sits in flow, so the
     banner grows to its own text instead of the text having to fit the image's aspect.
     With the overlay absolute the CTA cleared the bottom edge by 2px at 375px. */
  .kl-banner{display:grid}
  .kl-banner img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .kl-banner .ov{position:relative;inset:auto;width:100%;padding:16px 15px;min-height:170px;
    background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.95) 45%)}
  .kl-banner .ov strong{font-size:18px}
  .kl-banner .ov em{font-size:12.5px}
  .kl-floor{grid-template-columns:minmax(0,1fr)}
  .kl-quick{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kl-quick img{width:42px;height:42px}
  .kl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kl-content{padding:14px 12px 24px}
  .kl-content h1{font-size:22px}
  .kl-content h2{font-size:17px}
  .kl-logo .wm b{font-size:18px}
  .kl-logo svg{width:29px;height:29px}
  .kl-lang a{min-width:38px;padding:0 5px;font-size:11px}
  .kl-foot .cols{grid-template-columns:1fr}
}