/* guide-hub.css - the Guides page and the Hero Rarity guide (engine/build_guide_pages.py, owner 2026-11-14).
 * Banner with a floating hero row, guide tiles, the rarity power ladder and rarity table. */
/* banner */
.xb{position:relative;overflow:hidden;border-radius:16px;margin:6px 0 16px;min-height:210px;display:flex;align-items:flex-end;
  background:#0b0f19 center/cover no-repeat;box-shadow:0 0 0 2px #6b4a1e,0 0 0 4px #21170b,0 14px 40px rgba(0,0,0,.55)}
.xb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,18,.05) 20%,rgba(7,11,18,.92) 92%)}
.xb::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 70% 30%,rgba(255,210,120,.28),transparent 45%);
  animation:xglow 6s ease-in-out infinite alternate}
.xb .in{position:relative;z-index:2;padding:18px 20px;text-align:left}
.xb h1{margin:0 0 6px;font-size:clamp(26px,5vw,42px);color:#ffd77a;text-shadow:0 2px 0 #3a2208,0 0 18px rgba(255,190,80,.45)}
.xb p{margin:0;color:#f1e3c4;max-width:640px}
.xb .src{margin-top:6px;color:#b9a787;font-size:12px}
@keyframes xglow{from{transform:translate(-4%,2%)}to{transform:translate(4%,-2%)}}
@keyframes xbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* guide tiles */
.gl{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gl a{position:relative;display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;padding:12px 12px 12px 10px;
  border-radius:12px;background:linear-gradient(160deg,rgba(255,244,214,.55),rgba(214,178,118,.35));
  box-shadow:inset 0 0 0 1px rgba(110,70,25,.45),0 3px 8px rgba(60,35,10,.25);overflow:hidden;transition:transform .18s,box-shadow .18s}
.gl a::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .5s}
.gl a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(150,95,30,.8),0 8px 18px rgba(60,35,10,.4)}
.gl a:hover::after{left:130%}
.gl .med{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff3cf,#c9923f 60%,#6d4214);box-shadow:0 0 0 2px #5a3510,0 0 12px rgba(255,190,90,.55)}
.gl .med img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.gl b{display:block;margin-bottom:3px;font-size:15px;color:#4a2a0a}
.gl span{font-size:13px;line-height:1.4}
.rib{position:absolute;top:8px;right:-30px;transform:rotate(35deg);background:#b3261e;color:#fff;font:800 10px/1 system-ui;
  letter-spacing:.06em;padding:4px 32px;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.rib.go{background:#2f7d32}
/* rarity ladder */
.lad{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;align-items:end;min-height:230px;padding:10px 6px 0;margin:4px 0 6px;
  border-radius:12px;background:linear-gradient(180deg,rgba(40,24,8,.08),rgba(40,24,8,.22))}
.lad .s{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.lad .bar{width:72%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));
  box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.5);transform-origin:bottom;
  animation:grow .9s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*70ms)}
.lad .f{font:800 12px system-ui;color:#4a2a0a;margin-bottom:3px}
.lad .gem{width:22px;height:22px;margin-top:6px;transform:rotate(45deg);border-radius:4px;background:var(--c);
  box-shadow:0 0 0 2px rgba(60,35,10,.6),0 0 10px var(--c)}
.lad .n{margin:8px 0 6px;font:700 10.5px/1.1 system-ui;color:#4a2a0a;text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);height:62px}
.lad .s.gal .bar{background:linear-gradient(180deg,#ddfe21,#f5a3ff,#7de7ff,#ddfe21);background-size:100% 300%;animation:grow .9s both,gal 4s linear infinite}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gal{to{background-position:0 300%}}
/* rarity table */
.rt td:first-child{border-left:5px solid var(--c)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 4px;border-radius:999px;font-weight:800;color:#2b1806;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff),var(--c));box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 8px color-mix(in srgb,var(--c) 60%,transparent)}
.chip i{width:12px;height:12px;transform:rotate(45deg);background:#fff;opacity:.75;border-radius:2px}
.pips{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}
.pips u{width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.fx{display:inline-block;min-width:38px;padding:1px 6px;border-radius:6px;background:#3b2611;color:#ffd77a;font-weight:800;text-align:center}
.pt{display:flex;gap:6px;flex-wrap:nowrap}
.pt a{display:block;width:44px;height:44px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px var(--c),0 0 8px color-mix(in srgb,var(--c) 70%,transparent);
  transition:transform .15s}
.pt a:hover{transform:scale(1.12)}
.pt img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));list-style:none;padding:0}
.facts li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:rgba(255,244,214,.45);
  box-shadow:inset 0 0 0 1px rgba(110,70,25,.35)}
.facts img{width:38px;height:38px;object-fit:contain;flex:none}
.stars{font-size:30px;letter-spacing:2px}
.stars .g{color:#f5c542;text-shadow:0 0 6px #f5c542}.stars .b{color:#5ab4ff;text-shadow:0 0 6px #5ab4ff}.stars .r{color:#ff4b4b;text-shadow:0 0 6px #ff4b4b}
@media (max-width:640px){.pt a{width:34px;height:34px}.pt{gap:4px}.lad{min-height:200px;gap:3px}.lad .n{height:52px;font-size:9.5px}.lad .f{font-size:10px}}
@media (prefers-reduced-motion:reduce){.xb::after,.lad .bar,.lad .s.gal .bar{animation:none}.gl a,.gl a::after{transition:none}}
.xb.party{background:radial-gradient(ellipse at 75% 40%,rgba(255,196,96,.30),transparent 55%),linear-gradient(135deg,#2a1a0b,#0d1220 70%)}
.party .row{position:absolute;right:18px;bottom:16px;z-index:1;display:flex;align-items:flex-end}
.party .row img{width:74px;height:74px;border-radius:14px;margin-left:-14px;object-fit:cover;box-shadow:0 0 0 3px #c9923f,0 8px 18px rgba(0,0,0,.6);
  animation:xbob 4s ease-in-out infinite;animation-delay:calc(var(--i)*-0.7s)}
.party .row img.lead{width:108px;height:108px;z-index:2;box-shadow:0 0 0 3px #ffd77a,0 0 22px rgba(255,200,90,.7),0 10px 22px rgba(0,0,0,.6)}
@media (min-width:641px){.party .in{padding-right:380px}}
@media (max-width:640px){.xb.party{min-height:250px;align-items:flex-end}.party .row{right:50%;transform:translateX(50%);top:14px;bottom:auto}
  .party .row img{width:58px;height:58px;margin-left:-10px}.party .row img.lead{width:84px;height:84px}.party .in{padding-top:120px}}
@media (prefers-reduced-motion:reduce){.party .row img{animation:none}}