/* ============================================================
   BIG BASS — style.css
   Deep ocean night fishing · Dark blue + gold
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:'Noto Sans Bengali','Inter','Segoe UI',Arial,sans-serif;
  background:#08111a; color:#e6f4ff;
  min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ── BACKGROUND ──────────────────────────────────────────── */
.page-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(20,80,160,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(5,20,60,0.7) 0%, transparent 60%),
    linear-gradient(175deg, #143049 0%, #050e1e 50%, #030810 100%);
}
.page-rays {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:conic-gradient(from 270deg at 70% -5%,
    transparent 0deg,rgba(255,200,50,0.03) 5deg,transparent 10deg,
    rgba(100,180,255,0.04) 18deg,transparent 26deg);
}

/* ── HEADER ──────────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 24px;
  background:rgba(4,8,15,0.96);
  border-bottom:2px solid rgba(100,160,255,0.28);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
header::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#2f8cff,#ffd166,#2f8cff,transparent);
}
.logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Cinzel','Noto Sans Bengali',serif;
  font-size:clamp(1rem,3vw,1.5rem); font-weight:900; letter-spacing:3px;
  background:linear-gradient(180deg,#c7e6ff 0%,#2f8cff 40%,#ffd166 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-icon { font-size:1.5rem; -webkit-text-fill-color:initial; filter:drop-shadow(0 0 8px rgba(100,160,255,0.8)); }
nav { display:flex; align-items:center; gap:2px; }
nav a { font-size:.8rem; font-weight:600; color:rgba(180,210,255,0.6); text-decoration:none; padding:6px 11px; border-radius:8px; transition:all .18s; }
nav a:hover { color:#c7e6ff; background:rgba(21,101,192,0.15); }
#lang-switcher { position:relative; margin-left:4px; }
#lang-btn { display:flex; align-items:center; gap:4px; font-size:.8rem; font-weight:600; color:rgba(180,210,255,0.6); background:none; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; transition:all .18s; }
#lang-btn:hover { color:#c7e6ff; background:rgba(21,101,192,0.15); }
#lang-btn .arrow { font-size:10px; opacity:.6; transition:transform .18s; }
#lang-btn.open .arrow { transform:rotate(180deg); }
#lang-dropdown { display:none; position:absolute; top:calc(100% + 6px); right:0; background:#060e1e; border:1px solid rgba(100,160,255,0.28); border-radius:14px; overflow:hidden; z-index:200; min-width:162px; box-shadow:0 8px 32px rgba(0,0,0,.8); }
#lang-dropdown.open { display:block; }
.lang-option { display:flex; align-items:center; gap:10px; padding:11px 15px; font-size:.85rem; font-weight:600; color:rgba(180,210,255,0.65); cursor:pointer; transition:background .12s; }
.lang-option:not(:last-child) { border-bottom:1px solid rgba(100,160,255,0.1); }
.lang-option:hover { background:rgba(21,101,192,0.18); color:#c7e6ff; }
.lang-option.active { color:#ffd166; font-weight:700; }
.lang-flag { font-size:17px; }

/* ══════════════════════════════════════════════════════════
   WHEEL OVERLAY  (shown on first visit)
══════════════════════════════════════════════════════════ */
#wheel-overlay {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,5,15,0.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:opacity .38s;
}
#wheel-overlay.show { opacity:1; pointer-events:all; }

