/* ==========================================================
   COLOSSUS CASINO — style.css
   Dark bronze / gold Roman-themed layout, mobile-first-safe
   ========================================================== */

:root{
  --bg: #14100c;
  --bg-panel: #1f1810;
  --bg-panel-2: #2a2013;
  --gold: #c9a04a;
  --gold-light: #e8c877;
  --text: #ede4d3;
  --text-dim: #b3a68f;
  --green: #4caf50;
  --green-dark: #3a8c3e;
  --radius: 8px;
  --sidebar-w: 220px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; overflow-x: hidden; }
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.4;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0 0 .5em; font-family: Georgia, "Times New Roman", serif; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  padding:10px 22px;
  border-radius: 4px;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.03em;
  text-align:center;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform .1s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.1); }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  color:#fff;
  border-color: rgba(255,255,255,.15);
}
.btn-ghost{
  background: transparent;
  color: var(--gold-light);
  border-color: var(--gold);
}
.btn-lg{ padding:14px 32px; font-size:1.05rem; }

/* ---------- STONE BUTTONS (header Log In / Register) ---------- */
.btn-stone{
  display:inline-block;
  padding:10px 20px;
  background: linear-gradient(180deg, #3a2c17 0%, #1c140b 100%);
  border:1px solid rgba(201,160,74,.4);
  border-radius:4px;
  color: var(--gold-light);
  font-weight:700;
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-stone:hover{ border-color: var(--gold); color:#fff; }
.btn-stone--accent{
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, #8a6a26);
  border-color: var(--gold);
  color:#fff;
}

/* ---------- RIBBON BUTTONS (Join Now / Play Now / Shop Now) ---------- */
.btn-ribbon{
  position:relative;
  display:inline-block;
  padding:12px 30px;
  color:#fff;
  font-weight:800;
  text-transform:uppercase;
  font-size:.9rem;
  letter-spacing:.04em;
  text-align:center;
  background: linear-gradient(180deg,#7bc94e 0%, #2f7a2f 100%);
  clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  transition: filter .15s ease;
}
.btn-ribbon::before{
  content:"";
  position:absolute;
  inset:-3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, #8a6a26);
  clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%);
  z-index:-1;
}
.btn-ribbon:hover{ filter:brightness(1.1); }
.btn-ribbon:active{ filter:brightness(.95); }
.btn-ribbon--lg{ padding:16px 46px; font-size:1.1rem; }

/* ---------- LANGUAGE SWITCHER ---------- */
.lang-switch{
  display:flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700;
  margin-left: auto;
}
.lang-switch a{
  padding:4px 8px;
  border-radius:4px;
  color: var(--text-dim);
}
.lang-switch a:hover{ color: var(--gold-light); }
.lang-switch a.is-active{
  color:#fff;
  background: rgba(201,160,74,.22);
}
.lang-sep{ color: rgba(201,160,74,.4); }

/* Mobile-only language switcher, pinned to the bottom of the sidebar drawer */
.sidebar-lang-wrap{ display:none; }
.sidebar-lang{
  display:flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:700;
}
.sidebar-lang a{ padding:5px 10px; border-radius:4px; color: var(--text-dim); }
.sidebar-lang a:hover{ color: var(--gold-light); }
.sidebar-lang a.is-active{ color:#fff; background: rgba(201,160,74,.22); }
.sidebar-footer-mobile{ display:none; }

/* ---------- HEADER ---------- */
.site-header{
  display:flex;
  flex-wrap: wrap;
  row-gap: 6px;
  align-items:center;
  justify-content: flex-start;
  gap:16px;
  padding:12px 20px;
  background: var(--bg-panel);
  border-bottom: 1px solid rgba(201,160,74,.25);
  position: sticky;
  top:0;
  z-index: 50;
}
.header-actions{ order: 4; flex:0 0 auto; }
.lang-switch{ order: 3; margin-left:auto; margin-right: 12px; }
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:none; border:1px solid var(--gold);
  border-radius:4px;
  cursor:pointer;
}
.burger span{ display:block; width:18px; height:2px; margin:0 auto; background:var(--gold-light); }

.logo{
  display:flex; align-items:center; gap:8px;
  font-family: Georgia, serif;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.08em;
  color: var(--gold-light);
  white-space:nowrap;
}
.logo img{ height:32px; width:auto; max-width:170px; object-fit:contain; flex-shrink:0; }

.header-search{ flex:1; max-width:420px; }
.header-search input{
  width:100%;
  padding:9px 14px;
  border-radius: 20px;
  border:1px solid rgba(201,160,74,.35);
  background: var(--bg-panel-2);
  color: var(--text);
  font-size:.85rem;
}
.header-actions{ display:flex; gap:10px; }

/* ---------- LAYOUT / SIDEBAR ---------- */
.layout{ display:flex; }

.sidebar{
  display:flex;
  flex-direction:column;
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--bg-panel);
  border-right: 1px solid rgba(201,160,74,.15);
  padding: 16px 0;
  min-height: calc(100vh - 60px);
}
.side-link{
  display:flex; align-items:center; gap:12px;
  margin: 4px 12px;
  padding:11px 16px;
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  color: var(--text-dim);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
  border:1px solid rgba(201,160,74,.15);
  border-radius:6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.side-link svg{ width:20px; height:20px; flex-shrink:0; }
.side-link:hover{ color: var(--gold-light); border-color: rgba(201,160,74,.4); background: linear-gradient(180deg,#2c2113,#1a130b); }
.side-link.active{
  color:#fff;
  background: linear-gradient(180deg,#4a3a1f,#241a0d);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(201,160,74,.2);
}

.sidebar-overlay{
  display:none;
  position: fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 40;
}

.main{ flex:1; min-width:0; padding: 20px; }

.content-panel{
  width: 100%;
  max-width: 1240px;
  margin: 28px auto 32px;
  padding: 28px 38px 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0,0,0,.18);
  direction: ltr;
}
.content-panel h1,
.content-panel h2,
.content-panel h3,
.content-panel p,
.content-panel li,
.content-panel .faq-question,
.content-panel .faq-answer{
  direction: ltr;
}
.content-panel h1,
.content-panel h2,
.content-panel h3{
  text-align: left;
  color: #f8e2ad;
}
.content-panel h1{ font-size: 2.2rem; margin-bottom: 1rem; }
main .content-panel h2{ font-size: 1.6rem; }
.content-panel p{ color: #e7dcc4; font-size: 1.12rem; line-height: 1.85; margin: 0 0 1.3rem; }
.content-panel p a,
.content-panel li a{
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.content-panel p a:hover,
.content-panel li a:hover{ color: #fff; }
.content-img{
  width: 100%;
  max-width: 640px;
  border-radius: 20px;
  margin: 0 auto 1.3rem;
  display: block;
}
.content-panel ul,
.content-panel ol{
  margin: 1rem 0 1.4rem 1.4rem;
  padding-left: 1.15rem;
  color: var(--text-dim);
  font-size: 1.12rem;
}
.content-panel ul li,
.content-panel ol li{
  margin-bottom: .85rem;
  line-height: 1.9;
}
.content-panel ul li::marker,
.content-panel ol li::marker{
  color: var(--gold-light);
}
.data-table{
  width:100%;
  border-collapse:collapse;
  margin: 1.8rem 0 2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow:hidden;
  direction: ltr;
}
.data-table thead{
  background: rgba(201,160,74,.14);
}
.data-table th,
.data-table td{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
}
.data-table th{
  color: #fff;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.data-table td{
  color: var(--text-dim);
}
.data-table tbody tr:nth-child(even){ background: rgba(255,255,255,.03); }
.data-table tbody tr:last-child td{ border-bottom:none; }
.faq{ margin-top: 2.8rem; }
.faq h2{ font-size:1.6rem; color: #f8e2ad; margin-bottom: 1.2rem; text-align:left; }
.faq-item{
  border:1px solid rgba(201,160,74,.16);
  border-radius: 16px;
  overflow:hidden;
  margin-bottom: 14px;
  background: rgba(255,255,255,.04);
}
.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(201,160,74,.08);
  color:#fff;
  font-size:1rem;
  font-weight:700;
  border:none;
  cursor:pointer;
  text-align:left;
}
.faq-question:hover{ background: rgba(201,160,74,.16); }
.faq-question::after{
  content: '+';
  font-size: 1.2rem;
  color: var(--gold-light);
  transition: transform .2s ease;
}
.faq-question[aria-expanded='true']::after{ content: '−'; }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .28s ease, padding .28s ease;
  padding: 0 20px;
}
.faq-answer.open{
  max-height: 640px;
  padding: 16px 20px 18px;
}
.faq-answer p{
  margin:0;
  color: var(--text-dim);
  line-height:1.85;
  text-align:left;
}
.faq-answer a{ color: var(--gold-light); }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  border-radius: var(--radius);
  min-height: 320px;
  background-size: cover;
  background-position: center;
  background-color: #2a1c10;
  background-image: linear-gradient(120deg, rgba(20,16,12,.9) 20%, rgba(20,16,12,.3) 70%), var(--hero-img, none);
  display:flex; align-items:center;
  padding: 30px 40px;
  overflow:hidden;
}
.hero-inner{ max-width: 480px; }
.hero-badge{
  display:inline-block;
  background: var(--gold);
  color:#1a1305;
  font-size:.75rem;
  font-weight:700;
  padding:4px 12px;
  border-radius: 3px;
  margin-bottom: 12px;
  letter-spacing:.05em;
}
.hero h1{ font-size:2rem; color:#fff; margin-bottom:20px; }
.hero-dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
}
.dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.3); }
.dot.active{ background: var(--gold); }

/* ---------- PILL ROW ---------- */
.pill-row{
  display:flex; gap:10px; overflow-x:auto;
  padding: 18px 2px;
  scrollbar-width: none;
}
.pill-row::-webkit-scrollbar{ display:none; }
.pill{
  flex-shrink:0;
  padding:9px 16px;
  background: linear-gradient(180deg,#2c2113,#170f08);
  border:1px solid rgba(201,160,74,.3);
  border-radius: 6px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color: var(--text-dim);
  white-space:nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.5);
  transition: color .15s ease, border-color .15s ease;
}
.pill:hover{ color: var(--gold-light); border-color: var(--gold); }

/* ---------- GAME SECTIONS ---------- */
.game-section{ margin: 30px 0; scroll-margin-top: 80px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom: 14px;
}
.section-head h2{ font-size:1.2rem; color: var(--gold-light); }
.see-all{ font-size:.82rem; color: var(--text-dim); }
.see-all:hover{ color: var(--gold-light); }

.game-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.game-card{
  display:flex; flex-direction:column; gap:6px;
  background: var(--bg-panel-2);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(201,160,74,.1);
}
.game-card img{
  width:100%; aspect-ratio: 3/2; object-fit: cover;
  background: linear-gradient(135deg, #3a2c17, #1f1810);
}
.game-card span{ padding: 0 8px 8px; font-size:.8rem; color: var(--text-dim); }
.game-card:hover{ border-color: var(--gold); }
.game-card.live img{ aspect-ratio: 4/3; }
.grid-cards-only .game-card img{ aspect-ratio: 3/2; }

/* Hover "play" overlay on the thumbnail */
.thumb{ position:relative; display:block; }
.thumb::after{
  content:"";
  position:absolute; inset:0;
  background-color: rgba(20,16,12,.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='25' fill='rgba(20,16,12,.55)' stroke='%23c9a04a' stroke-width='2'/%3E%3Cpolygon points='26,20 46,32 26,44' fill='%23f2dfa6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:52px 52px;
  opacity:0;
  transform: scale(.8);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.game-card:hover .thumb::after{ opacity:1; transform:scale(1); }

.sport-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}
.sport-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background: var(--bg-panel-2);
  border-radius: var(--radius);
  padding: 20px 10px;
  border: 1px solid rgba(201,160,74,.1);
  text-align:center;
  font-size:.82rem;
  color: var(--text-dim);
}
.sport-card svg{ width:32px; height:32px; }
.sport-card:hover{ border-color: var(--gold); color: var(--gold-light); }

/* ---------- PROMO BANNERS ---------- */
.promo-banner{
  margin: 34px 0;
  border-radius: var(--radius);
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-color: #241a10;
  background-image: linear-gradient(90deg, rgba(20,16,12,.92) 0%, rgba(20,16,12,.65) 40%, rgba(20,16,12,.15) 75%), var(--promo-img, none);
  display:flex; align-items:center; justify-content:flex-start;
  padding: 30px 40px;
}
.promo-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; text-align:left; }
.promo-inner h3{ color:#fff; font-size:1.4rem; max-width: 420px; margin:0; }

/* ---------- ABOUT ---------- */
.about-text{
  margin: 30px 0 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(201,160,74,.15);
  font-size:.85rem;
  color: var(--text-dim);
}
.about-text h2{ font-size:1rem; color: var(--gold-light); }
.show-more{ color: var(--gold); font-size:.82rem; }

/* ---------- FOOTER ---------- */
.site-footer{
  background: var(--bg-panel);
  border-top: 1px solid rgba(201,160,74,.2);
  padding: 20px;
  margin-top: 20px;
}
.footer-bar{ display:flex; justify-content:center; gap:12px; margin-bottom: 18px; }
.footer-bar a{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid rgba(201,160,74,.3);
  border-radius: 20px;
  font-size:.82rem;
  color: var(--text-dim);
}
.footer-bar a svg{ width:16px; height:16px; }
.footer-bar a:hover{ color: var(--gold-light); border-color: var(--gold); }
.footer-columns{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
  justify-content:center;
  gap: 24px;
  border-top: 1px solid rgba(201,160,74,.1);
  padding-top: 20px;
}
.footer-col-title{
  margin:0 0 10px;
  padding-bottom: 8px;
  font-size:.85rem;
  font-weight:700;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(201,160,74,.15);
}
.footer-col-title--spaced{ margin-top: 22px; }
.footer-links{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.footer-links a{
  font-size:.78rem;
  color: var(--text-dim);
}
.footer-links a:hover{ color: var(--gold-light); }

.footer-payments{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(201,160,74,.1);
}
.pay-icon{
  display:flex; align-items:center; justify-content:center;
  height:26px; padding:0 10px;
  border-radius:4px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  color:#1a1305;
  background: linear-gradient(180deg,#e8c877,#c9a04a);
}
.pay-icon img{ height:16px; width:auto; max-width:48px; object-fit:contain; }
.pay-icon.pay-generic{
  width:26px; padding:0;
  background: linear-gradient(180deg,#3a2c17,#1c140b);
  color: var(--gold-light);
  border:1px solid rgba(201,160,74,.4);
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pay-icon.pay-generic:hover, .pay-icon.pay-generic:active{ border-color: var(--gold); color:#fff; }
.pay-more{
  display:flex; align-items:center; gap:4px;
  margin-left:6px;
  font-size:.78rem;
  color: var(--text-dim);
}
.pay-more svg{ width:14px; height:14px; }
.pay-more:hover{ color: var(--gold-light); }

.footer-legal{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(201,160,74,.1);
  font-size:.75rem;
  color: var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.age-badge{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-weight:700;
  font-size:.75rem;
}
.footer-legal a{ color: var(--gold); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 900px){
  .burger{ display:flex; }
  .header-search{ display:none; }
  .lang-switch{ display:none; }
  .sidebar-footer-mobile{ display:flex; justify-content:space-between; padding: 18px 20px; gap:10px; }
  .sidebar-footer-mobile .btn-stone{ width: calc(50% - 5px); text-align:center; }
  .footer-columns{ grid-template-columns: repeat(3, 1fr); }
  .sidebar-lang-wrap{
    display:flex; justify-content:center;
    margin-top:auto;
    padding-top: 18px;
    margin-left: 12px; margin-right: 12px;
    border-top: 1px solid rgba(201,160,74,.15);
  }

  .sidebar{
    position: fixed;
    top: 0; left:0; bottom:0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 55;
    width: 240px;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-overlay.open{ display:block; }

  .hero h1{ font-size:1.5rem; }
  .hero{ min-height: 220px; padding: 20px; }

  .promo-banner{ padding: 24px 20px; min-height:180px; }
  .promo-inner h3{ font-size:1.15rem; max-width: 260px; }

  .game-grid{ grid-template-columns: repeat(3, 1fr); }
  .main{ padding: 14px; }
}

@media (max-width: 560px){
  .site-header{ padding:10px 12px; gap:8px; flex-wrap: nowrap; justify-content: space-between; }
  .logo{ font-size:1.05rem; }
  .logo img{ height:26px; }
  .btn-stone{ padding:8px 12px; font-size:.72rem; }
  .header-actions{ order: 4; margin-left:auto; justify-content:flex-end; width:auto; }
  .lang-switch{ font-size:.72rem; margin-left:0; }

  .hero h1{ font-size:1.2rem; }
  .hero-badge{ font-size:.68rem; }
  .btn-ribbon--lg{ padding:12px 26px; font-size:.9rem; }
  .btn-ribbon{ padding:10px 20px; font-size:.78rem; }

  .game-grid{ grid-template-columns: repeat(2, 1fr); }
  .sport-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-columns{ grid-template-columns: repeat(2, 1fr); }
}