/* GoldOSRS — OSRS Medieval Theme — Production CSS v2 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700;900&family=MedievalSharp&family=IM+Fell+English:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* OSRS Colour Palette */
  --gold:#FFD700;--gold-dark:#B8860B;--gold-light:#FFEA70;--gold-glow:rgba(255,215,0,0.18);
  --rs-brown:#3E2200;--rs-brown2:#5C3400;--rs-tan:#8B6914;
  --rs-border:#8B6914;--rs-border2:rgba(139,105,20,0.5);
  --bg:#0a0c10;--bg2:#0e1018;--bg-card:#111420;--bg-card-h:#161b2e;
  --bg-panel:#0d1018;--bg-glass:rgba(8,10,16,0.92);
  --text:#eef0f6;--text2:#9ca3b8;--text3:#606880;
  --border:rgba(139,105,20,0.2);--border-h:rgba(255,215,0,0.35);
  --border-med:rgba(139,105,20,0.4);
  --green:#10b981;--red:#ef4444;--blue:#3b82f6;
  --r:10px;--rl:16px;--rxl:20px;
  --ease:cubic-bezier(.4,0,.2,1);--easeOut:cubic-bezier(0,0,.2,1);--dur:.22s;
  --ff:'Cinzel Decorative','Cinzel',Georgia,serif;
  --fm:'Cinzel',Georgia,serif;
  --fb:'Inter',-apple-system,sans-serif;
  /* Medieval stone/wood texture overlays */
  --stone:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
  --wood:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(139,105,20,.03) 3px,rgba(139,105,20,.03) 5px);
}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:
    radial-gradient(ellipse 140% 60% at 50% 0%,rgba(255,215,0,.05) 0%,transparent 55%),
    radial-gradient(ellipse 80% 80% at 15% 100%,rgba(139,69,19,.04) 0%,transparent 50%),
    radial-gradient(ellipse 60% 70% at 85% 80%,rgba(255,165,0,.03) 0%,transparent 50%);
  background-attachment:fixed;
  cursor:url('images/cursor.svg') 6 2,crosshair;
}
/* Custom cursor */
.cursor-dot{position:fixed;width:6px;height:6px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:49998;transform:translate(-50%,-50%);transition:transform .1s,opacity .2s;box-shadow:0 0 8px var(--gold),0 0 16px rgba(255,215,0,.5),0 0 30px rgba(255,165,0,.3)}
.cursor-ring{position:fixed;width:32px;height:32px;border:1.5px solid rgba(255,215,0,.45);border-radius:50%;pointer-events:none;z-index:49997;transform:translate(-50%,-50%);transition:transform .15s var(--ease),width .2s,height .2s,opacity .2s}
.cursor-glow{position:fixed;width:700px;height:700px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,170,40,.12) 0%,rgba(255,150,30,.07) 15%,rgba(255,120,20,.04) 30%,rgba(255,100,10,.02) 45%,rgba(200,80,0,.008) 60%,transparent 75%);transform:translate(-50%,-50%);transition:opacity .4s;will-change:transform}

.cursor-ring.hovering{width:48px;height:48px;border-color:var(--gold);background:rgba(255,215,0,.04)}
.cursor-dot.clicking{transform:translate(-50%,-50%) scale(2.5);background:var(--gold-light)}

::selection{background:rgba(255,215,0,.25);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
a{color:var(--gold);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--gold-light)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rune-rain{display:none}}

/* ============================
   MEDIEVAL BORDER STYLES
   ============================ */
.medieval-box{
  background:var(--bg-card);
  border:2px solid var(--rs-border);
  border-radius:4px;
  box-shadow:
    inset 0 0 0 1px rgba(139,105,20,.15),
    0 4px 20px rgba(0,0,0,.5),
    0 0 40px rgba(255,215,0,.04);
  position:relative;
}
.medieval-box::before,.medieval-box::after{
  content:'';position:absolute;width:12px;height:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border-radius:50%;opacity:.7;
}
.medieval-box::before{top:-5px;left:-5px}
.medieval-box::after{bottom:-5px;right:-5px}

/* ============================
   RUNE RAIN
   ============================ */
.rune-rain{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;contain:strict}
.rune{position:absolute;top:-80px;font-size:2rem;opacity:0;animation:runeFall linear infinite;will-change:transform;filter:drop-shadow(0 0 6px rgba(255,215,0,.15));color:var(--gold);contain:layout style}
@keyframes runeFall{0%{transform:translate3d(0,-80px,0) rotate(0);opacity:0}5%{opacity:.08}85%{opacity:.08}100%{transform:translate3d(0,110vh,0) rotate(25deg);opacity:0}}
.rune:nth-child(1){left:3%;animation-duration:20s;animation-delay:0s;font-size:2.2rem}
.rune:nth-child(2){left:11%;animation-duration:24s;animation-delay:3s;font-size:1.8rem}
.rune:nth-child(3){left:21%;animation-duration:22s;animation-delay:7s;font-size:2.4rem}
.rune:nth-child(4){left:33%;animation-duration:26s;animation-delay:1s;font-size:2rem}
.rune:nth-child(5){left:43%;animation-duration:21s;animation-delay:9s;font-size:2.6rem}
.rune:nth-child(6){left:55%;animation-duration:23s;animation-delay:4s;font-size:1.8rem}
.rune:nth-child(7){left:66%;animation-duration:25s;animation-delay:11s;font-size:2.2rem}
.rune:nth-child(8){left:77%;animation-duration:19s;animation-delay:2s;font-size:2.4rem}
.rune:nth-child(9){left:87%;animation-duration:27s;animation-delay:8s;font-size:2rem}
.rune:nth-child(10){left:96%;animation-duration:22s;animation-delay:5s;font-size:1.8rem}
.rune:nth-child(11){left:7%;animation-duration:28s;animation-delay:13s;font-size:2.2rem}
.rune:nth-child(12){left:49%;animation-duration:24s;animation-delay:15s;font-size:2.6rem}

/* ============================
   PRELOADER
   ============================ */
