/* ============================================================
   Stillwater Play — Arctic Flash theme
   ============================================================ */

:root {
  --bg:#0d1b2a;
  --primary:#00C2FF;
  --accent:#FF4757;
  --cta:#7BED9F;
  --cta-text:#111;
  --text:#b8d4e8;
  --card:#0f2235;
  --border:rgba(0,194,255,.2);
  --heading-font:'Exo 2', system-ui, sans-serif;
  --body-font:'Source Sans Pro', system-ui, sans-serif;
  --radius:10px;
  --maxw:1200px;
}

* { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--body-font);
  line-height:1.6;
  font-size:16px;
  padding-bottom:60px;
  overflow-x:hidden;
}

h1,h2,h3,h4 { font-family:var(--heading-font); color:#fff; line-height:1.2; font-weight:700; }

a { color:var(--primary); }

img { max-width:100%; display:block; }

/* Background nebula / depth */
body::before {
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,194,255,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(123,237,159,.08), transparent 45%),
    radial-gradient(circle at 70% 10%, rgba(255,71,87,.06), transparent 40%);
  pointer-events:none;
}

/* ===================== BUTTONS ===================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem;
  font-family:var(--heading-font);
  font-weight:700; font-size:.9rem;
  letter-spacing:.4px;
  padding:.7rem 1.4rem;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s, box-shadow .2s, background .2s;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn--cta { background:var(--cta); color:var(--cta-text); }
.btn--cta:hover { box-shadow:0 0 18px rgba(123,237,159,.5); }
.btn--outline { background:transparent; color:var(--primary); border-color:var(--border); }
.btn--outline:hover { border-color:var(--primary); box-shadow:0 0 14px rgba(0,194,255,.35); }
.btn--lg { padding:.95rem 2rem; font-size:1rem; }

/* ===================== HEADER ===================== */
.header { position:fixed; top:0; left:0; right:0; height:64px; z-index:100; background:rgba(13,27,42,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.header__inner { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:100%; }
.logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.logo svg { width:34px; height:34px; flex-shrink:0; }
.logo__name { font-family:var(--heading-font); font-weight:800; font-size:1.2rem; color:#fff; letter-spacing:.5px; }
.logo__name span { color:var(--primary); }
.header__nav { display:flex; gap:.25rem; margin-left:auto; }
.nav-link { padding:.5rem .8rem; color:var(--text); text-decoration:none; font-weight:600; font-size:.9rem; border-radius:6px; transition:color .2s, background .2s; }
.nav-link:hover { color:var(--primary); background:rgba(0,194,255,.06); }
.nav-link.active { color:var(--primary); background:rgba(0,194,255,.1); }
.header__actions { display:flex; gap:.5rem; align-items:center; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; border:none; background:none; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; }

/* ===================== SIDEBAR ===================== */
.sidebar { position:fixed; top:64px; left:0; width:220px; bottom:0; background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:90; }
.sidebar__top { padding:1.1rem 1.25rem .4rem; }
.sidebar__label { font-size:.7rem; letter-spacing:2px; color:var(--primary); font-weight:700; }
.sidebar__nav { display:flex; flex-direction:column; padding:.3rem 0; }
.sidebar__link { display:flex; align-items:center; gap:.6rem; padding:.65rem 1.25rem; color:var(--text); font-weight:600; font-size:.88rem; border-left:3px solid transparent; transition:all .2s; text-decoration:none; }
.sidebar__link svg { width:18px; height:18px; flex-shrink:0; opacity:.8; }
.sidebar__link:hover, .sidebar__link.active { color:var(--primary); border-left-color:var(--primary); background:rgba(255,255,255,.04); }
.sidebar__footer { margin-top:auto; padding:1rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.4rem; }
.sidebar__footer a { font-size:.75rem; color:var(--text); opacity:.6; text-decoration:none; }
.sidebar__footer a:hover { opacity:1; color:var(--primary); }
.sidebar__overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; display:none; }

/* ===================== MOBILE BOTTOM NAV ===================== */
.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--card); border-top:1px solid var(--border); z-index:150; }
.mobile-nav__item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1; background:none; border:none; color:var(--text); font-size:.7rem; font-weight:600; cursor:pointer; text-decoration:none; padding:.3rem; }
.mobile-nav__item svg { width:20px; height:20px; }
.mobile-nav__item:hover { color:var(--primary); }

