/* Reglas: the banner art with the essentials, an index that follows you, and each rule as a card with allowed (✓),
   forbidden (✕) and informative points. */
.rules-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:12px;padding:44px 40px 34px;margin-bottom:22px;border:1px solid #4c2e20;border-radius:var(--radius);
    background:linear-gradient(90deg,#0e0c0f 0%,#0e0c0fee 42%,#0e0c0f99 70%,#0e0c0f55),var(--hero) 62% 30%/cover}
.rules-hero h1{font-size:clamp(40px,5vw,64px);line-height:1;margin:2px 0}
.rules-hero>p{max-width:560px;font-size:14px;color:#d6cfd2}
.rules-essentials{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rules-essentials li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#0f0d10cc;border:1px solid #ffffff1c;backdrop-filter:blur(6px);font-size:12.5px;font-weight:700;color:#f2ece8}
.rules-essentials b{font-size:16px}
.rules-date{color:#a9a1a8;font-size:11px;letter-spacing:.5px}
.rules-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.rules-index{position:sticky;top:20px;display:grid;gap:4px;padding:18px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.rules-index .eyebrow{margin:0 6px 8px}
.rules-index a{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:8px;font-size:12.5px;color:#c4bfcc}
.rules-index a b{font:700 13px/1 Rajdhani,Arial,sans-serif;color:#6f6a78;width:20px}
.rules-index a:hover{background:#ff782f12;color:#fff}.rules-index a:hover b{color:var(--fire)}
.rules-list{display:grid;gap:16px;min-width:0}
.rule-card{scroll-margin-top:20px;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#ff782f0a,transparent 40%),var(--panel)}
.rule-card header{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.rule-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:radial-gradient(circle at 30% 25%,#ff9a52,#c4501a);box-shadow:0 6px 18px #ff782f33}
.rule-icon svg{width:25px;height:25px;fill:none;stroke:#1b0d05;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rule-card header small{font:700 12px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:var(--fire)}
.rule-card h2{font-size:24px;margin:3px 0 4px}
.rule-card header p{font-size:13px;color:#cfc8cf}
.rule-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rule-card li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#ffffff05;font-size:13px;line-height:1.55;color:#ddd7de}
.rule-card li i{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;font:700 11px/1 Noto,Arial,sans-serif;font-style:normal;background:#2a2730;color:#a7a2b0}
.rule-card li.is-ok i{background:#1f3a2d;color:var(--green)}
.rule-card li.is-no{background:#ff4d4d0a}.rule-card li.is-no i{background:#4a1f22;color:#ff7a7a}
.sanction-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sanction-steps li{display:grid;gap:4px;padding:14px;border-radius:12px;border:1px solid var(--line);background:#141317}
.sanction-steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2a2730;color:#fff;font:700 13px/1 Rajdhani,Arial,sans-serif}
.sanction-steps li:nth-child(2) b{background:#7a4a1c}.sanction-steps li:nth-child(3) b{background:#7a2226}
.sanction-steps strong{font-size:14px;color:#fff}.sanction-steps span{font-size:12px;color:var(--muted)}
.rule-note{margin-top:12px;font-size:12.5px;color:#cfc8cf}
.rules-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:20px 24px;border:1px solid #6c432e;border-radius:16px;background:linear-gradient(120deg,#ff782f1c,transparent 60%),#17141a}
.rules-cta div{flex:1;min-width:200px;display:grid;gap:2px}.rules-cta strong{font-size:16px;color:#fff}.rules-cta span{font-size:12.5px;color:var(--muted)}
@media(max-width:1000px){.rules-layout{grid-template-columns:1fr}.rules-index{position:static;display:flex;flex-wrap:wrap;gap:6px}.rules-index .eyebrow{width:100%}.rules-index a{padding:6px 10px;border:1px solid var(--line);border-radius:999px}}
@media(max-width:600px){.rules-hero{padding:26px 18px 22px;background-position:70% 30%}.rules-hero>p{font-size:13px}.rules-essentials li{padding:6px 11px;font-size:11.5px}
    .rule-card{padding:18px 16px}.rule-card header{gap:12px}.rule-icon{width:40px;height:40px}.rule-card h2{font-size:21px}.rule-card li{font-size:12.5px;padding:9px 10px}
    .sanction-steps{grid-template-columns:1fr}.rules-index a{font-size:11.5px}}

/* Cómo jugar: the same cards, with tiles for where to spend Ignis and where to play, and the bot's commands. */
.guide-ignis{display:flex;align-items:center;gap:20px}
.guide-ignis img{flex:none;width:96px;height:96px;filter:drop-shadow(0 8px 22px #ff782f55)}
.guide-earn{flex:1}
.guide-earn li b{flex:none;font-size:18px;line-height:1.3}
.guide-earn li strong{display:block;color:#fff;font-size:13.5px;margin-bottom:1px}
.guide-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.guide-tile{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #2a2730;border-radius:13px;background:#ffffff05;transition:border-color .15s,background .15s}
.guide-tile:hover{border-color:#6c432e;background:#ff782f0a}
.guide-tile-emoji{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ff782f17;font-size:19px}
.guide-tile strong{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14.5px;color:#fff}
.guide-tile strong em{padding:2px 7px;border-radius:999px;border:1px solid #4a3a52;background:#9d84c91a;color:#cdbaff;font:700 9.5px/1.4 Noto,Arial,sans-serif;font-style:normal;letter-spacing:.6px;text-transform:uppercase}
.guide-tile p{flex:1;margin:0;font-size:12.5px;line-height:1.5;color:#cfc8cf}
.guide-link{align-self:flex-start;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--fire)}
.guide-link:hover{color:var(--gold)}
.guide-tile.is-soon{opacity:.62}.guide-tile.is-soon:hover{border-color:#2a2730;background:#ffffff05}
.guide-more{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding:12px 14px;border:1px dashed #5b3e2c;border-radius:12px;background:#ff782f0a;font-size:13px;color:#e6dfe3}
.guide-more span{flex:1;min-width:200px}.guide-more b{font-size:18px}
.guide-commands{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.guide-commands li{align-items:center}
.guide-commands code{flex:none;padding:3px 8px;border-radius:6px;background:#ff782f1a;color:#ffb27a;font:600 12.5px/1.4 ui-monospace,Consolas,monospace}
#canjear .guide-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1250px){#canjear .guide-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.guide-ignis{flex-direction:column;align-items:stretch}.guide-ignis img{align-self:center;width:72px;height:72px}
    .guide-tiles,#canjear .guide-tiles{grid-template-columns:1fr;gap:8px}
    .guide-tile{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:3px;padding:12px}
    .guide-tile-emoji{grid-row:span 3;align-self:start}.guide-tile>:not(.guide-tile-emoji){grid-column:2}}

/* Configuración de salas: the rules cards, each mode split in groups (weapons, characters, rules…). */
.room-modes a{display:flex;align-items:center;gap:8px;color:inherit}
.room-icon{font-size:22px;line-height:1}
.room-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
.room-group{padding:14px;border:1px solid #2a2730;border-radius:12px;background:#ffffff04}
.room-group h3{margin:0 0 10px;font:700 12px/1 Rajdhani,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--fire)}
.room-group ul{gap:6px}
.room-group li{padding:8px 10px;font-size:12.5px}
@media(max-width:1000px){.room-layout .rules-index{display:none}}   /* the hero already lists the modes */