/* ============================================================
   GAMING MANIA — Page & component styles
   ============================================================ */

/* ===================== HERO (split layout) ===================== */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-top: 72px; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; background:
  radial-gradient(70% 60% at 80% 30%, var(--ember-soft), transparent 60%),
  radial-gradient(50% 50% at 10% 90%, rgba(232,96,44,.06), transparent 60%); }
.hero-grid-bg { position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(244,239,230,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,239,230,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 75%); }

/* animated arcade marquee strip top of hero */
.marquee { position:relative; z-index:2; overflow:hidden; border-block:1px solid var(--line); background: rgba(22,19,26,.45); backdrop-filter: blur(4px); margin-bottom: clamp(1.5rem,4vw,3rem); }
.marquee-track { display:inline-flex; gap:2.5rem; white-space:nowrap; padding:.6rem 0; animation: slide 26s linear infinite; will-change: transform; }
.marquee-track span { font-family:var(--display); font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); display:inline-flex; align-items:center; gap:2.5rem; }
.marquee-track span::after { content:"◆"; color:var(--ember); font-size:.7rem; }
.marquee--review .marquee-track span { color:var(--bone); font-family:var(--body); font-weight:500; font-size:.86rem; letter-spacing:.01em; text-transform:none; }
.marquee--review .marquee-track span b { color:var(--ember); font-weight:600; margin-right:.5rem; font-family:var(--display); letter-spacing:.04em; }
.marquee--review .marquee-track span::after { content:"★★★★★"; color:var(--ember); font-size:.7rem; letter-spacing:1px; }

/* ===== BIG REVIEW MARQUEE (after gallery) ===== */
.review-marquee { position:relative; z-index:2; overflow:hidden; padding-block: clamp(.5rem,2vw,1rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.review-marquee-track { display:inline-flex; gap: clamp(1rem,2vw,1.5rem); white-space:normal; padding-block: .5rem;
  animation: slide 90s linear infinite; will-change: transform; }
.review-marquee:hover .review-marquee-track,
.review-marquee:focus-within .review-marquee-track { animation-play-state: paused; }
.rev-card { flex: 0 0 auto; width: clamp(340px, 36vw, 480px); white-space:normal;
  border:1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink-2);
  padding: clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; gap:1.2rem;
  transition: border-color .35s var(--ease), transform .35s var(--ease); }
.rev-card:hover { border-color: var(--ember-line); transform: translateY(-3px); }
.rev-stars { color: var(--ember); letter-spacing:.2em; font-size:1.15rem; }
.rev-card p { color: var(--bone); font-size: clamp(1.08rem,1.5vw,1.25rem); line-height:1.6; flex:1; }
.rev-who { display:flex; align-items:center; gap:.8rem; }
.rev-av { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background: var(--ember-soft); border:1px solid var(--ember-line); color:var(--ember);
  font-family:var(--display); font-size:1.2rem; }
.rev-nm { font-weight:600; font-size:1rem; color:var(--bone); }
@media (prefers-reduced-motion: reduce) { .review-marquee-track { animation: none; flex-wrap: wrap; justify-content:center; } }
@keyframes slide { to { transform: translateX(-50%); } }

.hero-inner { position: relative; z-index: 3; width: 100%; flex: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem,5vw,4rem);
  padding-block: clamp(1rem,3vw,2.5rem) clamp(2.5rem,5vw,4rem); }
.hero-copy { min-width: 0; }
.hero-visual { position: relative; align-self: center; }
.hero-visual .panel { position:relative; border:1px solid var(--ember-line); border-radius: var(--radius-lg); overflow:hidden; background:var(--ink-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); animation: rise 1.1s var(--ease) .35s both; }
.hero-visual .panel img { width:100%; height:auto; display:block; }
.hero-visual .panel::after { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity:.3; pointer-events:none; }
.hero-visual .badge { position:absolute; z-index:4; background:rgba(22,19,26,.86); backdrop-filter:blur(8px); border:1px solid var(--ember-line); border-radius:14px; padding:.7rem 1rem; display:flex; align-items:center; gap:.6rem; animation: rise 1s var(--ease) .7s both; }
.hero-visual .badge .b-num { font-family:var(--display); font-size:1.5rem; color:var(--ember); line-height:1; }
.hero-visual .badge .b-lbl { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); line-height:1.3; }
.hero-visual .badge.tl { top:-16px; left:-16px; }
.hero-visual .badge.br { bottom:-16px; right:-16px; }