/* ===================== LAYOUT ===================== */
.main { margin-top:64px; padding:0; min-height:60vh; }
.section { max-width:var(--maxw); margin:0 auto; padding:3rem 1.5rem; }
.section--narrow { max-width:840px; }
.section__title { font-size:1.8rem; margin-bottom:.4rem; }
.section__sub { color:var(--text); opacity:.8; margin-bottom:1.6rem; max-width:680px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }

/* diagonal divider */
.divider { height:60px; background:var(--card); clip-path:polygon(0 40%, 100% 0, 100% 100%, 0 100%); margin:0; opacity:.5; }

/* ===================== HERO ===================== */
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg, #0d1b2a 0%, #103049 60%, #0d1b2a 100%); clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%); padding:4.5rem 1.5rem 6rem; }
.hero__inner { max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.hero__badge { display:inline-block; font-size:.7rem; letter-spacing:2px; font-weight:700; color:var(--cta); border:1px solid var(--border); padding:.35rem .8rem; border-radius:50px; margin-bottom:1.2rem; }
.hero h1 { font-size:clamp(2rem, 5vw, 3.4rem); max-width:760px; margin-bottom:1rem; }
.hero h1 span { color:var(--primary); }
.hero p.lead { font-size:1.15rem; max-width:580px; margin-bottom:1.8rem; opacity:.92; }
.hero__cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.hero__disclaimer { font-size:.78rem; opacity:.65; }

/* animated geometric SVG decor */
.hero__decor { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__decor svg { position:absolute; opacity:.5; }
.deco-1 { top:8%; right:6%; width:140px; animation:spin 26s linear infinite; }
.deco-2 { bottom:18%; right:22%; width:90px; animation:float 7s ease-in-out infinite; }
.deco-3 { top:30%; right:38%; width:60px; animation:float 5s ease-in-out infinite reverse; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-22px); } }

/* ===================== CAROUSEL ===================== */
.carousel-wrap { position:relative; }
.carousel-viewport { overflow:hidden; padding:.5rem .25rem; }
.carousel { display:flex; gap:1rem; transition:transform .35s ease; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:var(--primary); color:#04222e; font-size:1.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; z-index:10; transition:box-shadow .2s; }
.carousel-btn:hover { box-shadow:0 0 14px rgba(0,194,255,.6); }
.carousel-btn--prev { left:-8px; }
.carousel-btn--next { right:-8px; }

/* ===================== GAME CARD ===================== */
.game-card { flex:0 0 180px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; }
.game-card:hover, .game-card:focus { transform:translateY(-4px); border-color:var(--primary); box-shadow:0 0 18px rgba(0,194,255,.3); outline:none; }
.game-card__thumb { position:relative; aspect-ratio:3/4; background:#0a1622; overflow:hidden; }
.game-card__thumb img { width:100%; height:100%; object-fit:cover; }
.game-card__overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:rgba(6,17,28,.78); opacity:0; transition:opacity .2s; }
.game-card:hover .game-card__overlay, .game-card:focus .game-card__overlay { opacity:1; }
.game-card__play { background:var(--cta); color:var(--cta-text); border:none; border-radius:6px; font-family:var(--heading-font); font-weight:700; padding:.55rem 1rem; cursor:pointer; font-size:.82rem; }
.game-card__demo-tag { font-size:.62rem; letter-spacing:1.5px; font-weight:700; color:var(--primary); border:1px solid var(--border); padding:.15rem .5rem; border-radius:4px; }
.game-card__tags { position:absolute; top:.4rem; left:.4rem; display:flex; flex-wrap:wrap; gap:.25rem; }
.game-tag { font-size:.58rem; font-weight:700; background:rgba(13,27,42,.85); color:var(--text); padding:.12rem .4rem; border-radius:4px; border:1px solid var(--border); }
.game-card__info { padding:.6rem .7rem .75rem; }
.game-card__title { font-size:.85rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card__provider { font-size:.72rem; opacity:.65; margin-top:.1rem; }

/* games grid */
.games-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:1rem; }
.games-grid .game-card { flex:none; }

/* ===================== HOW IT WORKS CARDS ===================== */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.2rem; }
.step-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.4rem; position:relative; overflow:hidden; }
.step-card__num { font-family:var(--heading-font); font-size:2.6rem; font-weight:800; color:var(--primary); opacity:.35; line-height:1; }
.step-card h3 { margin:.5rem 0 .5rem; font-size:1.15rem; }
.step-card p { font-size:.92rem; opacity:.88; }

