/* Royal X Casino — self-hosted utilities (replaces Tailwind CDN) */
*,::before,::after{box-sizing:border-box;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}
body{margin:0;line-height:inherit}
img,svg{display:block;vertical-align:middle;max-width:100%;height:auto}
a{color:inherit;text-decoration:inherit}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
.scroll-smooth{scroll-behavior:smooth}

body{background-color:#0f1015;color:#f3f4f6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}

.gold-btn{
  background:linear-gradient(135deg,#FFB300 0%,#FF8F00 100%);
  box-shadow:0 4px 20px rgba(255,179,0,.3);
  transition:all .3s ease;
}
.gold-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 25px rgba(255,179,0,.5);
}
.premium-glass{
  background:linear-gradient(135deg,rgba(20,22,32,.7) 0%,rgba(10,11,16,.8) 100%);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,179,0,.15);
}
.content-card{background:#141620;border:1px solid rgba(255,255,255,.05)}
.premium-card{background:linear-gradient(145deg,#141620,#0c0e14);border:1px solid rgba(255,179,0,.2)}
.form-input{background:#1a1c26;border:1px solid #4b5563;color:#fff}
.form-input:focus{outline:2px solid #FFB300;outline-offset:1px}

/* Content links: underline so not color-only (a11y) */
.prose-link,.content-card a{
  color:#fbbf24;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}
.content-card a:hover{color:#fde68a}
.footer-link{
  color:#d1d5db;
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-link:hover{color:#fff}
.nav-toc-link{
  color:#e5e7eb;
  text-decoration:underline;
  text-underline-offset:2px;
}
.nav-toc-link:hover{color:#fff;background:rgba(255,255,255,.05);border-left-color:#f59e0b}

/* Layout */
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}
.inset-0{inset:0}.-inset-2{inset:-.5rem}
.top-0{top:0}.top-1{top:.25rem}.top-12{top:3rem}.top-24{top:6rem}
.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-16{left:4rem}
.right-0{right:0}.right-10{right:2.5rem}
.-right-12{right:-3rem}.-bottom-12{bottom:-3rem}
.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}
.-translate-x-1\/2{transform:translateX(-50%)}
.transform{transform:var(--tw-transform,none)}
.-rotate-45{transform:rotate(-45deg)}
.scale-110{transform:scale(1.1)}
.pointer-events-none{pointer-events:none}
.overflow-hidden{overflow:hidden}
.hidden{display:none}
.block{display:block}.inline-flex{display:inline-flex}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}
.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}
.gap-x-4{column-gap:1rem}.gap-y-6{row-gap:1.5rem}
.order-1{order:1}.order-2{order:2}
.space-x-1\.5>:not([hidden])~:not([hidden]){margin-left:.375rem}
.space-x-2>:not([hidden])~:not([hidden]){margin-left:.5rem}
.space-x-3>:not([hidden])~:not([hidden]){margin-left:.75rem}
.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem}
.space-y-12>:not([hidden])~:not([hidden]){margin-top:3rem}

/* Sizing */
.w-full{width:100%}.w-1\/4{width:25%}.w-3\/4{width:75%}
.w-2{width:.5rem}.w-3{width:.75rem}.w-8{width:2rem}.w-10{width:2.5rem}
.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}
.w-64{width:16rem}
.h-full{height:100%}.h-auto{height:auto}
.h-1{height:.25rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}
.h-8{height:2rem}.h-10{height:2.5rem}.h-20{height:5rem}
.h-28{height:7rem}.h-32{height:8rem}
.h-\[2px\]{height:2px}.h-\[3px\]{height:3px}
.h-\[420px\]{height:420px}
.min-h-screen{min-height:100vh}
.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* Spacing */
.m-0{margin:0}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}.mt-20{margin-top:5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}
.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}
.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-4{padding-top:1rem}.pt-12{padding-top:3rem}
.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}
.scroll-mt-24{scroll-margin-top:6rem}

/* Typography */
.text-left{text-align:left}.text-center{text-align:center}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}
.text-\[180px\]{font-size:180px;line-height:1}
.font-medium{font-weight:500}.font-semibold{font-weight:600}
.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}
.font-normal{font-weight:400}
.uppercase{text-transform:uppercase}.italic{font-style:italic}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}