.preloader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;transition:opacity .6s,visibility .6s}
.preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-coin{width:60px;height:60px;background:linear-gradient(135deg,var(--gold),#FFA500);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff);font-size:1.8rem;font-weight:700;color:var(--rs-brown);animation:coinP 1s ease-in-out infinite;box-shadow:0 0 50px rgba(255,215,0,.4)}
.preloader-text{margin-top:16px;color:var(--gold);font-family:var(--fm);font-size:.82rem;letter-spacing:4px;text-transform:uppercase;opacity:.8}
@keyframes coinP{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg);box-shadow:0 0 70px rgba(255,215,0,.6)}}

/* ============================
   SPARKS
   ============================ */
.spark-container{position:fixed;inset:0;pointer-events:none;z-index:5}
.ember{
  position:absolute;border-radius:50%;
  pointer-events:none;
  animation:emberFloat var(--ember-dur,2.5s) ease-out forwards;
  will-change:transform,opacity;
}
@keyframes emberFloat{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  10%{opacity:1}
  30%{opacity:.9;transform:translate(calc(var(--sx,0) * 0.2),calc(var(--sy,0) * 0.3)) scale(.9)}
  50%{opacity:.7;transform:translate(calc(var(--sx,0) * 0.45),calc(var(--sy,0) * 0.55)) scale(.7)}
  70%{opacity:.4;transform:translate(calc(var(--sx,0) * 0.7),calc(var(--sy,0) * 0.75)) scale(.5)}
  100%{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(.15)}
}

/* ============================
   NAVBAR
   ============================ */
/* Logo + brand name */

/* ============================
   BUTTONS
   ============================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:8px;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all var(--dur) var(--ease);
  border:none;text-decoration:none;min-height:46px;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--fm);letter-spacing:.5px;
  position:relative;overflow:hidden;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.15) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;
}
.btn:hover::before{opacity:1}
.btn-primary{background:linear-gradient(135deg,var(--gold) 0%,#F0A500 100%);color:var(--rs-brown);box-shadow:0 3px 16px rgba(255,215,0,.22),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(255,215,0,.38),inset 0 1px 0 rgba(255,255,255,.25);color:var(--rs-brown)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border-med)}
.btn-secondary:hover{border-color:var(--border-h);color:var(--gold);background:rgba(255,215,0,.05)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.2);border-color:var(--red)}
.btn-sm{padding:8px 16px;font-size:.8rem;min-height:36px}

/* ============================
   HERO
   ============================ */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 20px 80px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 55% at 50% 25%,rgba(255,215,0,.1) 0%,transparent 60%),radial-gradient(ellipse 70% 50% at 25% 75%,rgba(139,69,19,.06) 0%,transparent 55%);pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:820px;width:100%}
.hero-badge{display:inline-block;padding:8px 22px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.18);border-radius:30px;color:var(--gold);font-size:.8rem;font-weight:500;margin-bottom:24px;letter-spacing:1.5px;font-family:var(--fm);animation:fsu .8s var(--easeOut) .3s both}
.hero h1{font-family:var(--ff);font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:900;line-height:1.1;margin-bottom:12px;color:var(--gold);text-shadow:0 0 60px rgba(255,215,0,.3),0 0 120px rgba(255,215,0,.12),0 2px 8px rgba(0,0,0,.6);animation:fsu .8s var(--easeOut) .4s both}
.hero h1 .subtitle{display:block;font-size:clamp(.9rem,2vw,1.2rem);color:var(--text2);font-weight:400;margin-top:8px;text-shadow:none;font-family:var(--fb)}
.hero p{font-size:clamp(.9rem,1.6vw,1rem);color:var(--text2);max-width:580px;margin:0 auto 32px;line-height:1.75;animation:fsu .8s var(--easeOut) .5s both}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px;animation:fsu .8s var(--easeOut) .6s both}
.hero-stat{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--r);padding:18px 10px;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hero-stat:hover{border-color:var(--border-h);transform:translateY(-3px);box-shadow:0 8px 32px rgba(255,215,0,.1)}
.hero-stat .number{font-family:var(--ff);font-size:1.5rem;font-weight:700;color:var(--gold);display:block;text-shadow:0 0 20px rgba(255,215,0,.35)}
.hero-stat .label{font-size:.7rem;color:var(--text3);margin-top:4px;letter-spacing:.5px;text-transform:uppercase}
.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fsu .8s var(--easeOut) .7s both}
@keyframes fsu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ============================
   SECTIONS
   ============================ */
.section{position:relative;z-index:2;padding:80px 20px}
.section-inner{max-width:1280px;margin:0 auto}
.section-header{text-align:center;margin-bottom:52px}
.section-label{display:inline-block;color:var(--gold);font-size:.74rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;font-family:var(--fm)}
.section-title{font-family:var(--ff);font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;color:var(--text);margin-bottom:12px;text-shadow:0 0 30px rgba(255,215,0,.12)}
.section-desc{color:var(--text2);font-size:.93rem;max-width:540px;margin:0 auto}

/* ============================
   FEATURES
   ============================ */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.feature-card{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--r);padding:28px 18px;text-align:center;transition:all .32s var(--ease)}
.feature-card:hover{border-color:var(--border-h);transform:translateY(-4px);box-shadow:0 8px 40px rgba(255,215,0,.1)}
.feature-icon{font-size:2.2rem;margin-bottom:14px;display:block}
.feature-card h3{font-size:.95rem;font-weight:600;margin-bottom:6px;font-family:var(--fm);color:var(--gold)}
.feature-card p{font-size:.82rem;color:var(--text2);line-height:1.55}

/* ============================
   PRICES
   ============================ */
