/*
Theme Name: Pizza Fans Place
Author: PPC2
Description: Neon Pizzeria Arcade redesign. Layout + game structure remain in core-layout.css.
Version: 1.0
*/

@import url("https://fonts.googleapis.com/css2?family=Bungee:wght@400&family=Changa:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
@import url("/assetscore-layout.css");

:root{
  --bg-0:#0f1218;
  --bg-1:#1a202a;
  --bg-2:#232b35;
  --bg-3:#2f3945;
  --ink-0:#fef4df;
  --ink-1:#f5e6c8;
  --ink-2:#ccb997;
  --line:#5f4a36;
  --line-strong:#db7f35;
  --accent:#ff5c2b;
  --accent-2:#ffc44d;
  --accent-3:#39c776;
  --accent-4:#4fb5ff;
  --panel-dark:#1a1d24;
  --panel-mid:#252a34;
  --panel-warm:#2c1f1b;
  --panel-olive:#1f2a22;
  --shadow:0 14px 34px rgba(0, 0, 0, .36);
  --shadow-soft:0 8px 20px rgba(0, 0, 0, .3);
  --radius:1.4rem;
  --radius-soft:2.2rem;
  --radius-sharp:.45rem;
  --space-1:.45rem;
  --space-2:.85rem;
  --space-3:1.3rem;
  --space-4:2rem;
  --space-5:3rem;
  --font-ui:"Space Grotesk", "Segoe UI", sans-serif;
  --font-display:"Bungee", "Impact", sans-serif;
  --font-alt:"Changa", "Trebuchet MS", sans-serif;
  --font-mono:"SFMono-Regular", "Consolas", monospace;
  --bullet-emoji:"🍕";
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--ink-0);
  font-family:var(--font-ui);
  line-height:1.68;
  min-height:100vh;
  background:
    radial-gradient(circle at 8% -8%, rgba(255, 113, 63, .23), transparent 36%),
    radial-gradient(circle at 92% 9%, rgba(255, 196, 77, .16), transparent 30%),
    linear-gradient(170deg, #0f1218 0%, #131720 42%, #10151d 100%);
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

body::before{
  background:
    repeating-linear-gradient(
      45deg,
      rgba(241, 183, 104, .05) 0 12px,
      rgba(16, 19, 26, 0) 12px 24px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 99, 55, .04) 0 10px,
      rgba(16, 19, 26, 0) 10px 20px
    );
  opacity:.55;
}

body::after{
  background:
    linear-gradient(90deg, rgba(255, 123, 53, .09), transparent 19%, transparent 81%, rgba(57, 199, 118, .08));
}

img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

p{
  margin:.75rem 0;
  color:var(--ink-1);
}

h1,
h2,
h3,
h4{
  margin:0 0 .65rem;
  color:var(--ink-0);
  line-height:1.14;
}

h1,
h2{
  font-family:var(--font-display);
  letter-spacing:.03em;
}

h3,
h4,
.kicker,
.section-h3,
.form-group label,
.auth-buttons a,
.nav-link,
.btn,
.logout-form button,
.play-btn,
.submit-btn{
  font-family:var(--font-alt);
}

:focus{ outline:none; }

:focus-visible{
  box-shadow:0 0 0 3px rgba(79, 181, 255, .4);
  border-radius:.3rem;
}

@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.6rem .9rem;
  background:#251d18;
  border:1px solid #ec9142;
  box-shadow:var(--shadow);
  z-index:9999;
}

.container{
  width:min(1180px, calc(100% - 2rem));
  margin-inline:auto;
}

header{
  position:sticky;
  top:0;
  z-index:90;
  backdrop-filter:blur(8px);
  background:
    linear-gradient(90deg, rgba(25, 30, 38, .95), rgba(43, 30, 26, .92));
  border-bottom:2px solid rgba(219, 127, 53, .6);
}

