/* ================================
   RizzieFarms Arcade — CSS (clean)
   ================================ */

/* Theme tokens */
:root{
  --bg:#000;
  --fg:#fff;
  --accent:#ffd54a;
  --accent-dim:#8c6b12;
  --accent-glow:#ffef9a;
  --link:#9ad2ff;
  --link-hover:#c3e6ff;

  --frame-thickness:12px;
  --bulb-size:12px;
  --bulb-gap:20px;
  --chase-speed:2.2s;
  --flicker-speed:1.8s;

  --max-width:1100px;
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* =======================
   Header (brought in + centered)
   ======================= */
.arcade-header{
  position:relative;
  background:#000;
  max-width:var(--max-width);
  margin:28px auto 24px;     /* down from top, centered */
  padding:12px 14px;
  border-radius:12px;
  overflow:hidden;
  text-align:center;
}
.arcade-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap;
}
.arcade-logo{
  width:72px; height:72px; border-radius:8px; overflow:hidden;
  background:#111; display:flex; align-items:center; justify-content:center;
}
.arcade-logo img{ width:100%; height:100%; object-fit:contain; display:block }

/* Flashing title */
.arcade-title{
  margin:0;
  font-size:clamp(28px, 4.2vw, 56px);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  text-shadow:0 0 8px var(--accent-glow),0 0 18px var(--accent),0 0 36px var(--accent);
  animation:flicker var(--flicker-speed) infinite ease-in-out;
}
@keyframes flicker{
  0%,100%{opacity:1; text-shadow:0 0 6px var(--accent-glow),0 0 18px var(--accent),0 0 36px var(--accent)}
  45%{opacity:.95; text-shadow:0 0 3px var(--accent-glow),0 0 8px var(--accent)}
  50%{opacity:.6; text-shadow:0 0 1px var(--accent-dim)}
  55%{opacity:1}
}

/* =======================
   Header marquee lights (4 sides)
   ======================= */
.marquee-strip{
  position:absolute; pointer-events:none; z-index:2;
  background:radial-gradient(circle at center, var(--accent) 0 var(--bulb-size), rgba(0,0,0,0) calc(var(--bulb-size) + 1px)) repeat-x;
  background-size: calc(var(--bulb-gap)) var(--bulb-gap);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.marquee-strip::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to right, rgba(0,0,0,0) 0 calc(var(--bulb-gap)*2), rgba(0,0,0,.75) calc(var(--bulb-gap)*2) calc(var(--bulb-gap)*3));
  mix-blend-mode:multiply;
  animation:chase var(--chase-speed) linear infinite;
}
@keyframes chase{ from{background-position-x:0} to{background-position-x:calc(var(--bulb-gap)*3)} }

.marquee-top, .marquee-bottom{
  left:0; right:0; height:var(--frame-thickness); background-position-y:center;
}
.marquee-top{ top:-6px; }
.marquee-bottom{ bottom:-6px; }

.marquee-left, .marquee-right{
  top:0; bottom:0; width:var(--frame-thickness);
  background:radial-gradient(circle at center, var(--accent) 0 var(--bulb-size), rgba(0,0,0,0) calc(var(--bulb-size) + 1px)) repeat-y;
  background-size: var(--bulb-gap) var(--bulb-gap);
}
.marquee-left{ left:-6px; }
.marquee-right{ right:-6px; }
.marquee-left::after, .marquee-right::after{
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 calc(var(--bulb-gap)*2), rgba(0,0,0,.75) calc(var(--bulb-gap)*2) calc(var(--bulb-gap)*3));
  animation:chase-vert var(--chase-speed) linear infinite;
}
@keyframes chase-vert{ from{background-position-y:0} to{background-position-y:calc(var(--bulb-gap)*3)} }

/* =======================
   Footer (centered + quote)
   ======================= */
.arcade-footer{
  position:relative;
  background:#000; color:#bbb;
  max-width:var(--max-width);
  margin:24px auto; padding:18px 16px 24px;
  border-radius:12px;
  overflow:hidden;
  text-align:center;
}
.footer-inner{
  text-align:center;
  padding:0;
  font-size:14px;
}
.footer-inner div{ margin:6px 0; }
.footer-inner .arcade-quote {
  font-style: italic;
  font-weight: bold;
  color: yellow;
  opacity: 1; /* or remove this line if you don’t want fading */
}
.arcade-footer a{ color:var(--link); text-decoration:none; border-bottom:1px dotted var(--link); }
.arcade-footer a:hover{ color:var(--link-hover); border-bottom-color:transparent; }

.footer-inner div {
  margin: 6px 0;
  display: block;      /* ✅ ensures they stack as rows */
  text-align: center;  /* ✅ centers text inside each */
}

/* =======================
   Page content wrapper
   ======================= */
.arcade-content{
  max-width:var(--max-width);
  margin:18px auto 28px;
  padding:0 16px;
}

/* =======================
   Game grid
   ======================= */
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
  align-items:stretch;
}

/* =======================
   Cabinet tiles
   ======================= */
.game-tile{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  padding:0;
  text-align:center;
  transition:transform .15s ease, box-shadow .2s ease;
  background:#0a0a0f; /* fallback */
}
/* Game cabinet label (title) inside each tile */
.game-tile h3 {
  color: yellow;
  font-weight: bold;  /* optional, makes it pop */
  margin: 10px 0;     /* optional, keeps spacing neat */
}
.cabinet{
  box-shadow: inset 0 0 30px rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.45);
  transform: translateZ(0);
  min-height:240px;  /* ensures background image is visible */
}

/* Per-cabinet layered background:
   [dark overlay], [IMAGE (contain)], [base gradient], [fallback] */
