/* ═══════════════════════════════════════════════════════════════
   /comiccon · APP DEL VISITANTE (tema nocturno .theme-cc)
   Índice:
     1. Cabecera, pestañas y cinta
     2. Portada (entrada) y aviso de invitación
     3. «Ahora en el stand»
     4. Pasaporte: sellos, próximo sello, dorado, cupones, QR
     5. Muro de fotos y subida de foto
     6. Programa en vivo
     7. Ranking y meta del día
     8. Premios
     9. Invitar
    10. Juego «¿Cuánto cuesta?»
    11. Formularios (registro / ingreso)
    12. Pie de página
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Cabecera, pestañas y cinta ─────────────────────────── */
.cc-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.cc-logos { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.cc-logos .x { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--cc-yellow); }
.live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); border: 2px solid var(--cc-line); background: var(--pill-bg, var(--cc-blue)); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.live-pill.is-live { --pill-bg: var(--cc-red); }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13.5px; color: var(--sky-2); text-decoration: none; }

.cc-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.cc-tabbar nav { pointer-events: auto; width: 100%; max-width: var(--page-max); min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--cc-line); border-top: 2px solid rgba(255, 255, 255, .14); padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
.cc-tabbar--public nav { max-width: none; }
.cc-tab { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-inline: 1px; text-align: center; line-height: 1.2; overflow-wrap: anywhere; text-decoration: none; color: var(--cc-muted-2); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.cc-tab:hover { color: #fff; }
.cc-tab .ico { position: relative; width: 48px; height: 30px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cc-tab[aria-current="page"] { color: var(--cc-yellow); }
.cc-tab[aria-current="page"] .ico { background: rgba(249, 217, 74, .16); }
.cc-tab .live-dot { position: absolute; top: 2px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--cc-red); border: 2px solid var(--cc-line); }
.cc-tab .count { position: absolute; top: -3px; right: 2px; }

.ticker { margin: 4px -10px 0; transform: rotate(-2deg); background: var(--cc-yellow); overflow: hidden; padding: 10px 0; border-top: 3px solid var(--cc-line); border-bottom: 3px solid var(--cc-line); }
.ticker-track { display: flex; width: max-content; animation: aiMarquee 22s linear infinite; }
.ticker-track span { display: flex; align-items: center; gap: 16px; padding-right: 16px; font-family: var(--f-comic); font-size: 21px; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.ticker .r { color: var(--cc-red); } .ticker .b { color: var(--cc-blue); }

/* ── 2. Portada ────────────────────────────────────────────── */
.ref-banner { margin: 0 var(--gutter) 6px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); background: #fff; color: var(--ink); border: 2.5px solid var(--cc-line); box-shadow: 4px 4px 0 var(--cc-yellow); animation: aiRise .4s var(--ease-out); }
.ref-banner .k { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #8A6400; }
.ref-banner p { font-size: 14px; line-height: 1.4; font-weight: 600; }

.hero { position: relative; padding: 10px 18px 26px; overflow: hidden; }
.hero-rays { position: absolute; left: 50%; top: 300px; width: 1300px; height: 1300px; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0deg 6deg, transparent 6deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 18%, transparent 46%); mask-image: radial-gradient(circle, #000 0%, #000 18%, transparent 46%); animation: aiSpin 90s linear infinite; pointer-events: none; }
.hero-glow { position: absolute; left: 50%; top: 120px; width: 440px; height: 440px; margin-left: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(51, 116, 246, .45) 0%, rgba(51, 116, 246, 0) 65%); pointer-events: none; }
.sparkle { position: absolute; animation: aiTwinkle 2.8s ease-in-out infinite; pointer-events: none; }
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sponsor-pill { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid rgba(191, 233, 251, .5); border-radius: var(--r-pill); padding: 7px 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--sky-2); }
.sponsor-pill .jp { color: var(--cc-yellow); }
.hero .x-big { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--cc-yellow); margin: 12px 0; }
.burst { position: relative; width: 290px; height: 153px; margin-top: 16px; animation: aiBoom 2.8s ease-in-out infinite; }
.burst svg { position: absolute; inset: 0; }
.burst .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); }
.burst .txt span { font-family: var(--f-comic); line-height: .92; letter-spacing: .02em; -webkit-text-stroke: 6px var(--cc-line); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--cc-line); }
.burst .t1 { font-size: 48px; color: #fff; } .burst .t2 { font-size: 38px; color: var(--cc-yellow); }
.hero-claim { margin-top: 14px; max-width: 340px; font-size: 18px; line-height: 1.35; font-weight: 700; }
.hero-claim b { color: var(--cc-yellow); font-weight: 700; }
.bubble-row { display: flex; align-items: center; gap: 2px; margin-top: 12px; }
.bubble { position: relative; background: #fff; color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.25; padding: 12px 16px; border-radius: 20px; border: 3px solid var(--cc-line); box-shadow: 4px 4px 0 var(--cc-line); text-align: left; }
.theme-cc .btn--primary { --btn-primary: var(--cc-yellow); --btn-primary-shadow: 5px 5px 0 var(--cc-red); border-color: var(--cc-line); border-width: 3px; }

.info-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .18); }
.info-row b { font-weight: 700; } .info-row small { display: block; font-size: 13px; color: var(--cc-muted); }
.num-step { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cc-yellow); color: var(--ink); font-family: var(--f-display); font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ── 3. «Ahora en el stand» ────────────────────────────────── */
.now-card { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; border-radius: 24px; background: var(--cc-card); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-blue); color: #fff; text-decoration: none; overflow: hidden; }
.now-card:hover { color: #fff; }
.now-card .lbl { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 5px 10px; border-radius: var(--r-pill); background: var(--lbl-bg, var(--sky-2)); color: var(--lbl-fg, var(--ink)); }
.now-card .lbl .dot { background: currentColor; animation: aiPulse 1.6s ease-out infinite; }
.now-card.is-live .lbl { --lbl-bg: var(--cc-red); --lbl-fg: #fff; }
.now-card.is-next .lbl { --lbl-bg: var(--cc-yellow); --lbl-fg: var(--ink); }
.now-card .t { font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1.15; margin-top: 6px; }
.now-card .w { font-size: 13.5px; font-weight: 600; color: var(--cc-muted); margin-top: 4px; }
.now-card img { flex: none; width: 96px; height: 106px; animation: aiBob 3s ease-in-out infinite; }

/* ── 4. Pasaporte ─────────────────────────────────────────── */
.passport { position: relative; background: var(--cream); color: var(--ink); border: 3px solid var(--cc-line); border-radius: 24px; box-shadow: 6px 6px 0 var(--cc-red); padding: 18px 16px; overflow: hidden; }
.passport::before { content: ''; position: absolute; inset: 8px; border: 2px dashed rgba(22, 32, 46, .22); border-radius: 18px; pointer-events: none; }
.passport > * { position: relative; }
.pp-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #8A6400; }
.pp-id { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: .03em; }
.pp-sub { font-size: 12px; font-weight: 600; color: #4A5868; }
.qr-btn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 5px; background: #fff; border: 2px solid var(--cc-line); border-radius: 12px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--ink); }
.qr-btn .qr { width: 76px; height: 76px; }
.pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pp-stat { background: #fff; border: 2px solid var(--cc-line); border-radius: 14px; padding: 8px 6px; text-align: center; text-decoration: none; color: var(--ink); }
.pp-stat b { display: block; font-family: var(--f-display); font-size: 20px; }
.pp-stat span { font-size: 11px; font-weight: 700; color: #4A5868; }
.pp-progress { height: 14px; border-radius: var(--r-pill); background: #E9DFC4; border: 2px solid var(--cc-line); overflow: hidden; margin-top: 12px; }
.pp-progress > span { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--cc-yellow) 0 10px, var(--yellow-2) 10px 20px); transition: width .6s var(--ease-out); }
.stamps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stamp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border-radius: 18px; border: 2px solid var(--cc-line); background: #FBF1D6; text-align: center; color: var(--ink); text-decoration: none; }
.stamp.is-done { background: #fff; }
.stamp .ring { width: 80px; height: 80px; border-radius: 50%; border: 2.5px dashed #9AA7B8; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stamp .ring img { width: 62px; height: 72px; object-fit: contain; filter: grayscale(1) opacity(.45); transition: filter .3s; }
.stamp.is-done .ring img { filter: none; }
.stamp .name { font-weight: 800; font-size: 14px; line-height: 1.2; }
.stamp .desc { font-size: 12px; line-height: 1.3; color: #4A5868; }
.stamp .chip { font-size: 10px; padding: 3px 8px; }
.stamp-mark { position: absolute; top: 4px; right: 6px; width: 54px; height: 54px; border-radius: 50%; border: 3.5px solid var(--cc-stamp); color: var(--cc-stamp); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; background: rgba(255, 248, 230, .85); transform: rotate(-12deg); }
.stamp-mark.is-new { animation: aiStamp .5s var(--ease-pop) both; }
.stamp-mark .k { font-family: var(--f-jp); font-size: 20px; line-height: 1; }
.stamp-mark small { font-size: 7px; letter-spacing: .14em; }
.next-card { margin-top: 12px; border-radius: 18px; background: var(--ink); color: #fff; padding: 14px; display: flex; gap: 12px; align-items: center; }
.next-card img { flex: none; width: 58px; height: 68px; }
.next-card .k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--cc-yellow); }
.next-card .t { font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.2; }
.next-card .d { font-size: 13px; line-height: 1.4; color: var(--cc-muted); }
.next-card .btn { margin-top: 8px; align-self: flex-start; }
.gold-card { margin-top: 10px; display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: #FFF1C7; border: 2px solid var(--cc-line); }
.gold-card.is-done { background: linear-gradient(135deg, #FFE27A 0%, var(--yellow-2) 100%); }
.gold-card .star { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--cc-line); display: flex; align-items: center; justify-content: center; }
.gold-card.is-done .star { animation: aiPulseY 1.8s ease-out infinite; }
.gold-card b { font-size: 15px; } .gold-card p { font-size: 13px; line-height: 1.4; color: #3B2E00; }

.wallet { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wallet-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: #fff; color: var(--ink); border: 2px solid var(--cc-line); }
.wallet-item.is-locked { background: rgba(255, 255, 255, .05); color: var(--cc-muted); border-color: rgba(255, 255, 255, .18); }
.wallet-item.is-off { opacity: .55; }
.wallet-item .amt { flex: none; width: 70px; font-family: var(--f-display); font-weight: 800; font-size: 20px; }
.wallet-item .t { font-weight: 800; font-size: 14px; line-height: 1.25; }
.wallet-item .s { font-size: 12px; line-height: 1.35; opacity: .8; }

.qr-big { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.qr-big .qr { width: 248px; height: 248px; }

/* ── 5. Muro y foto ───────────────────────────────────────── */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wall-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 2.5px solid var(--cc-line); background: var(--cc-card); animation: aiFade .5s ease-out; }
.wall-tile img { width: 100%; height: 100%; object-fit: cover; }
.wall-tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; background: linear-gradient(transparent, rgba(10, 18, 40, .85)); display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 800; color: #fff; }
.wall-empty { grid-column: 1 / -1; padding: 20px; border-radius: 16px; border: 2px dashed rgba(255, 255, 255, .25); text-align: center; font-size: 13.5px; color: var(--cc-muted); }

.photo-drop { width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; border: 3px dashed #9AA7B8; background: #F5F8FB; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink); text-align: center; padding: 16px; }
.photo-drop .circle { width: 70px; height: 70px; border-radius: 50%; background: var(--cc-yellow); border: 2.5px solid var(--cc-line); display: flex; align-items: center; justify-content: center; }
.photo-preview { position: relative; width: 100%; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink); background: #ddd; }
.photo-preview canvas, .photo-preview img { display: block; width: 100%; height: auto; }
.status-box { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 2px solid; animation: aiRise .3s var(--ease-out); }
.status-box b { display: block; font-size: 14.5px; } .status-box span { font-size: 12.5px; line-height: 1.4; }
.status-box--wait { background: var(--sky-3); border-color: var(--link); color: var(--ink); }
.status-box--ok { background: var(--green-soft); border-color: var(--green); color: #1D4F33; }
.status-box--bad { background: var(--danger-soft); border-color: var(--danger); color: #6E1714; }
.my-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.my-photo { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 2px solid var(--ink); }
.my-photo img { width: 100%; height: 100%; object-fit: cover; }
.my-photo .chip { position: absolute; left: 4px; bottom: 4px; font-size: 9.5px; padding: 2px 6px; }
.my-photo button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(22, 32, 46, .8); color: #fff; font-size: 14px; line-height: 1; }

/* ── 6. Programa ──────────────────────────────────────────── */
.day-tabs { --seg-bg: rgba(255, 255, 255, .08); --seg-line: transparent; --seg-fg: #fff; --seg-on: var(--cc-yellow); --seg-on-fg: var(--ink); border-width: 0; }
.schedule { display: flex; flex-direction: column; gap: 10px; }
.show { display: flex; gap: 10px; align-items: stretch; }
.show .time { flex: none; width: 52px; padding-top: 14px; font-family: var(--f-display); font-weight: 800; font-size: 17px; color: var(--cc-yellow); }
.show .box { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .16); transition: background .3s; min-width: 0; }
.show .box img { flex: none; width: 46px; height: 52px; }
.show .t { font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.show .d { font-size: 13px; line-height: 1.4; color: var(--cc-muted); }
.show .badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: var(--r-pill); margin-bottom: 4px; }
.show.is-live .box { background: var(--cc-red); border-color: var(--cc-line); box-shadow: 4px 4px 0 var(--cc-line); }
.show.is-live .d { color: #FFE3E1; }
.show.is-live .badge { background: #fff; color: var(--danger); }
.show.is-next .box { background: var(--cc-yellow); border-color: var(--cc-line); box-shadow: 4px 4px 0 var(--cc-red); color: var(--ink); }
.show.is-next .d { color: #2E2600; }
.show.is-next .badge { background: var(--ink); color: #fff; }
.show.is-done .box { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); color: #8592AD; }
.show.is-done .d, .show.is-done .time { color: #6F7C98; }
.show.is-done img { filter: grayscale(1) opacity(.5); }
.show.is-done .badge { background: rgba(255, 255, 255, .06); color: #8592AD; }

/* ── 7. Ranking y meta ────────────────────────────────────── */
.rank-me { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--cc-yellow); color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 5px 5px 0 var(--cc-red); }
.rank-me .pos { flex: none; width: 62px; height: 62px; border-radius: 18px; background: var(--ink); color: var(--cc-yellow); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; }
.rank-me .pos small { font-size: 10px; letter-spacing: .1em; color: #fff; } .rank-me .pos b { font-size: 26px; line-height: 1; }
.rank-me p { font-size: 13px; line-height: 1.35; color: #3B2E00; }
.meta-card { border-radius: 22px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .18); padding: 16px; }
.meta-count { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.meta-count b { font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--cc-yellow); }
.meta-count span { font-size: 15px; font-weight: 700; color: var(--cc-muted); }
.meta-bar { position: relative; height: 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); margin-top: 12px; }
.meta-bar > span.fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cc-red), var(--cc-yellow)); animation: aiFill 1.6s var(--ease-out) both; }
.meta-bar .tick { position: absolute; top: -3px; width: 4px; height: 22px; margin-left: -2px; background: var(--cc-line); border-radius: 2px; }
.tier { display: flex; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.4; }
.tier .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tier.is-done .n { background: var(--green); }
.tier.is-next .n { background: var(--cc-yellow); color: var(--ink); animation: aiPulseY 1.8s ease-out infinite; }
.board { border-radius: 22px; background: #fff; color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-blue); padding: 18px 14px 12px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-height: 176px; }
.podium > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.podium .who { font-family: var(--f-display); font-weight: 800; font-size: 14px; white-space: nowrap; }
.podium .pts { font-size: 12px; font-weight: 600; color: #4A5868; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.podium .bar { width: 100%; border-radius: 12px 12px 0 0; border: 2px solid var(--cc-line); display: flex; align-items: center; justify-content: center; font-family: var(--f-comic); color: #fff; transform-origin: bottom; animation: aiGrow .8s var(--ease-out) both; }
.podium .p1 .bar { height: 88px; background: var(--cc-yellow); color: var(--ink); font-size: 38px; }
.podium .p2 .bar { height: 64px; background: var(--cc-blue); font-size: 32px; animation-delay: .15s; }
.podium .p3 .bar { height: 46px; background: var(--cc-red); font-size: 28px; animation-delay: .3s; }
.rank-rows { border-top: 2px solid var(--cc-line); margin-top: -2px; }
.rank-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 6px; border-bottom: 1px solid #E3E8EE; font-size: 14px; }
.rank-row b.pos { display: inline-block; width: 28px; }
.rank-row.is-me { margin-top: 8px; border: 2px dashed #D9A000; border-radius: 12px; background: var(--yellow-soft); }
.points-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.points-grid > div { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .18); }
.points-grid b { display: block; font-family: var(--f-display); font-size: 20px; color: var(--cc-yellow); }
.points-grid span { font-size: 12.5px; line-height: 1.35; color: #DCE5F5; }
.winners { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.winner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: 13.5px; }

/* ── 8. Premios ───────────────────────────────────────────── */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.filters button { padding: 8px 13px; border-radius: var(--r-pill); border: 2px solid var(--cc-line); background: #fff; color: var(--ink); font-weight: 800; font-size: 13px; }
.filters button[aria-pressed="true"] { background: var(--cc-yellow); }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px; margin: 0 -4px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.prize-card { flex: none; width: 214px; scroll-snap-align: start; border-radius: 20px; background: #fff; color: var(--ink); border: 2.5px solid var(--cc-line); box-shadow: 4px 4px 0 var(--accent, var(--cc-red)); overflow: hidden; }
.prize-card .ph { height: 150px; background: var(--accent-soft, var(--danger-soft)); border-bottom: 2.5px solid var(--cc-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--accent-ink, var(--danger)); }
.prize-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.prize-card .ph small { font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.prize-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.prize-card .tag { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent, var(--cc-red)); color: var(--accent-on, #fff); }
.prize-card .n { font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.2; }
.prize-card .s { font-size: 12.5px; color: #4A5868; }
.prize-card .w { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.prize-card[data-cat="fig"] { --accent: var(--cc-red); --accent-soft: #FDECEB; --accent-ink: #C9302C; }
.prize-card[data-cat="pel"] { --accent: var(--cc-blue); --accent-soft: #E6EEFF; --accent-ink: #2457C5; }
.prize-card[data-cat="ropa"] { --accent: var(--cc-yellow); --accent-on: var(--ink); --accent-soft: #FFF5CC; --accent-ink: #8A6400; }
.prize-card[data-cat="gacha"] { --accent: var(--sky); --accent-on: var(--ink); --accent-soft: #DFF3FC; --accent-ink: #1F6F99; }
.prize-card[data-cat="otro"] { --accent: #9AA7B8; --accent-soft: #EEF3F8; --accent-ink: #3E4C5B; }
.how-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .18); font-size: 13.5px; line-height: 1.4; }
.how-row img { flex: none; width: 40px; height: 44px; }
.theme-cc .acc { --acc-bg: rgba(255, 255, 255, .06); --acc-border: 1.5px solid rgba(255, 255, 255, .18); --acc-shadow: none; --acc-body: #DCE5F5; }
.theme-cc .acc > button svg { stroke: var(--cc-yellow); }
.after-card { position: relative; border-radius: 24px; background: var(--sky-3); color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-yellow); padding: 20px 18px; overflow: hidden; }
.after-card .mascot { position: absolute; right: -6px; top: 4px; width: 112px; height: 140px; animation: aiFloat 5s ease-in-out infinite; }
.socials { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.socials a { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2.5px solid var(--cc-line); display: flex; align-items: center; justify-content: center; }
.socials a img { width: 26px; height: 26px; }
.socials a small { position: absolute; right: -6px; bottom: -4px; font-size: 9px; font-weight: 800; background: var(--ink); color: #fff; padding: 2px 4px; border-radius: 5px; }

/* ── 9. Invitar ───────────────────────────────────────────── */
.invite-card { border-radius: 24px; background: var(--cc-yellow); color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-red); padding: 16px; }
.code-box { background: #fff; border: 2.5px solid var(--cc-line); border-radius: 16px; padding: 10px 10px 10px 12px; }
.code-box .k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #6B4E00; }
.code-box .v { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: .05em; }
.link-box { margin-top: 10px; background: rgba(255, 255, 255, .7); border: 2px dashed var(--cc-line); border-radius: 14px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-box span { min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-mini { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qr-mini .frame { padding: 5px; background: #fff; border: 2.5px solid var(--cc-line); border-radius: 12px; }
.qr-mini .qr { width: 92px; height: 92px; }
.qr-mini small { font-size: 10px; font-weight: 800; text-align: center; line-height: 1.2; }
.share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.share-grid > * { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 2.5px solid var(--cc-line); font-size: 12px; font-weight: 800; text-decoration: none; color: var(--ink); background: #fff; }
.share-grid .wa { background: #25D366; color: #fff; }
.share-grid .more { background: var(--ink); color: #fff; }
.share-grid img, .share-grid svg { width: 22px; height: 22px; }
.who-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.who-gets > div { border-radius: 20px; padding: 14px 12px; }
.who-gets .friend-side { background: #fff; color: var(--ink); border: 2.5px solid var(--cc-line); }
.who-gets .me-side { background: var(--ink); color: #fff; border: 2.5px solid var(--cc-yellow); }
.who-gets .k { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; }
.ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ref-stats > div { border-radius: 16px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .16); padding: 10px; text-align: center; }
.ref-stats b { font-family: var(--f-display); font-size: 24px; } .ref-stats small { display: block; font-size: 11.5px; font-weight: 700; color: var(--cc-muted); }
.friend { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; background: #fff; color: var(--ink); border: 2px solid var(--cc-line); animation: aiRise .3s var(--ease-out); }
.friend .av { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--cc-line); font-family: var(--f-display); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.friend .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.friend .chip { font-size: 10px; padding: 2px 7px; }
.timeline { display: flex; flex-direction: column; margin-top: 14px; }
.timeline > div { display: flex; gap: 14px; }
.timeline .rail { display: flex; flex-direction: column; align-items: center; }
.timeline .rail span { width: 30px; height: 30px; border-radius: 50%; background: var(--cc-yellow); color: var(--ink); font-family: var(--f-display); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.timeline .rail i { width: 2.5px; flex: 1; background: rgba(255, 255, 255, .25); min-height: 14px; }
.timeline p { padding-bottom: 14px; font-size: 14px; line-height: 1.45; }

/* ── 10. Juego ────────────────────────────────────────────── */
.game-top { display: flex; align-items: center; gap: 10px; }
.game-steps { display: flex; gap: 4px; flex: 1; }
.game-steps i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.game-steps i.done { background: var(--cc-yellow); }
.game-steps i.now { background: #fff; }
.product-card { margin-top: 14px; border-radius: 24px; background: #fff; color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-blue); overflow: hidden; animation: aiFade .3s ease-out; }
.product-card .ph { height: 200px; background: linear-gradient(160deg, var(--sky-2), #FFF1C2); display: flex; align-items: center; justify-content: center; border-bottom: 3px solid var(--cc-line); }
.product-card .ph img { max-height: 180px; width: auto; }
.product-card .ph img.photo { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.product-card .body { padding: 16px; }
.product-card .store { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--link); }
.product-card .n { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.15; margin-top: 4px; }
.product-card .d { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.price-out { margin-top: 14px; display: flex; align-items: baseline; justify-content: center; gap: 4px; font-family: var(--f-display); font-weight: 800; }
.price-out .y { font-size: 26px; } .price-out input { width: 180px; text-align: center; font-size: 40px; font-weight: 800; font-family: var(--f-display); border: 0; border-bottom: 3px solid var(--ink); background: transparent; padding: 0 0 2px; color: var(--ink); }
.price-out input:focus { outline: none; border-color: var(--link); }
.price-range { width: 100%; margin-top: 14px; accent-color: var(--ink); height: 28px; }
.price-quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.price-quick button { padding: 6px 10px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: #fff; font-size: 12.5px; font-weight: 800; }
.result-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: var(--ink); border: 2px solid var(--cc-line); }
.result-row img { flex: none; width: 40px; height: 44px; object-fit: contain; }
.result-row .pts { flex: none; font-family: var(--f-display); font-weight: 800; font-size: 18px; min-width: 44px; text-align: right; }
.score-big { font-family: var(--f-comic); font-size: 86px; line-height: .9; color: var(--cc-yellow); -webkit-text-stroke: 5px var(--cc-line); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--cc-line); }

/* ── 11. Formularios sobre fondo oscuro ───────────────────── */
.form-card { background: #fff; color: var(--ink); border: 3px solid var(--cc-line); border-radius: 24px; box-shadow: 6px 6px 0 var(--cc-blue); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.ref-field { border-radius: 16px; background: var(--cream); border: 2px dashed #D9A000; padding: 12px; }
.ref-field .input { font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.ref-status { margin-top: 8px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--st, #5E6873); }
.ref-status i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--st, #5E6873); color: #fff; font-style: normal; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.auth-tabs { --seg-bg: rgba(255, 255, 255, .08); --seg-line: transparent; --seg-fg: #fff; --seg-on: #fff; --seg-on-fg: var(--ink); border-width: 0; }

/* ── 12. Pie ──────────────────────────────────────────────── */
.cc-footer { margin: 40px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; }
.cc-footer .links { display: flex; gap: 16px; font-weight: 600; flex-wrap: wrap; justify-content: center; }

/* ── Piezas de la portada y de páginas de texto ───────────── */
.ring-sm { width: 66px; height: 66px; margin: 0 auto 4px; border-radius: 50%; border: 2.5px dashed #9AA7B8; background: #fff; display: flex; align-items: center; justify-content: center; }
.muted-ink { color: #4A5868; font-size: 10.5px; line-height: 1.25; }
.reward-dark { border-radius: 16px; background: var(--ink); color: #fff; padding: 12px; }
.reward-gold { border-radius: 16px; background: linear-gradient(135deg, #FFE27A 0%, var(--yellow-2) 100%); border: 2px solid var(--cc-line); padding: 10px 12px; color: var(--ink); }
.reward-dark .k, .reward-gold .k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; }
.reward-dark .k { color: var(--cc-yellow); } .reward-gold .k { color: #6B4E00; }
.reward-dark .v, .reward-gold .v { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.1; margin-top: 2px; }
.reward-dark .s { font-size: 12px; line-height: 1.35; color: var(--cc-muted); } .reward-gold .s { font-size: 12px; line-height: 1.35; color: #3B2E00; }
.bases h2 { margin-top: 18px; font-size: 17px; color: var(--cc-yellow); }
.bases h2:first-child { margin-top: 0; }
.bases p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: #DCE5F5; }
.points-breakdown { width: 100%; border-collapse: collapse; font-size: 14px; }
.points-breakdown td { padding: 8px 4px; border-bottom: 1px solid #E3E8EE; }
.points-breakdown td:last-child { text-align: right; font-weight: 800; }
.points-breakdown tr.total td { border-bottom: 0; font-size: 16px; }

/* ── Premio ganado (aparece arriba del pasaporte) ─────────── */
.win-card { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 24px; background: var(--cc-yellow); color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-red); animation: aiBoom 3s ease-in-out infinite; }
.win-card::before { content: ''; position: absolute; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; background: repeating-conic-gradient(rgba(255, 255, 255, .35) 0 10deg, transparent 10deg 20deg); animation: aiSpin 18s linear infinite; pointer-events: none; }
.win-card > * { position: relative; }
.win-card .ph { flex: none; width: 84px; height: 84px; border-radius: 18px; background: #fff; border: 2.5px solid var(--cc-line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.win-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.win-card .k { font-family: var(--f-comic); font-size: 30px; letter-spacing: .02em; line-height: 1; color: var(--cc-red); -webkit-text-stroke: 1.5px var(--cc-line); }
.win-card .t { font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.2; margin-top: 2px; }
.win-card .d { font-size: 13px; line-height: 1.4; color: #3B2E00; margin-top: 2px; }
.win-card .countdown { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.win-card.is-delivered { animation: none; background: #fff; box-shadow: 4px 4px 0 var(--green); }
.win-card.is-delivered::before { display: none; }
��════════════════════════════════════════════════
   v3.3 · JUEGOS 3 Y 4 (precio con barra · trivia sin imágenes)
   ═══════════════════════════════════════════════════════════════ */
/* El cambio en dólares va al final de la oración, en texto normal */
.usd-end { font-weight: 400; }
.usd { font-size: .78em; font-weight: 700; opacity: .72; white-space: nowrap; }

.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rules-grid div { text-align: center; padding: 10px 6px; border-radius: 16px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .16); }
.rules-grid b { display: block; font-family: var(--f-display); font-size: 22px; color: var(--cc-yellow); }
.rules-grid span { display: block; font-size: 12px; font-weight: 700; color: var(--cc-muted); line-height: 1.3; }
.rules-grid .ok b { color: #5BE09A; } .rules-grid .no b { color: #FF8A87; }

/* Juego 3 · producto en texto + precio grande + barra (rango según el producto) */
.product-card--text { box-shadow: 6px 6px 0 var(--cc-blue); }
.product-card--text .body { padding: 18px 16px 16px; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-cat { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--cc-yellow); border: 2px solid var(--cc-line); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--ink); }
.pc-n { font-family: var(--f-display); font-weight: 800; font-size: 14px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.product-card--text .n { font-size: 27px; margin-top: 10px; text-wrap: balance; }
.product-card--text .d { font-size: 15px; }
.pc-where { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--link); }
.pc-where svg { flex: none; }
.pc-ask { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(22, 32, 46, .18); text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.game-top .tv-score { margin-left: 4px; }
.gx { display: grid; gap: 12px; margin-top: 14px; animation: aiRise .3s var(--ease-out) both; }
.gx-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 3px solid var(--cc-line); color: #fff; background: var(--cc-card); }
.gx-head--exacto, .gx-head--muy-cerca { background: #2FB36B; }
.gx-head--cerca { background: #E0A200; color: var(--ink); }
.gx-head--lejos { background: #E06A1B; }
.gx-head--muy-lejos { background: var(--cc-red); }
.gx-head .v { display: block; font-family: var(--f-comic); font-size: 26px; letter-spacing: .04em; line-height: 1; animation: tvPop .45s var(--ease-out) both; }
.gx-head .real { display: block; font-size: 15px; font-weight: 700; margin-top: 4px; }
.gx-head .real b { font-family: var(--f-display); font-size: 19px; }
.gx-head .said { display: block; font-size: 13px; font-weight: 600; opacity: .92; margin-top: 2px; }
.gx-head .pts { margin-left: auto; font-family: var(--f-comic); font-size: 30px; color: var(--cc-yellow); text-shadow: 2px 2px 0 var(--cc-line); }
.gx-head--cerca .pts { color: #fff; }
.price-pick input:disabled, .price-range:disabled { opacity: .55; }
/* v3.4 · escalera de puntos, marcas de la barra, respuesta guardada y revelación final */
.pt-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.pt-ladder div { text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .16); }
.pt-ladder .top { background: #2FB36B; border-color: var(--cc-line); }
.pt-ladder b { display: block; font-family: var(--f-display); font-size: 22px; color: var(--cc-yellow); font-variant-numeric: tabular-nums; }
.pt-ladder .top b { color: #fff; }
.pt-ladder span { display: block; font-size: 11.5px; font-weight: 700; color: var(--cc-muted); line-height: 1.25; margin-top: 2px; }
.pt-ladder .top span { color: #fff; }
.product-card--text .pc-cat { margin-bottom: 2px; }
.price-ticks { position: relative; height: 20px; margin-top: 2px; }
.price-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-ticks span.is-first { transform: none; left: 0 !important; }
.price-ticks span.is-last { transform: none; left: auto !important; right: 0; }
.price-ticks span::before { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 5px; background: var(--ink-4); opacity: .5; }
.price-ticks span.is-first::before { left: 6px; } .price-ticks span.is-last::before { left: auto; right: 6px; }
.gx-saved { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 18px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .2); animation: tvPop .4s var(--ease-out) both; }
.gx-saved svg { flex: none; color: #5BE09A; }
.gx-saved b { display: block; font-family: var(--f-display); font-size: 17px; }
.gx-saved span span { display: block; font-size: 13px; color: var(--cc-muted); }
.dato--fun { box-shadow: 4px 4px 0 var(--cc-blue); }
.dato--fun .k { color: var(--cc-blue); }
.gx-sum { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.gx-sum .verdict { font-size: 12px; padding: 4px 9px; }
.gx-row { opacity: 0; animation: aiRise .45s var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) { .gx-row { opacity: 1; animation: none; } .gx-saved { animation: none; } }
.price-step:disabled { opacity: .4; cursor: default; box-shadow: none; }
.product-card .ph--product { height: 230px; background: #fff; }
.product-card .ph--product img.photo { object-fit: contain; padding: 12px; }
.price-pick { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.price-pick .price-out { margin-top: 0; min-width: 0; }
.price-pick .price-out input { width: 150px; }
.price-step { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--cc-line); background: var(--cc-yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--cc-line); cursor: pointer; }
.price-step:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cc-line); }
.price-step:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.price-usd { text-align: center; font-size: 15px; color: var(--ink-3); margin-top: 6px; }
.verdict { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; vertical-align: 1px; }
.verdict--exacto, .verdict--muy-cerca { background: var(--green-soft); color: var(--green-ink); }
.verdict--cerca { background: var(--yellow-soft); color: #7A5600; }
.verdict--lejos { background: #FFE8D6; color: #9A4A0C; }
.verdict--muy-lejos { background: var(--danger-soft); color: var(--danger); }

/* Juego 4 · trivia «Aiyu Kentei» */
.q-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.q-bar { flex: 1; height: 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.q-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cc-red), var(--cc-yellow)); transition: width .45s var(--ease-out); }
.q-n { font-family: var(--f-display); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--cc-yellow); }
.q-text { font-family: var(--f-display); font-weight: 800; font-size: 21px; line-height: 1.28; margin: 8px 0 14px; text-wrap: balance; }
.tv-hud { display: flex; align-items: center; gap: 12px; }
.tv-dots { flex: 1; display: flex; gap: 5px; }
.tv-dots i { flex: 1; height: 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); transition: background .3s; }
.tv-dots i.ok { background: #2FB36B; } .tv-dots i.no { background: var(--cc-red); } .tv-dots i.now { background: var(--cc-yellow); }
.tv-score { font-family: var(--f-display); font-weight: 800; font-size: 17px; color: var(--cc-yellow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-score.is-bump { animation: tvPop .45s var(--ease-out) both; }
.tv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 800; color: #fff; }
.tv-chip svg { color: var(--cc-yellow); }
.tv-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--r-pill); background: #FF8A3D; color: #2A1300; font-size: 12.5px; font-weight: 800; animation: tvPop .4s var(--ease-out) both; }
.tv-q { margin-top: 12px; padding: 18px 16px; border-radius: 22px; background: var(--cream); color: var(--ink); border: 3px solid var(--cc-line); box-shadow: 6px 6px 0 var(--cc-red); }
.tv-q .k { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #8A6400; }
.tv-q h2 { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.28; margin-top: 6px; text-wrap: balance; }
.answers { display: grid; gap: 10px; margin-top: 14px; }
.ans { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); background: #fff; border: 2.5px solid var(--cc-line); border-radius: 18px; padding: 13px 14px; box-shadow: 4px 4px 0 var(--cc-line); cursor: pointer; }
.ans .l { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cc-yellow); border: 2px solid var(--cc-line); display: flex; align-items: center; justify-content: center; font-family: var(--f-comic); font-size: 18px; }
.ans .t { min-width: 0; flex: 1; }
.ans .usd { color: var(--ink-4); opacity: 1; }
.ans[disabled] { cursor: default; }
.ans.is-right { background: #DDF6E6; border-color: #2FB36B; } .ans.is-right .l { background: #2FB36B; color: #fff; }
.ans.is-wrong { background: #FDE3E2; border-color: var(--cc-red); } .ans.is-wrong .l { background: var(--cc-red); color: #fff; }
.ans.is-dim { opacity: .5; }
.ans.is-gone { opacity: .28; text-decoration: line-through; pointer-events: none; box-shadow: none; }
.ans.is-wrong, .vf.is-wrong { animation: tvShake .4s ease-in-out; }
.ans:focus-visible, .vf:focus-visible, .life:focus-visible { outline: 3px solid var(--cc-yellow); outline-offset: 3px; }
.vf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.vf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 116px; padding: 12px; border-radius: 20px; border: 2.5px solid var(--cc-line); box-shadow: 4px 4px 0 var(--cc-line); font: inherit; font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--ink); cursor: pointer; }
.vf .ic { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--cc-line); display: flex; align-items: center; justify-content: center; }
.vf--v { background: #DDF6E6; } .vf--v .ic { color: #1D6B41; }
.vf--f { background: #FDE3E2; } .vf--f .ic { color: #B3261E; }
.vf:active, .ans:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--cc-line); }
.vf[disabled] { cursor: default; }
.vf.is-right { background: #2FB36B; color: #fff; } .vf.is-wrong { background: var(--cc-red); color: #fff; } .vf.is-dim { opacity: .45; }
.life-row { display: flex; gap: 8px; margin-top: 12px; }
.life { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .4); background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.life b { font-family: var(--f-comic); font-size: 18px; letter-spacing: .04em; color: var(--cc-yellow); }
.life svg { color: var(--cc-yellow); }
.life[disabled] { opacity: .35; cursor: default; }
.life.is-used { text-decoration: line-through; }
.hint-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #FFF6D6; color: var(--ink); border: 2px solid var(--cc-line); font-size: 14.5px; font-weight: 600; line-height: 1.4; animation: aiRise .3s var(--ease-out) both; }
.hint-box svg { flex: none; color: #8A6400; }
.fb { display: grid; gap: 12px; margin-top: 14px; animation: aiRise .3s var(--ease-out) both; }
.fb-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 3px solid var(--cc-line); color: #fff; overflow: visible; }
.fb-head.ok { background: #2FB36B; } .fb-head.no { background: var(--cc-red); }
.fb-head .ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.fb-head.ok .ic { color: #1D6B41; } .fb-head.no .ic { color: #B3261E; }
.fb-head .big { display: block; font-family: var(--f-comic); font-size: 28px; line-height: 1; letter-spacing: .03em; animation: tvPop .45s var(--ease-out) both; }
.fb-head .sub { display: block; font-size: 13.5px; font-weight: 700; margin-top: 3px; }
.fb-head .pts { margin-left: auto; font-family: var(--f-comic); font-size: 30px; color: var(--cc-yellow); text-shadow: 2px 2px 0 var(--cc-line); animation: tvPop .5s var(--ease-out) both .1s; }
.dato { border-radius: 18px; padding: 12px 14px; background: var(--cream); color: var(--ink); border: 2.5px solid var(--cc-line); box-shadow: 4px 4px 0 var(--cc-line); }
.dato .k { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #8A6400; }
.dato p { font-size: 15px; line-height: 1.45; margin-top: 4px; }
.confetti { position: absolute; left: 50%; top: 50%; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; animation: tvBurst .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes tvPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tvShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes tvBurst { 0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .tv-streak, .fb-head .big, .fb-head .pts, .tv-score.is-bump, .ans.is-wrong, .vf.is-wrong { animation: none; } }
.life-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.life-demo div { padding: 10px 12px; border-radius: 16px; border: 2px dashed rgba(255, 255, 255, .3); }
.life-demo b { display: block; font-family: var(--f-comic); font-size: 19px; color: var(--cc-yellow); letter-spacing: .04em; }
.life-demo span { display: block; font-size: 13px; color: var(--cc-muted); line-height: 1.35; margin-top: 2px; }
.steps-pre { display: grid; gap: 8px; margin-top: 14px; }
.steps-pre div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .14); }
.steps-pre i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--cc-yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-comic); font-size: 19px; }
.steps-pre p { font-size: 14.5px; line-height: 1.4; } .steps-pre b { color: #fff; }
.pts-got { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .16); }
.pts-got .mk { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 3.5px solid var(--cc-stamp); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg); }
.pts-got .mk .k { font-family: var(--f-jp); font-weight: 900; font-size: 20px; line-height: 1; color: var(--cc-stamp); } .pts-got .mk small { font-size: 7px; letter-spacing: .14em; font-weight: 800; color: var(--cc-stamp); }
.pts-got b { display: block; font-family: var(--f-display); font-size: 17px; }
.pts-got .s { display: block; font-size: 13px; color: var(--cc-muted); }
.pts-got .p { margin-left: auto; font-family: var(--f-comic); font-size: 30px; color: var(--cc-yellow); letter-spacing: .03em; white-space: nowrap; }
.cert { position: relative; text-align: center; background: var(--cream); color: var(--ink); border: 3px solid var(--cc-line); border-radius: 22px; box-shadow: 5px 5px 0 var(--cc-line); padding: 18px 16px; overflow: hidden; }
.cert::before { content: ''; position: absolute; inset: 8px; border: 2px dashed rgba(22, 32, 46, .22); border-radius: 15px; pointer-events: none; }
.cert > * { position: relative; }
.cert .k { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #8A6400; }
.cert .jt { font-family: var(--f-jp); font-weight: 900; font-size: 30px; letter-spacing: .1em; margin-top: 6px; }
.cert .score { font-family: var(--f-comic); font-size: 72px; line-height: 1; margin-top: 6px; letter-spacing: .02em; }
.cert .score small { font-size: 32px; color: #8A7A55; }
.cert .lvl { font-family: var(--f-display); font-weight: 800; font-size: 21px; margin-top: 2px; }
.cert .lvl .j { font-family: var(--f-jp); color: var(--cc-stamp); margin-right: 6px; }
.cert .say { font-size: 14px; color: #4A5868; margin-top: 4px; }
.cert-mark { position: absolute !important; right: 12px; top: 44px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--cc-stamp); color: var(--cc-stamp); display: flex; align-items: center; justify-content: center; font-family: var(--f-jp); font-weight: 900; font-size: 19px; transform: rotate(-14deg); background: rgba(255, 255, 255, .55); }
.cert-mark.is-new { animation: aiStamp .5s var(--ease-pop, ease) both .3s; }
.cert-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.cert-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.cert-dots i.ok { background: #2FB36B; } .cert-dots i.no { background: var(--cc-red); }
.cert-qr { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px; border-radius: 16px; background: #fff; border: 2px solid var(--cc-line); text-align: left; }
.cert-qr .q { flex: none; width: 92px; height: 92px; } .cert-qr .q svg { width: 100%; height: 100%; display: block; }
.cert-qr p { font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.review { display: grid; gap: 8px; }
.review .it { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--cc-card); border: 2px solid rgba(255, 255, 255, .14); }
.review .mk { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.review .mk.ok { background: #2FB36B; } .review .mk.no { background: var(--cc-red); }
.review .q, .review .a, .review .d { display: block; }
.review .q { font-size: 13px; color: var(--cc-muted); line-height: 1.35; }
.review .a { font-size: 15px; font-weight: 800; margin-top: 2px; line-height: 1.35; }
.review .d { font-size: 14px; color: #DCE5F5; line-height: 1.42; margin-top: 3px; }
.sec-center { text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 21px; margin-bottom: 10px; }