/* KAKEKSLOT Premium Layout Upgrade v3 - presentation layer only */
:root{
  --bg:#030812;
  --bg2:#06101f;
  --surface:#091526;
  --surface2:#0d1b2f;
  --surface-light:#13243b;
  --line:rgba(139,177,222,.16);
  --text:#f7f9fc;
  --muted:#96a8be;
  --brand:#ffd04a;
  --brand2:#ff9f1c;
  --accent:#38b6ff;
  --accent2:#1677ff;
  --radius:18px;
  --shadow:0 18px 45px rgba(0,0,0,.30);
  --shadow-soft:0 10px 30px rgba(0,0,0,.20);
  --container:1200px;
}
html{background:var(--bg)}
body.premium-ui{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% -8%,rgba(32,128,255,.15),transparent 30rem),
    radial-gradient(circle at 88% 18%,rgba(255,186,27,.08),transparent 26rem),
    linear-gradient(180deg,#030812 0%,#06101d 38%,#040a14 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.005em;
}
body.premium-ui::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.23;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
::selection{background:rgba(56,182,255,.26);color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.container,.container--fluid{width:min(calc(100% - 32px),var(--container))}

/* Header */
.app-header{
  background:rgba(4,11,22,.82)!important;
  border-bottom:1px solid rgba(151,186,227,.13);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
.app-header__main{height:72px;gap:24px}
.app-logo{width:166px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
.app-header__auth{gap:10px}
.app-header__extra{
  background:linear-gradient(180deg,rgba(10,23,41,.88),rgba(5,13,25,.9));
  border-top:1px solid rgba(255,255,255,.045);
}
.app-breadcrumbs a{
  position:relative;
  padding:12px 15px;
  color:#a7b7ca;
  font-weight:650;
  transition:color .2s ease,background .2s ease;
}
.app-breadcrumbs a::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:5px;
  height:2px;border-radius:999px;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transition:transform .2s ease;
}
.app-breadcrumbs a:hover,.app-breadcrumbs .app-link--active{background:rgba(255,255,255,.025);color:#fff}
.app-breadcrumbs a:hover::after,.app-breadcrumbs .app-link--active::after{transform:scaleX(1)}

/* Buttons */
.btn{
  min-height:42px;
  border-radius:12px;
  padding:9px 18px;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--brand{
  color:#241700;
  border-color:rgba(255,220,101,.46);
  background:linear-gradient(135deg,#ffe06b 0%,#ffc333 42%,#ff9d19 100%);
  box-shadow:0 8px 22px rgba(255,171,25,.19),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--brand:hover{box-shadow:0 12px 28px rgba(255,171,25,.26),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--accent{
  color:#fff;
  border-color:rgba(89,189,255,.35);
  background:linear-gradient(135deg,#42c4ff 0%,#178bff 50%,#1768e8 100%);
  box-shadow:0 8px 22px rgba(23,126,255,.22),inset 0 1px 0 rgba(255,255,255,.26);
}
.btn--accent-secondary{
  color:#dce9f7;
  border-color:rgba(137,177,222,.22);
  background:linear-gradient(180deg,rgba(22,42,68,.86),rgba(12,28,48,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.btn--accent-secondary:hover{border-color:rgba(74,182,255,.45);color:#fff}

/* Main / hero */
.container>section.home{padding-top:18px}
.home-carousel{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(110,163,224,.18);
  background:linear-gradient(145deg,#0a1527,#07101e);
  box-shadow:0 26px 65px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.02) inset;
  isolation:isolate;
}
.home-carousel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 -45px 70px rgba(2,8,18,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.slide{background:#071120}
.home__teaser{gap:12px;margin:14px 0}
.home__teaser .btn{min-height:50px;border-radius:14px;font-size:14px}
.home__teaser i{filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.running-text{
  min-height:44px;
  margin:12px 0;
  padding:0 14px;
  border-radius:13px;
  border:1px solid rgba(96,158,220,.18);
  background:linear-gradient(180deg,rgba(14,32,53,.9),rgba(9,23,41,.9));
  color:#bed0e2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.12);
}
.running-text i:before{color:var(--brand);text-shadow:0 0 14px rgba(255,193,40,.7)}

/* Category menu */
.app-menu{
  margin:14px 0 16px;
  border-radius:16px;
  border:1px solid rgba(120,165,215,.16);
  background:linear-gradient(180deg,rgba(11,26,46,.92),rgba(7,18,33,.94));
  box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.035);
}
.app-menu__item{min-width:108px}
.app-menu__item a{
  position:relative;
  min-height:88px;
  padding:13px 15px 12px;
  gap:7px;
  color:#aebed1;
  font-size:11.5px;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.app-menu__item a::before{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;
  transform:scaleX(.4);
  transition:.2s ease;
}
.app-menu__item a:hover{background:linear-gradient(180deg,rgba(42,93,142,.15),rgba(11,29,49,.12));color:#fff;transform:translateY(-1px)}
.app-menu__item a:hover::before{opacity:1;transform:scaleX(1)}
.brand-icon--md{width:38px;height:38px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.2))}
.app-menu--active{opacity:.42}

/* Cards */
.card{
  margin:14px 0;
  border-radius:18px;
  border:1px solid rgba(119,161,210,.16);
  background:linear-gradient(155deg,rgba(13,29,50,.97),rgba(7,19,35,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}
.card--light,.card--primary{background:linear-gradient(155deg,rgba(14,31,52,.98),rgba(7,18,33,.98))}
.card__header{
  min-height:58px;
  padding:12px 16px;
  border-bottom:1px solid rgba(125,165,211,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}
.card__title{gap:10px;font-size:17px;letter-spacing:.01em}
.card__title span{background:linear-gradient(180deg,#fff,#d5e2ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.card__see-all{
  padding:7px 11px;
  border:1px solid rgba(255,199,55,.18);
  border-radius:10px;
  color:#ffd15a;
  background:rgba(255,192,40,.055);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.card__see-all:hover{background:rgba(255,192,40,.1);border-color:rgba(255,199,55,.34);transform:translateY(-1px)}
.card__body{padding:16px}
.card__cta{padding:0 16px 16px}
.brand-icon--sm{width:27px;height:27px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.24))}

/* Horizontal carousels */
.carousel__container{gap:12px}
.slot-carousel__group{grid-template-columns:repeat(5,92px);grid-template-rows:repeat(2,112px);gap:10px}
.slot-carousel__item,.arcade-carousel__item{
  width:92px;
  gap:8px;
  color:#bfccdc;
  font-size:11px;
  transition:transform .2s ease,color .2s ease;
}
.slot-carousel__item:hover,.arcade-carousel__item:hover{transform:translateY(-3px);color:#fff}
.slot-carousel__img-container,.arcade-carousel__img-container{
  width:78px;height:78px;
  border-radius:17px;
  border:1px solid rgba(120,172,226,.16);
  background:linear-gradient(145deg,#142945,#0d1d32);
  box-shadow:0 9px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.slot-carousel__item:hover .slot-carousel__img-container,.arcade-carousel__item:hover .arcade-carousel__img-container{
  border-color:rgba(67,179,255,.35);
  background:linear-gradient(145deg,#193656,#102640);
  box-shadow:0 13px 25px rgba(0,0,0,.24),0 0 24px rgba(39,150,255,.08),inset 0 1px 0 rgba(255,255,255,.06);
}
.slot-carousel__img-container img,.arcade-carousel__img-container img{width:62px;height:62px}
.provider--promo:after,.provider--new:after{right:5px;top:5px;padding:3px 5px;border-radius:6px;font-size:7px;font-weight:900;letter-spacing:.04em;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.provider--promo:after{background:linear-gradient(135deg,#ff5b68,#d72e45)}
.provider--new:after{background:linear-gradient(135deg,#32baff,#1175ec)}
.carousel__control{
  width:38px;height:54px;margin-top:-27px;
  border-radius:12px;
  border:1px solid rgba(124,171,224,.22);
  background:rgba(5,14,27,.88);
  box-shadow:0 8px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.carousel__control:hover{border-color:rgba(58,180,255,.5);background:rgba(11,29,49,.94)}
.carousel__prev{left:-8px}.carousel__next{right:-8px}
.carousel__control--disabled{opacity:.18}

/* Split feature cards */
.card--split{
  gap:14px;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
}
.card--split .card__item{
  min-width:0;
  padding:16px;
  border:1px solid rgba(119,161,210,.16);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(14,31,52,.98),rgba(7,18,33,.98));
  box-shadow:0 16px 36px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.035);
}
.card--split .card__item+ .card__item{border-left:1px solid rgba(119,161,210,.16)}
.card--split .card__title{margin-bottom:12px}
.card__image{
  aspect-ratio:16/8;
  margin-bottom:12px;
  border-radius:14px;
  border:1px solid rgba(128,173,222,.12);
  background:#0c1c30;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
.card--split .card__item:hover .card__image{transform:scale(1.008);filter:brightness(1.05);box-shadow:0 14px 30px rgba(0,0,0,.27)}
.card--split .card__cta{padding:9px 14px}

/* Casino / game tiles */
.casino-carousel ul{gap:13px}
.casino-carousel__item{width:158px;flex-basis:158px}
.casino-game__container{
  width:158px;height:108px;
  border-radius:14px;
  border:1px solid rgba(119,169,221,.16);
  background:linear-gradient(145deg,#132844,#0c1b2e);
  box-shadow:0 10px 22px rgba(0,0,0,.2);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.casino-carousel__item:hover .casino-game__container{transform:translateY(-2px);border-color:rgba(63,179,255,.35);box-shadow:0 15px 28px rgba(0,0,0,.27),0 0 24px rgba(38,149,255,.07)}
.casino-game__container::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(2,7,15,.28));border-radius:inherit}
.casino-game__count{left:7px;bottom:7px;padding:3px 7px;border-radius:7px;background:rgba(1,7,15,.76);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(5px)}
.casino-game__provider{padding-top:8px;color:#c4d1df;font-size:10.5px;letter-spacing:.02em}

/* Footer */
.app-footer{
  margin-top:28px;
  padding:34px 0 92px;
  border-top:1px solid rgba(118,159,207,.14);
  background:linear-gradient(180deg,rgba(5,14,26,.95),#030913 35%,#02060d 100%);
}
.app-footer__container{width:min(calc(100% - 32px),var(--container))}
.app-footer__links{gap:34px;padding-bottom:28px;border-bottom-color:rgba(124,163,208,.11)}
.app-footer__link-group h5,.app-footer__partners h5{margin-bottom:12px;color:#eff5fb;font-size:12px;letter-spacing:.08em}
.app-footer__link-group li{margin:8px 0}
.app-footer__link-group a{color:#8295ac;transition:color .18s ease,transform .18s ease}
.app-footer__link-group a:hover{color:#e9f3ff}
.app-footer__text{margin:28px 0;color:#93a5b9;line-height:1.75}
.app-footer__text article{max-width:960px}
.app-footer__text h1{color:#f2f6fa!important;font-size:22px!important;line-height:1.35}
.app-footer__text p,.app-footer__text li{font-size:13px}
.app-footer__text button{border-radius:10px;border-color:rgba(126,167,215,.2);background:#0c1c31;color:#d9e6f5;padding:8px 12px}
.app-footer__partners{border-top-color:rgba(124,163,208,.11)}
.app-footer__partners li a{padding:7px 9px;border-radius:9px;background:rgba(13,29,49,.8);border:1px solid rgba(111,154,203,.09)}
.app-footer__copyright{margin-top:24px;color:#5f738b}

/* Drawer */
.app-drawer__backdrop{background:rgba(0,5,12,.72)!important;backdrop-filter:blur(4px)}
.app-drawer{
  width:min(88vw,390px);
  padding:18px;
  border-left:1px solid rgba(116,160,212,.17);
  background:linear-gradient(160deg,rgba(11,27,47,.99),rgba(4,13,25,.99))!important;
  box-shadow:-22px 0 50px rgba(0,0,0,.35);
}
.app-drawer__categories ul{gap:8px}
.app-drawer__categories a{min-height:76px;padding:9px;border:1px solid rgba(117,162,214,.1);border-radius:13px;background:rgba(255,255,255,.018)}
.app-drawer__nav ul{border-color:rgba(121,164,213,.12)}
.app-drawer__nav a{border-radius:10px;color:#c6d2e0}
.app-drawer__nav a:hover{background:rgba(63,148,230,.09);color:#fff}

/* Tablet */
@media(max-width:900px){
  .container,.container--fluid,.app-footer__container{width:min(calc(100% - 24px),var(--container))}
  .app-header__main{height:64px}
  .app-logo{width:150px}
  .app-header__widgets{display:none}
  .app-header__extra{min-height:0;border:0;background:transparent}
  .drawer__toggle{
    display:inline-flex;
    position:absolute;
    right:12px;top:11px;
    z-index:90;
    min-width:44px;min-height:42px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid rgba(123,168,219,.18);
    background:linear-gradient(180deg,rgba(18,39,65,.96),rgba(9,24,42,.96));
    box-shadow:0 8px 20px rgba(0,0,0,.2);
  }
  .drawer__toggle span{font-size:0}
  .drawer__toggle span::after{content:'Menu';font-size:12px}
  .container>section.home{padding-top:12px}
  .card--split .card__item{padding:14px}
  .slot-carousel__group{grid-template-columns:repeat(5,84px);grid-template-rows:repeat(2,104px)}
  .slot-carousel__item,.arcade-carousel__item{width:84px}
  .slot-carousel__img-container,.arcade-carousel__img-container{width:70px;height:70px}
  .casino-carousel__item{width:145px;flex-basis:145px}
  .casino-game__container{width:145px;height:100px}
  .app-footer__links{grid-template-columns:repeat(2,1fr)}
}

/* Mobile */
@media(max-width:620px){
  body.premium-ui{padding-bottom:76px;background:linear-gradient(180deg,#030812 0%,#06101c 45%,#030811 100%)}
  body.premium-ui::before{display:none}
  .container,.container--fluid,.app-footer__container{width:min(calc(100% - 18px),var(--container))}
  .app-header{box-shadow:0 8px 24px rgba(0,0,0,.26)}
  .app-header__main{height:60px}
  .app-logo{width:140px}
  .drawer__toggle{top:9px;right:9px;min-height:40px;min-width:42px;padding:8px 10px}
  .container>section.home{padding-top:9px}
  .home-carousel{border-radius:14px;box-shadow:0 15px 38px rgba(0,0,0,.3)}
  .home__teaser{gap:7px;margin:9px 0}
  .home__teaser .btn{min-height:44px;padding:7px 6px;border-radius:11px;font-size:11.5px}
  .home__teaser i{font-size:15px}
  .running-text{min-height:38px;margin:8px 0;padding:0 10px;border-radius:10px;font-size:10.8px}
  .app-menu{margin:9px 0 10px;border-radius:12px}
  .app-menu__item{min-width:78px}
  .app-menu__item a{min-height:70px;padding:9px 8px;font-size:9.8px;gap:4px}
  .brand-icon--md{width:30px;height:30px}
  .card{margin:9px 0;border-radius:14px}
  .card__header{min-height:48px;padding:9px 11px}
  .card__title{font-size:14.5px;gap:7px}
  .brand-icon--sm{width:23px;height:23px}
  .card__see-all{padding:6px 8px;border-radius:8px;font-size:10.5px}
  .card__body{padding:11px}
  .card__cta{padding:0 11px 11px}
  .card__cta>.btn,.card>.card__cta .btn{min-height:40px;border-radius:10px;font-size:11.5px}
  .slot-carousel__group{grid-template-columns:repeat(5,72px);grid-template-rows:repeat(2,92px);gap:7px}
  .slot-carousel__item,.arcade-carousel__item{width:72px;font-size:9.2px;gap:6px}
  .slot-carousel__img-container,.arcade-carousel__img-container{width:60px;height:60px;border-radius:13px}
  .slot-carousel__img-container img,.arcade-carousel__img-container img{width:49px;height:49px}
  .carousel__control{display:none}
  .card--split{gap:8px}
  .card--split .card__item{padding:10px;border-radius:14px}
  .card--split .card__title{font-size:13.5px;margin-bottom:8px}
  .card__image{aspect-ratio:4/3;margin-bottom:9px;border-radius:10px}
  .card--split .card__cta{min-height:38px;padding:7px 5px;font-size:10px;border-radius:9px}
  .casino-carousel ul{gap:9px}
  .casino-carousel__item{width:122px;flex-basis:122px}
  .casino-game__container{width:122px;height:84px;border-radius:11px}
  .casino-game__provider{padding-top:6px;font-size:9.6px}
  .app-footer{margin-top:18px;padding:24px 0 28px}
  .app-footer__links{grid-template-columns:repeat(2,1fr);gap:18px;padding-bottom:20px}
  .app-footer__text{margin:20px 0;line-height:1.65}
  .app-footer__text h1{font-size:18px!important}
  .app-footer__text p,.app-footer__text li{font-size:11.5px}
  .sticky-footer{
    left:8px;right:8px;bottom:8px;
    border:1px solid rgba(130,174,224,.17);
    border-radius:17px;
    overflow:visible;
    background:rgba(5,15,29,.91)!important;
    box-shadow:0 -2px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
  }
  .sticky-footer__nav ul{padding:4px 4px max(4px,env(safe-area-inset-bottom));gap:2px}
  .sticky-footer__nav a{min-height:58px;border:0!important;border-radius:12px!important;color:#8fa3bb;font-size:8.7px;font-weight:700;transition:transform .18s ease,color .18s ease,background .18s ease}
  .sticky-footer__nav img{width:21px;height:21px;opacity:.84}
  .sticky-footer__nav .app-link--active{color:#ffd05a;background:rgba(255,197,50,.06)!important}
  .sticky-footer__nav li:nth-child(3) a{
    min-height:58px;
    margin-top:-12px;
    color:#251700;
    background:linear-gradient(135deg,#ffe06a,#ffb82f 52%,#ff9718)!important;
    box-shadow:0 10px 22px rgba(255,165,22,.28),inset 0 1px 0 rgba(255,255,255,.55);
  }
  .sticky-footer__nav li:nth-child(3) img{filter:brightness(.25);opacity:.85}
  .app-drawer{width:min(90vw,360px);padding:14px}
}

@media(max-width:390px){
  .container,.container--fluid,.app-footer__container{width:min(calc(100% - 14px),var(--container))}
  .home__teaser{gap:5px}
  .home__teaser .btn{font-size:10.5px}
  .slot-carousel__group{grid-template-columns:repeat(5,68px)}
  .slot-carousel__item,.arcade-carousel__item{width:68px}
  .slot-carousel__img-container,.arcade-carousel__img-container{width:57px;height:57px}
  .card--split .card__item{padding:8px}
  .card--split .card__title{font-size:12.5px}
  .card--split .card__cta{font-size:9.5px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.app-menu__item a,.slot-carousel__item,.arcade-carousel__item,.card__image,.casino-game__container{transition:none!important;transform:none!important}
}

/* Final responsive polish */
.app-menu__item .app-menu--active{display:none!important}
@media(max-width:340px){
  .card--split{grid-template-columns:1fr}
  .home__teaser{grid-template-columns:1fr 1fr}
  .home__teaser>*:nth-child(2){grid-column:span 1}
  .home__teaser>*:nth-child(3){grid-column:1/-1}
}