.price-tabs{display:flex;justify-content:center;gap:6px;margin-bottom:30px;flex-wrap:wrap}
.price-tab{padding:10px 24px;border-radius:30px;background:var(--bg-card);border:1px solid var(--border-med);color:var(--text2);cursor:pointer;font-size:.88rem;font-weight:500;transition:all var(--dur) var(--ease);min-height:44px;font-family:var(--fm);letter-spacing:.5px}
.price-tab.active,.price-tab:hover{background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.35);color:var(--gold)}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.price-panel{display:none}.price-panel.active{display:block}
.price-card{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:28px;position:relative;transition:all .32s var(--ease)}
.price-card:hover{border-color:var(--border-h);transform:translateY(-4px);box-shadow:0 8px 40px rgba(255,215,0,.1)}
.price-card.featured{border-color:rgba(255,215,0,.3);box-shadow:0 0 50px rgba(255,215,0,.07)}
.price-badge{position:absolute;top:-11px;right:20px;background:linear-gradient(135deg,var(--gold),#F0A500);color:var(--rs-brown);padding:4px 14px;border-radius:20px;font-size:.72rem;font-weight:700;font-family:var(--fm);letter-spacing:.5px}
.price-card-icon{font-size:2rem;margin-bottom:12px}
.price-card h3{font-size:1rem;font-weight:700;margin-bottom:3px;font-family:var(--fm);color:var(--gold)}
.price-card .game{font-size:.76rem;color:var(--text3);margin-bottom:14px;letter-spacing:.5px}
.price-amount{font-family:var(--ff);font-size:2rem;font-weight:700;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,.25)}
.price-amount .per{font-size:.8rem;color:var(--text2);font-weight:400;text-shadow:none;font-family:var(--fb)}
.price-card .rate-info{font-size:.73rem;color:var(--text3);margin:8px 0 18px}
.price-card .btn{width:100%;justify-content:center}

/* ============================
   SERVICES
   ============================ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.service-card{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:30px;transition:all .32s var(--ease)}
.service-card:hover{border-color:var(--border-h);transform:translateY(-4px);box-shadow:0 8px 40px rgba(255,215,0,.09)}
.service-card-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.service-card-header .emoji{font-size:1.6rem}
.service-card-header .tag{font-size:.68rem;background:rgba(255,215,0,.08);color:var(--gold);padding:3px 10px;border-radius:20px;font-weight:600;font-family:var(--fm)}
.service-card h3{font-size:1.1rem;font-weight:700;margin:10px 0 8px;font-family:var(--fm);color:var(--gold)}
.service-card p{font-size:.86rem;color:var(--text2);margin-bottom:14px;line-height:1.65}
.service-card ul{list-style:none;margin-bottom:18px}
.service-card ul li{padding:4px 0;font-size:.82rem;color:var(--text2)}
.service-card ul li::before{content:'⚔';color:var(--gold);margin-right:8px;font-size:.75rem}

/* ============================
   ORDER FORM
   ============================ */
.order-form{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:36px;max-width:720px;margin:0 auto;box-shadow:0 8px 48px rgba(0,0,0,.3)}
.order-form h3{font-family:var(--ff);font-size:1.2rem;color:var(--gold);margin-bottom:4px}
.order-form .form-subtitle{font-size:.78rem;color:var(--text3);margin-bottom:26px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.82rem;font-weight:500;color:var(--text2);margin-bottom:6px;font-family:var(--fm)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;background:var(--bg-panel);border:1px solid var(--border-med);border-radius:8px;color:var(--text);font-size:.9rem;font-family:var(--fb);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);min-height:46px;-webkit-appearance:none}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:rgba(255,215,0,.5);box-shadow:0 0 0 3px rgba(255,215,0,.07)}
.form-group textarea{min-height:100px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.payment-option{padding:16px;background:var(--bg-panel);border:2px solid var(--border-med);border-radius:10px;cursor:pointer;text-align:center;transition:all var(--dur) var(--ease);min-height:48px}
.payment-option:hover,.payment-option.active{border-color:var(--gold);background:rgba(255,215,0,.05)}
.payment-option .pay-icon{font-size:1.4rem;display:block;margin-bottom:5px}
.payment-option .pay-label{font-size:.84rem;font-weight:600;display:block;font-family:var(--fm)}
.payment-option .pay-desc{font-size:.7rem;color:var(--text3);margin-top:2px}
.promo-row{display:flex;gap:10px}
.promo-row input{flex:1}
.promo-row .btn{padding:12px 18px;flex-shrink:0}

/* ============================
   REVIEWS
   ============================ */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.review-card{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:26px;transition:all .32s var(--ease)}
.review-card:hover{border-color:var(--border-h);transform:translateY(-2px)}
.review-stars{color:var(--gold);font-size:1rem;margin-bottom:12px;letter-spacing:2px}
.review-text{font-size:.9rem;color:var(--text2);line-height:1.7;margin-bottom:16px;font-style:italic}
.review-author{font-weight:600;font-size:.88rem;font-family:var(--fm);color:var(--gold)}
.review-meta{font-size:.76rem;color:var(--text3);margin-top:3px}
.review-verified{color:var(--green);font-size:.75rem;margin-top:5px}

/* ============================
   LIVE CHAT
   ============================ */
.chat-widget{position:fixed;bottom:22px;right:22px;z-index:9000}
.chat-toggle{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#F0A500);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 26px rgba(255,215,0,.35);transition:all var(--dur) var(--ease);font-size:1.5rem;position:relative;-webkit-tap-highlight-color:transparent}
.chat-toggle:hover{transform:scale(1.1);box-shadow:0 8px 36px rgba(255,215,0,.45)}
.chat-toggle:active{transform:scale(.96)}
.chat-toggle .chat-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--green);border-radius:50%;border:2px solid var(--bg);animation:badgePulse 2s ease infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}
.chat-window{display:none;position:absolute;bottom:72px;right:0;width:380px;max-height:540px;background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;flex-direction:column}
.chat-window.open{display:flex;animation:chatUp .28s var(--easeOut)}
@keyframes chatUp{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.chat-header{background:linear-gradient(135deg,rgba(139,105,20,.2),rgba(255,165,0,.08));padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-med)}
.chat-header-info{display:flex;align-items:center;gap:10px}
.chat-agent-avatar{width:36px;height:36px;background:linear-gradient(135deg,var(--gold),#F0A500);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.chat-agent-name{font-weight:700;font-size:.88rem;font-family:var(--fm);color:var(--gold)}
.chat-agent-status{font-size:.7rem;color:var(--green)}
.chat-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.1rem;padding:6px;border-radius:6px;transition:all var(--dur) var(--ease);min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
.chat-close:hover{background:rgba(255,255,255,.06);color:var(--text)}
.chat-messages{flex:1;padding:14px;overflow-y:auto;min-height:280px;max-height:360px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.chat-msg{max-width:84%;padding:10px 14px;border-radius:14px;font-size:.85rem;line-height:1.55;word-break:break-word;animation:msgIn .22s var(--easeOut)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.agent{background:var(--bg-panel);border:1px solid var(--border-med);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:rgba(255,215,0,.09);border:1px solid rgba(255,215,0,.2);align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg.system-msg{background:rgba(139,105,20,.12);border:1px solid rgba(139,105,20,.25);align-self:center;border-radius:10px;font-size:.76rem;color:var(--gold);text-align:center;max-width:90%;padding:7px 12px}
.chat-input-area{padding:10px 14px;border-top:1px solid var(--border-med);display:flex;gap:8px;align-items:center}
.chat-input{flex:1;padding:10px 14px;background:var(--bg-panel);border:1px solid var(--border-med);border-radius:8px;color:var(--text);font-size:.85rem;font-family:var(--fb);min-height:40px;transition:border-color var(--dur) var(--ease)}
.chat-input:focus{outline:none;border-color:rgba(255,215,0,.4)}
.chat-send{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#F0A500);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--rs-brown);font-size:1rem;transition:all var(--dur) var(--ease);flex-shrink:0}
.chat-send:hover{background:var(--gold-light)}
.chat-send:active{transform:scale(.94)}
.chat-typing .typing-dots span{display:inline-block;animation:tBounce 1.2s ease-in-out infinite;font-size:1.3rem;letter-spacing:2px}
.chat-typing .typing-dots span:nth-child(2){animation-delay:.2s}
.chat-typing .typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tBounce{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* Chat notification bubble */
.chat-notify{position:absolute;bottom:72px;right:0;width:260px;background:var(--bg-card);border:1px solid var(--border-med);border-radius:14px;padding:12px 16px;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:chatNotifyIn .3s var(--easeOut);font-size:.82rem;color:var(--text2)}
.chat-notify.gone{display:none}
.chat-notify-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:.9rem;padding:2px}
@keyframes chatNotifyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================
   MODAL
   ============================ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);z-index:9500;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:36px;max-width:440px;width:100%;position:relative;animation:modalIn .28s var(--easeOut);box-shadow:0 20px 60px rgba(0,0,0,.5)}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text3);font-size:1.2rem;cursor:pointer;padding:6px;border-radius:6px;transition:all var(--dur) var(--ease)}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.07)}