.hero-tag { margin-bottom: 1.5rem; animation: rise .9s var(--ease) both; }
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: .94; letter-spacing: .01em; text-transform: uppercase;
  max-width: 13ch;
}
.hero h1 .em { color: var(--ember); position: relative; display: inline-block; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: reveal-up .95s var(--ease) forwards; }
.hero h1 .line:nth-child(1) > span { animation-delay: .15s; }
.hero h1 .line:nth-child(2) > span { animation-delay: .3s; }
@keyframes reveal-up { to { transform: none; } }
@keyframes rise { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform:none;} }

.hero-sub { display:flex; gap:1rem; align-items:center; margin-top:1.6rem; color:var(--bone-dim); font-weight:500; letter-spacing:.04em; flex-wrap:wrap; animation: rise 1s var(--ease) .5s both; }
.hero-sub .sep { color: var(--ember); }
.hero-actions { display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; animation: rise 1s var(--ease) .65s both; }

/* hero stat ribbon */
.hero-stats { display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--line); margin-top: clamp(2.5rem,5vw,3.5rem); animation: rise 1s var(--ease) .8s both; }
.hero-stats .stat { padding: 1.3rem 1rem 0; border-right:1px solid var(--line); }
.hero-stats .stat:last-child { border-right:none; }
.hero-stats .num { font-family:var(--display); font-size: clamp(1.8rem,5vw,2.8rem); line-height:1; color:var(--bone); }
.hero-stats .num span { color: var(--ember); }
.hero-stats .lbl { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); margin-top:.5rem; }

@media (max-width: 940px){
  .hero-inner { grid-template-columns: 1fr; gap: clamp(2rem,6vw,3rem); align-items:start; }
  .hero-visual { order: 2; max-width: 560px; width:100%; margin-inline:auto; }
  .hero-copy { order: 1; }
  .hero h1 { font-size: clamp(3rem, 12vw, 5rem); max-width: 14ch; }
}

@media (max-width:620px){
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .hero-stats .stat:nth-child(2){ border-right:none; }
  .hero-stats .stat:nth-child(1), .hero-stats .stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .hero-visual .badge.tl { top:-12px; left:-8px; padding:.5rem .75rem; }
  .hero-visual .badge.br { bottom:-12px; right:-8px; padding:.5rem .75rem; }
}

/* ===================== SETUPS (zig-zag, not 3-card row) ===================== */
.setups-list { display: grid; gap: clamp(1rem,2vw,1.5rem); }
.setup {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  padding: clamp(1.4rem,3vw,2.2rem); border:1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--ink-2);
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  position: relative; overflow: hidden;
}
.setup::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ember); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.setup:hover { border-color: var(--ember-line); transform: translateY(-3px); background: var(--ink-3); }
.setup:hover::before { transform: scaleY(1); }
.setup-ico { width:72px; height:72px; border-radius:16px; display:grid; place-items:center; background: var(--ember-soft); border:1px solid var(--ember-line); }
.setup-ico svg { width:34px; height:34px; stroke: var(--ember); }
.setup-body h3 { font-family:var(--display); font-size: clamp(1.5rem,4vw,2.1rem); text-transform:uppercase; line-height:1; }
.setup-body p { color: var(--bone-dim); margin-top:.5rem; font-size:.95rem; max-width: 46ch; }
.setup-feats { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.setup-feats li { font-size:.72rem; letter-spacing:.04em; color:var(--bone-dim); border:1px solid var(--line); border-radius:999px; padding:.28rem .65rem; }
.setup-price { text-align:right; white-space:nowrap; }
.setup-price .from { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-faint); }
.setup-price .amt { font-family:var(--display); font-size: clamp(1.8rem,4vw,2.4rem); color:var(--ember); line-height:1; }
.setup-price .per { font-size:.7rem; color:var(--bone-faint); letter-spacing:.08em; }

@media (max-width: 760px){
  .setup { grid-template-columns: 60px 1fr; row-gap:1rem; }
  .setup-ico { width:56px; height:56px; }
  .setup-ico svg { width:28px; height:28px; }
  .setup-price { grid-column: 1 / -1; text-align:left; display:flex; align-items:baseline; gap:.6rem; border-top:1px solid var(--line); padding-top:1rem; }
}

