/* Ficha da carta (cardinfo.js). O diálogo ocupa a tela toda e é transparente: o clique nele mesmo é "fora" e fecha. */
dialog.cardInfo{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(16px,3vw,40px);border:0;border-radius:0;background:transparent;box-shadow:none;
 display:grid;place-items:center;overflow:auto;color:#efe6f2}
dialog.cardInfo:not([open]){display:none}
dialog.cardInfo::backdrop{background:radial-gradient(ellipse at 35% 45%,#2a1838b3,#05030ae6 70%);backdrop-filter:blur(7px) saturate(.7) brightness(.75);-webkit-backdrop-filter:blur(7px) saturate(.7) brightness(.75)}
/* Também desfoca o fundo do modal de escolha. */
#pickDialog::backdrop{background:#05030ac4;backdrop-filter:blur(7px) saturate(.7) brightness(.75);-webkit-backdrop-filter:blur(7px) saturate(.7) brightness(.75)}

.ciLayout{display:grid;grid-template-columns:auto minmax(300px,460px);gap:clamp(20px,4vw,56px);align-items:center;max-width:1000px;
 padding:clamp(18px,2.4vw,30px);border-radius:22px;background:linear-gradient(160deg,#241a30f2,#120d19f5);border:1px solid #8c6a8766;
 box-shadow:0 30px 80px #000c,inset 0 1px 0 #ffffff12,0 0 0 1px #00000080}
.ciClose{position:fixed;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);width:44px;height:44px;border-radius:50%;font-size:18px;display:grid;place-items:center;background:#1c1726cc;border:1px solid #8c6a87}

/* ---------- carta 3D ---------- */
.ciStage{perspective:1100px;display:grid;justify-items:center;gap:10px;touch-action:none}
.ciCard{--w:clamp(220px,26vw,330px);position:relative;width:var(--w);aspect-ratio:1/1.4;border-radius:calc(var(--w) * .06);overflow:hidden;container-type:inline-size;
 transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform;
 border:2px solid color-mix(in srgb,var(--rarc) 75%,transparent);
 box-shadow:calc(var(--px,0) * -22px) calc(26px + var(--py,0) * -14px) 50px #000d,0 0 0 1px #000,0 0 40px color-mix(in srgb,var(--rarc) 35%,transparent)}
.ciArt{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.06) translate(calc(var(--px,0) * -2%),calc(var(--py,0) * -2%))}
/* Película holográfica: mais forte quanto maior a raridade. */
.ciFoil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:calc(var(--tilt,0) * var(--foil,.12));
 background:linear-gradient(calc(115deg + var(--px,0) * 40deg),transparent 20%,#ff7ad9 35%,#ffd36b 45%,#5fd6cf 55%,#7a3cff 65%,transparent 80%);background-size:200% 200%;background-position:var(--mx,50%) var(--my,50%)}
.ciCard.rar-incomum{--foil:.2}.ciCard.rar-rara{--foil:.35}.ciCard.rar-lendaria{--foil:.55}.ciCard.rar-collector{--foil:.75}
.ciGlare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--tilt,0);
 background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#fffffff0,#ffffff55 22%,transparent 58%)}
.ciCardName{position:absolute;top:0;left:0;right:0;margin:0;padding:6cqw 6cqw 14cqw;text-align:center;font:700 8cqw/1.1 Georgia,serif;color:#fff;
 text-shadow:0 2px 6px #000,0 0 12px #000;background:linear-gradient(#0b0812d9,transparent);transform:translateZ(30px)}
.ciCardBar{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:flex;justify-content:space-between;align-items:center;gap:2cqw;transform:translateZ(40px)}
.ciCardBar>span{font:800 7.5cqw/1 system-ui,sans-serif;padding:2.4cqw 3.4cqw;border-radius:2.6cqw;border:1px solid #0008;box-shadow:0 2px 8px #000a}
.ciCardBar .atk{background:var(--atkBg,linear-gradient(#f2c14e,#c98a1c));color:#1b1222}
.ciCardBar .dmg{background:var(--dmgBg,linear-gradient(#e2445c,#a3182f));color:#fff}
.ciCardBar .st{font-size:5cqw;padding:2cqw 2.6cqw;background:#0b0812cc;color:#6d6077;letter-spacing:.5cqw}.ciCardBar .st i.on,.ciStars i.on{color:#ffd36b;font-style:normal}
.ciCardBar .st i,.ciStars i{font-style:normal}
.ciShadow{width:70%;height:18px;border-radius:50%;background:radial-gradient(#000a,transparent 70%);transform:translateX(calc(var(--px,0) * 10px))}

/* ---------- ficha ---------- */
.ciBody{display:flex;flex-direction:column;gap:12px;min-width:0}
.ciTags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ciTags span{font:800 11px/1 system-ui,sans-serif;letter-spacing:1.4px;padding:6px 10px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff0d}
.ciOwner.me{color:#9fd7ff;border-color:#4a9fd866}.ciOwner.enemy{color:#ff9fb0;border-color:#d84a6a66}
.ciRar{color:var(--rarc);border-color:color-mix(in srgb,var(--rarc) 50%,transparent)!important;background:color-mix(in srgb,var(--rarc) 12%,transparent)!important}
.ciStatus{color:#c9b8d4}
.ciBody h2{margin:2px 0 0;font:700 clamp(26px,3vw,38px)/1.05 Georgia,serif;color:#fff;text-shadow:0 2px 14px #0008}
.ciClan{margin:0;display:flex;align-items:center;gap:8px;font:800 12px/1 system-ui,sans-serif;letter-spacing:2px;color:var(--clan,#e8c98b)}
.ciClan i{width:10px;height:10px;transform:rotate(45deg);background:var(--clan,#e8c98b);box-shadow:0 0 10px var(--clan,#e8c98b)}
.ciNumbers{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px}
.ciNumbers>div{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:12px;border:1px solid #ffffff14;background:#0b0812aa}
.ciNumbers b{font:800 28px/1 Georgia,serif}.ciNumbers small{font:700 10px/1 system-ui,sans-serif;letter-spacing:1.5px;color:#a897b3}
.ciNumbers .atk{background:linear-gradient(#f2c14e26,#0b0812aa);border-color:#f2c14e55}.ciNumbers .atk b{color:#ffd36b}
.ciNumbers .dmg{background:linear-gradient(#e2445c26,#0b0812aa);border-color:#e2445c55}.ciNumbers .dmg b{color:#ff8fa3}
.ciNumbers .lvl b{font-size:20px;color:#5d5167;letter-spacing:2px}
.ciBlock{padding:12px 14px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff12}
.ciBlock h4{margin:0 0 6px;display:flex;justify-content:space-between;gap:8px;font:800 12px/1.2 system-ui,sans-serif;letter-spacing:1.6px;color:#e8c98b;text-transform:uppercase}
.ciBlock h4 em{font-style:normal;color:#a897b3;letter-spacing:1px}
.ciBlock p{margin:0;font-size:15px;line-height:1.5;color:#efe6f2}
.ciBlock small{display:block;margin-top:6px;color:#a897b3;font-size:12px}
.ciBlock.locked p{opacity:.6}
.ciBlock.clan{border-color:color-mix(in srgb,var(--clan,#8c6a87) 30%,transparent)}
.ciBlock.clan.on{background:color-mix(in srgb,var(--clan,#e8c98b) 10%,transparent);border-color:color-mix(in srgb,var(--clan,#e8c98b) 55%,transparent)}
.ciBlock.clan.on h4 em{color:#8fe3a2}
.ciBlock.lore{max-height:min(30vh,260px);overflow:auto}
.ciBlock.lore p{font:italic 15px/1.6 Georgia,serif;color:#dccfe4}.ciBlock.lore p+p{margin-top:8px}
.ciEmpty{opacity:.6}
.ciLinks{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ciLinks li{font-size:13px;padding:5px 9px;border-radius:8px;background:#ffffff0d;border:1px solid #ffffff14}
.ciLinks b{color:#e8c98b;font-weight:700}
.ciHint{margin:2px 0 0;text-align:center;font-size:12px;letter-spacing:1px;color:#8d7c99}

@media(max-width:760px){
 .ciLayout{grid-template-columns:1fr;justify-items:center;padding:16px;gap:16px}
 .ciCard{--w:min(62vw,240px)}
 .ciBody{width:100%}
 .ciBlock.lore{max-height:none}}
@media(prefers-reduced-motion:reduce){.ciArt{transform:none}}

/* Lore em segunda página (Leo, 04/10/2026): a ficha não muda de tamanho; "Virar a página" gira e mostra a lore com rolagem. */
.ciBody{position:relative;perspective:1400px}
.ciPg1{display:flex;flex-direction:column;gap:12px;min-width:0}
.ciPg2{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.ciPg2[hidden]{display:none}.ciPg1.away{visibility:hidden}
.ciBody.turning{overflow:hidden}
.ciLorePage{flex:1;min-height:0;display:flex;flex-direction:column;max-height:none!important;overflow:hidden!important}
.ciLoreScroll{flex:1;min-height:0;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#e8c98b66 transparent}
.ciLoreScroll p{font:italic 16px/1.65 Georgia,serif;color:#dccfe4;margin:0}.ciLoreScroll p+p{margin-top:10px}
.ciLoreBtn,.ciLoreBack{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;background:#ffffff08;border:1px solid #e8c98b44;color:#e8c98b;font:800 12px/1.2 system-ui,sans-serif;letter-spacing:1.6px;text-transform:uppercase;transition:background .2s,border-color .2s}
.ciLoreBtn em{font-style:normal;color:#d9cfe3;letter-spacing:1px}
.ciLoreBack{justify-content:center}
.ciLoreBtn:hover,.ciLoreBack:hover,.ciLoreBtn:focus-visible,.ciLoreBack:focus-visible{background:#e8c98b1f;border-color:#e8c98b99}

/* Lore do modal de escolha (ui.js turnPick): segunda página por cima da coluna da direita. */
#pickDialog .pickBody{position:relative}
#pickLorePage{position:absolute;inset:0;display:none;flex-direction:column;gap:10px;min-width:0}
#pickDialog .pickBody.lorePage>#pickLorePage{display:flex}
#pickDialog .pickBody.lorePage>:not(#pickLorePage){visibility:hidden}
.ciStatus:empty{display:none}

/* Carta escolhida (Leo, 06/10/2026): a ficha repete a borda amarela brilhante da carta no campo (mesmas cores e brilhos de .chosen em rarity-nome.css).
   A caixa da ficha corta o que passa da borda (overflow:hidden), então nesta carta o corte sai e o brilho fica no próprio invólucro. */
.ciCard.isChosen{overflow:visible;box-shadow:0 0 0 3px #ffd77a,0 0 0 8px #ffd77a3d,0 0 36px 8px #f5c05add,0 0 90px 22px #ff9f3a66,0 24px 38px #000d}
.ciCard.isChosen .ciReal{border-color:#fff0bf!important}