header::after{
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg, #ff5c2b, #ffc44d 30%, #39c776 65%, #4fb5ff);
}

.header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
}

.logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:#fff1d5;
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 2.9vw, 2.2rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-shadow:0 2px 0 #452b17;
}

.logo::before{
  content:"🍕";
  font-size:1.08em;
  filter:drop-shadow(0 2px 0 rgba(0, 0, 0, .4));
}

.logo::after{
  content:"";
  position:absolute;
  left:2.2rem;
  bottom:-.32rem;
  width:68%;
  height:3px;
  background:linear-gradient(90deg, #ff5c2b, #ffc44d);
  clip-path:polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.user-menu{ margin-left:auto; }

.auth-buttons,
.user-info{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.auth-buttons a,
.nav-link,
.btn,
.logout-form button{
  min-height:2.3rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.46rem .9rem;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#ffeacc;
  border:1px solid #d27a39;
  background:
    linear-gradient(150deg, #2f1f1b, #1f2730);
  clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.auth-buttons a:hover,
.nav-link:hover,
.btn:hover,
.logout-form button:hover{
  transform:translateY(-2px);
  filter:saturate(1.16);
  box-shadow:0 8px 20px rgba(0, 0, 0, .3);
}

.user-info > span{
  color:#f4cca0;
  font-size:.9rem;
  border-left:3px solid #ff7b35;
  padding-left:.65rem;
}

.mark,
.glyph{
  color:#ffbe66;
  font-weight:700;
  margin-right:.2rem;
}

.points{
  padding:.34rem .7rem;
  color:#241105;
  font-weight:700;
  border:1px solid #e08f2c;
  background:linear-gradient(135deg, #ffd37a, #ffac48);
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.logout-form{ margin:0; }

main{ position:relative; }

.broadcast{
  display:grid;
  gap:1.45rem;
  margin:1.3rem 0 2.5rem;
}

.broadcast > section,
.broadcast > div{
  position:relative;
}

.hero,
.disclaimer-banner,
.content-section,
.games-section{
  border:1px solid rgba(255, 142, 62, .5);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.hero{
  background:
    linear-gradient(125deg, rgba(43, 30, 26, .95), rgba(22, 29, 37, .94) 60%, rgba(28, 37, 33, .95));
  padding:clamp(1.25rem, 2.6vw, 2.3rem);
  clip-path:polygon(0 0, 97% 0, 100% 20%, 100% 100%, 3% 100%, 0 80%);
}

.hero::before{
  content:"";
  position:absolute;
  right:-1.8rem;
  top:-1.8rem;
  width:12rem;
  aspect-ratio:1;
  border:2px dashed rgba(255, 196, 77, .4);
  border-radius:40%;
  transform:rotate(14deg);
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:linear-gradient(90deg, #ff5c2b, #ffc44d 37%, #39c776);
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.26rem .68rem;
  color:#ffdebb;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(255, 171, 94, .65);
  background:rgba(40, 28, 24, .72);
  clip-path:polygon(10% 0, 100% 0, 92% 100%, 0 100%);
}

.kicker::before{ content:"🔥"; }

.hero-title{
  margin-top:.85rem;
  font-size:clamp(1.9rem, 4.4vw, 3.7rem);
}

.hero-title__name{
  color:#ffe7bf;
  text-shadow:
    0 2px 0 #5a2a11,
    0 0 20px rgba(255, 153, 67, .22);
}

.hero-disclaimer{
  display:inline-block;
  margin:.34rem 0 .24rem;
  padding:.24rem .9rem .24rem .96rem;
  color:#2d1709;
  border:1px solid #ffb437;
  background:linear-gradient(120deg, #ffd869, #ffb347);
  clip-path:polygon(0 0, 100% 0, 93% 100%, 0 100%);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.35;
  max-width:min(100%, 560px);
  white-space:normal;
  text-wrap:balance;
}

.hero-lead{
  margin-bottom:0;
  max-width:68ch;
  color:#f3d4ad;
}

.hero-actions{
  margin-top:1.15rem;
  display:flex;
  flex-wrap:wrap;
  gap:.72rem;
}

.play-btn,
.submit-btn,
.age-popup__btn{
  border:1px solid #da6d34;
  background:linear-gradient(140deg, #ff5c2b, #d94722);
  color:#fff2df;
  font-size:.9rem;
  letter-spacing:.045em;
  font-weight:700;
  text-transform:uppercase;
  min-height:2.55rem;
  padding:.6rem 1.08rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.play-btn:hover,
.submit-btn:hover,
.age-popup__btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.12);
  box-shadow:0 10px 22px rgba(0, 0, 0, .34);
}

.play-btn.alt{
  border-color:#d3a436;
  color:#2b1809;
  background:linear-gradient(130deg, #ffd171, #ffb84f);
}

.disclaimer-banner{
  padding:1.1rem 1.2rem;
  border-color:rgba(79, 181, 255, .45);
  background:
    linear-gradient(130deg, rgba(26, 35, 44, .96), rgba(20, 43, 38, .92));
  clip-path:polygon(0 0, 98% 0, 100% 22%, 100% 100%, 2% 100%, 0 77%);
}

.disclaimer-banner .badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#89d2ff;
  font-size:1.1rem;
}

.disclaimer-banner .badge::before{ content:"🧾"; }

.content-section{
  padding:1.3rem 1.2rem;
  border-color:rgba(219, 127, 53, .45);
  background:
    linear-gradient(135deg, rgba(28, 31, 38, .96), rgba(45, 33, 29, .94));
  clip-path:polygon(0 0, 99% 0, 100% 15%, 100% 100%, 1% 100%, 0 86%);
}

.content-section:nth-of-type(2n){
  border-color:rgba(57, 199, 118, .4);
  background:
    linear-gradient(135deg, rgba(24, 35, 32, .95), rgba(28, 31, 39, .95));
}

.content-section h2,
.games-section h2{
  color:#fff0d4;
  font-size:clamp(1.2rem, 2.8vw, 2rem);
  text-shadow:0 1px 0 rgba(0, 0, 0, .55);
}

.section-lead{
  color:#d6c6a8;
}

.games-section{
  padding:1.25rem 1.15rem 1.35rem;
  border-color:rgba(255, 196, 77, .5);
  background:
    linear-gradient(138deg, rgba(39, 29, 25, .96), rgba(30, 33, 41, .95));
  clip-path:polygon(1% 0, 100% 0, 99% 100%, 0 100%);
}

.games-grid{
  margin-top:.95rem;
  display:grid;
  gap:.85rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.panel,
.card,
.tile,
.faq-item,
.game-card,
.terms-panel,
.footer-section,
.contact-form{
  border:1px solid rgba(227, 144, 71, .48);
  box-shadow:var(--shadow-soft);
}

.panel,
.card,
.contact-form,
.terms-panel{
  padding:1rem;
  background:linear-gradient(130deg, rgba(35, 31, 30, .9), rgba(31, 35, 43, .86));
}

.panel--glass{
  background:linear-gradient(135deg, rgba(33, 40, 50, .86), rgba(36, 31, 27, .84));
}

.panel--marble{
  background:
    linear-gradient(130deg, rgba(39, 31, 23, .9), rgba(33, 39, 48, .88));
}

.tag{
  display:inline-flex;
  color:#ffba73;
  letter-spacing:.08em;
  font-size:.72rem;
  text-transform:uppercase;
  font-weight:700;
}

.grid-tiles{
  display:grid;
  gap:.8rem;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}

.tile{
  padding:.75rem .82rem;
  background:linear-gradient(145deg, rgba(36, 33, 27, .9), rgba(27, 39, 32, .88));
  clip-path:polygon(0 0, 94% 0, 100% 21%, 100% 100%, 6% 100%, 0 79%);
}

.tile h3,
.tile h4{
  color:#ffe5bf;
  font-size:1rem;
}

.mini{
  margin:0;
  color:#ccb79c;
  font-size:.92rem;
}

.notice-list,
.list,
.quick-rules__list,
.game-coming__list{
  margin:0;
  padding-left:0;
  list-style:none;
}

.notice-list li,
.list li,
.quick-rules__list li,
.game-coming__list li{
  position:relative;
  padding-left:1.5rem;
  margin:.43rem 0;
  color:#f0dbbc;
}

.notice-list li::before,
.list li::before,
.quick-rules__list li::before,
.game-coming__list li::before{
  content:var(--bullet-emoji);
  position:absolute;
  left:0;
  top:0;
}

.game-card{
  padding:.95rem;
  display:flex;
  flex-direction:column;
  min-height:100%;
  gap:.55rem;
  background:linear-gradient(130deg, rgba(42, 30, 24, .94), rgba(23, 36, 35, .92));
  clip-path:polygon(0 0, 94% 0, 100% 20%, 100% 100%, 6% 100%, 0 80%);
}

.game-card h3{
  margin:0;
  display:flex;
  align-items:center;
  gap:.48rem;
}

.game-icon{
  width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #eca652;
  background:linear-gradient(140deg, #ffd677, #ffb04f);
  color:#2a1204;
  clip-path:polygon(0 0, 86% 0, 100% 32%, 100% 100%, 14% 100%, 0 68%);
}

.game-title{
  color:#ffe9c8;
  font-size:1.14rem;
}

.game-desc{
  margin:0;
  color:#dec4a1;
  flex:1;
}

.faq-wrap{
  margin-top:.6rem;
  display:flex;
  gap:.75rem;
  flex-wrap:nowrap;
  align-items:stretch;
}

.faq-item{
  flex:1 1 0;
  min-width:0;
  padding:.8rem .85rem;
  background:linear-gradient(145deg, rgba(34, 38, 48, .88), rgba(44, 31, 27, .88));
  clip-path:polygon(0 0, 95% 0, 100% 18%, 100% 100%, 5% 100%, 0 82%);
}

.faq-item h3{
  color:#ffdcae;
  font-size:.96rem;
}

.faq-item p{
  margin:0;
  font-size:.9rem;
}

.contact-form{
  margin-top:.68rem;
  background:linear-gradient(130deg, rgba(29, 34, 43, .94), rgba(45, 32, 27, .92));
  clip-path:polygon(0 0, 98% 0, 100% 14%, 100% 100%, 2% 100%, 0 86%);
}

.form-group{ margin-bottom:.85rem; }

.form-group label{
  display:block;
  margin-bottom:.24rem;
  color:#ffd28b;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}

input,
textarea,
select,
.contact-form input,
.contact-form textarea,
.game-page input,
.game-page textarea,
.game-page .bet-input,
#custom-bet{
  width:100%;
  color:#ffe9cd;
  font-size:.95rem;
  padding:.6rem .72rem;
  border:1px solid #8a603e;
  background:linear-gradient(140deg, #242a35, #2f241f);
  clip-path:polygon(0 0, 96% 0, 100% 22%, 100% 100%, 4% 100%, 0 78%);
}

input::placeholder,
textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.game-page input::placeholder,
.game-page textarea::placeholder{
  color:#bcaa93;
  opacity:1;
}

textarea{ min-height:120px; resize:vertical; }

.submit-btn{
  width:100%;
  margin-top:.14rem;
}

.page-copy{ color:#ead6b7; }

.terms-stack{
  margin-top:.95rem;
  display:grid;
  gap:.8rem;
}

.terms-panel{
  background:linear-gradient(140deg, rgba(33, 37, 47, .9), rgba(42, 30, 25, .88));
}

.section-h3{
  font-size:1.08rem;
  color:#ffe7c0;
}

.page-id .hero,
.page-about-us .hero,
.page-contact-us .hero,
.page-privacy-policy .hero,
.page-terms-and-conditions .hero{
  margin-top:1.24rem;
}

.about-hero{
  background:
    linear-gradient(125deg, rgba(38, 28, 25, .95), rgba(22, 35, 38, .93));
}

.contact-hero{
  background:
    linear-gradient(125deg, rgba(29, 36, 45, .94), rgba(46, 31, 25, .94));
}

footer{
  margin-top:2.1rem;
  border-top:2px solid rgba(220, 129, 57, .5);
  background:linear-gradient(180deg, rgba(21, 27, 36, .94), rgba(28, 21, 19, .95));
}

.footer-content{
  padding:1.18rem 0 .82rem;
  display:grid;
  gap:.9rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.footer-section{
  padding:.72rem .78rem;
  background:linear-gradient(140deg, rgba(38, 30, 26, .9), rgba(25, 32, 40, .89));
  clip-path:polygon(0 0, 95% 0, 100% 18%, 100% 100%, 5% 100%, 0 82%);
}

.footer-section h4{
  margin:0 0 .35rem;
  color:#ffd391;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.footer-section p{
  margin:0;
  font-size:.9rem;
  color:#e3caab;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:.28rem;
}

.footer-links a{
  color:#fbe7c9;
  font-weight:600;
}

.footer-links a:hover{ color:#ffc169; }

.footer-bottom{
  border-top:1px solid rgba(210, 128, 64, .4);
  padding:.82rem 0 1.14rem;
}

.footer-bottom p{
  margin:.26rem 0;
  font-size:.88rem;
  color:#d8c2a6;
}

.age-popup{
  position:fixed;
  inset:0;
  z-index:220;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(8, 9, 12, .68);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease;
}

.age-popup--open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.age-popup__panel{
  width:min(460px, 100%);
  padding:1.1rem;
  border:1px solid #f3a33f;
  background:linear-gradient(140deg, #2f1f1a, #1e2832);
  box-shadow:0 16px 36px rgba(0, 0, 0, .45);
  clip-path:polygon(0 0, 96% 0, 100% 18%, 100% 100%, 4% 100%, 0 82%);
  text-align:center;
}

.age-popup__text{
  margin:0 0 .84rem;
  color:#ffd8a4;
  font-size:.9rem;
  line-height:1.45;
  font-weight:700;
  max-width:30ch;
  margin-inline:auto;
  text-wrap:balance;
}

.contact-form button,
#contact-form button{ cursor:pointer; }

#contact-form{ scroll-margin-top:92px; }

main{
  animation:entry .55s ease both;
}

@keyframes entry{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   GAME AREA SAFETY STYLING (selectors required by prompt)
========================================================= */
.game-page{
  color:#f3e1c2;
}

.desktop-layout,
.mobile-layout{
  border:1px solid rgba(236, 156, 74, .55);
  background:linear-gradient(135deg, rgba(32, 27, 27, .9), rgba(23, 33, 39, .88));
  box-shadow:var(--shadow);
}

[class*="game-"],
[class*="quick-rules"]{
  border-color:rgba(201, 133, 63, .52);
}

.game-page button,
.game-page .bet-btn,
.game-page .bet-btn-mobile,
.game-page .bet-set-btn,
.game-page #predict-low,
.game-page #predict-high,
.game-page #predict-red,
.game-page #predict-blue,
.game-page #spin-btn,
.game-page #deal-btn,
.game-page #deal-btn-mobile,
.game-page #hit-btn,
.game-page #stand-btn,
.game-page #hit-btn-mobile,
.game-page #stand-btn-mobile{
  color:#fff3e3;
  border:1px solid #d46f33;
  background:linear-gradient(140deg, #ff5f2c, #cc4120);
  clip-path:polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  padding:calc(.58rem + .2rem) calc(.95rem + .22rem);
  font-family:var(--font-alt);
  letter-spacing:.04em;
  font-size:calc(.88rem + .04rem);
  font-weight:700;
}

.game-page button:hover,
.game-page .bet-btn:hover,
.game-page .bet-btn-mobile:hover,
.game-page .bet-set-btn:hover,
.game-page #predict-low:hover,
.game-page #predict-high:hover,
.game-page #predict-red:hover,
.game-page #predict-blue:hover,
.game-page #spin-btn:hover,
.game-page #deal-btn:hover,
.game-page #deal-btn-mobile:hover,
.game-page #hit-btn:hover,
.game-page #stand-btn:hover,
.game-page #hit-btn-mobile:hover,
.game-page #stand-btn-mobile:hover{
  filter:saturate(1.16);
  box-shadow:0 9px 20px rgba(0, 0, 0, .34);
}

#predict-low,
#predict-high,
#predict-red,
#predict-blue{
  min-width:122px;
}

#predict-red{
  background:linear-gradient(135deg, #f24f3b, #b93225);
  border-color:#9a2c21;
}

#predict-blue{
  background:linear-gradient(135deg, #5ca7ea, #3278b7);
  border-color:#2e5f8b;
}

.game-page .bet-btn.is-active,
.game-page .bet-btn-mobile.is-active,
.game-page .bet-set-btn.is-active{
  color:#2f1605;
  border-color:#d79834;
  background:linear-gradient(130deg, #ffd369, #ffae40);
}

#game-area,
#game-result,
#predictor-result,
#dice-game-result,
#slot-result,
#slot-reels,
#dice-area,
#player-points,
#player-points-mobile,
#current-bet,
#current-bet-mobile,
#games-won,
#games-won-mobile,
#dealer-value,
#dealer-value-mobile,
#player-value,
#player-value-mobile{
  border:1px solid #90623f;
  background:linear-gradient(140deg, rgba(35, 39, 50, .9), rgba(47, 35, 30, .88));
  color:#ffe8c8;
}

.game-page .chip,
.game-page .coin,
.game-page .token{
  border:1px solid #e4a047;
  background:linear-gradient(130deg, #ffd16b, #ffaf45);
  color:#2d1705;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:960px){
  .header-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .user-menu,
  .user-info,
  .auth-buttons{
    width:100%;
  }

  .faq-wrap{
    flex-wrap:wrap;
  }

  .faq-item{
    flex:1 1 calc(50% - .4rem);
    min-width:220px;
  }
}

@media (max-width:760px){
  .container{ width:min(1180px, calc(100% - 1.05rem)); }

  .logo{
    font-size:clamp(1.08rem, 7vw, 1.48rem);
  }

  .hero,
  .content-section,
  .disclaimer-banner,
  .games-section,
  .panel,
  .card,
  .contact-form,
  .game-card,
  .footer-section,
  .faq-item,
  .tile,
  .age-popup__panel{
    clip-path:polygon(0 0, 97% 0, 100% 16%, 100% 100%, 3% 100%, 0 84%);
  }

  .hero-actions,
  .auth-buttons{
    gap:.55rem;
  }

  .play-btn,
  .submit-btn,
  .age-popup__btn,
  .auth-buttons a,
  .nav-link,
  .btn,
  .logout-form button{
    width:100%;
  }

  .games-grid{
    grid-template-columns:1fr;
  }

  .grid-tiles{
    grid-template-columns:1fr;
  }

  .faq-item{
    flex:1 1 100%;
  }
}

@media (max-width:500px){
  .header-content{ padding:.65rem 0; }

  .hero-title{
    font-size:clamp(1.6rem, 8vw, 2.3rem);
  }

  .kicker,
  .hero-disclaimer,
  .form-group label,
  .footer-section h4{
    letter-spacing:.04em;
  }

  .points{
    width:100%;
    text-align:center;
  }
}