.modal h2{font-family:var(--ff);color:var(--gold);font-size:1.3rem;margin-bottom:6px}
.modal>p{font-size:.85rem;color:var(--text2);margin-bottom:20px}
.modal .form-group{margin-bottom:14px}
.modal .btn{width:100%;justify-content:center;margin-top:8px}
.modal-switch{text-align:center;margin-top:14px;font-size:.84rem;color:var(--text3)}
.modal-switch a{color:var(--gold);font-weight:600}
/* Toast notification */
.toast{position:fixed;bottom:90px;right:22px;background:var(--bg-card);border:1px solid var(--border-med);border-radius:10px;padding:12px 18px;box-shadow:0 8px 32px rgba(0,0,0,.4);font-size:.85rem;color:var(--text2);z-index:9990;animation:toastIn .3s var(--easeOut);max-width:280px}
.toast.success{border-color:rgba(16,185,129,.4);color:var(--green)}
.toast.error{border-color:rgba(239,68,68,.4);color:var(--red)}
.toast.gone{opacity:0;transition:opacity .3s;pointer-events:none}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ============================
   GAMES
   ============================ */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.game-card{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:30px;text-align:center;transition:all .32s var(--ease);position:relative;overflow:hidden}
.game-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(255,215,0,.04) 0%,transparent 60%);pointer-events:none}
.game-card:hover{border-color:var(--border-h);transform:translateY(-5px);box-shadow:0 10px 50px rgba(255,215,0,.1)}
.game-card .game-icon{font-size:3.4rem;margin-bottom:14px;display:block;filter:drop-shadow(0 0 12px rgba(255,215,0,.2))}
.game-card h3{font-size:1.15rem;margin-bottom:8px;font-family:var(--ff);color:var(--gold)}
.game-card p{color:var(--text2);font-size:.86rem;line-height:1.65;margin-bottom:16px}
.game-card .game-odds{font-size:.76rem;color:var(--rs-tan);margin-bottom:10px;font-family:var(--fm)}
.game-card .game-minmax{font-size:.74rem;color:var(--text3);margin-bottom:18px}
/* Game play area */
.game-play-area{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--rxl);padding:24px;margin-top:24px;display:none}
.game-play-area.active{display:block;animation:fsu .3s var(--easeOut)}
.game-play-title{font-family:var(--ff);color:var(--gold);font-size:1.1rem;margin-bottom:16px}
.game-dice{font-size:4rem;display:inline-block;transition:transform .3s;filter:drop-shadow(0 0 10px rgba(255,215,0,.3))}
.game-result-display{font-family:var(--ff);font-size:1.8rem;margin:16px 0;min-height:2.5rem;text-align:center}
.game-result-display.win{color:var(--green);text-shadow:0 0 20px rgba(16,185,129,.4)}
.game-result-display.lose{color:var(--red)}
.game-play-area button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.game-bet-input{max-width:180px}
/* Balance bar */
.balance-bar{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.balance-bar .balance-amount{font-family:var(--ff);font-size:1.6rem;color:var(--gold);text-shadow:0 0 15px rgba(255,215,0,.3)}
.balance-bar .balance-label{font-size:.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-family:var(--fm)}
.no-balance-overlay{text-align:center;padding:48px 24px;background:var(--bg-card);border:2px dashed var(--border-med);border-radius:var(--rxl)}
.no-balance-overlay h3{font-family:var(--ff);color:var(--gold);margin-bottom:12px}
/* Game page layout */
.game-page-area{max-width:600px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:32px;box-shadow:0 8px 48px rgba(0,0,0,.3)}
.game-page-area h2{font-family:var(--ff);color:var(--gold);font-size:1.3rem;margin-bottom:8px;text-align:center}
.game-vs{font-size:1.5rem;color:var(--gold);font-family:var(--ff);text-align:center}
.card-display{display:inline-flex;align-items:center;justify-content:center;width:48px;height:64px;background:var(--bg-card);border:1.5px solid var(--border-med);border-radius:6px;font-size:.9rem;font-weight:700;font-family:var(--fm)}
.card-display.red{color:#ef4444}
.card-display.black{color:var(--text)}
.card-display.hidden{background:linear-gradient(135deg,var(--rs-brown),var(--rs-brown2));color:transparent;border-color:var(--gold-dark)}

/* ============================
   FAQ
   ============================ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:border-color var(--dur) var(--ease)}
.faq-item:hover,.faq-item.open{border-color:rgba(255,215,0,.3)}
.faq-question{width:100%;padding:16px 22px;background:none;border:none;color:var(--text);font-size:.92rem;font-weight:600;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);transition:color var(--dur) var(--ease);min-height:52px}
.faq-question:hover,.faq-item.open .faq-question{color:var(--gold)}
.faq-icon{transition:transform var(--dur) var(--ease);font-size:1.1rem;flex-shrink:0;margin-left:12px;color:var(--gold-dark)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{padding:0 22px;max-height:0;overflow:hidden;transition:max-height .35s var(--ease),padding .35s var(--ease)}
.faq-item.open .faq-answer{padding:0 22px 18px;max-height:600px}
.faq-answer p{font-size:.87rem;color:var(--text2);line-height:1.75}

/* ============================
   DASHBOARD
   ============================ */
.dash-page{padding:80px 20px 40px}
.dash-grid{display:grid;grid-template-columns:260px 1fr;gap:22px;max-width:1280px;margin:0 auto}
.dash-sidebar{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rl);padding:22px;height:fit-content;position:sticky;top:88px}
.dash-user{text-align:center;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.dash-avatar{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#F0A500);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;color:var(--rs-brown);font-family:var(--ff);box-shadow:0 0 20px rgba(255,215,0,.25)}
.dash-username{font-weight:700;font-size:1rem;margin-bottom:2px;font-family:var(--fm);color:var(--gold)}
.dash-email{font-size:.76rem;color:var(--text3)}
.dash-nav-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;color:var(--text2);font-size:.87rem;margin-bottom:3px;transition:all var(--dur) var(--ease);min-height:44px;font-family:var(--fm);border:1px solid transparent;text-decoration:none}
.dash-nav-link:hover,.dash-nav-link.active{background:rgba(255,215,0,.07);color:var(--gold);border-color:var(--border)}
.dash-main{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rl);padding:28px;min-height:500px}
.dash-panel{display:none;animation:fsu .3s var(--easeOut)}
.dash-panel.active{display:block}
.dash-panel-title{font-family:var(--ff);color:var(--gold);font-size:1.25rem;margin-bottom:20px}
.dash-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:26px}
.dash-stat{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);padding:20px;transition:border-color var(--dur) var(--ease)}
.dash-stat:hover{border-color:var(--border-h)}
.stat-label{font-size:.76rem;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--fm)}
.stat-value{font-size:1.6rem;font-weight:700;color:var(--gold);font-family:var(--ff);text-shadow:0 0 20px rgba(255,215,0,.2)}
.dash-table{width:100%;border-collapse:collapse}
.dash-table th,.dash-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:.84rem}
.dash-table th{color:var(--text3);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:1px;font-family:var(--fm)}
.dash-table td{color:var(--text2)}
.dash-table tr:hover td{background:rgba(255,215,0,.02)}
.dash-empty{text-align:center;padding:48px 20px;color:var(--text3);border:1px dashed var(--border-med);border-radius:var(--r);margin-top:16px}
.dash-empty-icon{font-size:2.5rem;margin-bottom:12px;display:block;opacity:.5}
.status-badge{padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;font-family:var(--fm)}
.status-pending{background:rgba(255,165,0,.12);color:#FFA500}
.status-completed{background:rgba(16,185,129,.12);color:var(--green)}
.status-active{background:rgba(59,130,246,.12);color:var(--blue)}
.status-vip{background:rgba(255,215,0,.12);color:var(--gold)}
.deposit-methods,.withdraw-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}

