/* =====================================================================
   MHUR Summon Simulator — MHA-themed flashy redesign
   Drop into /css/simulator.css  (loaded after style.css)
   Palette: hero red, All-Might gold, deep night navy, comic ink.
   ===================================================================== */

:root {
    --mha-red:    #e8362b;
    --mha-red-dk: #a3160f;
    --mha-gold:   #ffd23f;
    --mha-gold-dk:#f5a623;
    --mha-blue:   #2e6bff;
    --mha-ink:    #0c0d12;
    --mha-night:  #14151d;
    --mha-panel:  #1b1d27;
    --mha-line:   rgba(255, 255, 255, .08);
    --ssr:        #ffd23f;
    --sr:         #b06bff;
    --r:          #3fa9ff;
}

/* page backdrop with a subtle comic halftone + ink gradient */
body.bg {
    background:
        radial-gradient(circle at 20% -10%, rgba(232, 54, 43, .18), transparent 45%),
        radial-gradient(circle at 90% 0%, rgba(46, 107, 255, .14), transparent 40%),
        var(--mha-ink);
}

#content-container {
    max-width: 1000px;
    position: relative;
}

/* ============================ HERO ============================ */
.sim-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    margin: 22px auto 26px;
    padding: 30px 18px 26px;
    background: linear-gradient(160deg, #1d1f2b 0%, #121219 70%);
    border: 2px solid var(--mha-line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.sim-hero__speedlines {
    position: absolute;
    inset: -50%;
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        rgba(255, 255, 255, .05) 0deg 1.2deg,
        transparent 1.2deg 6deg);
    animation: spin-slow 60s linear infinite;
    opacity: .5;
    pointer-events: none;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.sim-hero__inner { position: relative; z-index: 2; }

.sim-hero__eyebrow {
    font-family: 'MHURMediumFont', sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--mha-gold);
    margin: 0 0 6px;
    text-shadow: 0 0 14px rgba(255, 210, 63, .45);
}
.sim-hero__title {
    font-family: 'MHURFont', 'MHURBasicFont', sans-serif;
    font-size: clamp(28px, 6vw, 56px);
    line-height: 1.02;
    margin: 0 0 18px;
    color: #fff;
    text-transform: uppercase;
    -webkit-text-stroke: 1.5px var(--mha-red-dk);
    text-shadow:
        3px 3px 0 var(--mha-red),
        6px 6px 0 rgba(0, 0, 0, .35);
}

.sim-banner-frame {
    display: inline-block;
    border-radius: 18px;
    padding: 4px;
    background: linear-gradient(135deg, var(--mha-gold), var(--mha-red) 55%, var(--mha-blue));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    max-width: 100%;
}
.sim-banner {
    display: block;
    width: 100%;
    max-width: 850px;
    border-radius: 14px;
}

.sim-hero__dates {
    margin: 18px 0 8px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.sim-pill {
    font-family: 'MHURMediumFont', sans-serif;
    font-size: 13px;
    letter-spacing: .06em;
    padding: 6px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--mha-line);
}
.sim-hero__desc {
    font-family: 'MHURRegularFont', sans-serif;
    font-size: 15px;
    color: #c8cad6;
    max-width: 700px;
    margin: 6px auto 0;
}

/* ============================ TICKET HUD ============================ */
.ticket-hud {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 auto 22px;
    padding: 14px 22px;
    max-width: 560px;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--mha-panel), #121319);
    border: 1px solid var(--mha-line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.ticket-hud__stat { display: flex; align-items: center; gap: 12px; }
.ticket-hud__icon { width: 42px; height: auto; filter: drop-shadow(0 0 8px rgba(255, 210, 63, .4)); }
.ticket-hud__meta { display: flex; flex-direction: column; text-align: left; line-height: 1; }
.ticket-hud__label {
    font-family: 'MHURMediumFont', sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8b8fa3;
    margin-bottom: 4px;
}
.ticket-hud__value {
    font-family: 'MHURFont', 'MHURBasicFont', sans-serif;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 210, 63, .35);
}
.ticket-hud__value.pop { animation: count-pop .45s ease; }
@keyframes count-pop {
    0%   { transform: scale(1); color: var(--mha-gold); }
    40%  { transform: scale(1.35); color: var(--mha-gold); }
    100% { transform: scale(1); color: #fff; }
}
.ticket-hud__divider { width: 1px; height: 38px; background: var(--mha-line); }
.ticket-hud__reset {
    margin-left: 4px;
    font-family: 'MHURMediumFont', sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c8cad6;
    background: transparent;
    border: 1px solid var(--mha-line);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all .18s ease;
}
.ticket-hud__reset:hover { color: #fff; border-color: var(--mha-red); background: rgba(232, 54, 43, .15); }

/* ============================ SECTION TITLE ============================ */
.sim-section-title {
    font-family: 'MHURFont', 'MHURBasicFont', sans-serif;
    text-transform: uppercase;
    font-size: clamp(24px, 4vw, 38px);
    color: #fff;
    margin: 10px 0 18px;
    letter-spacing: .04em;
    text-shadow: 2px 2px 0 var(--mha-red), 4px 4px 0 rgba(0, 0, 0, .3);
}

/* results container spacing */
.abcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    max-width: calc(125px * 5 + 22px * 4);
    margin: 0 auto 8px;
    min-height: 60px;
}
.sim-empty {
    font-family: 'MHURRegularFont', sans-serif;
    color: #8b8fa3;
    font-size: 16px;
    padding: 18px 0;
}

/* result cards: reveal state driven by JS (anime.js) */
.result-card { text-decoration: none; }
.result-card .character-item {
    opacity: 0;                 /* JS animates these in */
    transform: translateY(26px) scale(.82);
    will-change: transform, opacity;
}
.result-card .card-footer.name {
    font-size: 14px;
    background-color: rgba(20, 21, 29, .82);
    text-shadow: 2px 2px 6px #000;
    color: #fff;
    border-radius: 0 0 10px 10px;
}
.gashazoom:hover { transform: scale(1.08); }

/* rarity glow on the card frame */
.result-card.lit .rarity-ssr { filter: drop-shadow(0 0 14px var(--ssr)); }
.result-card.lit .rarity-sr  { filter: drop-shadow(0 0 12px var(--sr)); }
.result-card.lit .rarity-r   { filter: drop-shadow(0 0 8px var(--r)); }

/* ============================ SUMMON BUTTON ============================ */
.summon-btn {
    position: relative;
    display: inline-block;
    border: none;
    background: transparent;
    padding: 14px;
    margin: 6px auto 40px;
    cursor: pointer;
    transition: transform .15s ease;
}
.summon-btn:hover { transform: translateY(-2px) scale(1.03); }
.summon-btn:active { transform: scale(.97); }
.summon-btn:disabled { opacity: .55; cursor: progress; transform: none; }
.summon-btn__art {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 300px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.summon-btn__glow {
    position: absolute;
    z-index: 1;
    inset: 8% 14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 63, .55), transparent 70%);
    filter: blur(14px);
    animation: btn-breathe 2.4s ease-in-out infinite;
}
@keyframes btn-breathe {
    0%, 100% { opacity: .55; transform: scale(.95); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
.summon-btn__cost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-family: 'MHURMediumFont', sans-serif;
    font-size: 16px;
    color: var(--mha-gold);
    text-shadow: 0 0 10px rgba(255, 210, 63, .5);
}
.summon-btn__cost img { width: 22px; }

/* ============================ SUMMON STAGE (overlay) ============================ */
.summon-stage {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.summon-stage.active { display: flex; }
.summon-stage__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #1a1c28 0%, #07070b 75%);
    opacity: 0;
}
.summon-stage__flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}
/* lightning bolts (SVG, drawn by JS) */
.summon-bolts {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    --bolt-color: #fff;
    color: var(--bolt-color);
}
.summon-bolts .bolt {
    fill: none;
    stroke: var(--bolt-color);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 18px currentColor);
}
.summon-bolts .bolt--core {
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px #fff);
}

