/* Página "Clãs" (clas.js). Copyright (c) Eclipse. Sem rolagem da página: a crônica rola por dentro se for longa; as cartas se ajustam sozinhas ao espaço. */
.clView{--clan:#e8c98b;position:relative;height:calc(100vh - 88px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);--cg:clamp(14px,2.2vh,22px);gap:var(--cg);overflow:hidden;
 padding:clamp(4px,.7vh,8px) max(clamp(14px,2.4vw,44px),env(safe-area-inset-right)) max(clamp(8px,1.2vh,16px),env(safe-area-inset-bottom)) max(clamp(14px,2.4vw,44px),env(safe-area-inset-left));
 background:radial-gradient(ellipse 50% 70% at 28% 55%,color-mix(in srgb,var(--clan) 20%,transparent),transparent 70%),radial-gradient(ellipse 45% 55% at 80% 40%,color-mix(in srgb,var(--clan) 11%,transparent),transparent 72%);transition:background .6s}
.clView[hidden]{display:none}
.clHead{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.clBack{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px 0 8px;border-radius:12px;border:1px solid #ffffff22;background:#ffffff0d;color:#f3e7cf;font:700 15px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
.clBack svg{width:20px;height:20px}.clBack:hover{background:#ffffff1a}
.clTitles{display:flex;align-items:baseline;gap:12px;line-height:1}.clTitles small{font:600 12px 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--clan) 70%,#fff)}
.clTitles h2{margin:0;order:-1;font:400 clamp(28px,3.8vh,38px)/1 'Grenze Gotisch','Alegreya Sans',serif;color:#fff6e0;text-shadow:0 0 28px color-mix(in srgb,var(--clan) 60%,transparent)}
.clEvo{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--clan) 30%,#ffffff1a);background:#00000040}
.clEvo small{font:700 11px 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cdbfdc}
.clEvo button{width:34px;height:36px;padding:0;border:0;background:none;color:#ffffff40;font-size:27px;cursor:pointer;transition:transform .15s,color .15s}
.clEvo>span{display:flex;white-space:nowrap}.clEvo button.on{color:#ffc933;text-shadow:0 0 10px #ffc93388}.clEvo button:hover{transform:scale(1.2)}
/* abas: o brasão de cada clã */
.clTabsWrap{display:flex;align-items:center;gap:6px;order:3;flex:1 1 100%;min-width:0}
@media (min-width:1500px){.clTabsWrap{order:0;flex:1 1 0}}
.clTabs{flex:1 1 0;min-width:0;display:flex;gap:clamp(4px,.6vw,10px);justify-content:safe center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;cursor:grab;padding:3px 2px}
.clTabs::-webkit-scrollbar{display:none}.clTabs.dragging{cursor:grabbing;user-select:none}.clTabs.dragging .clTab{pointer-events:none}
/* setas: só quando há clã escondido; desligadas na ponta */
.clArrow{display:none;flex:none;width:36px;height:36px;padding:0;place-items:center;border-radius:50%;border:1px solid #ffffff2a;background:#00000055;color:#f3e7cf;cursor:pointer;transition:opacity .2s,background .2s}
.clArrow svg{width:20px;height:20px}.clTabsWrap.over .clArrow{display:grid}.clArrow:hover:not(:disabled){background:#ffffff1f}.clArrow:disabled{opacity:.28;cursor:default}
.clArrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1499px){.clTab b{display:none}.clTab{font-size:12.5px;padding:3px 11px 3px 4px}}
.clTab{flex:none}
.clTab{--clan:#e8c98b;position:relative;display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:2px 12px 2px 3px;border-radius:999px;border:1px solid #ffffff1a;background:#0000003d;color:#e9deef;font:800 13px 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap;cursor:pointer;transition:transform .2s,background .25s,border-color .25s,box-shadow .25s}
.clTab b{font-size:12px;min-width:20px;height:20px;display:inline-grid;place-items:center;border-radius:10px;background:#ffffff14;color:#cdbfdc}
.clTab:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--clan) 60%,transparent)}
.clTab[aria-selected="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--clan) 34%,#0a0710),color-mix(in srgb,var(--clan) 14%,#0a0710));border-color:var(--clan);color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--clan) 60%,transparent),0 6px 24px color-mix(in srgb,var(--clan) 40%,transparent)}
.clTab:focus-visible,.clBack:focus-visible,.clCard:focus-visible,.clEvo button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* brasão: a moldura do Leo com o fundo branco e o ícone do clã (a mesma imagem do emblema da carta) */
.clEmb{position:relative;flex:none;display:block;width:30px;height:30px;font-style:normal;
 background:url('assets/moldura-cla.webp') 50% 50%/100% 100% no-repeat,var(--clanImg,none) 50% 50%/64% auto no-repeat,radial-gradient(circle at 50% 50%,#fff 0,#fff 46%,transparent 46.8%) 50% 50%/100% 100% no-repeat;
 filter:drop-shadow(0 0 5px color-mix(in srgb,var(--clan) 80%,transparent))}
.clEmb::after{content:attr(data-i);position:absolute;inset:0;display:grid;place-items:center;font:900 15px 'Grenze Gotisch',serif;color:var(--clan);filter:brightness(.55);z-index:-1}
.clEmb[style*="--clanImg"]::after{display:none}
.clEmb.big{width:clamp(70px,11vh,104px);height:clamp(70px,11vh,104px)}.clEmb.big::after{font-size:clamp(28px,5vh,44px)}
/* corpo: crônica à esquerda, cartas à direita */
.clMain{display:grid;grid-template-columns:minmax(270px,26%) minmax(0,1fr);gap:clamp(10px,1.2vw,20px);min-height:0}
.clSide{display:flex;flex-direction:column;gap:10px;min-height:0}.clSide .clLore{flex:1 1 0}
.clLore{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,14px);min-height:0;padding:clamp(12px,2vh,20px);border-radius:18px;border:1px solid color-mix(in srgb,var(--clan) 40%,#ffffff14);
 background:linear-gradient(180deg,color-mix(in srgb,var(--clan) 12%,#120b1c) 0,#0e0916 60%);box-shadow:inset 0 1px 0 #ffffff12,0 20px 50px #0008}
.clName{display:flex;align-items:center;gap:14px}.clName small{font:700 11px 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.3em;color:color-mix(in srgb,var(--clan) 75%,#fff)}
.clName h3{margin:2px 0 0;font:400 clamp(26px,4vh,40px)/1.02 'Grenze Gotisch','Alegreya Sans',serif;color:#fff6e0;overflow-wrap:anywhere}
.clChips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.clChips span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:clamp(8px,1.4vh,14px) 10px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--clan) 14%,#ffffff0a),#ffffff06);border:1px solid color-mix(in srgb,var(--clan) 28%,#ffffff14);text-align:center}
.clChips b{font:800 clamp(24px,3.6vh,34px)/1 'Alegreya Sans',system-ui,sans-serif;color:#fff6e0;text-shadow:0 0 14px color-mix(in srgb,var(--clan) 50%,transparent)}
.clChips small{font:700 clamp(12px,1.6vh,14.5px) 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#cdbfdc}
.clChips .mine{border-color:color-mix(in srgb,var(--clan) 65%,transparent)}
.clLore>:not(.clChron){flex:none}.clChron{min-height:0}.clOath small,.clChron small{display:block;margin-bottom:5px;font:800 11px 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--clan) 70%,#fff)}
.clOath p{margin:0;padding:8px 12px;border-left:3px solid var(--clan);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--clan) 12%,#ffffff06);font:600 clamp(14px,1.9vh,17px)/1.35 'Alegreya Sans',system-ui,sans-serif;color:#fff2d6}
.clChron{flex:1 1 0;display:flex;flex-direction:column}
.clText{flex:1 1 0;min-height:0;overflow:auto;padding-right:6px;scrollbar-width:thin;font:400 clamp(14px,1.9vh,17px)/1.55 'Alegreya Sans',system-ui,sans-serif;color:#dccfe8}
.clText p{margin:0 0 .7em}.clText p:first-child::first-letter{float:left;margin:.04em .1em 0 0;font:400 3.1em/.8 'Grenze Gotisch',serif;color:var(--clan)}
.clText.empty{font-style:italic;color:#9a8cab}.clText.empty p::first-letter{all:unset}
/* palco das cartas */
.clStage{position:relative;min-height:0;min-width:0;display:grid;place-items:center;overflow:hidden;border-radius:18px}
.clRays{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:.5;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--clan) 22%,transparent) 0 4deg,transparent 4deg 16deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);animation:clSpin 120s linear infinite}
@keyframes clSpin{to{rotate:360deg}}
.clCards{--w:150px;--cols:3;--gap:12px;position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),var(--w));align-content:start;justify-content:center;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--clan) 60%,#fff3) transparent;gap:var(--rgap,var(--gap)) var(--gap);padding:20px 14px}
/* Em tela larga o palco sobe 14 px (sobre a faixa vazia das abas) e a fileira de cima começa na altura do topo do painel da esquerda; a folga do hover fica nesses 14 px (o mesmo vão entre o topo e as abas, então nada cobre as abas) */
@media (min-width:901px){.clStage{margin-top:calc(var(--cg) * -1)}.clCards{padding:var(--cg) 14px 28px}}
.clCard{position:relative;display:block;width:var(--w);aspect-ratio:5/7;padding:0;margin:0;border:0;background:none;cursor:pointer;border-radius:12px;outline:none}
.clCard .clFrame{display:block;position:relative;width:100%;aspect-ratio:5/7;--w:100%}
.clCard .proFrame{width:100%}
/* O botão (.clCard) fica PARADO e só a carta dentro dele sobe: se o botão subisse, o cursor nas quinas ficaria fora dele e o hover ligava e desligava (tremida). O ::before é uma folga extra de 14 px em volta, que também cobre o vão entre as cartas. */
.clCard::before{content:'';position:absolute;inset:-14px;z-index:0}
.clCard .clFrame{transition:transform .25s cubic-bezier(.2,.8,.3,1),filter .3s;position:relative;z-index:1}
.clCard:hover,.clCard:focus-visible{z-index:3}
.clCard:hover .clFrame,.clCard:focus-visible .clFrame{transform:translateY(-3px) scale(1.02);filter:drop-shadow(0 8px 12px #000c) drop-shadow(0 0 8px color-mix(in srgb,var(--clan) 55%,transparent))}
.clCard.locked .clFrame{filter:grayscale(.85) brightness(.55)}.clCard.locked:hover .clFrame{filter:grayscale(.4) brightness(.8)}
.clLock{position:absolute;left:50%;top:42%;translate:-50% 0;padding:3px 10px;border-radius:999px;background:#000b;border:1px solid #ffffff33;font:800 11px/1.2 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#e9deef;font-style:normal;pointer-events:none}
@media (max-width:900px){
 .clView{height:calc(100vh - 80px);padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .clMain{grid-template-columns:1fr;grid-template-rows:minmax(0,40%) minmax(0,1fr)}
 .clTabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;flex-basis:100%}.clTab{flex:none}.clTab span{display:none}.clTab[aria-selected="true"] span{display:inline}
 .clHead{gap:10px}.clEmb.big{width:56px;height:56px}
 .clEvo{padding:2px 8px}.clEvo small{font-size:10px}.clEvo button{width:26px;height:28px;font-size:20px}
 .clTitles small{display:none}.clTitles h2{font-size:28px}
 .clLore{overflow:auto;scrollbar-width:thin;gap:8px;padding:12px}.clChips{display:none}.clName h3{font-size:24px}
 .clChron{flex:none}.clText{flex:none;overflow:visible}
}
@media (prefers-reduced-motion:reduce){.clRays{animation:none}.clCard,.clTab{transition:none}}
.reduced .clRays{animation:none}.reduced .clCard,.reduced .clTab{transition:none}

/* Fundo animado por clã (clas-fundo.js): um canvas atrás de tudo; as luzes e os raios antigos ficam mais discretos para não brigar com ele */
.clView{isolation:isolate}
.clView>.clBg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.clRays{opacity:.22}
/* Painel do clã (07/10/2026): números menores, uma linha só, e mais espaço e texto maior para a crônica */
.clChips{grid-template-columns:repeat(3,1fr);gap:6px}
.clChips span{padding:clamp(4px,.7vh,8px) 6px;border-radius:10px;gap:0}
.clChips b{font-size:clamp(16px,2.3vh,22px)}
.clChips small{font-size:clamp(9.5px,1.2vh,11px);letter-spacing:.04em}
.clText{font-size:clamp(15px,2.15vh,19px);line-height:1.6}
.clChron small{font-size:12px}

/* Sem letra no meio do emblema do clã (Leo, 07/10/2026) */
.clEmb::after{display:none!important}

/* Muitos clãs (Leo, 07/10/2026): nenhum fica escondido. As abas quebram em linhas, mostram só o brasão (e o nome do clã selecionado); o nome completo fica no título ao passar o mouse. */
@media (min-width:901px){
 .clTabs.many{flex-wrap:wrap;overflow:visible;justify-content:center;row-gap:6px;cursor:default}
 .clTabs.many .clTab{padding:2px 7px 2px 3px;gap:6px}
 .clTabs.many .clTab span,.clTabs.many .clTab b{display:none}
 .clTabs.many .clTab[aria-selected="true"] span{display:inline}
 .clTabs.many .clTab[aria-selected="true"] b{display:inline-grid}
 .clTabsWrap.over .clArrow{display:none}
}