/* allfootball-tw · gold jackpot slot popup · prefix pen- */
.pen-backdrop,
.pen-backdrop * { box-sizing: border-box; }

.pen-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 34%, rgba(113, 66, 8, 0.35), transparent 46%),
    rgba(10, 7, 4, 0.82);
  opacity: 0;
  transition: opacity 180ms ease;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
}
.pen-backdrop.is-visible { opacity: 1; }

.pen-card {
  position: relative;
  width: min(94vw, 410px);
  max-height: min(94vh, 720px);
  overflow-y: auto;
  padding: 28px 24px 20px;
  color: #fff8dc;
  text-align: center;
  border: 2px solid #d7a739;
  border-radius: 22px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(255, 220, 118, 0.08) 49%, transparent 51%) 0 0 / 18px 18px,
    radial-gradient(circle at 50% 0, #5d190f 0, #2a0907 42%, #130605 100%);
  box-shadow:
    0 0 0 5px #5f3c0b,
    0 0 0 7px #e8c15a,
    0 28px 80px rgba(0, 0, 0, 0.62),
    inset 0 0 55px rgba(255, 181, 48, 0.12);
  transform: translateY(18px) scale(0.97);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pen-backdrop.is-visible .pen-card { transform: translateY(0) scale(1); }

.pen-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 227, 139, 0.48);
  border-radius: 50%;
  color: #fff1bb;
  background: rgba(20, 5, 4, 0.78);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.pen-close:focus-visible,