/* Colors — contrast-safe on dark backgrounds */
.text-white{color:#fff}.text-black{color:#000}
.text-gray-100{color:#f3f4f6}.text-gray-200{color:#e5e7eb}
.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}
/* bumped from gray-500/600 for WCAG contrast on #0f1015 */
.text-gray-500,.text-muted{color:#9ca3af}
.text-gray-600{color:#9ca3af}
.text-amber-400{color:#fbbf24}.text-amber-500{color:#f59e0b}
.text-amber-500\/80{color:#fbbf24}
.text-emerald-200{color:#a7f3d0}.text-emerald-400{color:#34d399}.text-emerald-500{color:#10b981}
.text-red-200\/90{color:#fecaca}
/* was #01411C (fails contrast) — lighter Pakistan green */
.text-\[\#01411C\],.text-pk-green{color:#4ade80}
.text-\[\#FFB300\]{color:#FFB300}

.bg-white{background-color:#fff}.bg-white\/5{background-color:rgba(255,255,255,.05)}
.bg-black\/20{background-color:rgba(0,0,0,.2)}
.bg-black\/30{background-color:rgba(0,0,0,.3)}
.bg-black\/40{background-color:rgba(0,0,0,.4)}
.bg-gray-700{background-color:#374151}.bg-gray-900{background-color:#111827}
.bg-\[\#0b0c10\]{background-color:#0b0c10}
.bg-\[\#0f1015\]{background-color:#0f1015}
.bg-\[\#141620\]{background-color:#141620}
.bg-\[\#141620\]\/60{background-color:rgba(20,22,32,.6)}
.bg-\[\#01411C\]{background-color:#01411C}
.bg-\[\#01411C\]\/30{background-color:rgba(1,65,28,.3)}
.bg-\[\#FFB300\]{background-color:#FFB300}
.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}
.bg-emerald-500\/5{background-color:rgba(16,185,129,.05)}
.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}
.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}
.bg-emerald-600{background-color:#059669}
.bg-emerald-900\/20{background-color:rgba(6,78,59,.2)}
.bg-emerald-900\/30{background-color:rgba(6,78,59,.3)}
.bg-green-500{background-color:#22c55e}
.bg-yellow-500{background-color:#eab308}
.bg-blue-500{background-color:#3b82f6}
.bg-red-950\/20{background-color:rgba(69,10,10,.2)}

.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-white\/10{--tw-gradient-from:rgba(255,255,255,.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-\[\#0e271a\]\/40{--tw-gradient-from:rgba(14,39,26,.4);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-\[\#181a26\]{--tw-gradient-from:#181a26;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-amber-400{--tw-gradient-from:#fbbf24;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-emerald-600{--tw-gradient-from:#059669;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-emerald-600\/20{--tw-gradient-from:rgba(5,150,105,.2);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.via-\[\#0f1015\]{--tw-gradient-stops:var(--tw-gradient-from),#0f1015,var(--tw-gradient-to,transparent)}
.via-amber-500\/60{--tw-gradient-stops:var(--tw-gradient-from),rgba(245,158,11,.6),var(--tw-gradient-to,transparent)}
.via-yellow-300{--tw-gradient-stops:var(--tw-gradient-from),#fde047,var(--tw-gradient-to,transparent)}
.to-transparent{--tw-gradient-to:transparent}
.to-\[\#0f1015\]{--tw-gradient-to:#0f1015}
.to-amber-500{--tw-gradient-to:#f59e0b}
.to-amber-500\/20{--tw-gradient-to:rgba(245,158,11,.2)}
.to-emerald-700{--tw-gradient-to:#047857}

.border{border-width:1px}.border-4{border-width:4px}
.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}
.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}
.border-transparent{border-color:transparent}
.border-gray-800{border-color:#1f2937}
.border-gray-800\/60{border-color:rgba(31,41,55,.6)}
.border-gray-800\/80{border-color:rgba(31,41,55,.8)}
.border-gray-900{border-color:#111827}
.border-\[\#01411C\]{border-color:#01411C}
.border-\[\#01411C\]\/30{border-color:rgba(1,65,28,.3)}
.border-\[\#01411C\]\/40{border-color:rgba(1,65,28,.4)}
.border-amber-500\/20{border-color:rgba(245,158,11,.2)}
.border-amber-500\/30{border-color:rgba(245,158,11,.3)}
.border-emerald-500\/20{border-color:rgba(16,185,129,.2)}
.border-emerald-500\/30{border-color:rgba(16,185,129,.3)}
.border-emerald-500\/50{border-color:rgba(16,185,129,.5)}
.border-emerald-900\/50{border-color:rgba(6,78,59,.5)}
.border-red-500{border-color:#ef4444}
.border-t-amber-500{border-top-color:#f59e0b}

.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}
.rounded-\[38px\]{border-radius:38px}.rounded-\[40px\]{border-radius:40px}
.rounded-b-xl{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}

.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}

.opacity-0{opacity:0}.opacity-15{opacity:.15}.opacity-75{opacity:.75}
.blur-md{filter:blur(12px)}.blur-2xl{filter:blur(40px)}
.object-contain{object-fit:contain}.object-cover{object-fit:cover}
.mix-blend-normal{mix-blend-mode:normal}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}
.group:hover .group-hover\:opacity-100{opacity:1}
.hover\:bg-\[\#FF8F00\]:hover{background-color:#FF8F00}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.hover\:border-amber-500:hover{border-color:#f59e0b}
.hover\:from-emerald-500:hover{--tw-gradient-from:#10b981;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.hover\:opacity-90:hover{opacity:.9}
.hover\:text-white:hover{color:#fff}
.hover\:underline:hover{text-decoration:underline}

@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
.animate-bounce{animation:bounce 1s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-spin{animation:spin 1s linear infinite}

@media (min-width:768px){
  .md\:block{display:block}
  .md\:flex-row{flex-direction:row}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:gap-12{gap:3rem}
  .md\:order-1{order:1}.md\:order-2{order:2}
  .md\:justify-start{justify-content:flex-start}
  .md\:mx-0{margin-left:0;margin-right:0}
  .md\:text-left{text-align:left}
  .md\:text-base{font-size:1rem;line-height:1.5rem}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:p-10{padding:2.5rem}
  .md\:w-1\/3{width:33.333333%}
  .md\:w-16{width:4rem}.md\:w-32{width:8rem}.md\:w-72{width:18rem}
  .md\:h-32{height:8rem}.md\:h-\[480px\]{height:480px}
}
@media (min-width:1024px){
  .lg\:block{display:block}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1/span 1}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
}