/* notice box */
.notice-box { margin-top:1.6rem; background:rgba(0,194,255,.05); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:8px; padding:1rem 1.2rem; font-size:.9rem; }
.notice-box strong { color:var(--primary); }

/* ===================== REVIEWS ===================== */
.reviews { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.2rem; }
.review-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; }
.review-card__stars { color:var(--cta); letter-spacing:2px; margin-bottom:.6rem; font-size:1rem; }
.review-card__text { font-size:.92rem; opacity:.92; margin-bottom:1rem; font-style:italic; }
.review-card__name { font-weight:700; color:#fff; font-size:.9rem; }
.review-card__city { font-size:.78rem; opacity:.6; }

/* ===================== ABOUT BANNER ===================== */
.banner { background:linear-gradient(120deg, rgba(0,194,255,.12), rgba(123,237,159,.08)); border:1px solid var(--border); border-radius:14px; padding:2.4rem; text-align:center; }
.banner h2 { font-size:1.7rem; margin-bottom:.8rem; }
.banner p { max-width:600px; margin:0 auto 1.4rem; opacity:.9; }

/* ===================== SEO DETAILS ===================== */
.seo details { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; }
.seo summary { cursor:pointer; font-family:var(--heading-font); font-weight:700; color:var(--primary); font-size:1rem; }
.seo details[open] summary { margin-bottom:1rem; }
.seo p { margin-bottom:1rem; opacity:.9; font-size:.95rem; }
.seo h3 { font-size:1.15rem; margin:1.2rem 0 .5rem; }

/* ===================== CONTENT / LEGAL PAGES ===================== */
.content { max-width:840px; margin:0 auto; padding:2.5rem 1.5rem; }
.content h1 { font-size:2.1rem; margin-bottom:1rem; }
.content h2 { font-size:1.4rem; margin:2rem 0 .7rem; }
.content h3 { font-size:1.1rem; margin:1.4rem 0 .5rem; }
.content p { margin-bottom:1rem; opacity:.92; }
.content ul, .content ol { margin:0 0 1.2rem 1.4rem; }
.content li { margin-bottom:.5rem; opacity:.92; }
.content a { color:var(--primary); }
.page-head { background:linear-gradient(135deg, #103049, #0d1b2a); padding:2.5rem 1.5rem; border-bottom:1px solid var(--border); }
.page-head__inner { max-width:840px; margin:0 auto; }
.page-head h1 { font-size:clamp(1.8rem,4vw,2.6rem); }
.page-head p { opacity:.85; margin-top:.5rem; }

/* ===================== FAQ ===================== */
.faq { display:flex; flex-direction:column; gap:.8rem; }
.faq details { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; }
.faq summary { cursor:pointer; font-weight:700; color:#fff; font-family:var(--heading-font); }
.faq details[open] summary { color:var(--primary); margin-bottom:.6rem; }
.faq p { font-size:.92rem; opacity:.9; }

/* ===================== FORM ===================== */
.form { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:2rem; max-width:640px; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form__group { margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.form label { font-size:.85rem; font-weight:600; color:#fff; }
.form input, .form select, .form textarea {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:.75rem 1rem; color:var(--text); font-family:var(--body-font); font-size:.95rem;
  width:100%; transition:border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--primary); }
.form textarea { resize:vertical; min-height:130px; }
.form-success { display:none; margin-top:1.2rem; background:rgba(123,237,159,.1); border:1px solid var(--cta); color:var(--cta); border-radius:8px; padding:1rem 1.2rem; font-weight:600; }

/* ===================== CATEGORY TABS / NOTICE BAR ===================== */
.notice-bar { position:sticky; top:64px; z-index:80; background:rgba(15,34,53,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); padding:.6rem 1.5rem; font-size:.78rem; text-align:center; color:var(--primary); font-weight:600; letter-spacing:.3px; }
.cat-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.cat-tab { background:var(--card); border:1px solid var(--border); color:var(--text); font-family:var(--heading-font); font-weight:600; font-size:.85rem; padding:.5rem 1rem; border-radius:50px; cursor:pointer; transition:all .2s; }
.cat-tab:hover { border-color:var(--primary); color:var(--primary); }
.cat-tab.active { background:var(--primary); color:#04222e; border-color:var(--primary); }
.lobby-search { width:100%; max-width:340px; background:var(--card); border:1px solid var(--border); border-radius:50px; padding:.65rem 1.2rem; color:var(--text); font-family:var(--body-font); font-size:.92rem; margin-bottom:1.4rem; }
.lobby-search:focus { outline:none; border-color:var(--primary); }
.lobby-empty { padding:3rem 1rem; text-align:center; opacity:.6; }

/* ===================== FOOTER ===================== */
.footer { background:var(--card); border-top:1px solid var(--border); padding:2.5rem 1.5rem 1.5rem; }
.footer__inner { max-width:var(--maxw); margin:0 auto; }
.footer__cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1.6rem; margin-bottom:1.8rem; }
.footer__col h4 { font-size:.85rem; letter-spacing:1px; color:var(--primary); margin-bottom:.8rem; text-transform:uppercase; }
.footer__col a { display:block; color:var(--text); opacity:.75; text-decoration:none; font-size:.88rem; margin-bottom:.5rem; }
.footer__col a:hover { opacity:1; color:var(--primary); }
.footer__brand { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; }
.footer__brand svg { width:30px; height:30px; }
.footer__brand .logo__name { font-size:1.1rem; }
.footer__bottom { border-top:1px solid var(--border); padding-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.footer__badges { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.age-badge { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:2px solid var(--accent); color:var(--accent); border-radius:50%; font-weight:800; font-size:.85rem; font-family:var(--heading-font); }
.footer__disclaimer { font-size:.76rem; opacity:.6; line-height:1.6; }

/* ===================== MODAL (auth) ===================== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:9998; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.show { display:flex; }
.modal { background:var(--card); border:1px solid var(--border); border-radius:14px; width:100%; max-width:400px; padding:1.8rem; position:relative; }
.modal h3 { margin-bottom:1.2rem; font-size:1.4rem; }
.modal__close { position:absolute; top:.9rem; right:1rem; background:none; border:none; color:var(--text); font-size:1.3rem; cursor:pointer; }
.modal .form__group { margin-bottom:1rem; }
.modal .btn { width:100%; margin-top:.4rem; }
.modal__switch { text-align:center; font-size:.85rem; margin-top:1rem; opacity:.8; }
.modal__switch a { cursor:pointer; }
.modal__error { color:var(--accent); font-size:.82rem; margin-top:.4rem; min-height:1em; }

/* ===================== GAME MODAL ===================== */
.game-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.game-modal { background:var(--card); border-radius:12px; width:100%; max-width:1000px; height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.game-modal__header { display:flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.game-modal__header span { font-weight:800; color:var(--text); flex:1; font-size:.9rem; }
.game-modal__badges { display:flex; gap:.35rem; }
.badge { font-size:.6rem; font-weight:900; padding:.2rem .55rem; border-radius:50px; white-space:nowrap; }
.badge--free { background:var(--cta); color:var(--cta-text); }
.badge--social { background:var(--accent); color:#fff; }
.game-modal__close { background:none; border:none; color:var(--text); font-size:1.2rem; cursor:pointer; padding:.2rem .5rem; }
.game-modal__disclaimer { background:rgba(255,200,0,.06); padding:.4rem 1rem; font-size:.72rem; color:#ffd; text-align:center; flex-shrink:0; }
.game-modal__frame { flex:1; display:flex; min-height:0; overflow:hidden; }
.game-modal__frame iframe { width:100%; height:100%; flex:1; border:none; display:block; }

/* ===================== RESPONSIVE ===================== */
@media (min-width:1024px) {
  .main { margin-left:220px; }
  .footer { margin-left:220px; }
  body { padding-bottom:0; }
}

@media (max-width:1280px) {
  .section { padding:2.6rem 1.4rem; }
}

@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); transition:transform .3s; top:0; height:100vh; z-index:200; }
  .sidebar.open { transform:translateX(0); }
  .sidebar__overlay.show { display:block; }
  .main { margin-left:0; }
  .footer { margin-left:0; }
  .mobile-nav { display:flex; align-items:center; justify-content:space-around; }
}

@media (max-width:768px) {
  .hamburger { display:flex; }
  .header__nav { display:none; }
  .header__actions { display:none; }
  .hero { clip-path:none; padding:3rem 1.2rem; }
  .form { padding:1.4rem; }
}

@media (max-width:600px) {
  .form__row { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  body { font-size:15px; }
  .games-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .carousel .game-card { flex:0 0 60vw; }
  button, input, select, textarea { min-height:48px; }
  .section { padding:1.5rem 1rem; }
  .hero h1 { font-size:1.9rem; }
  .footer__cols { grid-template-columns:1fr 1fr; }
}

@media (max-width:375px) {
  .header__inner { padding:0 .75rem; }
  .games-grid { gap:.5rem; }
}