.wheel-box {
  background:rgba(6,14,30,0.98);
  border:2px solid rgba(255,215,0,0.38);
  border-radius:28px; padding:32px 36px 36px;
  text-align:center; max-width:520px; width:94%;
  box-shadow:0 0 80px rgba(21,101,192,0.25), 0 0 40px rgba(255,215,0,0.08);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  position:relative;
}
.wheel-title {
  font-family:'Cinzel','Noto Sans Bengali',serif; font-size:clamp(1.3rem,4vw,1.8rem);
  font-weight:900; letter-spacing:2px;
  background:linear-gradient(180deg,#ffd166 0%,#ff9f1c 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.wheel-subtitle { font-size:.82rem; color:rgba(180,210,255,0.65); letter-spacing:.5px; font-family:'Noto Sans Bengali','Inter',sans-serif; }

/* The spin wheel canvas wrapper */
.wheel-wrap {
  position:relative; width:320px; height:320px;
  flex-shrink:0;
}
#wheel-canvas {
  display:block; border-radius:50%;
  box-shadow:0 0 40px rgba(255,215,0,0.22), 0 0 80px rgba(21,101,192,0.15);
  transition:box-shadow .3s;
}
#wheel-canvas.spinning { box-shadow:0 0 60px rgba(255,215,0,0.5), 0 0 100px rgba(255,150,0,0.2); }

/* Pointer triangle at top */
.wheel-pointer {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:24px solid #ffd166;
  filter:drop-shadow(0 2px 8px rgba(255,215,0,0.7));
  z-index:5;
}
.wheel-pointer::before {
  content:''; position:absolute; top:-26px; left:-12px;
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:22px solid #ff9f1c;
}

/* Center pin on wheel */
.wheel-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; z-index:6; pointer-events:none;
}
.wheel-center img { width:100%; height:100%; }

/* Spin button */
#wheel-spin-btn {
  font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1.1rem; font-weight:900;
  padding:15px 52px; letter-spacing:2px;
  background:linear-gradient(135deg,#2f8cff,#1976D2,#42A5F5);
  color:#fff; border:none; border-radius:18px; cursor:pointer;
  box-shadow:0 5px 0 #1f64d8,0 8px 28px rgba(21,101,192,0.5);
  transition:all .15s; width:100%; max-width:280px;
}
#wheel-spin-btn:hover { transform:translateY(-2px); box-shadow:0 7px 0 #1f64d8,0 12px 36px rgba(21,101,192,0.65); }
#wheel-spin-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #1f64d8; }
#wheel-spin-btn:disabled { opacity:.55; cursor:default; transform:translateY(3px); box-shadow:0 2px 0 #1f64d8; }

/* Bonus result card */
#bonus-result {
  display:none;
  background:rgba(255,215,0,0.1); border:1.5px solid rgba(255,215,0,0.4);
  border-radius:16px; padding:16px 24px; width:100%;
}
#bonus-result.show { display:block; }
.bonus-icon { font-size:2.8rem; line-height:1; margin-bottom:6px; }
.bonus-name {
  font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1.1rem; font-weight:700;
  color:#ffd166; letter-spacing:1px; margin-bottom:4px;
}
.bonus-desc { font-size:.88rem; color:rgba(180,210,255,0.72); font-family:'Noto Sans Bengali','Inter',sans-serif; }

#wheel-play-btn {
  font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1.05rem; font-weight:700;
  padding:14px 44px; letter-spacing:1.5px;
  background:linear-gradient(135deg,#2E7D32,#43A047,#66BB6A);
  color:#fff; border:none; border-radius:18px; cursor:pointer;
  box-shadow:0 4px 0 #1B5E20,0 6px 22px rgba(76,175,80,0.4);
  transition:all .15s; display:none; width:100%; max-width:280px;
}
#wheel-play-btn.show { display:inline-block; }
#wheel-play-btn:hover { transform:translateY(-2px); box-shadow:0 6px 0 #1B5E20,0 10px 30px rgba(76,175,80,0.55); }

/* ══════════════════════════════════════════════════════════
   GAME UI
══════════════════════════════════════════════════════════ */
#game-section {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  padding:16px 12px 64px; gap:12px;
}

