/* ============================================================
   winzir.cfd - Mobile-first gaming portal base styles
   Prefix: pg45-  (variables, classes)
   Palette: #6F4E37 (coffee) | #2C3E50 (deep slate) | #8B7355 (taupe)
   Canvas: 320-430px mobile, centered on wider screens
   ============================================================ */

/* ---------- CSS variables (prefixed) ---------- */
:root{
  --pg45-coffee:#6F4E37;
  --pg45-slate:#2C3E50;
  --pg45-taupe:#8B7355;
  --pg45-cream:#F4ECDB;
  --pg45-paper:#FBF6EC;
  --pg45-ink:#1E2A36;
  --pg45-ink-soft:#415063;
  --pg45-line:#E5D9C2;
  --pg45-gold:#C9A24B;
  --pg45-gold-soft:#E7CD8A;
  --pg45-rose:#B5573F;
  --pg45-night:#16202B;
  --pg45-shadow:0 6px 18px rgba(22,32,43,.18);
  --pg45-shadow-soft:0 3px 10px rgba(22,32,43,.12);
  --pg45-radius:14px;
  --pg45-radius-sm:10px;
  --pg45-radius-pill:999px;
  --pg45-gap:14px;
  --pg45-header-h:58px;
  --pg45-bottom-h:64px;
  --pg45-max:430px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{scroll-behavior:smooth;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--pg45-ink);
  background:var(--pg45-night);
  line-height:1.55;
  font-size:15px;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--pg45-coffee);text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;}
ul,ol{list-style:none;}

/* ---------- phone canvas frame ---------- */
.pg45-stage{
  max-width:var(--pg45-max);
  margin:0 auto;
  background:var(--pg45-paper);
  min-height:100vh;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.4);
}

/* ---------- top header ---------- */
.pg45-header{
  position:sticky;top:0;z-index:60;
  max-width:var(--pg45-max);
  margin:0 auto;
  height:var(--pg45-header-h);
  background:linear-gradient(180deg,#3A5366 0%,var(--pg45-slate) 100%);
  color:var(--pg45-cream);
  display:flex;align-items:center;
  padding:0 12px;
  gap:10px;
  border-bottom:2px solid var(--pg45-gold);
}
.pg45-brand{
  display:flex;align-items:center;gap:8px;min-width:0;flex:1;
}
.pg45-brand .pg45-logo{
  width:38px;height:38px;border-radius:10px;
  object-fit:cover;
  background:var(--pg45-cream);
  padding:3px;
  border:1px solid var(--pg45-gold-soft);
  flex:0 0 auto;
}
.pg45-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.pg45-brand-name{
  font-size:17px;font-weight:800;letter-spacing:.4px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg45-brand-tag{
  font-size:10.5px;color:var(--pg45-gold-soft);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg45-header-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.pg45-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 14px;
  font-size:13.5px;font-weight:700;
  border-radius:var(--pg45-radius-pill);
  transition:transform .18s ease, box-shadow .18s ease, background .25s ease;
  white-space:nowrap;
}
.pg45-btn:active{transform:scale(.96);}
.pg45-btn-login{
  background:transparent;color:var(--pg45-cream);
  border:1px solid var(--pg45-gold-soft);
}
.pg45-btn-register{
  background:linear-gradient(135deg,var(--pg45-gold) 0%,#E7CD8A 100%);
  color:var(--pg45-slate);
  box-shadow:0 3px 10px rgba(201,162,75,.35);
}
.pg45-menu-btn{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--pg45-cream);
  flex:0 0 auto;
}
.pg45-menu-btn span{
  display:block;width:18px;height:2px;background:currentColor;
  position:relative;border-radius:2px;
}
.pg45-menu-btn span::before,
.pg45-menu-btn span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;
}
.pg45-menu-btn span::before{top:-6px;}
.pg45-menu-btn span::after{top:6px;}

/* ---------- slide-down menu panel ---------- */
.pg45-menu-panel{
  position:absolute;top:var(--pg45-header-h);left:0;right:0;
  max-width:var(--pg45-max);margin:0 auto;
  background:var(--pg45-slate);
  color:var(--pg45-cream);
  border-bottom:2px solid var(--pg45-gold);
  box-shadow:var(--pg45-shadow);
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .25s ease, opacity .25s ease, visibility .25s;
  z-index:55;padding:10px 14px 16px;
  max-height:75vh;overflow-y:auto;
}
.pg45-menu-panel.pg45-open{
  transform:translateY(0);opacity:1;visibility:visible;
}
.pg45-menu-section{margin-top:8px;}
.pg45-menu-title{
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--pg45-gold-soft);margin:8px 0 4px;font-weight:700;
}
.pg45-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pg45-menu-grid a{
  display:block;padding:10px 12px;
  background:rgba(255,255,255,.05);
  border-left:3px solid transparent;
  color:var(--pg45-cream);font-size:13.5px;font-weight:600;
  border-radius:6px;transition:background .2s,border-color .2s;
}
.pg45-menu-grid a:active{background:rgba(255,255,255,.12);}
.pg45-menu-grid a:hover{border-left-color:var(--pg45-gold);}
.pg45-menu-cta{
  margin-top:12px;display:flex;gap:8px;
}
.pg45-menu-cta .pg45-btn{flex:1;}