/* ============================
   ADMIN PANEL
   ============================ */
.admin-page{padding:80px 20px 40px}
.admin-grid{display:grid;grid-template-columns:240px 1fr;gap:22px;max-width:1400px;margin:0 auto}
.admin-sidebar{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rl);padding:18px;height:fit-content;position:sticky;top:88px}
.admin-logo{display:flex;align-items:center;gap:10px;padding:12px 8px;border-bottom:1px solid var(--border);margin-bottom:12px}
.admin-logo img{width:36px;height:36px}
.admin-logo span{font-family:var(--ff);color:var(--gold);font-size:.9rem;font-weight:700}
.admin-nav-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;color:var(--text2);font-size:.87rem;margin-bottom:3px;transition:all var(--dur) var(--ease);min-height:44px;font-family:var(--fm);border:1px solid transparent;text-decoration:none;cursor:pointer}
.admin-nav-link:hover,.admin-nav-link.active{background:rgba(255,215,0,.07);color:var(--gold);border-color:var(--border)}
.admin-nav-link.online{position:relative}
.admin-nav-link.online::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green)}
.admin-main{min-height:600px}
.admin-panel{display:none;animation:fsu .3s var(--easeOut)}
.admin-panel.active{display:block}
.admin-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.admin-panel-title{font-family:var(--ff);color:var(--gold);font-size:1.25rem}
.admin-card{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rl);padding:24px}
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:28px}
.admin-stat{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);padding:20px;transition:border-color var(--dur) var(--ease)}
.admin-stat:hover{border-color:var(--border-h)}
.admin-stat .stat-icon{font-size:1.4rem;margin-bottom:8px}
/* Admin chat */
.admin-chat-layout{display:grid;grid-template-columns:240px 1fr;gap:16px;height:580px}
.admin-chat-list{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);overflow-y:auto;display:flex;flex-direction:column}
.admin-chat-list-header{padding:12px 14px;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-family:var(--fm)}
.chat-user-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--dur) var(--ease);flex-shrink:0}
.chat-user-item:hover,.chat-user-item.active{background:rgba(255,215,0,.06)}
.chat-user-item.unread{background:rgba(255,215,0,.04);border-left:2px solid var(--gold)}
.chat-user-name{font-weight:600;font-size:.84rem;font-family:var(--fm);color:var(--text)}
.chat-user-preview{font-size:.72rem;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-user-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.chat-user-time{font-size:.68rem;color:var(--text3)}
.chat-unread-badge{background:var(--gold);color:var(--rs-brown);border-radius:50%;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700}
.admin-chat-window{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.admin-chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(139,105,20,.12),rgba(255,165,0,.04))}
.admin-chat-user{font-weight:700;font-size:.9rem;font-family:var(--fm);color:var(--gold)}
.admin-chat-order{font-size:.74rem;color:var(--text3)}
.admin-chat-messages{flex:1;padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.admin-chat-input-row{padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px}
.admin-chat-input{flex:1;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border-med);border-radius:8px;color:var(--text);font-size:.85rem;font-family:var(--fb);min-height:40px}
.admin-chat-input:focus{outline:none;border-color:rgba(255,215,0,.4)}
/* Quick reply btns */
.quick-replies{padding:8px 14px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);background:rgba(139,105,20,.04)}
.quick-reply{padding:5px 12px;border-radius:20px;background:var(--bg-card);border:1px solid var(--border-med);color:var(--text2);font-size:.75rem;cursor:pointer;transition:all var(--dur) var(--ease);font-family:var(--fm)}
.quick-reply:hover{border-color:var(--gold);color:var(--gold)}
/* Price management */
.price-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.price-edit-card{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);padding:20px}
.price-edit-card h4{font-family:var(--fm);color:var(--gold);font-size:.9rem;margin-bottom:14px}
/* Settings */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.settings-section{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);padding:20px}
.settings-section h4{font-family:var(--fm);color:var(--gold);font-size:.92rem;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
/* Toggle switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-label{font-size:.85rem;color:var(--text2)}
.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:24px;transition:background var(--dur) var(--ease);border:1px solid var(--border-med)}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:var(--text3);border-radius:50%;transition:transform var(--dur) var(--ease)}
.toggle-switch input:checked+.toggle-slider{background:rgba(16,185,129,.25);border-color:var(--green)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--green)}

/* ============================
   PAGE HERO
   ============================ */
.page-hero{padding:112px 20px 56px;text-align:center;position:relative;z-index:2}
.page-hero h1{font-family:var(--ff);font-size:clamp(1.8rem,4vw,2.8rem);color:var(--gold);margin-bottom:10px;text-shadow:0 0 40px rgba(255,215,0,.2)}
.page-hero p{color:var(--text2);max-width:560px;margin:0 auto;font-size:.95rem;line-height:1.7}

/* ============================
   MISC COMPONENTS
   ============================ */
.trustpilot-section{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:32px;text-align:center}
/* Divider */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-med),transparent);margin:0 auto;max-width:600px}
/* Order success */
.success-page{padding:120px 20px 80px;text-align:center;position:relative;z-index:2;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.success-icon{font-size:4rem;margin-bottom:20px;animation:successPop .6s var(--easeOut)}
@keyframes successPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.success-page h1{font-family:var(--ff);color:var(--gold);font-size:2rem;margin-bottom:10px}
.order-id-display{font-family:var(--fm);font-size:1.3rem;color:var(--gold);background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);padding:10px 26px;border-radius:10px;margin:16px 0 24px;display:inline-block}
/* Sell page */
.sell-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:36px}
/* Step boxes */
.games-how-it-works{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:36px}
.games-step{text-align:center;padding:22px 14px;background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--r);transition:border-color var(--dur) var(--ease)}
.games-step:hover{border-color:var(--border-h)}
.step-num{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#F0A500);color:var(--rs-brown);font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;font-family:var(--fm)}
.games-step h4{font-size:.9rem;margin-bottom:5px;font-family:var(--fm);color:var(--gold)}
.games-step p{font-size:.8rem;color:var(--text2)}
/* Ticker */
.game-results-ticker{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--rxl);padding:22px 26px}
.game-results-ticker h3{font-family:var(--ff);color:var(--gold);font-size:1rem;margin-bottom:14px}
.ticker-list{list-style:none}
.ticker-list li{padding:9px 0;border-bottom:1px solid var(--border);font-size:.83rem;color:var(--text2);display:flex;justify-content:space-between;align-items:center;gap:10px}
.ticker-list li:last-child{border-bottom:none}
.ticker-win{color:var(--green);font-weight:700}
.ticker-loss{color:var(--red);font-weight:700}
/* Notice bar */
.admin-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:var(--red);padding:5px 14px;border-radius:20px;font-size:.76rem;font-family:var(--fm);font-weight:600}