/* ── HUD ─────────────────────────────────────────────────── */
#hud {
  display:flex; align-items:stretch; width:100%; max-width:700px;
  background:rgba(6,14,30,0.94); border:1px solid rgba(100,160,255,0.22);
  border-radius:18px; overflow:hidden; box-shadow:0 2px 18px rgba(0,0,0,.65);
}
.hud-cell { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:10px 4px; border-right:1px solid rgba(100,160,255,0.1); }
.hud-cell:last-child { border-right:none; }
.hud-label { font-family:'Cinzel',serif; font-size:.46rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(100,160,255,0.45); }
.hud-val { font-family:'Cinzel',serif; font-size:1.12rem; font-weight:700; color:#ffd166; letter-spacing:.5px; }
/* Hearts display */
#hud-hearts-cell { flex:1.4; }
.hearts-row { display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:center; }
.heart-icon { width:20px; height:18px; }
.heart-icon.lost { opacity:.2; filter:grayscale(1); }
/* Bonus indicators */
#hud-bonus-cell { flex:1.6; }
.bonus-tags { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.bonus-tag {
  font-size:.55rem; font-weight:700; padding:2px 7px; border-radius:8px;
  background:rgba(255,215,0,0.12); border:1px solid rgba(255,215,0,0.3);
  color:#ffd166; white-space:nowrap;
}
#hud-controls { display:flex; align-items:center; gap:5px; padding:0 10px; border-left:1px solid rgba(100,160,255,0.1); flex-shrink:0; }

/* ── GAME CANVAS AREA ────────────────────────────────────── */
#game-wrap {
  position:relative; width:100%; max-width:700px;
  border-radius:22px; overflow:hidden;
  border:2px solid rgba(100,160,255,0.28);
  box-shadow:0 8px 40px rgba(0,0,0,.75), 0 0 40px rgba(21,101,192,0.1);
  aspect-ratio:700/420; cursor:pointer; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
#bg-canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; }
#game-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; }

/* Flash labels */
#catch-flash {
  position:absolute; left:50%; top:18%; transform:translateX(-50%);
  font-family:'Cinzel','Noto Sans Bengali',serif; font-size:clamp(1rem,3vw,1.4rem);
  font-weight:700; color:#ffd166; white-space:nowrap; pointer-events:none;
  opacity:0; z-index:20; text-shadow:0 0 18px rgba(255,215,0,0.9);
}
#catch-flash.show { animation:flashRise 1.2s ease-out forwards; }
@keyframes flashRise { 0%{opacity:1;transform:translateX(-50%) scale(.8)} 15%{opacity:1;transform:translateX(-50%) scale(1.1)} 100%{opacity:0;transform:translateX(-50%) translateY(-64px)} }

/* ── CAST BUTTON ─────────────────────────────────────────── */
#cast-btn {
  font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1.05rem; font-weight:700;
  padding:14px 48px; letter-spacing:1.5px;
  background:linear-gradient(135deg,#2f8cff,#1976D2,#42A5F5);
  color:#fff; border:none; border-radius:18px; cursor:pointer;
  box-shadow:0 5px 0 #1f64d8,0 7px 24px rgba(21,101,192,0.45);
  transition:all .15s; width:100%; max-width:280px;
}
#cast-btn:hover { transform:translateY(-2px); box-shadow:0 7px 0 #1f64d8,0 12px 32px rgba(21,101,192,0.6); }
#cast-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #1f64d8; }
#cast-btn:disabled { opacity:.45; cursor:default; transform:translateY(3px); }

/* ── GAME OVER OVERLAY ───────────────────────────────────── */
#gameover-overlay {
  position:absolute; inset:0; z-index:30;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:24px; background:rgba(2,6,18,0.88); backdrop-filter:blur(14px);
  border-radius:20px; opacity:0; pointer-events:none; transition:opacity .3s;
}
#gameover-overlay.show { opacity:1; pointer-events:all; }
.go-icon { font-size:4rem; animation:ol-float 3s ease-in-out infinite; }
@keyframes ol-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.go-title { font-family:'Cinzel','Noto Sans Bengali',serif; font-size:clamp(1.4rem,4vw,2rem); font-weight:900; color:#ffd166; text-shadow:0 0 22px rgba(255,215,0,0.7); text-align:center; }
.go-chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.go-chip { display:flex; flex-direction:column; align-items:center; padding:8px 14px; background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.22); border-radius:10px; min-width:66px; }
.chip-l { font-family:'Cinzel',serif; font-size:.44rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,215,0,0.45); }
.chip-v { font-family:'Cinzel',serif; font-size:1.2rem; font-weight:700; color:#ffd166; }
.go-new-best { font-family:'Cinzel',serif; font-size:.8rem; font-weight:700; letter-spacing:1px; padding:5px 14px; border-radius:20px; background:rgba(255,215,0,0.12); border:1px solid rgba(255,215,0,0.35); color:#ffd166; }
.go-btn { font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1rem; font-weight:700; padding:13px 40px; letter-spacing:1px; background:linear-gradient(135deg,#2f8cff,#1976D2,#42A5F5); color:#fff; border:none; border-radius:18px; cursor:pointer; box-shadow:0 4px 0 #1f64d8,0 6px 18px rgba(21,101,192,0.4); transition:all .15s; }
.go-btn:hover { transform:translateY(-2px); }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer { position:relative; z-index:1; background:rgba(3,7,15,0.98); border-top:1px solid rgba(100,160,255,0.1); padding:44px 24px 38px; margin-top:48px; }
.footer-inner { max-width:580px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.footer-logo-row { display:flex; align-items:center; gap:10px; }
.footer-logo-icon { font-size:1.4rem; }
.footer-logo-name { font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1.05rem; font-weight:700; color:#2f8cff; }
.footer-nav { display:flex; align-items:center; gap:8px; font-size:.84rem; }
.footer-nav a { color:#204c6d; text-decoration:none; transition:color .18s; }
.footer-nav a:hover { color:#c7e6ff; }
.footer-dot { color:#0d1e38; }
.footer-badge-row { display:flex; justify-content:center; }
.age-badge { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:2.5px solid rgba(100,160,255,0.45); font-family:'Cinzel',serif; font-size:.9rem; font-weight:700; color:rgba(100,160,255,0.85); }
.footer-disc { font-size:.76rem; line-height:1.72; color:#204c6d; max-width:490px; }
.footer-copy { font-size:.72rem; color:#0d1e38; margin-top:4px; }
.footer-notices { display:grid; gap:8px; justify-items:center; }
.footer-disc { color:#8aa9c8; }
.footer-owner { display:grid; gap:5px; max-width:720px; padding-top:15px; border-top:1px solid rgba(100,160,255,.14); color:#aec9e5; font-size:.75rem; line-height:1.65; }
.footer-owner span { color:#6889aa; }

/* ── LEGAL ───────────────────────────────────────────────── */
.legal-page { display:flex; flex-direction:column; min-height:100dvh; }
.legal-hdr { background:rgba(3,7,15,0.97); border-bottom:1px solid rgba(100,160,255,0.18); padding:0 24px; position:sticky; z-index:100; }
.legal-hdr-link { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#c7e6ff; font-family:Georgia,'Times New Roman',serif; font-weight:700; }
.legal-hdr-icon { font-size:1.3rem; }
.legal-hdr-name { font-family:'Cinzel','Noto Sans Bengali',serif; font-size:1.1rem; font-weight:700; color:#c7e6ff; }
.legal-back-link { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:.82rem; font-weight:600; color:#204c6d; text-decoration:none; transition:color .18s; }
.legal-back-link:hover { color:#c7e6ff; }
.legal-body-wrap { flex:1; position:relative; z-index:1; max-width:980px; margin:0 auto; padding:50px 24px 72px; width:100%; }
.legal-body-wrap h1 { font-family:'Cinzel','Noto Sans Bengali',serif; font-size:clamp(1.6rem,4vw,2.3rem); font-weight:900; letter-spacing:2px; color:#c7e6ff; margin-bottom:6px; }
.legal-updated { font-size:.82rem; color:#204c6d; margin-bottom:42px; }
.legal-body-wrap h3 { font-family:'Cinzel','Noto Sans Bengali',serif; font-size:.92rem; font-weight:700; letter-spacing:1px; color:#2f8cff; margin:34px 0 10px; }
.legal-body-wrap h3:first-of-type { margin-top:0; }
.legal-body-wrap p { font-family:'Noto Sans Bengali','Inter',sans-serif; font-size:.92rem; line-height:1.82; color:#4a7aaa; }
.legal-kicker,.ledger-label { color:#d9b83f!important; font-size:.72rem!important; font-weight:700; text-transform:uppercase; letter-spacing:0; }
.legal-intro { max-width:720px; margin:12px 0 34px; color:#a8c3de!important; font-size:1rem!important; }

/* ── INDEX EDITORIAL LEDGER ──────────────────────────────── */
.home-ledger { position:relative; z-index:1; width:min(980px,calc(100% - 32px)); margin:24px auto 70px; display:grid; grid-template-columns:1.35fr 1fr; border-top:1px solid rgba(100,160,255,.24); border-bottom:1px solid rgba(100,160,255,.24); }
.home-ledger > * { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:30px 24px; min-width:0; }
.home-ledger .ledger-wide { grid-column:1/-1; border-bottom:1px solid rgba(100,160,255,.16); }
.home-ledger > aside { border-left:1px solid rgba(100,160,255,.16); }
.ledger-no { color:#d9b83f; font:700 .7rem Georgia,serif; }
.home-ledger h2 { color:#e6f4ff; font:700 1.1rem Georgia,serif; margin:5px 0 9px; }
.home-ledger p { color:#7899b9; line-height:1.7; font-size:.9rem; }
.home-ledger a { display:block; width:max-content; max-width:100%; color:#c7e6ff; margin:7px 0; overflow-wrap:anywhere; }

/* ── INTERNAL PAGE STRUCTURES ────────────────────────────── */
.about-deck { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(100,160,255,.2); border-left:1px solid rgba(100,160,255,.2); }
.about-deck article { padding:26px; border-right:1px solid rgba(100,160,255,.2); border-bottom:1px solid rgba(100,160,255,.2); }
.about-deck span,.route-no { color:#d9b83f; font-size:.7rem; font-weight:700; }
.about-deck h2,.terms-route h2,.privacy-map h2,.contact-routes h2 { color:#cfe5fb; font:700 1rem Georgia,serif; margin:8px 0; }
.terms-route { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; counter-reset:route; }
.terms-route article { display:grid; grid-template-columns:38px 1fr; gap:12px; padding:21px; border:1px solid rgba(100,160,255,.18); border-radius:6px; background:rgba(7,18,36,.68); }
.terms-route article:nth-child(3n) { border-color:rgba(217,184,63,.3); }
.privacy-map { border-top:2px solid rgba(217,184,63,.45); }
.privacy-map article { display:grid; grid-template-columns:160px 1fr 150px; gap:22px; align-items:start; padding:20px 4px; border-bottom:1px solid rgba(100,160,255,.18); }
.privacy-map h2 { margin:0; }
.privacy-map strong { color:#d9b83f; font-size:.72rem; font-weight:600; text-align:right; }
.contact-routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(100,160,255,.2); border-left:1px solid rgba(100,160,255,.2); }
.contact-routes > a { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:24px 18px; text-decoration:none; border-right:1px solid rgba(100,160,255,.2); border-bottom:1px solid rgba(100,160,255,.2); min-width:0; }
.contact-routes > a > span { color:#d9b83f; font-size:.7rem; }
.contact-routes strong { display:block; color:#c7e6ff; font-size:.76rem; margin-top:12px; overflow-wrap:anywhere; }
.operator-strip { display:grid; grid-template-columns:.7fr 2fr auto; gap:22px; align-items:center; margin-top:24px; padding:22px; border:1px solid rgba(217,184,63,.25); background:rgba(7,18,36,.58); }
.operator-strip div { display:grid; gap:5px; }
.operator-strip span { color:#6889aa; font-size:.7rem; text-transform:uppercase; }
.operator-strip strong,.operator-strip a { color:#d9b83f; }
.operator-strip p { font-size:.78rem; line-height:1.5; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:640px) {
  header { padding:0 12px; } header > nav > a { display:none; } header > nav > a.always { display:block; }
  .wheel-box { padding:24px 20px 28px; }
  .wheel-wrap { width:280px; height:280px; }
  #wheel-canvas { width:280px!important; height:280px!important; }
  #game-section { padding:12px 8px 48px; gap:9px; }
  .home-ledger { grid-template-columns:1fr; }
  .home-ledger .ledger-wide { grid-column:auto; }
  .home-ledger > aside { border-left:0; border-top:1px solid rgba(100,160,255,.16); }
  .about-deck,.terms-route,.contact-routes { grid-template-columns:1fr; }
  .privacy-map article { grid-template-columns:1fr; gap:6px; }
  .privacy-map strong { text-align:left; }
  .operator-strip { grid-template-columns:1fr; }
  .legal-body-wrap { padding:38px 18px 56px; }
  .footer-nav { flex-wrap:wrap; justify-content:center; }
}
@media (max-width:400px) {
  .wheel-wrap { width:240px; height:240px; }
  #wheel-canvas { width:240px!important; height:240px!important; }
}