:root{
  --bg:#fff6e2;
  --bg2:#ffe8c8;
  --card:#fffdf7;
  --ink:#211714;
  --muted:#6d5a52;
  --line:#2d201b;
  --line-soft:#caa588;
  --yellow:#ffd86b;
  --cream:#fff2cf;
  --red:#ff5a4f;
  --pink:#ff86b0;
  --rose:#ffb0bb;
  --green:#79d67d;
  --dark:#281c18;
  --shadow:8px 8px 0 rgba(45,32,27,.16);
  --shadow-lg:14px 14px 0 rgba(45,32,27,.18);
  --radius:28px;
  --ring:0 0 0 4px rgba(255,90,79,.22);
  --maxw:1240px;
  --gray-150:#f9f1e7;
  --gray-200:#ecd3bd;
}

[data-theme="dark"]{
  --bg:#1f1716;
  --bg2:#2b1f1d;
  --card:#322421;
  --ink:#fff5e8;
  --muted:#d8bca6;
  --line:#f4d2a2;
  --line-soft:#8d6757;
  --yellow:#ffd86b;
  --cream:#5a412f;
  --red:#ff776d;
  --pink:#ff97bf;
  --rose:#ffbbc9;
  --green:#8ee495;
  --dark:#160f0f;
  --gray-150:#3a2c29;
  --gray-200:#5b463f;
  --shadow:8px 8px 0 rgba(0,0,0,.28);
  --shadow-lg:14px 14px 0 rgba(0,0,0,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,90,79,.12) 0 42px, transparent 43px),
    radial-gradient(circle at 90% 8%, rgba(255,134,176,.14) 0 56px, transparent 57px),
    radial-gradient(circle at 80% 60%, rgba(255,216,107,.16) 0 78px, transparent 79px),
    radial-gradient(circle at 18% 82%, rgba(121,214,125,.10) 0 52px, transparent 53px),
    linear-gradient(180deg,#fff9f0 0%, var(--bg) 26%, #ffe7d1 100%);
  min-height:100vh;
}

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

.container{
  width:min(var(--maxw),calc(100vw - 28px));
  margin:0 auto;
}

.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}
.w100{width:100%}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* custom cursors */
html, body, .topbar, .header, .hero, .section, .footer, .cartDrawer__panel, .modal__panel, .pizzaDialog, .diyDialog{
  cursor:url("assets/cursors/cursor.png") 16 16, auto !important;
}
a,button,.card,.addBtn,.catPill,.chip,.btn,.iconbtn,.cartbtn,.hamburger,.qty button,.pizzaSegBtn,.pizzaExtraCard,.diySegBtn,.diyExtra,.toplink,label,input[type="radio"],input[type="checkbox"],[role="button"]{
  cursor:url("assets/cursors/pointer.png") 12 4, pointer !important;
}
input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),textarea,select,[contenteditable="true"]{
  cursor:url("assets/cursors/text.png") 10 16, text !important;
}

/* opening banner */
.comingSoon{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:1000;
  background:rgba(36,23,20,.24);
  backdrop-filter:blur(6px);
}

/* ADD THIS LINE */
.comingSoon.hidden{
  display: none !important;
}
.comingSoonCard{
  min-width:min(92vw,460px);
  padding:28px 26px;
  border-radius:32px;
  background:linear-gradient(180deg,#fff9ef,#ffe6c6);
  border:4px solid var(--line);
  box-shadow:var(--shadow-lg);
  text-align:center;
  transform:rotate(-1.5deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.comingSoonPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:3px solid #f0c86e;
  border-radius:999px;
  background:#fffdf5;
  color:var(--red);
  font-weight:900;
}

.comingSoonTitle{
  font-size:34px;
  font-weight:900;
  letter-spacing:.02em;
  color:#101727;
}

.comingSoonSub{
  font-size:18px;
  font-weight:800;
  color:#6c737f;
  max-width:24ch;
  line-height:1.45;
}

.hero-oven{
  position:relative;
  width:420px;
  margin:auto;
}

.oven{
  width:280px;
  display:block;
  margin:auto;
}

.pizza{
  position:absolute;
  width:120px;
  left:50%;
  top:73%;
  transform:translate(-50%, -50%);
  animation:spinPizza 20s linear infinite;
}

@keyframes spinPizza{
  from{transform:translate(-50%, -50%) rotate(0deg)}
  to{transform:translate(-50%, -50%) rotate(360deg)}
}

.smoke{
  position:absolute;
  left:50%;
  top:36%;
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
  filter:blur(10px);
  transform:translate(-50%,0);
  animation:smoke 4s infinite ease-in-out;
}

@keyframes smoke{
  0%{opacity:0.3; transform:translate(-50%,0)}
  50%{opacity:0.6; transform:translate(-50%,-20px)}
  100%{opacity:0; transform:translate(-50%,-40px)}
}

.topbar{
  position:relative;
  z-index:20;
  background:linear-gradient(90deg,var(--red),#ff6f73 42%, var(--pink));
  border-bottom:4px solid var(--line);
  color:#120d08;
}

.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-9px;
  height:18px;
  background:radial-gradient(circle at 9px 9px, transparent 8px, var(--line) 8.5px, var(--line) 9px, transparent 9.5px) repeat-x;
  background-size:18px 18px;
  opacity:.2;
  pointer-events:none;
}

.topbar__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 0;
  flex-wrap:wrap;
}

.topbar__left,.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.toplink{
  font-weight:900;
  color:#120d08;
}

.toplink:hover{text-decoration:underline}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  border:3px solid var(--line);
  font-weight:900;
  box-shadow:4px 4px 0 rgba(45,32,27,.12);
  background:#fff;
}

