/* Boss Raid */
.raid{padding:44px 0 30px;background:radial-gradient(900px 400px at 50% 0%,rgba(255,59,88,.12),transparent 60%)}
.raid-top{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:22px}
.raid-title{font-size:clamp(3rem,7vw,6rem);line-height:.85;letter-spacing:-.08em;margin:16px 0 0;text-transform:uppercase;font-weight:900}
.raid-title em{color:var(--red);text-shadow:0 0 40px rgba(255,59,88,.35)}
.raid-sub{max-width:520px;color:var(--muted);margin:0;font-size:1.02rem}
.hud{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:center;border:1px solid rgba(255,59,88,.35);border-radius:16px 16px 0 0;padding:14px 18px;background:linear-gradient(180deg,#140a10,#0a0710)}
.hud-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.hud-name b{font-weight:900;letter-spacing:.02em;font-size:1.1rem;color:#ffd1d8}
.hud-name span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:#ff8597;text-transform:uppercase}
.hud-name i{font-style:normal;color:#fff}
.hp{position:relative;height:22px;border-radius:6px;background:#2a0b12;border:1px solid rgba(255,59,88,.5);overflow:hidden}
.hp i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#ff3b58,#ff7a8c);box-shadow:0 0 18px rgba(255,59,88,.6);transition:width 2s var(--ease)}
.hp span{position:relative;display:block;text-align:center;font-family:var(--mono);font-size:.7rem;font-weight:700;line-height:22px;color:#fff;letter-spacing:.06em;text-shadow:0 1px 2px #000}
.hud-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hud-stats div{text-align:center;border:1px solid rgba(255,59,88,.2);border-radius:10px;padding:6px}
.hud-stats b{display:block;font-weight:900;font-size:1.3rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hud-stats span{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.stage{position:relative;border:1px solid rgba(255,59,88,.35);border-top:0;border-radius:0 0 16px 16px;overflow:hidden;background:#04070e}
.stage canvas{display:block;width:100%;aspect-ratio:16/9;touch-action:manipulation}
.preview-flag{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#ffd38c;background:rgba(20,12,4,.85);border:1px solid rgba(255,184,77,.45);padding:6px 10px;border-radius:6px}
.boss-quote{position:absolute;left:61%;top:9%;max-width:260px;background:#fbfaf6;color:#15181d;font-weight:800;font-size:.92rem;line-height:1.3;padding:12px 14px;border-radius:14px 14px 14px 2px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(6px);transition:.35s var(--ease);pointer-events:none}
.boss-quote.on{opacity:1;transform:none}
.tip{position:absolute;left:0;top:0;z-index:5;width:250px;background:rgba(6,10,20,.96);border:1px solid var(--line2);border-radius:14px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);pointer-events:none;backdrop-filter:blur(8px)}
.tip-h{display:flex;gap:10px;align-items:center}
.tip-h img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.tip-h b{display:block;font-size:.98rem;letter-spacing:-.02em}
.tip-h small{font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.tip-lv{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--cyan);margin:10px 0 8px;display:flex;justify-content:space-between;align-items:center}
.tip-g{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 10px;font-size:.82rem}
.tip-g span{color:var(--muted);font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;align-self:center}
.tip-g b{font-weight:800;text-align:right}
.tip-next{margin-top:10px;font-family:var(--mono);font-size:.64rem;color:var(--amber)}
.stage-note{font-family:var(--mono);font-size:.7rem;color:var(--dim);margin:12px 0 0;text-align:center}
.ladder-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.cls{border:1px solid var(--line);border-radius:18px;padding:12px 12px 16px;background:linear-gradient(180deg,rgba(15,28,50,.9),rgba(6,13,27,.9));text-align:center}
.cls canvas{width:100%;height:auto;display:block}
.cls-lv{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--cyan)}
.cls h4{margin:4px 0 6px;font-size:1rem;letter-spacing:-.02em}
.cls p{color:var(--muted);font-size:.78rem;margin:0 0 8px;min-height:3.2em}
.cls span{font-family:var(--mono);font-size:.62rem;color:var(--amber)}
.cls:last-child{border-color:rgba(212,175,55,.5)}
@media (max-width:1100px){.ladder-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){
  .hud{grid-template-columns:1fr}
  .stage canvas{aspect-ratio:auto;height:560px}
  .boss-quote{left:50%;top:auto;bottom:62%;transform:translate(-50%,6px);max-width:78%;font-size:.8rem}
  .boss-quote.on{transform:translate(-50%,0)}
  .ladder-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){.boss-quote{left:auto;right:10px;top:16%;bottom:auto;transform:translateY(6px);max-width:46%}.boss-quote.on{transform:none}.preview-flag{font-size:.52rem;right:12px}}
.stage canvas{aspect-ratio:auto;height:min(661px,56vw,calc(100svh - 150px));min-height:420px}
@media (max-width:760px){.stage canvas{height:560px;min-height:0}}

/* Fine Flip ladder strip */
.ladder-strip{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:thin}
.lad{position:relative;flex:0 0 112px;display:flex;flex-direction:column;gap:2px;padding:10px 10px 12px;border-radius:10px;text-decoration:none;background:linear-gradient(160deg,#3a240f,#1b1108);border:1px solid #6b4422;overflow:hidden;transition:transform .2s}
.lad:hover{transform:translateY(-3px)}
.lad b{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:#e8ad66}
.lad span{font-weight:800;font-size:.84rem;color:#f6e3c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lad i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:#d9a56b}
.lad em{position:absolute;left:0;bottom:0;height:3px;background:#6ee7b7}
.lad.now{border-color:#ff3b58;box-shadow:0 0 0 1px #ff3b58,0 0 20px rgba(255,59,88,.3)}
.lad.down{filter:grayscale(.7);opacity:.75}
.lad.down::after{content:"FLIPPED";position:absolute;right:-4px;top:8px;transform:rotate(14deg);font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.12em;color:#6ee7b7;border:1.5px solid #6ee7b7;padding:1px 4px;border-radius:3px}
.lad.locked{opacity:.55}
.hud-name i{font-style:normal}

.lad{font-family:var(--sans);cursor:pointer;text-align:left;color:inherit}
.lad.evil{border-color:#b04a2a}
.lad-tier{flex:0 0 auto;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:#d9a56b;text-transform:uppercase;padding:0 2px}
.dossier{margin-top:14px;border:1px solid rgba(232,173,102,.35);border-radius:16px;padding:20px 22px;background:linear-gradient(160deg,rgba(58,36,15,.55),rgba(10,7,4,.8))}
.dz-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.dossier h3{font-size:1.6rem;letter-spacing:-.04em;margin:6px 0 4px}
.dossier h3 small{font-family:var(--mono);font-size:.8rem;color:#e8ad66;letter-spacing:.06em}
.dossier p{color:var(--muted);margin:0}
.dz-stats{display:flex;gap:10px}
.dz-stats div{border:1px solid rgba(232,173,102,.3);border-radius:12px;padding:10px 14px;text-align:center;min-width:130px}
.dz-stats b{display:block;font-size:1.4rem;font-weight:900;letter-spacing:-.04em;color:#f6e3c6}
.dz-stats span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.dz-rec{margin-top:16px;display:grid;gap:6px}
.dz-rec a{text-decoration:none;font-size:.92rem;border-top:1px solid rgba(232,173,102,.18);padding-top:7px}
.dz-rec a b{font-family:var(--mono);color:#e8ad66;margin-right:6px}
.dz-rec a span{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-left:6px}
.dz-none{margin-top:14px!important;font-family:var(--mono);font-size:.74rem}
.flip-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 34px;border-radius:18px;background:rgba(4,10,8,.92);border:2px solid var(--green);box-shadow:0 0 80px rgba(110,231,183,.35);transition:.5s cubic-bezier(.2,1.4,.4,1);z-index:6;text-align:center}
.flip-banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.flip-banner b{font-size:2.2rem;letter-spacing:-.05em}
.flip-banner small{font-family:var(--mono);color:var(--muted)}
@media (max-width:760px){.dz-head{grid-template-columns:1fr}.dz-stats div{flex:1;min-width:0}}
.preview-flag.as-link{cursor:pointer;pointer-events:auto}
.preview-flag.as-link:hover{background:rgba(40,24,6,.95)}