/* Cofradle · tema común (morado pasional). Se carga DESPUÉS del estilo de cada página y lo sobrescribe. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

:root{
  --cf-bg:#1a0529;
  --cf-glass:rgba(255,255,255,.08);
  --cf-glass-b:rgba(255,255,255,.16);
  --cf-pink:#ff5c8a;
  --cf-gold:#ffd166;
  --cf-txt:#f6ecff;
  --cf-mut:#c9b3dc;
  --display:'Sora','Inter',system-ui,sans-serif;
}
html{background:var(--cf-bg)}
body{
  color:var(--cf-txt);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(150,40,190,.55), transparent 62%),
    radial-gradient(760px 560px at 100% 4%, rgba(190,28,92,.42), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(110,30,160,.45), transparent 60%),
    linear-gradient(180deg,#2a0840 0%,#1a0529 100%);
  background-attachment:fixed;
}
h1,h2,h3,.serif{font-family:var(--display)!important;letter-spacing:-.01em}

/* ---------- barra superior común ---------- */
.band,.hero{ /* neutraliza la cabecera antigua */
  background:transparent!important;border:0!important;color:var(--cf-txt)!important;
}
.cfbar{
  position:sticky;top:0;z-index:9;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px clamp(14px,3vw,28px);
  background:rgba(26,5,41,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--cf-glass-b);
}
.cflogo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff!important;flex:none}
.cflogo svg{display:block;filter:drop-shadow(0 4px 12px rgba(255,92,138,.45))}
.cflogo .wm{font:800 25px/1 var(--display);letter-spacing:-.02em;color:#fff}
.cflogo .wm i{font:700 12px/1 var(--display);font-style:normal;letter-spacing:.04em;color:#2a0840;background:var(--cf-gold);border-radius:6px;padding:3px 6px;margin-left:6px;vertical-align:3px}
.cfnav{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.cfnav::-webkit-scrollbar{display:none}
.cfnav a{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
  font:600 14.5px/1 var(--display);color:var(--cf-mut)!important;
  padding:10px 15px;border-radius:999px;border:1px solid transparent;transition:.15s;
}
.cfnav a:hover{color:#fff!important;background:var(--cf-glass)}
.cfnav a[aria-current=page]{color:#fff!important;background:linear-gradient(135deg,#e0306f,#8b2fd0);box-shadow:0 6px 18px rgba(224,48,111,.38)}
.cfnav .sh{display:none}
.cfbar .acc{display:flex;gap:8px;align-items:center;margin-left:auto;flex:none}
.cfbar .ibtn,.cfbar .reset{background:var(--cf-glass)!important;border:1px solid var(--cf-glass-b)!important;color:#fff!important;border-radius:12px!important}
.cfbar .ibtn:hover,.cfbar .reset:hover{background:rgba(255,255,255,.18)!important}
@media(max-width:760px){
  .cfbar{gap:8px 10px}
  .cfnav{order:3;flex:1 0 100%}
  .cfbar .acc{margin-left:auto}
  .cfnav .lg{display:none}.cfnav .sh{display:inline}
  .cfnav{gap:2px;justify-content:space-between}
  .cfnav a{padding:9px 9px;font-size:12.5px;gap:4px}
}

/* ---------- tarjetas y contenido ---------- */
.wrap{color:var(--cf-txt)}
.game,.res,.modal,.card,.sheet,.panel{
  border-radius:22px!important;
}
.game{background:linear-gradient(180deg,#fffaf0,#f6ecdb)!important;border:0!important;box-shadow:0 18px 40px rgba(10,0,25,.45)!important}
.game h2{font-family:var(--display)!important;color:#2e0f3d!important}
.tagpill{background:#ffe3a3!important;color:#6e4a06!important}
.tagpill.alt{background:#efe1fb!important;color:#5b2190!important}
.cta{background:linear-gradient(135deg,#e0306f,#8b2fd0)!important;border:0!important;border-radius:999px!important;box-shadow:0 8px 20px rgba(139,47,208,.4)}
.game:hover .cta{filter:brightness(1.08)}

/* ---------- Adivina la hermandad ---------- */
.modes{display:none!important}   /* los modos están en la barra superior */
.head .eyebrow{color:var(--cf-gold)!important}
.head h1{color:#fff!important}
.date,.attempt-txt,.intro,.foot,.foot a,.about,.other,.other a,.msg,.wrap>.small,#iPlay .small{color:var(--cf-mut)!important}
.other a,.foot a{color:#fff!important}
.pip{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.22)!important;color:#e6d6f5!important}
.pip.bad{background:#e0306f!important;border-color:#ff8fb0!important;color:#fff!important}
.pip.ok{background:#22b573!important;border-color:#7ee6b5!important}
.pip.cur{border-color:var(--cf-gold)!important;color:var(--cf-gold)!important;box-shadow:0 0 0 4px rgba(255,209,102,.18)!important}
.hint{border-color:rgba(255,255,255,.2)!important;background:rgba(255,255,255,.06)!important;color:var(--cf-mut)!important}
.hint .ic{background:rgba(255,255,255,.1)!important}
.hint.on{background:linear-gradient(180deg,#fffaf0,#f6ecdb)!important;border:0!important;color:#2a1530!important;box-shadow:0 10px 24px rgba(10,0,25,.35)}
.hint.on .ic{background:#f6dfa4!important;filter:none!important;opacity:1!important}
.hint.on .lb{color:#8a6414!important}
.hint.on .nt{color:#75647a!important}
.ikpi{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important;color:#fff!important}
.ikpi small{color:var(--cf-mut)!important}
.ikpi.rec b{color:var(--cf-gold)!important}
input[type=text]{border-radius:14px!important}
.go,.bigbtn{background:linear-gradient(135deg,#e0306f,#8b2fd0)!important;color:#fff!important;border:0!important;border-radius:14px!important;box-shadow:0 8px 20px rgba(139,47,208,.35)}
.bigbtn.alt{background:rgba(255,255,255,.12)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.28)!important}
.foot{opacity:.9}
.ikpi b{color:#fff!important}

/* tarjetas claras: texto oscuro siempre legible */
.res,.modal{color:#2a1530!important}
.res .small,.res small,.modal .small{color:#75647a!important}
.res .st{letter-spacing:.14em}
.res.win .st{color:#1f7a4a!important}.res.lose .st{color:#a3202f!important}
.res h2,.res h3,.modal h2,.modal h3{color:#2e0f3d!important}
.res a,.modal a{color:#6d28d9!important}
.res .runs li,.res .runs span{color:#2a1530!important}
.ctas .cta{text-decoration:none}
.cta.alt{background:#fff!important;color:#5b2190!important;border:2px solid #d9c3ee!important;box-shadow:none!important}
.game:hover .cta.alt{background:#f5ecff!important}

.about b,.foot b,.intro b,.attempt-txt b,#iPlay b,.wrap>.small b{color:#fff!important}
.res .runs .rb{color:#fff!important}

.sugs,.sugs .sug,.sug{color:#2a1530!important}
.sug small,.sug .al{color:#75647a!important}
.sug:hover,.sug.act{background:#f6dfa4!important}

/* paneles claros (modales): texto oscuro */
.panel,.panel .kpi,.panel .med,.overlay .panel{color:#2a1530}
.panel .kpi b,.panel .med b{color:#2a1530}

/* crea tu hermandad: columnas claras con texto oscuro */
.mesa,.libro,.lastline,.pap,.card,.bld,.panel{color:#2a1530}
.lastline b{color:inherit}.lastline b.good{color:#1f7a4a}.lastline b.bad{color:#a3202f}