:root{
  --bg:#03121a;
  --bg2:#061e29;
  --cyan:#40efff;
  --blue:#168dff;
  --white:#eefcff;
  --muted:#9bc1cd;
  --line:rgba(74,227,255,.23);
  --card:rgba(7,35,45,.82);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 12%,rgba(18,205,255,.18),transparent 32%),
    radial-gradient(circle at 15% 75%,rgba(0,110,255,.10),transparent 28%),
    linear-gradient(180deg,#031017 0%,#041a24 55%,#021119 100%);
  font-family:"Kanit",sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  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:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.07;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.14) 4px);
}
.ambient{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none}
.ambient-1{width:260px;height:260px;background:rgba(0,218,255,.10);top:20%;left:-100px}
.ambient-2{width:300px;height:300px;background:rgba(15,90,255,.08);bottom:0;right:-120px}
.topbar{
  height:92px;padding:13px 5%;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
  background:rgba(2,15,22,.66);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(72,228,255,.10);
}
.brand img{width:88px;height:64px;object-fit:cover;border-radius:12px;filter:drop-shadow(0 0 16px rgba(55,239,255,.25))}
.menu-btn{
  width:64px;height:64px;border-radius:18px;border:1px solid rgba(65,229,255,.27);
  background:rgba(8,37,48,.72);display:flex;flex-direction:column;gap:6px;
  align-items:center;justify-content:center;cursor:pointer;
}
.menu-btn span{display:block;width:23px;height:2px;background:#d9faff;border-radius:5px}
.mobile-menu{
  position:fixed;right:5%;top:84px;z-index:30;width:220px;padding:12px;
  border:1px solid var(--line);border-radius:20px;background:rgba(3,24,33,.96);
  backdrop-filter:blur(20px);box-shadow:0 20px 70px rgba(0,0,0,.4);
  transform:translateY(-10px) scale(.97);opacity:0;pointer-events:none;transition:.22s;
}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{display:block;color:#cdebf1;text-decoration:none;padding:13px 15px;border-radius:12px}
.mobile-menu a:hover{background:rgba(61,223,255,.10);color:#fff}
main{width:min(960px,92%);margin:auto;padding:20px 0 70px}
.hero{text-align:center;padding:35px 0 30px}
.hero-logo{position:relative;width:min(350px,70vw);margin:0 auto 12px}
.hero-logo img{position:relative;width:100%;display:block;border-radius:26px;mix-blend-mode:screen;filter:drop-shadow(0 0 24px rgba(20,219,255,.28))}
.logo-glow{position:absolute;inset:15%;background:rgba(20,213,255,.2);filter:blur(50px);border-radius:50%}
.eyebrow{
  font-family:"Orbitron",sans-serif;font-weight:700;letter-spacing:5px;
  color:var(--cyan);font-size:15px;margin-top:8px
}
.thai-kicker{font-size:22px;color:#a6cbd4;margin-top:9px}
h1{font-family:"Orbitron",sans-serif;font-size:clamp(27px,5vw,46px);line-height:1.2;margin:22px 0 13px;letter-spacing:1px}
h1 span{color:#fff}
.hero-copy{font-size:clamp(16px,2.2vw,21px);line-height:1.8;color:#a9c8d0;margin:0 auto;max-width:800px}
.access-card{
  position:relative;margin:20px auto 0;padding:55px 30px 25px;
  max-width:760px;border:1px solid rgba(71,225,255,.28);
  border-radius:30px;background:
    linear-gradient(145deg,rgba(9,48,61,.91),rgba(4,25,34,.91));
  box-shadow:0 0 0 1px rgba(255,255,255,.015) inset,0 25px 90px rgba(0,0,0,.35),0 0 45px rgba(12,208,255,.06);
}
.card-corners:before,.card-corners:after{
  content:"";position:absolute;width:34px;height:34px;border-color:#ffc72f;border-style:solid;
}
.card-corners:before{left:21px;top:26px;border-width:3px 0 0 3px;border-radius:10px 0 0 0}
.card-corners:after{right:21px;top:26px;border-width:3px 3px 0 0;border-radius:0 10px 0 0}
.status-pill{
  position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:13px;white-space:nowrap;
  padding:13px 24px;border-radius:40px;border:1px solid rgba(255,196,48,.38);
  background:linear-gradient(180deg,#102f37,#0a242d);box-shadow:0 0 30px rgba(255,195,40,.08)
}
.status-dot{width:18px;height:18px;border-radius:50%;background:#ffc72f;box-shadow:0 0 14px #ffc72f}
.status-pill strong{font-family:"Orbitron";color:#ffc72f;letter-spacing:2px}
.status-pill i{width:1px;height:22px;background:#48636a}
.status-pill span:last-child{color:#9bb6bd}
.card-content{text-align:center}
.card-content h2{font-size:21px;line-height:1.8;font-weight:400;margin:10px auto 0;max-width:600px;color:#c3dce2}
.card-content h2 b{display:inline;color:#fff;font-weight:700}
.card-content>p{margin:3px 0 22px;color:#9cbcc5;font-size:18px}
button{font-family:inherit}
.primary-btn,.secondary-btn{
  width:100%;border-radius:20px;cursor:pointer;transition:.2s;
}
.primary-btn{
  border:1px solid rgba(255,255,255,.55);
  padding:19px 25px;font-size:21px;font-weight:700;color:#05202a;
  background:linear-gradient(110deg,#d9ffff 0%,#36d9e8 60%,#12b9d0 100%);
  box-shadow:0 8px 30px rgba(28,218,239,.18);display:flex;justify-content:center;gap:24px;align-items:center
}
.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.arrow{font-size:28px;font-weight:400}
.secondary-btn{
  margin-top:14px;padding:18px;border:1px solid rgba(127,190,203,.20);
  background:rgba(17,47,57,.75);color:#e6f8fb;font-size:19px;font-weight:600;
  display:flex;justify-content:center;align-items:center;gap:16px
}
.secondary-btn:hover{background:rgba(28,75,88,.9);border-color:rgba(71,225,255,.3)}
.icon{font-size:24px;color:#b9dce3}
.discord-note{margin:25px 0 2px!important;color:#6f9ca7!important;font-size:16px!important}
.discord-note a{color:#2be0f5;text-decoration:underline;text-underline-offset:3px}
.card-footer{
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(89,195,210,.08);
  display:flex;align-items:center;gap:15px;color:#6da7b3;font-family:"Orbitron";font-size:12px;letter-spacing:1px
}
.footer-brand b{color:#4be5f6}
.footer-code{opacity:.65}
.progress{margin-left:auto;display:flex;gap:7px}
.progress i{width:12px;height:12px;border-radius:4px;background:#17313a}
.progress i.active{background:#ffc72f;box-shadow:0 0 12px rgba(255,199,47,.35)}
.feature-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px
}
.feature-strip>div{
  padding:18px;border:1px solid rgba(78,215,236,.12);border-radius:18px;background:rgba(7,31,40,.58)
}
.feature-strip span{display:block;color:#3de5f7;font-family:"Orbitron";font-size:11px}
.feature-strip b{display:block;font-family:"Orbitron";font-size:14px;margin-top:5px}
.feature-strip small{color:#769ba5}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,8,13,.78);backdrop-filter:blur(8px)}
.modal-box{position:relative;z-index:1;width:min(600px,100%);max-height:80vh;overflow:auto;border:1px solid var(--line);border-radius:25px;background:#071f29;padding:30px;box-shadow:0 30px 100px #000}
.close{position:absolute;right:18px;top:14px;border:0;background:none;color:#bceaf1;font-size:35px;cursor:pointer}
.modal-box h3{font-size:27px;margin:5px 0 18px}
.modal-box p,.modal-box li{color:#a8cbd3;line-height:1.8}
@media(max-width:600px){
  .topbar{height:78px;padding:8px 5%}.brand img{width:76px;height:58px}.menu-btn{width:56px;height:56px}
  main{width:92%;padding-top:8px}.hero{padding-top:12px}
  .hero-logo{width:260px}.eyebrow{font-size:10px;letter-spacing:3px}.thai-kicker{font-size:18px}
  h1{font-size:25px;margin-top:16px}.hero-copy{font-size:15px;line-height:1.7}
  .access-card{padding:48px 18px 20px;border-radius:25px}.status-pill{gap:8px;padding:11px 15px;font-size:12px}
  .status-dot{width:13px;height:13px}.status-pill strong{font-size:11px;letter-spacing:1px}.status-pill i{height:17px}
  .card-content h2{font-size:17px;line-height:1.7}.card-content>p{font-size:15px}
  .primary-btn{font-size:18px;padding:17px}.secondary-btn{font-size:17px;padding:16px}
  .card-footer{flex-wrap:wrap}.footer-code{display:none}.progress{margin-left:auto}
  .feature-strip{grid-template-columns:1fr}.desktop-only{display:none}
}

/* Buddy Town server rules modal */
.rules-modal-head{padding-right:18px}
.rules-eyebrow{display:inline-block;color:#ffc72f;border:1px solid rgba(255,199,47,.35);background:rgba(255,199,47,.06);border-radius:14px;padding:8px 13px;font:700 11px "Orbitron";letter-spacing:2px;margin-bottom:10px}
.rules-modal-head h3{font-size:34px;margin:5px 0 4px}
.rules-modal-head>p{margin:0 0 14px;font-size:15px}
.rules-stats{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.rules-stats span{padding:9px 13px;border:1px solid rgba(64,239,255,.18);border-radius:30px;color:#71e9f5;background:rgba(16,64,75,.35);font-size:13px}
.rules-search{width:100%;padding:14px 16px;border-radius:15px;border:1px solid rgba(64,239,255,.22);background:rgba(3,24,33,.9);color:#eefcff;font:inherit;outline:none;margin:4px 0 16px}
.rules-search:focus{border-color:rgba(64,239,255,.55);box-shadow:0 0 20px rgba(64,239,255,.08)}
.rules-search::placeholder{color:#789ca5}
.rules-list{display:grid;gap:10px}
.rule-group{border:1px solid rgba(64,239,255,.16);border-radius:17px;background:rgba(10,43,54,.55);overflow:hidden}
.rule-group-head{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:17px 18px;border:0;border-bottom:1px solid transparent;background:transparent;color:#eafcff;font:600 18px "Kanit";cursor:pointer}
.rule-group-head small{color:#6e9ca7;font-size:13px;margin-left:5px}
.rule-chevron{color:#6fd4e1;font-size:23px;transition:.2s}
.rule-group.open .rule-chevron{transform:rotate(180deg)}
.rule-group.open .rule-group-head{border-bottom-color:rgba(64,239,255,.10);background:rgba(25,84,96,.20)}
.rule-items{display:none;padding:5px 18px 12px}
.rule-group.open .rule-items{display:block}
.rule-item{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid rgba(117,198,211,.07)}
.rule-item:last-child{border-bottom:0}
.rule-item>span{min-width:28px;color:#43e4f5;font:700 12px "Orbitron";padding-top:4px}
.rule-item p{margin:0;color:#b8d8df!important;font-size:14px;line-height:1.75}
.rules-notice{margin-top:16px;display:grid;gap:10px}
.rules-notice>div{padding:15px 17px;border-radius:15px;border-left:4px solid #ffc72f;background:rgba(255,199,47,.06)}
.rules-notice>div+div{border-left-color:#40efff;background:rgba(64,239,255,.05)}
.rules-notice b{font-size:16px;color:#f3fbfd}
.rules-notice p{margin:4px 0 0!important;font-size:13px!important}
@media(max-width:600px){
 .modal{padding:10px}.modal-box{max-height:88vh;padding:22px 16px;border-radius:20px}.rules-modal-head h3{font-size:29px}.rule-group-head{font-size:16px;padding:15px 13px}.rule-items{padding:4px 13px 9px}.rule-item{gap:10px}.rule-item p{font-size:13px;line-height:1.7}.rules-stats span{font-size:12px}.rules-notice p{font-size:12px!important}
}


/* Real rule search + highlight */
.rules-search-wrap{position:relative;display:flex;align-items:center;gap:8px;margin:4px 0 16px}
.rules-search-wrap .rules-search{margin:0;padding:15px 132px 15px 48px}
.rules-search-icon{position:absolute;left:17px;z-index:2;color:#79dce8;font-size:25px;line-height:1;pointer-events:none}
.rules-search-count{position:absolute;right:108px;z-index:2;min-width:42px;text-align:center;color:#8bb9c3;font:600 12px "Orbitron",sans-serif;pointer-events:none}
.rules-search-nav{position:absolute;z-index:2;width:48px;height:48px;border:1px solid rgba(64,239,255,.18);border-radius:14px;background:rgba(10,43,54,.85);color:#6fe7f4;font-size:24px;line-height:1;cursor:pointer;transition:.18s}
.rules-search-nav:hover:not(:disabled){border-color:rgba(64,239,255,.55);background:rgba(22,83,96,.95)}
.rules-search-nav:disabled{opacity:.35;cursor:default}
#rulesSearchUp{right:56px}
#rulesSearchDown{right:4px}
.rule-highlight{background:#40efff;color:#04202a;padding:1px 4px;border-radius:5px;box-shadow:0 0 10px rgba(64,239,255,.22);font-weight:700}
.rule-highlight.active{background:#ffc72f;color:#17200a;box-shadow:0 0 18px rgba(255,199,47,.55)}
@media(max-width:600px){
  .rules-search-wrap .rules-search{padding:13px 112px 13px 44px}
  .rules-search-icon{left:14px;font-size:22px}
  .rules-search-count{right:91px;min-width:34px;font-size:10px}
  .rules-search-nav{width:40px;height:42px;border-radius:12px;font-size:20px}
  #rulesSearchUp{right:49px}
  #rulesSearchDown{right:4px}
}

/* Editable rule penalty badge */
.rule-body{min-width:0;flex:1}
.rule-penalty{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:10px;padding:6px 15px;min-height:34px;
  border-radius:999px;font-size:13px;font-weight:700;line-height:1.2;
  background:rgba(255,199,47,.08);border:1px solid rgba(255,199,47,.42);
  color:#ffc72f;box-shadow:0 0 14px rgba(255,199,47,.06);
}
.rule-penalty:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;box-shadow:0 0 8px currentColor}
.rule-penalty.red{color:#ff5d67;border-color:rgba(255,93,103,.45);background:rgba(255,93,103,.08);box-shadow:0 0 14px rgba(255,93,103,.06)}
.rule-penalty.orange{color:#ff9f43;border-color:rgba(255,159,67,.45);background:rgba(255,159,67,.08);box-shadow:0 0 14px rgba(255,159,67,.06)}
.rule-penalty.warning{color:#9be15d;border-color:rgba(155,225,93,.4);background:rgba(155,225,93,.07);box-shadow:0 0 14px rgba(155,225,93,.05)}
.rule-penalty.green{color:#55e6a5;border-color:rgba(85,230,165,.4);background:rgba(85,230,165,.07)}
@media(max-width:600px){.rule-penalty{font-size:12px;padding:5px 12px;min-height:31px;margin-top:8px}.rule-penalty:before{width:6px;height:6px;margin-right:6px}}

/* Nested rule subgroups — editable from buddyTownRules.subgroups */
.rule-subgroup{margin:8px 0;border:1px solid rgba(64,239,255,.11);border-radius:14px;background:rgba(4,27,36,.45);overflow:hidden}
.rule-subgroup-head{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:14px 15px;border:0;background:rgba(8,47,59,.55);color:#e8fbff;font:600 16px "Kanit";cursor:pointer}
.rule-subgroup-head small{color:#6d9ca7;font-size:12px;margin-left:6px;font-weight:500}
.rule-sub-chevron{color:#66d8e5;font-size:20px;transition:.2s}
.rule-subgroup.open .rule-sub-chevron{transform:rotate(180deg)}
.rule-subgroup.open .rule-subgroup-head{background:rgba(26,91,103,.22);border-bottom:1px solid rgba(64,239,255,.10)}
.rule-subitems{display:none;padding:2px 14px 9px}
.rule-subgroup.open .rule-subitems{display:block}
.rule-fine{display:inline-flex;align-items:center;margin:7px 0 0 8px;padding:6px 12px;border-radius:999px;color:#ffd36b;background:rgba(255,199,47,.06);border:1px solid rgba(255,199,47,.25);font-size:12px;font-weight:700}
@media(max-width:600px){
  .rule-subgroup-head{font-size:15px;padding:13px 12px}.rule-subitems{padding:2px 10px 7px}.rule-fine{font-size:11px;padding:5px 10px;margin-left:5px}
}