.cabinet.slot{
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("/images/game-hub/slot.jpg") center / contain no-repeat,
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0.55) 60%),
    #0a0a0f;
}
.cabinet.match,
.cabinet.match2{
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("/images/game-hub/match.jpg") center / contain no-repeat,
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0.55) 60%),
    #0a0a0f;
}
.cabinet.break{
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("/images/game-hub/break.jpg") center / contain no-repeat,
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0.55) 60%),
    #0a0a0f;
}

/* PINBALL cabinet (match the others' layered style) */
.cabinet.pinball{
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),               /* dark overlay */
    url("/images/game-hub/pinball.jpg") center / contain no-repeat, /* your image */
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.08), rgba(0,0,0,0.55) 60%),
    #0a0a0f;
}

/* Neon rim + chasing bulbs (kept, no conflict with backgrounds) */
.cabinet-border,
.cabinet-border::before,
.cabinet-border::after,
.cabinet::before,
.cabinet::after{ content:""; position:absolute; pointer-events:none; }

.cabinet-border{
  inset:0; border-radius:14px;
  box-shadow:0 0 0 2px currentColor, 0 0 22px currentColor, inset 0 0 14px currentColor;
  opacity:.6;
}

/* Top & bottom bulb strips (use ::before / ::after on .cabinet) */
.cabinet::before{
  left:8px; right:8px; height:10px; top:6px;
  background: radial-gradient(6px 6px at 6px 50%, currentColor 40%, transparent 45%) repeat-x;
  background-size:18px 10px;
  animation:bulbs-x 2.2s linear infinite;
  filter:drop-shadow(0 0 6px currentColor);
  opacity:.85;
}
.cabinet::after{
  left:8px; right:8px; height:10px; bottom:6px;
  background: radial-gradient(6px 6px at 6px 50%, currentColor 40%, transparent 45%) repeat-x;
  background-size:18px 10px;
  animation:bulbs-x 2.2s linear infinite reverse;
  filter:drop-shadow(0 0 6px currentColor);
  opacity:.85;
}
@keyframes bulbs-x{ to{ background-position-x:18px } }

/* Side rails (use ::before / ::after on .cabinet-border) */
.cabinet-border::before{
  top:18px; bottom:18px; width:10px; left:6px;
  background: radial-gradient(6px 6px at 50% 6px, currentColor 40%, transparent 45%) repeat-y;
  background-size:10px 18px;
  animation:bulbs-y 2.2s linear infinite;
  filter:drop-shadow(0 0 6px currentColor);
  border-radius:6px; opacity:.85;
}
.cabinet-border::after{
  top:18px; bottom:18px; width:10px; right:6px;
  background: radial-gradient(6px 6px at 50% 6px, currentColor 40%, transparent 45%) repeat-y;
  background-size:10px 18px;
  animation:bulbs-y 2.2s linear infinite reverse;
  filter:drop-shadow(0 0 6px currentColor);
  border-radius:6px; opacity:.85;
}
@keyframes bulbs-y{ to{ background-position-y:18px } }

/* Cabinet content */
.cabinet-top{
  font:700 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  text-align:center; letter-spacing:1.5px; padding:10px 12px;
  text-transform:uppercase; color:#fff; position:relative; z-index:2;
  background:linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(0,0,0,0.35));
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-shadow:0 0 6px currentColor;
}
.cabinet-body{
  position:relative; z-index:2; padding:18px 16px 22px;
  color:#e9ecff;
}
.cabinet-body h3{
  margin:8px 0 6px; font-weight:800; letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(0,0,0,.4), 0 0 12px currentColor;
}
.cabinet-body p{ margin:0 0 14px; opacity:.9; }
.cabinet-feet{
  height:12px; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6));
  border-top:1px solid rgba(255,255,255,0.06);
}

/* Play button */
.play-btn{
  display:inline-block; font-weight:800; text-decoration:none; padding:10px 16px;
  border-radius:999px; background:#0f1222; border:2px solid currentColor; color:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.6), inset 0 0 18px rgba(255,255,255,.08);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.play-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.35), 0 0 18px currentColor;
  background:rgba(255,255,255,.05);
}

/* Cabinet color themes */
.cabinet[data-theme="pink"]  { color:#ff4fd8; }
.cabinet[data-theme="cyan"]  { color:#38f2ff; }
.cabinet[data-theme="gold"]  { color:#ffcf4f; }
.cabinet[data-theme="violet"]{ color:#a77bff; }
.cabinet[data-theme="blue"]  { color:#7ec8ff; } /* optional: for your pinball tile */

/* Subtle hover lift */
.cabinet:hover{ transform:translateY(-2px) rotateX(.5deg); box-shadow:0 18px 36px rgba(0,0,0,.45); }

/* Floating "Home" button (optional; if you included it separately) */
.arcade-home-fab{
  position:fixed; left:14px; bottom:14px; z-index:9999;
  display:inline-block; padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none;
  background:rgba(15,18,34,.92); border:2px solid #ffcf4f; color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.35), 0 0 14px rgba(255,207,79,.35);
  backdrop-filter:blur(4px);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.arcade-home-fab:hover,.arcade-home-fab:focus{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.45), 0 0 18px rgba(255,207,79,.55);
  background:rgba(255,255,255,.06);
}
@media (max-width:560px){
  .arcade-home-fab{ left:10px; bottom:10px; padding:9px 12px; }
}

/* Make the main cabinet titles (h3) yellow */
.game-tile.cabinet .cabinet-body h3 {
  color: #ffcf4f;        /* RizzieFarms yellow */
  font-weight: 700;
}

/* Make the footer quote bold + yellow (and keep italic) */
.footer-inner .arcade-quote {
  color: #ffcf4f;
  font-weight: 700;
  font-style: italic;
  opacity: 1;
}

/* (Removed the old .game-tile.cabinet.pinball rule to avoid conflicts) */