.pill--pink{background:var(--pink);color:#2b1614}
.pill--gray{background:#fff6ea;color:var(--ink)}
.pill--yellow{background:var(--yellow);color:#1b1408}

.header{
  position:sticky;
  top:0;
  z-index:30;
  padding:12px 0;
}

.header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  background:rgba(255,253,247,.95);
  backdrop-filter:blur(10px);
  border:4px solid var(--line);
  border-radius:999px;
  padding:12px 18px;
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
}

.brand__logo{
  width:58px;
  height:58px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--yellow),#ffc43a);
  border:4px solid var(--line);
  display:grid;
  place-items:center;
  font-weight:900;
  color:#120d08;
  box-shadow:5px 5px 0 rgba(45,32,27,.18);
  font-size:20px;
  transform:rotate(-6deg);
}

.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.brand__text strong{
  font-size:22px;
  letter-spacing:.03em;
}

.brand__text small{
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}

.nav{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.nav a{
  padding:10px 16px;
  border-radius:999px;
  border:3px solid transparent;
  font-weight:900;
  color:var(--ink);
}

.nav a:hover{
  background:var(--cream);
  border-color:var(--line);
  transform:translateY(-1px);
}

.header__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.iconbtn,.cartbtn,.hamburger{
  border:4px solid var(--line);
  background:var(--card);
  color:var(--ink);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.iconbtn{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  font-size:18px;
}

.cartbtn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  font-weight:900;
}

.cartbtn__badge{
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  border:3px solid var(--line);
}

.hamburger{
  display:none;
  width:54px;
  height:52px;
  padding:10px;
  gap:5px;
  flex-direction:column;
  justify-content:center;
}

.hamburger span{
  display:block;
  height:4px;
  background:var(--ink);
  border-radius:999px;
}

.hero{padding:24px 0 34px}

.hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
  align-items:stretch;
}

.hero__copy,.hero__card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,244,224,.95));
  border:4px solid var(--line);
  border-radius:38px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

.hero__copy{padding:28px 28px 24px}

.hero__copy::before,.hero__card::before{
  content:"";
  position:absolute;
  inset:auto auto -25px -15px;
  width:140px;
  height:80px;
  background:var(--pink);
  opacity:.18;
  border-radius:60px;
  transform:rotate(-12deg);
}

.hero h1{
  margin:0;
  font-size:clamp(40px,5vw,64px);
  line-height:.98;
  max-width:11ch;
  font-weight:900;
}

.accent{
  color:var(--red);
  text-shadow:3px 3px 0 rgba(255,216,107,.85);
}

.lead{
  font-size:19px;
  max-width:34ch;
  font-weight:700;
  margin:14px 0 0;
}

.hero__actions,.hero__trust,.hero__search,.hero__notice{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.btn{
  border:4px solid var(--line);
  background:var(--card);
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:var(--shadow);
  transition:.15s ease;
  transform-origin:center;
}

.btn:hover,.addBtn:hover,.catPill:hover,.cartbtn:hover,.iconbtn:hover,.segBtn:hover,.diySegBtn:hover{
  transform:translateY(-2px) scale(1.02);
}

.btn--primary,.addBtn{background:linear-gradient(180deg,var(--yellow),#ffc83b)}
.btn--secondary{background:linear-gradient(180deg,#fff,#ffeec7)}
.btn--ghost{background:transparent}

.trust{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:4px solid var(--line);
  border-radius:22px;
  background:#fffefb;
  box-shadow:var(--shadow);
}

.trust__icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--cream);
  border:3px solid var(--line);
}

.hero__search input{
  flex:1 1 260px;
  border:4px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:14px 18px;
  font:inherit;
  font-weight:800;
  color:var(--ink);
  box-shadow:var(--shadow);
}

.hero__search input:focus,.sortSelect:focus,.form input:focus,.form textarea:focus,.adminRow input:focus,textarea:focus,input:focus{
  outline:none;
  box-shadow:var(--ring),var(--shadow);
}

.showcase{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
  position:relative;
}

.showcase__img{
  flex:1;
  min-height:280px;
  border:4px solid var(--line);
  border-radius:30px;
  background:linear-gradient(180deg,#fff1d5,#fffef9);
  position:relative;
  overflow:hidden;
  display:block;
}

.showcase__bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.foodArt{
  position:relative;
  height:100%;
  padding:18px;
}

.foodArt--ovenHero{
  display:grid;
  place-items:center;
}

.heroOven{
  position:relative;
  display:grid;
  place-items:center;
  gap:0;
  transform:translateY(6px);
}

.heroOven__body{margin-top:-2px}

.foodArt__caption{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) rotate(-2deg);
  padding:10px 16px;
  border:4px solid var(--line);
  border-radius:999px;
  background:#fffef8;
  font-weight:900;
  box-shadow:var(--shadow);
  white-space:nowrap;
}

.foodArt__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
}

.foodArt__blob--y{
  width:240px;
  height:240px;
  background:rgba(255,216,107,.55);
  left:-30px;
  top:30px;
}

.foodArt__blob--r{
  width:260px;
  height:260px;
  background:rgba(255,90,79,.2);
  right:-70px;
  top:-20px;
}

.foodArt__blob--p{
  width:180px;
  height:180px;
  background:rgba(255,134,176,.22);
  right:40px;
  bottom:-50px;
}

.foodArt__card{
  position:absolute;
  left:18px;
  top:26px;
  width:calc(100% - 36px);
  display:flex;
  align-items:center;
  gap:12px;
  background:#fffef8;
  border:4px solid var(--line);
  border-radius:24px;
  padding:14px;
  box-shadow:var(--shadow);
  transform:rotate(-2deg);
}

.foodArt__card--2{
  top:auto;
  bottom:24px;
  left:42px;
  width:calc(100% - 72px);
  transform:rotate(3deg);
}

.foodArt__emoji{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--yellow);
  border:4px solid var(--line);
  font-size:28px;
}

.foodArt__price{
  margin-left:auto;
  font-size:18px;
  font-weight:900;
  background:var(--cream);
  padding:8px 12px;
  border-radius:999px;
  border:3px solid var(--line);
}

.price__new{
  background:var(--pink);
  padding:8px 12px;
  border-radius:999px;
  border:3px solid var(--line);
  font-weight:900;
}

.section{
  padding:44px 0;
  position:relative;
}

.section--alt{
  background:linear-gradient(180deg,#ffefdd,#fff6ea);
}

.section__head h2{
  margin:1;
  font-size:38px;
  line-height:1;
  font-weight:900;
}

.section__head p{
  margin:8px 0 0;
  font-size:16px;
}

.section__head--row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.menuTools{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.catPills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.catPill,.chip{
  padding:11px 16px;
  border:4px solid var(--line);
  border-radius:999px;
  background:#fffef8;
  font-weight:900;
  color:var(--ink);
  box-shadow:var(--shadow);
}

.catPill.isOn,.chip--active{
  background:linear-gradient(180deg,var(--red),#ff8575);
  color:#fff;
  border-color:var(--line);
}

.sortWrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:4px solid var(--line);
  background:#fffef8;
  border-radius:999px;
  box-shadow:var(--shadow);
}

.sortSelect{
  border:none;
  background:transparent;
  font:inherit;
  font-weight:900;
  color:var(--ink);
  padding-right:10px;
}

.sortSelect:focus{
  outline:none;
  box-shadow:none;
}

.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  border:4px solid var(--line);
  border-radius:28px;
  background:#fffef8;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:rotate(-1deg);
}

.card:nth-child(2n){transform:rotate(1deg)}
.card:nth-child(3n){transform:rotate(-.5deg)}
.card:hover{transform:translateY(-3px) rotate(0)}

.productImage,.card__img{
  height:190px;
  padding:14px;
  background:linear-gradient(180deg,var(--cream),#fffef9);
  border-bottom:4px solid var(--line);
  display:grid;
  place-items:center;
  position:relative;
}

.productImage::before,.card__img::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,90,79,.22), transparent 40%),
    radial-gradient(circle at 78% 72%, rgba(255,216,107,.32), transparent 34%),
    #fff;
}