.pen-spin:focus-visible,
.pen-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.pen-eyebrow {
  color: #e7bd55;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.pen-title {
  margin: 7px 0 2px;
  color: #fff2b3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 8vw, 38px);
  line-height: 1.05;
  text-shadow: 0 3px 0 #7e3708, 0 0 20px rgba(255, 203, 73, 0.5);
}
.pen-desc { margin: 5px 0 16px; color: rgba(255, 247, 213, 0.84); font-size: 14px; }
.pen-desc strong { color: #ffd45d; font-size: 17px; }

.pen-machine {
  position: relative;
  width: min(78vw, 285px);
  margin: 0 auto 14px;
  padding: 12px 18px 16px;
  border: 4px solid #b87c18;
  border-radius: 20px 20px 15px 15px;
  background: linear-gradient(160deg, #f4cf67, #a7550b 46%, #6e2708);
  box-shadow:
    inset 0 0 0 3px #ffe598,
    inset 0 -18px 32px rgba(83, 25, 3, 0.45),
    0 14px 30px rgba(0, 0, 0, 0.45);
}
.pen-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: -4px 20px 9px;
  color: #ffdc69;
  text-shadow: 0 2px 2px #430902;
}
.pen-marquee b { padding: 4px 9px; border-radius: 7px; background: #5d0c05; letter-spacing: 0.12em; font-size: 13px; }
.pen-marquee span { font-size: 15px; animation: penBlink 1s steps(2, end) infinite; }
@keyframes penBlink { 50% { color: #fff; filter: drop-shadow(0 0 6px #fff6a6); } }

.pen-reel-window {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 9px;
  border: 4px solid #4b1705;
  border-radius: 10px;
  background: #1d0804;
  box-shadow: inset 0 5px 14px #000;
}
.pen-reel {
  display: grid;
  place-items: center;
  aspect-ratio: 0.76;
  overflow: hidden;
  border: 2px solid #e2b245;
  border-radius: 7px;
  color: #92170b;
  background:
    linear-gradient(90deg, rgba(162, 103, 12, 0.18), transparent 28%, transparent 72%, rgba(162, 103, 12, 0.18)),
    #fff6d2;
  font-family: Georgia, serif;
  font-size: 48px;
  font-weight: 900;
  text-shadow: 0 2px #fff;
}
.pen-machine.is-spinning .pen-reel span { animation: penReel 180ms linear infinite; }
.pen-machine.is-spinning .pen-reel:nth-child(2) span { animation-duration: 140ms; }
.pen-machine.is-spinning .pen-reel:nth-child(3) span { animation-duration: 220ms; }
@keyframes penReel {
  0% { transform: translateY(-38px); filter: blur(1px); }
  100% { transform: translateY(38px); filter: blur(1px); }
}

.pen-lever {
  position: absolute;
  right: -24px;
  top: 67px;
  width: 19px;
  height: 74px;
  border: 2px solid #6f3b0a;
  border-radius: 10px;
  background: #d99e32;
  transform-origin: 50% 100%;
  transition: transform 180ms ease;
}
.pen-lever span {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 31px;
  height: 31px;
  border: 3px solid #f1bd46;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff9378, #b5100c 56%, #5a0504);
  transform: translateX(-50%);
}
.pen-machine.is-spinning .pen-lever { transform: rotate(18deg); }
.pen-spin {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 2px solid #fff0a4;
  border-radius: 9px;
  color: #3d1003;
  background: linear-gradient(180deg, #fff5bb, #ffc83d 52%, #df850e);
  box-shadow: 0 6px 0 #713006, 0 10px 18px rgba(65, 17, 2, 0.38);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.pen-spin:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.pen-spin:disabled { cursor: wait; opacity: 0.9; }
.pen-card[data-interaction-state="complete"] .pen-spin {
  color: #fff9d7;
  background: linear-gradient(180deg, #a92b16, #711207);
  box-shadow: 0 5px 0 #350502, 0 0 18px rgba(255, 210, 83, 0.35);
  cursor: default;
}
.pen-win {
  margin: 10px auto 0;
  padding: 5px 9px;
  width: max-content;
  border-radius: 999px;
  color: #4a1704;
  background: #ffe991;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.82;
}
.pen-machine.is-winner .pen-win {
  color: #fff8cf;
  background: #8b1709;
  animation: penWin 850ms ease-in-out 2;
  opacity: 1;
}
@keyframes penWin { 50% { transform: scale(1.08); box-shadow: 0 0 18px #fff3a1; } }

.pen-offer {
  margin: 14px 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 215, 103, 0.43);
  border-radius: 13px;
  background: rgba(255, 205, 75, 0.09);
}
.pen-offer-kicker { display: block; margin-bottom: 4px; color: #dcb75c; font-size: 11px; letter-spacing: 0.16em; }
.pen-offer div { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.pen-offer b { color: #fff3bd; font-size: 19px; }
.pen-offer i { color: #d8b458; font-style: normal; font-size: 13px; }
.pen-offer strong { color: #ffd555; font-family: Georgia, serif; font-size: 39px; line-height: 1; text-shadow: 0 0 16px rgba(255, 209, 71, 0.48); }
.pen-offer em { color: #ffd555; font-style: normal; font-size: 13px; }

.pen-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid #fff0a4;
  border-radius: 11px;
  color: #3d1003;
  background: linear-gradient(180deg, #fff0a4, #e9a927 52%, #bd6810);
  box-shadow: 0 9px 0 #6c2906, 0 16px 30px rgba(0, 0, 0, 0.34);
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
}
.pen-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pen-terms { margin: 16px 0 0; color: rgba(255, 243, 201, 0.65); font-size: 11px; line-height: 1.5; }
.pen-compliance { margin: 5px 0 0; color: rgba(255, 243, 201, 0.58); font-size: 11px; }

@media (max-width: 520px) {
  .pen-backdrop { place-items: end center; padding: 0; }
  .pen-card {
    width: 100%;
    max-height: 94vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    padding: 24px 20px max(18px, env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .pen-backdrop.is-visible .pen-card { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pen-backdrop,
  .pen-card,
  .pen-marquee span,
  .pen-reel span,
  .pen-lever,
  .pen-spin,
  .pen-win { transition: none !important; animation: none !important; }
}