/* ===================== PRICING ===================== */
.price-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.5rem); }
.price-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding: clamp(1.6rem,3vw,2.2rem); position:relative; transition: border-color .35s, transform .35s var(--ease); }
.price-card:hover { border-color: var(--ember-line); transform: translateY(-3px); }
.price-card.feature { border-color: var(--ember-line); }
.price-card .pc-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: 1.3rem; }
.price-card h3 { font-family:var(--display); font-size:1.5rem; text-transform:uppercase; }
.price-rows { display:grid; gap:.1rem; }
.price-rows .row { display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.price-rows .row:last-child { border-bottom:none; }
.price-rows .row .k { color:var(--bone-dim); }
.price-rows .row .v { font-family:var(--display); font-size:1.15rem; color:var(--bone); }
.price-rows .row .v small { font-family:var(--body); font-size:.7rem; color:var(--bone-faint); margin-left:.2rem; }
.price-note { margin-top:1.2rem; padding:.85rem 1rem; background:var(--ember-soft); border:1px solid var(--ember-line); border-radius:12px; font-size:.82rem; color:var(--bone); letter-spacing:.01em; }
.price-note strong { color: var(--ember); }
@media (max-width:760px){ .price-grid { grid-template-columns: 1fr; } }

/* ===================== GAMES ===================== */
.games-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.5rem); }
.game-col { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding: clamp(1.4rem,3vw,2rem); }
.game-col h3 { font-family:var(--display); font-size:1.35rem; text-transform:uppercase; display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.game-col h3 .pip { width:9px; height:9px; border-radius:50%; background:var(--ember); }
.game-col ul { columns: 2; column-gap: 1.5rem; }
.game-col li { font-size:.88rem; color:var(--bone-dim); padding:.32rem 0; break-inside:avoid; border-bottom:1px solid rgba(244,239,230,.05); }
@media (max-width:760px){ .games-grid { grid-template-columns:1fr; } .game-col ul { columns: 2; } }
@media (max-width:420px){ .game-col ul { columns: 1; } }

/* ===================== FOOD ===================== */
.food-filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.food-filters button { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); border:1px solid var(--line-strong); border-radius:999px; padding:.55rem 1.1rem; transition: all .3s var(--ease); }
.food-filters button:hover { color:var(--bone); border-color:var(--ember-line); }
.food-filters button.active { background:var(--ember); color:var(--ink); border-color:var(--ember); }
.food-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: clamp(1rem,2vw,1.4rem); }
.food-cat { border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2); padding:1.4rem 1.5rem; transition: opacity .4s, transform .4s var(--ease); }
.food-cat.hide { display:none; }
.food-cat h4 { font-family:var(--display); font-size:1.15rem; text-transform:uppercase; margin-bottom:.9rem; color:var(--bone); }
.food-cat .item { display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; border-bottom:1px dotted var(--line); font-size:.9rem; }
.food-cat .item:last-child { border-bottom:none; }
.food-cat .item .nm { color:var(--bone-dim); }
.food-cat .item .pr { color:var(--ember); font-weight:600; white-space:nowrap; }

/* ===================== GALLERY / MARQUEE STRIP ===================== */
.strip { overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2); position:relative; z-index:2; }
.strip-track { display:inline-flex; white-space:nowrap; padding:1.1rem 0; animation: slide 30s linear infinite; }
.strip-track span { font-family:var(--display); font-size: clamp(1.6rem,5vw,2.6rem); text-transform:uppercase; color:transparent; -webkit-text-stroke:1px var(--ember-line); padding-inline: 1.4rem; display:inline-flex; align-items:center; gap:2.8rem; }
.strip-track span::after { content:"●"; -webkit-text-stroke:0; color:var(--ember); font-size:.5em; }

.gallery-grid { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: clamp(.7rem,1.5vw,1rem); }
.gallery-grid .tile { border-radius: var(--radius); overflow:hidden; position:relative; border:1px solid var(--line); background:var(--ink-3); }
.gallery-grid .tile img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.gallery-grid .tile:hover img { transform: scale(1.07); }
.gallery-grid .tile::after { content: attr(data-label); position:absolute; left:0; right:0; bottom:0; padding:1.6rem .9rem .8rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); background:linear-gradient(transparent, rgba(22,19,26,.9)); opacity:0; transition:opacity .4s; }
.gallery-grid .tile:hover::after { opacity:1; }
.gallery-grid .wide { grid-column: span 2; }
.gallery-grid .tall { grid-row: span 2; }
@media (max-width:760px){ .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; } .gallery-grid .wide{grid-column:span 2;} .gallery-grid .tall{grid-row:span 1;} }

