/* LA BATALLA DE LOS CLANES · ETAPA 5 · PRESENTACIÓN VISUAL
   Actualización estética compartida: sin audio, recursos externos ni cambios de reglas. */
:root{--clanes-gold:#e7c885;--clanes-ice:#91dcea;--clanes-ink:#081422;--clanes-violet:#b9a0db;--clanes-edge:rgba(228,204,149,.32)}
body{background-color:#080f18;text-rendering:optimizeLegibility}
.worldBackdrop{background:radial-gradient(ellipse 60% 42% at 78% 8%,#284b5740,transparent 75%),radial-gradient(ellipse 60% 46% at 4% 90%,#214b4140,transparent 72%),linear-gradient(145deg,#07121a,#0d151c 70%,#0a1018)}
.worldBackdrop::after{content:'';position:absolute;inset:0;opacity:.3;background-image:repeating-linear-gradient(100deg,transparent 0 68px,#d5c49c08 69px,transparent 70px),repeating-linear-gradient(0deg,transparent 0 75px,#aec6dd07 76px,transparent 77px);mask-image:linear-gradient(transparent,#000 25%,#000 85%,transparent)}
.sidebar{box-shadow:12px 0 40px #0003}
.brandSeal{box-shadow:0 0 0 3px #e7c8850a,inset 0 0 19px #cfae6112}
.tab.active{box-shadow:inset 0 0 25px #92cab813,0 4px 18px #0003}
.topbar,.onlineHeader{backdrop-filter:blur(12px)}
.heroBanner{border-color:#94764e88;border-radius:20px;box-shadow:0 28px 75px #0008,inset 0 0 0 1px #f9e9bd14;isolation:isolate}
.heroBanner::after{content:'';position:absolute;inset:12px;border:1px solid #e0c28f38;border-radius:12px;pointer-events:none;z-index:0}
.heroBanner>*{position:relative;z-index:1}
.heroBanner h1{letter-spacing:-1px;text-shadow:0 8px 28px #000c}
.panel,.statusPanel,.setupPanel,.entryPanel,.accessPanel,.hubCard{border-color:#a3a1a02d;box-shadow:0 8px 35px #0002,inset 0 1px #fffaee09}
.panel h2,.hubHeading h2,.sectionTitle h2{color:#f0e5cf}
.primary{background:linear-gradient(120deg,#dfbe78,#e9d79d 48%,#b99454);color:#171b20;border-color:#efd79e;box-shadow:0 3px 14px #090b14a8;transition:filter .18s,transform .18s,box-shadow .18s}
.primary:not(:disabled):hover{filter:brightness(1.09);box-shadow:0 5px 20px #c5a76738}
.ghost{border-color:#9aadb342}
.ghost:not(:disabled):hover{border-color:#d7c08a88;background:#d8c28b18}
:focus-visible{outline:2px solid #a6f5ed!important;outline-offset:3px!important}
::selection{background:#b7a171;color:#0a1420}
/* Fichas: marco, retrato y estados activos de selección. */
.handCard,.miniUnit,.miniChoice,.heroCard,.progressCard{isolation:isolate}
.handCard{box-shadow:0 8px 20px #0006,inset 0 0 0 1px #f8df9d12}
.handCard::before{content:'';position:absolute;inset:2px;pointer-events:none;border:1px solid #f4dfae33;border-radius:inherit;z-index:3}
.handCard img,.miniUnit img{background:radial-gradient(circle at 50% 30%,#334354,#0b1722 68%);font-size:0}
.handCard.active,.handCard[aria-pressed='true']{box-shadow:0 0 0 2px #97e1e6c7,0 9px 26px #0009,0 0 24px #6ad9e04d!important;filter:brightness(1.07)}
.handCard.assigned:not(.active){opacity:.83;box-shadow:0 0 0 1px #7eb8a660,0 9px 19px #0006}
.handCard.assigned .assignment{color:#bdedcf;font-weight:700}
.handCard:focus-visible,.miniChoice:focus-visible{z-index:10}
.duelMode .handCard .cardMeta,.onlineApp .handCard .cardMeta{text-shadow:0 2px 7px #000}
.duelMode .miniUnit{transition:filter .2s,box-shadow .2s,transform .2s}
.duelMode .miniUnit.defeated{filter:grayscale(.8) saturate(.45) brightness(.62)}
.duelMode .miniUnit.newUnit{box-shadow:0 0 0 1px #a2d9eab5,0 7px 22px #0008,0 0 19px #75f2da30}
.duelMode .miniUnit:focus-within{z-index:6}
.unitOverlay{background:linear-gradient(transparent,#07131efa 58%)}
.unitRound,.unitRunes{backdrop-filter:blur(6px)}
/* Tablero: los mapas realmente disputados son identificables de un vistazo. */
.duelMode .mapsBoard{isolation:isolate}
.duelMode .mapCard{--territory-glow:#c0ad8350;filter:drop-shadow(0 10px 16px #0008);transition:filter .22s}
.duelMode .mapCard[data-visual-state='leading']{--territory-glow:#76cfb879}
.duelMode .mapCard[data-visual-state='trailing']{--territory-glow:#d18ea07e}
.duelMode .mapCard[data-visual-state='tied']{--territory-glow:#d8c58a75}
.duelMode .mapCard .mapHero{box-shadow:0 0 0 1px var(--territory-glow),0 5px 23px #0009,0 0 22px var(--territory-glow);transition:box-shadow .26s,border-color .26s}
.duelMode .mapCard .mapHero::before{content:'';position:absolute;inset:5px;border:1px solid #f9e7b344;border-radius:inherit;z-index:1;pointer-events:none}
.duelMode .mapCard .mapHero::after{pointer-events:none}
.duelMode .mapCard .territoryScore{z-index:4;box-shadow:0 4px 16px #000c,inset 0 1px 5px #fff3}
.duelMode .mapCard[data-visual-state='leading'] .allyScore{border-color:#a3f5da;box-shadow:0 0 18px #77eedb55,0 4px 14px #0008}
.duelMode .mapCard[data-visual-state='trailing'] .rivalScore{border-color:#f1b4c4;box-shadow:0 0 18px #cc7f9d55,0 4px 14px #0008}
.duelMode .mapCard[data-visual-state='tied'] .territoryScore{border-color:#e0ca93}
.duelMode .mapCard .mapTitle{font-family:Georgia,'Times New Roman',serif;font-weight:700;color:#f9f0dd;text-shadow:0 2px 10px #02070d,0 0 12px #02070d;letter-spacing:.2px}
.duelMode .mapCard .laneSide h4{font-weight:700;text-shadow:0 2px 7px #000e}
.duelMode .mapCard.targetable .playerSide{border:1px solid #9ceae642;border-radius:12px;background:radial-gradient(ellipse at 50% 50%,#52b8b40a,transparent 75%)}
.duelMode .mapCard.dropHover.dropValid .playerSide{border-color:#c3fff5;background:#31697843}
.dropHint{transition:background-color .18s,border-color .18s}
/* Fases y progreso visual: complementan los textos existentes, no los sustituyen. */
.duelCrest{position:relative}
.duelCrest strong{letter-spacing:.08em}
.visualRoundTrack{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:4px;min-height:6px}
.visualRoundDot{display:block;width:22px;height:4px;border-radius:6px;background:#5f728e;box-shadow:inset 0 1px #fff2;transition:background-color .24s,box-shadow .24s}
.visualRoundDot.completed{background:#78c7a7}
.visualRoundDot.current{background:#f0d39a;box-shadow:0 0 12px #eed19991}
.visualRoundChange strong{animation:clanesRoundPulse .75s ease both}
@keyframes clanesRoundPulse{0%{filter:brightness(1)}35%{filter:brightness(1.8);text-shadow:0 0 22px #f5d69b}100%{filter:brightness(1)}}
.duelMode .gameMeta{border:1px solid #d4c38a30!important;box-shadow:0 5px 24px #0006!important}
.duelMode #roundLabel{font-variant-numeric:tabular-nums;font-weight:700}
.duelMode #roundStatus{color:#dae5ea}
.duelMode .handPanel .dockLabel strong,.onlineApp .handPanel .dockLabel strong{letter-spacing:1.3px}
.duelMode #confirmRound:not(:disabled),.onlineApp #confirmRound:not(:disabled){background:linear-gradient(120deg,#4c6f97,#526f9f 50%,#8574bd)!important;border-color:#a5c9ef!important;box-shadow:0 2px 18px #5f8dd745,0 6px 18px #0008}
.duelMode #confirmRound:not(:disabled):hover,.onlineApp #confirmRound:not(:disabled):hover{filter:brightness(1.13)}
.duelMode .duelDock{border-top:1px solid #d0b98038;background:linear-gradient(180deg,#07111b99,#091523e8)}
.duelMode .duelHud .duelist>b{font-variant-numeric:tabular-nums;text-shadow:0 0 15px currentColor}
/* Resultado, cofres y páginas de comunidad. */
.modal:not(.hidden) .modalCard,.onlineApp #result:not(.hidden){box-shadow:0 30px 90px #000a,inset 0 0 0 1px #dbbd7c1c}
.modalCard,.onlineApp #result{border-color:#c6aa766b!important}
.modalCard h1,.modalCard h2,#resultTitle{font-family:Georgia,'Times New Roman',serif;letter-spacing:.03em;color:#eed8a4;text-shadow:0 3px 14px #0008}
.onlineApp #result:not(.hidden){background:linear-gradient(155deg,#16293de8,#111e32ec 60%,#243248db);border:1px solid #b9a2735c;border-radius:24px;padding:clamp(18px,3vw,38px);max-width:900px;margin:7vh auto;position:relative;overflow:hidden}
.onlineApp #result::before{content:'';position:absolute;inset:9px;border:1px solid #d3b9822b;border-radius:18px;pointer-events:none}
.onlineApp #resultScores article{background:linear-gradient(160deg,#193449bb,#0d1a2dbb);border-color:#cfba8b50;border-radius:13px}
.onlineApp .socialHub{box-shadow:0 19px 62px #0007,inset 0 1px #f7dbac12;border-color:#d6bd8650}
.onlineApp .hubCard{transition:transform .2s,border-color .2s;background:linear-gradient(155deg,#213f4c90,#101c2ce9)}
.onlineApp .hubCard:hover{border-color:#dbbe7f75}
.onlineApp .hubTabs button.active{box-shadow:0 0 0 1px #fff4d66b,0 5px 20px #d0ad5b33}
.onlineApp .entryPanel,.onlineApp .accessPanel{border-color:#d5b78253;box-shadow:0 20px 55px #0006,inset 0 1px #fff2}
.onlineApp input,.onlineApp select{accent-color:#c9ab70}
.onlineApp #roomCode{font-variant-numeric:tabular-nums;text-shadow:0 0 25px #d6b9805e}
/* Menor movimiento, incluso si otros estilos proponen animaciones continuas. */
@media(prefers-reduced-motion:reduce){.visualRoundChange strong{animation:none!important}.handCard,.miniUnit,.heroBanner,.hubCard{transition:none!important}.handCard:hover{transform:none!important}.worldBackdrop::after{display:none}}
/* En teléfono, conservar espacio de juego y área táctil utilizable. */
@media(max-width:800px){.visualRoundTrack{gap:4px}.visualRoundDot{width:16px;height:3px}.onlineApp #result:not(.hidden){margin:20px 8px}.onlineApp .hubCard{border-radius:16px}.heroBanner{border-radius:14px}}
@media(max-width:540px){.heroBanner::after{inset:7px}.duelMode .duelHud .duelist>b{box-shadow:0 3px 10px #0009}.duelMode .mapCard{filter:drop-shadow(0 4px 6px #0009)}.duelMode .mapCard .mapHero::before{inset:3px}.duelMode .mapTitle{font-size:clamp(9px,2.7vw,12px)!important}.duelMode .handCard{border-width:1px}.duelMode .handCard .handDetail,.duelMode .handCard .removeAssign{min-width:23px;min-height:23px}.visualRoundTrack{margin-top:1px}.visualRoundDot{width:12px}.onlineApp #resultScores{gap:8px}}