/* ─────────────────────────────────────────────────────────────
       Round 1.1 — ref02 game-tab 아트폼 이식 (scoped: .play-ref-*).
       기능/상태/동적 수치 0. CSS 표면/border/glow/pill/CTA 만 가져옴.
       ───────────────────────────────────────────────────────────── */

    :root {
      --bg: #0b0e16;
      --tx: #e8ecf8;
      --tx2: #c8d0e4;
      --dim: rgba(255,255,255,.32);
      --mut: #586484;
      --potato: #4cd830;
      --potato2: #38b820;
      --gold: #f0b818;
      --dia: #80b8f0;
      --red: #f04040;
      --apple: cubic-bezier(.4,0,.2,1);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'DM Sans','Pretendard','Nunito','Noto Sans KR','Segoe UI',Arial,sans-serif;
      background:
        radial-gradient(ellipse at 50% 18%, rgba(76,216,48,.05), transparent 55%),
        radial-gradient(ellipse at 30% 75%, rgba(240,184,24,.025), transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0,152,234,.025), transparent 50%),
        var(--bg);
      color: var(--tx);
      /* R6 (2026-06-10): flex 쉘 전환 — topbar(R3) 삽입 후에도 .play-scroll 이
         100dvh 고정이라 화면보다 52px+safe 커져 마지막 카드 CTA 가 하단 네비에
         가려지던 회귀 수정. guild/friends 와 동일하게 body 를 잠그고
         스크롤 영역은 flex:1 로 남은 높이만 차지하게 한다. */
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
    }

    /* Round 18 (2026-05-12): Telegram shell 에서 body 가 100dvh + overflow:hidden 로
       잠기므로 페이지 콘텐츠는 내부 scroll container 안에서만 스크롤된다.
       Home/Friends/Guild/Vault 와 동일 패턴. body padding-bottom 는 .play-scroll
       쪽으로 옮겨서 중복 빈 공간을 방지한다.
       R6 (2026-06-10): 100dvh 고정 → flex:1 + min-height:0 (topbar 높이 자동 반영). */
    .play-scroll {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;            /* 허브: 자식(.play-list)이 세로 잔여공간을 받도록 */
      flex-direction: column;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      /* R5 (2026-06-10): 120px → 64px — Home/Friends/Guild/Vault 와 동일한
         하단 nav 클리어런스로 통일 (Round 18 의 body→scroll 이동 자체는 유지) */
      padding-bottom: calc(64px + var(--ptg-app-content-bottom, env(safe-area-inset-bottom, 0px)));
    }

    /* ─── Header ─── */
    .play-header {
      max-width: 540px;
      width: 100%;
      flex-shrink: 0;           /* 허브 flex 컬럼: 헤더는 안 줄어듦 */
      margin: 0 auto;
      /* R3 (2026-06-10): 상단 safe-area 는 공통 .ptg-topbar 가 소비 — 이중 적용 방지 */
      padding: 14px calc(18px + var(--ptg-app-content-right, 0px)) 6px calc(18px + var(--ptg-app-content-left, 0px));
    }
    .play-header-title {
      font-size: clamp(20px, 5.5vw, 24px);
      font-weight: 900;
      letter-spacing: -.3px;
      line-height: 1.2;
      color: var(--tx);
      word-break: keep-all;
    }
    .play-header-subtitle {
      margin-top: 6px;
      font-size: clamp(12px, 3.4vw, 13px);
      font-weight: 600;
      color: var(--dim);
      line-height: 1.5;
      word-break: keep-all;
    }

    /* ─── Card list ─── */
    .play-list {
      max-width: 540px;
      width: 100%;
      margin: 0 auto;
      padding: clamp(10px, 2.4vw, 12px) clamp(8px, 3.2vw, 14px) clamp(6px, 1.6vw, 8px);
      /* Arena 리디자인(요청서 ⑤): 1열 스택 → 2열 그리드 */
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 허브: 2행이 세로 잔여공간을 균등 분배 → 4패널이 화면을 꽉 채움 */
      grid-template-rows: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
      align-items: stretch;
      gap: clamp(9px, 2.6vw, 14px);
    }

    /* ─── ref02 game-card-compact 표면 (scoped: .play-ref-card) ───
       포팅 포인트:
       - liquid-black gradient surface
       - inset highlight + bottom shadow stack
       - spinning conic-gradient border via ::before + mask-composite
       - SVG turbulence noise via ::after
       기능/이벤트/상태 0. CSS 만. */
    @property --play-ref-spin {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes playRefBorderSpin { to { --play-ref-spin: 360deg; } }
    @keyframes playRefShimmer {
      0%   { transform: translateX(-100%) skewX(-20deg); }
      100% { transform: translateX(220%)  skewX(-20deg); }
    }

    .play-ref-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-radius: 15px;
      padding: clamp(14px, 3.6vw, 22px) clamp(8px, 3vw, 20px);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      gap: clamp(8px, 2.2vw, 12px);
      min-height: clamp(260px, 42vh, 320px);
      background:
        linear-gradient(180deg,
          rgba(28,30,38,.95) 0%,
          rgba(12,14,20,.98) 30%,
          rgba(4,5,10,1) 70%,
          rgba(0,0,0,1) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.8),
        inset 0 30px 50px rgba(255,255,255,.02),
        inset 0 -30px 60px rgba(0,0,0,.5),
        0 6px 28px rgba(0,0,0,.6);
      transition: transform .25s var(--apple);
    }
    .play-ref-card:active { transform: scale(.992); }

    /* spinning conic border */
    .play-ref-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      pointer-events: none;
      z-index: -2;
      animation: playRefBorderSpin 5s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
              mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
    }
    /* turbulence noise overlay */
    .play-ref-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      z-index: -1;
      opacity: .12;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }

    /* state: active (green/potato) */
    .play-ref-card.is-active::before {
      background: conic-gradient(
        from var(--play-ref-spin),
        transparent 30%,
        rgba(76,216,48,.55) 45%,
        rgba(76,216,48,.78) 50%,
        rgba(76,216,48,.55) 55%,
        transparent 70%
      );
    }
    /* state: coming-soon (muted red/board tone) */
    .play-ref-card.is-coming::before {
      background: conic-gradient(
        from var(--play-ref-spin),
        transparent 30%,
        rgba(240,72,72,.30) 45%,
        rgba(240,72,72,.45) 50%,
        rgba(240,72,72,.30) 55%,
        transparent 70%
      );
      animation-duration: 9s;
    }
    .play-ref-card.is-coming { filter: saturate(.85); }
    .play-ref-card.is-coming::after { opacity: .08; }

    /* ─── Pill row (scoped: .play-ref-tag-row / .play-ref-pill) ─── */
    .play-ref-tag-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px 4px;
      width: 100%;
      min-width: 0;
    }
    .play-ref-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 6px;
      border-radius: 8px;
      font-size: clamp(8px, 2.3vw, 11px);
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.25;
      border: .5px solid transparent;
      max-width: 100%;
      word-break: keep-all;
      flex: 0 1 auto;
      min-width: 0;
    }
    .play-ref-pill--green {
      color: var(--potato);
      background: rgba(76,216,48,.12);
      border-color: rgba(76,216,48,.20);
    }
    .play-ref-pill--blue {
      color: var(--dia);
      background: rgba(0,152,234,.12);
      border-color: rgba(0,152,234,.20);
    }
    .play-ref-pill--gold {
      color: var(--gold);
      background: rgba(240,184,24,.12);
      border-color: rgba(240,184,24,.20);
    }
    .play-ref-pill--red {
      color: var(--red);
      background: rgba(240,64,64,.12);
      border-color: rgba(240,64,64,.20);
    }

    /* ─── Title / Desc (scoped: .play-ref-title / .play-ref-desc) ─── */
    .play-ref-title {
      font-family: 'Nunito','Russo One',sans-serif;
      font-size: clamp(14px, 4.6vw, 24px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.2;
      word-break: keep-all;
      overflow-wrap: anywhere;
      max-width: 100%;
    }
    .play-ref-card.is-active .play-ref-title {
      background: linear-gradient(135deg, #7fffa0, #4cd830);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
              color: transparent;
    }
    .play-ref-card.is-coming .play-ref-title {
      background: linear-gradient(135deg, #ffb0bc, rgba(232,236,248,.55));
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
              color: transparent;
    }
    .play-ref-desc {
      font-size: clamp(12px, 3.2vw, 13px);
      font-weight: 500;
      line-height: 1.55;
      color: rgba(255,255,255,.32);
      max-width: 92%;
      margin: 0 auto;
      word-break: keep-all;
      hyphens: auto;
    }

    /* ─── Game art icon (scoped: .play-ref-icon / .play-ref-icon-svg) ─── */
    .play-ref-icon {
      width: clamp(60px, 18vw, 88px);
      height: clamp(60px, 18vw, 88px);
      margin: 0 auto;
      display: block;
      flex-shrink: 0;
    }
    .play-ref-icon-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .play-ref-card.is-active .play-ref-icon {
      filter:
        drop-shadow(0 0 12px rgba(76,216,48,.22))
        drop-shadow(0 4px 8px rgba(0,0,0,.45));
    }
    .play-ref-card.is-coming .play-ref-icon {
      opacity: .85;
      filter:
        drop-shadow(0 0 10px rgba(240,72,72,.12))
        drop-shadow(0 4px 8px rgba(0,0,0,.50));
    }

    /* ─── Status badge (Coming Soon) ─── */
    .play-ref-status-badge {
      align-self: center;
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: clamp(10px, 2.6vw, 11px);
      font-weight: 800;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: var(--gold);
      background: rgba(240,184,24,.10);
      border: .5px solid rgba(240,184,24,.25);
      line-height: 1.25;
      word-break: keep-all;
    }
    /* QA수정: reward-badge 와 동일하게 hidden 속성 강제 숨김. 없으면 .play-ref-status-badge(display:inline-flex)가 UA [hidden] 을 cascade로 덮어 활성 카드(예: Family)에 'Coming Soon' 배지가 노출됨. */
    .play-ref-status-badge[hidden] { display: none !important; }

    /* ─── CTA (scoped: .play-ref-cta) — btn-play 계열 톤 ─── */
    .play-ref-reward-badge {
      align-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* 단위 7: button 요소로 전환 — 기본 button 스타일 리셋 + 클릭 가능. */
      font-family: inherit;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      gap: 6px;
      max-width: min(100%, 210px);
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: clamp(11px, 3vw, 12px);
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.2;
      color: #f7ffd8;
      background:
        linear-gradient(180deg, rgba(76,216,48,.18), rgba(76,216,48,.08)),
        rgba(9,24,12,.92);
      border: .5px solid rgba(126,255,136,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 18px rgba(76,216,48,.12);
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .play-ref-reward-badge[hidden] { display: none !important; }
    .play-ref-reward-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--gold);
      box-shadow: 0 0 10px rgba(240,184,24,.55);
    }

    .play-ref-cta {
      margin-top: auto;
      width: 100%;
      min-height: 52px;
      padding: clamp(12px, 3.4vw, 14px) 18px;
      border: none;
      border-radius: 14px;
      font-family: inherit;
      font-size: clamp(14px, 3.8vw, 16px);
      font-weight: 900;
      letter-spacing: .4px;
      line-height: 1.2;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .12s var(--apple), filter .12s var(--apple);
      word-break: keep-all;
    }
    .play-ref-cta--primary {
      background: linear-gradient(180deg, #6cd048 0%, #4cb828 48%, #40a822 100%);
      color: #062000;
      text-shadow: 0 1px 0 rgba(255,255,255,.12);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 1px 0 rgba(30,130,10,.18),
        0 4px 14px rgba(76,216,48,.16);
    }
    .play-ref-cta--primary::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 35%;
      background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
      border-radius: 14px 14px 40% 40%;
      pointer-events: none;
    }
    .play-ref-cta--primary::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 100%;
      background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
      animation: playRefShimmer 9s ease-in-out infinite;
      pointer-events: none;
    }
    .play-ref-cta--primary:active {
      transform: translateY(2px) scale(.995);
      filter: brightness(.96);
    }
    .play-ref-cta--disabled {
      background: rgba(255,255,255,.04);
      color: rgba(232,236,248,.32);
      border: .5px solid rgba(255,255,255,.06);
      cursor: not-allowed;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(0,0,0,.18);
    }

    /* ─── Narrow phones (real devices honor width=device-width; headless varies) ─── */
    @media (max-width: 380px) {
      .play-ref-card { min-height: 200px; }
      .play-list { gap: 10px; }
    }

    /* ─── Reduced motion ─── */
    @media (prefers-reduced-motion: reduce) {
      .play-ref-card::before { animation: none; }
      .play-ref-cta--primary::after { animation: none; }
    }

    /* ─── Round 10.10-D — Puzzle Pop QA chip + panel (static CSS) ───
       이전 라운드 (10.10-B/C) 에서 JS injection 으로 만들었으나 Telegram
       지원 서버 인앱 빌드에서 가시성 회귀 → 정적 HTML 버튼 + 정적 CSS 로 전환.
       JS 는 정적 #ppqaChip 을 재사용해 panel toggle 만 wire. */
    .ppqa-chip {
      position: fixed;
      /* R3 (2026-06-10): 공통 top bar(약 52px) 아래로 내림 — 겹침 방지 */
      top: calc(60px + var(--ptg-app-content-top, env(safe-area-inset-top, 0px)));
      right: 12px;
      min-height: 32px;
      padding: 6px 12px;
      border: 1px solid rgba(255,255,255,.30);
      border-radius: 999px;
      background: rgba(20,28,42,.92);
      color: #cdd6e4;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .3px;
      cursor: pointer;
      z-index: 9998;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      box-shadow: 0 4px 12px rgba(0,0,0,.45);
    }
    .ppqa-chip.is-active {
      background: rgba(217,119,6,.18);
      color: #fbbf24;
      border-color: rgba(251,191,36,.55);
    }
    .ppqa-panel {
      position: fixed;
      inset: 0;
      background: rgba(4,8,16,.72);
      z-index: 10000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: max(16px, var(--ptg-app-content-top, env(safe-area-inset-top, 0px))) 12px max(16px, var(--ptg-app-content-bottom, env(safe-area-inset-bottom, 0px)));
      box-sizing: border-box;
    }
    .ppqa-panel[hidden] { display: none; }
    .ppqa-panel-card {
      width: 100%;
      max-width: 360px;
      max-height: 70vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background: #0f1422;
      color: #e8ecf8;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      padding: 14px 14px 18px;
      font-family: inherit;
    }
    .ppqa-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .ppqa-panel-title {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .4px;
      color: #cdd6e4;
    }
    .ppqa-close {
      background: transparent;
      border: 1px solid rgba(255,255,255,.20);
      color: #cdd6e4;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      cursor: pointer;
      min-height: 28px;
      font-family: inherit;
    }
    .ppqa-current {
      font-size: 11px;
      color: #94a3b8;
      margin-bottom: 8px;
      word-break: break-all;
    }
    .ppqa-section {
      margin-top: 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
      color: #94a3b8;
      text-transform: uppercase;
    }
    .ppqa-btn-row {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ppqa-btn {
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.04);
      color: #cdd6e4;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      min-height: 30px;
    }
    .ppqa-btn:hover { background: rgba(255,255,255,.08); }
    .ppqa-btn.is-current {
      background: rgba(251,191,36,.20);
      color: #fbbf24;
      border-color: rgba(251,191,36,.55);
    }
    .ppqa-btn--live {
      display: block;
      width: 100%;
      background: rgba(74,222,128,.16);
      border-color: rgba(74,222,128,.40);
      color: #4ade80;
      margin-top: 14px;
      padding: 8px 10px;
      font-size: 12px;
    }
    /* 긴급 6차 — 통일 QA IA: 게임 divider / 공통 하위 섹션 / 안내 / Legacy 접기 */
    .ppqa-game-divider {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.12);
      color: #cdd6e4;
      font-size: 12px;
    }
    .ppqa-subsection { margin-top: 10px; }
    .ppqa-note {
      margin-top: 6px;
      font-size: 11px;
      color: #8b97a8;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
      padding: 6px 8px;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 600;
    }
    .ppqa-legacy {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px dashed rgba(255,255,255,.12);
    }
    .ppqa-legacy-summary {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
      color: #7c8696;
      text-transform: uppercase;
      cursor: pointer;
    }
    .ppqa-legacy[open] .ppqa-legacy-summary { color: #94a3b8; }
    .ppqa-legacy .ppqa-btn-row { margin-top: 8px; }
    .ppqa-legacy .ppqa-btn { opacity: .82; font-size: 10px; }

    /* ═══════════════════════════════════════════════════════════════
       Arena 2열 허브 리디자인 (요청서 ⑤)
       기존 ref02 네온 카드(회전 conic border·glow)를 2열 그리드로 재배치 +
       게임별 색 테마(퍼즐=핑크 / 블록=블루 / 패밀리=그린) + 잠금 슬롯.
       JS 의존(data-game·CTA·badge id)·하단 네비 0 변경. 겉(레이아웃·아트)만.
       ═══════════════════════════════════════════════════════════════ */
    /* 2열용 컴팩트 (기존 카드보다 짧게) */
    .play-list .play-ref-card {
      min-height: clamp(184px, 29vh, 232px);
      padding: clamp(11px, 3vw, 15px) clamp(7px, 2.2vw, 11px);
      gap: clamp(5px, 1.6vw, 8px);
    }
    .play-list .play-ref-desc { display: none; }            /* Arena 카드엔 설명 없음(컴팩트) */
    .play-list .play-ref-icon { width: clamp(48px, 19vw, 64px); height: clamp(48px, 19vw, 64px); }
    .play-list .play-ref-title { font-size: clamp(12px, 4vw, 17px); }
    .play-list .play-ref-pill { font-size: clamp(7px, 2vw, 9px); padding: 2px 5px; border-radius: 6px; }
    .play-list .play-ref-cta { min-height: 42px; font-size: clamp(12px, 3.4vw, 14px); border-radius: 12px; }
    .play-list .play-ref-reward-badge { font-size: clamp(9px, 2.6vw, 11px); min-height: 26px; padding: 4px 8px; }

    /* 게임별 색 — 퍼즐팝 = 핑크 */
    .play-ref-card[data-game="puzzle-pop"].is-active::before {
      background: conic-gradient(from var(--play-ref-spin),
        transparent 30%, rgba(236,72,153,.5) 45%, rgba(244,114,182,.85) 50%, rgba(236,72,153,.5) 55%, transparent 70%);
    }
    .play-ref-card[data-game="puzzle-pop"].is-active .play-ref-title {
      background: linear-gradient(135deg, #f9a8d4, #ec4899);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .play-ref-card[data-game="puzzle-pop"].is-active .play-ref-icon {
      filter: drop-shadow(0 0 11px rgba(236,72,153,.30)) drop-shadow(0 4px 8px rgba(0,0,0,.45));
    }
    /* 블록팡 = 블루 */
    .play-ref-card[data-game="block-pang"].is-active::before {
      background: conic-gradient(from var(--play-ref-spin),
        transparent 30%, rgba(59,130,246,.5) 45%, rgba(96,165,250,.85) 50%, rgba(59,130,246,.5) 55%, transparent 70%);
    }
    .play-ref-card[data-game="block-pang"].is-active .play-ref-title {
      background: linear-gradient(135deg, #93c5fd, #3b82f6);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .play-ref-card[data-game="block-pang"].is-active .play-ref-icon {
      filter: drop-shadow(0 0 11px rgba(59,130,246,.30)) drop-shadow(0 4px 8px rgba(0,0,0,.45));
    }
    /* 패밀리 = 그린 (기존 .is-active 기본값 유지) */

    /* 잠금(COMING SOON) 슬롯 */
    .play-ref-card--locked { justify-content: center; filter: saturate(.45); }
    .play-ref-card--locked::before {
      background: conic-gradient(from var(--play-ref-spin),
        transparent 30%, rgba(140,150,170,.16) 45%, rgba(165,175,195,.30) 50%, rgba(140,150,170,.16) 55%, transparent 70%);
      animation-duration: 12s;
    }
    .play-ref-card--locked .play-ref-title {
      background: linear-gradient(135deg, #97a3b6, #586484);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .play-ref-card--locked .play-ref-icon { opacity: .5; }
    .play-ref-locked-cta {
      margin-top: auto;
      display: flex; align-items: center; justify-content: center;
      width: 100%; min-height: 42px;
      border-radius: 12px;
      background: rgba(255,255,255,.03);
      border: .5px solid rgba(255,255,255,.08);
      color: rgba(232,236,248,.30);
    }

    /* ═══════════════════════════════════════════════════════════════
       Arena 러프 디자인 정밀 매칭 (요청서 ⑤)
       정본: 추가_기획/프로토타이핑/포테이토킹덤 게임쪽 인터페이스_러프.html ("Potato Arena")
       - 헤더는 원래 스타일 유지 (play.title "Play" + play.subtitle)
       - 카드 상단 게임색 radial glow (회전 네온 보더는 기존 유지)
       - 타이틀 큰 대문자 이탤릭 그라데이션 + shimmer
       - PLAY 버튼 다크(#111215) + 게임색 네온 글로우 (초록 채움 교체) — 가운데 pill
       - 태그 Guild=gold gradient / Reward=purple gradient
       - 잠금 TO BE ANNOUNCED + COMING SOON + LOCKED
       기능/셀렉터(data-game·CTA·badge·scroll id)·하단 네비 0 변경 — 겉(아트)만.
       ═══════════════════════════════════════════════════════════════ */
    @keyframes playArenaShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    @keyframes playArenaTbaBlink { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

    /* 헤더는 원래 스타일 유지 (play.title "Play" + play.subtitle) */

    /* 카드 상단 게임색 radial glow */
    .play-list .play-ref-card[data-game="puzzle-pop"] {
      background:
        linear-gradient(180deg, transparent 0%, transparent 33%, rgba(8,9,14,.72) 58%, rgba(4,5,9,1) 84%),
        radial-gradient(ellipse 130% 78% at 50% -8%, hsl(330,85%,42%) 0%, hsl(330,80%,28%) 26%, hsl(330,70%,15%) 50%, transparent 76%),
        #0b0c12;
    }
    .play-list .play-ref-card[data-game="block-pang"] {
      background:
        linear-gradient(180deg, transparent 0%, transparent 33%, rgba(8,9,14,.72) 58%, rgba(4,5,9,1) 84%),
        radial-gradient(ellipse 130% 78% at 50% -8%, hsl(220,85%,42%) 0%, hsl(220,80%,28%) 26%, hsl(220,75%,14%) 50%, transparent 76%),
        #0b0c12;
    }
    .play-list .play-ref-card[data-game="family"] {
      background:
        linear-gradient(180deg, transparent 0%, transparent 33%, rgba(8,9,14,.72) 58%, rgba(4,5,9,1) 84%),
        radial-gradient(ellipse 130% 78% at 50% -8%, hsl(160,80%,36%) 0%, hsl(160,75%,24%) 26%, hsl(160,75%,13%) 50%, transparent 76%),
        #0b0c12;
    }
    .play-list .play-ref-card--locked {
      background:
        linear-gradient(180deg, transparent 0%, transparent 36%, rgba(7,8,12,.86) 60%, rgba(4,5,8,1) 86%),
        radial-gradient(ellipse 130% 78% at 50% -8%, hsl(240,20%,13%) 0%, hsl(240,18%,8%) 30%, transparent 70%),
        #06070a;
    }

    /* 타이틀 = 큰 대문자 이탤릭 그라데이션 + shimmer */
    .play-list .play-ref-title {
      font-family: 'Saira','Nunito',sans-serif;
      font-weight: 900; font-style: italic;
      text-transform: uppercase;
      letter-spacing: -.5px; line-height: .95;
      font-size: clamp(15px, 5.2vw, 23px);
      background-size: 200% auto;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: playArenaShimmer 4s ease-in-out infinite;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.9));
    }
    /* background-size 를 per-game(0,4,0)에서 재명시 — ⑤블록 background 단축속성의 auto 리셋을 이김 → shimmer 작동 */
    .play-ref-card[data-game="puzzle-pop"].is-active .play-ref-title {
      background-image: linear-gradient(90deg, #fce7f3 0%, #f9a8d4 25%, #ec4899 50%, #f9a8d4 75%, #fce7f3 100%);
      background-size: 200% auto;
    }
    .play-ref-card[data-game="block-pang"].is-active .play-ref-title {
      background-image: linear-gradient(90deg, #bfdbfe 0%, #60a5fa 25%, #fde047 50%, #60a5fa 75%, #bfdbfe 100%);
      background-size: 200% auto;
    }
    .play-ref-card[data-game="family"].is-active .play-ref-title {
      background-image: linear-gradient(90deg, #d1fae5 0%, #6ee7b7 25%, #10b981 50%, #6ee7b7 75%, #d1fae5 100%);
      background-size: 200% auto;
    }

    /* PLAY 버튼 = 다크(#111215) + 게임색 회전 네온 글로우 (러프 spin-fx) — 가운데 pill */
    .play-list .play-ref-cta--primary {
      align-self: center;
      position: relative;
      overflow: visible;                 /* 회전 글로우 halo 가 버튼 밖으로 보이게 */
      width: auto; min-width: 108px; max-width: 150px;
      min-height: 44px;
      padding: 11px 26px;
      background: #111215;
      color: #fff; text-shadow: none;
      text-transform: uppercase; font-style: italic;
      font-family: 'Saira','Nunito',sans-serif;
      font-weight: 900; letter-spacing: 2px;
      border: none;                      /* 러프 .button{border:none} — 보더 제거, 회전 글로우만 */
      border-radius: 999px;
      box-shadow: none;
    }
    .play-list .play-ref-cta--primary::after { display: none; }   /* 기존 shimmer sweep off */
    /* 회전 네온 글로우: 버튼 뒤(z-index -1)에서 conic 이 돌며 blur halo (카드 보더와 동일 회전) */
    .play-list .play-ref-cta--primary::before {
      content: '';
      display: block;
      position: absolute;
      inset: -3px;
      width: auto; height: auto;
      border-radius: inherit;
      z-index: -1;
      background: conic-gradient(from var(--play-ref-spin),
        transparent 0%, transparent 18%,
        var(--cta-glow, #888) 40%, var(--cta-glow2, #ddd) 50%, var(--cta-glow, #888) 60%,
        transparent 82%, transparent 100%);
      -webkit-filter: blur(5px); filter: blur(5px);
      animation: playRefBorderSpin 4s linear infinite;
      pointer-events: none;
    }
    /* 클릭(누름) 피드백은 transform 만. filter 를 쓰면 버튼이 독립 렌더링 그룹이 되어
       평소 버튼 뒤에 가려지던 z-index:-1 회전 글로우 전체가 드러나 큰 blob 으로 과해짐
       → filter 제거(글로우는 기본 상태 그대로 유지). */
    .play-list .play-ref-cta--primary:active { transform: translateY(1px) scale(.985); }
    .play-ref-card[data-game="puzzle-pop"] .play-ref-cta--primary {
      --cta-glow: #ec4899; --cta-glow2: #f9a8d4;
    }
    .play-ref-card[data-game="block-pang"] .play-ref-cta--primary {
      --cta-glow: #3b82f6; --cta-glow2: #93c5fd;
    }
    .play-ref-card[data-game="family"] .play-ref-cta--primary {
      --cta-glow: #10b981; --cta-glow2: #6ee7b7;
    }

    /* 태그 = Guild gold / Reward purple */
    .play-list .play-ref-pill {
      font-family: 'Saira','Nunito',sans-serif;
      font-weight: 900; letter-spacing: .2px;
    }
    .play-list .play-ref-pill--gold {
      background: linear-gradient(135deg, #fcd34d, #f59e0b);
      color: #451a03; border-color: transparent;
      box-shadow: 0 1px 4px rgba(245,158,11,.35);
    }
    .play-list .play-ref-pill--purple {
      background: linear-gradient(135deg, #a78bfa, #7c3aed);
      color: #fff; border-color: transparent;
      box-shadow: 0 1px 4px rgba(124,58,237,.4);
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
    }

    /* 잠금 = TO BE ANNOUNCED + COMING SOON + LOCKED */
    .play-arena-tba {
      align-self: center;
      font-family: 'Saira','Nunito',sans-serif;
      font-size: clamp(6.5px, 1.9vw, 8px);
      font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
      color: rgba(255,255,255,.34);
      border: 1px dashed rgba(255,255,255,.14);
      border-radius: 4px; padding: 2px 7px;
      animation: playArenaTbaBlink 2.5s ease-in-out infinite;
    }
    .play-list .play-ref-card--locked .play-ref-title {
      background-image: linear-gradient(90deg, #3f3f46 0%, #71717a 50%, #3f3f46 100%);
      animation: none;
    }
    .play-ref-locked-cta {
      align-self: center;
      width: auto; min-width: 108px; max-width: 150px;
      gap: 7px; border-radius: 999px;
    }
    .play-ref-locked-cta svg { width: 15px; height: 15px; }
    .play-arena-locked-text {
      font-family: 'Saira','Nunito',sans-serif;
      font-style: italic; font-weight: 900; letter-spacing: 2px;
      font-size: clamp(12px, 3.2vw, 14px);
    }

    @media (prefers-reduced-motion: reduce) {
      .play-list .play-ref-title,
      .play-list .play-ref-cta--primary::before,
      .play-arena-tba { animation: none; }
    }
    .play-ref-locked-cta svg { width: 15px; height: 15px; }