/* v18 — LINE Seed TW outlines, renamed after subsetting under the OFL.
   This final layer owns UI type and alignment; campaign artwork is unchanged. */
@font-face {
  font-family: "Campaign Rounded TC";
  src: url("assets/campaign-rounded-tc-400.woff2?v=18") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Campaign Rounded TC";
  src: url("assets/campaign-rounded-tc-700.woff2?v=18") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-ui: "Campaign Rounded TC", "LINE Seed TW", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --type-label: .875rem; --type-body: 1rem; --type-section: 2rem; --type-subheading: 1.25rem;
  --weight-body: 400; --weight-label: 400; --weight-action: 700; --weight-heading: 700;
  --ink: #26262b; --muted: #63636c; --line: #e6e5e7; --soft: #f8f8f9;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-control: 16px;
}
body, button { font-family: var(--font-ui); font-synthesis: none; }
body { color: var(--ink); font-size: var(--type-body); font-weight: 400; line-height: 1.75; }
button, a, time { font-kerning: normal; }
.desktop-nav { align-items: center; gap: 28px; }
.desktop-nav a, .mobile-section-link { font-weight: 700; font-size: var(--type-label); line-height: 1.5; color: var(--muted); letter-spacing: 0; }
.section-heading h2, .details-layout h2, .app-brand-lockup h2 {
  font-size: var(--type-section); font-weight: 700; letter-spacing: 0; line-height: 1.35; text-wrap: balance;
}
.steps-list h3, .event-shortcut h3 { font-size: var(--type-subheading); font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.section-kicker, .app-brand-lockup .section-kicker {
  margin-bottom: 8px; color: var(--red-dark); font-size: var(--type-label); font-weight: 700; line-height: 1.5; letter-spacing: .02em;
}
/* The supplied red tab needs white text, not the shared red kicker color. */
.campaign-tab { color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.5; letter-spacing: .04em; min-height: 44px; min-width: 148px; padding: 8px 28px 12px; margin-bottom: 16px; text-shadow: none; }
.download-description, .steps-list p, .event-facts dd, .terms-content, .shortcut-copy {
  color: #4e4e57; font-size: var(--type-body); font-weight: 400; line-height: 1.8; letter-spacing: 0;
}
.button, .mobile-action-bar .button, .mobile-action-bar .button-outline {
  font-size: var(--type-body); font-weight: 700; border-radius: var(--radius-control);
  box-shadow: none; letter-spacing: 0; line-height: 1.4; min-height: 52px;
}
.button-primary, .button-primary:hover { box-shadow: none; }
.button-with-icon { gap: 8px; }
.button-icon { flex: 0 0 24px; }
.button-label { display: inline-block; }
.hero-copy .hero-lead { color: #4e4e57; font-size: 1.125rem; font-weight: 400; letter-spacing: 0; line-height: 1.6; }
.hero-actions { width: min(100%, 320px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hero-actions .button { width: 100%; padding-inline: 16px; }

/* The original promotional badge replaces dates in the opening poster.
   This is offer copy, not another button. Exact dates remain under #details. */
.hero-copy .hero-offer-banner {
  display: grid;
  align-content: center;
  justify-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 54px;
  margin: 16px auto 0;
  padding: 10px 24px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/section-tab-v1.webp") center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
  filter: none;
}
.offer-line { display: block; white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1100px) {
  .hero-copy .hero-offer-banner { min-height: 48px; padding: 10px 16px 14px; font-size: .9375rem; }
}
@media (max-width: 700px) {
  .hero-copy .hero-offer-banner { order: 5; min-height: 48px; margin: 4px auto 0; padding: 10px 16px 14px; font-size: .9375rem; }
}
@media (max-width: 360px) {
  .hero-copy .hero-offer-banner { min-height: 44px; padding: 8px 12px 12px; font-size: .875rem; }
}

.hero-scroll { color: var(--muted); font-size: .875rem; font-weight: 400; }
.prize-slab { transition-duration: 700ms; }

.download-section, .details-section { background: var(--soft); border-color: var(--line); }
.app-brand-lockup { align-items: center; gap: 16px; }
.app-brand-lockup > div { text-align: left; }
.app-brand-lockup .section-kicker { margin: 0 0 4px; }
.app-brand-lockup > img { box-shadow: none; }
.store-badges { gap: 12px; }
.store-badges img { height: 42px; }
.event-shortcut .shortcut-copy { margin-block: 8px 16px; font-size: .9375rem; }
.steps-list { border: 1px solid #ead8d8; box-shadow: none; border-radius: 12px; }
.steps-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 28px 24px; }
.step-number { width: 40px; height: 40px; border: 0; box-shadow: none; background: #fff0f0; color: var(--red-dark); font-size: 1rem; font-weight: 700; line-height: 1; }
.steps-list h3 { margin: 5px 0 8px; }
.event-facts > div { border-color: var(--line); gap: 24px; align-items: baseline; }
.event-facts dt { color: var(--muted); font-size: .9375rem; font-weight: 400; line-height: 1.8; }
.terms-disclosure summary { color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.5; border-radius: var(--radius-control); }
.terms-state { color: var(--muted); font-size: .875rem; font-weight: 400; }
.terms-content h3 { color: var(--ink); font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.prize-table { font-size: .875rem; line-height: 1.75; }
.prize-table th { background: #efeff1; font-weight: 700; }
.footer-inner p { color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.8; }

@media (min-width: 701px) {
  .hero-copy .hero-lead { margin: 20px auto 24px; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .button { min-height: 56px; font-size: 1.0625rem; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero-actions { gap: 8px; }
  .hero-actions .button { font-size: .9375rem; padding-inline: 8px; }
}
@media (min-width: 1001px) {
  .download-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; }
  .event-shortcut { grid-template-columns: 104px minmax(0,1fr); gap: 24px; padding-left: 32px; }
}
@media (max-width: 700px) {
  :root { --type-section: 1.75rem; --poster-action-space: calc(max(80px, 4.5rem) + env(safe-area-inset-bottom)); }
  /* Reframe the original landscape decoration for portrait screens without
     stretching it. The two masked corners leave a clear centre for the cards. */
  .hero { background-image: none; }
  .hero::before, .hero::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    background: url("assets/campaign-background-v1.webp") no-repeat;
    background-size: cover;
  }
  .hero::before {
    top: 0;
    height: 55%;
    max-height: 420px;
    background-position: left top;
    -webkit-mask-image: linear-gradient(#000 24%, transparent 76%);
    mask-image: linear-gradient(#000 24%, transparent 76%);
  }
  .hero::after {
    bottom: var(--poster-action-space);
    height: 48%;
    max-height: 380px;
    background-position: right bottom;
    -webkit-mask-image: linear-gradient(transparent 15%, #000 75%);
    mask-image: linear-gradient(transparent 15%, #000 75%);
  }
  .hero-layout {
    height: auto;
    min-height: max(600px, calc(100svh - var(--poster-header) - var(--poster-action-space)));
    padding-block: 8px;
    grid-template-rows: minmax(24px, 1fr) auto auto auto minmax(56px, 1fr);
    gap: 8px;
    align-content: stretch;
  }
  .hero-title { grid-row: 2; position: relative; z-index: 1; }
  .hero-prizes { grid-row: 3; }
  .hero-copy .hero-offer-banner { grid-row: 4; position: relative; z-index: 1; }
  .hero-scroll { grid-row: 5; }
  .hero-prizes { height: auto; min-height: 0; aspect-ratio: 25 / 26; align-self: start; }
  .hero-scroll { align-self: end; margin-bottom: 4px; }
  .hero-copy .hero-lead { margin: 0; font-size: .9375rem; line-height: 1.6; }
  .hero-actions { display: none; }
  .download-section { padding-block: 40px; }
  .app-brand-lockup { margin-bottom: 20px; }
  .app-brand-lockup .section-kicker { font-weight: 400; color: var(--muted); letter-spacing: 0; }
  .download-description { margin-bottom: 24px; text-wrap: pretty; }
  .event-shortcut { padding-top: 24px; border-color: var(--line); }
  .event-shortcut > div { grid-template-columns: auto minmax(0, auto); gap: 16px; }
  .event-shortcut .section-kicker { font-size: .875rem; font-weight: 400; color: var(--muted); }
  .event-shortcut .button { min-height: 44px; font-size: .9375rem; font-weight: 700; border-color: #d4d4d9; color: var(--red-dark); }
  .steps-section, .details-section { padding-block: 48px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h2, .details-layout h2 { margin-bottom: 0; }
  .campaign-tab { display: block; width: auto; min-width: 0; min-height: 0; padding: 0; margin-bottom: 8px; background: none; color: var(--red-dark); font-size: .875rem; font-weight: 700; text-align: center; letter-spacing: .02em; }
  .steps-list { border: 0; border-radius: 0; }
  .steps-list li { grid-template-columns: 36px minmax(0,1fr); gap: 16px; padding: 0 0 28px; }
  .step-number { width: 36px; height: 36px; font-size: .9375rem; }
  .steps-list h3 { margin: 3px 0 8px; }
  .steps-list li:not(:last-child)::before { top: 42px; bottom: 6px; left: 18px; background: #ead8d8; }
  .details-layout { gap: 28px; }
  .event-facts > div { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; }
  .event-facts dt { font-size: .875rem; }
  .terms-disclosure { margin-top: 16px; }
  .terms-disclosure summary { padding: 18px 16px; background: #efeff1; }
  .mobile-action-bar { grid-template-columns: minmax(0,1fr); border-color: var(--line); background: #fffffff7; box-shadow: 0 -3px 18px #00000004; }
  .mobile-action-bar .button { min-height: 52px; padding-inline: 10px; white-space: normal; }
  .mobile-action-bar .button-outline { border-width: 1.5px; }
  .mobile-action-bar .button-label { min-width: 0; }
}
@media (max-width: 700px) and (max-height: 740px) {
  /* Keep the offer clear of the fixed actions on shorter phones. */
  .hero-layout {
    min-height: calc(100svh - var(--poster-header) - var(--poster-action-space));
    padding-block: 8px 4px;
    grid-template-rows: 0 auto auto auto minmax(24px, 1fr);
    gap: 4px;
  }
  .hero-scroll { min-height: 24px; margin-bottom: 0; }
}
@media (max-width: 360px) {
  .mobile-action-bar .button { font-size: .9375rem; gap: 6px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .prize-slab, .slab-surface { transition: none; }
}

/* Friendly YAICHI panel geometry, in the campaign's red/orange palette.
   A single download panel replaces the competing activity-entry action. */
.download-section { background: #fff7ef; }
.download-layout { display: block; max-width: 800px; }
.download-copy {
  padding: 36px;
  text-align: left;
  background: #fff;
  border: 1px solid #f1e6de;
  border-radius: 24px;
}
.app-brand-lockup { margin-bottom: 20px; justify-content: flex-start; }
.app-brand-lockup > img { width: 64px; height: 64px; border-radius: 16px; }
.app-brand-lockup .section-kicker { color: var(--red-dark); font-weight: 700; }
.download-description { margin: 0 0 24px; }
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store-badge { display: inline-flex; align-items: center; min-height: 48px; }
.store-badges img { width: auto; height: 44px; max-width: 100%; object-fit: contain; }
.download-note { margin-top: 24px; padding: 16px 20px; border-radius: 16px; background: #fff5ed; }
.download-note p { margin: 0; color: #615249; font-size: .9375rem; line-height: 1.7; }
.download-note .download-note-title { margin-bottom: 4px; color: #813f26; font-weight: 700; }
.steps-list { gap: 16px; border: 0; border-radius: 0; background: none; overflow: visible; }
.steps-list li {
  padding: 24px; border: 1px solid #eee7e2; border-radius: 20px;
  background: #fff; grid-template-columns: 40px minmax(0,1fr); gap: 16px;
}
.steps-list li + li { border-left: 1px solid #eee7e2; }
.steps-list li:last-child { border: 1px solid #eee7e2; padding-bottom: 24px; }
.steps-list li:not(:last-child)::before { display: none; }
.step-number { width: 40px; height: 40px; border-radius: 12px; background: #fff1e7; color: #a33c21; }
.terms-disclosure { border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.terms-disclosure summary { background: #fff; padding: 20px; }
.terms-disclosure .terms-content { padding: 24px 20px; }
@media (min-width: 701px) and (max-width: 1000px) {
  .steps-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .download-copy { padding: 24px 20px; border-radius: 24px; }
  .store-badges { justify-content: flex-start; gap: 10px; }
  .store-badges img { height: 40px; }
  .download-note { padding: 16px; }
  .steps-list { gap: 12px; }
  .steps-list li { padding: 20px; }
  .steps-list li:last-child { padding-bottom: 20px; }
  .steps-list h3 { margin-top: 5px; }
  .mobile-action-bar .button { width: 100%; max-width: 460px; margin-inline: auto; font-size: 1.0625rem; }
}
@media (max-width: 360px) {
  .download-copy { padding: 24px 16px; }
  .store-badges { gap: 8px; }
  .store-badges img { height: 34px; }
  .steps-list li { padding: 18px 16px; gap: 12px; }
  .steps-list li:last-child { padding-bottom: 18px; }
  .app-brand-lockup { gap: 12px; }
  .app-brand-lockup > img { width: 52px; height: 52px; border-radius: 13px; }
  .app-brand-lockup h2 { font-size: 1.5rem; }
}