/* ---------- main ---------- */
.pg45-main{
  padding:14px 12px calc(var(--pg45-bottom-h) + 24px);
}
.pg45-main > h1{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:22px;line-height:1.2;color:var(--pg45-slate);margin:4px 0 8px;
}
.pg45-lead{
  font-size:14px;color:var(--pg45-ink-soft);line-height:1.65;margin:0 2px 14px;
}
.pg45-block ol{padding-left:21px;margin:7px 0 10px;}
.pg45-block ol li{list-style:decimal;font-size:13px;color:var(--pg45-ink-soft);margin-bottom:6px;padding-left:2px;}

/* ---------- hero carousel ---------- */
.pg45-hero{
  position:relative;border-radius:var(--pg45-radius);
  overflow:hidden;box-shadow:var(--pg45-shadow);
  background:var(--pg45-slate);
}
.pg45-hero-track{
  display:flex;transition:transform .45s cubic-bezier(.25,.8,.35,1);
}
.pg45-hero-slide{
  flex:0 0 100%;position:relative;
}
.pg45-hero-slide img{
  width:100%;height:188px;object-fit:cover;object-position:center;
}
.pg45-hero-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 14px 12px;
  background:linear-gradient(180deg,rgba(22,32,43,0) 0%,rgba(22,32,43,.85) 100%);
  color:#fff;
}
.pg45-hero-caption h2{
  font-size:16px;font-weight:800;color:#fff;letter-spacing:.3px;margin-bottom:4px;
}
.pg45-hero-caption p{font-size:12px;color:var(--pg45-gold-soft);margin-bottom:8px;}
.pg45-hero-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--pg45-gold),#E7CD8A);
  color:var(--pg45-slate);font-weight:800;font-size:12.5px;
  padding:7px 14px;border-radius:var(--pg45-radius-pill);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.pg45-hero-dots{
  position:absolute;bottom:8px;right:12px;display:flex;gap:5px;z-index:3;
}
.pg45-hero-dots button{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.4);transition:background .2s,width .2s;
}
.pg45-hero-dots button.pg45-active{
  background:var(--pg45-gold);width:18px;border-radius:4px;
}

/* ---------- section heading ---------- */
.pg45-section{margin-top:22px;}
.pg45-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:8px;
}
.pg45-section-title{
  font-size:16px;font-weight:800;color:var(--pg45-slate);
  display:flex;align-items:center;gap:8px;
}
.pg45-section-title::before{
  content:"";width:4px;height:18px;border-radius:3px;
  background:linear-gradient(180deg,var(--pg45-gold),var(--pg45-coffee));
}
.pg45-section-more{
  font-size:12px;color:var(--pg45-coffee);font-weight:600;
}

/* ---------- promo strip ---------- */
.pg45-promo-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px;
}
.pg45-promo-card{
  background:linear-gradient(135deg,#3A5366,var(--pg45-slate));
  color:var(--pg45-cream);
  border-radius:var(--pg45-radius-sm);
  padding:10px 12px;
  border:1px solid rgba(201,162,75,.35);
  display:flex;flex-direction:column;gap:4px;
  min-height:62px;justify-content:center;
}
.pg45-promo-card strong{color:var(--pg45-gold-soft);font-size:13px;font-weight:800;}
.pg45-promo-card span{font-size:11.5px;color:var(--pg45-cream);opacity:.9;}

/* ---------- game grid ---------- */
.pg45-game-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.pg45-game{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;
  border:1px solid var(--pg45-line);
  border-radius:var(--pg45-radius-sm);
  padding:6px 4px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  text-align:center;
  cursor:pointer;
  overflow:hidden;
}
.pg45-game:active{transform:scale(.95);border-color:var(--pg45-gold);}
.pg45-game-img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:8px;background:var(--pg45-cream);
  pointer-events:none;
}
.pg45-game-name{
  margin-top:5px;font-size:10.5px;color:var(--pg45-ink-soft);
  font-weight:600;line-height:1.2;height:26px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;width:100%;
}

