/* ===== Compatibilidade de signos ===== */
.cp-picker{display:grid; grid-template-columns:1fr auto 1fr; gap:14px 18px; align-items:start; max-width:980px; margin:0 auto 20px;
  padding:18px; border-radius:20px; border:1px solid var(--bd); background:linear-gradient(160deg,rgba(29,18,53,.85),rgba(13,10,31,.9))}
.cp-wheel{border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.cp-wheel legend{grid-column:1/-1; font-family:'Cinzel',serif; color:var(--gold); font-size:14px; margin-bottom:6px; text-align:center; width:100%}
.cp-wheel label{cursor:pointer}
.cp-wheel input{position:absolute; opacity:0; pointer-events:none}
.cp-wheel span{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; border-radius:12px; border:1px solid var(--bd);
  background:rgba(255,255,255,.03); transition:all .2s ease}
.cp-wheel i{font-style:normal; font-size:22px; line-height:1.1}
.cp-wheel small{font-size:11.5px; color:var(--dim)}
.cp-wheel label:hover span{border-color:var(--gold-dim)}
.cp-wheel input:checked + span{border-color:var(--gold); background:linear-gradient(140deg,rgba(232,192,106,.25),rgba(155,108,255,.2)); transform:scale(1.04)}
.cp-wheel input:checked + span small{color:#fff3d6}
.cp-wheel input:focus-visible + span{outline:2px solid var(--gold)}
.cp-cauldron{grid-column:2; grid-row:1; align-self:center; position:relative; width:110px; height:110px; border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 50% 30%,#3a2a7a,#140e30 70%); border:2px solid rgba(232,192,106,.35);
  box-shadow:inset 0 -12px 24px rgba(0,0,0,.6),0 0 30px rgba(155,108,255,.25); display:grid; place-items:center; overflow:hidden}
.cp-pct{position:relative; z-index:2; font-family:'Cinzel',serif; font-size:26px; color:var(--gold); text-shadow:0 0 12px rgba(232,192,106,.6)}
.cp-bubbles i{position:absolute; bottom:-14px; width:12px; height:12px; border-radius:50%; background:rgba(196,167,255,.55); opacity:0}
.cp-bubbles i:nth-child(1){left:18%} .cp-bubbles i:nth-child(2){left:38%; width:8px; height:8px} .cp-bubbles i:nth-child(3){left:55%}
.cp-bubbles i:nth-child(4){left:70%; width:9px; height:9px} .cp-bubbles i:nth-child(5){left:30%; width:14px; height:14px}
.cp-picker.ready .cp-cauldron{border-color:var(--gold)}
.cp-picker.mixing .cp-cauldron{animation:cpShake .5s ease-in-out infinite; box-shadow:inset 0 -12px 24px rgba(0,0,0,.6),0 0 46px rgba(232,192,106,.45)}
.cp-picker.mixing .cp-bubbles i{animation:cpBubble 1.1s ease-in infinite}
.cp-picker.mixing .cp-bubbles i:nth-child(2){animation-delay:.2s} .cp-picker.mixing .cp-bubbles i:nth-child(3){animation-delay:.45s}
.cp-picker.mixing .cp-bubbles i:nth-child(4){animation-delay:.65s} .cp-picker.mixing .cp-bubbles i:nth-child(5){animation-delay:.85s}
@keyframes cpBubble{0%{transform:translateY(0); opacity:0}20%{opacity:.9}100%{transform:translateY(-120px); opacity:0}}
@keyframes cpShake{50%{transform:rotate(-2deg) translateY(-2px)}}
.cp-mix{grid-column:1/-1; justify-self:center; cursor:pointer; font:inherit}
.cp-mix[disabled]{opacity:.7}
.cp-msg{grid-column:1/-1; text-align:center; color:var(--dim); min-height:1.4em; margin:0}

.cp-matrix-wrap{overflow-x:auto; margin:10px 0 14px}
.cp-matrix{border-collapse:separate; border-spacing:3px; margin:0 auto}
.cp-matrix th{font-size:18px; color:var(--gold); font-weight:400; padding:2px 4px}
.cp-matrix td{padding:0}
.cp-matrix td a{display:grid; place-items:center; width:40px; height:34px; border-radius:7px; font-size:12px; color:#fff; background:#5a447e;
  background:color-mix(in srgb, #e8c06a calc((var(--v) - 35) * 1.6%), #3b2a6e)}
.cp-matrix td a:hover{outline:2px solid #fff; text-decoration:none}
.cp-signlinks{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0}
.cp-signlinks a,.cp-chips a{padding:6px 12px; border-radius:999px; border:1px solid var(--bd); font-size:13.5px; color:var(--ink)}
.cp-signlinks a:hover,.cp-chips a:hover{border-color:var(--gold); text-decoration:none}

.cp-pair{max-width:900px}
.cp-head{text-align:center; margin:10px 0 18px}
.cp-duo{display:flex; align-items:center; justify-content:center; gap:16px}
.cp-sign{display:flex; flex-direction:column; align-items:center; gap:2px; width:120px; padding:12px 6px; border-radius:16px; border:1px solid var(--bd);
  background:rgba(255,255,255,.03); color:var(--ink)}
.cp-sign:hover{text-decoration:none; border-color:var(--gold-dim)}
.cp-sign i{font-style:normal; font-size:44px; line-height:1; color:var(--gold)}
.cp-sign b{font-family:'Cinzel',serif; font-size:16px}
.cp-sign small{color:var(--faint); font-size:12px}
.cp-plus{font-family:'Cinzel',serif; font-size:30px; color:var(--gold)}
.cp-title{font-size:clamp(24px,4vw,38px); margin:16px 0 4px}
.cp-nick{font-style:italic; color:var(--dim); font-size:18px; margin:0 0 14px}
.cp-meter{position:relative; width:170px; height:170px; margin:0 auto; display:grid; place-items:center}
.cp-meter svg{position:absolute; inset:0; transform:rotate(-90deg)}
.cp-meter circle{fill:none; stroke-width:9}
.cp-meter .bg{stroke:rgba(255,255,255,.08)}
.cp-meter .fg{stroke:url(#none); stroke:var(--gold); stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:calc(326.7 - 326.7 * var(--v) / 100);
  filter:drop-shadow(0 0 6px rgba(232,192,106,.5))}
.cp-meter.lv1 .fg{stroke:#ff7a59} .cp-meter.lv2 .fg{stroke:#f3a65b} .cp-meter.lv3 .fg{stroke:#e8c06a} .cp-meter.lv4 .fg{stroke:#9be27e} .cp-meter.lv5 .fg{stroke:#ff8fd1}
.cp-num{font-family:'Cinzel',serif; font-size:38px; color:#fff3d6; line-height:1}
.cp-meter small{position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--faint); font-size:13px}
.cp-tabs{display:flex; justify-content:center; gap:8px; margin:40px 0 14px}
.cp-tabs button{all:unset; cursor:pointer; padding:8px 18px; border-radius:999px; border:1px solid var(--bd); color:var(--dim); font-size:15px}
.cp-tabs button.on{border-color:var(--gold); color:#fff3d6; background:rgba(232,192,106,.12)}
.cp-text p{font-size:18px; line-height:1.8; color:var(--ink); max-width:760px; margin:0 auto}
.cp-text.evil p{color:#ffd9d2}
.cp-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:22px 0}
.cp-facts div{padding:14px; border-radius:14px; border:1px solid var(--bd); background:rgba(255,255,255,.03); display:flex; flex-direction:column; gap:4px}
.cp-facts small{color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px}
.cp-facts b{font-weight:600; color:#fff3d6}
.cp-share{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; color:var(--faint); margin:8px 0 20px}
.cp-share a,.cp-share button{padding:7px 14px; border-radius:999px; border:1px solid var(--bd); color:var(--ink); background:none; font:inherit; font-size:14px; cursor:pointer}
.cp-share a:hover,.cp-share button:hover{border-color:var(--gold); text-decoration:none}
.cp-more .h-sec,.cp-again .h-sec{font-size:clamp(17px,2.4vw,21px); margin:24px 0 10px}
.cp-chips{display:flex; flex-wrap:wrap; gap:6px}
.cp-chips a.on{border-color:var(--gold); background:rgba(232,192,106,.12)}
.cp-chips small{color:var(--faint)}
.sign-compat{margin:22px 0}
.sign-compat .cp-chips a small{color:var(--faint)}

@media (max-width:760px){
  .cp-picker{grid-template-columns:1fr; padding:14px}
  .cp-cauldron{grid-column:1; grid-row:auto; justify-self:center; width:92px; height:92px}
  .cp-wheel{grid-template-columns:repeat(4,1fr)}
  .cp-sign{width:104px}
  .cp-matrix td a{width:30px; height:28px; font-size:10.5px}
  .cp-text p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.cp-picker.mixing .cp-cauldron,.cp-picker.mixing .cp-bubbles i{animation:none}}