/* 字體 / reset 由 shared.css 接管 — 不再 override */
    body { min-height: 100vh; }
    .app-shell {
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
      padding: 20px 16px 0;
    }

    /* ── SWAG Hero（淡 swag tint light — 跟其他卡同色階） ──────── */
    .home-hero {
      position: relative;
      background: linear-gradient(135deg, color-mix(in srgb, var(--swag) 8%, var(--surface)) 0%, var(--surface) 65%);
      border: 1px solid color-mix(in srgb, var(--swag) 22%, var(--line2));
      border-radius: 18px;
      padding: 24px 24px 30px;
      color: var(--text);
      box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(43,197,180,.10);
      overflow: hidden;
      margin-bottom: 22px;
      text-align: center;
    }
    .home-hero::after {
      content: '';
      position: absolute;
      right: -36px; top: -56px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(43,197,180,.16) 0%, transparent 65%);
      border-radius: 50%;
      pointer-events: none;
    }
    .home-hero::before {
      content: '';
      position: absolute;
      left: -30px; bottom: -50px;
      width: 130px; height: 130px;
      background: radial-gradient(circle, rgba(43,197,180,.10) 0%, transparent 60%);
      border-radius: 50%;
      pointer-events: none;
    }
    .home-hero-langrow {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: 1;
      margin-bottom: 6px;
    }
    .home-hero-lang {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--surface);
      border: 1px solid var(--line2);
      border-radius: 999px;
      padding: 4px 10px 4px 8px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .home-hero-lang select {
      background: transparent;
      border: none;
      color: var(--mid);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      padding-right: 4px;
    }
    .home-hero-lang select option { color: var(--text); background: var(--surface); }
    .home-hero-logo {
      position: relative;
      z-index: 1;
      display: block;
      width: min(200px, 56vw);
      height: auto;
      margin: 6px auto 14px;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
    }
    .home-hero-title {
      position: relative;
      z-index: 1;
      margin-top: 4px;
      font-size: clamp(22px, 5.4vw, 28px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -.02em;
      color: var(--text);
    }
    .home-hero-title span,
    #home-h1 { color: var(--swag); }

    /* ── Section ──────────────────────────────────────────────── */
    .sec-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--swag-dk);
      letter-spacing: .16em;
      text-transform: uppercase;
      margin: 26px 6px 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .sec-title::before {
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--swag);
      box-shadow: 0 0 8px rgba(43,197,180,.55);
    }

    /* ── Card grid ─────────────────────────────────────────────── */
    nav.entry-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    @media (min-width: 720px) {
      nav.entry-grid { grid-template-columns: repeat(2, 1fr); }
    }

    a.card {
      --accent: var(--swag);
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid var(--line2);
      background: var(--surface);
      color: var(--text);
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      position: relative;
      overflow: hidden;
    }
    a.card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%);
      pointer-events: none;
    }
    a.card:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .card-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 14%, var(--surface));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
      transition: transform .2s ease;
    }
    a.card:hover .card-icon { transform: scale(1.06) rotate(-3deg); }

    .card-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .card-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
    .card-sub { font-size: 12px; font-weight: 500; color: var(--muted); }
    a.card:hover .card-sub { color: var(--text); opacity: .7; }

    .card-arrow {
      flex-shrink: 0;
      font-size: 22px;
      font-weight: 400;
      color: var(--faint, #c8c4bc);
      transition: transform .18s ease, color .18s ease;
      line-height: 1;
    }
    a.card:hover .card-arrow {
      color: var(--accent);
      transform: translateX(4px);
    }

    /* Per-card accent */
    a.card--rank     { --accent: var(--gold); }
    a.card--guide    { --accent: var(--swag); }
    a.card--comm     { --accent: #e879a3; }
    a.card--event    { --accent: #a855f7; }
    a.card--wheel    { --accent: var(--swag); }
    a.card--poker    { --accent: #c0392b; }
    a.card--streamer { --accent: var(--swag); }
    a.card--audience { --accent: #5b8def; }
    a.card--hof      { --accent: #d4a017; }

    /* ── 活動 Hero 大卡（儀式感、預告、動畫） ─────────────────────── */
    a.home-event-hero {
      display: block;
      position: relative;
      border-radius: 18px;
      padding: 28px 26px 22px;
      background: linear-gradient(140deg, color-mix(in srgb, var(--swag) 6%, var(--surface)) 0%, var(--surface) 60%);
      border: 1px solid color-mix(in srgb, var(--swag) 30%, var(--line2));
      color: var(--text);
      text-decoration: none;
      overflow: hidden;
      isolation: isolate;
      box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 32px rgba(43,197,180,.10);
      margin-bottom: 0;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    a.home-event-hero:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 36px rgba(0,0,0,.08), 0 0 44px rgba(43,197,180,.22);
    }
    a.home-event-hero.is-upcoming { cursor: not-allowed; }
    a.home-event-hero.is-upcoming:hover { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 32px rgba(43,197,180,.10); }

    /* 預設：active/ended 顯示真實資訊、隱藏 teaser */
    .event-hero-title-teaser,
    .event-hero-desc-teaser { display: none; }
    /* upcoming：神秘預告 — 隱藏真實標題/期間/描述、只顯示 teaser */
    a.home-event-hero.is-upcoming .event-hero-title,
    a.home-event-hero.is-upcoming .event-hero-period,
    a.home-event-hero.is-upcoming .event-hero-desc { display: none; }
    a.home-event-hero.is-upcoming .event-hero-title-teaser { display: block; }
    a.home-event-hero.is-upcoming .event-hero-desc-teaser { display: block; }

    /* 圓形光暈（呼吸動畫） */
    .event-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      will-change: transform, opacity;
    }
    .event-glow-1 {
      right: -90px; top: -100px;
      width: 340px; height: 340px;
      background: radial-gradient(circle, rgba(43,197,180,.22) 0%, transparent 65%);
      animation: event-orb-1 6.5s ease-in-out infinite;
    }
    .event-glow-2 {
      left: -70px; bottom: -90px;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(43,197,180,.14) 0%, transparent 60%);
      animation: event-orb-2 8s ease-in-out infinite;
    }
    @keyframes event-orb-1 {
      0%, 100% { transform: scale(1) translate(0,0); opacity: .85; }
      50%      { transform: scale(1.18) translate(-14px, 10px); opacity: 1; }
    }
    @keyframes event-orb-2 {
      0%, 100% { transform: scale(1) translate(0,0); opacity: .65; }
      50%      { transform: scale(.88) translate(8px, -6px); opacity: 1; }
    }

    /* shimmer 跑光斜條 */
    .event-shimmer {
      position: absolute;
      top: 0; left: -60%;
      width: 50%;
      height: 100%;
      background: linear-gradient(115deg, transparent 0%, rgba(43,197,180,.08) 50%, transparent 100%);
      animation: event-shimmer 6s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes event-shimmer {
      0%, 35%, 100% { transform: translateX(0); opacity: 0; }
      45%           { opacity: 1; }
      85%           { transform: translateX(420%); opacity: 0; }
    }

    .event-hero-inner {
      position: relative;
      z-index: 1;
    }

    .event-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border: 1px solid var(--swag);
      border-radius: 999px;
      background: rgba(43,197,180,.14);
      margin-bottom: 18px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .event-eyebrow-pulse {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #2BC5B4;
      box-shadow: 0 0 0 0 rgba(43,197,180,.55);
      animation: event-eyebrow-pulse 1.6s ease-out infinite;
    }
    @keyframes event-eyebrow-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(43,197,180,.6); }
      70%  { box-shadow: 0 0 0 9px rgba(43,197,180,0); }
      100% { box-shadow: 0 0 0 0 rgba(43,197,180,0); }
    }
    .event-eyebrow-text {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .14em;
      color: var(--swag-dk);
      text-transform: uppercase;
    }

    .event-hero-title,
    .event-hero-title-teaser {
      font-size: clamp(26px, 6vw, 34px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -.02em;
      margin: 0 0 12px;
      color: var(--text);
      text-wrap: balance;
      animation: event-title-in .6s cubic-bezier(.34,1.2,.64,1) both;
    }
    .event-hero-title-teaser {
      background: linear-gradient(120deg, var(--swag-dk) 0%, var(--swag) 50%, var(--swag-dk) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: event-title-in .6s cubic-bezier(.34,1.2,.64,1) both,
                 event-title-shine 3.5s ease-in-out infinite 1s;
    }
    @keyframes event-title-shine {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }
    @keyframes event-title-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .event-hero-period {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--swag-dk);
      letter-spacing: .01em;
      margin-bottom: 14px;
    }
    .event-hero-desc,
    .event-hero-desc-teaser {
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--mid);
      margin: 0 0 22px;
      max-width: 92%;
    }
    .event-hero-desc-teaser {
      letter-spacing: .04em;
      color: var(--muted);
      font-style: italic;
    }

    .event-countdown {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid var(--line2);
      border-radius: 14px;
      background: color-mix(in srgb, var(--swag) 8%, var(--surface));
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .event-countdown-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0;
      min-width: 0;
    }
    .event-countdown-label {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .14em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .event-countdown-state {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--text);
    }
    .event-countdown-cells {
      display: flex;
      gap: 8px;
    }
    .ec-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .ec-num {
      font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
      font-size: clamp(18px, 4.6vw, 22px);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--swag-dk);
      line-height: 1;
      min-width: 38px;
      text-align: center;
      padding: 8px 8px;
      background: color-mix(in srgb, var(--swag) 10%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--swag) 35%, var(--line2));
      border-radius: 8px;
      text-shadow: 0 0 8px rgba(43,197,180,.35), 0 0 2px rgba(43,197,180,.5);
      letter-spacing: .03em;
    }
    .ec-unit {
      font-size: 9.5px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: .1em;
      margin-top: 6px;
      text-transform: uppercase;
    }

    @media (prefers-reduced-motion: reduce) {
      .event-glow-1, .event-glow-2, .event-shimmer,
      .event-eyebrow-pulse, .event-hero-title,
      .event-hero-title-teaser { animation: none; }
    }

    /* 手機（≤480px）：縮 padding、倒數 cells 字級稍縮 */
    @media (max-width: 480px) {
      a.home-event-hero { padding: 24px 20px 20px; border-radius: 18px; }
      .event-countdown { padding: 12px 12px; gap: 8px; flex-wrap: wrap; }
      .event-countdown-cells { width: 100%; justify-content: space-between; }
      .ec-num { min-width: 0; flex: 1; padding: 7px 4px; }
    }

    /* ── 話題情報自動切換 Hero Card（統一 swag tint，cat chip 各自色） ── */
    a.home-talk-card {
      display: block;
      position: relative;
      padding: 20px 22px 16px;
      background: linear-gradient(140deg, color-mix(in srgb, var(--swag) 6%, var(--surface)) 0%, var(--surface) 60%);
      border: 1px solid color-mix(in srgb, var(--swag) 22%, var(--line2));
      border-radius: 18px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
      text-decoration: none;
      color: var(--text);
      overflow: hidden;
      margin-bottom: 0;
      min-height: 156px;
      transition: border-color .18s, box-shadow .18s, transform .18s;
    }
    a.home-talk-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(43,197,180,.06) 0%,
        transparent 55%);
      pointer-events: none;
      transition: opacity .25s ease;
    }
    a.home-talk-card:hover {
      border-color: var(--swag);
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0,0,0,.06),
                  0 12px 32px rgba(43,197,180,.18);
    }

    .home-talk-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }
    .home-talk-cat {
      --cat-color: var(--swag);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--cat-color) 14%, var(--surface));
      color: var(--cat-color);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .005em;
      white-space: nowrap;
      transition: opacity .25s ease;
    }
    .home-talk-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .home-talk-eyebrow::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #EF4444;
      box-shadow: 0 0 0 0 rgba(239,68,68,.55);
      animation: home-live-pulse 1.6s ease-out infinite;
    }
    @keyframes home-live-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
      70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
      100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    }

    .home-talk-headline {
      display: block;
      font-size: clamp(17px, 4.4vw, 20px);
      font-weight: 800;
      line-height: 1.35;
      letter-spacing: -.005em;
      color: var(--text);
      text-shadow: 0 0 14px rgba(43,197,180,.12);
      min-height: 54px;
      position: relative;
      z-index: 1;
      transition: opacity .25s ease, transform .25s ease;
    }

    .home-talk-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
      gap: 10px;
      position: relative;
      z-index: 1;
    }
    .home-talk-dots {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .home-talk-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--line2);
      transition: background .25s, transform .25s, width .25s;
    }
    .home-talk-dot.active {
      background: var(--swag);
      width: 18px;
      border-radius: 4px;
    }
    .home-talk-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
    }
    .home-talk-arrow {
      font-size: 18px;
      color: var(--faint, #c8c4bc);
      line-height: 1;
      transition: color .18s, transform .18s;
    }
    a.home-talk-card:hover .home-talk-arrow {
      color: var(--swag-dk);
      transform: translateX(3px);
    }

    /* Fade transition：切換時 cat + headline 變透明、200ms 後 swap 文案再淡入 */
    .home-talk-card.is-fading .home-talk-cat,
    .home-talk-card.is-fading .home-talk-headline {
      opacity: 0;
      transform: translateY(-2px);
    }

    /* ── Skeleton 客製：home-talk-card 載入中 ──
       cat 走基礎 .skeleton 全覆蓋（pill 形狀由 host border-radius 接管）
       headline 改用兩條 bar 模擬兩行標題 */
    .home-talk-cat.skeleton {
      min-width: 92px;
      background: transparent;        /* 讓 ::before shimmer 接管 */
    }
    .home-talk-headline.skeleton {
      background: transparent;
    }
    .home-talk-headline.skeleton::before {
      /* override 基礎 inset:0 全覆蓋，改成上面一條長 bar */
      inset: 8px auto auto 0;
      width: 90%;
      height: 18px;
      border-radius: var(--r-sm);
    }
    .home-talk-headline.skeleton::after {
      content: '';
      position: absolute;
      top: 32px;
      left: 0;
      width: 64%;
      height: 18px;
      border-radius: var(--r-sm);
      background: linear-gradient(90deg,
        var(--c-surface-2) 25%,
        var(--c-line) 50%,
        var(--c-surface-2) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .home-talk-headline.skeleton::after { animation: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .home-talk-eyebrow::before { animation: none; }
      .home-talk-cat,
      .home-talk-headline { transition: none; }
    }

    /* ── Section title 點點：loading 時呼吸、ready 後靜止 ── */
    .sec-title.is-loading::before {
      animation: sec-title-pulse 1.6s ease-out infinite;
    }
    @keyframes sec-title-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(43,197,180,.55); }
      70%  { box-shadow: 0 0 0 8px rgba(43,197,180,0); }
      100% { box-shadow: 0 0 0 0 rgba(43,197,180,0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .sec-title.is-loading::before { animation: none; }
    }

    /* ── 觸控 tap 回饋（手機沒有 hover，靠 :active 給觸感） ── */
    a.card:active,
    a.home-talk-card:active,
    a.home-event-hero:active {
      transform: scale(.97);
      transition: transform 80ms var(--ease);
    }
    /* upcoming 活動卡禁用點擊（cursor: not-allowed），也不該縮放 */
    a.home-event-hero.is-upcoming:active { transform: none; }

    .home-pv {
      margin-top: 28px;
      padding-bottom: 14px;
      text-align: center;
      font-size: 11.5px;
      color: var(--muted);
      letter-spacing: .04em;
    }