/* ===================== CONTACT / VISIT ===================== */
.visit-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,3vw,2.5rem); align-items:stretch; }
.visit-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding: clamp(1.6rem,3vw,2.4rem); }
.visit-card h3 { font-family:var(--display); font-size: clamp(1.6rem,4vw,2.2rem); text-transform:uppercase; line-height:1; margin-bottom:1.4rem; }
.info-row { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.info-row:last-of-type { border-bottom:none; }
.info-row .ico { width:42px; height:42px; flex-shrink:0; border-radius:11px; background:var(--ember-soft); border:1px solid var(--ember-line); display:grid; place-items:center; }
.info-row .ico svg { width:20px; height:20px; stroke:var(--ember); }
.info-row .k { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:.2rem; }
.info-row .vv { color:var(--bone); font-size:.98rem; }
.info-row .vv a:hover { color:var(--ember); }
.map-embed { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:300px; }
.map-embed iframe { width:100%; height:100%; min-height:300px; border:0; filter: grayscale(.4) contrast(1.05); }
@media (max-width:880px){ .visit-grid { grid-template-columns:1fr; } }

/* ===================== BOOK CTA band ===================== */
.cta-band { position:relative; border-radius: clamp(20px,4vw,34px); overflow:hidden; padding: clamp(2.5rem,6vw,4.5rem); border:1px solid var(--ember-line); background: linear-gradient(135deg, var(--ink-2), var(--ink-3)); }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 100% 0%, var(--ember-soft), transparent 60%); pointer-events:none; }
.cta-band .inner { position:relative; z-index:2; max-width: 60ch; }
.cta-band h2 { font-family:var(--display); font-size: clamp(2.2rem,7vw,4.2rem); text-transform:uppercase; line-height:.9; }
.cta-band p { color:var(--bone-dim); margin-top:1rem; max-width:46ch; }
.cta-band .hero-actions { margin-top:2rem; }

/* ===================== mini section nav (sub-pages) ===================== */
.page-hero { padding-top: calc(72px + clamp(3rem,7vw,5rem)); padding-bottom: clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); position:relative; z-index:2; }
.page-hero .crumb { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:1rem; }
.page-hero .crumb a:hover { color:var(--ember); }
.page-hero h1 { font-family:var(--display); font-size: clamp(2.8rem,10vw,6rem); text-transform:uppercase; line-height:.86; }
.page-hero h1 .em { color:var(--ember); }
.page-hero p { color:var(--bone-dim); max-width:54ch; margin-top:1.2rem; font-size:1.05rem; }

/* faq */
.faq { display:grid; gap:.8rem; max-width: 820px; }
.faq details { border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2); overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:1.2rem 1.4rem; font-family:var(--body); font-weight:600; font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition: color .25s; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .plus { width:22px; height:22px; flex-shrink:0; position:relative; }
.faq summary .plus::before, .faq summary .plus::after { content:""; position:absolute; background:var(--ember); inset:0; margin:auto; }
.faq summary .plus::before { width:14px; height:2px; }
.faq summary .plus::after { width:2px; height:14px; transition: transform .3s var(--ease); }
.faq details[open] summary .plus::after { transform: rotate(90deg); opacity:0; }
.faq details[open] summary { color:var(--ember); }
.faq .ans { padding: 0 1.4rem 1.3rem; color:var(--bone-dim); font-size:.95rem; max-width:70ch; }

/* steps */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; counter-reset: step; }
.step { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding: clamp(1.5rem,3vw,2rem); position:relative; }
.step .n { font-family:var(--display); font-size:2.4rem; color:var(--ember-line); line-height:1; }
.step h3 { font-family:var(--display); font-size:1.3rem; text-transform:uppercase; margin:.6rem 0 .5rem; }
.step p { color:var(--bone-dim); font-size:.92rem; }
@media (max-width:760px){ .steps { grid-template-columns:1fr; } }

/* review cards */
.reviews-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.review { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--ink-2); padding:1.7rem; }
.review .stars { color:var(--ember); letter-spacing:.15em; margin-bottom:.9rem; }
.review p { font-size:.96rem; color:var(--bone); line-height:1.65; }
.review .who { margin-top:1.2rem; display:flex; align-items:center; gap:.75rem; }
.review .av { width:40px; height:40px; border-radius:50%; background:var(--ember-soft); border:1px solid var(--ember-line); display:grid; place-items:center; font-family:var(--display); color:var(--ember); }
.review .who .nm { font-weight:600; font-size:.9rem; }
.review .who .mt { font-size:.76rem; color:var(--bone-faint); }
@media (max-width:880px){ .reviews-grid { grid-template-columns:1fr; } }