/* Boardwalk Arcade hub — neon midway after dark: marquee-bulb glow, hot-pink
   and electric-purple neon against a near-black boardwalk sky. Icons are
   drawn in pure CSS (flag, ball, dartboard, pin) — no stock emoji. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; }
body {
  background:
    radial-gradient(900px 460px at 50% -6%, rgba(255, 225, 77, .16), transparent 62%),
    radial-gradient(760px 480px at 10% 6%, rgba(255, 47, 176, .20), transparent 58%),
    radial-gradient(760px 480px at 92% 14%, rgba(155, 59, 255, .22), transparent 58%),
    linear-gradient(180deg, #05060a 0%, #0b0d1a 40%, #140f1c 100%);
  background-attachment: fixed;
  color: #f1e6d8;
  padding: 24px 16px 40px;
}
.hide { display: none !important; }

#wrap { max-width: 960px; margin: 0 auto; }

/* string-lights ribbon across the top of the boardwalk */
#wrap::before {
  content: "";
  display: block;
  height: 22px;
  max-width: 640px;
  margin: 0 auto 20px;
  background-image: repeating-radial-gradient(circle at 11px 11px,
    #ffe14d 0 3px, rgba(255, 225, 77, .55) 3px 5px, transparent 6px 22px);
  background-size: 22px 22px;
  filter: drop-shadow(0 0 6px rgba(255, 225, 77, .75));
  opacity: .85;
}