/* ============================
   SCROLLBAR
   ============================ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(139,105,20,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,215,0,.3)}
html{scrollbar-color:rgba(139,105,20,.3) var(--bg);scrollbar-width:thin}

/* ============================
   SCROLL ANIMATION
   ============================ */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .55s var(--easeOut),transform .55s var(--easeOut)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ============================
   FOOTER
   ============================ */
.footer{position:relative;z-index:2;background:var(--bg2);border-top:1px solid var(--border-med);padding:56px 20px 28px}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.footer-brand .footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.footer-brand .footer-logo img{height:40px;filter:drop-shadow(0 0 6px rgba(255,215,0,.25))}
.footer-brand .footer-logo .footer-brand-text{display:flex;flex-direction:column}
.footer-brand .footer-logo .footer-title{font-family:var(--ff);font-size:1rem;color:var(--gold);font-weight:900}
.footer-brand .footer-logo .footer-subtitle{font-family:var(--fm);font-size:.6rem;color:var(--gold-dark);letter-spacing:3px;text-transform:uppercase}
.footer-brand p{font-size:.85rem;color:var(--text2);line-height:1.7}
.footer-col h4{font-size:.85rem;font-weight:700;color:var(--gold);margin-bottom:14px;font-family:var(--fm);letter-spacing:.5px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:var(--text2);font-size:.83rem;transition:all var(--dur) var(--ease)}
.footer-col ul li a:hover{color:var(--gold);padding-left:4px}
.footer-bottom{border-top:1px solid var(--border);padding-top:22px;text-align:center}
.footer-copyright{font-size:.79rem;color:var(--text3)}
.footer-disclaimer{font-size:.69rem;color:var(--text3);margin-top:6px;opacity:.6}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .admin-grid,.dash-grid{grid-template-columns:1fr}
  .admin-sidebar,.dash-sidebar{position:static}
  .admin-chat-layout{grid-template-columns:1fr;height:auto}
  .admin-chat-list{max-height:220px;overflow-x:auto;flex-direction:row;align-items:stretch}
  .admin-chat-list-header{writing-mode:vertical-rl;transform:rotate(180deg);padding:14px 8px;font-size:.68rem;white-space:nowrap}
  .admin-chat-window{min-height:420px}
  .settings-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  
  .hero{padding:90px 16px 56px;min-height:auto}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero-stat .number{font-size:1.25rem}
  .hero-buttons{flex-direction:column;align-items:stretch}
  .hero-buttons .btn{justify-content:center}
  .section{padding:48px 16px}
  .features-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .form-row,.payment-options,.deposit-methods,.withdraw-methods{grid-template-columns:1fr}
  .order-form{padding:22px 16px}
  .price-grid,.services-grid,.reviews-grid,.games-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .chat-window{width:calc(100vw - 32px);right:-4px;bottom:70px;max-height:72vh}
  .page-hero{padding:90px 16px 42px}
  .modal{margin:14px;padding:24px}
  .admin-chat-layout{grid-template-columns:1fr;height:auto}
  .admin-chat-list{max-height:180px;flex-direction:row}
  .price-edit-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  html{font-size:15px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero{padding:80px 14px 44px}
  .games-how-it-works{grid-template-columns:1fr 1fr}
  .chat-toggle{width:54px;height:54px;font-size:1.3rem}
  .dash-stat-grid,.admin-stat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================
   TWISTED BOW CURSOR (desktop only)
   ============================ */
@media(pointer:fine){
  html{cursor:url('images/cursor.svg') 6 2,auto}
}
.cursor-dot,.cursor-ring,.cursor-glow{pointer-events:none}

/* ============================
   ============================ */

.page-hero{padding-top:120px}
.auth-page{padding-top:100px;min-height:100vh;display:flex;align-items:center}

/* ============================
   TABLE SCROLL
   ============================ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dash-table{min-width:600px}
.admin-card{overflow-x:auto}

/* ============================
   AUTH PAGES
   ============================ */
.auth-page-form{animation:fsu .6s var(--easeOut)}

/* ============================
   SERVICE DETAIL GRID
   ============================ */
@media(max-width:768px){
  .service-detail-grid{grid-template-columns:1fr!important}
  .deposit-methods,.withdraw-methods{grid-template-columns:1fr!important}
}

/* ============================
   ADMIN RING NOTIFICATION
   ============================ */
@keyframes adminRing{
  0%,20%{transform:rotate(0)}
  3%{transform:rotate(15deg)}
  6%{transform:rotate(-15deg)}
  9%{transform:rotate(10deg)}
  12%{transform:rotate(-10deg)}
  15%{transform:rotate(5deg)}
  18%{transform:rotate(-5deg)}
}
.admin-ring{animation:adminRing 2s ease-in-out infinite;display:inline-block;font-size:1.4rem}
.admin-ring-bar{position:fixed;top:70px;left:0;right:0;z-index:9998;background:rgba(255,215,0,.12);border-bottom:1px solid rgba(255,215,0,.3);padding:10px 20px;text-align:center;font-family:var(--fm);font-size:.88rem;color:var(--gold);display:none;animation:fsu .3s var(--easeOut)}
.admin-ring-bar.active{display:block}

/* ============================
   VISITOR LOG TABLE
   ============================ */
.log-table{font-size:.78rem}
.log-table td{padding:8px 10px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================
   REFERRAL SYSTEM
   ============================ */
.referral-box{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:var(--r);padding:20px;margin-bottom:16px}
.referral-code{font-family:var(--fm);font-size:1.3rem;color:var(--gold);background:var(--bg-card);border:2px dashed var(--border-med);border-radius:8px;padding:14px 20px;text-align:center;letter-spacing:3px;user-select:all;margin:12px 0}
.referral-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.referral-tier{background:var(--bg-card);border:1px solid var(--border-med);border-radius:var(--r);padding:16px;text-align:center;transition:border-color var(--dur) var(--ease)}
.referral-tier:hover{border-color:var(--border-h)}
.referral-tier .tier-name{font-family:var(--fm);font-size:.85rem;color:var(--gold);margin-bottom:6px}
.referral-tier .tier-reward{font-size:1.4rem;font-weight:700;color:var(--text);font-family:var(--ff)}
.referral-tier .tier-desc{font-size:.75rem;color:var(--text3);margin-top:4px}
@media(max-width:600px){.referral-tiers{grid-template-columns:1fr}}

/* ============================
   LOOT CHEST / RAFFLE
   ============================ */
.loot-chest{background:linear-gradient(135deg,rgba(139,105,20,.15),rgba(255,165,0,.08));border:2px solid var(--gold-dark);border-radius:var(--rxl);padding:32px;text-align:center;position:relative;overflow:hidden;cursor:pointer;transition:all .3s var(--ease)}
.loot-chest:hover{border-color:var(--gold);box-shadow:0 0 40px rgba(255,215,0,.15);transform:translateY(-3px)}
.loot-chest-icon{font-size:4rem;display:block;margin-bottom:12px;filter:drop-shadow(0 0 20px rgba(255,215,0,.4));animation:chestFloat 3s ease-in-out infinite}
@keyframes chestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.loot-chest-title{font-family:var(--ff);color:var(--gold);font-size:1.2rem;margin-bottom:6px}
.loot-chest-sub{font-size:.82rem;color:var(--text2)}
.loot-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);z-index:20000;display:none;align-items:center;justify-content:center;padding:20px}
.loot-modal.open{display:flex}
.loot-modal-content{background:var(--bg-card);border:2px solid var(--gold-dark);border-radius:var(--rxl);padding:32px;max-width:500px;width:100%;position:relative;animation:modalIn .3s var(--easeOut)}
.loot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
.loot-item{background:var(--bg-panel);border:1px solid var(--border-med);border-radius:8px;padding:12px 8px;text-align:center;transition:all .2s var(--ease);position:relative}
.loot-item:hover{border-color:var(--gold);background:rgba(255,215,0,.05)}
.loot-item .loot-icon{font-size:1.8rem;display:block;margin-bottom:4px}
.loot-item .loot-name{font-size:.68rem;color:var(--text2);font-family:var(--fm)}
.loot-item .loot-value{font-size:.65rem;color:var(--gold);font-family:var(--fm);margin-top:2px}
.loot-item.rare{border-color:rgba(160,32,240,.4);box-shadow:0 0 12px rgba(160,32,240,.15)}
.loot-item.legendary{border-color:rgba(255,215,0,.5);box-shadow:0 0 16px rgba(255,215,0,.2);animation:legendaryGlow 2s ease-in-out infinite}
@keyframes legendaryGlow{0%,100%{box-shadow:0 0 12px rgba(255,215,0,.15)}50%{box-shadow:0 0 24px rgba(255,215,0,.3)}}
@media(max-width:500px){.loot-grid{grid-template-columns:repeat(3,1fr)}}


