/* Dive-In Movie card (site-seasonal7): a classic cinema marquee under the Disney VIP Tours card, in the same gold and navy.
   Bulb border chases softly (static under prefers-reduced-motion); letter-board letters use Bebas Neue (self-hosted, SIL OFL 1.1,
   see /assets/OFL-bebasneue.txt, latin subset woff2). Self-drawn SVG only; no images or outside requests. */
@font-face { font-family: "MCC Marquee"; src: url("/assets/bebasneue-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.hw-stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; max-width: 440px; }
.hw-stack .vipw-wrap { margin-top: 0; }
.hw-stack .vipw { display: flex; max-width: none; }

.divein { --bulb: #ffe7a8; --bulb-glow: rgba(255,214,120,.85); position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 17px 20px 13px; border-radius: 14px; color: #fff; text-align: center;
  background: linear-gradient(160deg, #1d3157, #0f1c33 70%); border: 2px solid #c9a45c;
  box-shadow: inset 0 0 0 4px #0b1528, inset 0 0 0 5px rgba(226,199,136,.55), 0 0 0 3px rgba(201,164,92,.12), 0 10px 30px rgba(0,0,0,.35); }
[data-theme="dark"] .divein { background: linear-gradient(160deg, #182844, #0a1222 70%); }

/* bulb border */
.mq-rail { position: absolute; display: flex; justify-content: space-between; pointer-events: none; }
.mq-rail.t { top: 6px; left: 12px; right: 12px; } .mq-rail.b { bottom: 6px; left: 12px; right: 12px; }
.mq-rail.l { left: 6px; top: 18px; bottom: 18px; flex-direction: column; } .mq-rail.r { right: 6px; top: 18px; bottom: 18px; flex-direction: column; }
.mq-rail i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffdf2, var(--bulb) 55%, #c99a3c);
  box-shadow: 0 0 5px 1px var(--bulb-glow); animation: mq-chase 1.8s ease-in-out infinite; }
.mq-rail i:nth-child(3n+2) { animation-delay: .6s; } .mq-rail i:nth-child(3n) { animation-delay: 1.2s; }
@keyframes mq-chase { 0%, 100% { opacity: .5; box-shadow: 0 0 2px 0 var(--bulb-glow); } 30% { opacity: 1; box-shadow: 0 0 7px 2px var(--bulb-glow); } }

/* header plate */
.mq-head { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 2px; border-radius: 6px;
  background: linear-gradient(180deg, #f3e3b8, #e2c788 45%, #b88e45); color: #0f1c33; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px rgba(0,0,0,.35);
  font: 400 1.3rem/1.05 "MCC Marquee", var(--sans); letter-spacing: .14em; }
.mq-head .mq-ht { padding-left: .14em; }
.mq-rip { width: 22px; height: 12px; flex: none; }
.mq-rip path { fill: none; stroke: #0f1c33; stroke-width: 1.6; stroke-linecap: round; }
.mq-rip .r2 { opacity: .55; }

/* letter board */
.mq-board { position: relative; width: 100%; padding: 7px 10px 6px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, #fffaf0 0 13px, #efe4cc 13px 14px), #fffaf0;
  box-shadow: inset 0 0 0 1px #d9c69c, inset 0 2px 6px rgba(0,0,0,.18), 0 0 14px rgba(255,231,168,.28); }
[data-theme="dark"] .mq-board { background: repeating-linear-gradient(180deg, #f6eedb 0 13px, #e6d9bb 13px 14px), #f6eedb; }
.mq-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.mq-word { display: inline-flex; gap: 2px; white-space: nowrap; }
.mq-word b { display: inline-block; min-width: .62em; padding: 1px 2px 0; font: 400 2.1rem/1 "MCC Marquee", var(--sans); color: #111;
  background: linear-gradient(#ffffff, #f4ecdc); border-radius: 2px; box-shadow: 0 1px 0 #cdbb92, 0 0 0 .5px rgba(0,0,0,.12); }
.divein[data-state="showing"] .mq-word b { font-size: 1.45rem; }
.mq-when { font: 700 .8rem/1.3 var(--sans); color: var(--gold-2); letter-spacing: .02em; }
.mq-when[hidden] { display: none; }
.mq-line { font-size: .88rem; line-height: 1.35; color: #e8e2d2; }

/* seasonal bulb tint; the sign stays gold and navy */
[data-season="spooky"] .divein { --bulb: #ffc27a; --bulb-glow: rgba(240,145,46,.85); }
[data-season="christmas"] .divein { --bulb: #f4f9ff; --bulb-glow: rgba(190,220,255,.9); }

@media (prefers-reduced-motion: reduce) { .mq-rail i { animation: none; opacity: .9; box-shadow: 0 0 5px 1px var(--bulb-glow); } }
@media (max-width: 520px) {
  .hw-stack { display: flex; max-width: none; }
  .divein { padding: 16px 16px 12px; }
  .mq-head { font-size: 1.18rem; }
  .mq-word b { font-size: 1.85rem; }
  .mq-line { font-size: .84rem; }
}
@media print {
  .divein { color: #000; background: none; border: 1pt solid #000; box-shadow: none; }
  .mq-rail { display: none; }
  .mq-head { background: none; border: .8pt solid #000; box-shadow: none; color: #000; }
  .mq-rip path { stroke: #000; }
  .mq-board { background: none; box-shadow: none; border: .8pt solid #000; }
  .mq-word b { box-shadow: none; background: none; }
  .mq-line, .mq-when { color: #000; }
}