header { text-align: center; margin-bottom: 18px; position: relative; padding-top: 44px; }
header::before { /* ferris-wheel marquee glow above the title */
  content: "";
  position: absolute; top: 0; left: 50%; width: 40px; height: 40px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 6px, #ffe14d 7px 9px, transparent 10px),
    conic-gradient(from 0deg,
      rgba(255, 225, 77, .95) 0 8deg, transparent 8deg 82deg,
      rgba(255, 225, 77, .95) 82deg 90deg, transparent 90deg 172deg,
      rgba(255, 225, 77, .95) 172deg 180deg, transparent 180deg 262deg,
      rgba(255, 225, 77, .95) 262deg 270deg, transparent 270deg 352deg,
      rgba(255, 225, 77, .95) 352deg 360deg);
  box-shadow: 0 0 16px 2px rgba(255, 225, 77, .55);
}
header h1 {
  font-size: clamp(34px, 7vw, 58px);
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  text-shadow: 0 0 6px #fff, 0 0 20px #ff2fb0, 0 0 40px rgba(155, 59, 255, .8);
}
.sub { font-weight: 700; color: #ffd9ec; text-shadow: 0 0 10px rgba(255, 47, 176, .45); margin-top: 6px; }

/* daily strip */
#daily-strip {
  background: linear-gradient(160deg, rgba(32, 20, 28, .92), rgba(16, 11, 20, .92));
  border: 1px solid rgba(255, 225, 77, .3);
  border-radius: 18px; padding: 14px 18px; margin: 0 auto 20px;
  max-width: 460px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 20px rgba(255, 225, 77, .12);
  color: #f1e6d8;
}
#daily-strip h3 { font-size: 16px; margin-bottom: 8px; color: #ffe14d; text-shadow: 0 0 8px rgba(255, 225, 77, .5); }
.drow { display: flex; justify-content: space-between; font-size: 15px; padding: 3px 0; }
.drow b { color: #ff6fc4; text-shadow: 0 0 6px rgba(255, 47, 176, .6); }

/* game cards — dark boardwalk-wood panels lit by their own neon accent */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 7px),
    linear-gradient(165deg, #241a14 0%, #17110d 55%, #110c09 100%);
  border-radius: 22px; padding: 22px 20px 18px; text-decoration: none;
  color: #f1e6d8; text-align: center;
  border: 2px solid color-mix(in srgb, var(--accent, #3fc463) 50%, transparent);
  border-top: 8px solid var(--accent, #3fc463);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 0 24px -6px var(--accent, #3fc463);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .08s, box-shadow .15s;
}
.card:active { transform: translateY(3px); box-shadow: 0 5px 14px rgba(0, 0, 0, .6), 0 0 16px -6px var(--accent, #3fc463); }
.card h2 { font-size: 22px; color: #fff; text-shadow: 0 0 10px var(--accent, #3fc463); }
.card .tag { font-size: 13px; color: #c9b8a8; margin: 6px 0 12px; min-height: 34px; }

/* icon slot — the emoji glyph is collapsed to zero size and replaced by a
   CSS-drawn shape per card, keyed to DOM order (putt, pool, darts, bowl). */
.card .emoji {
  font-size: 0; line-height: 0;
  width: 60px; height: 60px; margin: 0 0 10px;
  position: relative;
}

.card:nth-child(1) .emoji { /* Boardwalk Putt — flag on a pole over a green mound */
  background: radial-gradient(ellipse 28px 8px at 50% 100%, rgba(63, 196, 99, .5), transparent 72%);
}
.card:nth-child(1) .emoji::before {
  content: ""; position: absolute; left: 50%; top: 2px; width: 3px; height: 46px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f2f2f2, #b8b8b8);
  box-shadow: 0 0 6px rgba(255, 255, 255, .4);
}
.card:nth-child(1) .emoji::after {
  content: ""; position: absolute; left: 50%; top: 4px; width: 26px; height: 18px;
  background: var(--accent, #3fc463);
  clip-path: polygon(0 0, 100% 16%, 0 100%);
  filter: drop-shadow(0 0 6px var(--accent, #3fc463));
}

.card:nth-child(2) .emoji { /* Corner Pocket — glowing ball */
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9) 0 5px, transparent 8px),
              radial-gradient(circle at 50% 50%, #2b2333 0%, #120d16 72%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .6), 0 0 16px var(--accent, #a077ff);
}
.card:nth-child(2) .emoji::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent, #a077ff);
  filter: drop-shadow(0 0 6px var(--accent, #a077ff));
}
.card:nth-child(2) .emoji::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
}

.card:nth-child(3) .emoji { /* Carnival Darts — glowing bullseye */
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    #fff 0 6px, var(--accent, #ff5d5d) 6px 12px, #fff 12px 18px,
    var(--accent, #ff5d5d) 18px 24px, #fff 24px 30px);
  box-shadow: 0 0 16px var(--accent, #ff5d5d);
}
.card:nth-child(3) .emoji::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #1a1010;
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}

.card:nth-child(4) .emoji { /* Boardwalk Bowl — glowing pin */
  filter: drop-shadow(0 0 8px var(--accent, #4db9ff));
}
.card:nth-child(4) .emoji::before {
  content: ""; position: absolute; left: 50%; top: 2px; width: 24px; height: 52px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff 0%, #fff 60%, #ece9e4 100%);
  clip-path: polygon(35% 0%, 65% 0%, 78% 18%, 70% 32%, 82% 46%, 88% 70%, 78% 92%,
    60% 100%, 40% 100%, 22% 92%, 12% 70%, 18% 46%, 30% 32%, 22% 18%);
}
.card:nth-child(4) .emoji::after {
  content: ""; position: absolute; left: 50%; top: 17px; width: 24px; height: 6px;
  transform: translateX(-50%);
  background: var(--accent, #4db9ff);
}

.stats { display: flex; gap: 10px; width: 100%; margin-bottom: 14px; }
.stat { flex: 1; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; }
.stat b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #a5927e; }
.stat i { font-style: normal; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 0 6px var(--accent, #3fc463); }
.play {
  background: linear-gradient(180deg, var(--accent, #3fc463), color-mix(in srgb, var(--accent, #3fc463) 65%, black));
  color: #fff; font-weight: 800; font-size: 17px;
  border-radius: 14px; padding: 12px 0; width: 100%;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 18px -3px var(--accent, #3fc463);
}
/* coming-soon tile — deliberately not a link */
.card.soon {
  border-top-color: #544738; border-color: rgba(255, 255, 255, .12);
  opacity: .75; cursor: default; justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.card.soon .tag { min-height: 0; }
.card.soon .emoji { font-size: 0; }
.card.soon .emoji::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 3px dashed rgba(241, 230, 216, .35);
}

footer { text-align: center; margin-top: 26px; }
.note { color: rgba(241, 230, 216, .45); font-size: 12px; }