[data-tone=green]{--tier:#72d66b;--tier-dark:#183a20;--tier-line:#397a39}[data-tone=gold]{--tier:#ffe276;--tier-dark:#594608;--tier-line:#b18e19}[data-tone=blue]{--tier:#82d9ff;--tier-dark:#173449;--tier-line:#397fa9}[data-tone=purple]{--tier:#d3a3ff;--tier-dark:#38234e;--tier-line:#8252a9}[data-tone=red]{--tier:#ff91a3;--tier-dark:#521e2f;--tier-line:#c73c5e}
.pass-track{min-height:368px;padding-top:10px;padding-bottom:22px;gap:16px;scroll-padding:3px}.pass-cell{flex:0 0 220px;min-width:0;scroll-snap-align:start}.pass-cell .pass-card{width:100%;height:298px;scroll-snap-align:none;position:relative}.pass-cell .pass-symbol{height:145px}.pass-cell .pass-card strong{font-size:34px;padding:10px 14px 16px}.pass-cell .pass-card[data-state=locked] strong{font-size:22px;color:#767087;filter:blur(.5px);opacity:.48}.pass-cell .pass-card[data-state=locked] .pass-symbol,.pass-cell .pass-card[data-state=revealable] .pass-symbol{color:#a59abd;background:radial-gradient(ellipse at center,#6d61a141,transparent 73%)}.pass-cell .lock-svg{width:78px;height:78px;filter:drop-shadow(0 0 20px #9a8bd128)}.lock-shackle{transform-origin:32px 42px}.pass-card[data-state=revealable]{border-color:#b9a0f3;background:linear-gradient(135deg,#292235,#16131e)}.pass-card[data-state=revealable] .pass-symbol{color:#dccbff}.pass-card[data-state=revealable] .lock-svg{animation:lockPulse 1.8s ease-in-out infinite}.pass-card[data-state=revealable] strong{font-size:25px;color:#eee1ff}.pass-card[data-state=revealable] .pass-card-foot{background:#4b355d;border-color:#87659e;color:#f5e4ff}.pass-card[data-state=preview] .pass-card-foot{background:#292438;color:#d4c9e9;border-color:#57466c}.pass-card.is-opening .lock-svg{animation:none}.pass-card.is-opening .lock-shackle{animation:openShackle .8s ease forwards}.pass-card.is-opening .pass-symbol{animation:revealLight .85s ease forwards}.pass-tier{height:47px;display:flex;align-items:center;gap:8px;position:relative;margin-top:10px;background:linear-gradient(110deg,var(--tier-dark),color-mix(in srgb,var(--tier-dark),#000 25%));border:1px solid var(--tier-line);border-radius:3px;color:var(--tier);padding:5px 10px;text-align:center;justify-content:center}.pass-tier>span{min-width:0}.pass-tier strong{display:block;font:600 16px/1.1 var(--display);text-transform:uppercase;white-space:nowrap}.pass-tier small{display:block;font:8px/1.3 var(--body);letter-spacing:.025em;opacity:.8;margin-top:3px}.pass-tier .medal-art{width:45px;height:56px;margin:-10px 0 -7px;color:var(--tier);flex-shrink:0}.pass-tier:has(.medal-art){text-align:left;padding-left:5px}.pass-reward[data-earned=true]{border-color:var(--tier-line);background:linear-gradient(145deg,var(--tier-dark),#211b25)}.pass-reward[data-earned=true] .medal-art,.pass-reward[data-earned=true] strong,.pass-reward[data-earned=true] span{color:var(--tier)}.pass-reward[data-earned=true] .medal-art{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tier),transparent 75%))}.pass-demo-link{display:block;text-align:right;color:#bcabca;text-decoration:underline;text-underline-offset:3px;font-size:11px;margin:0 0 10px}.medal-dialog{width:min(520px,calc(100% - 30px));max-height:90dvh;overflow:auto;border:1px solid var(--tier-line);border-radius:18px;background:radial-gradient(ellipse at top,var(--tier-dark),#19151d 70%);color:#f7eef5;text-align:center;padding:38px 32px;box-shadow:0 20px 100px #000a}.medal-dialog::backdrop{background:#07060bcc;backdrop-filter:blur(7px)}.medal-dialog .eyebrow{font-size:10px;color:var(--tier);margin:8px 0}.medal-dialog .medal-hero .medal-art{width:144px;height:160px;color:var(--tier);margin:22px auto;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--tier),transparent 50%));animation:medalArrive .7s ease-out}.medal-dialog h2{font:700 48px/1 var(--display);color:var(--tier);margin:16px 0}.medal-congratulations{font-size:16px;line-height:1.7;margin:20px 0 12px}.medal-next{font-size:13px;line-height:1.6;color:#cabace;margin-bottom:25px}.medal-celebration-note{font-size:10px;color:#ae9aae;margin-top:18px}.medal-confetti{font-size:24px;letter-spacing:15px;color:var(--tier);display:block;animation:confettiIn .8s ease-out}.account-tabs{display:flex;gap:24px;border-bottom:1px solid #493240;margin:28px 0 20px;padding-bottom:12px;font-size:14px}.account-tabs a{text-decoration:none;color:#b6a4b4}.account-tabs [aria-current]{color:#ff91a3;font-weight:600}
@keyframes lockPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px #bc9aff33)}50%{transform:scale(1.1);filter:drop-shadow(0 0 28px #bc9aff88)}}@keyframes openShackle{to{transform:translateY(-5px) rotate(-42deg)}}@keyframes revealLight{70%{filter:brightness(1.6)}100%{filter:brightness(1)}}@keyframes medalArrive{from{transform:translateY(20px) scale(.6);opacity:0}to{transform:none;opacity:1}}@keyframes confettiIn{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}@media(max-width:740px){.pass-cell{flex-basis:204px}.pass-cell .pass-card{height:286px}.pass-cell .pass-symbol{height:134px}.pass-cell .pass-card strong{font-size:30px}.pass-cell .pass-card[data-state=revealable] strong{font-size:23px}.pass-tier strong{font-size:15px}.medal-dialog{padding:28px 20px}.medal-dialog h2{font-size:40px}.pass-demo-link{text-align:left}}@media(prefers-reduced-motion:reduce){.pass-card[data-state=revealable] .lock-svg,.pass-card.is-opening .lock-shackle,.pass-card.is-opening .pass-symbol,.medal-dialog .medal-hero .medal-art,.medal-confetti{animation:none!important}.pass-card[data-state=revealable] .lock-svg{filter:drop-shadow(0 0 18px #bc9aff88)}}

/* Refinos da trilha Xuimtober: navegação lateral, progresso e estados de medalha. */
.pass-slider{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
.pass-slider .pass-track{width:100%;min-width:0}
.pass-slider-end{display:flex;align-items:center;gap:8px}
.pass-arrow{display:grid;place-items:center;width:38px;height:54px;padding:0;border:0;background:transparent;color:#f23554;cursor:pointer;transition:color .18s,transform .18s,opacity .18s}
.pass-arrow svg{display:block;width:26px;height:42px}
.pass-arrow:hover:enabled{color:#ff7890;transform:scale(1.08)}
.pass-arrow:disabled{opacity:.5;cursor:default}
.pass-arrow:focus-visible{outline:2px solid #ff91a3;outline-offset:2px;border-radius:4px}
.pass-revealed-count{display:flex;flex-direction:column;align-items:center;min-width:42px;color:#d4c2ca;text-align:center}
.pass-revealed-count strong{font:600 14px/1 var(--display);color:#ff91a3}
.pass-revealed-count span{font:10px/1.25 var(--body);margin-top:4px}
.pass-cell .pass-card strong{text-align:center}
.pass-tier{height:auto;min-height:82px;padding:8px 9px}
.pass-tier strong{font:600 17px/1.12 var(--display);white-space:normal}
.pass-tier small{font:500 13px/1.28 var(--body);letter-spacing:0;opacity:.96;margin-top:5px}
.pass-tier[data-earned=false][data-tone=green]{--tier:#a3b59a;--tier-dark:#212a22;--tier-line:#53644f}
.pass-tier[data-earned=false][data-tone=gold]{--tier:#c1ad7c;--tier-dark:#2d281d;--tier-line:#766542}
.pass-tier[data-earned=false][data-tone=blue]{--tier:#9bb5c3;--tier-dark:#1d2930;--tier-line:#526a78}
.pass-tier[data-earned=false][data-tone=purple]{--tier:#b4a1c2;--tier-dark:#28232e;--tier-line:#6a5778}
.pass-tier[data-earned=false][data-tone=red]{--tier:#c08b98;--tier-dark:#2d2127;--tier-line:#76505a}
.pass-rewards-label{display:block;font:600 clamp(20px,2.1vw,28px)/1.1 var(--display);letter-spacing:.025em;color:#f2eaf0;margin:30px 0 14px}
.medal-dialog{animation:medalFloat 4.8s ease-in-out infinite}
@keyframes medalFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:740px){.pass-slider{grid-template-columns:30px minmax(0,1fr) auto;gap:3px}.pass-arrow{width:28px;height:48px}.pass-arrow svg{width:20px;height:36px}.pass-slider-end{gap:3px}.pass-revealed-count{min-width:38px}.pass-revealed-count strong{font-size:13px}.pass-revealed-count span{font-size:9px}.pass-tier{min-height:76px;padding:7px}.pass-tier strong{font-size:15px}.pass-tier small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.medal-dialog{animation:none}}

/* Janela da palavra: ideia, disponibilidade e progresso na mesma linha central. */
.october-dialog{
  width:min(520px,calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  padding:24px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid #61414e;
  border-radius:20px;
  background:radial-gradient(ellipse at 50% 18%,#f2355410,transparent 52%),#1c191f;
  box-shadow:0 24px 90px #0009;
  text-align:center;
}
.october-dialog[open]{animation:ideaFloat 6s ease-in-out infinite}
.october-dialog .dialog-top{gap:12px;margin:0;text-align:left}
.october-dialog .eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.5;color:#bdb0ba}
.october-dialog .close-button{
  display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;
  border:1px solid #4e3b46;border-radius:10px;background:#ffffff03;
  color:#ddd3da;font-size:24px;transition:background .2s,border-color .2s;
}
.october-dialog .close-button:hover{background:#f235541c;border-color:#ff6680;color:#fff}
.october-dialog .pass-modal-idea{display:flex;flex-direction:column;align-items:center;padding:16px 8px 22px}
.october-dialog .pass-modal-icon{
  display:grid;place-items:center;width:80px;height:80px;flex:none;margin:0 auto 12px;
  border:1px solid #f2355438;border-radius:22px;color:#ff6680;
  background:radial-gradient(circle at center,#f2355419,#f2355405);
  box-shadow:0 0 36px #f2355410;
}
.october-dialog .pass-modal-icon svg{display:block;width:64px;height:64px}
.october-dialog h2{font-size:clamp(42px,7vw,56px);line-height:1.08;color:#ff91a3;margin:0;text-wrap:balance}
.october-dialog .october-hint{max-width:41ch;margin:12px auto 0;color:#c8bdc7;font-size:14px;line-height:1.65;text-wrap:pretty}
.october-dialog .pass-modal-state{padding:15px 18px;border:1px solid #b453692e;border-radius:12px;background:#f235540b}
.october-dialog .pass-modal-state-title{display:block;color:#ff9aac;font-size:14px;line-height:1.5;font-weight:600}
.october-dialog .pass-modal-state-detail{max-width:42ch;margin:4px auto 0;color:#d4c3cd;font-size:13px;line-height:1.6;text-wrap:pretty}
.october-dialog .pass-modal-footer{margin-top:20px;padding-top:18px;border-top:1px solid #ffffff0c}
.october-dialog .pass-modal-next{color:#ede2e8;font-size:13px;font-weight:600;line-height:1.6}
.october-dialog .october-permission{max-width:43ch;margin:5px auto 0;padding:0;color:#b8aab6;font-size:13px;line-height:1.6;text-wrap:pretty}
.october-dialog .season-button{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;margin-top:20px;padding:12px 16px;border-radius:10px;font-size:14px}
.october-dialog .season-button[hidden]{display:none}
.october-dialog[data-state=locked] .pass-modal-icon{color:#afa0bc;border-color:#6f557b66;background:#a98dbb0a;box-shadow:none}
@keyframes ideaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:480px){
  .october-dialog{width:calc(100% - 28px);padding:20px;border-radius:16px}
  .october-dialog .eyebrow{font-size:10px;letter-spacing:.1em}
  .october-dialog .pass-modal-idea{padding:16px 0 20px}
  .october-dialog .pass-modal-icon{width:72px;height:72px;border-radius:20px}
  .october-dialog .pass-modal-icon svg{width:58px;height:58px}
  .october-dialog .pass-modal-state{padding:14px 12px}
}
@media(prefers-reduced-motion:reduce){.october-dialog[open]{animation:none}}

/* No celular, cada palavra ocupa a largura disponível e os controles ficam abaixo. */
.pass-position,.pass-swipe-hint{display:none}
@media(max-width:740px){
  .pass-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 0 14px}
  .pass-toolbar>div:first-child{font-size:12px;line-height:1.6;align-items:flex-start}
  .pass-live-dot{flex:none;margin-top:6px}
  .pass-controls{align-self:center}
  .pass-controls #pass-today{height:44px;margin:0;padding:0 12px;font-size:12px;border-radius:9px;white-space:nowrap}
  .pass-slider{grid-template-columns:48px minmax(0,1fr) 48px;gap:12px 16px;align-items:center}
  .pass-slider .pass-track{grid-column:1/-1;grid-row:1;min-height:0;padding:5px 5px 8px;gap:16px;scroll-padding-inline:5px;scrollbar-width:none}
  .pass-slider .pass-track::-webkit-scrollbar{display:none}
  .pass-cell{flex-basis:100%;scroll-snap-stop:always}
  .pass-cell .pass-card{height:286px;border-radius:14px}
  .pass-cell .pass-card:hover{transform:none}
  .pass-cell .pass-card-top{padding:15px 18px;font-size:12px}
  .pass-cell .card-state{font-size:10px}
  .pass-cell .pass-symbol{height:116px;flex:none}
  .pass-cell .pass-symbol svg{width:86px;height:86px}
  .pass-cell .pass-card strong{padding:8px 16px 18px;font-size:38px;line-height:1.15;text-wrap:balance}
  .pass-cell .pass-card[data-state=revealable] strong{font-size:28px}
  .pass-cell .pass-card[data-state=locked] strong{font-size:26px;color:#b8aec3;filter:none;opacity:1}
  .pass-cell .pass-card-foot{min-height:48px;align-items:center;justify-content:center;padding:12px 16px;font-size:13px;line-height:1.5;text-align:center}
  .pass-cell .pass-tier{min-height:94px;margin-top:10px;padding:12px 16px;gap:14px;border-radius:10px}
  .pass-cell .pass-tier strong{font-size:20px;line-height:1.15;text-wrap:balance}
  .pass-cell .pass-tier small{margin-top:6px;font-size:13px;line-height:1.45;text-wrap:pretty}
  .pass-cell .pass-tier .medal-art{width:46px;height:58px;margin:0}
  .pass-slider-end{display:contents}
  .pass-slider #pass-prev{grid-column:1;grid-row:2}
  .pass-slider #pass-next{grid-column:3;grid-row:2}
  .pass-slider .pass-arrow{width:48px;height:48px;background:#211b22;border:1px solid #53313f;border-radius:12px}
  .pass-slider .pass-arrow svg{width:17px;height:28px}
  .pass-slider .pass-arrow:disabled{opacity:.3}
  .pass-slider .pass-revealed-count{grid-column:2;grid-row:2;display:block;min-width:0;text-align:center}
  .pass-slider .pass-position{display:block;margin:0 0 3px;color:#f4edf2;font:600 15px/1.4 var(--body)}
  .pass-slider .pass-revealed-count strong{font:600 12px/1.4 var(--body);color:#ff91a3}
  .pass-slider .pass-revealed-count>span:last-child{display:inline;margin:0 0 0 4px;font-size:12px;line-height:1.4;color:#bfb1c0}
  .pass-swipe-hint{display:block;grid-column:1/-1;margin:0;text-align:center;color:#a99cab;font-size:12px;line-height:1.5}
  .pass-status{margin:16px 0 22px;font-size:13px;line-height:1.6}
  .pass-progress p{font-size:13px;line-height:1.6}
  .pass-meter label{font-size:12px}
  .pass-meter>span{font-size:12px;line-height:1.5}
  .pass-reward strong{font-size:13px}
  .pass-reward span{font-size:12px;line-height:1.5}
}