/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — COMPLETE SYSTEM (self-contained, no dependencies)
   ═══════════════════════════════════════════════════════════════ */

/* --- TOP BAR --- */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50000;
  background: rgba(8,10,16,0.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(139,105,20,0.4);
  transition: box-shadow .22s ease;
}
#site-nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.5), 0 1px 0 rgba(139,105,20,.3); }
#site-nav .nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; gap: 16px;
}

/* --- LOGO --- */
#site-nav .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
#site-nav .nav-logo img { height: 44px; width: 44px; filter: drop-shadow(0 0 8px rgba(255,215,0,.4)); transition: transform .2s ease; }
#site-nav .nav-logo:hover img { transform: scale(1.06) rotate(-2deg); }
#site-nav .nav-logo-text { font-family: var(--ff); font-size: 1.1rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px rgba(255,215,0,.4); line-height: 1; letter-spacing: 1px; }
#site-nav .nav-logo-text span { display: block; font-size: .6rem; color: var(--gold-dark); letter-spacing: 3px; text-transform: uppercase; font-family: var(--fm); font-weight: 600; }

/* --- DESKTOP LINKS --- */
#site-nav .desk-links { display: flex; gap: 2px; list-style: none; flex: 1; justify-content: center; margin: 0; padding: 0; }
#site-nav .desk-links a {
  color: var(--text2); font-size: .86rem; font-weight: 500; padding: 8px 12px;
  border-radius: 8px; text-decoration: none; font-family: var(--fm); letter-spacing: .5px;
  transition: color .2s ease, background .2s ease; position: relative;
}
#site-nav .desk-links a:hover { color: var(--gold); background: rgba(255,215,0,.06); }
#site-nav .desk-links a.active { color: var(--gold); }
#site-nav .desk-links a.active::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px;
}