/* manga page-tear: two ink halves that split along a jagged edge */
.manga-tear {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 1;
    pointer-events: none;
}
.manga-tear__half {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px),
        #07070b;
    will-change: transform;
}
.manga-tear__half--top {
    clip-path: polygon(0 0, 100% 0, 100% 40%, 88% 47%, 76% 41%, 64% 50%, 52% 43%, 40% 53%, 28% 46%, 16% 55%, 0 49%);
}
.manga-tear__half--bottom {
    clip-path: polygon(0 49%, 16% 55%, 28% 46%, 40% 53%, 52% 43%, 64% 50%, 76% 41%, 88% 47%, 100% 40%, 100% 100%, 0 100%);
    box-shadow: inset 0 2px 0 rgba(255, 210, 63, .35);
}

/* ---- PLUS ULTRA reveal group (big bolt + impact burst + text) ---- */
.reveal {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;            /* whole group fades in/out together */
    pointer-events: none;
    --bolt-color: #ffd23f;
}
/* radial sunburst behind the text — pops in, never spins (so it fades clean) */
.reveal__burst {
    position: absolute;
    width: 170vmax;
    height: 170vmax;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 210, 63, .28) 0%, transparent 38%),
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(255, 255, 255, .10) 0deg 2.2deg,
            transparent 2.2deg 8deg);
    opacity: 0;
    transform: scale(.2) rotate(-6deg);
    will-change: transform, opacity;
}
/* the big hero lightning bolt behind PLUS ULTRA */
.reveal__bolt {
    position: absolute;
    height: 116%;
    width: auto;
    opacity: 0;
    color: var(--bolt-color);
    will-change: opacity, transform;
}
.reveal__bolt-path {
    fill: none;
    stroke: var(--bolt-color);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 14px currentColor) drop-shadow(0 0 40px currentColor);
}
.reveal__bolt-path--core {
    stroke: #fff;
    stroke-width: 6;
    filter: drop-shadow(0 0 8px #fff);
}
.plus-ultra {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: .92;
    transform: rotate(-4deg);
}
.plus-ultra__line {
    display: inline-block;
    font-family: 'MHURFont', 'MHURBasicFont', sans-serif;
    font-size: clamp(46px, 15vw, 150px);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 3px var(--mha-red-dk);
    text-shadow:
        5px 5px 0 var(--mha-red),
        10px 10px 0 rgba(0, 0, 0, .35),
        0 0 38px rgba(255, 210, 63, .8);
    opacity: 0;
    will-change: transform, opacity;
}
.plus-ultra__line--2 {
    color: var(--mha-gold);
    -webkit-text-stroke: 3px var(--mha-red-dk);
    margin-top: -.06em;
}

/* shake used on big pulls */
.shake { animation: stage-shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes stage-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .sim-hero__speedlines, .summon-btn__glow { animation: none; }
}