/* --------- Base (inherits your body font) --------- */
:root{
  --bg:#ffcc99;         /* page background */
  --card:#ffe2c4;       /* cards a bit lighter than bg */
  --ink:#000000;        /* main text (black) */
  --muted:#000000;      /* secondary text */
  --ring:rgba(0,0,0,.14);/* subtle borders/shadows */
  --brand:rgba(15, 23, 42, 0.95);      /* brand/primary button bg */
  --brand-ink:#ffcc99;  /* text on brand surfaces */
}

  html,body{margin:0;height:100%}
  body{
    font-family: 'Roboto'; 
    background: linen;/*var(--bg);*/
    color: var(--ink);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }
  a{color:inherit;text-decoration:none}
  .container{max-width:1100px;margin:0 auto;padding:0 1rem}

  /* --------- Header / Nav --------- */
  header{
    position: sticky; top:0; z-index:50;
    background: linear-gradient(#ffffffcc,#ffffffcc) padding-box, linear-gradient(var(--bg),var(--bg)) border-box;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ring);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
  .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
  .menu{display:flex; gap:1.2rem; align-items:center}
  .menu a{opacity:.9}
  .menu a:hover{opacity:1}
  .cta{
    padding:1rem 1rem; border-radius:10px; background:#0c1b3a; color:var(--brand-ink);
    font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.12);
  }
/* Compact variant of .cta for the header profile button */
.cta.js-profile{
  display:inline-flex; align-items:center; gap:.5rem;
  /*padding:0;*/
  background:transparent;
  color:inherit;
  box-shadow:none; border:none;
}
.cta.js-profile:hover,
.cta.js-profile:focus-visible{
  background:rgba(0,0,0,.06);
  outline:none;
  border-radius:12px;
}

/* Avatar chip (works for either class name) */
.avatar, .profile-chip{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  font-weight:700; font-size:.75rem; line-height:1;
  color:#333; background:#eee;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}
/* When it’s an image, hide initials */
.avatar.img, .profile-chip.img{ color:transparent; }

/* Optional text next to the chip */
.profile-label{
  font-weight:600; font-size:.9rem; line-height:1;
  white-space:nowrap;
}


  /* mobile menu */
  .burger{display:none; background:none; border:0; padding:.4rem}
  .burger span{display:block; width:22px; height:2px; background:#223; margin:5px 0}
  @media (max-width:800px){
    .menu{display:none}
    .burger{display:block}
    .menu.mobile{
      display:grid; gap:.8rem; padding:1rem; border-top:1px solid var(--ring);
    }
  }

  /* --------- Hero --------- */
  .hero{padding: clamp(2rem, 6vw, 4rem) 0 1rem}
  .hero h1{font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height:1.15; margin:.25rem 0}
  .hero p{color:var(--muted); max-width:62ch; margin:.4rem 0 1rem;font-size: 1.25rem;}
  .pill{
    display:inline-flex; align-items:center; gap:.5rem; background:darkorange; color:#ffffff;
    padding:.35rem .7rem; border-radius:999px; font-weight:600; border:1px solid #d1f0e2;
  }
 .pill.red{
   background:red; color:#ffffff;
    
  }

  /* --------- Game grid --------- */
  .grid{
    display:grid; gap:1rem;
    grid-template-columns: repeat(12, 1fr);
  }
  .card{
    grid-column: span 4;
    background: var(--card);
    border: 1px solid var(--ring);
    border-radius: 16px;
    overflow:hidden;
    display:flex; flex-direction:column;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .card:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); }
    
  .thumb{
    height:150px; background:
      linear-gradient(120deg,#e6f6ee,#f5fbf8);
    border-bottom:1px solid var(--ring);
    display:grid; place-items:center; font-weight:700; color:#000000;
  }
    
    /* Fallback gradient if --thumb not set */
.thumb{
  height: 150px;
  border-bottom: 1px solid var(--ring);
  background:
    var(--thumb, linear-gradient(120deg,#e6f6ee,#f5fbf8))
    center / cover no-repeat;
  overflow: hidden;
  display: grid; place-items: center;
  color: #000;
}

  .card h3{margin:.9rem 1rem 0}
  .card p{margin:.35rem 1rem .9rem; color:var(--muted); font-size: 1.1rem;}
  .actions{display:flex; gap:.6rem; margin:0 1rem 1rem}
  .btn{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.55rem .8rem; border-radius:10px; border:1px solid var(--ring);
    font-weight:600; background:#fff;
  }
  .btn.play{background:var(--brand); color:var(--brand-ink); border-color:transparent}
  @media (max-width:1000px){ .card{grid-column: span 6} }
  @media (max-width:640px){ .card{grid-column: span 12} }

  /* --------- Footer --------- */
  footer{
    margin-top: 2rem; padding: 2.25rem 0 2rem;
   /* background: linear-gradient(180deg,#eefbea,#e7f6ef);*//*--light green*/
      background: linear-gradient(180deg,#ffffff,#ffffff);/*--white*/
    border-top: 1px solid var(--ring);
  }
  .foot-top{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: 1rem;
  }
  .social{display:flex; gap:.8rem}
  .icon{
    width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
    background:#ffffff; border:1px solid var(--ring);
    transition: transform .12s ease;
  }
  .icon:hover{ transform: translateY(-1px); }
  .cols{
    display:grid; gap:1.2rem; grid-template-columns: repeat(4,1fr);
  }
  .cols h4{margin:0 0 .4rem; letter-spacing:.02em}
  .cols a{display:block; padding:.25rem 0; color:#31463b}
  @media (max-width:800px){
    .foot-top{flex-direction:column; align-items:flex-start}
    .cols{grid-template-columns: repeat(2,1fr)}
  }
  @media (max-width:520px){
    .cols{grid-template-columns:1fr}
  }

.gamehutFont{
/*font-family: "baudot-pop-open", sans-serif;
font-weight: 400;
font-style: normal;*/
    font-family: "baudot", sans-serif;
font-weight: 900;
font-style: normal;
    font-size: 1.75rem;
    
    font-family: "baudot", sans-serif;
font-weight: 900;
font-style: normal;
}
   

    /* better mobile spacing for hero title */
.hero h1 { margin-top: .75rem; }

/* add side padding on narrow screens so text doesn't hug edges */
@media (max-width: 600px){
  .hero h1 { padding-inline: 12px; }
  /* optional: a touch more container breathing room */
  .container { padding: 0 1.25rem; }
}
/* Hide mobile menu by default */
.menu.mobile { display: none; }

/* Belt-and-suspenders: if hidden, stay hidden no matter what */
.menu.mobile[hidden] { display: none !important; }

/* Your existing breakpoint */
@media (max-width:800px){
  .menu { display: none; }          /* hide desktop menu on phones */
  .burger { display: block; }       /* show burger on phones */
  .menu.mobile {                    /* show mobile menu grid when not [hidden] */
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border-top: 1px solid var(--ring);
  }
}

/* === Pure CSS marquee === */
/* The outer card that holds BOTH title and rail */
.showcase-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;                   /* rounds the rail edges too */
  margin: clamp(1rem, 3.5vw, 2rem) 0; /* vertical rhythm; no side margins (container handles that) */
}

/* Title area inside the card */
.showcase-head{
  text-align:center;
  padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1rem, 3vw, 2rem)  /* top/sides */
           clamp(.75rem, 2.5vw, 1.25rem);                       /* bottom smaller to tighten to rail */
}
.showcase-head h2{
  margin:0 0 .4rem;
  font-weight:800;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
}
.showcase-head p{
  margin:0;
  color:#374151;
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
}

/* Rail now acts like part of the card */
.logo-rail.slim{
  /* REMOVE its own card styling */
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;                         /* no outside gap */
  padding: clamp(.6rem, 2.2vw, 1rem) clamp(1rem, 3vw, 2rem);  /* inside the card */
  /* keep the edge fade so logos don’t pop against the white card */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* Your existing rail guts (keep as you had) */
.logo-rail .track{
  display:inline-flex;
  align-items:center;
  gap:0;                    /* gap is on .set for a perfect seam */
  height: var(--height, 90px);
  animation: railScroll var(--speed, 16s) linear infinite;
  will-change: transform;
}
.logo-rail .set{ display:inline-flex; align-items:center; gap: var(--gap, 18px); }

.logo-rail .logo{
  display:inline-grid; place-items:center;
  height: var(--height, 90px);
  min-width: clamp(120px, 14vw, 180px);
  padding-inline: clamp(6px, 1.4vw, 14px);
}
.logo-rail .logo img{
  max-height: calc(var(--height, 90px) - 16px);
  max-width: 100%;
  object-fit: contain; display:block;
  filter: grayscale(1) contrast(1.05); opacity:.9;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.logo-rail .logo:hover img{ filter:none; opacity:1; transform: translateY(-1px); }

@keyframes railScroll{ to { transform: translate3d(-50%,0,0); } }

/* Optional: slightly smaller rail on phones so it fits the card nicely */
@media (max-width: 560px){
  .logo-rail .track{ height: 72px; }
  .logo-rail .logo img{ max-height: 60px; }
}

/* Pause on hover (desktops only) */
@media (hover: hover) and (pointer: fine){
  .logo-rail:hover .track { animation-play-state: paused; }
}

/* Respect reduce motion */
@media (prefers-reduced-motion: reduce){
  .logo-rail .track { animation: none !important; }
}
    
    
    
/* 1) Declareing the font  */
@font-face {
  font-family: 'Parody';
  src:
    url('/buzzrs/assets/styles/fonts/parody.woff2') format('woff2'),
    url('/buzzrs/assets/styles/fonts/parody.woff') format('woff'),
    url('/buzzrs/assets/styles/fonts/parody.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 1) Declareing the font  */
@font-face {
  font-family: 'Fascinate';
  src:
    url('/diceKrush/assets/styles/fonts/Fascinate-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* 2) Apply it with a class */
.brandedfont-buzzrs {
  font-family: 'Parody', 'gameFont', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 900; font-size: x-large;
}
.brandedfont-diceKrush {
 font-family: 'Fascinate';
    font-weight: 400;

}

    .card { position: relative; border-radius:12px; overflow:hidden; }
.badge {
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:999px;
  font:700 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--accent, #ff3b30); color:#fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  pointer-events:none; z-index: 5;
}
.badge-classic {

  background: var(--accent, navy); color:#fff;

}
.badge-coming-soon {

  background: var(--accent, green); color:#fff;

}

/* --- Fix hero spacing on narrow screens without affecting other sections --- */
@media (max-width: 640px) {
  .container.hero {
    padding: 2.5rem 1.25rem 1.75rem !important;
  }
  .container.hero p {
    padding-inline: 0.5rem;
  }
}

/* Hero container fix (adds an inner wrapper for better mobile padding) */
.hero {
  display: flex;
  justify-content: center;
}

.hero-inner {
  width: 100%;
  max-width: 1100px;
 padding: clamp(2rem, 8vw, 5rem) 1.25rem clamp(1.5rem, 6vw, 3rem);
  text-align: left;
  padding: 0rem 1.25rem 1.25rem;
}

/* Text adjustments for mobile only */
@media (max-width: 640px) {
  .hero-inner {
    padding-inline: 1.25rem;
    text-align: left;
  }
  .hero-inner h1,
  .hero-inner p {
    padding-inline: 0.5rem;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .hero-inner {
    padding: 2rem 1rem 1.5rem;
  }
  .hero-inner h1,
  .hero-inner p {
    line-height: 1.35;
  }
}

    
/* Thumb capability chips */
.thumb { position: relative; }
.thumb-chips{
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: .28rem .5rem;
  border-radius: 999px;
  font: 600 12px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: color-mix(in srgb, #fff 88%, var(--card, #ffe2c4));
  color: #111;
  border: 1px solid var(--ring, rgba(0,0,0,.14));
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.chip svg{ width: 14px; height: 14px; display:inline-flex;  }
@media (max-width: 520px){
  .chip{ font-size: 11px; padding: .24rem .45rem; }
  .chip svg{ width: 13px; height: 13px; }
}

    /* make chips ignore clicks unless you hover them directly */
.thumb { position: relative; overflow: hidden; z-index: 0; }
.thumb-chips { pointer-events: none; }      /* clicks pass through */
.chip { pointer-events: auto; }             /* still hoverable/clickable if needed */

/* ensure the buttons sit above any overlay just in case */
.actions { position: relative; z-index: 1; }
.thumb-chips{
  left: 10px; right: 10px; bottom: 10px; top: auto; /* no vertical overflow */
}

    /* In-flow chips: never overlap buttons */
.capability-chips{
  position: static;             /* ensure they participate in normal flow */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: .5rem;            /* space from paragraph above */
  margin-bottom: .5rem;         /* space before buttons */
}

/* Reuse your existing .chip styles */
.capability-chips .chip { /* optional: tweak size for this row */
  font-size: 12px;
  padding: .32rem .55rem;
}

/* Make sure buttons sit cleanly after chips */
.card { display: flex; flex-direction: column; }
.card .actions { flex: 0 0 auto; margin-top: .25rem; position: relative; z-index: 0; }

/* IMPORTANT: keep overlay chips only for the image version */
.thumb-chips{ position: absolute; } /* (unchanged for overlay-on-image) */

/* If you previously used .thumb-chips below the image, neutralize it */
.chips-below, .capability-chips { position: static !important; }  /* belt & suspenders */

    
    /* match the card's existing 1rem side margins */
.card .best-suited{
  margin: .35rem 1rem 0;         /* top | sides | bottom */
  color: var(--muted);
  font-weight: 600;              /* optional: emphasize label */
}

.card .capability-chips{
  position: static;              /* in-flow layout */
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin: .5rem 1rem .75rem;     /* sides = 1rem to align with others */
}



.title-card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.1);
  padding:clamp(1.25rem,4vw,2.25rem);
  margin:clamp(1rem,4vw,2rem) auto;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

.title-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  max-width:800px;
}

.title-main{
  font-size:clamp(1.25rem,3vw,1.9rem);
  font-weight:800;
  margin:0;
  line-height:1.25;
  color:#000;
}

.title-sub{
  font-size:clamp(.95rem,1.8vw,1.1rem);
  font-weight:500;
  margin:0;
  color:#374151;
}