/* --- AUTH BUTTONS (desktop) --- */
#site-nav .desk-auth { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#site-nav .da-login, #site-nav .da-register, #site-nav .da-dash {
  padding: 8px 18px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  text-decoration: none; min-height: 38px; display: inline-flex; align-items: center;
  font-family: var(--fm); letter-spacing: .5px; border: none; transition: all .2s ease;
}
#site-nav .da-login { color: var(--text2); background: transparent; border: 1px solid rgba(139,105,20,.4); }
#site-nav .da-login:hover { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.05); }
#site-nav .da-register { color: #3E2200; background: linear-gradient(135deg, #FFD700, #FFA500); box-shadow: 0 2px 12px rgba(255,215,0,.25); }
#site-nav .da-register:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(255,215,0,.35); }
#site-nav .da-dash { color: var(--gold); background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.25); display: none; }
#site-nav .da-dash:hover { background: rgba(255,215,0,.16); }
body.logged-in #site-nav .da-login, body.logged-in #site-nav .da-register { display: none !important; }
body.logged-in #site-nav .da-dash { display: inline-flex !important; }

/* --- HAMBURGER BUTTON --- */
#ham-btn {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 12px; background: none; border: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 48px; min-height: 48px; align-items: center; justify-content: center;
  z-index: 50001; position: relative;
}
#ham-btn span { width: 24px; height: 2px; background: #eef0f6; display: block; border-radius: 2px; transition: all .25s ease; }
#ham-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#ham-btn.open span:nth-child(2) { opacity: 0; }
#ham-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- MOBILE MENU PANEL --- */
#mob-menu {
  position: fixed; top: 70px; left: 0; right: 0; bottom: 0;
  background: rgba(8,10,16,.98); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  padding: 16px; z-index: 49999; overflow-y: auto;
  display: none;
}
#mob-menu.open { display: block; }
#mob-menu a.mob-link {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  color: #9ca3b8; font-size: .98rem; font-family: var(--fm);
  border-radius: 10px; text-decoration: none; min-height: 52px;
  border: 1px solid transparent; transition: all .2s ease;
}
#mob-menu a.mob-link:hover, #mob-menu a.mob-link.active { background: rgba(255,215,0,.06); color: #FFD700; border-color: rgba(139,105,20,.2); }
#mob-menu .mob-divider { height: 1px; background: rgba(139,105,20,.2); margin: 12px 0; }
#mob-menu .mob-auth { display: flex; gap: 10px; padding: 4px 0; }
#mob-menu .mob-btn {
  flex: 1; text-align: center; padding: 14px; border-radius: 10px;
  font-size: .9rem; font-weight: 600; font-family: var(--fm);
  text-decoration: none; display: flex; align-items: center; justify-content: center; min-height: 48px;
  transition: all .2s ease;
}
#mob-menu .mob-btn-outline { background: #111420; border: 1px solid rgba(139,105,20,.4); color: #9ca3b8; }
#mob-menu .mob-btn-outline:hover { border-color: #FFD700; color: #FFD700; }
#mob-menu .mob-btn-gold { background: linear-gradient(135deg, #FFD700, #FFA500); color: #3E2200; border: none; }
#mob-menu .mob-btn-red { background: #111420; border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
#mob-menu .mob-guest { display: flex; }
#mob-menu .mob-logged { display: none; }
body.logged-in #mob-menu .mob-guest { display: none !important; }
body.logged-in #mob-menu .mob-logged { display: flex !important; }

/* --- MOBILE BREAKPOINT --- */
@media (max-width: 768px) {
  #site-nav .desk-links { display: none !important; }
  #site-nav .desk-auth { display: none !important; }
  #ham-btn { display: flex !important; }
  #site-nav .nav-inner { height: 64px; padding: 0 16px; }
  #site-nav .nav-logo img { height: 38px; width: 38px; }
  #site-nav .nav-logo-text { font-size: .9rem; }
  #mob-menu { top: 64px; }
  .cursor-dot, .cursor-ring, .cursor-glow { display: none !important; }
}
@media print {
  #site-nav, #mob-menu, .chat-widget, .rune-rain, .preloader { display: none !important; }
}