/* ---------- content blocks ---------- */
.pg45-block{
  background:#fff;border-radius:var(--pg45-radius);
  padding:14px;margin-top:18px;
  border:1px solid var(--pg45-line);
  box-shadow:var(--pg45-shadow-soft);
}
.pg45-block h2{
  font-size:16px;color:var(--pg45-slate);font-weight:800;margin-bottom:8px;
}
.pg45-block h3{
  font-size:13.5px;color:var(--pg45-coffee);font-weight:700;margin:10px 0 5px;
}
.pg45-block p{
  font-size:13.5px;color:var(--pg45-ink-soft);margin-bottom:8px;
}
.pg45-block ul{padding-left:18px;margin:6px 0;}
.pg45-block ul li{
  font-size:13px;color:var(--pg45-ink-soft);margin-bottom:4px;list-style:disc;
}
.pg45-block a.pg45-inline-link{
  color:var(--pg45-coffee);font-weight:700;border-bottom:1px dashed var(--pg45-taupe);
}

/* ---------- achievement grid ---------- */
.pg45-stat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;
}
.pg45-stat{
  background:linear-gradient(135deg,var(--pg45-paper),#fff);
  border:1px solid var(--pg45-line);
  border-radius:var(--pg45-radius-sm);
  padding:10px 6px;text-align:center;
}
.pg45-stat strong{
  display:block;font-size:18px;color:var(--pg45-coffee);font-weight:800;
}
.pg45-stat span{font-size:10.5px;color:var(--pg45-ink-soft);}

/* ---------- style chips ---------- */
.pg45-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.pg45-chip{
  font-size:11.5px;font-weight:700;color:var(--pg45-slate);
  background:var(--pg45-cream);border:1px solid var(--pg45-line);
  padding:5px 10px;border-radius:var(--pg45-radius-pill);
}

/* ---------- extended footer ---------- */
.pg45-ext-footer{
  margin-top:22px;
  background:var(--pg45-slate);color:var(--pg45-cream);
  border-radius:var(--pg45-radius) var(--pg45-radius) 0 0;
  padding:18px 14px 16px;
  border-top:3px solid var(--pg45-gold);
}
.pg45-ext-footer .pg45-brand{
  margin-bottom:8px;
}
.pg45-ext-footer .pg45-brand-name{color:#fff;font-size:16px;}
.pg45-ext-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pg45-ext-brand-row .pg45-logo{width:42px;height:42px;}
.pg45-ext-intro{
  font-size:12.5px;color:var(--pg45-cream);opacity:.88;line-height:1.6;margin-bottom:12px;
}
.pg45-ext-title{
  font-size:11px;color:var(--pg45-gold-soft);font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;margin:10px 0 6px;
}
.pg45-ext-links{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.pg45-ext-links a{
  display:block;font-size:12.5px;color:var(--pg45-cream);font-weight:600;
  padding:7px 9px;border-radius:6px;
  background:rgba(255,255,255,.05);
  border-left:2px solid transparent;
}
.pg45-ext-links a:active{background:rgba(255,255,255,.12);}
.pg45-ext-links a:hover{border-left-color:var(--pg45-gold);color:#fff;}
.pg45-ext-promo-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0 10px;
}
.pg45-ext-promo{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,var(--pg45-gold),#E7CD8A);
  color:var(--pg45-slate);font-weight:800;font-size:12.5px;
  padding:10px 6px;border-radius:8px;text-align:center;
}
.pg45-ext-disclaimer{
  margin-top:10px;font-size:11px;color:rgba(244,236,219,.65);line-height:1.55;
  border-top:1px dashed rgba(244,236,219,.18);padding-top:8px;
}

/* ---------- bottom copyright bar (above mobile nav) ---------- */
.pg45-copy{
  background:#0F1722;color:rgba(244,236,219,.6);
  text-align:center;font-size:11px;
  padding:8px 12px 4px;
}

/* ---------- mobile bottom nav ---------- */
.pg45-bottom-nav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:var(--pg45-max);
  height:var(--pg45-bottom-h);
  background:linear-gradient(180deg,#3A5366 0%,var(--pg45-slate) 100%);
  border-top:2px solid var(--pg45-gold);
  display:grid;grid-template-columns:repeat(5,1fr);
  z-index:70;
  box-shadow:0 -4px 18px rgba(0,0,0,.3);
}
.pg45-nav-item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--pg45-cream);
  font-size:10px;font-weight:600;
  text-align:center;
  transition:color .2s,background .2s;
  border-radius:0;
  min-height:44px;
}
.pg45-nav-item.pg45-active{color:var(--pg45-gold);}
.pg45-nav-item.pg45-active::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--pg45-gold);
}
.pg45-nav-icon{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
}
.pg45-nav-icon svg{width:22px;height:22px;display:block;}
.pg45-nav-icon i{
  font-size:20px;line-height:1;display:block;
}
.pg45-nav-label{font-size:10px;letter-spacing:.2px;}

/* ---------- desktop: keep mobile canvas ---------- */
@media (min-width:431px){
  body{background:#0b1119;}
}

/* ---------- small screens fine-tune ---------- */
@media (max-width:360px){
  .pg45-game-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
  .pg45-game-name{font-size:10px;}
  .pg45-hero-slide img{height:168px;}
}

/* ---------- hidden helper ---------- */
.pg45-hidden{display:none !important;}