/*
Theme Name: Kamo
Theme URI: https://example.com/
Author: Kamo
Description: Kamo V1 — visual foundation based on the supplied reference.
Version: 2.0.0
Text Domain: kamo
*/
:root{
  --kamo-bg:#06070b;
  --kamo-panel:#17134a;
  --kamo-panel-2:#2e176b;
  --kamo-purple:#4c22a6;
  --kamo-gold:#ffd83f;
  --kamo-gold-2:#f3ad18;
  --kamo-text:#fff;
  --kamo-muted:#d4d0e6;
  --kamo-max:1000px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:#05060a}
body{
  color:var(--kamo-text);
  background:
    radial-gradient(circle at 50% 18%,rgba(77,36,155,.48),transparent 34%),
    linear-gradient(180deg,#071a39 0%,#090b16 20%,#05060a 65%,#090615 100%);
  font-family:"Noto Sans Thai",Tahoma,Arial,sans-serif;
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(115deg,transparent 0 20%,rgba(31,85,130,.13) 30%,transparent 42%),
    linear-gradient(245deg,transparent 0 58%,rgba(86,28,122,.15) 72%,transparent 86%);
  filter:blur(16px);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
.kamo-site{
  width:min(100%,var(--kamo-max));
  margin:0 auto;
  background:rgba(5,5,12,.72);
  min-height:100vh;
  box-shadow:0 0 45px rgba(0,0,0,.55);
}
.kamo-wrap{
  width:calc(100% - 32px);
  max-width:940px;
  margin:0 auto;
}
.kamo-download{
  min-height:128px;
  background:
    linear-gradient(90deg,rgba(25,10,63,.96),rgba(40,21,82,.9)),
    url("../images/top-download.jpg") center/cover no-repeat;
  border-bottom:2px solid rgba(95,52,180,.8);
}
.kamo-download__inner{
  min-height:128px;
  display:grid;
  grid-template-columns:100px 1fr auto 44px;
  align-items:center;
  gap:18px;
}
.kamo-logo{
  width:92px;height:78px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle,#6d35bc,#1b0c4c 68%,#090514);
  border:2px solid #f1b92d;
  box-shadow:0 0 16px rgba(255,207,66,.4);
  color:#ffe27a;
  font-size:25px;
  font-weight:1000;
  text-shadow:0 2px 3px #000;
}
.kamo-download__text{
  font-size:clamp(17px,2.4vw,29px);
  line-height:1.25;
  color:#fff5d7;
  font-weight:800;
}
.kamo-download__button{
  min-width:270px;
  padding:12px 24px;
  border-radius:38px;
  border:2px solid #f7d85a;
  background:linear-gradient(#fffbdc,#ffe76d 42%,#eeb21e);
  color:#2d2672;
  text-align:center;
  font-size:clamp(17px,2.1vw,27px);
  font-weight:1000;
  box-shadow:0 4px 0 #855311,0 0 18px rgba(255,219,70,.25);
}
.kamo-close{
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:#d5d5d5;
  color:#17131e;
  font-size:28px;
  cursor:pointer;
}
.kamo-brandbar{
  min-height:112px;
  background:
    linear-gradient(100deg,rgba(36,5,11,.96),rgba(8,7,10,.88),rgba(13,22,61,.95)),
    url("../images/brandbar.jpg") center/cover no-repeat;
  border-bottom:3px solid #351b8b;
}
.kamo-brandbar__inner{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.kamo-brand{
  font-size:clamp(42px,6vw,68px);
  font-weight:1000;
  letter-spacing:-3px;
  color:#f8e9c9;
  text-shadow:2px 3px 0 #8b4212,0 0 14px rgba(255,196,64,.45);
}
.kamo-brandbar__tools{
  display:flex;
  align-items:center;
  gap:16px;
  color:#ffe99b;
  font-size:clamp(17px,2.2vw,25px);
  font-weight:900;
  text-shadow:0 2px 4px #000;
}
.kamo-main{padding:20px 0 100px}
.kamo-hero{
  position:relative;
  overflow:hidden;
  min-height:315px;
  border-radius:16px;
  border:1px solid #9e4415;
  background:
    linear-gradient(90deg,rgba(72,6,4,.85),rgba(156,15,7,.38)),
    url("../images/hero-reference.jpg") center/cover no-repeat;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.kamo-hero__shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(30,0,0,.2),transparent 65%);
}
.kamo-hero__content{
  position:relative;
  z-index:1;
  width:60%;
  padding:42px 42px;
}
.kamo-hero h1{
  margin:0 0 8px;
  font-size:clamp(40px,6vw,70px);
  line-height:1;
  color:#fff;
  text-shadow:3px 4px 0 #7d170b,0 0 12px #ffd87a;
}
.kamo-hero p{
  margin:0;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:900;
  color:#fff1dc;
}
.kamo-slider-dots{
  position:absolute;
  bottom:12px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:9px;
}
.kamo-slider-dots span{
  width:11px;height:11px;border-radius:50%;
  background:#fff;
  opacity:.7;
}
.kamo-slider-dots span.active{width:28px;border-radius:10px;opacity:1}
.kamo-ticker{
  margin-top:8px;
  min-height:72px;
  border-radius:28px;
  border:3px solid #48e842;
  background:linear-gradient(180deg,#3731c8,#171679);
  box-shadow:inset 0 0 18px rgba(55,72,255,.65),0 4px 14px rgba(0,0,0,.45);
  display:flex;align-items:center;
  padding:0 26px;
  font-size:clamp(17px,2vw,25px);
  font-weight:900;
}
.kamo-ticker__icon{font-size:32px;margin-right:18px}
.kamo-actions{margin-top:12px}
.kamo-actions__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.kamo-action{
  min-height:128px;
  border-radius:18px;
  border:2px solid #d7ad31;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,95,205,.38),transparent 38%),
    linear-gradient(180deg,#6e2a89,#2b155e 60%,#171044);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 6px 14px rgba(0,0,0,.45);
}
.kamo-action__icon{font-size:43px;line-height:1}
.kamo-action__label{
  font-size:clamp(16px,2vw,22px);
  font-weight:1000;
  text-shadow:0 2px 3px #000;
}
.kamo-action--register{filter:saturate(.25);background:linear-gradient(180deg,#747474,#444)}
.kamo-game-layout{
  margin-top:18px;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:14px;
}
.kamo-categories{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kamo-category{
  min-height:90px;
  border:2px solid #7d4fe0;
  border-radius:16px;
  background:linear-gradient(180deg,#321c75,#140f39);
  display:grid;
  place-items:center;
  text-align:center;
  color:#e9dcff;
  font-weight:900;
}
.kamo-category--active{
  border-color:#ffd94e;
  box-shadow:0 0 12px rgba(255,210,50,.28);
}
.kamo-games{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.kamo-game{
  border-radius:14px;
  overflow:hidden;
  background:#15102f;
  box-shadow:0 5px 15px rgba(0,0,0,.4);
}
.kamo-game__image{
  aspect-ratio:1/1;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#7b1f65,#20155d 50%,#0c4b5d);
  font-size:42px;
}
.kamo-game__name{
  padding:8px 6px 10px;
  text-align:center;
  font-size:16px;
  font-weight:900;
}
.kamo-lucky{
  margin-top:18px;
  min-height:190px;
  border-radius:24px 24px 0 0;
  background:
    radial-gradient(circle at 50% 70%,rgba(255,208,44,.4),transparent 22%),
    linear-gradient(180deg,#08734d,#0b4939 48%,#28115f);
  position:relative;
  overflow:hidden;
}
.kamo-wheel{
  width:130px;height:130px;
  border-radius:50%;
  border:8px solid #e5b52c;
  background:conic-gradient(#ffcb2d 0 12.5%,#7431b0 12.5% 25%,#f23b55 25% 37.5%,#27a5d6 37.5% 50%,#ffcb2d 50% 62.5%,#7431b0 62.5% 75%,#f23b55 75% 87.5%,#27a5d6 87.5%);
  position:absolute;
  left:50%;bottom:-52px;
  transform:translateX(-50%);
  box-shadow:0 0 20px rgba(255,215,65,.45);
}
.kamo-lucky__title{
  position:absolute;left:50%;top:28px;
  transform:translateX(-50%);
  background:#32107e;
  border:2px solid #8e5bea;
  border-radius:24px;
  padding:10px 34px;
  color:#ffe24b;
  font-size:22px;
  font-weight:1000;
  white-space:nowrap;
}
.kamo-bottom{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,var(--kamo-max));
  z-index:20;
  background:linear-gradient(180deg,#3b1c8b,#170b4c);
  border-top:2px solid #7e4bdc;
  box-shadow:0 -8px 25px rgba(0,0,0,.45);
}
.kamo-bottom__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  min-height:78px;
}
.kamo-bottom a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size:13px;
  font-weight:900;
}
.kamo-bottom__icon{font-size:25px}
.kamo-footer{display:none}

@media(max-width:820px){
  .kamo-download__inner{grid-template-columns:76px 1fr auto}
  .kamo-download__button{min-width:180px}
  .kamo-close{grid-column:3;grid-row:1;width:34px;height:34px;font-size:21px}
  .kamo-actions__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kamo-game-layout{grid-template-columns:105px 1fr}
  .kamo-games{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .kamo-wrap{width:calc(100% - 16px)}
  .kamo-download__inner{grid-template-columns:55px 1fr auto;gap:8px}
  .kamo-logo{width:52px;height:52px;font-size:17px}
  .kamo-download__text{font-size:13px}
  .kamo-download__button{font-size:13px;min-width:0;padding:8px 10px}
  .kamo-close{width:30px;height:30px;font-size:19px}
  .kamo-brandbar,.kamo-brandbar__inner{min-height:78px}
  .kamo-brand{font-size:31px}
  .kamo-brandbar__tools{font-size:11px;gap:4px}
  .kamo-main{padding-top:10px}
  .kamo-hero{min-height:205px}
  .kamo-hero__content{width:68%;padding:25px 22px}
  .kamo-hero h1{font-size:34px}
  .kamo-hero p{font-size:14px}
  .kamo-ticker{min-height:55px;padding:0 12px;border-radius:20px;font-size:14px}
  .kamo-ticker__icon{font-size:25px;margin-right:9px}
  .kamo-actions__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .kamo-action{min-height:98px;border-radius:14px}
  .kamo-action__icon{font-size:32px}
  .kamo-action__label{font-size:16px}
  .kamo-game-layout{grid-template-columns:78px 1fr;gap:8px}
  .kamo-category{min-height:70px;border-radius:12px;font-size:13px}
  .kamo-games{gap:8px}
  .kamo-game__name{font-size:13px}
  .kamo-bottom__grid{min-height:64px}
  .kamo-bottom a{font-size:10px}
  .kamo-bottom__icon{font-size:21px}
}

/* Kamo V2 - Top Area Refinement */
.kamo-download__inner{max-width:940px}
.kamo-download{
  background-position:center;
  background-size:cover;
}
.kamo-download__text{
  max-width:390px;
}
.kamo-brandbar{
  background-position:center;
  background-size:cover;
}
.kamo-brandbar__inner{max-width:940px}
.kamo-brandbar__tools{
  white-space:nowrap;
}
.kamo-hero{
  background-position:center;
  background-size:cover;
}
.kamo-hero__content{
  max-width:58%;
}
@media(max-width:820px){
  .kamo-download__inner{max-width:none}
  .kamo-brandbar__inner{max-width:none}
  .kamo-hero__content{max-width:68%}
}
@media(max-width:560px){
  .kamo-hero__content{max-width:70%}
}