.productImage img,.card__img img{
  position:relative;
  z-index:1;
  max-height:160px;
  object-fit:contain;
}

.card__body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.card__title{
  margin:0;
  font-size:20px;
  font-weight:900;
}

.card__desc{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
  min-height:40px;
}

.card__foot{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.price{
  font-weight:900;
  font-size:20px;
}

.addBtn{
  border:4px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  box-shadow:var(--shadow);
  font-weight:900;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.step,.review,.infoCard{
  border:4px solid var(--line);
  background:#fffef8;
  border-radius:28px;
  padding:18px;
  box-shadow:var(--shadow);
  position:relative;
}

.step::after,.review::after,.infoCard::after{
  content:"";
  position:absolute;
  right:16px;
  top:16px;
  width:18px;
  height:18px;
  background:var(--yellow);
  border:3px solid var(--line);
  border-radius:50%;
}

.step__num{
  width:46px;
  height:46px;
  border-radius:18px;
  background:var(--red);
  color:#fff;
  display:grid;
  place-items:center;
  border:4px solid var(--line);
  font-weight:900;
  box-shadow:var(--shadow);
}

.step p,.review p,.infoCard p{
  margin:8px 0 0;
  color:var(--muted);
}

.review__top{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:center;
}

.footer{
  padding:34px 0 20px;
  background:linear-gradient(180deg,#2b1d1a,#1b1413);
  color:#fff5eb;
  border-top:5px solid var(--line);
}

.footer .muted{color:#f7cfbf}

.footer__grid{
  display:grid;
  grid-template-columns:1.1fr .8fr .9fr;
  gap:18px;
}

.footer__list{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.footer__bottom{
  margin-top:20px;
  padding-top:16px;
  border-top:2px dashed rgba(255,255,255,.26);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.footer__links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* drawer */
.drawerNav{
  position:fixed;
  inset:0;
  display:none;
  z-index:60;
  background:rgba(33,23,20,.34);
  backdrop-filter:blur(4px);
}

.drawerNav.is-open{display:block}

.drawerNav__panel{
  position:absolute;
  right:14px;
  top:14px;
  bottom:14px;
  width:min(360px,calc(100vw - 28px));
  background:#fffaf0;
  border:4px solid var(--line);
  border-radius:32px;
  box-shadow:var(--shadow-lg);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.drawerNav__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.drawerNav__links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.drawerNav__links a{
  padding:14px 16px;
  border:4px solid var(--line);
  border-radius:22px;
  background:var(--cream);
  font-weight:900;
}

.drawerNav__cta{margin-top:auto}

/* cart drawer */
.cartDrawer{
  position:fixed;
  inset:0;
  z-index:70;
  display:block;
}

.cartDrawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(33,23,20,.34);
  backdrop-filter:blur(4px);
}

.cartDrawer__panel{
  position:absolute;
  right:12px;
  top:12px;
  bottom:12px;
  width:min(430px,calc(100vw - 24px));
  background:#fffaf0;
  border:4px solid var(--line);
  border-radius:34px;
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.cartDrawer__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:4px solid var(--line);
  background:linear-gradient(180deg,var(--yellow),#ffd056);
}

.cartDrawer__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:16px;
  gap:14px;
}

.cartItems{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  padding-right:4px;
}

.cartRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:4px solid var(--line);
  background:#fff;
  border-radius:24px;
  box-shadow:var(--shadow);
}

.cartRow__left{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:800;
}

.qty{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--cream);
  border:4px solid var(--line);
  border-radius:999px;
  padding:6px 8px;
  box-shadow:var(--shadow);
}

.qty button{
  width:34px;
  height:34px;
  border:none;
  background:var(--red);
  color:#fff;
  border-radius:50%;
  font-size:20px;
  font-weight:900;
  border:3px solid var(--line);
}

.cartSummary{
  margin-top:auto;
  border:4px solid var(--line);
  background:#fff;
  border-radius:28px;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.row--total{
  font-size:20px;
  font-weight:900;
}

/* generic modals */
.modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:16px;
}

.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(33,23,20,.34);
  backdrop-filter:blur(4px);
}

.modal__panel{
  position:relative;
  z-index:1;
  width:min(700px,calc(100vw - 24px));
  max-height:calc(100vh - 32px);
  overflow:auto;
  background:#fffaf0;
  border:4px solid var(--line);
  border-radius:34px;
  box-shadow:var(--shadow-lg);
  padding:18px;
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.span2{grid-column:1 / -1}

.form label{
  display:block;
  margin-bottom:8px;
  font-weight:900;
}

.form input,.form textarea,.adminRow input,textarea,input,select{
  border:4px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:14px 16px;
  font:inherit;
  color:var(--ink);
  font-weight:800;
  box-shadow:var(--shadow);
}

.pay{
  border:4px solid var(--line);
  border-radius:24px;
  padding:14px;
  background:#fff;
  box-shadow:var(--shadow);
}

.pay__options{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.pay__opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:4px solid var(--line);
  border-radius:999px;
  background:var(--cream);
  font-weight:900;
}

.modal__summary{
  border:4px dashed var(--line);
  background:#fffef8;
  border-radius:24px;
  padding:14px;
}

/* shared dialogs pizza + diy */
.pizzaOverlay,.diyOverlay{
  position:fixed;
  inset:0;
  background:rgba(33,23,20,.38);
  backdrop-filter:blur(4px);
  z-index:84;
}

.pizzaDialog,.diyDialog{
  width:min(1120px,calc(100vw - 24px));
  max-width:none;
  border:none;
  padding:0;
  background:transparent;
  overflow:visible;
  z-index:85;
}

.pizzaDialog::backdrop,.diyDialog::backdrop{background:transparent}

.pizzaDialog .pizzaGrid,.diyDialog .grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:min(86vh,760px);
  background:#fffaf0;
  border:4px solid var(--line);
  border-radius:38px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.pizzaVisual,.diyVisual{
  position:relative;
  background:linear-gradient(180deg,#fff4d6,#ffe3d0);
  border-right:4px solid var(--line);
  overflow:hidden;
}

.pizzaVisual::before,.diyVisual::before{
  content:"";
  position:absolute;
  inset:auto -70px -60px auto;
  width:260px;
  height:260px;
  background:rgba(255,134,176,.22);
  border-radius:50%;
}

.pizzaStage,.diyStage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:100%;
  padding:26px;
}

.pizzaRings,.diyRings{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.pizzaRings span,.diyRings span{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  border:3px dashed rgba(45,32,27,.18);
  border-radius:50%;
}

.pizzaStage .pizzaRings span:nth-child(1),.diyVisual.isPizza .diyRings span:nth-child(1){width:500px;height:500px}
.pizzaStage .pizzaRings span:nth-child(2),.diyVisual.isPizza .diyRings span:nth-child(2){width:370px;height:370px}
.pizzaStage .pizzaRings span:nth-child(3),.diyVisual.isPizza .diyRings span:nth-child(3){width:240px;height:240px}

.pizzaHero,.diyBase{
  max-width:92%;
  max-height:78vh;
  object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(45,32,27,.16));
}

.pizzaHeroFallback{font-size:120px}

.pizzaPanel,.diyPanel{
  padding:22px;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:14px;
  background:#fff9f1;
}

.pizzaHead h2,.diyHead h2{
  margin:0;
  font-size:34px;
  line-height:1;
  font-weight:900;
}

.pizzaChips,.diyChips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  max-height:62px;
  overflow:auto;
}

.pizzaChips .chip,.diyChip{
  padding:8px 12px;
  border:3px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:900;
  box-shadow:4px 4px 0 rgba(45,32,27,.08);
}

.pizzaSegWrap,.diySegWrap{
  padding:14px;
  border:4px solid var(--line);
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow);
}

.pizzaSegTitle,.diySegTitle,.pizzaExtrasTitle,.diyExtrasTitle{
  font-weight:900;
  font-size:16px;
}

.pizzaSeg,.diySeg{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.pizzaSegBtn,.diySegBtn{
  min-width:88px;
  height:54px;
  border:4px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:900;
  box-shadow:var(--shadow);
}

.pizzaSegBtn.isOn,.diySegBtn.isOn{
  background:linear-gradient(180deg,var(--red),#ff7f74);
  color:#fff;
}

.pizzaExtrasHead,.diyExtrasHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
  padding-top:4px;
}

.pizzaExtrasGrid,.diyExtras{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.pizzaExtraCard,.diyExtra{
  border:4px solid var(--line);
  border-radius:24px;
  background:#fff;
  padding:12px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:178px;
  position:relative;
}

.pizzaExtraCard img,.diyExtra img{
  height:72px;
  width:100%;
  object-fit:contain;
  border:3px solid var(--line);
  border-radius:18px;
  background:#fff7ed;
  padding:6px;
}

.pizzaExtraCard.isOn,.diyExtra.isOn{
  background:linear-gradient(180deg,#fff4ef,#fff1c7);
}

.pizzaExtraTitle,.diyExtraName{
  font-weight:900;
  font-size:15px;
}

.pizzaExtraMeta,.diyExtraMeta{
  font-weight:900;
  color:var(--red);
}

.pizzaExtraHint,.diyExtraHint{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

.diyExtraOn{
  position:absolute;
  right:10px;
  top:10px;
  width:24px;
  height:24px;
  border-radius:10px;
  display:none;
  place-items:center;
  background:var(--yellow);
  border:3px solid var(--line);
  font-weight:900;
}

.diyExtra.isOn .diyExtraOn{display:grid}

.pizzaStickyCta,.diySticky{
  margin-top:6px;
  padding-top:14px;
  border-top:4px solid var(--line);
  background:#fff9f1;
}

.pizzaCtaBtn,.diyBtnAdd,.diyBtnReset{
  border:4px solid var(--line);
  border-radius:999px;
  padding:15px 18px;
  font-size:18px;
  font-weight:900;
  box-shadow:var(--shadow);
}

.pizzaCtaBtn,.diyBtnAdd{background:linear-gradient(180deg,var(--yellow),#ffc83b)}

.diyActionsBar{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:12px;
}

.diyBtnReset{background:#fff}

.pizzaClose,.diyClose{
  position:absolute;
  right:18px;
  top:18px;
  width:54px;
  height:54px;
  border:4px solid var(--line);
  border-radius:50%;
  background:#fff;
  box-shadow:var(--shadow);
  z-index:3;
  font-size:22px;
  font-weight:900;
}

.diyExtrasScroll{
  overflow:auto;
  padding-right:6px;
}

.diyVisualNote{
  margin-top:8px;
  padding:10px 14px;
  border:3px dashed var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.75);
  font-weight:800;
  color:var(--muted);
}

.diyDialog .diyGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:min(88vh,780px);
  background:#f7f6f4;
  border:4px solid var(--line);
  border-radius:38px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.diyVisual{
  background:linear-gradient(180deg,#f3efe8,#efebe4);
  border-right:1px solid rgba(45,32,27,.12);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.diyVisual::before{display:none}

.diyStage{
  flex:1;
  min-height:420px;
  padding:24px;
  display:grid;
  place-items:center;
  position:relative;
}

.diyStageStack{
  position:relative;
  width:min(100%,520px);
  height:min(64vh,520px);
  display:grid;
  place-items:center;
}

.diyStageStack img{
  user-select:none;
  -webkit-user-drag:none;
}

.diyBase{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(82%,420px);
  max-width:none;
  max-height:none;
  object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(45,32,27,.14));
}

.diyLayer{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(82%,420px);
  max-width:none;
  max-height:none;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(45,32,27,.12));
}

.diyStageStack[data-shape="round"] .diyBase,
.diyStageStack[data-shape="round"] .diyLayer{width:min(72%,360px)}

.diyStageStack[data-shape="long"] .diyBase,
.diyStageStack[data-shape="long"] .diyLayer{width:min(86%,470px)}

.diyStageStack[data-shape="boat"] .diyBase,
.diyStageStack[data-shape="boat"] .diyLayer{width:min(76%,390px)}

.diyStageStack[data-shape="wrap"] .diyBase,
.diyStageStack[data-shape="wrap"] .diyLayer{width:min(70%,350px)}

.diyVisualNote{
  margin:0;
  border:2px solid #d6d8df;
  border-radius:18px;
  background:rgba(255,255,255,.9);
  color:#707887;
  box-shadow:none;
}

.diyPanel{
  padding:18px 18px 16px;
  display:grid;
  grid-template-rows:auto auto auto auto 1fr auto;
  gap:14px;
  background:#faf9f7;
}

.diyHead h2{
  font-size:28px;
  color:#14181f;
}

.diyMeta{color:#777}

.diyChips{
  min-height:36px;
  padding-bottom:2px;
}

.diyChip{
  background:#ffffff;
  border:2px solid #d7dce5;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:900;
  box-shadow:none;
}

.diySegWrap{
  padding:16px 18px;
  border:2px solid #d9dde4;
  border-radius:26px;
  background:#fff;
  box-shadow:none;
}

.diySegBtn{
  min-width:92px;
  height:52px;
  border:2px solid #27232a;
  background:#fff;
  box-shadow:none;
}

.diySegBtn.isOn{
  background:#f66e5f;
  color:#fff;
}

.diyExtrasHead{padding-top:0}

.diyExtrasArea{
  min-height:0;
  overflow:hidden;
  border-top:1px solid #e1e3e7;
  padding-top:10px;
}

.diyExtrasScroll{
  height:100%;
  max-height:420px;
  overflow:auto;
  padding-right:6px;
}

.diyExtras{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.diyExtra{
  border:1.5px solid #d8dde5;
  border-radius:24px;
  background:#fff;
  padding:12px;
  box-shadow:none;
  min-height:174px;
  transition:.16s ease;
}

.diyExtra:hover{
  transform:translateY(-2px);
  border-color:#b4bac6;
}

.diyExtra:disabled{
  opacity:.45;
  filter:grayscale(.2);
  cursor:not-allowed !important;
}

.diyExtra img{
  height:74px;
  border:1.5px solid #d4d9e1;
  border-radius:16px;
  background:#fafafa;
  padding:6px;
}

.diyExtra.isOn{
  background:#fffbe5;
  border-color:#ffd335;
}

.diyExtraName{
  font-size:15px;
  color:#1c1c1c;
}

.diyExtraMeta{color:#1e2027}
.diyExtraHint{color:#818691}

.diyExtraOn{
  background:#ffd335;
  border:2px solid #27232a;
  border-radius:999px;
}

.diySticky{
  margin-top:0;
  padding-top:14px;
  border-top:1px solid #e1e3e7;
  background:transparent;
}

.diyActionsBar{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:12px;
}

.diyBtnReset,.diyBtnAdd{
  border-width:2px;
  box-shadow:none;
  padding:16px 18px;
}

.diyBtnAdd{background:#ffd400}
.diyBtnReset{background:#fff}

.diyVisual.isPizza .diyStage{padding-top:10px}
.diyVisual.isPizza .diyRings span{border:2px dashed rgba(94,96,107,.22)}

.legalBody{
  max-height:60vh;
  overflow:auto;
  padding-right:8px;
}

.link{
  font-weight:900;
  color:var(--red);
  cursor:pointer;
}

.disabled{
  pointer-events:none;
  opacity:.6;
}

/* admin/order specific */
.order{
  border:4px solid var(--line);
  border-radius:24px;
  background:#fffef8;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.items{
  border-top:3px dashed var(--line);
  padding-top:10px;
  margin-top:4px;
}

.btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.btns button{
  border:4px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:10px 14px;
  font-weight:900;
  box-shadow:var(--shadow);
}

.btns button[data-s="Cooking"]{background:#ffd86b}
.btns button[data-s="On the way"]{background:#ff86b0}
.btns button[data-s="Delivered"]{background:#79d67d}
.btns .danger{background:#ffddd8}

/* =========================
   COMBO STORY IN SHOWCASE
========================= */
.showcase__bottom--combo{
  align-items:center;
  gap:14px;
}

.comboStory{
  position:relative;
  width:100%;
  height:100%;
  min-height:280px;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,216,107,.28) 0 18%, transparent 19%),
    radial-gradient(circle at 84% 18%, rgba(255,134,176,.22) 0 16%, transparent 17%),
    radial-gradient(circle at 76% 84%, rgba(255,90,79,.18) 0 20%, transparent 21%),
    linear-gradient(180deg,#fff1d5,#fffef9);
}

.comboStory__slides{
  position:relative;
  width:100%;
  height:100%;
  min-height:280px;
}

.comboStory__slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}

.comboStory__slide.is-active{
  opacity:1;
  pointer-events:auto;
}

.comboStory__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.comboStory__slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.10) 45%,
    rgba(0,0,0,.28) 100%
  );
  pointer-events:none;
}

.comboStory__progress{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:4;
  display:flex;
  gap:6px;
}

.comboStory__bar{
  flex:1;
  height:6px;
  border:none;
  padding:0;
  background:rgba(255,255,255,.35);
  border-radius:999px;
  overflow:hidden;
}

.comboStory__fill{
  display:block;
  width:0%;
  height:100%;
  background:#fff;
  border-radius:999px;
}

.comboStory__bar.is-active .comboStory__fill{
  animation:comboStoryFill 8s linear forwards;
}

@keyframes comboStoryFill{
  from{width:0%}
  to{width:100%}
}

.comboStory__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:999px;
  border:3px solid var(--line);
  background:rgba(255,250,242,.88);
  backdrop-filter:blur(8px);
  box-shadow:4px 4px 0 rgba(45,32,27,.14);
  display:grid;
  place-items:center;
  font:inherit;
  font-size:28px;
  font-weight:900;
  color:var(--ink);
}

.comboStory__arrow:hover{
  transform:translateY(-50%) scale(1.03);
}

.comboStory__arrow--prev{left:12px}
.comboStory__arrow--next{right:12px}

.comboInfo{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.comboInfo__badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:5px 10px;
  border-radius:999px;
  border:3px solid var(--line);
  background:#ffe9ae;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:4px 4px 0 rgba(45,32,27,.08);
}

.comboInfo__title{
  font-size:20px;
  font-weight:900;
  line-height:1.05;
}

.comboInfo__desc{
  font-size:14px;
  line-height:1.2;
  max-width:24ch;
}

.price--combo{
  align-self:center;
}

.price--combo .price__new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  text-align:center;
  background:var(--pink);
  color:#2b1614;
}

/* responsive */
@media (max-width:1080px){
  .hero__grid,.pizzaDialog .pizzaGrid,.diyDialog .grid,.diyDialog .diyGrid{
    grid-template-columns:1fr;
  }

  .nav{display:none}
  .hamburger{display:flex}
  .diyVisual{
    border-right:none;
    border-bottom:1px solid rgba(45,32,27,.12);
  }
}

@media (max-width:900px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.steps,.footer__grid{grid-template-columns:1fr}
  .productImage,.card__img{height:170px}
}

@media (max-width:640px){
  .header__inner{
    grid-template-columns:auto auto auto;
    justify-content:space-between;
  }

  .cartbtn__label{display:none}
  .hero h1{
    font-size:38px;
    max-width:none;
  }

  .hero__copy{padding:20px}

  .grid--4,.pizzaExtrasGrid,.diyExtras{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .form__grid{grid-template-columns:1fr}
  .diyActionsBar{grid-template-columns:1fr}

  .pizzaDialog .pizzaGrid,.diyDialog .grid,.diyDialog .diyGrid{
    min-height:auto;
  }

  .pizzaPanel,.diyPanel{
    grid-template-rows:auto auto auto auto 1fr auto;
  }

  .diyStage{
    min-height:320px;
    padding:12px;
  }

  .diyStageStack{height:300px}
  .comingSoonTitle{font-size:28px}
  .comingSoonSub{font-size:16px}
  .foodArt__caption{
    white-space:normal;
    text-align:center;
    left:18px;
    right:18px;
    transform:none;
  }

  .comboStory{
    min-height:230px;
  }

  .comboStory__slides{
    min-height:230px;
  }

  .comboStory__arrow{
    width:38px;
    height:38px;
    font-size:24px;
  }

  .showcase__bottom--combo{
    flex-direction:column;
    align-items:flex-start;
  }

  .comboInfo__title{
    font-size:18px;
  }

  .comboInfo__desc{
    font-size:13px;
  }

  .price--combo .price__new{
    min-width:auto;
  }
}
.review__text{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.45;

  display:-webkit-box;
  display:box;
  -webkit-box-orient:vertical;
  line-clamp:7;
  -webkit-line-clamp:7;
  overflow:hidden;
}

.review__text.is-expanded{
  display:block;
  line-clamp:unset;
  -webkit-line-clamp:unset;
  overflow:visible;
}

.review__more{
  margin-top:10px;
  padding:8px 14px;
  border:3px solid var(--line);
  border-radius:999px;
  background:#fffef8;
  color:var(--ink);
  font:inherit;
  font-weight:900;
  box-shadow:var(--shadow);
}
.review__images{
  display:none;
  margin-top:12px;
  gap:10px;
  flex-wrap:wrap;
}

.review__images img{
  width:100%;
  border-radius:16px;
  border:3px solid var(--line);
}

.review__images.is-visible{
  display:flex;
}

.review__toggle{
  margin-top:10px;
  padding:8px 14px;
  border:3px solid var(--line);
  border-radius:999px;
  background:#fffef8;
  font-weight:900;
  box-shadow:var(--shadow);
}
.review__media{
  margin-top:10px;
}

.review__summary{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border:3px solid var(--line);
  border-radius:999px;
  background:#fffef8;
  font:inherit;
  font-weight:900;
  box-shadow:var(--shadow);
  cursor:pointer;
}

.review__summary::-webkit-details-marker{
  display:none;
}

.review__images{
  display:none;
  margin-top:12px;
  gap:10px;
  flex-wrap:wrap;
}

.review__images img{
  width:100%;
  border-radius:16px;
  border:3px solid var(--line);
}

.review__media[open] .review__images{
  display:flex;
}

.review__media[open] .review__summary{
  content:"Скрий";
}
.when-open{ display:none; }
.review__media[open] .when-open{ display:inline; }
.review__media[open] .when-closed{ display:none; }

/* =========================================
   GAME MODAL - SELECTOR + BOTH GAMES
   ========================================= */

   /* Game Launch Button - matches your header pills */
.game-launch-btn {
  background: #FFC940;
  color: #1a1a1a;
  border: 3px solid #1a1a1a;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 850;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.1s;
}

.game-launch-btn:hover {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 #101727;
}

.game-launch-btn:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* Modal Container */
.game-modal-content {
  position: relative;
  max-width: 560px;
  width: 92%;
  background: #FFF9F0;
  border: 4px solid #1a1a1a;
  border-radius: 24px;
  padding: 1.5rem;
}

/* Close X Button */
.game-modal-content {
  position: relative;
  max-width: 560px;
  width: 92%;
  background: #FFF9F0;
  border: 4px solid #1a1a1a;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 8px 0 #1a1a1a;
  overflow: visible; /* ← ADD THIS */
}

.game-close {
  position: absolute;
  top: -22px;
  right: -22px;
  background: #FF6B6B;
  color: #1a1a1a;
  border: 4px solid #1a1a1a;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.1s;
  z-index: 200;
  display: flex; /* ← ADD THIS */
  align-items: center; /* ← ADD THIS */
  justify-content: center; /* ← ADD THIS */
  line-height: 1; /* ← CHANGE THIS */
}
.game-close:hover {
  transform: translateY(2px) scale(1.05);
  box-shadow: 0 2px 0 #1a1a1a;
}
.game-close:active {
  transform: translateY(4px) scale(0.95);
  box-shadow: none;
}


/* =========================================
   GAME SELECTOR - HORIZONTAL CARDS
   ========================================= */

.game-selector-screen {
  padding: 10px 0;
  text-align: center;
}

.game-selector-screen h2 {
  color: #1a1a1a;
  font-size: 1.8rem;
  margin-bottom: 18px;
  font-weight: 900;
}

.game-selector-screen.hidden {
  display: none;
}

.game-cards-horizontal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-card-wide {
  position: relative;
  border: 3px solid #1a1a1a;
  border-radius: 16px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  height: 110px;
  transition: all 0.1s;
  background: #fff;
}

.game-card-wide:hover:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 #1a1a1a;
}

.game-card-wide:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

.game-card-wide:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.game-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.game-card-wide:hover:not(:disabled) .game-card-bg {
  opacity: 0.5;
  transform: scale(1.05);
}

.game-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 24px;
  background: linear-gradient(90deg, rgba(255,249,240,0.96) 0%, rgba(255,249,240,0.75) 60%, transparent 100%);
}

.game-card-content h3 {
  color: #FF2E2E;
  font-size: 1.4rem;
  margin: 0 0 4px 0;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(255,255,255,0.9);
}

.game-card-content span {
  color: #4a4a4a;
  font-size: 0.85rem;
  font-weight: 700;
}

/* =========================================
   GAME AREA - SHARED FOR BOTH GAMES
   ========================================= */

.game-area {
  position: relative;
  width: 100%;
  height: 440px;
  background: #1a1a1a;
  overflow: hidden;
  border-radius: 16px;
  border: 4px solid #1a1a1a;
  box-shadow: 0 4px 0 #1a1a1a;
}

.game-area.hidden {
  display: none;
}

/* Back to Menu Button */
.back-to-menu {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(26,26,26,0.85);
  color: #fff;
  border: 3px solid #1a1a1a;
  padding: 6px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  z-index: 100;
  transition: all 0.1s;
  box-shadow: 0 3px 0 #1a1a1a;
}

.back-to-menu:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #1a1a1a;
}

.back-to-menu:active {
  transform: translateY(3px);
  box-shadow: none;
}

/* Game Stats - HIDDEN until game starts */
.game-stats {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 50;
  opacity: 0; /* ADDED - hidden by default */
  pointer-events: none; /* ADDED */
  transition: opacity 0.3s; /* ADDED */
}

/* Show stats when game is active */
.game-area.game-active .game-stats,
.game-area.memory-active .game-stats {
  opacity: 1; /* ADDED - show when playing */
  pointer-events: auto;
}

.game-stats > div {
  background: #FFF9F0;
  border: 3px solid #1a1a1a;
  border-radius: 50px;
  padding: 6px 14px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 3px 0 #1a1a1a;
}

/* Title Screen Overlay - push content down */
.game-title-screen {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* CHANGED - push to bottom */
  gap: 20px; /* REDUCED from 24px */
  z-index: 20;
  padding: 2rem 1.5rem 3rem; /* ADDED more bottom padding */
  transition: opacity 0.3s;
}

.game-title-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.game-title-box {
  background: rgba(255, 249, 240, 0.96);
  border: 4px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 4px 0 #1a1a1a;
  padding: 1rem 1.5rem; /* REDUCED from 1.5rem 2rem */
  color: #1a1a1a;
  text-align: center;
  max-width: 80%; /* REDUCED from 85% */
}

.game-title-box h3 {
  font-size: 1.5rem; /* REDUCED from 1.8rem */
  font-weight: 900;
  margin: 0 0 0.5rem; /* REDUCED from 0.75rem */
}

.game-title-box p {
  font-size: 0.9rem; /* REDUCED from 1rem */
  line-height: 1.4; /* REDUCED from 1.5 */
  font-weight: 600;
  margin: 0;
}

.game-title-box b {
  background: #FFC940;
  color: #1a1a1a;
  padding: 2px 6px; /* REDUCED from 3px 8px */
  border-radius: 8px;
  border: 2px solid #1a1a1a;
}

/* Start Button - FIXED POSITION */
.game-title-screen .game-btn-start {
  position: relative !important;
  background: #FFC940 !important;
  color: #1a1a1a !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 50px !important;
  padding: 16px 48px !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.1s !important;
  text-transform: uppercase !important;
  z-index: 30 !important;
  box-shadow: 0 4px 0 #1a1a1a !important;
}

.game-title-screen .game-btn-start:hover:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #1a1a1a !important;
}

.game-title-screen .game-btn-start:active:not(:disabled) {
  transform: translateY(4px) !important;
  box-shadow: none !important;
}

.game-title-screen .game-btn-start:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Game Result Text */
.game-result {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 18px;
  min-height: 24px;
  color: #FFF9F0;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  z-index: 25;
}

.game-result b {
  background: #FFC940;
  color: #1a1a1a;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid #1a1a1a;
}

/* =========================================
   GAME 1: CATCH THE BURGER IMAGES
   ========================================= */

/* Title Screen Image */
#gameArea .game-title-screen {
  background-image: url('assets/games/catchtheburger.jpeg');
}

/* Gameplay Background Image */
#gameArea.game-active {
  background-image: url('assets/games/catchtheburgerblur.png');
  background-size: cover;
  background-position: center;
}

/* Falling items */
.burger-item {
  position: absolute;
  font-size: 2.2rem;
  cursor: pointer;
  user-select: none;
  animation: fall linear;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #1a1a1a;
  box-shadow: 0 3px 0 #1a1a1a;
  z-index: 15;
}

.burger-item:active {
  transform: scale(0.85);
  box-shadow: 0 1px 0 #1a1a1a;
}

.burger-item[data-type="bomb"] {
  background: rgba(255, 100, 100, 0.95);
  animation: fall linear, pulse 0.5s infinite;
}

@keyframes fall {
  from { top: -70px; }
  to { top: 510px; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* =========================================
   GAME 2: MEMORY MATCH IMAGES
   ========================================= */

/* Title Screen Image */
#memoryGameArea .game-title-screen {
  background-image: url('assets/games/matchblur.jpeg');
}

/* Gameplay Background Image */
#memoryGameArea.memory-active {
  background-image: url('assets/games/match.png');
  background-size: cover;
  background-position: center;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 60px 16px 16px;
  max-width: 380px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.memory-card {
  aspect-ratio: 1;
  background: #FFF9F0;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  transition: transform 0.4s;
  transform-style: preserve-3d;
  box-shadow: 0 3px 0 #1a1a1a;
  position: relative;
}

.memory-card:hover:not(.flipped):not(.matched) {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #1a1a1a;
}

.memory-card.flipped {
  transform: rotateY(180deg);
  background: #FFC940;
  box-shadow: 0 3px 0 #1a1a1a;
}

.memory-card.matched {
  background: #4CAF50;
  cursor: default;
  animation: matchPop 0.4s;
  box-shadow: 0 3px 0 #1a1a1a;
}

@keyframes matchPop {
  0%, 100% { transform: scale(1) rotateY(180deg); }
  50% { transform: scale(1.15) rotateY(180deg); }
}

.memory-card .front,
.memory-card .back {
  position: absolute;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memory-card .back {
  transform: rotateY(180deg);
}

/* =========================================
   GAME 3: МИНИ КУХНЯ
   ========================================= */

.game-title-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; 
  gap: 20px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 15px; 
}

/* Махнахме ::before с blur-а */

.game-title-box {
  background: #FFF9F0;
  border: 4px solid #1a1a1a;
  border-radius: 16px;
  padding: 20px 24px;
  text-align: center;
  max-width: 280px;
}

.game-title-box h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  line-height: 1.1;
}

.game-title-box p {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
  font-weight: 600;
}

.game-btn-start {
  background: #4CAF50;
  color: #1a1a1a;
  border: 4px solid #1a1a1a;
  border-radius: 50px;
  padding: 14px 40px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.1s;
}

.game-btn-start:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #1a1a1a;
}

.game-btn-start:active {
  transform: translateY(5px);
  box-shadow: none;
}

/* Recipe hint под поръчката */
.recipe-hint {
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: 4px;
  min-height: 28px;
}

/* Скрий всичко докато не почне играта */
#kitchenGameArea.kitchen-hud,
#kitchenGameArea.kitchen-order,
#kitchenGameArea.kitchen-station,
#kitchenGameArea.kitchen-ingredients,
#kitchenGameArea.kitchen-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Покажи ги когато играта е активна */
#kitchenGameArea.kitchen-active.kitchen-hud,
#kitchenGameArea.kitchen-active.kitchen-order,
#kitchenGameArea.kitchen-active.kitchen-station,
#kitchenGameArea.kitchen-active.kitchen-ingredients,
#kitchenGameArea.kitchen-active.kitchen-actions {
  opacity: 1;
  pointer-events: auto;
}

.kitchen-hud {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 12px;
  z-index: 50;
}

.kitchen-hud > div {
  background: #FFF9F0;
  border: 3px solid #1a1a1a;
  border-radius: 50px;
  padding: 6px 12px;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 3px 0 #1a1a1a;
}

.kitchen-order {
  margin-top: 60px;
  text-align: center;
  background: #FFC940;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 3px 0 #1a1a1a;
}

.kitchen-order p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.kitchen-order h3 {
  margin: 4px 0 0 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
}

.kitchen-station {
  margin: 1px 0;
}

.station-label {
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 8px;
}

.build-area {
  min-height: 80px;
  background: #FFF9F0;
  border: 3px dashed #1a1a1a;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 32px;
}

.kitchen-ingredients {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ing-btn {
  background: #FFF9F0;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 #1a1a1a;
  transition: all 0.1s;
}

.ing-btn:active {
  transform: translateY(3px);
  box-shadow: none;
}

.kitchen-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  flex: 1;
  background: #4CAF50;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  padding: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #1a1a1a;
  transition: all 0.1s;
}

.action-btn:disabled {
  background: #aaa;
  cursor: not-allowed;
}

.action-btn.trash {
  background: #FF2E2E;
  flex: 0 0 auto;
}

.action-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: none;
}

/* =========================================
   COOKIES POPUP GDPR
   ========================================= */

.cookies-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 420px;
  z-index: 9999;
  background: #FFF9F0;
  border: 4px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 8px 0 #1a1a1a;
  padding: 20px;
  animation: slideUp 0.4s ease;
}

.cookies-popup.hidden {
  display: none;
}

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

.cookies-content h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  margin: 0 0 8px 0;
  color: #1a1a1a;
}

.cookies-content p {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.cookies-content a {
  color: #FF2E2E;
  font-weight: 700;
  text-decoration: underline;
}

.cookies-buttons {
  display: flex;
  gap: 10px;
}

.cookies-btn {
  flex: 1;
  padding: 12px;
  border: 3px solid #1a1a1a;
  border-radius: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #1a1a1a;
  transition: all 0.1s;
}

.cookies-btn:active {
  transform: translateY(3px);
  box-shadow: none;
}

.cookies-btn.accept {
  background: #4CAF50;
  color: #1a1a1a;
}

.cookies-btn.decline {
  background: #FFF9F0;
  color: #1a1a1a;
}

@media (max-width: 480px) {
  .cookies-popup {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}