:root {
    color-scheme: dark;
    --gp-bg: #071018;
    --gp-surface: rgba(13, 27, 38, 0.88);
    --gp-surface-strong: #102330;
    --gp-line: rgba(159, 209, 220, 0.18);
    --gp-text: #eef9f7;
    --gp-muted: #9eb5ba;
    --gp-mint: #83efd0;
    --gp-gold: #ffc96b;
    --gp-coral: #ff756f;
    --gp-blue: #73a8ff;
    font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

:root[data-theme="light"],
:root:not([data-theme]):not(.system-dark) {
    color-scheme: light;
    --gp-bg: #edf3f2;
    --gp-surface: rgba(255, 255, 255, .9);
    --gp-surface-strong: #ffffff;
    --gp-line: rgba(20, 66, 71, .17);
    --gp-text: #10272b;
    --gp-muted: #5f777b;
    --gp-mint: #137f75;
    --gp-gold: #9b691b;
}

:root[data-theme="dark"],
:root.system-dark {
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    color: var(--gp-text);
    background:
        radial-gradient(circle at 15% 10%, rgba(41, 106, 118, 0.28), transparent 34rem),
        radial-gradient(circle at 90% 30%, rgba(111, 61, 109, 0.22), transparent 30rem),
        var(--gp-bg);
    transition: color .2s ease, background-color .2s ease;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.gp-main {
    min-height: calc(100vh - 136px);
    padding: 112px clamp(18px, 4vw, 64px) 56px;
}

.gp-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px clamp(18px, 4vw, 64px);
    border-top: 1px solid var(--gp-line);
    color: var(--gp-muted);
    font-size: .82rem;
}

.gp-kicker {
    display: inline-block;
    color: var(--gp-mint);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.gp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.gp-button-primary {
    color: #06231c;
    background: linear-gradient(135deg, var(--gp-mint), #55cdb3);
    box-shadow: 0 14px 32px rgba(75, 213, 177, .2);
}

.gp-button-secondary {
    border: 1px solid var(--gp-line);
    color: var(--gp-text);
    background: rgba(13, 27, 38, .72);
}

.gp-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gp-hero {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: clamp(36px, 7vw, 96px);
}

.gp-hero-copy h1 {
    margin: 16px 0 22px;
    font-size: clamp(2.7rem, 6vw, 5.7rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.gp-hero-copy p {
    max-width: 610px;
    margin: 0 0 30px;
    color: var(--gp-muted);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.8;
}

.gp-hero-art {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border: 1px solid var(--gp-line);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(41, 76, 102, .36), rgba(6, 16, 24, .9)),
        radial-gradient(circle at 70% 15%, #5c4e79, transparent 30%);
    box-shadow: 0 38px 90px rgba(0, 0, 0, .38);
}

.gp-moon {
    position: absolute;
    width: 145px;
    height: 145px;
    top: 54px;
    right: 58px;
    border-radius: 50%;
    background: #fff1c8;
    box-shadow: 0 0 70px rgba(255, 231, 171, .35);
}

.gp-ridge {
    position: absolute;
    left: -12%;
    width: 124%;
    transform: rotate(-4deg);
    border-radius: 50% 50% 0 0;
}

.gp-ridge-back { height: 230px; bottom: 90px; background: #193545; }
.gp-ridge-front { height: 210px; bottom: -54px; background: #0a1c27; transform: rotate(4deg); }

.gp-party {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 110px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
}

.gp-party-member {
    display: grid;
    place-items: center;
    width: 92px;
    height: 126px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 44px 44px 24px 24px;
    color: rgba(255,255,255,.82);
    font-family: Georgia, serif;
    font-size: 1.7rem;
    box-shadow: 0 24px 50px rgba(0,0,0,.32);
}

.gp-party-warrior { height: 156px; background: linear-gradient(160deg, #b65c62, #4b2634); }
.gp-party-mage { background: linear-gradient(160deg, #5577bd, #242b55); }
.gp-party-healer { height: 138px; background: linear-gradient(160deg, #4e9d86, #1b4d49); }

.gp-stage-chip {
    position: absolute;
    left: 28px;
    bottom: 26px;
    padding: 10px 14px;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    color: var(--gp-muted);
    background: rgba(5, 14, 21, .72);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.gp-feature-grid {
    width: min(1180px, 100%);
    margin: 54px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.gp-feature-grid article {
    padding: 26px;
    border: 1px solid var(--gp-line);
    border-radius: 22px;
    background: rgba(10, 25, 35, .62);
}

.gp-feature-grid article > span { color: var(--gp-gold); font-weight: 900; }
.gp-feature-grid h2 { margin: 32px 0 10px; font-size: 1.12rem; }
.gp-feature-grid p { margin: 0; color: var(--gp-muted); line-height: 1.65; }

.gp-library {
    width: min(1180px, 100%);
    margin: 88px auto 0;
    scroll-margin-top: 96px;
}

.gp-library-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.gp-library-heading h2 {
    margin: 10px 0 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -.045em;
}

.gp-library-heading p {
    max-width: 440px;
    margin: 0;
    color: var(--gp-muted);
    line-height: 1.7;
}

.gp-game-catalog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.gp-game-card {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--gp-line);
    border-radius: 28px;
    color: inherit;
    background: rgba(10, 25, 35, .7);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}

a.gp-game-card:hover,
a.gp-game-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(131, 239, 208, .52);
}

.gp-game-card-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    background: radial-gradient(circle at 50% 35%, #9b4352, #2a1930 66%);
}

.gp-game-card-art span {
    display: grid;
    place-items: center;
    width: 118px;
    height: 142px;
    border: 2px solid rgba(255, 117, 111, .48);
    border-radius: 55% 55% 42% 42%;
    color: #ffd0cd;
    font-family: Georgia, serif;
    font-size: 2.7rem;
    box-shadow: 0 24px 55px rgba(202, 61, 78, .25);
}

.gp-game-card-art small {
    position: absolute;
    bottom: 20px;
    color: rgba(255,255,255,.68);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.gp-game-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 4vw, 38px);
}

.gp-game-card-copy h3 {
    margin: 14px 0 12px;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -.035em;
}

.gp-game-card-copy p {
    margin: 0;
    color: var(--gp-muted);
    line-height: 1.7;
}

.gp-live-badge,
.gp-soon-badge {
    color: var(--gp-mint);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.gp-soon-badge { color: var(--gp-gold); }

.gp-game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 24px;
}

.gp-game-tags span {
    padding: 7px 10px;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    color: var(--gp-muted);
    font-size: .7rem;
}

.gp-coming-card {
    grid-template-columns: .55fr 1.45fr;
    border-style: dashed;
    background: rgba(10, 25, 35, .35);
}

.gp-coming-mark {
    display: grid;
    place-items: center;
    color: rgba(158, 181, 186, .45);
    font-size: 5rem;
}

/* Multi-game CodeMaru library. Cards are data-driven in Home.razor. */
.gp-catalog-home {
    width: min(1320px, 100%);
    margin: 0 auto;
    overflow: hidden;
}

.gp-catalog-hero {
    position: relative;
    min-height: 580px;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
    align-items: center;
    gap: clamp(32px, 6vw, 84px);
    isolation: isolate;
}

.gp-catalog-hero::before {
    position: absolute;
    z-index: -2;
    inset: 7% -12% 0;
    content: "";
    background:
        radial-gradient(circle at 78% 32%, rgba(44, 178, 160, .18), transparent 30%),
        radial-gradient(circle at 25% 48%, rgba(228, 172, 71, .1), transparent 32%);
    pointer-events: none;
}

.gp-catalog-orbit {
    position: absolute;
    z-index: -1;
    top: 2%;
    right: -12%;
    width: min(58vw, 720px);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--gp-mint) 16%, transparent);
    border-radius: 50%;
    opacity: .8;
    animation: gp-orbit 30s linear infinite;
}

.gp-catalog-orbit::before, .gp-catalog-orbit::after, .gp-catalog-orbit i {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--gp-gold) 18%, transparent);
    border-radius: 50%;
    content: "";
}

.gp-catalog-orbit::before { inset: 13%; }
.gp-catalog-orbit::after { inset: 31%; }
.gp-catalog-orbit i:nth-child(1) { top: 8%; left: 45%; width: 12px; height: 12px; border: 0; background: var(--gp-mint); box-shadow: 0 0 20px color-mix(in srgb, var(--gp-mint) 75%, transparent); }
.gp-catalog-orbit i:nth-child(2) { right: 14%; bottom: 22%; width: 7px; height: 7px; border: 0; background: var(--gp-gold); }
.gp-catalog-orbit i:nth-child(3) { inset: 22%; border-style: dashed; }
@keyframes gp-orbit { to { transform: rotate(360deg); } }

.gp-catalog-hero-copy { position: relative; z-index: 2; }
.gp-catalog-hero-copy h1 {
    max-width: 680px;
    margin: 14px 0 22px;
    color: var(--gp-text);
    font-family: "Noto Serif KR", Georgia, serif;
    font-size: clamp(3.2rem, 6.2vw, 6.2rem);
    line-height: 1.03;
    letter-spacing: -.065em;
}
.gp-catalog-hero-copy h1:focus { outline: none; }
.gp-catalog-hero-copy > p { max-width: 610px; margin: 0; color: var(--gp-muted); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.8; }

.gp-catalog-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    min-width: 210px;
    min-height: 54px;
    margin-top: 30px;
    padding: 0 20px 0 24px;
    border: 1px solid color-mix(in srgb, var(--gp-mint) 45%, transparent);
    border-radius: 5px;
    color: #effffb;
    background: linear-gradient(135deg, #187f74, #115750);
    box-shadow: 0 14px 35px rgba(9, 71, 66, .2);
    font-weight: 900;
    text-decoration: none;
}
.gp-catalog-button b { color: #ffe29a; font-size: 1.1rem; }

.gp-catalog-featured {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gp-line) 78%, var(--gp-gold));
    border-radius: 30px 4px 30px 4px;
    background: #061218;
    box-shadow: 0 34px 80px rgba(0, 0, 0, .3);
    transform: perspective(1000px) rotateY(-3deg);
}
.gp-catalog-featured::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(3, 12, 17, .97), transparent 58%); }
.gp-catalog-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.gp-catalog-featured div { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: grid; gap: 5px; padding: 28px; }
.gp-catalog-featured span, .gp-catalog-featured small { color: #6fe1ce; font-size: .62rem; font-weight: 900; letter-spacing: .16em; }
.gp-catalog-featured strong { color: #fff0c4; font-family: "Noto Serif KR", Georgia, serif; font-size: 2rem; }
.gp-catalog-featured small { color: #afbfbe; }

.gp-catalog-library { padding: clamp(70px, 9vw, 120px) 0 50px; scroll-margin-top: 90px; }
.gp-catalog-heading { display: grid; grid-template-columns: 1fr minmax(300px, .56fr); align-items: end; gap: 50px; margin-bottom: 34px; }
.gp-catalog-heading h2 { margin: 8px 0 0; color: var(--gp-text); font-family: "Noto Serif KR", Georgia, serif; font-size: clamp(2.4rem, 4.6vw, 4.3rem); letter-spacing: -.055em; }
.gp-catalog-heading p { margin: 0; color: var(--gp-muted); line-height: 1.75; }

.gp-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gp-catalog-game {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--gp-line);
    border-radius: 4px 22px 4px 22px;
    color: inherit;
    background: var(--gp-surface);
    text-decoration: none;
}
.gp-catalog-game:first-child { grid-column: span 2; }
.gp-catalog-game > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 67% center; transition: transform .55s ease, filter .55s ease; }
.gp-catalog-game-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 12, 17, .98), rgba(3, 12, 17, .06) 72%), linear-gradient(90deg, rgba(3, 12, 17, .5), transparent); }
.gp-catalog-game-top { position: absolute; z-index: 1; top: 18px; right: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #dbe9e6; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.gp-catalog-game-top span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(101, 232, 208, .36); border-radius: 999px; background: rgba(4, 28, 30, .78); }
.gp-catalog-game-top i { width: 6px; height: 6px; border-radius: 50%; background: #67ecd3; box-shadow: 0 0 10px #67ecd3; }
.gp-catalog-game-copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 26px; }
.gp-catalog-game-copy small { color: #68dfcd; font-size: .61rem; font-weight: 900; letter-spacing: .14em; }
.gp-catalog-game-copy h3 { margin: 8px 0; color: #fff0c5; font-family: "Noto Serif KR", Georgia, serif; font-size: clamp(1.5rem, 2.7vw, 2.55rem); letter-spacing: -.045em; }
.gp-catalog-game-copy p { max-width: 580px; margin: 0; color: #afc0c0; font-size: .84rem; line-height: 1.65; }
.gp-catalog-game-copy b { display: inline-block; margin-top: 20px; color: #f2c863; font-size: .78rem; }
.gp-catalog-game.is-live:hover img { transform: scale(1.04); filter: saturate(1.1) brightness(1.06); }

.gp-catalog-game.is-coming { background: linear-gradient(145deg, color-mix(in srgb, var(--gp-surface-strong) 90%, transparent), color-mix(in srgb, var(--gp-mint) 8%, var(--gp-surface))); }
.gp-catalog-game.is-coming .gp-catalog-game-copy h3 { color: var(--gp-text); font-size: 1.45rem; }
.gp-catalog-game.is-coming .gp-catalog-game-copy p { color: var(--gp-muted); }
.gp-catalog-coming-mark { position: absolute; inset: 18px 18px 142px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--gp-line); border-radius: 50%; }
.gp-catalog-coming-mark::before, .gp-catalog-coming-mark::after { position: absolute; width: 70%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--gp-mint), transparent); }
.gp-catalog-coming-mark::after { transform: rotate(90deg); }
.gp-catalog-coming-mark span { width: 38%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--gp-gold) 54%, transparent); transform: rotate(45deg); }
.gp-catalog-coming-mark i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gp-gold); box-shadow: 0 0 18px var(--gp-gold); }

.gp-catalog-account { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 16px; padding: 22px 24px; border: 1px solid var(--gp-line); border-radius: 4px 18px 4px 18px; background: var(--gp-surface); }
.gp-catalog-account > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid var(--gp-gold); border-radius: 50%; color: var(--gp-gold); font: 900 1.35rem Georgia, serif; }
.gp-catalog-account h3 { margin: 0 0 4px; color: var(--gp-text); font-size: 1rem; }
.gp-catalog-account p { margin: 0; color: var(--gp-muted); font-size: .8rem; }
.gp-catalog-account > b { color: var(--gp-mint); font-size: .72rem; letter-spacing: .08em; }

/* Games landing: a full game launcher instead of a generic catalog placeholder. */
.gp-main:has(.gp-home) {
    padding: 70px 0 0;
}

.gp-home {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 42%, rgba(19, 110, 108, .18), transparent 30rem),
        var(--gp-bg);
}

.gp-launch-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(700px, calc(100svh - 70px), 920px);
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid rgba(220, 176, 74, .42);
    background: #050c12;
}

.gp-launch-backdrop {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(3, 10, 14, .99) 0%, rgba(3, 10, 14, .88) 25%, rgba(3, 10, 14, .3) 55%, rgba(3, 10, 14, .08) 80%),
        linear-gradient(0deg, rgba(3, 10, 14, .88) 0%, transparent 36%, rgba(3, 10, 14, .18) 100%),
        url('/images/maru-idle/landing/maru-expedition-keyart-v1.png');
    background-position: center, center, center;
    background-size: cover;
    transform: scale(1.015);
}

.gp-launch-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 76% 52%, transparent 0 20%, rgba(4, 11, 16, .08) 46%, rgba(4, 11, 16, .44) 100%),
        linear-gradient(90deg, transparent 49.8%, rgba(240, 195, 99, .08) 50%, transparent 50.2%);
    pointer-events: none;
}

.gp-launch-copy {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: clamp(80px, 10vh, 120px) clamp(28px, 5vw, 74px) 130px;
}

.gp-launch-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(115, 229, 204, .34);
    border-radius: 999px;
    color: #a2ecdd;
    background: rgba(4, 26, 29, .76);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.gp-launch-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #67eed1;
    box-shadow: 0 0 12px #67eed1;
}

.gp-launch-kicker {
    margin: 30px 0 4px;
    color: #e5bb62;
    font-size: clamp(.7rem, 1vw, .82rem);
    font-weight: 900;
    letter-spacing: .2em;
}

.gp-launch-copy h1 {
    margin: 0;
    color: #fff3ce;
    font-family: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
    font-size: clamp(4rem, 8vw, 7.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.07em;
    text-shadow: 0 5px 28px #000, 0 0 42px rgba(255, 206, 106, .14);
}

.gp-launch-copy h1:focus { outline: none; }

.gp-launch-copy h1 span {
    color: #6ce9d2;
    background: linear-gradient(180deg, #c9fff2 4%, #70e3ca 56%, #368f85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gp-launch-tagline {
    margin: 25px 0 14px;
    color: #fff1c6;
    font-family: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: -.035em;
    text-shadow: 0 3px 16px #000;
    white-space: pre-line;
}

.gp-launch-description {
    max-width: 510px;
    margin: 0;
    color: #b6c7c7;
    font-size: clamp(.93rem, 1.3vw, 1.06rem);
    line-height: 1.85;
    text-shadow: 0 2px 10px #000;
}

.gp-launch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.gp-launch-primary,
.gp-launch-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-radius: 4px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.gp-launch-primary {
    min-width: 230px;
    justify-content: space-between;
    gap: 32px;
    padding: 0 22px 0 26px;
    border: 1px solid #f1c760;
    color: #fff5d2;
    background: linear-gradient(135deg, #9a421d, #633017 54%, #254d47);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 230, 161, .28);
}

.gp-launch-primary b { color: #74ecd6; font-size: 1.35rem; }
.gp-launch-secondary { padding: 0 25px; border: 1px solid rgba(194, 218, 216, .3); color: #d7e4e3; background: rgba(5, 17, 23, .7); }
.gp-launch-primary:hover, .gp-launch-primary:focus-visible, .gp-launch-secondary:hover, .gp-launch-secondary:focus-visible { transform: translateY(-2px); filter: brightness(1.12); }

.gp-launch-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(520px, 100%);
    margin: 34px 0 0;
    padding: 16px 0;
    border-block: 1px solid rgba(193, 218, 215, .16);
    list-style: none;
    background: linear-gradient(90deg, rgba(7, 22, 28, .76), rgba(7, 22, 28, .18));
}

.gp-launch-facts li { display: grid; gap: 4px; padding: 0 15px; border-right: 1px solid rgba(193, 218, 215, .14); }
.gp-launch-facts li:last-child { border: 0; }
.gp-launch-facts b { color: #f4cb70; font-family: Georgia, serif; font-size: 1.12rem; }
.gp-launch-facts span { color: #89a3a5; font-size: .7rem; font-weight: 700; }

.gp-launch-caption {
    position: absolute;
    right: clamp(24px, 5vw, 72px);
    bottom: 56px;
    display: grid;
    justify-items: end;
    gap: 4px;
    padding-right: 16px;
    border-right: 2px solid #d2ab54;
    text-align: right;
    text-shadow: 0 3px 14px #000;
}

.gp-launch-caption span { color: #78d9c9; font-size: .62rem; font-weight: 900; letter-spacing: .18em; }
.gp-launch-caption strong { color: #fff0c2; font-family: "Noto Serif KR", Georgia, serif; font-size: 1rem; }
.gp-launch-scroll { position: absolute; bottom: 20px; left: 50%; display: flex; align-items: center; gap: 9px; color: rgba(189, 210, 209, .48); font-size: .58rem; font-weight: 800; letter-spacing: .14em; transform: translateX(-50%); }
.gp-launch-scroll i { width: 34px; height: 1px; background: #55cfbb; }

.gp-world {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 54px);
    scroll-margin-top: 90px;
}

.gp-world-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 38px;
}

.gp-world-heading h2, .gp-home-cta h2 {
    margin: 11px 0 0;
    color: #fff1c8;
    font-family: "Noto Serif KR", Georgia, serif;
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    line-height: 1.14;
    letter-spacing: -.055em;
}

.gp-world-heading p { margin: 0; color: #91aaad; line-height: 1.8; }

.gp-world-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    grid-template-rows: repeat(3, minmax(190px, 1fr));
    gap: 14px;
}

.gp-world-main,
.gp-world-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(159, 209, 220, .2);
    background: #09161d;
}

.gp-world-main { grid-row: 1 / 4; min-height: 690px; color: inherit; text-decoration: none; }
.gp-world-main::after, .gp-world-card::after { position: absolute; z-index: 0; inset: 0; content: ""; background: linear-gradient(0deg, rgba(3, 11, 15, .98) 0%, rgba(3, 11, 15, .1) 68%); }
.gp-world-main img, .gp-world-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.gp-world-main img { position: absolute; inset: 0; }
.gp-world-main:hover img { transform: scale(1.035); filter: saturate(1.12); }

.gp-world-main-copy {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    padding: clamp(26px, 4vw, 46px);
}

.gp-world-main-copy span, .gp-world-card span { color: #6ce4d0; font-size: .67rem; font-weight: 900; letter-spacing: .17em; }
.gp-world-main-copy h3 { max-width: 590px; margin: 10px 0; color: #fff0c2; font-family: "Noto Serif KR", Georgia, serif; font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: -.05em; }
.gp-world-main-copy p { max-width: 580px; margin: 0 0 24px; color: #b8cbcb; line-height: 1.7; }
.gp-world-main-copy b { color: #f1c761; font-size: .88rem; }

.gp-world-card { min-height: 190px; }
.gp-world-card::after { background: linear-gradient(90deg, rgba(3, 11, 15, .96), rgba(3, 11, 15, .7) 58%, rgba(3, 11, 15, .18)); }
.gp-world-card img { position: absolute; inset: 0; object-position: center; opacity: .62; }
.gp-world-card div { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 24px; }
.gp-world-card h3 { margin: 7px 0 5px; color: #fff0c2; font-family: "Noto Serif KR", Georgia, serif; font-size: 1.35rem; }
.gp-world-card p { max-width: 360px; margin: 0; color: #a9bdbd; font-size: .82rem; line-height: 1.55; }

.gp-home-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: min(1132px, calc(100% - 40px));
    margin: 0 auto clamp(70px, 9vw, 120px);
    padding: clamp(32px, 5vw, 58px);
    border: 1px solid rgba(224, 181, 83, .34);
    background: linear-gradient(120deg, rgba(92, 41, 21, .54), rgba(9, 42, 43, .85)), url('/images/maru-idle/regions/amber-hour-reliquary.webp') center 62% / cover;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.gp-home-cta h2 { font-size: clamp(1.9rem, 3.5vw, 3.15rem); }
.gp-home-cta h2 { white-space: pre-line; }

:root[data-theme="light"] .gp-world-heading h2,
:root:not([data-theme]):not(.system-dark) .gp-world-heading h2 { color: #173034; }
:root[data-theme="light"] .gp-world-heading p,
:root:not([data-theme]):not(.system-dark) .gp-world-heading p { color: #5c7478; }

@media (max-width: 980px) {
    .gp-catalog-hero { grid-template-columns: 1fr; padding-top: 44px; }
    .gp-catalog-hero-copy { max-width: 760px; }
    .gp-catalog-featured { min-height: 460px; transform: none; }
    .gp-catalog-heading { grid-template-columns: 1fr; gap: 16px; }
    .gp-catalog-heading p { max-width: 680px; }
    .gp-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gp-catalog-game:first-child { grid-column: span 2; }

    .gp-launch-backdrop {
        background-image:
            linear-gradient(90deg, rgba(3, 10, 14, .97) 0%, rgba(3, 10, 14, .76) 42%, rgba(3, 10, 14, .18) 100%),
            linear-gradient(0deg, rgba(3, 10, 14, .92) 0%, transparent 48%),
            url('/images/maru-idle/landing/maru-expedition-keyart-v1.png');
        background-position: center, center, 57% center;
    }

    .gp-launch-caption { display: none; }
    .gp-world-heading { grid-template-columns: 1fr; gap: 18px; }
    .gp-world-heading p { max-width: 620px; }
    .gp-world-showcase { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(500px, auto) repeat(2, 210px); }
    .gp-world-main { grid-column: 1 / 3; grid-row: auto; min-height: 500px; }
    .gp-world-farm { grid-column: 1 / 3; }
}

@media (max-width: 640px) {
    .gp-main:has(.gp-catalog-home) { padding: 86px 14px 36px; }
    .gp-catalog-hero { min-height: 0; gap: 34px; padding-top: 22px; }
    .gp-catalog-hero-copy h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
    .gp-catalog-hero-copy > p { font-size: .9rem; }
    .gp-catalog-button { min-height: 50px; }
    .gp-catalog-featured { min-height: 360px; border-radius: 20px 4px 20px 4px; }
    .gp-catalog-featured div { padding: 22px; }
    .gp-catalog-library { padding-top: 70px; }
    .gp-catalog-grid { grid-template-columns: 1fr; }
    .gp-catalog-game:first-child { grid-column: auto; }
    .gp-catalog-game { min-height: 390px; }
    .gp-catalog-game.is-coming { min-height: 330px; }
    .gp-catalog-account { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; }
    .gp-catalog-account > span { width: 46px; height: 46px; }
    .gp-catalog-account > b { grid-column: 2; }

    .gp-main:has(.gp-home) { padding-top: 62px; }
    .gp-launch-hero { align-items: end; min-height: calc(100svh - 62px); max-height: none; }
    .gp-launch-backdrop {
        background-image:
            linear-gradient(0deg, rgba(3, 10, 14, .99) 2%, rgba(3, 10, 14, .78) 48%, rgba(3, 10, 14, .18) 100%),
            linear-gradient(90deg, rgba(3, 10, 14, .44), rgba(3, 10, 14, .04)),
            url('/images/maru-idle/landing/maru-expedition-keyart-v1.png');
        background-position: center, center, 68% top;
        background-size: cover, cover, auto 72%;
        background-repeat: no-repeat;
    }

    .gp-launch-copy { padding: 250px 20px 68px; }
    .gp-launch-status { font-size: .58rem; }
    .gp-launch-kicker { margin-top: 20px; font-size: .62rem; }
    .gp-launch-copy h1 { font-size: clamp(3.2rem, 16vw, 4.5rem); }
    .gp-launch-tagline { margin-top: 17px; font-size: 1.25rem; }
    .gp-launch-description { font-size: .87rem; line-height: 1.68; }
    .gp-launch-actions { display: grid; grid-template-columns: 1fr .55fr; margin-top: 22px; }
    .gp-launch-primary, .gp-launch-secondary { min-width: 0; min-height: 52px; font-size: .86rem; }
    .gp-launch-primary { gap: 12px; padding: 0 15px; }
    .gp-launch-facts { margin-top: 22px; padding: 12px 0; }
    .gp-launch-facts li { padding: 0 7px; }
    .gp-launch-facts b { font-size: .9rem; }
    .gp-launch-facts span { font-size: .58rem; }
    .gp-launch-scroll { display: none; }
    .gp-world { padding-block: 70px; }
    .gp-world-heading { margin-bottom: 26px; }
    .gp-world-showcase { display: flex; flex-direction: column; }
    .gp-world-main { min-height: 480px; }
    .gp-world-main img { object-position: 58% center; }
    .gp-world-main-copy p { font-size: .84rem; }
    .gp-world-card { min-height: 190px; }
    .gp-home-cta { align-items: stretch; flex-direction: column; width: calc(100% - 28px); padding: 28px 22px; }
    .gp-home-cta .gp-launch-primary { width: 100%; }
}

.gp-auth-card {
    width: min(680px, 100%);
    margin: 8vh auto;
    padding: clamp(30px, 6vw, 64px);
    border: 1px solid var(--gp-line);
    border-radius: 28px;
    background: var(--gp-surface);
    text-align: center;
}

.gp-auth-card h1 { margin: 14px 0; font-size: clamp(1.8rem, 5vw, 3rem); }
.gp-auth-card p { margin: 0 auto 28px; color: var(--gp-muted); line-height: 1.7; }

.gp-game-shell {
    width: min(760px, 100%);
    margin: 0 auto;
}

.gp-loading { min-height: 50vh; display: grid; place-content: center; text-align: center; }

.gp-game-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.gp-game-header h1 { margin: 6px 0 0; font-size: clamp(2.1rem, 8vw, 4.5rem); line-height: 1; }

.gp-resource { text-align: right; }
.gp-resource span { display: block; color: var(--gp-gold); font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.gp-resource strong { font-size: clamp(1.4rem, 5vw, 2.4rem); }

.gp-offline-reward {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 201, 107, .28);
    border-radius: 14px;
    color: #ffe8b7;
    background: rgba(116, 76, 17, .24);
}

.gp-battlefield {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--gp-line);
    border-radius: 30px;
    background: linear-gradient(180deg, #152d43 0%, #171b2e 52%, #0b1821 100%);
    box-shadow: 0 32px 72px rgba(0, 0, 0, .34);
}

.gp-battle-sky { position: absolute; inset: 0; opacity: .9; }
.gp-battle-star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff0bb; box-shadow: 0 0 16px #fff0bb; }
.star-one { top: 14%; left: 18%; }
.star-two { top: 22%; right: 21%; width: 3px; height: 3px; }
.star-three { top: 9%; left: 55%; width: 3px; height: 3px; }

.gp-enemy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 20px;
}

.gp-enemy-core {
    display: grid;
    place-items: center;
    width: 150px;
    height: 180px;
    margin-bottom: 8px;
    border: 2px solid rgba(255, 117, 111, .5);
    border-radius: 55% 55% 42% 42%;
    color: #ffd0cd;
    background: radial-gradient(circle at 50% 35%, #9b4352, #2a1930 66%);
    box-shadow: 0 26px 60px rgba(202, 61, 78, .25);
    font-family: Georgia, serif;
    font-size: 3rem;
}

.gp-enemy strong { font-size: 1.12rem; }
.gp-enemy span { color: var(--gp-muted); font-size: .82rem; }

.gp-hp-block { position: relative; z-index: 1; margin: 24px auto 18px; max-width: 560px; }
.gp-hp-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .75rem; color: var(--gp-muted); }
.gp-hp-label strong { color: var(--gp-text); }
.gp-hp-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.09); }
.gp-hp-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gp-coral), #ffac76); transition: width .12s linear; }

.gp-attack-button {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: min(330px, 100%);
    margin: 0 auto;
    padding: 18px 22px;
    border: 1px solid rgba(131, 239, 208, .42);
    border-radius: 24px;
    color: #eafff9;
    background: linear-gradient(145deg, rgba(55, 153, 135, .88), rgba(22, 75, 76, .94));
    box-shadow: 0 16px 34px rgba(37, 158, 132, .22);
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.gp-attack-button.is-attacking { transform: translateY(2px) scale(.99); filter: brightness(1.14); }
.gp-attack-icon { font-size: 1.7rem; }
.gp-attack-button strong { font-size: 1.08rem; }
.gp-attack-button small { margin-top: 4px; color: rgba(234,255,249,.72); }

.gp-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.gp-stat-grid article { padding: 18px; border: 1px solid var(--gp-line); border-radius: 18px; background: var(--gp-surface); }
.gp-stat-grid span, .gp-stat-grid small { display: block; color: var(--gp-muted); font-size: .76rem; }
.gp-stat-grid strong { display: block; margin: 8px 0 3px; font-size: 1.55rem; }

.gp-upgrade-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 201, 107, .3);
    border-radius: 18px;
    color: var(--gp-text);
    background: linear-gradient(135deg, rgba(112, 73, 24, .46), rgba(49, 39, 30, .86));
    cursor: pointer;
}

.gp-upgrade-button span { text-align: left; }
.gp-upgrade-button strong, .gp-upgrade-button small { display: block; }
.gp-upgrade-button small { margin-top: 3px; color: var(--gp-muted); }
.gp-upgrade-button em { color: var(--gp-gold); font-style: normal; font-weight: 900; }
.gp-upgrade-button:disabled { opacity: .48; cursor: not-allowed; }

@media (max-width: 800px) {
    .gp-main { padding: 90px 14px 40px; }
    .gp-hero { grid-template-columns: 1fr; }
    .gp-hero-art { min-height: 440px; }
    .gp-feature-grid { grid-template-columns: 1fr; }
    .gp-library-heading { align-items: start; flex-direction: column; }
    .gp-game-catalog { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .gp-hero-copy h1 { font-size: 2.75rem; }
    .gp-hero-art { min-height: 390px; border-radius: 24px; }
    .gp-moon { width: 105px; height: 105px; right: 28px; }
    .gp-party-member { width: 72px; height: 104px; }
    .gp-party-warrior { height: 132px; }
    .gp-party-healer { height: 116px; }
    .gp-footer { flex-direction: column; }
    .gp-game-header { align-items: center; }
    .gp-offline-reward { flex-direction: column; }
    .gp-battlefield { min-height: 500px; padding: 20px 14px; border-radius: 24px; }
    .gp-stat-grid { grid-template-columns: 1fr; }
    .gp-game-card,
    .gp-coming-card { grid-template-columns: 1fr; }
    .gp-game-card-art { min-height: 240px; }
    .gp-coming-mark { min-height: 150px; }
}

/* Spirit farm v3: plants and installed facilities live directly on the illustrated soil. */
.mi-spirit-farm { grid-template-rows:auto auto minmax(340px,1fr) minmax(0,auto) auto; }
.mi-farm-board { position:relative; padding:clamp(82px,14cqw,118px) clamp(24px,5.8cqw,46px) clamp(30px,6cqw,46px); }
.mi-farm-landmarks { position:absolute; z-index:5; inset:4px 8px auto; height:clamp(78px,15cqw,116px); pointer-events:none; }
.mi-farm-landmark { position:absolute; bottom:-5px; padding:0; border:0; color:#fff1be; background:none; filter:drop-shadow(0 8px 10px #000c); pointer-events:auto; cursor:pointer; }
.mi-farm-landmark img { display:block; width:100%; height:100%; object-fit:contain; }
.mi-farm-landmark span { position:absolute; right:4px; bottom:2px; padding:2px 6px; border:1px solid rgba(236,197,91,.55); border-radius:999px; background:rgba(4,17,18,.86); font-size:8px; font-weight:900; white-space:nowrap; }
.mi-farm-landmark.is-rack { left:0; width:clamp(68px,15cqw,108px); height:clamp(82px,17cqw,126px); }
.mi-farm-landmark.is-house { right:0; width:clamp(150px,35cqw,270px); height:clamp(76px,16cqw,124px); }

.mi-farm-plots { grid-template-rows:repeat(3,minmax(clamp(132px,23cqw,196px),1fr)); gap:clamp(4px,1.2cqw,9px); }
.mi-farm-plots article { overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
.mi-farm-plots article.is-ready { border:0; box-shadow:none; }
.mi-farm-plots article.is-ready .mi-farm-crop-field { filter:saturate(var(--bloom)) drop-shadow(0 0 10px rgba(255,221,96,.55)); }
.mi-farm-crop-field { inset:-4% -8% 19%; gap:0; filter:saturate(var(--bloom)); }
.mi-farm-crop-field img { width:31%; max-height:112%; margin-inline:-7.5%; object-fit:contain; transform-origin:50% 100%; transform:scale(var(--growth)); opacity:calc(.34 + var(--bloom) * .66); filter:drop-shadow(0 9px 6px #000a) drop-shadow(0 0 7px var(--crop)); }
.mi-farm-crop-field img:nth-child(1),.mi-farm-crop-field img:nth-child(5) { width:26%; margin:0 -6%; transform:translateY(7%) scale(var(--growth)); }
.mi-farm-crop-field img:nth-child(2),.mi-farm-crop-field img:nth-child(4) { z-index:2; width:33%; transform:translateY(4%) scale(var(--growth)); }
.mi-farm-crop-field img:nth-child(3) { z-index:3; width:38%; margin-inline:-8%; }
.mi-farm-growth-line { position:absolute; z-index:4; right:8%; bottom:19%; left:8%; height:3px; overflow:hidden; border-radius:999px; background:rgba(1,12,12,.7); box-shadow:0 1px 4px #000; }
.mi-farm-growth-line span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#60e2cf,#ffe171); box-shadow:0 0 7px #72ead5; }
.mi-farm-ground-info { position:absolute; z-index:5; bottom:2px; left:2%; display:flex; align-items:center; gap:4px; max-width:72%; padding:3px 5px; color:#e9f7ee; background:linear-gradient(90deg,rgba(2,14,15,.92),rgba(2,14,15,.45),transparent); text-shadow:0 2px 4px #000; }
.mi-farm-ground-info > span { min-width:0; display:grid; }.mi-farm-ground-info strong { overflow:hidden; color:#fff0be; font-size:clamp(9px,1.5cqw,11px); text-overflow:ellipsis; white-space:nowrap; }.mi-farm-ground-info small { color:#a9c3ba; font-size:clamp(7px,1.15cqw,9px); }
.mi-farm-ground-info i { padding:2px 4px; border-radius:999px; color:#83ead7; background:rgba(4,48,47,.78); font-size:clamp(6px,1cqw,8px); font-style:normal; white-space:nowrap; }.mi-farm-ground-info i.is-tired { color:#ffae78; background:#402116cc; }.mi-farm-ground-info i.is-helped { color:#ffe38c; background:#493d18d9; }
.mi-farm-ground-actions { position:absolute; z-index:6; right:1%; bottom:1px; display:flex; gap:3px; }
.mi-farm-ground-actions button { min-width:39px; min-height:24px; padding:2px 6px; border:1px solid rgba(103,225,204,.55); border-radius:999px; color:#aef3e6; background:rgba(5,57,54,.9); font-size:clamp(7px,1.15cqw,9px); font-weight:900; box-shadow:0 3px 7px #0009; cursor:pointer; }.mi-farm-ground-actions button.is-fertilizer { border-color:#b8d679; color:#eaffb2; background:#33431ddd; }.mi-farm-ground-actions button.is-ready { border-color:#f4ce65; color:#fff2bc; background:#7b431f; animation:mi-ready-pulse 1.2s ease-in-out infinite alternate; }.mi-farm-ground-actions button:disabled { opacity:.48; cursor:default; }
.mi-farm-empty-bed { position:absolute; inset:5% 8% 8%; display:grid; place-content:center; justify-items:center; gap:3px; padding:0; border:0; border-radius:0; color:#ccece5; background:none; text-align:center; text-shadow:0 2px 5px #000,0 0 8px #000; backdrop-filter:none; cursor:pointer; }
.mi-farm-empty-bed i { display:grid; width:38px; aspect-ratio:1; place-items:center; border:1px solid #76ead5; border-radius:50%; color:#9cffee; background:rgba(3,45,44,.72); box-shadow:0 0 14px rgba(73,228,201,.28); font-size:25px; font-style:normal; }.mi-farm-empty-bed strong { color:#fff0bf; font-size:clamp(9px,1.55cqw,11px); }.mi-farm-empty-bed small { color:#c1d5cf; font-size:clamp(7px,1.15cqw,9px); }.mi-farm-empty-bed em { padding:1px 5px; border-radius:999px; color:#ffb27c; background:#3d1c13c7; font-size:8px; font-style:normal; }.mi-farm-empty-bed:disabled { opacity:.48; cursor:default; }
.mi-farm-locked-sign { inset:auto 25% 8%; display:grid; place-content:center; justify-items:center; gap:1px; padding:5px 8px; border:1px solid #80683d; border-radius:2px; color:#ae9e79; background:linear-gradient(#44341f,#241b12); box-shadow:0 4px 8px #000a; transform:perspective(80px) rotateX(5deg); backdrop-filter:none; }.mi-farm-locked-sign i { display:none; }.mi-farm-locked-sign strong { color:#c7b994; }.mi-farm-locked-sign small { color:#8f846b; }

.mi-farm-management { max-height:clamp(242px,34cqw,330px); overflow:auto; gap:7px; padding:8px clamp(9px,2.2cqw,16px); }
.mi-farm-market-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }.mi-farm-market-head span { min-width:0; display:grid; }.mi-farm-market-head b { color:#f4cf76; font-size:10px; }.mi-farm-market-head small { color:#88a29b; font-size:8px; }.mi-farm-market-head > strong { color:#79e6d1; font-size:9px; white-space:nowrap; }
.mi-farm-seed-shop { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.mi-farm-seed-shop article { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:4px; min-height:48px; padding:4px 5px; border:1px solid color-mix(in srgb,var(--pack,#7de6d1) 42%,#284447); border-radius:8px; background:linear-gradient(120deg,color-mix(in srgb,var(--pack,#7de6d1) 8%,#081a1e),#071519); }
.mi-farm-seed-shop article > img { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 7px var(--pack)); }.mi-farm-seed-shop article > span { min-width:0; display:grid; }.mi-farm-seed-shop article strong { overflow:hidden; color:#f8e9c4; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.mi-farm-seed-shop article small { overflow:hidden; color:#8ca49e; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.mi-farm-seed-shop button { min-height:27px; padding-inline:7px; border:1px solid #63d8c3; border-radius:6px; color:#cafff5; background:#0a4b47; font-size:8px; font-weight:900; cursor:pointer; }.mi-farm-seed-shop button.is-cash { border-color:#d8ad4d; color:#ffe7a1; background:#60411b; }.mi-farm-seed-shop button:disabled { opacity:.42; cursor:default; }
.mi-farm-seed-shop article.mi-farm-fertilizer-shop { --pack:#b8df77; }.mi-fertilizer-art { display:grid; width:39px; aspect-ratio:1; place-items:center; border:1px solid #b5db77; border-radius:50% 50% 44% 44%; color:#eaffb8; background:radial-gradient(circle at 50% 35%,#6f9435,#243817 68%); box-shadow:0 0 11px #80bf4855; }.mi-fertilizer-art i { font-size:22px; font-style:normal; }
.mi-farm-facilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.mi-farm-facilities > button { min-width:0; min-height:clamp(104px,17cqw,138px); display:grid; grid-template-columns:minmax(82px,43%) minmax(0,1fr); align-items:center; gap:5px; padding:4px; overflow:hidden; border:1px solid rgba(113,215,198,.3); border-radius:9px; color:#eaf6f1; background:radial-gradient(circle at 22% 50%,rgba(56,154,133,.17),transparent 45%),#07191d; text-align:left; cursor:pointer; }.mi-farm-facilities > button.is-friend { border-color:#bea04e; }.mi-farm-facilities > button.is-preview img { opacity:.68; filter:saturate(.72); }.mi-farm-facilities > button:disabled { opacity:.6; cursor:default; }
.mi-farm-facilities img { width:100%; height:clamp(96px,16cqw,128px); object-fit:contain; filter:drop-shadow(0 7px 8px #000a); }.mi-farm-facilities > button > span { min-width:0; display:grid; }.mi-farm-facilities small { color:#62dccb; font-size:7px; font-weight:900; letter-spacing:.08em; }.mi-farm-facilities strong { color:#ffeabc; font-size:clamp(8px,1.3cqw,10px); line-height:1.25; }.mi-farm-facilities em { color:#92aaa4; font-size:7px; font-style:normal; }
.mi-friend-fertilizer-art { position:relative; display:grid; width:clamp(58px,10cqw,82px); aspect-ratio:1; place-items:center; justify-self:center; border:1px solid #c1a34c; border-radius:50%; color:#e7ffb2; background:radial-gradient(circle,#54702c,#172511 68%); box-shadow:0 0 15px #bbd85c2e; }.mi-friend-fertilizer-art i { font-size:31px; font-style:normal; }.mi-friend-fertilizer-art b { position:absolute; right:4px; top:2px; color:#ffe27b; font-size:18px; }

@container (max-width: 480px) {
    .mi-farm-board { padding:58px 10px 19px; }
    .mi-farm-landmarks { height:66px; }.mi-farm-landmark.is-rack { width:72px; height:84px; }.mi-farm-landmark.is-house { width:160px; height:82px; }
    .mi-farm-plots { grid-template-rows:repeat(3,minmax(118px,1fr)); gap:2px 4px; }
    .mi-farm-crop-field { inset:-2% -13% 21%; }.mi-farm-ground-info { max-width:71%; padding-inline:2px; }.mi-farm-ground-info i { display:none; }.mi-farm-ground-actions button { min-width:34px; padding-inline:4px; }
    .mi-farm-empty-bed { inset:0; }.mi-farm-locked-sign { inset:auto 20% 5%; }
    .mi-farm-management { max-height:280px; }.mi-farm-market-head small { display:none; }.mi-farm-seed-shop { grid-template-columns:1fr; }.mi-farm-seed-shop article { grid-template-columns:36px minmax(0,1fr) auto auto; min-height:42px; }.mi-farm-seed-shop article > img { width:36px; height:36px; }
    .mi-farm-facilities { grid-template-columns:1fr; }.mi-farm-facilities > button { min-height:104px; grid-template-columns:112px minmax(0,1fr); }.mi-farm-facilities img { height:98px; }.mi-friend-fertilizer-art { width:72px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Interactive service details, premium shop, talisman vault, and true power-saving cover. */
.mi-mail-detail{grid-template-columns:108px minmax(0,1fr)!important;align-items:start!important;padding:18px!important;background:radial-gradient(circle at 10% 15%,#2ccfc326,transparent 35%),linear-gradient(145deg,#122a2b,#08161c)!important}.mi-mail-detail>img{width:102px;height:102px;object-fit:contain;filter:drop-shadow(0 9px 10px #0008)}.mi-mail-detail>div{display:grid;gap:7px}.mi-mail-detail>div>small{color:#65e0d4;font-weight:900;letter-spacing:.08em}.mi-mail-detail>div>strong{color:#fff0c2;font-size:1.1rem}.mi-mail-detail p{margin:0;color:#d1ded9;line-height:1.65}.mi-mail-detail>div>span{color:#f4c965;font-size:.72rem}.mi-mail-detail footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}.mi-mail-detail footer button{min-width:140px}.mi-mail-detail footer button.is-secondary{color:#b9d1cd;background:#102329}
.mi-mission-service article{grid-template-columns:minmax(0,1fr) minmax(120px,40%);gap:10px}.mi-mission-service article>span{display:grid;justify-content:initial;gap:2px}.mi-mission-service article>span small{color:#91aaa5}.mi-mission-service article>span em{color:#67ded2;font-style:normal;font-weight:900}.mi-mission-service article>div{grid-column:1/-1;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding-top:8px;border-top:1px solid #2e4b4d}.mi-mission-service article>div img{width:32px;height:32px;object-fit:contain}.mi-mission-service article>div b{color:#ffe18b}.mi-mission-service article>div button{min-width:104px;min-height:38px;border:1px solid #d7ac4f;border-radius:7px;color:#fff3c9;background:linear-gradient(180deg,#8a4c23,#633119);font-weight:900;cursor:pointer}.mi-mission-service article>div button:disabled{opacity:.45;filter:grayscale(.8);cursor:default}.mi-mission-service article.is-complete{border-color:#d7ac4f;box-shadow:inset 0 0 18px #d7ac4f13}.mi-mission-service article.is-claimed{opacity:.68}
.mi-shop-service h4{margin:16px 0 8px;color:#ffdf87;font-size:.8rem;letter-spacing:.08em}.mi-shop-service .mi-gold-pack-list{grid-template-columns:repeat(3,minmax(0,1fr))}.mi-shop-service .mi-gold-pack-list article{grid-template-columns:58px minmax(0,1fr)}.mi-shop-service .mi-gold-pack-list article img{width:56px;height:56px}.mi-shop-service .mi-gold-pack-list article button{grid-column:1/-1;width:100%}.mi-shop-service .mi-gold-pack-list em{color:#ffd568;font-size:.69rem;font-style:normal;font-weight:900}
.mi-talisman-service>header{margin-bottom:14px}.mi-service-active-boost{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid #d6aa49;border-radius:12px;background:linear-gradient(135deg,#392815,#0c2a2b)}.mi-service-active-boost img{width:74px;height:74px;object-fit:contain}.mi-service-active-boost span{display:grid;gap:2px}.mi-service-active-boost small{color:#64ddd1}.mi-service-active-boost strong{color:#ffe29a;font-size:1.05rem}.mi-service-active-boost em{color:#b8cbc6;font-size:.7rem;font-style:normal}.mi-service-active-boost button,.mi-service-talisman-grid button{min-width:82px;min-height:40px;border:1px solid #d5ab4c;border-radius:8px;color:#fff0bd;background:#79411e;font-weight:900}.mi-service-talisman-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.mi-service-talisman-grid article{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;border:1px solid #2b5353;border-radius:10px;background:#0a2025}.mi-service-talisman-grid article img{width:76px;height:76px;object-fit:contain}.mi-service-talisman-grid article span{display:grid;gap:2px}.mi-service-talisman-grid article small{color:#62d9cf}.mi-service-talisman-grid article strong{color:#fff0c8}.mi-service-talisman-grid article em{color:#9db2ad;font-size:.67rem;font-style:normal}.mi-service-talisman-grid button:disabled{opacity:.35;filter:grayscale(.8)}
.mi-power-saving-screen{position:absolute;z-index:120;inset:0;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;align-items:center;padding:clamp(40px,8dvh,90px) clamp(18px,6vw,56px) clamp(35px,7dvh,72px);overflow:hidden;color:#f4efe5;background:#000;touch-action:none}.mi-power-saving-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 53%,#173b352e,transparent 26%),linear-gradient(180deg,#000 0 78%,#17110b 120%);pointer-events:none}.mi-power-saving-screen>*{position:relative;z-index:1}.mi-power-saving-screen time{display:grid;justify-items:center;gap:3px}.mi-power-saving-screen time strong{font:900 clamp(3.6rem,15vw,7.2rem)/.95 system-ui,sans-serif;letter-spacing:-.07em;color:#fff}.mi-power-saving-screen time span{color:#e8e5df;font-size:clamp(1.05rem,3.8vw,1.8rem);font-weight:850}.mi-power-saving-emblem{align-self:center;display:grid;place-items:center;width:min(42vw,260px);aspect-ratio:1}.mi-power-saving-emblem:before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:#4bd6c41c;filter:blur(28px);animation:mi-saving-pulse 3.2s ease-in-out infinite}.mi-power-saving-emblem img{position:relative;width:100%;height:100%;object-fit:contain;filter:brightness(.82) saturate(.75) drop-shadow(0 12px 20px #000);animation:mi-saving-float 3.5s ease-in-out infinite}.mi-power-saving-screen>section{width:min(100%,540px);display:grid;justify-items:center;gap:4px;padding:12px;border-block:1px solid #66574380;text-align:center}.mi-power-saving-screen>section small{color:#6fd9ce;font-size:.62rem;font-weight:900;letter-spacing:.15em}.mi-power-saving-screen>section strong{color:#e9d9c2;font-size:1.45rem}.mi-power-saving-screen>section span{color:#d8d4cd;font-weight:800}.mi-power-saving-screen>section em{color:#eac768;font-size:.72rem;font-style:normal}.mi-power-saving-slider{position:relative;width:min(100%,460px);height:70px;border:1px solid #6e624e;border-radius:999px;background:linear-gradient(90deg,#6ee3d433 var(--slide),#1d1814 var(--slide));box-shadow:inset 0 0 20px #000,0 8px 30px #000;overflow:hidden}.mi-power-saving-slider input{position:absolute;z-index:2;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.mi-power-saving-slider span{position:absolute;inset:0;display:grid;grid-template-columns:54px 1fr 54px;align-items:center;pointer-events:none}.mi-power-saving-slider i{width:48px;height:48px;margin-left:9px;display:grid;place-items:center;border:1px solid #d6b968;border-radius:50%;color:#ffe59a;background:#493522;font:900 2rem/1 system-ui;transform:translateX(calc((min(var(--slide),82)/100)*370%));transition:transform .05s linear}.mi-power-saving-slider strong{grid-column:2;color:#dfd7cc;text-align:center;font-size:1rem}@keyframes mi-saving-float{50%{transform:translateY(-10px)}}@keyframes mi-saving-pulse{50%{transform:scale(1.2);opacity:.45}}
@container (max-width:560px){.mi-shop-service .mi-gold-pack-list,.mi-service-talisman-grid{grid-template-columns:1fr}.mi-mail-detail{grid-template-columns:72px minmax(0,1fr)!important}.mi-mail-detail>img{width:68px;height:68px}.mi-mail-detail footer{display:grid}.mi-mail-detail footer button{width:100%}.mi-power-saving-slider i{transform:translateX(calc((min(var(--slide),82)/100)*300%))}}

/* Maru Idle — mobile-first 9:16 play surface */
.is-hidden { display: none !important; }
html:has(.gp-main-play),
body:has(.gp-main-play) {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
.gp-main-play {
    width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    overscroll-behavior: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(40, 85, 96, .18), transparent 38%),
        #03070a;
}
.mi-loading { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; color: #edf8f5; }
.mi-loading-mark { width: 34px; aspect-ratio: 1; border: 2px solid #76d8c5; border-top-color: transparent; border-radius: 50%; animation: mi-spin .8s linear infinite; }
.mi-stage {
    --region-primary: #173247;
    --region-accent: #8fd8c8;
    position: relative;
    isolation: isolate;
    width: min(100vw, calc(100dvh * 9 / 16));
    min-width: 0;
    height: min(100dvh, calc(100vw * 16 / 9));
    min-height: 0;
    max-width: 100vw;
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
    flex-shrink: 0;
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 7.5% 9% minmax(0, 62%) 7% 4% 10.5%;
    overflow: hidden;
    outline: none;
    color: #f6f2e5;
    background: #081017;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 32px 100px #000;
    font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
    font-size: clamp(14px, 2.45cqw, 19px);
    touch-action: manipulation;
    user-select: none;
}
.mi-stage button { min-width: 44px; min-height: 44px; font: inherit; }
.mi-topbar {
    position: relative; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) clamp(12px, 3.3cqw, 24px) 8px;
    background: linear-gradient(180deg, rgba(4,10,15,.98), rgba(7,16,22,.9));
    border-bottom: 1px solid color-mix(in srgb, var(--region-accent) 38%, transparent);
}
.mi-account-profile { flex: 1 1 auto; min-width: 0; max-width: clamp(250px, 48cqw, 370px); min-height: 52px !important; display: grid; grid-template-columns: clamp(42px, 8cqw, 56px) minmax(0,1fr) auto; align-items: center; gap: clamp(7px,1.5cqw,12px); padding: 4px clamp(8px,1.6cqw,13px) 4px 4px; border: 1px solid rgba(255,218,139,.42); border-radius: 999px; color: #f8f1df; background: linear-gradient(110deg,rgba(20,40,47,.97),rgba(4,13,18,.92)); box-shadow: inset 0 0 18px rgba(120,238,216,.06),0 5px 18px rgba(0,0,0,.32); cursor: pointer; }
.mi-account-profile:hover,.mi-account-profile:focus-visible { border-color: color-mix(in srgb,var(--region-accent) 72%,#ffe0a0); box-shadow: 0 0 18px color-mix(in srgb,var(--region-accent) 25%,transparent),inset 0 0 18px rgba(120,238,216,.1); outline: none; }
.mi-account-profile > i { width: 100%; aspect-ratio: 1; border: 2px solid #d8b46c; border-radius: 50%; background-color: #0c1a20; background-repeat: no-repeat; background-size: cover; background-position: var(--sprite-x) var(--sprite-y); box-shadow: inset 0 0 0 2px rgba(4,10,13,.88),0 0 10px rgba(255,213,126,.2); }
.mi-account-profile > span { min-width: 0; display: grid; gap: 2px; text-align: left; }
.mi-account-profile > span strong { overflow: hidden; color: #fff4d0; font-size: clamp(15px,2.8cqw,20px); font-weight: 950; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.mi-account-profile > span small { overflow: hidden; color: #99d9ce; font-size: clamp(10px,1.8cqw,13px); font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.mi-account-profile > em { display: grid; justify-items: end; color: #ffd479; font-size: clamp(13px,2.5cqw,18px); font-style: normal; font-weight: 950; line-height: 1.05; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.mi-account-profile > em b { color: #9eaaa8; font-size: clamp(9px,1.5cqw,11px); letter-spacing: .08em; }
.mi-top-actions { min-width: 0; display: flex; align-items: center; gap: clamp(5px, 1.2cqw, 9px); }
.mi-settings-gear { flex: 0 0 auto; min-width: 40px !important; min-height: 40px !important; width: clamp(40px, 7.8cqw, 52px); aspect-ratio: 1; padding: 0; border: 1px solid rgba(255,218,139,.46); border-radius: 50%; color: #f5db9a; background: rgba(4,12,18,.82); font-size: clamp(20px, 4cqw, 28px); line-height: 1; cursor: pointer; text-shadow: 0 2px 8px #000; box-shadow: inset 0 0 14px rgba(255,207,116,.08); }
.mi-settings-gear:hover, .mi-settings-gear:focus-visible { border-color: var(--region-accent); color: #fff7da; box-shadow: 0 0 14px color-mix(in srgb, var(--region-accent) 32%, transparent); }
.mi-dev-reset { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 1px dashed rgba(115,226,207,.42); border-radius: 50%; color: #8fe5d3; background: rgba(4,17,20,.78); font-size: 19px; cursor: pointer; }
.mi-stage-copy { display: flex; align-items: baseline; gap: .55rem; line-height: 1.1; min-width: 0; }
.mi-stage-copy span { color: #fff0bd; font-size: clamp(16px, 3.2cqw, 22px); font-weight: 950; letter-spacing: .08em; text-shadow: 0 2px 8px #000; }
.mi-stage-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--region-accent) 82%, white); font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(14px, 2.7cqw, 19px); }
.mi-currencies { display: flex; align-items: center; gap: clamp(4px, 1.2cqw, 8px); padding: 7px 10px; border: 1px solid rgba(255,218,139,.42); border-radius: 999px; background: rgba(3,10,15,.82); box-shadow: 0 3px 12px rgba(0,0,0,.34); }
.mi-currency { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mi-currencies strong { color: #fff2cb; font-size: clamp(14px, 2.7cqw, 19px); }
.mi-currencies small { color: #e3e9e5; font-size: clamp(11px, 2.05cqw, 14px); white-space: nowrap; }
.mi-coin { flex: 0 0 auto; width: clamp(16px, 3cqw, 21px); height: clamp(16px, 3cqw, 21px); border: 2px solid #ffe0a0; border-radius: 50%; box-shadow: inset 0 0 0 2px #8b5522, 0 0 8px rgba(255,198,85,.35); background: #d69538; }
.mi-resource-divider { width: 1px; height: 16px; background: rgba(255,255,255,.15); }
@container (max-width: 680px) {
    .mi-topbar { gap: 5px; padding: 4px 6px; }
    .mi-account-profile {
        flex: 0 1 180px;
        max-width: 180px;
        min-height: 40px !important;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 4px;
        padding: 2px 7px 2px 2px;
    }
    .mi-account-profile > span strong { font-size: 13px; }
    .mi-account-profile > em { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; }
    .mi-top-actions { flex: 1 1 auto; gap: 4px; overflow: hidden; }
    .mi-currencies { flex: 1 1 auto; min-width: 0; justify-content: space-around; gap: 3px; overflow: hidden; padding: 5px 6px; }
    .mi-currency { flex: 0 1 auto; gap: 2px; overflow: hidden; }
    .mi-currencies small { overflow: hidden; font-size: 10px; text-overflow: clip; }
    .mi-currencies strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: clip; white-space: nowrap; }
    .mi-coin { width: 14px; height: 14px; border-width: 1px; }
    .mi-dev-reset { width: 36px; min-width: 36px !important; height: 36px; min-height: 36px !important; }
    .mi-settings-gear { width: 36px; min-width: 36px !important; min-height: 36px !important; }
}
@container (max-width: 480px) {
    .mi-account-profile { flex-basis: 82px; max-width: 82px; grid-template-columns: 36px minmax(0, 1fr); }
    .mi-account-profile > span { display: none; }
    .mi-currencies small { display: none; }
    .mi-currencies strong { font-size: 12px; }
    .mi-stage .mi-profile-identity { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px; padding: 4px 44px 14px 0; }
    .mi-stage .mi-profile-identity > i { grid-row: 1 / span 2; }
    .mi-stage .mi-profile-identity > strong { grid-column: 2; justify-items: start; font-size: 20px; }
    .mi-stage .mi-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-stage .mi-profile-facts article { min-height: 60px; padding: 8px; }
    .mi-stage .mi-profile-facts strong { overflow: visible; font-size: 13px; text-overflow: clip; white-space: normal; }
    .mi-stage .mi-profile-party-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-stage .mi-profile-party-grid article { grid-template-columns: 52px minmax(0, 1fr); gap: 7px; padding: 7px; }
    .mi-stage .mi-profile-growth-actions { grid-template-columns: 1fr; }
}
.mi-profile-backdrop { position: absolute; z-index: 120; inset: 0; display: grid; place-items: center; padding: clamp(10px,3cqw,24px); background: rgba(0,6,10,.76); }
.mi-profile-card { position: relative; isolation: isolate; width: min(96%,680px); max-height: calc(100% - 20px); overflow: auto; padding: clamp(18px,4cqw,30px); border: 1px solid color-mix(in srgb,var(--region-accent) 62%,#d5a85a); border-radius: 18px; color: #eef7f2; background-color: #071820; background-image: radial-gradient(circle at 85% 5%,color-mix(in srgb,var(--region-accent) 18%,transparent),transparent 34%),linear-gradient(155deg,#0d2931,#06151b 68%,#030b0f); box-shadow: 0 30px 90px rgba(0,0,0,.86),0 0 0 1px rgba(255,218,137,.12),inset 0 0 34px rgba(96,225,204,.07); }
.mi-profile-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #dbe6e3; background: transparent; font-size: 28px; cursor: pointer; }
.mi-profile-close:hover,.mi-profile-close:focus-visible { color: #fff1bb; background: rgba(255,255,255,.08); }
.mi-profile-identity { display: grid; grid-template-columns: clamp(76px,14cqw,104px) minmax(0,1fr) auto; align-items: center; gap: clamp(12px,2.8cqw,22px); padding: 4px 48px 18px 0; border-bottom: 1px solid rgba(235,198,120,.3); }
.mi-profile-identity > i { width: 100%; aspect-ratio: 1; border: 3px solid #d6ad62; border-radius: 50%; background-color: #101d23; background-repeat: no-repeat; background-size: cover; background-position: var(--sprite-x) var(--sprite-y); box-shadow: inset 0 0 0 3px #091117,0 0 22px rgba(255,202,93,.22); }
.mi-profile-identity > div { min-width: 0; display: grid; gap: 3px; }
.mi-profile-identity > div > small,.mi-profile-party-preview header small { color: #69dfcf; font-size: clamp(10px,1.7cqw,12px); font-weight: 950; letter-spacing: .16em; }
.mi-profile-identity h2 { margin: 0; overflow: visible; color: #fff2c9; font-size: clamp(19px,4cqw,30px); font-family: Georgia,"Noto Serif KR",serif; line-height: 1.12; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; text-shadow: 0 3px 8px #000; }
.mi-profile-identity > div > span { color: #a8c4c1; font-size: clamp(11px,1.9cqw,14px); font-weight: 800; overflow-wrap: anywhere; }
.mi-profile-identity > strong { display: grid; justify-items: end; color: #ffd36f; font-size: clamp(22px,4.6cqw,34px); line-height: 1.05; white-space: nowrap; text-shadow: 0 3px 8px #000; }
.mi-profile-identity > strong small { color: #b9c9c5; font-size: clamp(10px,1.8cqw,13px); letter-spacing: .05em; }
.mi-profile-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 14px 0 18px; }
.mi-profile-facts article { min-width: 0; min-height: 70px; display: grid; align-content: center; gap: 5px; padding: 10px; border: 1px solid rgba(124,181,171,.22); border-radius: 11px; background: rgba(255,255,255,.035); text-align: center; }
.mi-profile-facts small { color: #9cb5b1; font-size: clamp(10px,1.8cqw,12px); font-weight: 800; }
.mi-profile-facts strong { overflow: hidden; color: #fff2c9; font-size: clamp(13px,2.3cqw,17px); text-overflow: ellipsis; white-space: nowrap; }
.mi-profile-party-preview { display: grid; gap: 11px; }
.mi-profile-party-preview > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.mi-profile-party-preview > header > div { display: grid; gap: 2px; }
.mi-profile-party-preview > header strong { color: #f8f1df; font-size: clamp(18px,3.2cqw,23px); }
.mi-profile-party-preview > header > span { color: #d4ba7b; font-size: clamp(11px,1.9cqw,14px); font-weight: 850; }
.mi-profile-party-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.mi-profile-party-grid article { min-width: 0; min-height: 82px; display: grid; grid-template-columns: clamp(54px,9cqw,68px) minmax(0,1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid rgba(106,212,195,.24); border-radius: 12px; background: rgba(4,22,28,.78); }
.mi-profile-party-grid article.is-leader { border-color: rgba(255,199,90,.68); background: linear-gradient(135deg,rgba(101,67,20,.36),rgba(4,22,28,.8)); }
.mi-profile-party-grid article > i { width: 100%; aspect-ratio: 1; border: 1px solid rgba(255,214,128,.54); border-radius: 10px; background-color: #102028; background-repeat: no-repeat; background-size: cover; background-position: var(--sprite-x) var(--sprite-y); }
.mi-profile-party-grid article > span { min-width: 0; display: grid; gap: 2px; }
.mi-profile-party-grid article small { color: #75d9c9; font-size: clamp(9px,1.5cqw,11px); font-weight: 900; }
.mi-profile-party-grid article strong { overflow: hidden; color: #fff3d0; font-size: clamp(13px,2.3cqw,17px); text-overflow: ellipsis; white-space: nowrap; }
.mi-profile-party-grid article em { overflow: hidden; color: #aebdba; font-size: clamp(10px,1.7cqw,12px); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.mi-profile-growth { display: grid; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid rgba(213,174,98,.42); border-radius: 12px; background: linear-gradient(145deg,rgba(21,53,61,.82),rgba(5,19,25,.92)); }
.mi-profile-growth > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.mi-profile-growth > header > div { display: grid; gap: 2px; }
.mi-profile-growth > header small { color: #69dfcf; font-size: clamp(10px,1.7cqw,12px); font-weight: 950; letter-spacing: .16em; }
.mi-profile-growth > header strong { color: #fff1c7; font-size: clamp(18px,3.2cqw,23px); }
.mi-profile-growth > header > span { color: #e6c272; font-size: clamp(10px,1.8cqw,13px); font-weight: 850; }
.mi-profile-growth-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.mi-profile-growth-actions button { min-width: 0; min-height: 68px; display: grid; grid-template-columns: clamp(34px,6cqw,44px) minmax(0,1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(229,191,104,.34); border-radius: 10px; color: #f8eed4; background: rgba(6,23,29,.86); text-align: left; cursor: pointer; }
.mi-profile-growth-actions button:hover, .mi-profile-growth-actions button:focus-visible { border-color: #f0c86f; background: rgba(40,68,70,.88); outline: none; }
.mi-profile-growth-actions img { width:100%; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 4px 7px rgba(0,0,0,.7)) drop-shadow(0 0 5px rgba(85,226,210,.2)); }
.mi-profile-growth-actions span { min-width: 0; display: grid; gap: 2px; }
.mi-profile-growth-actions strong { color: #fff3d0; font-size: clamp(12px,2.1cqw,16px); white-space: nowrap; }
.mi-profile-growth-actions small { overflow: hidden; color: #91aaa6; font-size: clamp(9px,1.5cqw,11px); text-overflow: ellipsis; white-space: nowrap; }
.mi-enemy-hud { position: relative; z-index: 18; display: grid; align-content: center; gap: clamp(7px, 1.5cqw, 11px); padding: 7px clamp(12px, 3.3cqw, 24px) 9px; background: linear-gradient(180deg, rgba(3,9,14,.98), rgba(5,13,18,.82)); border-bottom: 1px solid rgba(255,255,255,.06); }
.mi-enemy-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mi-enemy-title span { color: color-mix(in srgb, var(--region-accent) 82%, white); font-size: clamp(11px, 2.1cqw, 14px); font-weight: 900; letter-spacing: .12em; }
.mi-enemy-title strong { color: #fff8e7; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(16px, 3cqw, 21px); text-shadow: 0 2px 8px #000; }
.mi-enemy-hud.is-boss .mi-enemy-title span { color: #ffb271; }
.mi-hp-track { position: relative; height: clamp(20px, 4cqw, 28px); overflow: hidden; border: 2px solid rgba(238,225,190,.48); border-radius: 6px; background: rgba(2,6,9,.92); box-shadow: inset 0 0 10px #000, 0 2px 10px rgba(0,0,0,.38); }
.mi-hp-track > span { display: block; height: 100%; background: linear-gradient(90deg, #95393f, #ed6658 70%, #ffb16c); box-shadow: 0 0 12px rgba(255,86,78,.5); transition: width .18s ease-out; }
.mi-enemy-hud.is-boss .mi-hp-track > span { background: linear-gradient(90deg, #70225b, #e34c76, #ffc06c); }
.mi-enemy-hud.is-boss .mi-hp-track { border-color: #e7af62; box-shadow: inset 0 0 12px #000, 0 0 12px rgba(255,112,61,.28); }
.mi-hp-track em { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: clamp(13px, 2.3cqw, 17px); font-style: normal; font-weight: 950; letter-spacing: .03em; text-shadow: 0 2px 4px #000, 0 0 8px #000; }
.mi-battlefield { position: relative; z-index: 1; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; cursor: crosshair; background: var(--region-primary); contain: layout paint; isolation: isolate; transform: translateZ(0); clip-path: inset(0); }
.mi-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .45s ease, filter .45s ease; }
.mi-background.is-transitioning { opacity: .15; filter: blur(4px); }
.mi-lighting { position: absolute; z-index: 3; inset: 0; pointer-events: none; mix-blend-mode: color; }
.lighting-day { background: linear-gradient(180deg, rgba(154,210,214,.08), transparent 50%, rgba(18,51,49,.08)); }
.lighting-sunset { background: linear-gradient(180deg, rgba(246,134,70,.28), transparent 43%, rgba(86,25,48,.22)); mix-blend-mode: overlay; }
.lighting-night { background: linear-gradient(180deg, rgba(12,24,74,.4), transparent 45%, rgba(1,7,18,.2)); }
.lighting-boss { background: radial-gradient(circle at 50% 33%, transparent 6%, rgba(58,8,32,.42) 68%, rgba(2,4,7,.7)); mix-blend-mode: multiply; animation: mi-boss-light 2.8s ease-in-out infinite; }
.mi-midground { position: absolute; z-index: 2; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(1,7,10,.18) 42%, rgba(1,5,8,.58)); pointer-events: none; }
.mi-foreground { position: absolute; z-index: 12; inset: auto -4% -3%; height: 18%; pointer-events: none; background: radial-gradient(ellipse at 50% 115%, rgba(1,5,7,.86), transparent 68%), linear-gradient(180deg, transparent, rgba(1,5,7,.28)); }
.mi-ambient { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.mi-ambient i { position: absolute; top: -8%; left: calc((var(--i) * 8.3) * 1%); width: 3px; height: 18px; border-radius: 50%; opacity: .34; background: var(--region-accent); animation: mi-fall calc(4s + var(--i) * .28s) linear infinite; animation-delay: calc(var(--i) * -.37s); }
.mi-stage.ambient-disabled .mi-ambient { display: none; }
.mi-stage.quality-low .mi-ambient i:nth-child(n+5), .mi-stage.power-saving .mi-ambient i:nth-child(n+5) { display: none; }
.mi-stage.quality-low .mi-lighting, .mi-stage.power-saving .mi-lighting { mix-blend-mode: normal; opacity: .72; }
.ambient-rain i { width: 1px; height: 28px; transform: rotate(12deg); background: #bceeff; }
.ambient-snow i, .ambient-clouds i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.ambient-maple i, .ambient-embers i, .ambient-ash i, .ambient-gold-dust i, .ambient-sand i { width: 6px; height: 3px; transform: rotate(25deg); background: var(--region-accent); }
.ambient-wisps i { width: 7px; height: 10px; border-radius: 50% 50% 30% 70%; box-shadow: 0 0 12px #64f7e9; animation-name: mi-wisp; }
.mi-boss-guards { position: absolute; z-index: 5; top: 1.5%; left: 50%; width: 96%; height: 39.5%; opacity: 1; transform: translateX(-50%); pointer-events: none; }
.mi-boss-guard { position: absolute; bottom: 0; width: 14%; height: 62%; opacity: 1; filter: saturate(1.02) contrast(1.08) drop-shadow(0 10px 10px rgba(0,0,0,.82)); transform-origin: 50% 85%; }
.mi-boss-guard.guard-0 { left: 1%; bottom: 0; transform: rotate(-3deg); }
.mi-boss-guard.guard-1 { right: 1%; bottom: 0; transform: rotate(3deg); }
.mi-boss-guard.guard-2 { left: 14.5%; bottom: 22%; width: 13%; height: 56%; transform: rotate(-2deg); }
.mi-boss-guard.guard-3 { right: 14.5%; bottom: 22%; width: 13%; height: 56%; transform: rotate(2deg); }
.mi-boss-guard.guard-4 { left: 3%; bottom: 54%; width: 12%; height: 45%; }
.mi-boss-guard > img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mi-boss-guard > span { position: absolute; z-index: 2; left: 50%; bottom: -2%; width: 78px; padding: 3px 5px 4px; border: 1px solid rgba(241,184,83,.55); border-radius: 7px; color: #fff1c9; background: rgba(19,9,5,.92); text-align: center; transform: translateX(-50%); text-shadow: 0 1px 4px #000; box-shadow: 0 5px 12px rgba(0,0,0,.48); }
.mi-boss-guard > span strong, .mi-boss-guard > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mi-boss-guard > span strong { font-size: clamp(8px,1.3cqw,10px); }.mi-boss-guard > span small { color: #e7cfa0; font-size: clamp(7px,1.05cqw,8px); }.mi-boss-guard > span i { display: block; height: 3px; margin-top: 2px; overflow: hidden; border-radius: 99px; background: #2b1811; }.mi-boss-guard > span b { display: block; height: 100%; background: linear-gradient(90deg,#d9493f,#ffb15f); transition: width .18s ease-out; }
.mi-boss-guard.is-hit { animation: mi-guard-hit .24s ease-out; filter: saturate(1.35) contrast(1.12) sepia(.18) drop-shadow(0 0 13px rgba(255,79,48,.82)); }
.mi-monster { position: absolute; z-index: 6; top: 2%; left: 50%; width: 48%; height: 38.5%; transform: translateX(-50%); display: grid; place-items: center; filter: saturate(.94) contrast(1.04) drop-shadow(0 20px 22px rgba(0,0,0,.72)) drop-shadow(0 0 18px color-mix(in srgb, var(--region-accent) 18%, transparent)); pointer-events: none; transform-origin: 50% 78%; }
.mi-monster::after { content: ""; position: absolute; z-index: -1; left: 22%; right: 22%; bottom: 6%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.68), transparent 70%); filter: blur(3px); }
.mi-monster.is-boss { width: 45%; height: 39.5%; top: 1.2%; }
.mi-monster img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mi-monster.is-hit { animation: mi-monster-hit .24s ease-out; filter: saturate(1.08) contrast(1.08) sepia(.12) drop-shadow(0 0 12px rgba(255,76,48,.72)); }
.mi-monster.is-attacking { z-index: 9; animation: mi-monster-strike .42s cubic-bezier(.18,.8,.2,1); }
.mi-support-party { position: absolute; z-index: 7; inset: auto 0 0; height: 34%; pointer-events: none; }
.mi-companion { --slot: 0; --attack-delay: 0ms; position: absolute; bottom: 2%; width: 15%; height: 91%; filter: saturate(.96) contrast(1.06) drop-shadow(0 8px 9px rgba(0,0,0,.8)); transform-origin: 50% 90%; }
.mi-companion.companion-0 { left: .7%; }
.mi-companion.companion-1 { left: 17%; }
.mi-companion.companion-2 { left: 33.3%; }
.mi-companion.companion-3 { left: 65.9%; }
.mi-companion.companion-4 { left: 82.2%; }
.mi-companion-sprite { position: absolute; inset: 0 0 19%; background-repeat: no-repeat; background-size: contain; background-position: center bottom; }
.mi-companion > span { position: absolute; left: 50%; bottom: 0; width: max-content; min-width: 66px; max-width: 94px; padding: 3px 5px 4px; border: 1px solid rgba(142,221,210,.34); border-radius: 7px; color: #edfff9; background: rgba(3,15,19,.88); text-align: center; transform: translateX(-50%); text-shadow: 0 1px 4px #000; box-shadow: 0 4px 10px rgba(0,0,0,.32); }
.mi-companion > span strong, .mi-companion > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mi-companion > span strong { font-size: clamp(9px,1.55cqw,11px); }.mi-companion > span small { color: #9fc8c0; font-size: clamp(7px,1.2cqw,9px); }.mi-companion > span i { display: block; height: 3px; margin-top: 2px; border-radius: 99px; background: #102323; overflow: hidden; }.mi-companion > span b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#4fc89e,#b4f28a); }
.mi-companion.is-attacking { animation-duration: .34s; animation-timing-function: cubic-bezier(.18,.8,.2,1); animation-delay: var(--attack-delay); animation-fill-mode: both; }
.mi-companion.is-attacking.companion-0 { animation-name: mi-companion-spear; }
.mi-companion.is-attacking.companion-1 { animation-name: mi-companion-bow; }
.mi-companion.is-attacking.companion-2 { animation-name: mi-companion-talisman; }
.mi-companion.is-attacking.companion-3 { animation-name: mi-companion-shield; }
.mi-companion.is-attacking.companion-4 { animation-name: mi-companion-blades; }
.mi-companion.is-hit { animation: mi-unit-hit .3s ease-out; filter: saturate(1.35) sepia(.22) hue-rotate(320deg) drop-shadow(0 0 12px rgba(255,89,68,.8)); }
.mi-unit-damage { position: absolute; z-index: 12; left: 50%; top: 25%; color: #fff1d5; font-size: clamp(13px,2.8cqw,19px); font-weight: 950; text-shadow: 0 2px 2px #260500, 0 0 8px #e84b3f; transform: translateX(-50%); animation: mi-damage .52s ease-out forwards; }.mi-unit-damage.is-critical { color: #ffe274; animation-name: mi-critical; }.mi-companion-damage { top: 18%; }
.mi-companion-attack-effect { position: absolute; z-index: 4; left: 52%; top: 14%; width: 125%; height: 4px; border-radius: 99px; opacity: 0; transform-origin: left center; pointer-events: none; background: linear-gradient(90deg, transparent, #fff4ae 18%, #ffc65b 62%, transparent); box-shadow: 0 0 7px #ffd35e, 0 0 15px color-mix(in srgb, var(--region-accent) 70%, transparent); animation: mi-companion-projectile .34s ease-out var(--attack-delay) both; }
.mi-companion.companion-0 > .mi-companion-attack-effect { top: 24%; transform: rotate(-37deg); }
.mi-companion.companion-1 > .mi-companion-attack-effect { top: 12%; width: 155%; height: 2px; background: linear-gradient(90deg,#ffed9e 0 72%,transparent 72%); transform: rotate(-24deg); }
.mi-companion.companion-1 > .mi-companion-attack-effect::after { content: ""; position: absolute; right: 22%; top: -4px; border-width: 5px 0 5px 9px; border-style: solid; border-color: transparent transparent transparent #fff0a2; }
.mi-companion.companion-2 > .mi-companion-attack-effect { left: 15%; top: -18%; width: 72%; height: 72%; border: 3px solid #8fffe9; border-radius: 50%; background: radial-gradient(circle,rgba(129,255,232,.45),transparent 63%); box-shadow: 0 0 13px #8fffe9, inset 0 0 12px #ffe98f; transform: none; animation-name: mi-companion-pulse; }
.mi-companion.companion-3 > .mi-companion-attack-effect { left: -36%; top: 0; width: 92%; height: 92%; border: 3px solid #ffe38b; border-radius: 50%; background: radial-gradient(circle,rgba(255,214,86,.34),transparent 62%); box-shadow: 0 0 14px #ffe38b, inset 0 0 13px #87e9ff; transform: none; animation-name: mi-companion-bash; }
.mi-companion.companion-4 > .mi-companion-attack-effect { left: -72%; top: -12%; width: 145%; height: 5px; background: linear-gradient(90deg,transparent,#b8fff7 20% 76%,transparent); transform: rotate(28deg); box-shadow: 0 0 8px #75f1e5, 0 0 17px #fff0a1; }
.mi-companion.companion-4 > .mi-companion-attack-effect::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; box-shadow: inherit; transform: rotate(-55deg); }
.mi-support-party > em { display: none; }
.mi-player { position: absolute; z-index: 8; left: 49.6%; bottom: .5%; width: 16.5%; height: 32%; display: grid; align-items: end; pointer-events: none; filter: saturate(.96) contrast(1.04) drop-shadow(0 18px 20px rgba(0,0,0,.78)) drop-shadow(0 0 12px color-mix(in srgb, var(--region-accent) 13%, transparent)); transform-origin: 50% 85%; }
.mi-player::after { content: ""; position: absolute; z-index: -1; left: 20%; right: 20%; bottom: 3%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.72), transparent 72%); filter: blur(3px); }
.mi-player img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mi-player > span { position: absolute; z-index: 2; left: 50%; bottom: 1%; display: grid; min-width: 76px; padding: 3px 8px 4px; border: 1px solid rgba(244,202,99,.42); border-radius: 7px; color: #fff2c7; background: rgba(18,12,7,.9); text-align: center; transform: translateX(-50%); text-shadow: 0 1px 4px #000; box-shadow: 0 4px 12px rgba(0,0,0,.42); }
.mi-player > span strong { font-size: clamp(10px,1.7cqw,12px); }.mi-player > span small { color: #e3c581; font-size: clamp(8px,1.25cqw,9px); }
.mi-player.is-attacking { width: 18.5%; left: 48.6%; animation: mi-player-strike .34s cubic-bezier(.2,.8,.2,1); }
.mi-player.is-hit { animation: mi-player-hit .36s ease-out; filter: brightness(1.8) sepia(.35) hue-rotate(320deg) saturate(1.5) drop-shadow(0 0 18px #ff806c); }
.phase-intro .mi-monster { animation: mi-monster-enter .64s cubic-bezier(.18,.8,.25,1) both; }
.phase-victory .mi-monster { animation: mi-monster-defeat .56s ease-in both; }
.mi-slash { position: absolute; z-index: 10; top: 27%; left: 24%; width: 74%; opacity: 0; pointer-events: none; filter: brightness(1.35) drop-shadow(0 0 12px #a8fff3); animation: mi-slash .38s ease-out forwards; }
.mi-impact { position: absolute; z-index: 11; top: 20%; left: 45%; width: 31%; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 10px #fff2a1); animation: mi-impact .38s ease-out forwards; }
.mi-damage { position: absolute; z-index: 14; top: 23%; left: 51%; padding: 2px 7px; border-radius: 7px; color: #fff6e8; background: rgba(31,5,8,.38); font-family: Georgia, serif; font-size: clamp(22px, 5.2cqw, 42px); font-weight: 950; text-shadow: 0 3px 0 #5d1718, 0 0 12px #ff6a59; animation: mi-damage .72s ease-out forwards; pointer-events: none; }
.mi-damage.is-critical { color: #ffe36e; font-size: clamp(28px, 6.4cqw, 52px); text-shadow: 0 3px 0 #8c3211, 0 0 20px #ff9a38; animation-name: mi-critical; }
.mi-player-damage { top: auto; bottom: 30%; left: 25%; color: #ffb2a2; background: rgba(61,5,8,.55); text-shadow: 0 3px 0 #651515, 0 0 14px #ff473b; }
.mi-touch-hint { position: absolute; z-index: 13; right: 10px; bottom: 8px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; color: rgba(248,250,246,.86); background: rgba(2,8,12,.68); font-size: clamp(11px, 2cqw, 13px); text-shadow: 0 1px 3px #000; }
.mi-audio-unlock-hint { position: absolute; z-index: 25; left: 50%; bottom: 11%; transform: translateX(-50%); min-height: 38px !important; width: max-content; max-width: 88%; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--region-accent) 56%, white); border-radius: 999px; color: #fff6cf; background: rgba(3,11,16,.9); font-size: clamp(12px, 2.25cqw, 15px); box-shadow: 0 5px 22px #000; cursor: pointer; }
.mi-region-intro, .mi-victory, .mi-defeat { position: absolute; z-index: 30; inset: 0; display: grid; place-content: center; justify-items: center; background: rgba(3,8,12,.56); backdrop-filter: blur(2px); animation: mi-intro .7s ease both; }
.mi-region-intro span, .mi-victory span, .mi-defeat span { color: color-mix(in srgb, var(--region-accent) 82%, white); font-size: clamp(12px, 2.2cqw, 16px); font-weight: 900; letter-spacing: .2em; }
.mi-region-intro strong, .mi-victory strong, .mi-defeat strong { margin-top: 6px; font: 700 clamp(1.5rem, 8vw, 2.8rem)/1 Georgia, "Noto Serif KR", serif; text-shadow: 0 4px 24px #000; }
.mi-region-intro em, .mi-defeat em { margin-top: 9px; color: #ffd49a; font-style: normal; }
.mi-defeat { background: rgba(24,3,8,.68); }.mi-defeat span { color: #ff9f8e; }.mi-defeat strong { color: #fff0e6; }
.mi-auto-energy { position: relative; z-index: 20; display: grid; grid-template-rows: minmax(30px, .85fr) 1fr; gap: 4px; padding: 5px clamp(8px, 2.3cqw, 16px) 6px; background: linear-gradient(180deg, #071118, #040a0f); border-top: 1px solid rgba(255,255,255,.08); }
.mi-auto-locked { min-width: 0; display: flex; align-items: center; gap: 8px; color: #eef5f0; }
.mi-auto-locked strong { font-size: clamp(12px, 2.25cqw, 15px); }
.mi-auto-locked small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4dedb; font-size: clamp(11px, 2cqw, 13px); }
.mi-auto-toggle { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 32px !important; height: 32px; padding: 0 11px; border: 1px solid #50636b; border-radius: 999px; color: #e9f5f1; background: rgba(16,30,36,.92); cursor: pointer; }
.mi-auto-toggle strong { font-size: clamp(12px, 2.2cqw, 15px); }
.mi-auto-toggle em { color: #becdca; font-size: clamp(12px, 2.15cqw, 14px); font-style: normal; font-weight: 900; }
.mi-auto-toggle small { padding: 2px 5px; border-radius: 99px; color: #30170b; background: #ffd66f; font-size: 10px; font-weight: 950; }
.mi-auto-toggle.is-on { border-color: var(--region-accent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--region-accent) 17%, transparent), 0 0 10px color-mix(in srgb, var(--region-accent) 22%, transparent); }
.mi-auto-toggle.is-on em { color: #fff3bd; }
.mi-lock { position: relative; width: 17px; height: 14px; border: 2px solid #aab5b2; border-radius: 3px; }
.mi-lock::before { content: ""; position: absolute; left: 3px; top: -10px; width: 7px; height: 8px; border: 2px solid #aab5b2; border-bottom: 0; border-radius: 8px 8px 0 0; }
.mi-auto-dot { width: 13px; height: 13px; border-radius: 50%; background: #69787b; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.mi-auto-toggle.is-on .mi-auto-dot { background: var(--region-accent); box-shadow: 0 0 11px var(--region-accent); }
.mi-energy { min-width: 0; width: 100%; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 3px 8px; color: #f2f6f2; }
.mi-energy span, .mi-energy strong { font-size: clamp(11px, 2.05cqw, 14px); }
.mi-energy span { color: #d9e6e3; font-weight: 800; }
.mi-energy strong { justify-self: end; color: #fff1c0; }
.mi-energy div { grid-column: 1 / 3; height: clamp(7px, 1.6cqw, 11px); overflow: hidden; border: 1px solid rgba(185,232,229,.22); border-radius: 99px; background: #10232b; box-shadow: inset 0 1px 4px #000; }
.mi-energy i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #42b8c8, var(--region-accent)); box-shadow: 0 0 8px var(--region-accent); }
.mi-life i { background: linear-gradient(90deg,#a62e3c,#ff8064); box-shadow: 0 0 8px rgba(255,91,78,.72); transition: width .25s ease; }
.mi-chat-dock { position: relative; z-index: 24; padding: 3px clamp(7px,2cqw,13px); background: #050d12; border-top: 1px solid rgba(99,199,191,.16); }
.mi-chat-preview { width: 100%; height: 100%; min-height: 30px !important; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 2px 9px; border: 1px solid rgba(114,181,175,.22); border-radius: 7px; color: #dce9e5; background: linear-gradient(90deg,rgba(24,67,72,.34),rgba(7,19,25,.82)); cursor: pointer; text-align: left; }
.mi-chat-preview span { padding: 2px 6px; border-radius: 4px; color: #09201f; background: var(--region-accent); font-size: clamp(10px,1.7cqw,12px); font-weight: 950; }
.mi-chat-preview strong { color: #ffe2a6; font-size: clamp(10px,1.8cqw,13px); white-space: nowrap; }
.mi-chat-preview em { min-width: 0; overflow: hidden; color: #bccdca; font-size: clamp(11px,1.9cqw,13px); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mi-chat-preview i { color: #9ccfc8; font-style: normal; }
.mi-chat-backdrop { position: absolute; z-index: 105; inset: 0; display: grid; align-items: end; padding: 6%; background: rgba(1,5,8,.62); backdrop-filter: blur(3px); }
.mi-chat-panel { min-height: 48%; max-height: 76%; display: grid; grid-template-rows: auto minmax(180px,1fr) auto auto; overflow: hidden; border: 1px solid rgba(224,183,104,.66); border-radius: 18px 18px 8px 8px; color: #eef5f1; background: linear-gradient(180deg,rgba(8,26,34,.99),rgba(3,11,16,.99)); box-shadow: 0 -22px 70px #000; }
.mi-chat-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mi-chat-panel header div { display: flex; align-items: baseline; gap: 8px; }.mi-chat-panel header small { color: #59e4d3; font-weight: 950; letter-spacing: .14em; }.mi-chat-panel h2 { margin: 0; font: 800 clamp(18px,3.2cqw,24px) Georgia,"Noto Serif KR",serif; }.mi-chat-panel header button { border: 0; color: #ead6b3; background: transparent; font-size: 1.6rem; cursor: pointer; }
.mi-chat-log { overflow: auto; padding: 10px 13px; display: grid; align-content: start; gap: 8px; user-select: text; }
.mi-chat-log article { max-width: 86%; padding: 8px 10px; border: 1px solid rgba(145,181,176,.15); border-radius: 4px 12px 12px 12px; background: rgba(255,255,255,.045); }.mi-chat-log article.is-mine { justify-self: end; border-radius: 12px 4px 12px 12px; border-color: rgba(116,217,201,.28); background: rgba(47,139,132,.16); }
.mi-chat-log article div { display: flex; gap: 8px; justify-content: space-between; }.mi-chat-log article strong { color: #f4d69a; font-size: .74rem; }.mi-chat-log time { color: #718b8a; font-size: .62rem; }.mi-chat-log p { margin: 3px 0 0; color: #edf3f0; font-size: .8rem; line-height: 1.45; word-break: break-word; }.mi-chat-empty { margin: auto; color: #7f9694; }
.mi-chat-panel form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 9px; border-top: 1px solid rgba(255,255,255,.08); }.mi-chat-panel input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid rgba(133,183,179,.3); border-radius: 9px; color: white; background: #07161d; outline: none; }.mi-chat-panel input:focus { border-color: var(--region-accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--region-accent) 16%,transparent); }.mi-chat-panel form button { padding: 0 16px; border: 1px solid #d9ad62; border-radius: 9px; color: #172020; background: #e8c781; font-weight: 900; cursor: pointer; }.mi-chat-error { margin: 0; padding: 0 11px 9px; color: #ff9d8d; font-size: .7rem; }
.mi-menu { position: relative; z-index: 22; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(2px, .8cqw, 6px); align-items: stretch; padding: 7px clamp(4px, 1.2cqw, 9px) max(8px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #09161e, #02070b); border-top: 1px solid rgba(239,198,120,.42); box-shadow: 0 -8px 28px rgba(0,0,0,.34); }
.mi-menu button { border: 0; color: #f0e8d3; background: transparent; cursor: pointer; }
.mi-menu-item { position: relative; height: 100%; min-height: 44px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid transparent !important; border-radius: 10px !important; }
.mi-menu-item:hover, .mi-menu-item:focus-visible { background: rgba(255,241,204,.07); }
.mi-menu-item.is-selected { border-color: color-mix(in srgb, var(--region-accent) 46%, #d4aa65) !important; color: #fff5d2; background: linear-gradient(180deg, rgba(214,174,103,.14), rgba(255,255,255,.03)); box-shadow: inset 0 0 16px rgba(255,211,122,.08); }
.mi-menu-item.is-locked { color: #c8c7bc; background: rgba(255,255,255,.018); }
.mi-menu-item.is-locked::after { content: ""; position: absolute; top: 9%; right: 14%; width: 7px; height: 6px; border: 1px solid #d0b57d; border-radius: 2px; box-shadow: 0 -4px 0 -2px #d0b57d; opacity: .75; }
.mi-menu img { width: clamp(32px, 7cqw, 48px); height: clamp(32px, 7cqw, 48px); object-fit:contain; filter:drop-shadow(0 5px 7px rgba(0,0,0,.78)) drop-shadow(0 0 5px rgba(101,230,213,.15)); transition:transform .18s ease,filter .18s ease; }.mi-menu-item:hover img,.mi-menu-item:focus-visible img,.mi-menu-item.is-selected img { transform:translateY(-2px) scale(1.06); filter:drop-shadow(0 6px 8px rgba(0,0,0,.82)) drop-shadow(0 0 8px rgba(255,206,91,.35)); }
.mi-menu span { font-size: clamp(12px, 2.15cqw, 15px); font-weight: 850; white-space: nowrap; }
.mi-menu-item small { color: #b9b8af; font-size: clamp(11px, 1.8cqw, 12px); line-height: 1; white-space: nowrap; }
.mi-explore-item { overflow: hidden; }
.mi-explore-item.is-selected { color: #fff5d2; border-color: rgba(255,181,80,.74) !important; background: radial-gradient(circle at 50% 20%,rgba(255,130,46,.22),transparent 62%),linear-gradient(180deg,rgba(156,65,25,.27),rgba(255,255,255,.03)); box-shadow: inset 0 0 22px rgba(255,134,51,.15),0 0 13px rgba(255,112,37,.13); }
.mi-explore-item.is-auto::after { content: ""; position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #70ecd6; box-shadow: 0 0 0 4px rgba(112,236,214,.12),0 0 10px #70ecd6; animation: mi-auto-ring 1.2s ease-out infinite; }
.mi-attack-orb { position: relative; align-self: center; justify-self: center; width: clamp(82px, 17cqw, 112px); aspect-ratio: 1; margin-top: clamp(-29px, -4.5cqw, -17px); display: grid; place-content: center; justify-items: center; gap: 1px; border: 3px solid #ffc070 !important; border-radius: 50% !important; color: #fff6d8 !important; background: radial-gradient(circle at 48% 42%, #f47a32 0 18%, #a13520 40%, #47151a 64%, #100b0e 76%) !important; box-shadow: 0 0 0 5px rgba(118,49,29,.7), 0 0 25px rgba(255,94,37,.58), inset 0 0 20px #ffb45e; touch-action: none; transition: filter .16s ease, box-shadow .2s ease; }
.mi-attack-orb::before { content: ""; position: absolute; inset: -10px; border: 2px solid rgba(255,201,103,.38); border-radius: 50%; opacity: .75; }
.mi-attack-orb.is-auto::before { border-color: var(--region-accent); box-shadow: 0 0 20px var(--region-accent); animation: mi-auto-ring 1s ease-out infinite; }
.mi-attack-orb img { width: 43%; height: 43%; filter: brightness(0) saturate(100%) invert(94%) sepia(39%) saturate(778%) hue-rotate(325deg) brightness(111%) contrast(102%) drop-shadow(0 0 7px #ffcf72); }
.mi-attack-orb span { font-size: clamp(14px, 2.8cqw, 19px); font-weight: 950; text-shadow: 0 2px 4px #000; }
.mi-attack-orb.is-held { transform: scale(.93); filter: brightness(1.32); box-shadow: 0 0 0 6px rgba(118,49,29,.78), 0 0 46px rgba(255,140,58,.88), inset 0 0 30px #ffd077; }
.mi-sheet { position: absolute; z-index: 60; left: 9px; right: 9px; bottom: calc(14% + 6px); max-height: 48%; padding: 20px; overflow: auto; overscroll-behavior: contain; border: 1px solid color-mix(in srgb, var(--region-accent) 48%, #6e674f); border-radius: 16px 16px 5px 5px; color: #eaf1ed; background: rgba(5,14,19,.97); box-shadow: 0 -16px 50px rgba(0,0,0,.65); animation: mi-sheet .22s ease-out; scrollbar-color: color-mix(in srgb, var(--region-accent) 60%, #9c7749) transparent; }
.mi-sheet > span { color: var(--region-accent); font-size: .62rem; font-weight: 900; letter-spacing: .15em; }
.mi-sheet h2 { margin: 5px 0 14px; font-family: Georgia, "Noto Serif KR", serif; }
.mi-sheet p { color: #a8babb; line-height: 1.65; font-size: .84rem; }
.mi-sheet-close { position: absolute; right: 10px; top: 7px; padding: 4px 9px; color: #ccd8d7; background: transparent; border: 0; font-size: 1.4rem; }
.mi-sheet dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.mi-sheet dl div { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.mi-sheet dt { color: #94a9aa; font-size: .68rem; }.mi-sheet dd { margin: 5px 0 0; font-weight: 900; }
.mi-sheet.panel-companions { top: 5px; bottom: calc(13% + 2px); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: clamp(12px, 2.4cqw, 20px); background: radial-gradient(circle at 82% 12%, rgba(58,129,122,.12), transparent 28%), linear-gradient(180deg, rgba(7,18,24,.992), rgba(3,10,14,.995)); }
.mi-sheet.panel-companions > span, .mi-sheet.panel-companions > h2, .mi-sheet.panel-companions > .mi-companion-tabs { flex: 0 0 auto; }
.mi-sheet.panel-companions > section { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.mi-sheet:is(.panel-upgrade,.panel-skills,.panel-equipment) {
    top: 5px;
    bottom: calc(13% + 2px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(12px,2.4cqw,20px);
    background: radial-gradient(circle at 82% 12%,rgba(177,119,40,.11),transparent 28%),linear-gradient(180deg,rgba(7,18,24,.992),rgba(3,10,14,.995));
}
.mi-sheet:is(.panel-upgrade,.panel-skills,.panel-equipment) > span,
.mi-sheet:is(.panel-upgrade,.panel-skills,.panel-equipment) > h2,
.mi-sheet:is(.panel-upgrade,.panel-skills,.panel-equipment) > .mi-body-growth-tabs { flex: 0 0 auto; }
.mi-body-growth-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 2px 3px 12px;
    scrollbar-width: thin;
}
.mi-body-growth-pane > p { margin:8px 0 13px; }
.mi-secondary-action { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid rgba(223,189,116,.35); border-radius: 8px; color: #e9d8af; background: rgba(255,255,255,.035); font-weight: 800; }
.mi-companion-tabs { position: sticky; z-index: 3; top: -20px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; margin: 0 -4px 12px; padding: 5px 4px; background: rgba(5,14,19,.98); }
.mi-sheet.panel-companions > .mi-companion-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }.mi-body-growth-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mi-growth-inline-forge { margin-top:12px; }.mi-growth-inline-forge + .mi-boost-vault { margin-top:12px; }
.mi-growth-keyart { position:relative; width:100%; min-height:0; margin-bottom:12px; overflow:hidden; border:1px solid rgba(231,186,83,.5); border-radius:14px; background:#061218; box-shadow:inset 0 0 34px rgba(0,0,0,.25),0 10px 26px rgba(0,0,0,.25); }
.mi-forge-keyart { aspect-ratio:1693 / 929; }
.mi-sword-art-keyart { aspect-ratio:3 / 2; }
.mi-growth-keyart::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,10,14,.96) 0%,rgba(3,10,14,.73) 34%,transparent 67%),linear-gradient(0deg,rgba(2,8,12,.82),transparent 48%); pointer-events:none; }
.mi-growth-keyart > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.mi-growth-keyart > div { position:absolute; z-index:2; left:clamp(14px,3cqw,25px); bottom:clamp(15px,3cqw,25px); width:min(48%,340px); display:grid; gap:4px; }
.mi-growth-keyart > div small { color:#6ce1d5; font-size:.59rem; font-weight:950; letter-spacing:.13em; }
.mi-growth-keyart h3 { margin:0; color:#fff0c3; font:900 clamp(1.3rem,3.6cqw,2rem) Georgia,"Noto Serif KR",serif; text-shadow:0 3px 9px #000; }
.mi-growth-keyart p { margin:0 !important; color:#c6d5d0 !important; font-size:clamp(.68rem,1.8cqw,.82rem) !important; line-height:1.5 !important; text-shadow:0 2px 5px #000; }
.mi-growth-keyart > div span { width:max-content; margin-top:3px; padding:3px 8px; border:1px solid rgba(94,224,208,.42); border-radius:12px; color:#8cecdf; background:rgba(12,74,71,.52); font-size:.58rem; font-weight:900; }
.mi-growth-keyart > b { position:absolute; z-index:2; top:12px; right:12px; padding:5px 10px; border:1px solid rgba(244,197,83,.7); border-radius:14px; color:#ffe494; background:rgba(30,19,8,.78); font-size:.72rem; box-shadow:0 0 14px rgba(242,185,56,.15); }
.mi-premium-growth-summary { grid-template-columns:repeat(3,minmax(0,1fr)) !important; margin-bottom:12px; }.mi-premium-growth-summary > div { min-height:78px; display:grid; align-content:center; gap:2px; padding:10px 12px !important; border:1px solid rgba(121,183,174,.16); }.mi-premium-growth-summary span { color:#869f9a; font-size:.59rem; }.mi-growth-track { margin-bottom:12px; padding:12px; border:1px solid rgba(222,181,79,.28); border-radius:11px; background:linear-gradient(145deg,rgba(72,46,17,.18),rgba(8,25,29,.92)); }.mi-growth-track > header,.mi-growth-track > footer { display:flex; align-items:end; justify-content:space-between; gap:10px; }.mi-growth-track > header div { display:grid; }.mi-growth-track > header small { color:#66dcd0; font-size:.51rem; font-weight:950; letter-spacing:.12em; }.mi-growth-track > header strong { color:#f3e3bd; font-size:.8rem; }.mi-growth-track > header > span { color:#ffd76c; font-size:.7rem; font-weight:950; }.mi-growth-track > div { position:relative; height:12px; margin:9px 0 6px; overflow:visible; border:1px solid #77643d; border-radius:8px; background:#030b0e; }.mi-growth-track > div i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#39bfb4,#f2c657); box-shadow:0 0 10px rgba(90,221,204,.35); }.mi-growth-track > div b { position:absolute; right:4px; top:-17px; color:#e9ce82; font-size:.52rem; }.mi-growth-track footer { color:#829894; font-size:.55rem; }
.mi-growth-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }.mi-growth-benefit-grid article { min-width:0; min-height:112px; display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:8px; padding:9px; border:1px solid rgba(116,196,185,.2); border-radius:10px; background:linear-gradient(145deg,rgba(16,43,47,.72),rgba(7,17,22,.96)); }.mi-growth-benefit-grid img { width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 5px 6px #000); }.mi-growth-benefit-grid article span { min-width:0; display:grid; gap:2px; }.mi-growth-benefit-grid small { color:#65d9cd; font-size:.5rem; font-weight:950; }.mi-growth-benefit-grid strong { color:#f4e4bf; font-size:.68rem; }.mi-growth-benefit-grid p { margin:0 !important; color:#91a8a3 !important; font-size:.56rem !important; line-height:1.4 !important; }
.mi-growth-lore { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; margin-bottom:12px; padding:10px 12px; border-left:3px solid #d9ac4f; border-radius:3px 9px 9px 3px; background:rgba(184,121,35,.09); }.mi-growth-lore span { color:#f2c75d; font-size:.62rem; font-weight:950; white-space:nowrap; }.mi-growth-lore p { margin:0 !important; color:#aebdb8 !important; font-size:.63rem !important; line-height:1.45 !important; }
.mi-premium-skill-grid { gap:8px !important; margin-bottom:12px; }.mi-premium-skill-grid article { position:relative; min-height:148px; display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto 1fr; align-content:center; column-gap:9px; padding:10px !important; text-align:left !important; }.mi-premium-skill-grid article > span { position:absolute; top:7px; right:8px; }.mi-premium-skill-grid article > i { grid-row:1 / span 3; width:52px; height:52px; display:grid; place-items:center; border:1px solid #7b693f; border-radius:50%; color:#e9c85f; background:radial-gradient(circle,#27464a,#071114 70%); font:900 1.15rem Georgia,serif; box-shadow:inset 0 0 13px rgba(101,232,214,.12); }.mi-premium-skill-grid article > strong,.mi-premium-skill-grid article > small,.mi-premium-skill-grid article > p { grid-column:2; }.mi-premium-skill-grid article > p { margin:3px 0 0 !important; color:#8da29e !important; font-size:.55rem !important; line-height:1.4 !important; }.mi-premium-skill-grid article.is-unlocked > i { border-color:#e6b94e; box-shadow:inset 0 0 14px rgba(255,202,82,.16),0 0 12px rgba(228,175,52,.12); }
@container (max-width:520px) { .mi-growth-keyart > div { width:62%; }.mi-premium-growth-summary,.mi-growth-benefit-grid { grid-template-columns:1fr !important; }.mi-growth-benefit-grid article { min-height:86px; }.mi-premium-skill-grid { grid-template-columns:1fr !important; }.mi-premium-skill-grid article { min-height:110px; } }
.mi-companion-tabs button { min-height: 42px; border: 1px solid rgba(216,188,119,.2); border-radius: 7px; color: #aebdbb; background: rgba(255,255,255,.035); font-size: clamp(11px, 2cqw, 14px); font-weight: 850; }
.mi-companion-tabs button.is-selected { border-color: color-mix(in srgb, var(--region-accent) 58%, #d8b463); color: #fff2c9; background: linear-gradient(180deg, rgba(61,121,119,.42), rgba(127,78,23,.2)); box-shadow: inset 0 -2px 0 var(--region-accent); }
.mi-companion-management > header, .mi-inheritance-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mi-companion-management > header div, .mi-inheritance-panel > header { display: grid; }.mi-companion-management > header small, .mi-inheritance-panel header small { color: var(--region-accent); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }.mi-companion-management > header strong, .mi-inheritance-panel header strong { color: #f7edd5; font-size: 1.02rem; }.mi-companion-management > header > span { color: #f5d37b; font-size: .72rem; font-weight: 900; }
.mi-companion-management > p, .mi-inheritance-panel > p { margin: 4px 0 12px; color: #9eb0ad; font-size: clamp(11px, 1.9cqw, 13px); }
.mi-companion-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mi-companion-card { position: relative; min-width: 0; min-height: 80px; display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 8px; padding: 7px; overflow: hidden; border: 1px solid rgba(215,186,112,.22); border-radius: 10px; color: #dbe6e2; background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); text-align: left; }
.mi-companion-card > i, .mi-growth-roster article > i { width: 64px; aspect-ratio: 1; border: 1px solid rgba(237,203,118,.35); border-radius: 8px; background-color: #020608; background-repeat: no-repeat; background-position: center 16%; background-size: 112% auto; box-shadow: inset 0 -16px 20px rgba(0,0,0,.22), 0 0 0 1px rgba(95,210,190,.06); }
.mi-companion-card > span { min-width: 0; display: grid; gap: 2px; }.mi-companion-card > span strong { overflow: hidden; color: #fff0c8; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }.mi-companion-card > span small { color: var(--region-accent); font-size: .63rem; }.mi-companion-card > span em { color: #9dafaa; font-size: .61rem; font-style: normal; }.mi-companion-card > b { position: absolute; right: 7px; bottom: 5px; color: #9fafaa; font-size: .58rem; }
button.mi-companion-card { cursor: pointer; }.mi-companion-card.is-selected { border-color: #f0c45c; background: linear-gradient(135deg, rgba(174,111,25,.28), rgba(36,102,99,.16)); box-shadow: inset 0 0 18px rgba(255,205,93,.08); }.mi-companion-card.is-selected > b { color: #ffd66b; }.mi-companion-card.is-locked { filter: grayscale(.9); opacity: .48; }
.mi-formation-management { display: block; }
.mi-formation-recommendation { margin:0 0 12px; padding:10px; border:1px solid rgba(231,187,76,.48); border-radius:12px; background:radial-gradient(circle at 10% 0,rgba(236,185,55,.13),transparent 38%),linear-gradient(135deg,rgba(29,37,29,.96),rgba(6,27,32,.96)); box-shadow:inset 0 0 26px rgba(255,211,91,.035); }
.mi-formation-recommendation > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.mi-formation-recommendation > header > div { display:grid; gap:2px; min-width:0; }.mi-formation-recommendation > header small { color:#68ddd0; font-size:.58rem; font-weight:950; letter-spacing:.11em; }.mi-formation-recommendation > header strong { color:#ffe7a3; font-size:.85rem; }.mi-formation-recommendation > header span { color:#a7c7c1; font-size:.6rem; }
.mi-formation-recommendation > header button { min-height:34px; padding:0 13px; border:1px solid #e5b94c; border-radius:8px; color:#fff1bc; background:linear-gradient(180deg,#78501e,#493218); font-size:.65rem; font-weight:950; white-space:nowrap; cursor:pointer; }.mi-formation-recommendation > header button:disabled { opacity:.55; cursor:default; }
.mi-formation-recommendation > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }.mi-formation-recommendation article { min-width:0; display:flex; align-items:center; gap:6px; padding:6px; border:1px solid rgba(105,199,188,.23); border-radius:8px; background:rgba(5,20,25,.78); }.mi-formation-recommendation article i { width:34px; height:40px; flex:0 0 34px; border:1px solid rgba(224,184,76,.45); border-radius:7px; background-position:var(--sprite-x,50%) var(--sprite-y,50%); background-size:cover; background-repeat:no-repeat; }.mi-formation-recommendation article span { min-width:0; display:grid; gap:1px; }.mi-formation-recommendation article strong,.mi-formation-recommendation article small,.mi-formation-recommendation article em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mi-formation-recommendation article strong { color:#f4ecd1; font-size:.66rem; }.mi-formation-recommendation article small { color:#9bb2ae; font-size:.51rem; }.mi-formation-recommendation article em { color:#67ddcd; font-size:.52rem; font-style:normal; font-weight:850; }
.mi-formation-recommendation > p { margin:8px 0 0; color:#849f9b; font-size:.56rem; line-height:1.45; }
.mi-formation-preview { margin-bottom: 12px; padding: 9px; overflow: hidden; border: 1px solid rgba(107,223,208,.36); border-radius: 12px; background: radial-gradient(circle at 50% 0,rgba(66,182,169,.14),transparent 40%),linear-gradient(180deg,rgba(10,31,38,.94),rgba(4,16,22,.96)); box-shadow: inset 0 0 24px rgba(93,226,210,.035); }
.mi-formation-preview-heading { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; padding: 0 3px 6px; border-bottom: 1px solid rgba(125,205,195,.14); }
.mi-formation-preview-heading > span { display: flex; align-items: center; gap: 5px; color: #bce7df; font-size: clamp(10px,1.75cqw,12px); font-weight: 850; }.mi-formation-preview-heading > span b { color: #ffe083; font-size: 1rem; }.mi-formation-preview-heading > small { color: #829995; font-size: clamp(9px,1.5cqw,10px); white-space: nowrap; }
.mi-formation-main { width: min(48%,240px); min-height: 86px; display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 10px; margin: 0 auto 9px; padding: 7px 11px 7px 7px; border: 1px solid rgba(231,189,88,.54); border-radius: 11px; background: linear-gradient(135deg,rgba(164,103,25,.28),rgba(26,91,88,.19)); box-shadow: inset 0 0 18px rgba(255,210,102,.05),0 7px 18px rgba(0,0,0,.22); }
.mi-formation-main > i { width: 72px; height: 72px; border-radius: 9px; background-color: #02080b; background-repeat: no-repeat; background-position: center bottom; background-size: contain; box-shadow: inset 0 -12px 18px rgba(0,0,0,.2); }.mi-formation-main > span { min-width: 0; display: grid; gap: 3px; }.mi-formation-main small { color: #e8c970; font-size: .58rem; font-weight: 850; }.mi-formation-main strong { overflow: hidden; color: #fff2ce; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.mi-formation-slots { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.mi-formation-unit { position: relative; min-width: 0; height: 184px; display: grid; grid-template-rows: 22px minmax(0,1fr) auto 27px; align-items: stretch; gap: 4px; padding: 6px; border: 1px solid rgba(205,177,107,.27); border-radius: 10px; color: #dce9e4; background: linear-gradient(180deg,rgba(20,43,48,.96),rgba(7,22,28,.98)); box-shadow: 0 6px 16px rgba(0,0,0,.18); cursor: grab; touch-action: pan-y; user-select: none; transition: border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease; }
.mi-formation-unit:active { cursor: grabbing; }.mi-formation-unit:hover { border-color: rgba(237,196,91,.68); box-shadow: 0 8px 20px rgba(0,0,0,.28),inset 0 0 14px rgba(255,210,100,.04); transform: translateY(-2px); }.mi-formation-unit.is-dragging { border-color: #ffe084; opacity: .5; transform: scale(.96); }.mi-formation-unit.is-drop-target { border-color: #70e8da; background: linear-gradient(180deg,rgba(31,91,89,.96),rgba(8,34,39,.98)); box-shadow: 0 0 0 2px rgba(112,232,218,.18),0 0 22px rgba(78,222,205,.2); transform: translateY(-3px); }
.mi-formation-unit > header { display: flex; align-items: center; justify-content: space-between; }.mi-formation-unit > header > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #b48d3e; border-radius: 50%; color: #ffe188; background: #18272b; font-size: .65rem; font-weight: 950; }.mi-drag-handle { color: #7fa8a2; font-size: 1.05rem; line-height: 1; }
.mi-formation-unit > i { min-height: 0; width: 100%; height: 100%; border-radius: 7px; background-color: #02080b; background-repeat: no-repeat; background-position: center bottom; background-size: contain; box-shadow: inset 0 -15px 17px rgba(0,0,0,.28); pointer-events: none; }
.mi-formation-unit > span { min-width: 0; display: grid; justify-items: center; gap: 1px; }.mi-formation-unit > span strong { max-width: 100%; overflow: hidden; color: #fff0c5; font-size: clamp(11px,1.85cqw,13px); text-overflow: ellipsis; white-space: nowrap; }.mi-formation-unit > span small { max-width: 100%; overflow: hidden; color: #80d8ca; font-size: clamp(8px,1.35cqw,9px); text-overflow: ellipsis; white-space: nowrap; }
.mi-formation-unit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }.mi-formation-unit-actions button { min-width: 0; min-height: 27px; padding: 0; border: 1px solid rgba(175,156,107,.34); border-radius: 5px; color: #e7dfc9; background: rgba(255,255,255,.055); font-size: .82rem; font-weight: 900; cursor: pointer; }.mi-formation-unit-actions button:hover:not(:disabled),.mi-formation-unit-actions button:focus-visible { border-color: #e4bd5e; color: #ffe38f; background: rgba(178,114,28,.2); outline: none; }.mi-formation-unit-actions button:disabled { opacity: .24; cursor: default; }
.mi-companion-sortbar { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin:0 0 9px; padding:6px; border:1px solid rgba(113,190,181,.18); border-radius:9px; background:rgba(6,22,27,.76); }.mi-companion-sortbar > span { margin-right:auto; padding-left:4px; color:#89aaa4; font-size:.6rem; font-weight:850; }.mi-companion-sortbar button { min-height:29px; padding:0 10px; border:1px solid rgba(210,185,119,.24); border-radius:6px; color:#aabbb7; background:rgba(255,255,255,.035); font-size:.59rem; font-weight:900; cursor:pointer; }.mi-companion-sortbar button:hover,.mi-companion-sortbar button:focus-visible { border-color:#6edacc; color:#d5fff7; outline:none; }.mi-companion-sortbar button.is-selected { border-color:#e4ba54; color:#ffe18a; background:linear-gradient(180deg,rgba(139,91,25,.35),rgba(39,100,95,.22)); box-shadow:inset 0 -2px #d8a93f; }
.mi-rarity-mark { display:inline-flex; align-items:center; margin-right:5px; padding:1px 5px; border:1px solid currentColor; border-radius:999px; color:#a9c9c3; background:rgba(80,123,119,.12); font-size:.48rem; font-weight:950; line-height:1.35; }.mi-rarity-mark.rarity-epic { color:#c79aff; background:rgba(109,56,159,.18); }.mi-rarity-mark.rarity-legendary { color:#ffd56b; background:rgba(178,112,23,.2); box-shadow:0 0 8px rgba(246,190,60,.12); }.mi-companion-card.rarity-epic:not(.is-selected) { border-color:rgba(167,109,226,.32); }.mi-companion-card.rarity-legendary:not(.is-selected) { border-color:rgba(233,181,65,.42); background:linear-gradient(135deg,rgba(139,88,20,.13),rgba(255,255,255,.015)); }
.mi-formation-roster { align-content: start; }
.mi-premium-balance { padding: 5px 10px; border: 1px solid rgba(129,232,218,.44); border-radius: 999px; color: #9ff5e6 !important; background: rgba(19,78,77,.32); box-shadow: 0 0 14px rgba(93,229,209,.1); }
.mi-growth-management { display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden !important; }
.mi-growth-workspace { min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(132px, 28%) minmax(0, 1fr); align-items: stretch; gap: 9px; }
.mi-growth-roster { min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(76px, 1fr)); gap: 5px; }
.mi-growth-roster > button { min-width: 0; min-height: 76px; height: 100%; display: grid; grid-template-columns: clamp(52px, 9cqw, 72px) minmax(0,1fr); align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; color: #d8e5e1; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.mi-growth-roster > button.is-selected { border-color: #e7bd59; background: linear-gradient(135deg,rgba(173,112,27,.29),rgba(35,111,103,.18)); box-shadow: inset 3px 0 #f1ca67, 0 0 16px rgba(232,181,73,.08); }
.mi-growth-roster > button > i { width: 100%; height: 100%; max-height: 112px; border: 1px solid rgba(237,203,118,.35); border-radius: 8px; background-color: #020608; background-repeat: no-repeat; background-position: center bottom; background-size: contain; box-shadow: inset 0 -13px 18px rgba(0,0,0,.2); }
.mi-growth-roster > button > span { min-width: 0; display: grid; gap: 2px; }.mi-growth-roster > button strong { overflow: hidden; color: #fff0c8; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.mi-growth-roster > button small { color: #9cb5b0; font-size: .56rem; white-space: nowrap; }
.mi-growth-detail { min-width: 0; min-height: 0; height: 100%; display: grid; align-content: space-between; gap: 10px; overflow: auto; padding: 12px; border: 1px solid rgba(225,187,97,.3); border-radius: 12px; background: linear-gradient(145deg,rgba(19,39,43,.88),rgba(5,17,22,.92)); box-shadow: inset 0 0 24px rgba(86,226,205,.035); scrollbar-width: thin; }
.mi-growth-detail > header { min-height: clamp(124px, 22cqw, 158px); display: grid; grid-template-columns: clamp(92px, 25cqw, 132px) minmax(0,1fr); align-items: center; gap: 12px; position: relative; }.mi-growth-detail > header > i { grid-row: 1 / 3; width: 100%; height: 100%; max-height: 158px; border: 1px solid #b98b43; border-radius: 11px; background-color: rgba(2,6,8,.74); background-repeat: no-repeat; background-position: center bottom; background-size: contain; box-shadow: 0 6px 20px #000; }.mi-growth-detail > header > div { min-width: 0; display: grid; }.mi-growth-detail > header small { color: var(--region-accent); font-size: .61rem; font-weight: 900; }.mi-growth-detail > header h3 { overflow: hidden; margin: 2px 0; color: #fff0c7; font: 800 clamp(1.08rem,3.2cqw,1.45rem)/1.1 Georgia,"Noto Serif KR",serif; text-overflow: ellipsis; white-space: nowrap; }.mi-growth-detail > header span { color: #b5c6c1; font-size: .68rem; }.mi-growth-detail > header > strong { color: #ffd368; font-size: .72rem; }
.mi-growth-stats { grid-template-columns: repeat(3,1fr) !important; gap: 5px !important; margin: 0 !important; }.mi-growth-stats div { padding: 6px 7px !important; text-align: center; }.mi-growth-stats dt { font-size: .55rem !important; }.mi-growth-stats dd { margin-top: 2px !important; color: #fff0c1; font-size: .72rem; }
.mi-growth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.mi-growth-actions button { min-width: 0; min-height: 47px; display: grid; place-content: center; border: 1px solid #a7793c; border-radius: 8px; color: #fff0c8; background: linear-gradient(180deg,#704321,#38251c); font-weight: 900; cursor: pointer; }.mi-growth-actions button:last-child { border-color: #4e958e; background: linear-gradient(180deg,#285f5b,#17343a); }.mi-growth-actions span { font-size: .7rem; }.mi-growth-actions small { color: #edcb82; font-size: .54rem; }.mi-growth-actions button:disabled { filter: grayscale(.7); opacity: .4; cursor: default; }
.mi-personal-equipment, .mi-companion-skins { display: grid; align-content: center; }
.mi-personal-equipment h4, .mi-companion-skins h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 0 7px; color: #f2e4c2; font-size: .76rem; }.mi-personal-equipment h4 small, .mi-companion-skins h4 small { color: #879d99; font-size: .55rem; font-weight: 500; }
.mi-personal-equipment > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.mi-personal-equipment button { position: relative; min-width: 0; min-height: 86px; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 7px; padding: 7px; overflow: hidden; border: 1px solid rgba(202,174,107,.28); border-radius: 10px; color: #d8dfd9; background: linear-gradient(145deg,rgba(21,35,42,.94),rgba(7,14,19,.98)); text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.04),0 5px 15px rgba(0,0,0,.22); cursor:pointer; }.mi-personal-equipment button::before { content:""; position:absolute; width:70px; height:70px; left:-8px; top:8px; border-radius:50%; background:radial-gradient(circle,rgba(238,190,76,.15),transparent 68%); }.mi-personal-equipment button > i { position:relative; display:grid; width:54px; aspect-ratio:1; place-items:center; overflow:hidden; border:1px solid #8e7035; border-radius:9px; background:radial-gradient(circle,#253a43,#081116 74%); box-shadow:inset 0 0 14px rgba(255,214,91,.1); font-style:normal; }.mi-personal-equipment button > i img { width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 4px 4px #000); }.mi-personal-equipment button > span { min-width:0; display:grid; gap:1px; }.mi-personal-equipment button > span > small:first-child { color:#74ddd1; font-size:.43rem; font-weight:900; letter-spacing:.08em; }.mi-personal-equipment button strong { overflow:hidden; color:#f6e8c5; font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }.mi-personal-equipment button small { color:#91a8a3; font-size:.46rem; }.mi-personal-equipment button em { position:absolute; right:6px; bottom:4px; padding:1px 5px; border-radius:10px; color:#aab8b4; background:rgba(0,0,0,.35); font-size:.44rem; font-style:normal; }.mi-personal-equipment button.is-equipped { border-color:#f0c55a; background:linear-gradient(145deg,rgba(82,60,22,.72),rgba(10,25,28,.98)); box-shadow:inset 0 0 20px rgba(255,207,88,.1),0 0 12px rgba(237,185,61,.12); }.mi-personal-equipment button.is-equipped > i { border-color:#f2ca5d; box-shadow:inset 0 0 16px rgba(255,214,91,.2),0 0 10px rgba(255,205,73,.16); }.mi-personal-equipment button.is-equipped em { color:#ffe18a; }
.mi-companion-skins > div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.mi-companion-skins button { position:relative; min-width:0; min-height:108px; display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:8px; padding:7px 8px; overflow:hidden; border:1px solid rgba(177,155,105,.28); border-radius:11px; color:#dbe3df; background:linear-gradient(145deg,rgba(23,34,40,.94),rgba(7,14,20,.98)); text-align:left; box-shadow:inset 0 1px rgba(255,255,255,.04),0 5px 16px rgba(0,0,0,.23); cursor:pointer; }.mi-companion-skins button > i { align-self:stretch; display:grid; place-items:end center; overflow:hidden; border:1px solid rgba(109,206,196,.28); border-radius:8px; background:radial-gradient(circle at 50% 35%,rgba(95,225,213,.2),transparent 55%),#071116; }.mi-companion-skins button > i img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 5px 5px #000); }.mi-companion-skins button > span { min-width:0; display:grid; gap:4px; }.mi-companion-skins strong { overflow:hidden; color:#f4e6c5; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }.mi-companion-skins small { color:#8ea5a0; font-size:.46rem; line-height:1.35; }.mi-companion-skins em { position:absolute; right:7px; bottom:6px; padding:2px 6px; border:1px solid rgba(108,225,210,.25); border-radius:10px; color:#7fe3d4; background:rgba(4,18,21,.8); font-size:.5rem; font-style:normal; font-weight:900; }.mi-companion-skins button.is-active { border-color:#69dfd0; background:radial-gradient(circle at 20% 25%,rgba(79,226,210,.18),transparent 42%),linear-gradient(145deg,rgba(27,73,72,.85),rgba(8,23,31,.98)); box-shadow:inset 0 0 18px rgba(90,230,211,.1),0 0 13px rgba(61,207,192,.12); }.mi-companion-skins button.is-active > i { border-color:#77eadc; box-shadow:0 0 12px rgba(76,223,208,.18); }
.mi-growth-detail.skin-moon-regalia { border-color:rgba(102,224,211,.58); background:radial-gradient(circle at 18% 8%,rgba(87,221,207,.18),transparent 33%),linear-gradient(145deg,rgba(22,38,56,.94),rgba(8,17,28,.96)); }.mi-companion.skin-moon-regalia::before { content:""; position:absolute; inset:8% -10% 18%; border-radius:50%; background:radial-gradient(circle,rgba(101,240,224,.22),transparent 65%); filter:blur(5px); }
.mi-companion.unit-cheongha.skin-moon-regalia .mi-companion-sprite,
.mi-growth-roster .hero-cheongha.skin-moon-regalia > i,
.mi-growth-detail.hero-cheongha.skin-moon-regalia > header > i,
.mi-companion-skins .hero-cheongha.skin-moon-regalia > i img { mix-blend-mode:normal; filter:hue-rotate(34deg) saturate(1.32) brightness(1.1); }

.mi-inheritance-compact-copy { margin:0 0 9px !important; padding:7px 9px; border-left:2px solid #5eddd0; color:#a7bbb6 !important; background:rgba(65,209,194,.045); font-size:.58rem !important; }
.mi-equipment-inventory h4 > span { display:grid; gap:1px; }.mi-equipment-inventory h4 > span small { display:block; }
.mi-equipment-inventory .mi-bag-toggle { min-height:27px; padding:4px 8px; border:1px solid #4d968e; border-radius:7px; color:#8ce6da; background:linear-gradient(180deg,#16373a,#0a2025); font-size:.51rem; font-weight:900; cursor:pointer; }
.mi-equipment-inventory .mi-equipped-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.mi-equipment-inventory .mi-equipped-slots > article { min-width:0; min-height:68px; display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:6px; padding:6px; border:1px solid rgba(203,174,105,.26); border-radius:9px; background:linear-gradient(145deg,rgba(25,36,42,.95),rgba(6,14,18,.97)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.mi-equipment-inventory .mi-equipped-slots > article > i { width:46px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:1px solid #725f36; border-radius:8px; background:radial-gradient(circle,#263d43,#081216 75%); font-style:normal; }.mi-equipment-inventory .mi-equipped-slots > article > i img { width:94%; height:94%; object-fit:contain; filter:drop-shadow(0 4px 4px #000); }.mi-equipment-inventory .mi-equipped-slots > article > i span { color:#667773; font-size:1.25rem; }
.mi-equipment-inventory .mi-equipped-slots > article > div { min-width:0; display:grid; }.mi-equipment-inventory .mi-equipped-slots small { color:#6bd7cb; font-size:.43rem; font-weight:900; }.mi-equipment-inventory .mi-equipped-slots strong { overflow:hidden; color:#f4e5bf; font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; }.mi-equipment-inventory .mi-equipped-slots em { overflow:hidden; color:#8fa49f; font-size:.43rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.mi-equipment-inventory .mi-equipped-slots > article.is-empty { opacity:.62; border-style:dashed; }
.mi-equipment-bag { display:block !important; margin-top:7px; padding:8px; border:1px solid rgba(83,207,193,.3); border-radius:10px; background:linear-gradient(160deg,rgba(8,29,34,.96),rgba(4,12,17,.98)); box-shadow:inset 0 0 20px rgba(61,207,193,.04); }
.mi-equipment-bag > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }.mi-equipment-bag > header > div { display:grid; }.mi-equipment-bag > header small { color:#66d9cd; font-size:.43rem; font-weight:900; letter-spacing:.11em; }.mi-equipment-bag > header strong { color:#f1e3bd; font-size:.68rem; }.mi-equipment-bag > header > span { color:#f1c65c; font-size:.54rem; font-weight:900; }
.mi-equipment-craft { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; margin-bottom:7px; }.mi-equipment-craft button { min-width:0; min-height:42px !important; display:grid !important; grid-template-columns:30px minmax(0,1fr) !important; gap:4px !important; padding:4px 5px !important; border:1px solid rgba(214,178,81,.28) !important; border-radius:7px !important; background:linear-gradient(145deg,#332818,#11191b) !important; }.mi-equipment-craft img { width:30px; height:30px; object-fit:contain; }.mi-equipment-craft span { min-width:0; display:grid; }.mi-equipment-craft strong { overflow:hidden; color:#eadcb6; font-size:.48rem; text-overflow:ellipsis; white-space:nowrap; }.mi-equipment-craft small { color:#c9a95d; font-size:.4rem; }
.mi-equipment-bag-grid { max-height:310px; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#4aa89c #07171a; }.mi-equipment-bag-grid > article { min-width:0; display:grid; grid-template-columns:58px minmax(0,1fr); gap:6px; padding:6px; border:1px solid rgba(176,153,98,.22); border-radius:9px; background:rgba(255,255,255,.025); }.mi-equipment-bag-grid > article.is-selected-hero { border-color:#edbe4f; background:rgba(133,92,24,.14); }.mi-equipment-bag-grid > article.is-used:not(.is-selected-hero) { border-color:#4f928a; }
.mi-equipment-bag-grid figure { position:relative; width:58px; height:58px; margin:0; display:grid; place-items:center; border:1px solid #6e5c34; border-radius:8px; background:radial-gradient(circle,#253d43,#071115 75%); }.mi-equipment-bag-grid figure img { width:94%; height:94%; object-fit:contain; filter:drop-shadow(0 4px 4px #000); }.mi-equipment-bag-grid figure b { position:absolute; right:2px; bottom:2px; padding:1px 4px; border-radius:8px; color:#ffe180; background:#071014df; font-size:.46rem; }
.mi-bag-item-copy { min-width:0; display:grid; align-content:center; }.mi-bag-item-copy small { color:#65d4c8; font-size:.41rem; }.mi-bag-item-copy strong { overflow:hidden; color:#f0e2bd; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }.mi-bag-item-copy span { color:#91a7a2; font-size:.42rem; }
.mi-bag-item-actions { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }.mi-bag-item-actions button { min-width:0; min-height:28px; padding:3px; border:1px solid #397d77; border-radius:6px; color:#bff3eb; background:#0e302f; font-size:.47rem; font-weight:900; }.mi-bag-item-actions button small { display:block; color:#76a8a1; font-size:.36rem; }.mi-bag-item-actions button.is-sell { border-color:#8a623e; color:#eac58f; background:#312119; }.mi-bag-item-actions button:disabled,.mi-equipment-craft button:disabled { filter:grayscale(.8); opacity:.38; cursor:default; }
@container (max-width:480px) { .mi-equipment-bag-grid { grid-template-columns:minmax(0,1fr) !important; }.mi-equipment-inventory .mi-equipped-slots { grid-template-columns:minmax(0,1fr); }.mi-equipment-craft { grid-template-columns:minmax(0,1fr) !important; } }

/* 육성·장비 가방 가독성 보정 */
.mi-growth-management > p { font-size:.68rem !important; line-height:1.55; }
.mi-growth-roster button strong { font-size:.68rem !important; }.mi-growth-roster button small { font-size:.56rem !important; }
.mi-growth-detail > header small { font-size:.7rem !important; }.mi-growth-detail > header span { font-size:.76rem !important; }.mi-growth-detail > header > strong { font-size:.78rem !important; }
.mi-growth-stats dt { font-size:.64rem !important; }.mi-growth-stats dd { font-size:.82rem !important; }
.mi-growth-actions span { font-size:.78rem !important; }.mi-growth-actions small { font-size:.61rem !important; }
.mi-personal-equipment h4,.mi-companion-skins h4 { font-size:.88rem !important; }.mi-personal-equipment h4 small,.mi-companion-skins h4 small { font-size:.62rem !important; }
.mi-equipment-inventory .mi-bag-toggle { min-height:32px; padding:5px 10px; font-size:.64rem; }
.mi-equipment-inventory .mi-equipped-slots small { font-size:.55rem; }.mi-equipment-inventory .mi-equipped-slots strong { font-size:.68rem; }.mi-equipment-inventory .mi-equipped-slots em { font-size:.53rem; }
.mi-equipment-bag > header small { font-size:.53rem; }.mi-equipment-bag > header strong { font-size:.8rem; }.mi-equipment-bag > header > span { font-size:.66rem; }
.mi-equipment-craft button { min-height:50px !important; }.mi-equipment-craft strong { font-size:.61rem; }.mi-equipment-craft small { font-size:.5rem; }
.mi-bag-item-copy small { font-size:.52rem; line-height:1.35; }.mi-bag-item-copy strong { font-size:.7rem; }.mi-bag-item-copy span { font-size:.54rem; line-height:1.4; }
.mi-bag-item-actions button { min-height:35px; font-size:.6rem; }.mi-bag-item-actions button small { font-size:.46rem; }
.mi-equipment-bag-grid > article.rarity-epic { border-color:rgba(150,99,235,.52); background:linear-gradient(145deg,rgba(65,36,102,.18),rgba(255,255,255,.025)); }.mi-equipment-bag-grid > article.rarity-epic figure { border-color:#8d62c9; }
.mi-equipment-bag-grid > article.rarity-legendary { border-color:rgba(239,181,64,.62); background:linear-gradient(145deg,rgba(119,70,20,.2),rgba(255,255,255,.025)); box-shadow:inset 0 0 14px rgba(242,187,62,.07); }.mi-equipment-bag-grid > article.rarity-legendary figure { border-color:#dba93c; box-shadow:0 0 10px rgba(235,177,48,.12); }

/* 계정 공용 장비 가방과 직업별 무기 아틀라스 */
.mi-account-equipment-bag { margin-top:12px; padding:12px; border:1px solid rgba(90,211,199,.38); border-radius:13px; background:linear-gradient(150deg,rgba(8,31,37,.97),rgba(5,13,18,.99)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.22); }
.mi-account-equipment-bag > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.mi-account-equipment-bag > header > div { display:grid; gap:2px; }.mi-account-equipment-bag > header small { color:#68ddd1; font-size:.58rem; font-weight:950; letter-spacing:.13em; }.mi-account-equipment-bag > header strong { color:#f7e8c0; font-size:1rem; }.mi-account-equipment-bag > header p { margin:2px 0 0; color:#9eb3af; font-size:.68rem; line-height:1.45; }.mi-account-equipment-bag > header .mi-bag-toggle { flex:0 0 auto; min-height:36px; padding:6px 12px; font-size:.7rem; }
.mi-bag-selected-hero { margin-top:9px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(225,184,75,.28); border-radius:9px; background:rgba(117,77,20,.1); }.mi-bag-selected-hero span { color:#9baea9; font-size:.62rem; }.mi-bag-selected-hero strong { color:#ffe29a; font-size:.78rem; }.mi-bag-selected-hero em { padding:2px 7px; border-radius:10px; color:#69ddd0; background:rgba(51,176,165,.12); font-size:.62rem; font-style:normal; font-weight:900; }.mi-bag-selected-hero b { margin-left:auto; color:#eec75f; font-size:.65rem; }
.mi-account-equipment-bag .mi-equipment-bag { margin-top:9px; padding:0; border:0; background:transparent; box-shadow:none; }.mi-account-equipment-bag .mi-equipment-bag-grid { max-height:390px; }
.mi-equipment-bag-grid > article.is-incompatible { opacity:.57; filter:saturate(.62); }.mi-equipment-bag-grid > article.is-incompatible .mi-bag-item-actions > button:first-child { color:#899793; border-color:#42524f; background:#111b1d; }
.mi-weapon-atlas { overflow:hidden !important; background-image:url('/images/maru-idle/equipment/personal/weapon-atlas-v1.png') !important; background-repeat:no-repeat !important; background-size:300% 200% !important; }.mi-weapon-atlas > img { width:100% !important; height:100% !important; opacity:0 !important; transform:none !important; }.weapon-atlas-sword { background-position:0 0 !important; }.weapon-atlas-spear { background-position:50% 0 !important; }.weapon-atlas-bow { background-position:100% 0 !important; }.weapon-atlas-staff { background-position:0 100% !important; }.weapon-atlas-mace { background-position:50% 100% !important; }.weapon-atlas-dagger { background-position:100% 100% !important; }
.mi-equipment-inventory .mi-equipped-slots > article.is-equipped { grid-template-columns:46px minmax(0,1fr) auto; }.mi-equipment-inventory .mi-equipped-slots > article.is-equipped > i { position:relative; }.mi-equipment-inventory .mi-equipped-slots > article.is-equipped > i > b { position:absolute; right:2px; bottom:2px; padding:1px 4px; border-radius:7px; color:#ffe17f; background:#061014e8; font-size:.48rem; }.mi-equipped-actions { display:grid; gap:3px; }.mi-equipped-actions > button { min-width:48px; min-height:26px; display:grid; place-items:center; padding:3px 6px; border:1px solid #517f79; border-radius:7px; color:#8ee0d6; background:#102a2d; font-size:.56rem; font-weight:900; line-height:1.05; cursor:pointer; }.mi-equipped-actions > button:first-child { border-color:#b78b36; color:#ffe08a; background:linear-gradient(#513019,#2d1e15); }.mi-equipped-actions > button small { color:inherit; font-size:.44rem; }.mi-equipped-actions > button:disabled { opacity:.42; cursor:not-allowed; }
.mi-loot-toast.is-equipment { grid-template-columns:58px minmax(0,1fr); justify-items:start; text-align:left; }.mi-loot-toast.is-equipment > span { grid-column:1 / -1; }.mi-loot-toast.is-equipment > figure { grid-row:2 / span 2; width:54px; height:54px; margin:0; overflow:hidden; border:1px solid #e3b94e; border-radius:9px; }.mi-loot-toast.is-equipment > strong,.mi-loot-toast.is-equipment > small { min-width:0; }.mi-loot-toast.is-equipment > figure img { display:block; }
@container (max-width:480px) { .mi-account-equipment-bag > header { align-items:stretch; flex-direction:column; }.mi-bag-selected-hero { flex-wrap:wrap; }.mi-bag-selected-hero b { width:100%; margin-left:0; } }
.mi-companion-skins strong { font-size:.68rem !important; }.mi-companion-skins small { font-size:.54rem !important; line-height:1.45; }.mi-companion-skins em { font-size:.6rem !important; }
@container (max-width: 480px) {
    .mi-stage .mi-formation-preview { padding: 8px; }
    .mi-stage .mi-formation-recommendation > header { align-items:stretch; flex-direction:column; }.mi-stage .mi-formation-recommendation > header button { width:100%; }.mi-stage .mi-formation-recommendation > div { grid-template-columns:repeat(2,minmax(0,1fr)); }.mi-stage .mi-formation-recommendation article:last-child { grid-column:1 / -1; }
    .mi-stage .mi-formation-main { width: 100%; min-height: 78px; grid-template-columns: 64px minmax(0,1fr); margin-bottom: 8px; }
    .mi-stage .mi-formation-main > i { width: 64px; height: 64px; }
    .mi-stage .mi-formation-slots { grid-template-columns: repeat(5,minmax(108px,1fr)); overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 7px; scrollbar-width: thin; scrollbar-color: #3f7772 transparent; }
    .mi-stage .mi-formation-unit { height: 172px; }
    .mi-stage .mi-companion-sortbar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.mi-stage .mi-companion-sortbar > span { grid-column:1 / -1; margin:0; }.mi-stage .mi-companion-sortbar button { min-width:0; padding:0 4px; }
    .mi-stage .mi-formation-roster { grid-template-columns: minmax(0,1fr); }
    .mi-stage .mi-growth-management { display: block; overflow: auto !important; }
    .mi-stage .mi-growth-workspace { height: auto; grid-template-columns: minmax(0, 1fr); align-items: start; }
    .mi-stage .mi-growth-roster { grid-template-columns: repeat(5, minmax(120px, 1fr)); grid-template-rows: 104px; overflow-x: auto; padding-bottom: 4px; }
    .mi-stage .mi-growth-roster > button { min-height: 100px; grid-template-columns: 46px minmax(0, 1fr); }
    .mi-stage .mi-growth-roster > button > i { height: 88px; }
    .mi-stage .mi-growth-detail { height: auto; overflow: visible; align-content: start; }
    .mi-stage .mi-growth-detail > header { min-height: 132px; grid-template-columns: 96px minmax(0, 1fr); }
    .mi-stage .mi-growth-detail > header > i { max-height: 132px; }
}
.mi-companion-message { margin: 0 !important; padding: 6px 8px; border-left: 2px solid var(--region-accent); color: #dce9e4 !important; background: rgba(88,211,194,.06); font-size: .55rem !important; line-height: 1.35 !important; }.mi-dev-premium { min-height: 38px !important; border: 1px dashed rgba(117,226,210,.48); border-radius: 8px; color: #aaf5e8; background: rgba(28,91,87,.18); font-size: .58rem; font-weight: 850; }
.mi-inheritance-panel { min-height:100%; display:grid; align-content:start; gap:0; padding-bottom:2px; }
.mi-inheritance-panel > header { display:flex; align-items:end; justify-content:space-between; gap:10px; }.mi-inheritance-panel > header > div { display:grid; }.mi-inheritance-panel > header > span { padding:5px 9px; border:1px solid rgba(238,191,83,.46); border-radius:999px; color:#ffe08b; background:rgba(117,73,17,.18); font-size:.52rem; font-weight:950; letter-spacing:.08em; box-shadow:inset 0 0 12px rgba(255,208,96,.05); }.mi-inheritance-panel > p { margin-bottom:9px; }
.mi-inheritance-relic { min-height:210px; display:grid; grid-template-columns:minmax(190px,.86fr) minmax(0,1.14fr); align-items:center; gap:15px; padding:13px 16px; overflow:hidden; border:1px solid rgba(230,184,77,.53); border-radius:15px; background:radial-gradient(circle at 22% 50%,rgba(73,214,198,.16),transparent 32%),radial-gradient(circle at 82% 0,rgba(235,181,67,.13),transparent 38%),linear-gradient(145deg,rgba(11,35,43,.98),rgba(5,17,24,.99)); box-shadow:inset 0 0 38px rgba(78,225,210,.045),0 10px 27px rgba(0,0,0,.28); }
.mi-inheritance-core { position:relative; width:min(100%,188px); aspect-ratio:1; margin:auto; border-radius:50%; background:radial-gradient(circle,rgba(255,230,142,.1),transparent 58%); }.mi-inheritance-core > i { position:absolute; inset:11%; border:1px solid rgba(102,229,213,.5); border-radius:50%; box-shadow:0 0 18px rgba(81,225,208,.13),inset 0 0 18px rgba(81,225,208,.08); animation:mi-inheritance-orbit 16s linear infinite; }.mi-inheritance-core > i::before,.mi-inheritance-core > i::after { content:""; position:absolute; inset:14%; border:1px solid rgba(232,187,81,.52); rotate:45deg; }.mi-inheritance-core > i::after { inset:30%; border-color:rgba(106,232,216,.54); rotate:0deg; }.mi-inheritance-core > i:nth-child(2) { inset:2%; border-style:dashed; border-color:rgba(227,183,76,.42); animation-direction:reverse; animation-duration:23s; }.mi-inheritance-core > span { position:absolute; z-index:2; width:46px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(230,189,88,.64); border-radius:50%; background:radial-gradient(circle at 50% 30%,#254a4d,#0a2028 72%); box-shadow:0 0 15px rgba(90,230,211,.17),inset 0 0 10px rgba(255,215,105,.08); }.mi-inheritance-core > span img { width:39px; height:39px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.76)); }.mi-inheritance-core .slot-weapon { left:-1%; top:48%; translate:0 -50%; }.mi-inheritance-core .slot-skill { right:-1%; top:48%; translate:0 -50%; }.mi-inheritance-core .slot-armor { left:50%; bottom:-3%; translate:-50% 0; }.mi-inheritance-core > b { position:absolute; z-index:3; left:50%; top:48%; width:76px; aspect-ratio:1; display:grid; place-items:center; translate:-50% -50%; border:1px solid #f1c459; border-radius:50%; background:radial-gradient(circle,#76551e 0,#163b3d 38%,#07191f 70%); box-shadow:0 0 0 7px rgba(83,222,207,.07),0 0 28px rgba(245,194,77,.36),inset 0 0 18px rgba(255,224,133,.18); animation:mi-inheritance-core 2.7s ease-in-out infinite; }.mi-inheritance-core > b img { width:68px; height:68px; object-fit:contain; filter:drop-shadow(0 5px 7px rgba(0,0,0,.82)) drop-shadow(0 0 7px rgba(77,226,210,.22)); }
.mi-inheritance-relic-copy { min-width:0; display:grid; align-content:center; gap:5px; }.mi-inheritance-relic-copy > small { color:#69ddce; font-size:.55rem; font-weight:950; letter-spacing:.19em; }.mi-inheritance-relic-copy > strong { color:#fff0bd; font:850 clamp(1.2rem,3.5cqw,1.65rem)/1.1 Georgia,"Noto Serif KR",serif; text-shadow:0 2px 14px #000; }.mi-inheritance-relic-copy > p { margin:2px 0 7px; color:#a9bcb7; font-size:clamp(10px,1.75cqw,12px); line-height:1.55; }.mi-inheritance-relic-copy > span { width:max-content; max-width:100%; display:flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid rgba(99,225,210,.3); border-radius:999px; color:#aaf4e8; background:rgba(25,91,86,.2); font-size:.57rem; font-weight:850; }.mi-inheritance-relic-copy > span i { width:7px; height:7px; border-radius:50%; background:#76f1df; box-shadow:0 0 9px #65ead8; }
.mi-inheritance-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px; }.mi-inheritance-stat-grid article { position:relative; min-width:0; min-height:76px; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:8px; padding:8px; overflow:hidden; border:1px solid rgba(194,169,105,.23); border-radius:10px; background:linear-gradient(135deg,rgba(255,255,255,.052),rgba(255,255,255,.018)); }.mi-inheritance-stat-grid article > span { width:48px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(219,179,78,.47); border-radius:9px; background:#10242b; }.mi-inheritance-stat-grid article > span img { width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.78)); }.mi-inheritance-stat-grid article > div { min-width:0; display:grid; gap:2px; }.mi-inheritance-stat-grid article small { overflow:hidden; color:#8fa6a2; font-size:.51rem; text-overflow:ellipsis; white-space:nowrap; }.mi-inheritance-stat-grid article strong { color:#f9edcf; font-size:.9rem; }.mi-inheritance-stat-grid article > em { position:absolute; right:6px; top:5px; color:rgba(112,225,211,.65); font-size:.43rem; font-style:normal; font-weight:950; letter-spacing:.08em; }.mi-inheritance-stat-grid article.is-power { grid-column:1 / -1; min-height:83px; grid-template-columns:56px minmax(0,1fr) auto; border-color:rgba(233,186,76,.54); background:radial-gradient(circle at 85% 20%,rgba(231,179,62,.16),transparent 32%),linear-gradient(135deg,rgba(117,73,19,.24),rgba(25,88,83,.17)); box-shadow:inset 0 0 19px rgba(255,210,94,.045); }.mi-inheritance-stat-grid article.is-power > span { width:56px; }.mi-inheritance-stat-grid article.is-power strong { color:#ffe18b; font-size:1.35rem; text-shadow:0 0 13px rgba(255,196,71,.18); }.mi-inheritance-stat-grid article.is-power > em { position:static; align-self:center; padding:4px 7px; border:1px solid rgba(238,194,86,.36); border-radius:999px; color:#f4d27f; background:rgba(122,76,18,.18); font-size:.5rem; }
.mi-inheritance-perks { margin-top:9px; padding:10px; border:1px solid rgba(93,201,190,.24); border-radius:11px; background:rgba(7,27,33,.65); }.mi-inheritance-perks > header { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:8px; }.mi-inheritance-perks > header > div { display:grid; }.mi-inheritance-perks header small { color:#62d7ca; font-size:.48rem; font-weight:950; letter-spacing:.13em; }.mi-inheritance-perks header strong { color:#eadfca; font-size:.72rem; }.mi-inheritance-perks header > span { color:#8fe9dc; font-size:.5rem; }.mi-inheritance-perks > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.mi-inheritance-perks > div > span { min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:5px; padding:6px; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:rgba(255,255,255,.025); }.mi-inheritance-perks b { width:28px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(220,180,82,.45); border-radius:7px; color:#ffe18b; background:#102329; font:800 .7rem Georgia,serif; }.mi-inheritance-perks small { color:#a5b7b2; font-size:.48rem; line-height:1.25; }
.mi-inheritance-cta { width:100%; min-height:59px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:9px; padding:8px 13px; border:1px solid #edbd54; border-radius:11px; color:#fff1c8; background:linear-gradient(135deg,#88451f,#5b2b1c 52%,#214c49); box-shadow:inset 0 0 19px rgba(255,207,94,.13),0 8px 21px rgba(0,0,0,.25); text-align:left; cursor:pointer; }.mi-inheritance-cta:hover,.mi-inheritance-cta:focus-visible { filter:brightness(1.12); box-shadow:inset 0 0 24px rgba(255,218,122,.18),0 0 18px rgba(235,178,67,.16); outline:none; }.mi-inheritance-cta > img { width:32px; height:32px; filter:brightness(0) saturate(100%) invert(88%) sepia(53%) saturate(742%) hue-rotate(339deg) brightness(105%) contrast(99%); }.mi-inheritance-cta > span { min-width:0; display:grid; }.mi-inheritance-cta strong { font-size:.83rem; }.mi-inheritance-cta small { color:#e5cda0; font-size:.55rem; }.mi-inheritance-cta > b { color:#ffe5a0; font-size:1.7rem; font-weight:400; }
.mi-inheritance-forge { margin-top:9px; padding:11px; border:1px solid rgba(231,185,78,.52); border-radius:13px; background:radial-gradient(circle at 82% 8%,rgba(225,168,50,.12),transparent 30%),linear-gradient(155deg,rgba(16,43,48,.94),rgba(6,18,24,.98)); box-shadow:inset 0 0 28px rgba(72,224,207,.035),0 8px 22px rgba(0,0,0,.24); }.mi-inheritance-forge > header { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:8px; }.mi-inheritance-forge > header > div { display:grid; }.mi-inheritance-forge > header small { color:#69ded0; font-size:.48rem; font-weight:950; letter-spacing:.15em; }.mi-inheritance-forge > header strong { color:#fff0c2; font-size:.82rem; }.mi-inheritance-forge > header > span { color:#f1ce74; font-size:.57rem; font-weight:850; }
.mi-inheritance-loadout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.mi-inheritance-loadout button { min-width:0; min-height:62px; display:grid; grid-template-columns:49px minmax(0,1fr); align-items:center; gap:5px; padding:5px; border:1px solid rgba(189,164,99,.24); border-radius:9px; color:#e9e1cc; background:rgba(255,255,255,.025); text-align:left; cursor:pointer; }.mi-inheritance-loadout button.is-selected { border-color:#edc35d; background:linear-gradient(135deg,rgba(151,95,22,.27),rgba(27,91,87,.22)); box-shadow:inset 0 0 15px rgba(255,209,95,.06),0 0 12px rgba(233,185,72,.08); }.mi-inheritance-loadout img { width:49px; height:49px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.78)); }.mi-inheritance-loadout button > span { min-width:0; display:grid; }.mi-inheritance-loadout small { overflow:hidden; color:#9db0ab; font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; }.mi-inheritance-loadout strong { color:#ffe08a; font-size:.72rem; }
.mi-inheritance-gear-detail { min-height:116px; display:grid; grid-template-columns:105px minmax(0,1fr); align-items:center; gap:11px; margin-top:7px; padding:8px 11px; overflow:hidden; border:1px solid rgba(93,218,204,.26); border-radius:10px; background:radial-gradient(circle at 14% 50%,rgba(71,220,207,.15),transparent 27%),rgba(3,15,20,.66); animation:mi-inheritance-gear .35s ease-out; }.mi-inheritance-gear-detail figure { position:relative; width:100px; height:100px; display:grid; place-items:center; margin:0; }.mi-inheritance-gear-detail figure::before { content:""; position:absolute; inset:10%; border:1px solid rgba(229,184,76,.4); rotate:45deg; box-shadow:0 0 19px rgba(69,220,204,.12); }.mi-inheritance-gear-detail figure img { position:relative; z-index:2; width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 7px 8px rgba(0,0,0,.86)) drop-shadow(0 0 8px rgba(81,225,209,.2)); }.mi-inheritance-gear-detail figure i { position:absolute; inset:20%; border-radius:50%; background:rgba(73,225,211,.15); filter:blur(14px); }.mi-inheritance-gear-detail > div { min-width:0; display:grid; gap:3px; }.mi-inheritance-gear-detail > div > small { color:#63dace; font-size:.48rem; font-weight:950; letter-spacing:.13em; }.mi-inheritance-gear-detail > div > strong { color:#ffe8a3; font:850 1rem Georgia,"Noto Serif KR",serif; }.mi-inheritance-gear-detail p { margin:0; color:#9fb5b0; font-size:.55rem; line-height:1.45; }.mi-inheritance-tier { display:grid; gap:3px; margin-top:3px; }.mi-inheritance-tier > span { height:5px; overflow:hidden; border-radius:99px; background:#071116; }.mi-inheritance-tier b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#41bdb2,#f1be4f); box-shadow:0 0 8px rgba(93,231,213,.3); transition:width .3s ease; }.mi-inheritance-tier small { color:#d4bd7e; font-size:.48rem; }
.mi-inheritance-message { margin:7px 0 0 !important; padding:6px 8px; border:1px solid rgba(95,225,211,.26); border-radius:7px; color:#b9f4ea !important; background:rgba(31,99,94,.18); font-size:.54rem !important; text-align:center; }.mi-inheritance-batch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-top:7px; }.mi-inheritance-batch button { min-height:33px; border:1px solid rgba(190,166,105,.25); border-radius:7px; color:#abbab6; background:rgba(255,255,255,.025); font-size:.57rem; font-weight:900; cursor:pointer; }.mi-inheritance-batch button.is-selected { border-color:#e8bb50; color:#ffe292; background:linear-gradient(180deg,rgba(156,97,22,.28),rgba(29,91,87,.2)); box-shadow:inset 0 -2px #e5b74a; }
.mi-inheritance-upgrade { width:100%; min-height:60px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:6px; padding:5px 10px; border:1px solid #f0bd50; border-radius:10px; color:#fff1cb; background:linear-gradient(135deg,#9b4c21,#64291c 54%,#275a55); box-shadow:inset 0 0 19px rgba(255,207,94,.13),0 7px 18px rgba(0,0,0,.25); text-align:left; cursor:pointer; }.mi-inheritance-upgrade:hover:not(:disabled),.mi-inheritance-upgrade:focus-visible { filter:brightness(1.12); outline:none; }.mi-inheritance-upgrade:disabled { filter:grayscale(.8); opacity:.48; cursor:default; }.mi-inheritance-upgrade > img { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 5px 6px rgba(0,0,0,.8)); }.mi-inheritance-upgrade > span { min-width:0; display:grid; }.mi-inheritance-upgrade strong { font-size:.76rem; }.mi-inheritance-upgrade small { color:#e5ca95; font-size:.52rem; }.mi-inheritance-upgrade > b { padding:6px 9px; border:1px solid rgba(255,231,164,.42); border-radius:7px; color:#fff0b9; background:rgba(255,255,255,.07); font-size:.62rem; }
@keyframes mi-inheritance-gear { from { opacity:.2; transform:translateY(6px) scale(.98); filter:brightness(1.5); } }
@container (max-width:480px) {
    .mi-stage .mi-inheritance-relic { min-height:185px; grid-template-columns:135px minmax(0,1fr); gap:9px; padding:10px; }
    .mi-stage .mi-inheritance-core { width:132px; }
    .mi-stage .mi-inheritance-core > span { width:32px; }.mi-stage .mi-inheritance-core > span img { width:18px; height:18px; }
    .mi-stage .mi-inheritance-core > b { width:54px; }.mi-stage .mi-inheritance-core > b img { width:28px; height:28px; }
    .mi-stage .mi-inheritance-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mi-stage .mi-inheritance-stat-grid article:nth-child(3) { grid-column:1 / -1; }
    .mi-stage .mi-inheritance-stat-grid article.is-power { grid-column:1 / -1; }
    .mi-stage .mi-inheritance-perks > div { grid-template-columns:minmax(0,1fr); }
    .mi-stage .mi-inheritance-loadout button { grid-template-columns:40px minmax(0,1fr); }.mi-stage .mi-inheritance-loadout img { width:40px; height:40px; }
    .mi-stage .mi-inheritance-gear-detail { grid-template-columns:88px minmax(0,1fr); }.mi-stage .mi-inheritance-gear-detail figure { width:84px; height:84px; }.mi-stage .mi-inheritance-gear-detail figure img { width:82px; height:82px; }
}
.mi-summon-panel { min-height: 100%; display: grid; align-content: start; }
.mi-summon-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; }.mi-summon-panel > header div { display: grid; }.mi-summon-panel > header small { color: var(--region-accent); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }.mi-summon-panel > header strong { color: #f7edd5; font-size: 1.06rem; }.mi-summon-panel > header > span { padding: 5px 10px; border: 1px solid rgba(240,190,81,.38); border-radius: 999px; color: #ffd372; background: rgba(125,76,17,.16); font-size: .76rem; font-weight: 900; }
.mi-pity-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0 5px; }
.mi-pity-track { position: relative; height: 31px; overflow: hidden; border: 1px solid rgba(232,198,111,.35); border-radius: 999px; background: #03090c; }.mi-pity-track > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,#287c78,#7151a7,#c58cff); box-shadow: 0 0 16px rgba(179,119,255,.26); transition: width .25s ease; }.mi-pity-track.is-legendary > span { background:linear-gradient(90deg,#725b1f,#d89b38,#ffe087); box-shadow:0 0 16px rgba(255,200,83,.32); }.mi-pity-track > strong { position: absolute; inset: 0; display: grid; place-items: center; color: #fff5d7; font-size: .63rem; text-shadow: 0 1px 3px #000; white-space:nowrap; }
.mi-summon-panel > p { margin: 5px 1px 9px; color: #a7b7b3; font-size: .66rem; line-height: 1.5; }.mi-summon-message { margin: 5px 0 !important; padding: 6px 9px; border: 1px solid rgba(255,132,102,.35); border-radius: 7px; color: #ffb5a2 !important; background: rgba(91,34,28,.32); text-align: center; }
.mi-summon-reveal { position: relative; min-height: clamp(230px,43cqw,300px); display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(104,225,210,.42); border-radius: 15px; background: radial-gradient(circle at 50% 45%,rgba(47,147,139,.24),transparent 28%),radial-gradient(circle at 50% 100%,rgba(190,121,34,.15),transparent 42%),linear-gradient(160deg,rgba(8,28,36,.98),rgba(3,12,18,.99)); box-shadow: inset 0 0 36px rgba(94,229,214,.06),0 9px 26px rgba(0,0,0,.26); isolation: isolate; }
.mi-summon-reveal.is-many { height: clamp(410px,72cqw,540px); place-items: stretch; }
.mi-summon-reveal::before,.mi-summon-reveal::after { content:""; position:absolute; inset:0; pointer-events:none; }.mi-summon-reveal::before { background: linear-gradient(115deg,transparent 20%,rgba(112,241,223,.065) 42%,transparent 58%); animation: mi-summon-sweep 4.2s ease-in-out infinite; }.mi-summon-reveal::after { background-image: radial-gradient(circle,#d9fff8 0 1px,transparent 1.5px); background-size: 37px 37px; opacity:.12; }
.mi-summon-magic { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(55%,250px); aspect-ratio: 1; translate: -50% -50%; opacity: .86; pointer-events: none; }.mi-summon-sigil,.mi-summon-ring { position: absolute; inset: 8%; border: 1px solid rgba(117,239,222,.58); border-radius: 50%; box-shadow: 0 0 18px rgba(78,224,207,.16),inset 0 0 20px rgba(78,224,207,.1); animation: mi-summon-spin 13s linear infinite; }.mi-summon-sigil::before,.mi-summon-sigil::after { content:""; position:absolute; inset:13%; border:1px solid rgba(238,191,82,.52); rotate:45deg; box-shadow:0 0 12px rgba(238,191,82,.12); }.mi-summon-sigil::after { inset:28%; rotate:0deg; border-color:rgba(121,240,224,.6); }.mi-summon-ring { inset:0; border-style:dashed; border-color:rgba(235,194,91,.42); animation-direction:reverse; animation-duration:19s; }.mi-summon-magic > b { position:absolute; inset:36%; border-radius:50%; background:radial-gradient(circle,#fff8bf 0 8%,#66ead9 24%,rgba(67,203,190,.26) 48%,transparent 70%); box-shadow:0 0 30px rgba(99,242,222,.58); animation:mi-summon-core 2.1s ease-in-out infinite; }.mi-summon-magic > span { position:absolute; width:5px; height:5px; border-radius:50%; background:#d9fff8; box-shadow:0 0 9px #6ff6e2; animation:mi-summon-orbit 3.2s ease-in-out infinite alternate; }.mi-summon-magic > span:nth-of-type(1){left:6%;top:44%}.mi-summon-magic > span:nth-of-type(2){right:8%;top:31%;animation-delay:-.5s}.mi-summon-magic > span:nth-of-type(3){left:27%;top:7%;animation-delay:-1s}.mi-summon-magic > span:nth-of-type(4){right:24%;bottom:5%;animation-delay:-1.5s}.mi-summon-magic > span:nth-of-type(5){left:15%;bottom:19%;animation-delay:-2s}.mi-summon-magic > span:nth-of-type(6){right:2%;bottom:42%;animation-delay:-2.5s}
.mi-summon-reveal.is-summoning .mi-summon-magic { opacity: 1; filter: brightness(1.35); }.mi-summon-reveal.is-summoning .mi-summon-sigil { animation-duration:1.2s; }.mi-summon-reveal.is-summoning .mi-summon-ring { animation-duration:1.8s; }.mi-summon-reveal.is-open .mi-summon-magic { opacity:.2; filter:blur(1px); }.mi-summon-reveal.is-open { border-color:rgba(240,191,77,.56); box-shadow:inset 0 0 40px rgba(235,178,65,.08),0 0 24px rgba(226,172,59,.1); animation:mi-summon-reveal .55s cubic-bezier(.18,.82,.28,1.12); }
.mi-summon-reveal-content { position:relative; z-index:2; width:100%; min-height:100%; display:grid; place-items:center; padding:12px; }.mi-summon-reveal.is-many .mi-summon-reveal-content { min-height:0; place-items:stretch; align-content:start; gap:9px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d5aa4b rgba(255,255,255,.04); }.mi-summon-empty { display:grid; justify-items:center; gap:5px; text-align:center; text-shadow:0 2px 10px #000; }.mi-summon-empty small { color:#70e7d8; font-size:.57rem; font-weight:950; letter-spacing:.18em; }.mi-summon-empty strong { color:#fff0bd; font:800 clamp(1.05rem,3.5cqw,1.45rem) Georgia,"Noto Serif KR",serif; }.mi-summon-empty span { color:#9fb8b3; font-size:.63rem; }
.mi-summon-result-summary { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 7px 9px; border-bottom:1px solid rgba(235,196,91,.22); }.mi-summon-reveal.is-many .mi-summon-result-summary { position:sticky; z-index:4; top:-12px; margin-top:-12px; padding:13px 7px 9px; background:linear-gradient(180deg,rgba(5,20,27,.98) 72%,rgba(5,20,27,.88)); backdrop-filter:blur(8px); }.mi-summon-result-summary > div { display:grid; }.mi-summon-result-summary small { color:#69dfd1; font-size:.48rem; font-weight:950; letter-spacing:.15em; }.mi-summon-result-summary strong { color:#fff0bd; font-size:.72rem; }.mi-summon-result-summary > span { padding:4px 7px; border:1px solid rgba(103,224,210,.3); border-radius:999px; color:#9eece1; background:rgba(10,49,53,.68); font-size:.5rem; font-weight:850; white-space:nowrap; }
.mi-summon-result-grid { width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-content:center; gap:6px; }.mi-summon-result-grid.count-1 { grid-template-columns:minmax(150px,190px); justify-content:center; }.mi-summon-result-grid.count-2 { grid-template-columns:repeat(2,minmax(120px,170px)); justify-content:center; }.mi-summon-result-grid.count-3 { grid-template-columns:repeat(3,minmax(100px,145px)); justify-content:center; }.mi-summon-result-grid.count-4 { grid-template-columns:repeat(4,minmax(88px,1fr)); }
.mi-summon-result-grid article { min-width:0; min-height:112px; display:grid; grid-template-rows:minmax(55px,1fr) auto auto auto; justify-items:center; align-items:center; gap:1px; padding:5px; overflow:hidden; border:1px solid rgba(194,170,108,.3); border-radius:9px; background:linear-gradient(180deg,rgba(21,44,49,.96),rgba(7,20,27,.98)); box-shadow:0 7px 17px rgba(0,0,0,.24); }.mi-summon-result-grid article.kind-companion { border-color:#f5cb67; background:radial-gradient(circle at 50% 25%,rgba(228,176,63,.2),transparent 45%),linear-gradient(180deg,#263d3d,#101e24); box-shadow:0 0 18px rgba(245,199,89,.14); }.mi-summon-result-grid article.kind-companionshard { border-color:rgba(94,224,208,.55); }.mi-summon-result-grid article.kind-gold { border-color:rgba(244,197,74,.5); background:radial-gradient(circle at 50% 25%,rgba(241,184,46,.22),transparent 50%),linear-gradient(180deg,rgba(55,43,23,.97),rgba(17,23,27,.98)); }.mi-summon-result-grid article.kind-upgradematerial { border-color:rgba(82,221,211,.52); background:radial-gradient(circle at 50% 24%,rgba(63,207,203,.2),transparent 50%),linear-gradient(180deg,rgba(15,52,55,.97),rgba(8,24,30,.98)); }.mi-summon-result-grid article > i { width:100%; height:100%; min-height:55px; border-radius:6px; background-color:rgba(1,8,11,.65); background-repeat:no-repeat; background-position:center bottom; background-size:contain; font-style:normal; }.mi-summon-result-grid article > i.mi-summon-reward-art { display:grid; place-items:center; background:radial-gradient(circle,rgba(240,195,75,.2),rgba(3,13,17,.72) 68%); }.mi-summon-result-grid article.kind-upgradematerial > i.mi-summon-reward-art { background:radial-gradient(circle,rgba(65,225,216,.2),rgba(3,13,17,.72) 68%); }.mi-summon-reward-art img { width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 5px 6px rgba(0,0,0,.65)); }.mi-summon-result-grid article small { max-width:100%; overflow:hidden; color:#75ddcf; font-size:.48rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.mi-summon-result-grid article strong { max-width:100%; overflow:hidden; color:#fff0c4; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }.mi-summon-result-grid article span { color:#f2c964; font-size:.56rem; font-weight:900; }
.mi-summon-result-grid article.rarity-epic { border-color:#b77cff; box-shadow:inset 0 0 20px rgba(151,79,228,.12),0 0 16px rgba(151,79,228,.18); }.mi-summon-result-grid article.rarity-epic small { color:#d5adff; }.mi-summon-result-grid article.rarity-legendary { border-color:#ffd260; background:radial-gradient(circle at 50% 20%,rgba(255,194,49,.25),transparent 48%),linear-gradient(180deg,#47341d,#151d20); box-shadow:inset 0 0 24px rgba(255,206,73,.14),0 0 20px rgba(255,190,48,.22); }.mi-summon-result-grid article.rarity-legendary small { color:#ffe182; }
.mi-summon-controls { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(175px,.85fr); gap:8px; margin-top:9px; }.mi-summon-counts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }.mi-summon-counts button { min-width:0; min-height:43px; padding:0 2px; border:1px solid rgba(192,170,112,.3); border-radius:8px; color:#b9c6c2; background:rgba(255,255,255,.035); font-size:clamp(10px,1.75cqw,12px); font-weight:850; cursor:pointer; }.mi-summon-counts button:hover,.mi-summon-counts button:focus-visible { border-color:#d8b458; color:#ffe4a0; outline:none; }.mi-summon-counts button.is-selected { border-color:#f1c45c; color:#fff0bb; background:linear-gradient(180deg,rgba(174,111,27,.32),rgba(37,104,98,.2)); box-shadow:inset 0 -2px #efc159,0 0 12px rgba(233,186,76,.09); }
.mi-summon-stepper { min-height:43px; display:grid; grid-template-columns:43px minmax(0,1fr) 43px; overflow:hidden; border:1px solid rgba(104,221,207,.34); border-radius:9px; background:rgba(7,27,33,.82); }.mi-summon-stepper button { min-width:0; border:0; color:#ffe38e; background:rgba(255,255,255,.05); font-size:1.25rem; font-weight:900; cursor:pointer; }.mi-summon-stepper button:first-child { border-right:1px solid rgba(255,255,255,.08); }.mi-summon-stepper button:last-child { border-left:1px solid rgba(255,255,255,.08); }.mi-summon-stepper button:hover:not(:disabled),.mi-summon-stepper button:focus-visible { color:#122020; background:#e4c26f; outline:none; }.mi-summon-stepper button:disabled { color:#64716e; cursor:default; }.mi-summon-stepper > span { display:grid; place-content:center; text-align:center; }.mi-summon-stepper small { color:#7f9d98; font-size:.46rem; }.mi-summon-stepper output { color:#eafffa; font-size:.76rem; font-weight:950; }
.mi-summon-button { width:100%; min-height:54px; display:grid; place-content:center; gap:1px; margin-top:8px; border:1px solid #f0bd50; border-radius:11px; color:#fff5d5; background:linear-gradient(180deg,#a85328,#6c271f); box-shadow:inset 0 0 18px rgba(255,197,75,.18),0 6px 20px rgba(0,0,0,.28); font-size:.94rem; font-weight:950; cursor:pointer; }.mi-summon-button:hover:not(:disabled),.mi-summon-button:focus-visible { filter:brightness(1.12); box-shadow:inset 0 0 24px rgba(255,216,109,.24),0 0 18px rgba(233,164,59,.2); outline:none; }.mi-summon-button small { color:#f4d69d; font-size:.58rem; }.mi-summon-button:disabled { filter:grayscale(.8); opacity:.48; cursor:default; }
.mi-summon-ticket-shop { margin-top:9px; padding:9px; border:1px solid rgba(102,226,212,.28); border-radius:11px; background:linear-gradient(135deg,rgba(10,43,48,.74),rgba(31,24,20,.72)); }.mi-summon-ticket-shop > header { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:7px; }.mi-summon-ticket-shop > header div { display:grid; }.mi-summon-ticket-shop > header small { color:#67dfd2; font-size:.48rem; font-weight:950; letter-spacing:.13em; }.mi-summon-ticket-shop > header strong { color:#fff0c4; font-size:.76rem; }.mi-summon-ticket-shop > header > span { color:#9db3ae; font-size:.58rem; }.mi-summon-ticket-shop > header b { color:#ffe078; font-size:.72rem; }.mi-summon-ticket-shop > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.mi-summon-ticket-shop button { min-width:0; min-height:47px; display:flex; align-items:center; justify-content:space-between; gap:5px; padding:6px 8px; border:1px solid rgba(227,184,77,.34); border-radius:8px; color:#f7ead0; background:rgba(4,21,27,.82); cursor:pointer; }.mi-summon-ticket-shop button > span { min-width:0; display:grid; text-align:left; }.mi-summon-ticket-shop button strong { overflow:hidden; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }.mi-summon-ticket-shop button small { color:#87a49f; font-size:.49rem; }.mi-summon-ticket-shop button > b { flex:none; color:#ffd66d; font-size:.66rem; }.mi-summon-ticket-shop button:hover:not(:disabled),.mi-summon-ticket-shop button:focus-visible { border-color:#f2c45e; background:rgba(102,65,25,.54); outline:none; }.mi-summon-ticket-shop button:disabled { filter:grayscale(.7); opacity:.42; cursor:default; }
.mi-summon-economy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }.mi-summon-economy span { display:grid; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.025); }.mi-summon-economy strong { color:#e9d6aa; font-size:.66rem; }.mi-summon-economy small { color:#8fa39f; font-size:.54rem; }
@container (max-width:480px) {
    .mi-stage .mi-pity-stack { grid-template-columns:minmax(0,1fr); gap:4px; }
    .mi-stage .mi-summon-reveal { min-height:245px; }
    .mi-stage .mi-summon-reveal.is-many { height:clamp(390px,110cqw,520px); }
    .mi-stage .mi-summon-result-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .mi-stage .mi-summon-result-grid.count-1 { grid-template-columns:minmax(145px,185px); }
    .mi-stage .mi-summon-result-grid.count-2 { grid-template-columns:repeat(2,minmax(115px,1fr)); }
    .mi-stage .mi-summon-controls { grid-template-columns:minmax(0,1fr); }
    .mi-stage .mi-summon-counts button { min-height:39px; }
    .mi-stage .mi-summon-stepper { min-height:43px; }
    .mi-stage .mi-summon-ticket-shop > div { grid-template-columns:minmax(0,1fr); }
}
.mi-upgrade { width: 100%; padding: 12px; border: 1px solid #c9904f; border-radius: 8px; color: #fff3d2; background: linear-gradient(135deg, #76401f, #3d261b); font-weight: 900; }
.mi-upgrade small { margin-left: 8px; color: #ffd17d; }.mi-upgrade:disabled { opacity: .45; }
.mi-growth-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.mi-growth-summary > div { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 9px; background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); }
.mi-growth-summary small { color: #96afb0; font-size: .68rem; }.mi-growth-summary strong { color: #fff1c7; font-size: 1.08rem; }
.mi-skill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.mi-skill-grid article { min-width: 0; padding: 10px 5px; text-align: center; border: 1px solid rgba(134,151,151,.2); border-radius: 10px; color: #747f80; background: rgba(255,255,255,.02); }
.mi-skill-grid article > span { display: grid; width: 30px; height: 30px; margin: 0 auto 6px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 800 .78rem Georgia,serif; }
.mi-skill-grid article strong, .mi-skill-grid article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-skill-grid article strong { font-size: .76rem; }.mi-skill-grid article small { margin-top: 3px; font-size: .62rem; }
.mi-skill-grid article.is-unlocked { color: #ffe08b; border-color: rgba(255,204,102,.46); background: radial-gradient(circle at 50% 0,rgba(255,186,65,.18),rgba(255,255,255,.025)); box-shadow: inset 0 0 16px rgba(255,198,85,.07); }
.mi-equipment-grid { display: grid; gap: 6px; margin-bottom: 12px; }
.mi-equipment-grid article { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(218,185,119,.18); border-radius: 9px; background: linear-gradient(90deg,rgba(215,166,80,.08),rgba(255,255,255,.025)); }
.mi-equipment-grid article > span { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #a9854b; border-radius: 8px; color: #ffe192; background: #172127; font-family: serif; }.mi-equipment-grid article > span img { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.8)); }
.mi-equipment-grid article div { display: grid; }.mi-equipment-grid article small { color: #8fa4a4; font-size: .64rem; }.mi-equipment-grid article strong { color: #eee8d9; font-size: .78rem; }.mi-equipment-grid article em { color: #ffc65f; font-style: normal; font-weight: 800; font-size: .75rem; }
.mi-boost-vault { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,215,132,.22); }
.mi-boost-vault > header { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:10px; }
.mi-boost-vault > header > div { display:grid; gap:2px; }
.mi-boost-vault > header small { color:#68e3d6; font-size:.55rem; font-weight:950; letter-spacing:.13em; }
.mi-boost-vault > header strong { color:#fff0c8; font-size:clamp(.82rem,2.1cqw,1rem); }
.mi-boost-balance { padding:6px 10px; border:1px solid rgba(104,226,213,.36); border-radius:999px; color:#9fded6; background:rgba(8,37,42,.78); font-size:.59rem; white-space:nowrap; }
.mi-boost-balance b { color:#ffe078; font-size:.7rem; }
.mi-boost-intro { min-height:130px; display:grid; grid-template-columns:120px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; overflow:hidden; border:1px solid rgba(226,184,75,.34); border-radius:13px; background:radial-gradient(circle at 9% 50%,rgba(67,222,212,.18),transparent 27%),linear-gradient(135deg,rgba(20,57,60,.88),rgba(29,21,23,.88)); box-shadow:inset 0 0 28px rgba(111,230,213,.05); }
.mi-boost-intro > img { width:118px; height:118px; object-fit:contain; filter:drop-shadow(0 7px 10px #000) drop-shadow(0 0 10px rgba(80,230,219,.24)); }
.mi-boost-intro > div:not(.mi-boost-active) { display:grid; gap:3px; }
.mi-boost-intro small { color:#65e0d4; font-size:.53rem; font-weight:950; letter-spacing:.11em; }
.mi-boost-intro strong { color:#ffedbd; font-size:.78rem; }
.mi-boost-intro p { max-width:530px; margin:0 !important; color:#aebfba !important; font-size:.62rem !important; line-height:1.5 !important; }
.mi-boost-active { min-width:135px; display:grid; justify-items:end; gap:3px; padding:9px; border:1px solid rgba(255,208,84,.42); border-radius:10px; color:#ffe177; background:rgba(73,40,13,.58); }
.mi-boost-active span { font-size:.65rem; font-weight:950; }.mi-boost-active strong { color:#effffb; font-size:.62rem; }
.mi-boost-vault .mi-boost-active button { min-width:94px; min-height:34px; padding:4px 9px; border:1px solid rgba(255,224,123,.52); border-radius:7px; color:#fff1c7; background:rgba(123,55,24,.68); font-size:.58rem; font-weight:900; cursor:pointer; }
.mi-boost-vault > p { margin:7px 0; color:#7ee3d7; font-size:.66rem; }
.mi-boost-vault > .mi-boost-rule { padding:8px 10px; border-left:2px solid #d9a856; color:#d7d2c4; background:rgba(216,161,68,.07); line-height:1.45; }
.mi-boost-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:9px; }
.mi-boost-catalog article { min-width:0; display:grid; grid-template-rows:132px minmax(92px,auto) auto; overflow:hidden; border:1px solid rgba(99,196,185,.24); border-radius:12px; background:linear-gradient(165deg,rgba(18,48,51,.96),rgba(5,16,21,.98)); box-shadow:0 8px 22px rgba(0,0,0,.24); }
.mi-boost-catalog article.tier-3 { border-color:rgba(88,220,211,.4); background:radial-gradient(circle at 50% 18%,rgba(55,202,198,.14),transparent 46%),linear-gradient(165deg,rgba(20,53,60,.98),rgba(6,17,25,.98)); }
.mi-boost-catalog article.tier-5 { border-color:rgba(239,188,65,.48); background:radial-gradient(circle at 50% 17%,rgba(202,123,47,.18),transparent 48%),linear-gradient(165deg,rgba(54,35,43,.98),rgba(13,14,25,.98)); }
.mi-boost-catalog article.is-owned { box-shadow:inset 0 0 22px rgba(90,230,215,.08),0 0 14px rgba(87,219,206,.08); }
.mi-boost-catalog figure { position:relative; height:132px; margin:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle,rgba(67,216,208,.16),transparent 62%); }
.mi-boost-catalog figure img { width:126px; height:126px; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(0,0,0,.82)); transition:transform .2s ease; }
.mi-boost-catalog article:hover figure img { transform:translateY(-2px) scale(1.04); }
.mi-boost-catalog figure b { position:absolute; top:8px; left:8px; padding:3px 7px; border:1px solid rgba(255,211,96,.65); border-radius:999px; color:#ffe18a; background:rgba(28,18,12,.8); font-size:.63rem; }
.mi-boost-catalog figure em { position:absolute; right:7px; bottom:7px; padding:3px 6px; border-radius:5px; color:#8ee8dc; background:rgba(4,21,25,.86); font-size:.52rem; font-style:normal; font-weight:900; }
.mi-boost-copy { min-width:0; display:grid; align-content:start; gap:2px; padding:8px 9px 6px; }
.mi-boost-copy small { color:#62ded1; font-size:.48rem; font-weight:950; letter-spacing:.12em; }
.mi-boost-copy strong { overflow:hidden; color:#ffedc3; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.mi-boost-copy p { margin:0 !important; color:#92aaa5 !important; font-size:.54rem !important; line-height:1.42 !important; }
.mi-boost-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:0 8px 8px; }
.mi-boost-actions button { min-width:0; min-height:44px; display:grid; place-content:center; gap:0; padding:4px; border:1px solid rgba(103,218,204,.38); border-radius:7px; color:#dffaf4; background:rgba(15,69,67,.62); font-weight:900; cursor:pointer; }
.mi-boost-actions button.is-buy { border-color:rgba(235,178,64,.52); color:#ffebaf; background:linear-gradient(180deg,rgba(125,69,24,.82),rgba(79,42,24,.88)); }
.mi-boost-actions button span { font-size:.62rem; }.mi-boost-actions button small { color:#91aaa5; font-size:.49rem; }.mi-boost-actions button.is-buy small { color:#ffd46f; }
.mi-boost-actions button:disabled,.mi-boost-vault .mi-boost-active button:disabled { filter:grayscale(.7); opacity:.38; cursor:default; }
@container (max-width:620px) { .mi-boost-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:480px) { .mi-boost-intro { grid-template-columns:86px minmax(0,1fr); }.mi-boost-intro > img { width:84px; height:84px; }.mi-boost-active { grid-column:1 / -1; min-width:0; grid-template-columns:1fr auto auto; align-items:center; justify-items:start; }.mi-boost-catalog { grid-template-columns:minmax(0,1fr); }.mi-boost-catalog article { grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto; }.mi-boost-catalog figure { grid-row:1 / span 2; height:100%; min-height:154px; }.mi-boost-catalog figure img { width:108px; height:108px; }.mi-boost-actions { grid-column:2; } }
.mi-party-roster { margin: 2px 0 12px; padding: 10px; border: 1px solid rgba(106,221,204,.26); border-radius: 10px; background: rgba(5,25,29,.62); }.mi-party-roster header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }.mi-party-roster header div { display: grid; }.mi-party-roster header small { color: #66ead8; font-size: .56rem; font-weight: 900; letter-spacing: .1em; }.mi-party-roster header strong { color: #f1f8ea; font-size: .86rem; }.mi-party-roster header > span { color: #9db8b3; font-size: .62rem; }.mi-party-roster > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.mi-party-roster button { position: relative; min-height: 48px; display: grid; justify-items: start; padding: 7px 52px 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #b7c7c4; background: rgba(255,255,255,.035); text-align: left; }.mi-party-roster button.is-selected { border-color: rgba(255,210,96,.6); color: #fff4cf; background: rgba(150,93,20,.19); }.mi-party-roster button span { font-weight: 850; }.mi-party-roster button small { color: #8ea6a1; font-size: .61rem; }.mi-party-roster button em { position: absolute; right: 8px; top: 50%; color: #f2ca66; font-size: .6rem; font-style: normal; transform: translateY(-50%); }
.mi-codex-lead { margin: -5px 0 10px; }
.mi-codex-list { display: grid; gap: 6px; }
.mi-codex-list article { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid rgba(164,185,180,.12); border-radius: 9px; background: rgba(255,255,255,.025); }
.mi-codex-list article > span { color: #879393; font-size: .62rem; font-weight: 800; text-align: center; }.mi-codex-list article > div { min-width: 0; display: grid; gap: 2px; }
.mi-codex-list strong { color: #e9efea; font-size: .78rem; }.mi-codex-list small { overflow: hidden; color: #8fa3a3; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.mi-codex-list i { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }.mi-codex-list i b { display: block; height: 100%; border-radius: inherit; background: var(--region-accent); }
.mi-codex-list article.is-complete { border-color: rgba(229,185,87,.4); background: rgba(211,158,50,.075); }.mi-codex-list article.is-complete > span { color: #ffd875; }.mi-codex-list article.is-hidden { filter: grayscale(1); opacity: .55; }
.mi-loot-toast { position: absolute; z-index: 85; top: 16%; left: 50%; width: min(88%,420px); display: grid; justify-items: center; gap: 3px; padding: 14px 38px 13px; transform: translateX(-50%); border: 1px solid #e9b956; border-radius: 12px; color: #fff5d7; text-align: center; background: linear-gradient(135deg,rgba(62,35,13,.97),rgba(7,20,25,.97)); box-shadow: 0 12px 38px #000,0 0 20px rgba(255,189,62,.2); animation: mi-intro .45s ease both; }.mi-loot-toast > span { color: #ffca55; font-size: .58rem; font-weight: 950; letter-spacing: .15em; }.mi-loot-toast strong { font-family: Georgia,"Noto Serif KR",serif; }.mi-loot-toast small { color: #c8d1cb; font-size: .64rem; }.mi-loot-toast button { position: absolute; top: 5px; right: 7px; border: 0; color: #e7d8bb; background: transparent; font-size: 1.1rem; cursor: pointer; }
.mi-unlock-backdrop { position: absolute; z-index: 80; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(2,7,10,.82); backdrop-filter: blur(5px); }
.mi-unlock-card { width: 100%; padding: 32px 22px; border: 1px solid #dfb36a; border-radius: 18px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(80,194,176,.2), transparent 46%), #0b171b; box-shadow: 0 20px 80px #000, inset 0 0 40px rgba(226,181,100,.08); animation: mi-unlock .55s cubic-bezier(.17,.84,.35,1.25); }
.mi-unlock-card > span { color: #83e4cf; font-size: .65rem; font-weight: 900; letter-spacing: .2em; }
.mi-unlock-card h2 { margin: 9px 0; color: #ffe1a3; font: 700 clamp(1.7rem, 8vw, 2.5rem)/1 Georgia, "Noto Serif KR", serif; }
.mi-unlock-card p { color: #b7c7c4; line-height: 1.65; font-size: .85rem; }
.mi-unlock-card button { min-width: 140px; margin-top: 8px; padding: 11px 20px; border: 1px solid #e4b664; border-radius: 99px; color: #182020; background: #f2d49a; font-weight: 900; }
.mi-battlefield.is-shaking {
    animation: mi-shake .2s linear;
    transform-origin: center;
    overflow: hidden;
    will-change: transform;
    contain: layout paint;
    clip-path: inset(0);
}

/* Account settings modal */
.mi-settings-backdrop { position: absolute; z-index: 110; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(1,6,10,.74); backdrop-filter: blur(4px); animation: mi-settings-in .2s ease-out; }
.mi-settings-modal { position: relative; width: 92%; max-width: 650px; max-height: 94%; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; overflow: hidden; border: 1px solid rgba(222,177,97,.72); border-radius: clamp(16px, 3.4cqw, 24px); color: #edf5f2; background: radial-gradient(circle at 50% 0, rgba(42,111,115,.2), transparent 33%), linear-gradient(180deg, #081922, #041016 82%); box-shadow: 0 24px 90px #000, inset 0 0 0 3px rgba(4,17,23,.84), inset 0 0 36px rgba(70,219,209,.04); outline: none; }
.mi-settings-header { position: relative; padding: clamp(14px, 3.1cqw, 24px) 64px clamp(10px, 2cqw, 16px); text-align: center; border-bottom: 1px solid rgba(224,181,100,.3); }
.mi-settings-header > span { color: var(--region-accent); font-size: clamp(11px, 1.9cqw, 13px); font-weight: 900; letter-spacing: .2em; }
.mi-settings-header h2 { margin: 3px 0 0; color: #f6dba2; font: 800 clamp(25px, 5cqw, 38px)/1.1 Georgia, "Noto Serif KR", serif; text-shadow: 0 3px 14px #000; }
.mi-settings-close { position: absolute; top: 50%; right: clamp(12px, 2.5cqw, 20px); transform: translateY(-50%); width: 46px; min-width: 46px !important; height: 46px; min-height: 46px !important; padding: 0; border: 1px solid #d5a85f; border-radius: 50%; color: #f5d597; background: #0d2029; font-size: 30px; line-height: 1; cursor: pointer; }
.mi-settings-tabs { display: grid; grid-template-columns: repeat(4,1fr); margin: clamp(8px, 1.7cqw, 13px) clamp(10px, 2cqw, 16px) 0; border: 1px solid rgba(185,166,125,.35); border-radius: 10px; overflow: hidden; background: rgba(2,10,15,.56); }
.mi-settings-tabs button { min-height: 46px; border: 0; border-right: 1px solid rgba(255,255,255,.08); color: #dbe4df; background: transparent; font-size: clamp(14px, 2.6cqw, 18px); font-weight: 850; cursor: pointer; }
.mi-settings-tabs button:last-child { border-right: 0; }
.mi-settings-tabs button.is-active { color: #edffff; background: linear-gradient(180deg, rgba(64,206,201,.28), rgba(21,88,98,.28)); box-shadow: inset 0 -3px 0 var(--region-accent), 0 0 15px rgba(81,238,229,.12); }
.mi-settings-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: clamp(11px, 2.5cqw, 19px); scrollbar-width: thin; scrollbar-color: #47777a transparent; }
.mi-setting-list, .mi-volume-list { display: grid; gap: 7px; }
.mi-setting-list.is-compact { margin-top: 10px; }
.mi-setting-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px clamp(11px, 2.4cqw, 17px); border: 1px solid rgba(142,176,171,.18); border-radius: 10px; background: rgba(10,29,36,.62); }
.mi-setting-row > span { min-width: 0; display: grid; gap: 2px; }
.mi-setting-row strong { color: #f1eee1; font-size: clamp(14px, 2.5cqw, 17px); }
.mi-setting-row small { color: #abbcb9; font-size: clamp(11px, 1.9cqw, 13px); line-height: 1.25; }
.mi-setting-row.is-disabled { opacity: .52; }
.mi-setting-row input[type="checkbox"] { flex: 0 0 auto; width: 48px; height: 26px; accent-color: #50d9d0; cursor: pointer; }
.mi-setting-row select { min-width: 105px; min-height: 40px; padding: 5px 9px; border: 1px solid #607e7d; border-radius: 8px; color: #f6f0da; background: #0b2029; font-size: 14px; }
.mi-small-action { min-height: 40px !important; padding: 6px 12px; border: 1px solid #bd9459; border-radius: 8px; color: #f4dbac; background: #132833; cursor: pointer; }
.mi-track-card { display: grid; grid-template-columns: clamp(70px, 17cqw, 108px) minmax(0,1fr); gap: 13px; align-items: center; padding: clamp(11px, 2.4cqw, 17px); border: 1px solid rgba(222,177,97,.52); border-radius: 13px; background: linear-gradient(135deg, rgba(16,52,64,.88), rgba(4,20,27,.9)); }
.mi-track-art { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #386d72; border-radius: 14px; background: radial-gradient(circle, rgba(79,235,222,.26), transparent 58%), #071b26; box-shadow: inset 0 0 25px rgba(71,229,217,.12); }
.mi-track-art i { width: 4px; height: 25%; border-radius: 99px; background: var(--region-accent); box-shadow: 0 0 8px var(--region-accent); animation: mi-equalizer .9s ease-in-out infinite alternate; }
.mi-track-art i:nth-child(2), .mi-track-art i:nth-child(4) { height: 52%; animation-delay: -.3s; }.mi-track-art i:nth-child(3) { height: 70%; animation-delay: -.55s; }
.mi-track-card > div:nth-child(2) { min-width: 0; }.mi-track-card span { color: var(--region-accent); font-size: 12px; font-weight: 900; }.mi-track-card h3 { overflow: hidden; margin: 3px 0; color: #fff2d2; font: 800 clamp(17px, 3.3cqw, 23px)/1.2 Georgia, "Noto Serif KR", serif; text-overflow: ellipsis; white-space: nowrap; }.mi-track-card small { color: #b4c8c4; font-size: 12px; }
.mi-track-controls { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(3,52px); justify-content: center; gap: 22px; }
.mi-track-controls button { min-width: 48px !important; min-height: 48px !important; padding: 0; border: 1px solid transparent; border-radius: 50%; color: #e8eee8; background: transparent; font-size: 18px; cursor: pointer; }.mi-track-controls .mi-track-play { border-color: var(--region-accent); color: #bffff8; background: rgba(35,125,132,.3); box-shadow: 0 0 18px rgba(77,232,220,.24); font-size: 23px; }
.mi-volume-list { margin-top: 10px; padding: 5px 13px; border: 1px solid rgba(222,177,97,.4); border-radius: 12px; background: rgba(7,25,33,.68); }
.mi-volume-row { min-height: 48px; display: grid; grid-template-columns: minmax(85px,auto) 1fr 43px; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.06); }.mi-volume-row:last-child { border-bottom: 0; }.mi-volume-row span { color: #ecebdd; font-size: 14px; font-weight: 800; }.mi-volume-row input { width: 100%; accent-color: #55ded5; }.mi-volume-row output { color: #f3d18b; text-align: right; font-size: 14px; font-weight: 900; }
.mi-settings-error { margin: 0 13px 8px; padding: 8px 11px; border: 1px solid rgba(255,111,96,.45); border-radius: 8px; color: #ffd1ca; background: rgba(91,26,27,.48); font-size: 12px; }
.mi-settings-footer { display: grid; grid-template-columns: 1fr 1.45fr; gap: 12px; padding: 9px clamp(13px, 2.8cqw, 20px) 7px; }.mi-settings-footer button { min-height: 48px; border-radius: 9px; font-size: 16px; font-weight: 900; cursor: pointer; }.mi-settings-reset { border: 1px solid #6f8585; color: #dce8e4; background: #102630; }.mi-settings-apply { border: 1px solid #e0b35f; color: #fff1c4; background: linear-gradient(135deg, #2c6767, #174148); box-shadow: inset 0 0 14px rgba(255,213,124,.13), 0 0 14px rgba(71,225,211,.12); }.mi-settings-apply:disabled { opacity: .55; }
.mi-settings-save-note { padding: 0 10px 10px; color: #91a7a4; text-align: center; font-size: 11px; }
.mi-discard-confirm { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(1,7,10,.82); backdrop-filter: blur(3px); }.mi-discard-confirm > div { width: min(100%,390px); padding: 22px; border: 1px solid #cda25e; border-radius: 14px; text-align: center; background: #0b1c24; box-shadow: 0 20px 55px #000; }.mi-discard-confirm strong { color: #ffe2a8; font-size: 18px; }.mi-discard-confirm p { color: #b8c7c3; }.mi-discard-confirm span { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.mi-discard-confirm button { min-height: 44px; border: 1px solid #5c7777; border-radius: 8px; color: #edf2ed; background: #142b34; }.mi-discard-confirm button.is-danger { border-color: #b5685b; color: #ffd9d2; background: #522a29; }
.mi-tutorial { position: absolute; z-index: 105; inset: 0; display: grid; place-items: center; padding: 30px; background: rgba(2,8,11,.78); backdrop-filter: blur(4px); }.mi-tutorial > div { max-width: 430px; padding: 25px; border: 1px solid #d6aa62; border-radius: 16px; text-align: center; background: #0a1b23; }.mi-tutorial span { color: var(--region-accent); font-weight: 900; letter-spacing: .12em; }.mi-tutorial h2 { color: #ffe5ae; font-family: Georgia,"Noto Serif KR",serif; }.mi-tutorial p { color: #bdcdca; line-height: 1.65; }.mi-tutorial button { min-width: 130px; min-height: 44px; border: 1px solid #dfb464; border-radius: 99px; color: #142126; background: #eed49e; font-weight: 900; }

@keyframes mi-spin { to { transform: rotate(360deg); } }
@keyframes mi-player-strike { 0% { transform: translate(-10%, 5%) rotate(-4deg); } 48% { transform: translate(18%, -7%) rotate(3deg) scale(1.06); } 100% { transform: none; } }
@keyframes mi-companion-spear { 0%,100% { transform: none; } 48% { transform: translate(22%,-17%) rotate(3deg) scale(1.07); filter: brightness(1.18); } }
@keyframes mi-companion-bow { 0%,100% { transform: none; } 24% { transform: translate(-5%,2%) rotate(-3deg); } 58% { transform: translate(7%,-3%) rotate(2deg); filter: brightness(1.15); } }
@keyframes mi-companion-talisman { 0%,100% { transform: none; } 48% { transform: translateY(-9%) scale(1.08); filter: brightness(1.24) drop-shadow(0 0 8px #8fffe9); } }
@keyframes mi-companion-shield { 0%,100% { transform: none; } 46% { transform: translate(-18%,-12%) rotate(-4deg) scale(1.08); filter: brightness(1.18); } }
@keyframes mi-companion-blades { 0%,100% { transform: none; } 45% { transform: translate(-24%,-18%) rotate(-6deg) scale(1.1); filter: brightness(1.24) drop-shadow(0 0 8px #89fff2); } }
@keyframes mi-companion-projectile { 0% { opacity: 0; scale: .2 1; } 22% { opacity: 1; } 72% { opacity: .95; scale: 1 1; } 100% { opacity: 0; translate: 34% -24%; scale: 1.08 1; } }
@keyframes mi-companion-pulse { 0% { opacity: 0; scale: .15; } 42% { opacity: .95; } 100% { opacity: 0; translate: 0 -65%; scale: 1.55; } }
@keyframes mi-companion-bash { 0% { opacity: 0; scale: .35; } 38% { opacity: .9; } 100% { opacity: 0; translate: -55% -72%; scale: 1.35; } }
@keyframes mi-player-hit { 0% { transform: translate(0); } 35% { transform: translate(-7%,3%) rotate(-2deg); } 65% { transform: translate(2%,-1%); } 100% { transform: none; } }
@keyframes mi-monster-hit { 0% { transform: translateX(-50%); } 30% { transform: translateX(-43%) rotate(2deg); } 58% { transform: translateX(-54%) rotate(-1deg); } 100% { transform: translateX(-50%); } }
@keyframes mi-guard-hit { 0%,100% { translate: 0; } 34% { translate: -8% 2%; rotate: -2deg; } 68% { translate: 3% -1%; rotate: 1deg; } }
@keyframes mi-unit-hit { 0%,100% { translate: 0; } 35% { translate: -7% 2%; rotate: -2deg; } 68% { translate: 3% -1%; rotate: 1deg; } }
@keyframes mi-monster-strike { 0% { transform: translateX(-50%); } 48% { transform: translate(-63%,20%) scale(1.1) rotate(-3deg); } 100% { transform: translateX(-50%); } }
@keyframes mi-monster-enter { from { opacity: 0; transform: translate(-50%, -18%) scale(.72); filter: blur(8px) brightness(1.45); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes mi-monster-defeat { 0% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1.6); } 55% { opacity: .75; transform: translateX(-50%) scale(1.08); filter: brightness(2.2) saturate(.25); } 100% { opacity: 0; transform: translate(-50%, -8%) scale(.72); filter: blur(8px) brightness(2.4); } }
@keyframes mi-slash { 0% { opacity: 0; transform: scale(.5) rotate(-12deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) rotate(5deg); } }
@keyframes mi-impact { 0% { opacity: 0; transform: scale(.3) rotate(0); } 38% { opacity: 1; } 100% { opacity: 0; transform: scale(1.55) rotate(35deg); } }
@keyframes mi-damage { from { opacity: 0; transform: translateY(12px) scale(.8); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-62px) scale(1.03); } }
@keyframes mi-critical { from { opacity: 0; transform: translateY(8px) scale(.55); } 24% { opacity: 1; transform: translateY(-4px) scale(1.25); } to { opacity: 0; transform: translateY(-72px) scale(1.05); } }
@keyframes mi-shake { 0%,100% { transform: translate(0); } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, -1px); } }
@keyframes mi-fall { from { transform: translate3d(0,-10%,0) rotate(0); } to { transform: translate3d(28px,800px,0) rotate(340deg); } }
@keyframes mi-wisp { 0% { transform: translateY(580px) scale(.5); opacity: 0; } 30% { opacity: .7; } 100% { transform: translate(20px,-40px) scale(1.1); opacity: 0; } }
@keyframes mi-boss-light { 50% { opacity: .7; } }
@keyframes mi-intro { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; letter-spacing: normal; } }
@keyframes mi-sheet { from { opacity: 0; transform: translateY(14px); } }
@keyframes mi-unlock { from { opacity: 0; transform: scale(.75); } }
@keyframes mi-auto-ring { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.16); } }
@keyframes mi-settings-in { from { opacity: 0; } }
@keyframes mi-equalizer { to { transform: scaleY(.42); opacity: .55; } }
@keyframes mi-summon-spin { to { rotate: 360deg; } }
@keyframes mi-summon-core { 50% { scale: 1.18; filter: brightness(1.35); opacity: .76; } }
@keyframes mi-summon-orbit { to { translate: 0 -11px; scale: 1.45; opacity: .42; } }
@keyframes mi-summon-sweep { 0%,100% { translate: -65% 0; opacity: 0; } 45%,60% { opacity: 1; } 70% { translate: 65% 0; opacity: 0; } }
@keyframes mi-summon-reveal { from { opacity: .25; scale: .96; filter: brightness(1.8); } }
@keyframes mi-inheritance-orbit { to { rotate:360deg; } }
@keyframes mi-inheritance-core { 50% { scale:1.06; filter:brightness(1.18); box-shadow:0 0 0 9px rgba(83,222,207,.05),0 0 34px rgba(245,194,77,.45),inset 0 0 21px rgba(255,224,133,.22); } }

.mi-quick-menu { position: absolute; z-index: 36; top: 1rem; left: clamp(8px,2.2%,18px); display: grid; gap: 7px; pointer-events: auto; }
.mi-quick-menu-toggle { width:72px; min-height:70px; border:0; background:transparent; color:#ffe49a; display:grid; place-items:center; gap:0; filter:drop-shadow(0 8px 13px #000b); cursor:pointer; }
.mi-quick-menu-toggle img { width:64px; height:64px; object-fit:contain; transition:transform .2s ease,filter .2s ease; }.mi-quick-menu-toggle:hover img,.mi-quick-menu-toggle:focus-visible img { transform:scale(1.06) rotate(2deg); filter:brightness(1.12); }.mi-quick-menu-toggle strong { margin-top:-11px; padding:2px 8px; border:1px solid #d8af57; border-radius:999px; color:#fff0b0; background:#07171de8; font-size:.65rem; z-index:1; }
.mi-quick-menu-list { width:132px; max-height:min(72dvh,620px); overflow-y:auto; padding:7px; border:1px solid #d8af57; border-radius:12px; background:radial-gradient(circle at 50% 0,#1d514d38,transparent 32%),linear-gradient(180deg,rgba(8,28,34,.98),rgba(3,13,18,.99)); box-shadow:0 18px 42px #000b,inset 0 0 24px #4be0d30a; display:grid; gap:5px; animation:mi-sheet .18s ease-out; }
.mi-quick-menu-list button { position:relative; min-height:58px; border:1px solid #8f793c88; border-radius:9px; background:linear-gradient(135deg,#10282e,#08171c); color:#f5ead0; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:7px; padding:6px 8px 6px 5px; text-align:left; cursor:pointer; overflow:hidden; }
.mi-quick-menu-list button::after { content:""; position:absolute; inset:auto 8px 0 52px; height:1px; background:linear-gradient(90deg,#70e2d48a,transparent); }.mi-quick-menu-list button:hover,.mi-quick-menu-list button:focus-visible { border-color:#ffd56c; background:linear-gradient(135deg,#1a3a3f,#12242a); outline:none; box-shadow:inset 0 0 15px #70e2d410; }.mi-quick-menu-list img { width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 4px 5px #000a); transition:transform .18s ease,filter .18s ease; }.mi-quick-menu-list button:hover img { transform:scale(1.08); filter:brightness(1.12) drop-shadow(0 4px 6px #000b); }.mi-quick-menu-list span { overflow:hidden; font-size:.73rem; font-weight:850; white-space:nowrap; text-overflow:ellipsis; }.mi-quick-menu-list b { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:#ff6a4e; box-shadow:0 0 8px #ff5a42; }
.mi-quick-notice { position: absolute; z-index: 42; top: 1rem; left: 50%; translate: -50% 0; width: min(72%,480px); border: 1px solid #d4ad55; border-radius: 9px; background: rgba(6,22,28,.96); color: #f7e9c2; padding: 11px 34px 11px 14px; font-size: .78rem; font-weight: 750; box-shadow: 0 12px 30px #000b; cursor: pointer; }.mi-quick-notice span { position: absolute; right: 12px; font-size: 1.1rem; }

.mi-offline-backdrop { position: absolute; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0,7,10,.74); backdrop-filter: blur(4px); animation: mi-settings-in .18s ease-out; }
.mi-offline-card { position: relative; width: min(94%,520px); border: 1px solid #d6af58; border-radius: 18px; padding: clamp(22px,5%,38px); color: #f7ead1; text-align: center; background: radial-gradient(circle at 50% 0,#21434b 0,transparent 48%),linear-gradient(180deg,#0d252c,#061419 72%); box-shadow: 0 30px 70px #000d,inset 0 0 34px #60e0d510; }
.mi-offline-card > span { color: #65dfd2; font-size: .7rem; font-weight: 900; letter-spacing: .18em; }.mi-offline-card h2 { margin: 7px 0 20px; font-size: clamp(1.7rem,5vw,2.35rem); }.mi-offline-close { position: absolute; top: 12px; right: 14px; width: 42px; height: 42px; border: 0; background: transparent; color: #e4dcc9; font-size: 1.55rem; cursor: pointer; }
.mi-offline-locked { padding: 22px; border: 1px solid #6a846c77; border-radius: 12px; background: #07161bbd; display: grid; gap: 10px; }.mi-offline-locked i { color: #dbb65f; font-size: 2rem; font-style: normal; }.mi-offline-locked strong { font-size: 1.05rem; }.mi-offline-locked p,.mi-offline-card > p { margin: 0; color: #b9c8c7; font-size: .78rem; line-height: 1.55; }
.mi-offline-summary { min-height: 140px; border: 1px solid #6de3d477; border-radius: 14px; background: linear-gradient(145deg,#12343e,#091b21); display: grid; align-content: center; gap: 7px; padding: 20px; }.mi-offline-summary small { color: #76e5d9; font-weight: 800; }.mi-offline-summary strong { color: #ffe18a; font-size: clamp(1.6rem,5.5vw,2.35rem); text-shadow: 0 2px 12px #000; }.mi-offline-summary span { color: #d6e0dd; font-size: .8rem; }
.mi-offline-progress { height: 13px; margin: 17px 0 12px; overflow: hidden; border: 1px solid #6f8178; border-radius: 999px; background: #02090c; }.mi-offline-progress i { display: block; height: 100%; background: linear-gradient(90deg,#58b8a8,#e8bd59); transition: width .3s ease; }
.mi-offline-claim { width: 100%; min-height: 52px; margin-top: 18px; border: 1px solid #ffd169; border-radius: 10px; background: linear-gradient(180deg,#a54c22,#6e2d16); color: #fff4cf; font-size: 1rem; font-weight: 900; cursor: pointer; }.mi-offline-claim:disabled { filter: grayscale(.75); opacity: .58; cursor: default; }.mi-offline-message { display: block; margin-top: 12px; color: #6fe3d7; font-size: .78rem; }

/* Fifth-menu endless survival game. It owns the play area while the persistent menu remains visible. */
.mi-service-sheet { position:absolute; z-index:78; inset:4px 4px calc(10.5% + 3px); min-width:0; min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr); overflow:hidden; border:1px solid color-mix(in srgb,var(--region-accent) 62%,#dcb25f); border-radius:clamp(12px,2.8cqw,20px); color:#edf6f2; background:radial-gradient(circle at 80% 0,rgba(63,180,166,.14),transparent 32%),linear-gradient(180deg,#091d24,#030d12 84%); box-shadow:0 24px 70px #000e; animation:mi-sheet .2s ease-out; }
.mi-service-sheet > header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:clamp(12px,3cqw,21px) clamp(14px,3.4cqw,25px); border-bottom:1px solid rgba(219,180,93,.25); background:linear-gradient(90deg,rgba(11,48,53,.94),rgba(15,24,28,.92)); }.mi-service-sheet > header div { min-width:0; }.mi-service-sheet > header small,.mi-service-content header > small,.mi-channel-service > header small { color:#67e4d5; font-size:clamp(9px,1.5cqw,11px); font-weight:950; letter-spacing:.15em; }.mi-service-sheet > header h2 { margin:2px 0; color:#ffedbd; font:900 clamp(22px,4.4cqw,33px)/1.05 Georgia,"Noto Serif KR",serif; }.mi-service-sheet > header p { margin:3px 0 0; color:#adc3be; font-size:clamp(10px,1.7cqw,13px); }.mi-service-sheet > header button { flex:0 0 auto; width:44px; height:44px; border:1px solid rgba(217,183,107,.3); border-radius:50%; color:#e8e2d4; background:#07171c; font-size:1.45rem; cursor:pointer; }
.mi-service-sheet > nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:7px clamp(9px,2cqw,15px); border-bottom:1px solid rgba(95,211,199,.16); background:#06141a; }.mi-service-sheet > nav button { min-width:0; min-height:43px; border:1px solid rgba(153,173,164,.2); border-radius:8px; color:#aebdb9; background:#0b1c22; font-size:clamp(10px,1.8cqw,13px); font-weight:850; cursor:pointer; }.mi-service-sheet > nav button.is-selected { border-color:#e2bb60; color:#fff0c6; background:linear-gradient(180deg,rgba(80,72,37,.7),rgba(18,42,43,.9)); box-shadow:inset 0 0 15px rgba(255,209,89,.08); }
.mi-service-content { min-height:0; overflow:auto; padding:clamp(13px,3cqw,23px); }.mi-service-content section > header h3,.mi-channel-service > header h3 { margin:3px 0; color:#f8e8bf; font:900 clamp(18px,3.6cqw,27px)/1.1 Georgia,"Noto Serif KR",serif; }.mi-service-content section > header p,.mi-channel-service > header p { margin:4px 0 14px; color:#9fb4af; font-size:clamp(10px,1.7cqw,12px); line-height:1.5; }
.mi-channel-service > header { display:flex; justify-content:space-between; align-items:end; gap:10px; }.mi-channel-service > header strong { padding:7px 10px; border:1px solid rgba(100,225,212,.35); border-radius:99px; color:#7de6da; background:rgba(8,38,42,.72); font-size:clamp(9px,1.6cqw,12px); white-space:nowrap; }.mi-channel-service > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.mi-channel-service > div > button { position:relative; min-width:0; min-height:112px; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid rgba(121,163,155,.24); border-radius:12px; color:#d7e3df; background:linear-gradient(145deg,rgba(20,48,54,.9),rgba(6,19,25,.97)); text-align:left; cursor:pointer; }.mi-channel-service > div > button.is-selected { border-color:#e8be5d; background:linear-gradient(145deg,rgba(80,69,32,.76),rgba(8,32,35,.97)); box-shadow:inset 0 0 22px rgba(255,208,83,.08); }.mi-channel-service button > i { display:grid; width:64px; aspect-ratio:1; place-items:center; border:1px solid #b59244; border-radius:50%; color:#ffe189; background:radial-gradient(circle,#284b4c,#07161c 72%); font:900 24px Georgia,serif; }.mi-channel-service button > span { min-width:0; display:grid; }.mi-channel-service button span small { color:#68dcd0; font-size:clamp(8px,1.4cqw,10px); font-weight:850; }.mi-channel-service button span strong { color:#f5e8c7; font-size:clamp(13px,2.2cqw,16px); }.mi-channel-service button span em { color:#8ca49f; font-size:clamp(9px,1.5cqw,11px); font-style:normal; }.mi-channel-service button > b { padding:5px 8px; border-radius:99px; color:#f0cc73; background:rgba(0,0,0,.28); font-size:clamp(8px,1.4cqw,10px); white-space:nowrap; }
.mi-channel-service > div > button:disabled { cursor:not-allowed; opacity:.52; filter:saturate(.55); }.mi-channel-service > div > button.is-selected:disabled { opacity:1; filter:none; }.mi-channel-rule,.mi-rank-empty { margin:10px 0 0; padding:10px 12px; border-left:3px solid #d6aa4d; color:#b9c8c4; background:rgba(31,31,22,.72); font-size:clamp(9px,1.55cqw,11px); line-height:1.5; }
.mi-mail-service,.mi-mission-service,.mi-rank-service,.mi-shop-service { display:grid; align-content:start; gap:8px; }.mi-mail-service article,.mi-rank-service article,.mi-shop-service article { min-width:0; min-height:76px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(132,161,153,.2); border-radius:10px; background:rgba(10,29,35,.82); }.mi-mail-service article.is-reward,.mi-rank-service article.is-player { border-color:rgba(232,190,88,.55); background:linear-gradient(135deg,rgba(81,63,25,.5),rgba(8,30,34,.92)); }.mi-mail-service article > i { display:grid; width:46px; aspect-ratio:1; place-items:center; border:1px solid #997a38; border-radius:9px; color:#ffe182; background:#10282e; font-style:normal; }.mi-mail-service article span,.mi-rank-service article span,.mi-shop-service article span { min-width:0; display:grid; }.mi-mail-service article strong,.mi-rank-service article strong,.mi-shop-service article strong { color:#f3e7c7; font-size:clamp(11px,2cqw,15px); }.mi-mail-service article small,.mi-rank-service article small,.mi-shop-service article small { color:#91a8a3; font-size:clamp(9px,1.5cqw,11px); }.mi-mail-service article button,.mi-shop-service article button { min-height:38px; padding:0 12px; border:1px solid #ddb45c; border-radius:8px; color:#fff0c6; background:#704021; font-weight:850; cursor:pointer; }.mi-mail-service article em { color:#7f9893; font-size:10px; font-style:normal; }
.mi-mission-service article { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,45%); align-items:center; gap:12px; padding:12px; border:1px solid rgba(132,161,153,.2); border-radius:10px; background:rgba(10,29,35,.82); }.mi-mission-service article span { display:flex; justify-content:space-between; gap:8px; }.mi-mission-service article strong { color:#efe5ca; font-size:clamp(10px,1.8cqw,13px); }.mi-mission-service article small { color:#79d9ce; }.mi-mission-service progress { width:100%; height:11px; accent-color:#dcb453; }.mi-rank-service article > b { display:grid; width:42px; aspect-ratio:1; place-items:center; border:1px solid #8a753d; border-radius:50%; color:#ffe17e; background:#10262b; }.mi-rank-service article > em { color:#f2cc6b; font-style:normal; font-weight:900; }.mi-shop-service > div { display:grid; gap:8px; }.mi-shop-service article img { width:52px; height:52px; object-fit:contain; }.mi-shop-service article button:disabled { opacity:.45; cursor:default; }.mi-service-result { margin:10px 0 0; padding:9px 12px; border:1px solid rgba(97,220,207,.3); border-radius:8px; color:#75dfd4; background:rgba(8,39,42,.64); font-size:clamp(10px,1.7cqw,12px); }

.mi-trial-hub { position:absolute; z-index:72; inset:4px 4px calc(10.5% + 3px); min-width:0; min-height:0; display:grid; grid-template-rows:auto auto auto auto; align-content:start; gap:clamp(8px,2cqw,14px); overflow:auto; padding:0 clamp(12px,3cqw,22px) clamp(12px,3cqw,20px); border:1px solid color-mix(in srgb,var(--region-accent) 62%,#e6b753); border-radius:clamp(12px,2.8cqw,20px); color:#eef8f3; background:radial-gradient(circle at 85% 18%,rgba(48,173,161,.18),transparent 29%),linear-gradient(180deg,#0a2027,#030d12 82%); box-shadow:0 24px 70px #000e,inset 0 0 34px rgba(82,224,208,.05); animation:mi-sheet .2s ease-out; }
.mi-trial-hub > header { position:sticky; z-index:2; top:0; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-inline:calc(clamp(12px,3cqw,22px) * -1); padding:clamp(12px,2.8cqw,20px) clamp(13px,3.3cqw,24px); border-bottom:1px solid rgba(218,180,94,.24); background:linear-gradient(90deg,rgba(10,43,49,.98),rgba(15,24,28,.98)); }.mi-trial-hub > header div { min-width:0; }.mi-trial-hub > header small,.mi-trial-feature small,.mi-trial-library small { color:#66e4d5; font-size:clamp(9px,1.55cqw,11px); font-weight:950; letter-spacing:.15em; }.mi-trial-hub > header h2 { margin:2px 0; color:#fff0c5; font:900 clamp(22px,4.4cqw,33px)/1.05 Georgia,"Noto Serif KR",serif; }.mi-trial-hub > header p { margin:4px 0 0; color:#b8cac6; font-size:clamp(10px,1.7cqw,13px); }.mi-trial-hub > header button { flex:0 0 auto; width:44px; height:44px; border:1px solid rgba(216,183,108,.3); border-radius:50%; color:#e8e2d4; background:#07171c; font-size:1.45rem; cursor:pointer; }
.mi-trial-feature { min-height:clamp(280px,48cqw,390px); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr); align-items:center; gap:clamp(12px,3cqw,24px); overflow:hidden; padding:clamp(18px,4.2cqw,32px); border:1px solid rgba(231,190,88,.48); border-radius:16px; background:radial-gradient(circle at 80% 45%,rgba(231,183,61,.19),transparent 27%),linear-gradient(135deg,rgba(18,63,68,.94),rgba(5,17,23,.98)); box-shadow:inset 0 0 32px rgba(83,226,208,.06),0 12px 30px #0007; }.mi-trial-feature > div { min-width:0; }.mi-trial-feature h3 { margin:5px 0 8px; color:#ffe6a5; font:900 clamp(25px,5cqw,39px)/1.05 Georgia,"Noto Serif KR",serif; }.mi-trial-feature p { color:#c8d5d1; font-size:clamp(11px,1.9cqw,14px); line-height:1.58; }.mi-trial-feature ul { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 17px; padding:0; list-style:none; }.mi-trial-feature li { padding:5px 9px; border:1px solid rgba(104,224,211,.32); border-radius:99px; color:#8de6dc; background:rgba(5,22,27,.66); font-size:clamp(9px,1.55cqw,11px); }.mi-trial-feature button { min-width:170px; min-height:50px; border:1px solid #ffd36b; border-radius:10px; color:#fff4cf; background:linear-gradient(180deg,#a45025,#653018); font-weight:950; cursor:pointer; }.mi-trial-feature > img { width:100%; max-height:250px; object-fit:contain; filter:drop-shadow(0 14px 18px #000) drop-shadow(0 0 22px rgba(255,202,67,.28)); }
.mi-trial-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.mi-trial-library > button { min-width:0; min-height:82px; display:grid; grid-template-columns:clamp(38px,7cqw,55px) minmax(0,1fr); align-items:center; gap:7px; padding:8px; border:1px solid rgba(159,176,166,.18); border-radius:11px; opacity:.55; color:inherit; background:rgba(11,27,32,.88); text-align:left; cursor:pointer; transition:border-color .16s ease,transform .16s ease,filter .16s ease; }.mi-trial-library > button.is-ready { opacity:1; }.mi-trial-library > button.is-selected { border-color:#f1c85f; background:linear-gradient(145deg,rgba(110,78,22,.72),rgba(9,37,40,.98)); box-shadow:inset 0 0 25px rgba(255,208,73,.1),0 5px 16px #0007; transform:translateY(-2px); }.mi-trial-library > button:hover,.mi-trial-library > button:focus-visible { border-color:#75e7d9; filter:brightness(1.08); outline:none; }.mi-trial-library img { width:100%; aspect-ratio:1; object-fit:contain; }.mi-trial-library span { min-width:0; display:grid; }.mi-trial-library strong { overflow:hidden; color:#f7e7bc; font-size:clamp(10px,1.75cqw,14px); text-overflow:ellipsis; white-space:nowrap; }.mi-trial-library em { overflow:hidden; color:#91aaa5; font-size:clamp(8px,1.35cqw,10px); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.mi-trial-feature.game-spirit { background:radial-gradient(circle at 80% 45%,rgba(68,239,211,.22),transparent 28%),linear-gradient(135deg,rgba(10,72,73,.96),rgba(4,18,25,.98)); }.mi-trial-feature.game-formation { background:radial-gradient(circle at 80% 45%,rgba(91,149,255,.2),transparent 29%),linear-gradient(135deg,rgba(24,50,76,.96),rgba(7,16,25,.98)); }.mi-trial-feature.game-farm { background:radial-gradient(circle at 80% 45%,rgba(93,221,136,.18),transparent 30%),linear-gradient(135deg,rgba(18,68,50,.96),rgba(5,18,22,.98)); }.mi-trial-feature.game-fortress { background:radial-gradient(circle at 80% 45%,rgba(69,226,220,.18),transparent 29%),linear-gradient(135deg,rgba(26,52,73,.96),rgba(6,16,25,.98)); }.mi-trial-feature.game-tower { background:radial-gradient(circle at 82% 38%,rgba(246,196,72,.22),transparent 30%),linear-gradient(135deg,rgba(34,52,70,.97),rgba(6,15,26,.99)); }.mi-trial-feature.game-farm > img,.mi-trial-feature.game-fortress > img,.mi-trial-feature.game-tower > img { max-height:280px; border:1px solid rgba(234,196,96,.45); border-radius:13px; object-fit:cover; }.mi-arcade-game.spirit-vein { border-color:#62e9d5; }.mi-arcade-game.sword-formation { border-color:#8fb7ec; }.mi-arcade-game.sword-formation > header { background:linear-gradient(90deg,rgba(20,48,73,.92),rgba(18,23,32,.82)); }.mi-arcade-game.spirit-fortress { border-color:#e4bd62; }
.mi-trial-hub > footer { display:flex; flex-wrap:wrap; gap:6px 12px; padding:10px 12px; border:1px solid rgba(97,215,202,.22); border-radius:10px; color:#a9bbb7; background:#06151a; font-size:clamp(9px,1.55cqw,11px); }.mi-trial-hub > footer b { color:#f0c96d; }.mi-trial-hub > footer em { margin-left:auto; color:#78918d; font-style:normal; }

@media (max-height: 780px) {
    .mi-trial-feature { min-height:250px; padding:clamp(14px,3cqw,22px); }
    .mi-trial-feature > img,.mi-trial-feature.game-farm > img,.mi-trial-feature.game-fortress > img,.mi-trial-feature.game-tower > img { max-height:210px; }
    .mi-trial-library > button { min-height:68px; }
}

.mi-endless-trial {
    position: absolute;
    z-index: 72;
    inset: 4px 4px calc(10.5% + 3px);
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb,var(--region-accent) 62%,#e6b753);
    border-radius: clamp(12px,2.8cqw,20px);
    color: #eef8f3;
    background: radial-gradient(circle at 50% -12%,color-mix(in srgb,var(--region-accent) 18%,transparent),transparent 34%),linear-gradient(180deg,rgba(6,23,29,.99),rgba(2,10,14,.995));
    box-shadow: 0 24px 70px #000e,inset 0 0 34px rgba(82,224,208,.05);
    animation: mi-sheet .2s ease-out;
}
.mi-endless-trial > header { position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:clamp(10px,2.7cqw,18px) clamp(13px,3.3cqw,24px) clamp(8px,2cqw,14px); border-bottom:1px solid rgba(218,180,94,.24); background:linear-gradient(90deg,rgba(10,43,49,.88),rgba(19,24,27,.72)); }
.mi-endless-trial > header > div { min-width:0; }.mi-endless-trial > header small { color:#66e4d5; font-size:clamp(9px,1.55cqw,11px); font-weight:950; letter-spacing:.16em; }.mi-endless-trial > header h2 { margin:1px 0; color:#fff0c5; font:900 clamp(20px,4.1cqw,31px)/1.05 Georgia,"Noto Serif KR",serif; text-shadow:0 2px 8px #000; }.mi-endless-trial > header p { margin:4px 0 0; overflow:hidden; color:#b8cac6; font-size:clamp(10px,1.65cqw,12px); line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.mi-endless-close { flex:0 0 auto; width:44px; height:44px; border:1px solid rgba(216,183,108,.3); border-radius:50%; color:#e8e2d4; background:rgba(4,14,18,.65); font-size:1.45rem !important; cursor:pointer; }.mi-endless-close:hover,.mi-endless-close:focus-visible { border-color:#ffe096; color:#fff; outline:none; }
.mi-endless-hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:7px clamp(9px,2.2cqw,16px); border-bottom:1px solid rgba(94,219,205,.2); background:rgba(2,12,17,.92); }
.mi-endless-hud > span { min-width:0; display:grid; place-items:center; padding:4px 2px; border:1px solid rgba(102,218,206,.2); border-radius:8px; background:linear-gradient(180deg,rgba(24,54,61,.72),rgba(7,21,27,.72)); }.mi-endless-hud small { color:#83b8b1; font-size:clamp(8px,1.5cqw,10px); font-weight:850; }.mi-endless-hud strong { overflow:hidden; max-width:100%; color:#ffe08a; font-size:clamp(12px,2.4cqw,17px); text-overflow:ellipsis; white-space:nowrap; }
.mi-endless-canvas-shell { position:relative; min-width:0; min-height:0; overflow:hidden; background:radial-gradient(circle at 50% 80%,#173b43,#02090d 68%); isolation:isolate; }
.mi-endless-canvas-shell canvas { width:100%; height:100%; display:block; border:0; background:#07151b; outline:none; touch-action:none; cursor:grab; }.mi-endless-canvas-shell canvas:active { cursor:grabbing; }
.mi-endless-gate { position:absolute; z-index:3; inset:0; display:grid; place-content:center; justify-items:center; gap:clamp(7px,1.9cqw,13px); padding:clamp(18px,5cqw,42px); text-align:center; background:radial-gradient(circle at 50% 43%,rgba(24,100,99,.28),transparent 34%),linear-gradient(180deg,rgba(1,8,11,.63),rgba(1,8,11,.9)); backdrop-filter:blur(3px); }
.mi-endless-gate > img { width:clamp(76px,18cqw,128px); aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 10px 13px #000) drop-shadow(0 0 17px rgba(255,206,74,.38)); }.mi-endless-gate > small { color:#62e0d3; font-size:clamp(9px,1.7cqw,12px); font-weight:950; letter-spacing:.13em; }.mi-endless-gate h3 { margin:0; color:#ffeab4; font:900 clamp(22px,4.6cqw,34px)/1.12 Georgia,"Noto Serif KR",serif; text-shadow:0 3px 12px #000; }.mi-endless-gate > strong { color:#ffe18d; font-size:clamp(13px,2.6cqw,18px); }.mi-endless-gate p { max-width:560px; margin:0; color:#cad8d4; font-size:clamp(11px,1.9cqw,14px); line-height:1.55; }.mi-endless-gate button { min-width:min(86%,320px); min-height:clamp(48px,8cqw,58px); margin-top:5px; border:1px solid #ffd36b; border-radius:10px; color:#fff4cf; background:linear-gradient(180deg,#a45025,#653018); box-shadow:inset 0 0 17px rgba(255,213,105,.16),0 8px 24px #0009; font-size:clamp(14px,2.7cqw,19px); font-weight:950; cursor:pointer; }.mi-endless-gate button:hover,.mi-endless-gate button:focus-visible { filter:brightness(1.12); outline:2px solid rgba(100,230,216,.56); outline-offset:2px; }.mi-endless-gate button:disabled { opacity:.6; cursor:wait; }
.mi-endless-trial > footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:6px clamp(8px,2cqw,15px); border-top:1px solid rgba(222,181,93,.28); color:#a9bbb7; background:#06151a; font-size:clamp(8px,1.55cqw,11px); }.mi-endless-trial > footer span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mi-endless-trial > footer b { margin-right:4px; color:#f0c96d; }

/* Server-persisted Trial Tower. Nodes follow the generated pagoda landings without covering the ascent art. */
.mi-trial-tower { position:absolute; z-index:74; inset:4px 4px calc(10.5% + 3px); min-width:0; min-height:0; display:grid; grid-template-rows:auto auto auto minmax(310px,1fr) auto auto auto; overflow:hidden; border:1px solid #e7bd58; border-radius:clamp(12px,2.8cqw,20px); color:#eef8f3; background:#030d14; box-shadow:0 24px 70px #000e,inset 0 0 36px rgba(246,200,84,.06); animation:mi-sheet .2s ease-out; }
.mi-trial-tower > header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:clamp(10px,2.6cqw,18px) clamp(13px,3.2cqw,24px); border-bottom:1px solid rgba(229,186,84,.28); background:linear-gradient(90deg,rgba(12,49,55,.98),rgba(23,22,30,.97)); }.mi-trial-tower > header small { color:#6ce4d7; font-size:clamp(9px,1.5cqw,11px); font-weight:950; letter-spacing:.15em; }.mi-trial-tower > header h2 { margin:1px 0; color:#ffe8ad; font:900 clamp(22px,4.2cqw,32px)/1.05 Georgia,"Noto Serif KR",serif; }.mi-trial-tower > header p { margin:4px 0 0; color:#aebfbc; font-size:clamp(9px,1.55cqw,12px); }
.mi-tower-hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:7px clamp(9px,2.1cqw,16px); background:#06151b; }.mi-tower-hud span { min-width:0; display:grid; place-items:center; padding:5px; border:1px solid rgba(103,218,205,.22); border-radius:8px; background:linear-gradient(#143039,#07191f); }.mi-tower-hud small { color:#81b8b1; font-size:clamp(8px,1.35cqw,10px); }.mi-tower-hud strong { color:#ffe18c; font-size:clamp(13px,2.4cqw,18px); }
.mi-tower-ticket-panel { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(100px,.55fr) minmax(105px,.5fr); align-items:center; gap:7px; padding:7px clamp(9px,2.1cqw,16px); border-top:1px solid rgba(101,224,210,.16); background:linear-gradient(90deg,#08282c,#101a1e); }.mi-tower-ticket-panel > div { min-width:0; display:grid; }.mi-tower-ticket-panel small { color:#6fe5d8; font-size:clamp(7px,1.2cqw,9px); font-weight:900; letter-spacing:.08em; }.mi-tower-ticket-panel strong { color:#fff0b9; font-size:clamp(11px,1.8cqw,14px); }.mi-tower-ticket-panel span { overflow:hidden; color:#9db4af; font-size:clamp(8px,1.3cqw,10px); text-overflow:ellipsis; white-space:nowrap; }.mi-tower-ticket-panel button { min-height:38px; border:1px solid #e8c35f; border-radius:9px; color:#fff1bc; background:linear-gradient(180deg,#8b501f,#5c2c17); font-weight:950; cursor:pointer; }.mi-tower-ticket-panel button small { display:block; color:#ffe28b; letter-spacing:0; }.mi-tower-ticket-panel button:disabled { opacity:.42; cursor:not-allowed; }
.mi-tower-stage { position:relative; min-height:0; overflow:hidden; isolation:isolate; background-image:linear-gradient(180deg,rgba(1,8,15,.08),rgba(1,8,14,.36)),url('/images/maru-idle/trials/tower-of-trials-v1.png'); background-position:center 64%; background-size:cover; }.mi-tower-stage::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 49%,transparent 22%,rgba(0,5,11,.35) 86%); }.mi-tower-path { position:absolute; z-index:-1; left:50%; bottom:3%; width:2px; height:91%; background:linear-gradient(transparent,#63e5da 20%,#f6cf67 70%,transparent); box-shadow:0 0 14px #65eadc; transform:translateX(-50%) rotate(2deg); opacity:.52; }
.mi-tower-battle { position:absolute; z-index:5; inset:0; overflow:hidden; background:radial-gradient(ellipse at 50% 68%,rgba(23,109,112,.38),transparent 36%),linear-gradient(180deg,rgba(1,8,15,.12),rgba(1,8,14,.68)); }.mi-tower-battle::before { content:""; position:absolute; z-index:-1; left:14%; right:14%; bottom:5%; height:46%; border:2px solid rgba(111,238,222,.3); border-radius:50%; background:radial-gradient(ellipse,rgba(22,116,114,.24),rgba(4,16,22,.28) 62%,transparent 64%); box-shadow:inset 0 0 36px rgba(103,238,221,.18),0 0 30px rgba(65,214,203,.12); transform:perspective(480px) rotateX(63deg); }.mi-tower-battle::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(105deg,transparent 42%,rgba(120,245,231,.09) 49%,transparent 56%); animation:mi-tower-aura 2.1s linear infinite; }
.mi-tower-battle-title { position:absolute; z-index:7; top:3%; left:50%; min-width:min(70%,430px); display:grid; justify-items:center; padding:6px 15px; border:1px solid rgba(229,191,92,.52); border-radius:999px; color:#f9e8b8; background:linear-gradient(90deg,transparent,rgba(4,17,24,.93) 18% 82%,transparent); text-align:center; transform:translateX(-50%); }.mi-tower-battle-title small { color:#6fe4d8; font-size:clamp(7px,1.25cqw,9px); font-weight:950; letter-spacing:.15em; }.mi-tower-battle-title strong { font:900 clamp(12px,2.1cqw,16px)/1.2 Georgia,"Noto Serif KR",serif; }
.mi-tower-enemy { position:absolute; z-index:3; top:13%; left:50%; width:clamp(150px,34cqw,255px); height:42%; transform:translateX(-50%); }.mi-tower-enemy > img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 10px #000c) drop-shadow(0 0 16px rgba(97,230,219,.4)); transform-origin:50% 70%; animation:mi-tower-enemy-enter .5s ease-out both,mi-tower-enemy-idle 1.3s .5s ease-in-out infinite alternate; }.mi-tower-battle.phase-clash .mi-tower-enemy > img,.mi-tower-battle.phase-ultimate .mi-tower-enemy > img { animation:mi-tower-enemy-hit .35s ease-out; }.mi-tower-battle.phase-victory .mi-tower-enemy > img { animation:mi-tower-enemy-fall .8s ease-in both; }.mi-tower-battle.phase-defeat .mi-tower-enemy > img { animation:mi-tower-enemy-idle .8s ease-in-out infinite alternate; }
.mi-tower-combat-bar { position:absolute; z-index:5; right:3%; left:3%; display:grid; gap:3px; padding:5px 8px; border:1px solid rgba(239,199,93,.42); border-radius:8px; background:rgba(2,13,19,.9); box-shadow:0 5px 15px #000a; }.mi-tower-enemy .mi-tower-combat-bar { top:0; transform:translateY(-30%); }.mi-tower-party > .mi-tower-combat-bar { right:18%; bottom:2%; left:18%; }.mi-tower-combat-bar span { display:flex; justify-content:space-between; gap:8px; color:#f5e5bd; font-size:clamp(8px,1.35cqw,10px); }.mi-tower-combat-bar span em { color:#ffb18a; font-style:normal; }.mi-tower-combat-bar > i { height:6px; overflow:hidden; border-radius:99px; background:#160b0a; }.mi-tower-combat-bar > i > u { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#bd3f49,#ff8a66); box-shadow:0 0 8px #ed645c; transition:width .35s ease; }.mi-tower-combat-bar.is-party span em { color:#85eadc; }.mi-tower-combat-bar.is-party > i { background:#051917; }.mi-tower-combat-bar.is-party > i > u { background:linear-gradient(90deg,#3dc7bc,#87f0d7); box-shadow:0 0 8px #62e5d6; }
.mi-tower-damage { position:absolute; z-index:8; top:35%; left:52%; color:#fff3cb; font:950 clamp(25px,5.2cqw,42px)/1 Georgia,"Noto Serif KR",serif; text-shadow:0 2px 0 #8b271e,0 0 13px #ff815d,0 4px 15px #000; animation:mi-tower-damage-pop .55s ease-out both; pointer-events:none; }
.mi-tower-party { position:absolute; z-index:4; right:5%; bottom:2%; left:5%; height:39%; }.mi-tower-party-units { position:absolute; inset:0 3% 10%; display:flex; align-items:end; justify-content:center; }.mi-tower-party figure { position:relative; width:clamp(74px,16cqw,125px); height:100%; margin:0 -3.8%; transform-origin:50% 100%; filter:drop-shadow(0 12px 8px #000c); animation:mi-tower-party-enter .45s cubic-bezier(.2,.8,.3,1) both; }.mi-tower-party figure:nth-child(2) { z-index:2; height:92%; animation-delay:.07s; }.mi-tower-party figure:nth-child(3) { z-index:4; height:106%; animation-delay:.13s; }.mi-tower-party figure:nth-child(4) { z-index:3; height:91%; animation-delay:.19s; }.mi-tower-party figure:nth-child(5) { height:86%; animation-delay:.25s; }.mi-tower-party figure img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }.mi-tower-party figcaption { position:absolute; right:10%; bottom:0; left:10%; overflow:hidden; padding:2px 4px; border:1px solid rgba(99,224,210,.4); border-radius:5px; color:#d9fff7; background:rgba(4,25,29,.88); font-size:clamp(6px,1.1cqw,8px); text-align:center; text-overflow:ellipsis; white-space:nowrap; }.mi-tower-battle.phase-clash .mi-tower-party figure:nth-child(3),.mi-tower-battle.phase-ultimate .mi-tower-party figure { animation:mi-tower-party-lunge .4s ease-out; }.mi-tower-battle.phase-defeat .mi-tower-party figure { animation:mi-tower-party-fall .75s ease-in both; }
.mi-tower-clash { position:absolute; z-index:6; top:45%; left:50%; width:clamp(150px,35cqw,260px); aspect-ratio:1; opacity:0; transform:translate(-50%,-50%); pointer-events:none; }.mi-tower-battle.phase-clash .mi-tower-clash,.mi-tower-battle.phase-ultimate .mi-tower-clash { opacity:1; }.mi-tower-clash i { position:absolute; top:48%; left:-15%; width:130%; height:12%; border-radius:100%; border-top:clamp(4px,1cqw,8px) solid #a9fff3; box-shadow:0 -4px 0 #ffe788,0 -10px 20px rgba(86,239,228,.85); transform:rotate(-18deg); animation:mi-tower-slash .42s ease-out both; }.mi-tower-clash i:nth-child(2) { transform:rotate(21deg) scaleX(-1); animation-delay:.08s; }.mi-tower-clash b { position:absolute; inset:26%; display:grid; place-items:center; color:#fff1a9; font:950 clamp(32px,7cqw,56px) Georgia,serif; text-shadow:0 0 16px #68ede0,0 5px 12px #000; animation:mi-tower-seal .5s ease-out both; }.mi-tower-battle.phase-ultimate .mi-tower-clash { transform:translate(-50%,-50%) scale(1.35); filter:drop-shadow(0 0 22px #ffe272); }
.mi-tower-battle-result { position:absolute; z-index:12; top:50%; left:50%; min-width:min(78%,430px); display:grid; justify-items:center; gap:4px; padding:clamp(16px,4cqw,28px); border:1px solid #ebc563; border-radius:15px; color:#d7e8e3; background:radial-gradient(circle at 50% 0,rgba(239,193,70,.18),transparent 36%),rgba(2,14,20,.94); box-shadow:0 18px 50px #000e,inset 0 0 27px rgba(96,226,210,.08); text-align:center; transform:translate(-50%,-50%); animation:mi-sheet .25s ease-out; backdrop-filter:blur(7px); }.mi-tower-battle-result small { color:#6ce4d8; font-size:9px; font-weight:950; letter-spacing:.14em; }.mi-tower-battle-result strong { color:#ffe7a4; font:950 clamp(22px,4.5cqw,34px) Georgia,"Noto Serif KR",serif; }.mi-tower-battle-result span { color:#aec3be; font-size:clamp(9px,1.5cqw,11px); }.mi-tower-battle-result button { min-width:150px; min-height:36px; margin-top:7px; border:1px solid #74e4d5; border-radius:8px; color:#ddfff7; background:#0b4c4b; font-weight:900; cursor:pointer; }.mi-tower-battle-result.is-defeat { border-color:#d87b57; background:radial-gradient(circle at 50% 0,rgba(185,67,40,.2),transparent 38%),rgba(21,11,12,.95); }.mi-tower-battle-result.is-defeat strong { color:#ffb384; }
@keyframes mi-tower-aura { to { transform:translateX(45%); } }
@keyframes mi-tower-enemy-enter { from { opacity:0; transform:translateY(-35px) scale(.72); } }
@keyframes mi-tower-enemy-idle { to { transform:translateY(5px) scale(1.025); } }
@keyframes mi-tower-enemy-hit { 25% { filter:brightness(2.2) drop-shadow(0 0 22px #fff); transform:translateX(13px) rotate(3deg); } 55% { transform:translateX(-8px) rotate(-2deg); } }
@keyframes mi-tower-enemy-fall { to { opacity:0; filter:brightness(2) blur(5px); transform:translateY(-30px) scale(1.25); } }
@keyframes mi-tower-party-enter { from { opacity:0; transform:translateY(45px) scale(.78); } }
@keyframes mi-tower-party-lunge { 45% { filter:brightness(1.7) drop-shadow(0 0 13px #72e9dc); transform:translateY(-28px) scale(1.08); } }
@keyframes mi-tower-party-fall { to { opacity:.25; filter:grayscale(.7); transform:translateY(25px) rotate(8deg) scale(.9); } }
@keyframes mi-tower-slash { from { opacity:0; clip-path:inset(0 100% 0 0); } 35% { opacity:1; } to { opacity:0; clip-path:inset(0); transform:rotate(-18deg) translateX(14%); } }
@keyframes mi-tower-seal { from { opacity:0; transform:scale(.3) rotate(-30deg); } 45% { opacity:1; } to { opacity:0; transform:scale(1.35) rotate(9deg); } }
@keyframes mi-tower-damage-pop { from { opacity:0; transform:translateY(20px) scale(.5); } 30% { opacity:1; transform:translateY(-8px) scale(1.18); } to { opacity:0; transform:translateY(-55px) scale(.92); } }
.mi-tower-summit { position:absolute; z-index:2; top:3%; left:50%; display:grid; place-items:center; padding:5px 12px; border:1px solid #e8c35e; border-radius:999px; color:#fff0b4; background:rgba(22,18,13,.82); box-shadow:0 0 22px rgba(255,213,89,.28); transform:translateX(-50%); white-space:nowrap; }.mi-tower-summit small { color:#77ded5; font-size:8px; letter-spacing:.12em; }.mi-tower-summit strong { font-size:clamp(9px,1.5cqw,11px); }
.mi-tower-node { position:absolute; z-index:2; left:var(--node-left); bottom:var(--node-bottom); min-width:clamp(112px,22cqw,170px); display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:6px; padding:6px 8px; border:1px solid rgba(110,212,203,.34); border-radius:10px; color:#dcece8; background:linear-gradient(135deg,rgba(6,29,35,.94),rgba(5,12,19,.91)); box-shadow:0 7px 18px #000a; transform:translate(-50%,50%); backdrop-filter:blur(4px); }.mi-tower-node i { display:grid; width:32px; aspect-ratio:1; place-items:center; border:1px solid #66ded1; border-radius:50%; color:#86eee2; background:#0a3034; font:900 15px Georgia,serif; }.mi-tower-node span { min-width:0; display:grid; }.mi-tower-node small,.mi-tower-node strong,.mi-tower-node em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mi-tower-node small { color:#8faaa5; font-size:7px; }.mi-tower-node strong { color:#f6e7bf; font-size:clamp(10px,1.7cqw,13px); }.mi-tower-node em { color:#78dcd1; font-size:8px; font-style:normal; }.mi-tower-node.is-cleared { opacity:.55; filter:saturate(.45); }.mi-tower-node.is-current { border-color:#ffe278; background:linear-gradient(135deg,rgba(102,75,25,.93),rgba(5,32,36,.96)); box-shadow:0 0 0 2px rgba(255,217,102,.14),0 0 25px rgba(255,205,75,.34); animation:mi-ready-pulse 1.2s ease-in-out infinite alternate; }.mi-tower-node.is-current i,.mi-tower-node.is-boss i { border-color:#ffe073; color:#ffe794; background:#493719; }.mi-tower-node.is-locked { opacity:.72; }.mi-tower-node.is-boss { border-color:#e8b653; }
.mi-tower-challenge { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(90px,.48fr) minmax(0,1fr) minmax(150px,.72fr); align-items:stretch; gap:6px; padding:8px clamp(9px,2.2cqw,16px); border-top:1px solid rgba(230,187,83,.28); background:linear-gradient(90deg,#071a20,#11191d); }.mi-tower-challenge > div { min-width:0; display:grid; align-content:center; padding:6px 8px; border:1px solid rgba(117,183,174,.18); border-radius:8px; background:rgba(4,17,22,.7); }.mi-tower-challenge small { color:#72dcd1; font-size:clamp(7px,1.2cqw,9px); font-weight:900; }.mi-tower-challenge strong { overflow:hidden; color:#ffe7ab; font-size:clamp(11px,1.8cqw,14px); text-overflow:ellipsis; white-space:nowrap; }.mi-tower-challenge span { overflow:hidden; color:#9bb0ab; font-size:clamp(7px,1.25cqw,9px); text-overflow:ellipsis; white-space:nowrap; }.mi-tower-opponent em { overflow:hidden; color:#7fded3; font-size:clamp(7px,1.2cqw,9px); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.mi-tower-odds { text-align:center; }.mi-tower-odds strong { font-size:clamp(18px,3.2cqw,25px); }.mi-tower-actions { display:grid !important; grid-template-columns:1fr 1.15fr; gap:5px; padding:0 !important; border:0 !important; background:none !important; }.mi-tower-actions button { min-width:0; border:1px solid #ffd66d; border-radius:9px; color:#fff3c8; background:linear-gradient(180deg,#a45425,#653018); font-size:clamp(10px,1.65cqw,13px); font-weight:950; cursor:pointer; }.mi-tower-actions button:disabled { opacity:.48; cursor:not-allowed; }.mi-tower-actions .is-sweep { display:grid; place-content:center; border-color:#6edfd3; color:#d8fff8; background:linear-gradient(180deg,#17605e,#0a393b); }.mi-tower-actions .is-sweep small { color:#9edfd7; font-size:7px; letter-spacing:0; }.mi-tower-actions .is-challenge { font-size:clamp(12px,1.9cqw,15px); }
.mi-tower-result { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; padding:6px 14px; border-top:1px solid rgba(108,224,210,.25); color:#b9cbc7; background:#092226; font-size:clamp(9px,1.4cqw,11px); }.mi-tower-result strong { color:#77e2d6; }.mi-tower-result.is-defeat { background:#281913; }.mi-tower-result.is-defeat strong { color:#ffab7b; }.mi-trial-tower > footer { display:flex; flex-wrap:wrap; gap:5px 11px; padding:6px 12px; border-top:1px solid rgba(230,188,87,.27); color:#a7b8b4; background:#061319; font-size:clamp(8px,1.35cqw,10px); }.mi-trial-tower > footer b { color:#f2ca68; }.mi-trial-tower > footer em { margin-left:auto; color:#738e89; font-style:normal; }

/* Persistent spirit-herb farm. Six translucent plot controls align with the generated terrace art. */
.mi-spirit-farm { position:absolute; z-index:72; inset:4px 4px calc(10.5% + 3px); min-width:0; min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; overflow:hidden; border:1px solid #73ddc5; border-radius:clamp(12px,2.8cqw,20px); color:#edf8f3; background:#031015; box-shadow:0 24px 70px #000e; animation:mi-sheet .2s ease-out; }
.mi-spirit-farm > header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:clamp(10px,2.7cqw,18px) clamp(13px,3.3cqw,24px); border-bottom:1px solid rgba(218,180,94,.28); background:linear-gradient(90deg,rgba(9,48,47,.98),rgba(13,25,28,.96)); }.mi-spirit-farm > header small { color:#68e7d2; font-size:clamp(9px,1.5cqw,11px); font-weight:950; letter-spacing:.15em; }.mi-spirit-farm > header h2 { margin:1px 0; color:#fff0c3; font:900 clamp(21px,4.1cqw,31px)/1.05 Georgia,"Noto Serif KR",serif; }.mi-spirit-farm > header p { margin:4px 0 0; color:#abc2bc; font-size:clamp(9px,1.6cqw,12px); }
.mi-farm-toolbar { display:grid; grid-template-columns:minmax(115px,.34fr) minmax(0,1fr); gap:8px; padding:8px clamp(9px,2.2cqw,16px); border-bottom:1px solid rgba(98,218,199,.18); background:#06161b; }.mi-farm-toolbar > div:first-child { display:grid; align-content:center; padding:7px 10px; border:1px solid rgba(219,184,95,.28); border-radius:9px; background:linear-gradient(145deg,rgba(64,56,27,.55),rgba(8,29,31,.9)); }.mi-farm-toolbar > div:first-child small { color:#7ccfc2; font-size:9px; }.mi-farm-toolbar > div:first-child strong { color:#ffe18a; font-size:clamp(17px,3cqw,22px); }.mi-farm-toolbar > div:first-child span { color:#9db0ab; font-size:9px; }
.mi-farm-crops { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.mi-farm-crops button { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:5px; padding:4px 6px; border:1px solid rgba(134,166,157,.24); border-radius:8px; color:#dce8e3; background:#0a1d22; text-align:left; cursor:pointer; }.mi-farm-crops button.is-selected { border-color:var(--crop); background:linear-gradient(145deg,color-mix(in srgb,var(--crop) 18%,#152329),#08191e); box-shadow:inset 0 0 14px color-mix(in srgb,var(--crop) 12%,transparent); }.mi-farm-crops img { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 7px var(--crop)); }.mi-farm-crops span { min-width:0; display:grid; }.mi-farm-crops strong { overflow:hidden; color:#f5e8c6; font-size:clamp(9px,1.55cqw,11px); text-overflow:ellipsis; white-space:nowrap; }.mi-farm-crops small { overflow:hidden; color:#8ea39e; font-size:clamp(7px,1.25cqw,9px); text-overflow:ellipsis; white-space:nowrap; }
.mi-farm-board { min-height:0; overflow:auto; padding:clamp(88px,15cqw,126px) clamp(28px,6.5cqw,52px) clamp(34px,7cqw,54px); background-image:linear-gradient(rgba(1,10,13,.04),rgba(1,10,13,.15)),url('/images/maru-idle/trials/spirit-herb-farm-v1.png'); background-position:center; background-size:cover; }
.mi-farm-plots { min-height:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(clamp(145px,25cqw,210px),1fr)); gap:clamp(8px,2cqw,14px); }.mi-farm-plots article { position:relative; min-width:0; min-height:0; overflow:hidden; border:1px solid rgba(231,197,106,.34); border-radius:14px; background:linear-gradient(180deg,rgba(2,13,14,.04) 12%,rgba(1,9,10,.22) 60%,rgba(2,12,13,.55)); box-shadow:inset 0 -28px 36px rgba(0,0,0,.22),0 6px 14px #0004; }.mi-farm-plots article.is-locked { filter:saturate(.45); }.mi-farm-plots article.is-ready { border-color:#ffe272; box-shadow:inset 0 0 28px rgba(255,219,91,.11),0 0 18px rgba(255,208,66,.2); }.mi-farm-crop-field { position:absolute; z-index:1; inset:3% 1% 27%; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; filter:saturate(var(--bloom)); }.mi-farm-crop-field img { width:41%; max-height:100%; object-fit:contain; transform-origin:50% 100%; transform:translateX(calc((var(--plant-index) - 1) * -9%)) scale(var(--growth)); opacity:calc(.36 + var(--bloom) * .64); filter:drop-shadow(0 8px 7px #000b) drop-shadow(0 0 9px var(--crop)); }.mi-farm-crop-field img:nth-child(1) { margin-right:-16%; }.mi-farm-crop-field img:nth-child(2) { z-index:2; width:47%; }.mi-farm-crop-field img:nth-child(3) { margin-left:-16%; }.mi-farm-plot-status { position:absolute; z-index:3; right:6px; bottom:6px; left:6px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:2px 5px; padding:6px 7px; border:1px solid color-mix(in srgb,var(--crop) 55%,#695b38); border-radius:9px; background:linear-gradient(90deg,rgba(2,15,18,.94),rgba(7,19,20,.84)); box-shadow:0 4px 12px #000a; backdrop-filter:blur(4px); }.mi-farm-plot-status > div { min-width:0; display:grid; }.mi-farm-plot-status strong { overflow:hidden; color:#fff0ca; font-size:clamp(9px,1.65cqw,12px); text-overflow:ellipsis; white-space:nowrap; }.mi-farm-plot-status small { color:#a8beb8; font-size:clamp(7px,1.25cqw,9px); }.mi-farm-plot-status progress { grid-column:1/-1; width:100%; height:6px; accent-color:var(--crop); }.mi-farm-plot-status button { grid-column:1/-1; min-height:24px; border:1px solid rgba(101,224,204,.48); border-radius:6px; color:#a6eee2; background:rgba(8,54,54,.78); font-size:clamp(8px,1.3cqw,10px); font-weight:850; cursor:pointer; }.mi-farm-plot-status button.is-ready { border-color:#f0c75d; color:#fff0b6; background:linear-gradient(180deg,#8a5326,#5c331d); animation:mi-ready-pulse 1.25s ease-in-out infinite alternate; }.mi-farm-plot-status button:disabled { opacity:.7; cursor:default; }.mi-soil-badge,.mi-friend-badge { padding:2px 4px; border:1px solid rgba(112,232,208,.35); border-radius:999px; color:#8fe9d8; background:#08272a; font-size:clamp(6px,1.05cqw,8px); white-space:nowrap; }.mi-soil-badge.is-tired { border-color:#e78a55; color:#ffb27f; background:#382117; }.mi-friend-badge { color:#ffe38d; border-color:#b99c4d; }.mi-farm-empty-bed,.mi-farm-locked-sign { position:absolute; inset:12%; display:grid; place-content:center; justify-items:center; gap:4px; padding:8px; border:1px dashed rgba(221,191,110,.46); border-radius:12px; color:#cfeee6; background:rgba(4,20,21,.52); text-align:center; backdrop-filter:blur(1px); }.mi-farm-empty-bed i,.mi-farm-locked-sign i { display:grid; width:38px; aspect-ratio:1; place-items:center; border:1px solid #78e6d2; border-radius:50%; color:#8df3df; background:#08272a; font-size:23px; font-style:normal; }.mi-farm-empty-bed strong,.mi-farm-locked-sign strong { color:#fff0c5; font-size:clamp(9px,1.7cqw,12px); }.mi-farm-empty-bed small,.mi-farm-locked-sign small { color:#a2b8b2; font-size:clamp(7px,1.2cqw,9px); }.mi-farm-empty-bed em { color:#ffad78; font-size:8px; font-style:normal; }.mi-farm-empty-bed button { min-height:27px; padding-inline:12px; border:1px solid #5edac2; border-radius:7px; color:#d8fff7; background:#0a514c; font-size:9px; font-weight:900; }.mi-farm-empty-bed button:disabled { opacity:.45; }
.mi-farm-management { position:relative; display:grid; gap:6px; padding:7px clamp(9px,2.2cqw,16px); border-top:1px solid rgba(104,231,210,.22); background:linear-gradient(90deg,#06171b,#0b1d1e); }.mi-farm-seed-packs,.mi-farm-services { display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); gap:5px; align-items:stretch; }.mi-farm-seed-packs > b { align-self:center; padding-right:5px; color:#f3ce73; font-size:9px; white-space:nowrap; }.mi-farm-seed-packs button,.mi-farm-services button { min-width:0; min-height:38px; display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:4px; padding:4px 6px; border:1px solid rgba(112,203,190,.24); border-radius:7px; color:#dfece7; background:#0a2024; text-align:left; cursor:pointer; }.mi-farm-seed-packs button { border-color:color-mix(in srgb,var(--pack) 55%,#264346); }.mi-farm-seed-packs i,.mi-farm-services i { color:var(--pack,#71ead2); font-size:17px; font-style:normal; text-align:center; }.mi-farm-seed-packs span,.mi-farm-services span { min-width:0; display:grid; }.mi-farm-seed-packs strong,.mi-farm-services strong { overflow:hidden; color:#f7e9c5; font-size:clamp(8px,1.35cqw,10px); text-overflow:ellipsis; white-space:nowrap; }.mi-farm-seed-packs small,.mi-farm-services small { overflow:hidden; color:#8fa7a1; font-size:clamp(7px,1.1cqw,8px); text-overflow:ellipsis; white-space:nowrap; }.mi-farm-seed-packs button:disabled,.mi-farm-services button:disabled { opacity:.45; cursor:default; }.mi-farm-services { grid-template-columns:repeat(3,minmax(0,1fr)); }.mi-farm-services button.is-friend { border-color:#c5a54e; }.mi-farm-friends { position:absolute; z-index:8; right:8px; bottom:6px; left:8px; max-height:180px; overflow:auto; padding:8px; border:1px solid #d1ad53; border-radius:10px; background:rgba(4,20,23,.98); box-shadow:0 10px 28px #000e; }.mi-farm-friends > div { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }.mi-farm-friends > div b { color:#ffe293; }.mi-farm-friends > div button,.mi-farm-friends article button { border:1px solid #6adac6; border-radius:6px; color:#c8fff4; background:#0b4d49; }.mi-farm-friends p { margin:10px 3px; color:#9db4ae; font-size:9px; }.mi-farm-friends article { display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; padding:6px; border-top:1px solid rgba(111,218,199,.17); }.mi-farm-friends article span { display:grid; }.mi-farm-friends article strong { color:#f7e7bd; font-size:10px; }.mi-farm-friends article small { color:#8fa7a1; font-size:8px; }.mi-farm-friends article button { min-height:29px; padding-inline:9px; font-size:9px; font-weight:900; }
.mi-spirit-farm > footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px clamp(10px,2.4cqw,17px); border-top:1px solid rgba(222,181,93,.3); background:#06151a; }.mi-spirit-farm > footer div { min-width:0; display:grid; }.mi-spirit-farm > footer b { color:#f0c86a; font-size:clamp(9px,1.5cqw,11px); }.mi-spirit-farm > footer span { overflow:hidden; color:#a9bbb7; font-size:clamp(8px,1.4cqw,10px); text-overflow:ellipsis; white-space:nowrap; }.mi-spirit-farm > footer button { min-height:40px; padding:0 14px; border:1px solid #e2b857; border-radius:8px; color:#fff0bf; background:linear-gradient(180deg,#865125,#573019); font-weight:900; cursor:pointer; }.mi-spirit-farm > footer button:disabled { opacity:.5; cursor:default; }

@container (max-width: 480px) {
    .mi-service-sheet { inset:2px 2px calc(10.5% + 2px); border-radius:11px; }.mi-service-sheet > header p { display:none; }.mi-service-sheet > nav { gap:2px; padding-inline:5px; }.mi-channel-service > header { align-items:start; }.mi-channel-service > header strong { display:none; }.mi-channel-service > div { grid-template-columns:1fr; }.mi-channel-service > div > button { min-height:82px; grid-template-columns:48px minmax(0,1fr) auto; }.mi-channel-service button > i { width:48px; }.mi-mission-service article { grid-template-columns:1fr; gap:6px; }
    .mi-trial-hub { inset:2px 2px calc(10.5% + 2px); border-radius:11px; }
    .mi-trial-hub > header p { display:none; }
    .mi-trial-feature { grid-template-columns:minmax(0,1fr) clamp(74px,23cqw,106px); min-height:0; padding:clamp(13px,3.7cqw,18px); text-align:left; }.mi-trial-feature > img { width:100%; justify-self:center; }.mi-trial-feature h3 { margin-block:3px 5px; }.mi-trial-feature p { margin-block:5px 10px; line-height:1.42; }.mi-trial-feature ul { display:none; }.mi-trial-feature button { width:100%; min-width:0; min-height:44px; }
    .mi-trial-library { grid-template-columns:1fr; }.mi-trial-library > button { min-height:70px; }.mi-trial-hub > footer em { display:none; }
    .mi-endless-trial { inset:2px 2px calc(10.5% + 2px); border-radius:11px; }
    .mi-endless-trial > header p { display:none; }
    .mi-endless-trial > footer { grid-template-columns:1fr; }
    .mi-endless-trial > footer span:nth-child(n+2) { display:none; }
    .mi-trial-tower { inset:2px 2px calc(10.5% + 2px); grid-template-rows:auto auto auto minmax(270px,1fr) auto auto auto; border-radius:11px; }.mi-trial-tower > header p { display:none; }.mi-tower-hud { grid-template-columns:repeat(2,minmax(0,1fr)); }.mi-tower-ticket-panel { grid-template-columns:minmax(0,1fr) auto; }.mi-tower-ticket-panel > div:nth-child(2) { display:none; }.mi-tower-node { min-width:100px; grid-template-columns:27px minmax(0,1fr); padding:4px; }.mi-tower-node i { width:25px; font-size:11px; }.mi-tower-challenge { grid-template-columns:1fr minmax(142px,42%); }.mi-tower-odds,.mi-tower-reward { display:none !important; }.mi-tower-actions { min-height:47px; }.mi-trial-tower > footer em { display:none; }.mi-tower-battle-title { top:2%; }.mi-tower-enemy { top:14%; width:140px; height:39%; }.mi-tower-party { right:1%; left:1%; height:37%; }.mi-tower-party figure { width:72px; margin-inline:-7%; }.mi-tower-party > .mi-tower-combat-bar { right:8%; left:8%; }.mi-tower-battle-result { min-width:88%; }
    .mi-spirit-farm { inset:2px 2px calc(10.5% + 2px); border-radius:11px; }.mi-spirit-farm > header p { display:none; }.mi-farm-toolbar { grid-template-columns:1fr; }.mi-farm-toolbar > div:first-child { display:none; }.mi-farm-board { padding:64px 14px 24px; }.mi-farm-plots { grid-template-rows:repeat(3,minmax(124px,1fr)); gap:6px; }.mi-farm-crop-field { inset:1% -4% 30%; }.mi-farm-plot-status { right:3px; bottom:3px; left:3px; padding:4px; }.mi-farm-plot-status .mi-friend-badge { display:none; }.mi-farm-empty-bed,.mi-farm-locked-sign { inset:8%; }.mi-farm-seed-packs { grid-template-columns:repeat(3,minmax(0,1fr)); }.mi-farm-seed-packs > b { display:none; }.mi-farm-seed-packs button,.mi-farm-services button { grid-template-columns:20px minmax(0,1fr); padding:3px; }.mi-farm-seed-packs i,.mi-farm-services i { font-size:14px; }.mi-spirit-farm > footer { grid-template-columns:1fr; }.mi-spirit-farm > footer div { display:none; }.mi-spirit-farm > footer button { width:100%; min-height:32px; }
}

@media (max-width: 767px) {
    .gp-main-play {
        width: 100vw;
        min-height: 100dvh;
        height: 100dvh;
        padding: 0;
        place-items: center;
        overflow: hidden;
    }
    .mi-stage {
        width: min(100vw, calc(100dvh * 9 / 16));
        min-width: 0;
        max-width: 100vw;
        min-height: 0;
        height: min(100dvh, calc(100vw * 16 / 9));
        max-height: 100dvh;
        aspect-ratio: 9 / 16;
        box-shadow: none;
    }
}

/* A 420px-wide 9:16 surface is 747px tall. On shorter desktop viewports,
   keep the full play surface visible and preserve the ratio instead of clipping it. */
@media (min-width: 768px) and (max-height: 780px) {
    .gp-main-play { padding-block: 0; }
    .mi-stage {
        width: calc(100dvh * .5625);
        height: 100dvh;
        min-width: 0;
        max-width: 100vw;
    }
}

/* Trial cards keep their labels inside the card at tall/tablet widths. */
.mi-trial-library > button,
.mi-trial-library > button > span,
.mi-trial-library > button small,
.mi-trial-library > button strong,
.mi-trial-library > button em { min-width:0; max-width:100%; overflow:hidden; }
.mi-trial-library > button small,
.mi-trial-library > button strong,
.mi-trial-library > button em { text-overflow:ellipsis; white-space:nowrap; }
@media (min-height: 781px) {
    @container (min-width: 481px) and (max-width: 850px) {
        .mi-trial-library { grid-template-columns:repeat(3,minmax(0,1fr)); }
        .mi-trial-library > button { min-height:76px; }
    }
}


@media (prefers-reduced-motion: reduce) {
    .mi-stage, .mi-player, .mi-monster, .mi-boss-guard, .mi-companion, .mi-companion-attack-effect, .mi-slash, .mi-impact, .mi-damage, .mi-unit-damage, .mi-region-intro, .mi-victory, .mi-unlock-card, .mi-attack-orb::before, .mi-track-art i, .mi-summon-reveal, .mi-summon-reveal::before, .mi-summon-sigil, .mi-summon-ring, .mi-summon-magic > b, .mi-summon-magic > span, .mi-inheritance-core > i, .mi-inheritance-core > b { animation: none !important; }
    .mi-ambient i { animation-play-state: paused !important; opacity: .08; }
    .mi-lighting { animation: none !important; }
}

/* Spirit farm v4: one fitted screen, no nested scrollbars, readable type. */
.mi-spirit-farm { grid-template-rows:auto auto minmax(0,1fr) clamp(250px,30cqw,280px) auto; }
.mi-spirit-farm > header { padding:clamp(12px,2.5cqw,20px) clamp(18px,3cqw,26px); }
.mi-spirit-farm > header small { font-size:clamp(10px,1.45cqw,12px); }
.mi-spirit-farm > header h2 { font-size:clamp(27px,4cqw,34px); }
.mi-spirit-farm > header p { font-size:clamp(11px,1.55cqw,13px); }
.mi-farm-toolbar { grid-template-columns:minmax(150px,.3fr) minmax(0,1fr); gap:10px; padding:9px clamp(14px,2.5cqw,20px); }
.mi-farm-toolbar > div:first-child small,.mi-farm-toolbar > div:first-child span { font-size:10px; }
.mi-farm-toolbar > div:first-child strong { font-size:clamp(21px,3cqw,25px); }
.mi-farm-crops { gap:7px; }
.mi-farm-crops button { grid-template-columns:48px minmax(0,1fr); gap:8px; min-height:64px; padding:6px 9px; }
.mi-farm-crops img { width:48px; height:48px; }
.mi-farm-crops strong { font-size:clamp(12px,1.65cqw,14px); }
.mi-farm-crops small { font-size:clamp(9px,1.25cqw,11px); }

.mi-farm-board { position:relative; min-height:0; overflow:hidden; padding:clamp(72px,11cqw,92px) clamp(30px,5.2cqw,44px) 14px; }
.mi-farm-landmarks { inset:2px 10px auto; height:clamp(72px,11cqw,92px); }
.mi-farm-landmark span { font-size:10px; }
.mi-farm-landmark.is-rack { width:clamp(82px,13cqw,112px); height:clamp(88px,14cqw,120px); }
.mi-farm-landmark.is-house { width:clamp(190px,31cqw,280px); height:clamp(88px,14cqw,124px); }
.mi-farm-plots { min-height:100%; grid-template-rows:repeat(3,minmax(0,1fr)); gap:clamp(3px,.9cqw,7px) clamp(6px,1.3cqw,10px); }
.mi-farm-plots article,.mi-farm-plots article.is-ready { overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
.mi-farm-plots article.is-ready .mi-farm-crop-field { filter:saturate(var(--bloom)) drop-shadow(0 0 10px rgba(255,221,96,.55)); }
.mi-farm-crop-field { inset:-4% -8% 22%; gap:0; filter:saturate(var(--bloom)); }
.mi-farm-crop-field img { width:31%; max-height:112%; margin-inline:-7.5%; object-fit:contain; transform-origin:50% 100%; transform:scale(var(--growth)); opacity:calc(.34 + var(--bloom) * .66); filter:drop-shadow(0 9px 6px #000a) drop-shadow(0 0 7px var(--crop)); }
.mi-farm-crop-field img:nth-child(1),.mi-farm-crop-field img:nth-child(5) { width:26%; margin:0 -6%; transform:translateY(7%) scale(var(--growth)); }
.mi-farm-crop-field img:nth-child(2),.mi-farm-crop-field img:nth-child(4) { z-index:2; width:33%; transform:translateY(4%) scale(var(--growth)); }
.mi-farm-crop-field img:nth-child(3) { z-index:3; width:38%; margin-inline:-8%; }
.mi-farm-growth-line { right:7%; bottom:22%; left:7%; height:4px; }
.mi-farm-ground-info { bottom:2px; left:1%; max-width:72%; gap:6px; padding:5px 7px; }
.mi-farm-ground-info strong { font-size:clamp(12px,1.65cqw,15px); }
.mi-farm-ground-info small { font-size:clamp(10px,1.25cqw,12px); }
.mi-farm-ground-info i { padding:3px 6px; font-size:clamp(9px,1.1cqw,11px); }
.mi-farm-ground-actions { right:1%; bottom:2px; gap:5px; }
.mi-farm-ground-actions button { min-width:54px; min-height:36px; padding:4px 10px; font-size:clamp(11px,1.3cqw,13px); }
.mi-farm-empty-bed { inset:0; }
.mi-farm-empty-bed i { width:46px; font-size:29px; }
.mi-farm-empty-bed strong { font-size:clamp(12px,1.6cqw,15px); }
.mi-farm-empty-bed small { font-size:clamp(10px,1.2cqw,12px); }
.mi-farm-empty-bed em { font-size:10px; }
.mi-farm-locked-sign { inset:auto 24% 8%; padding:6px 10px; }
.mi-farm-locked-sign strong { font-size:12px; }.mi-farm-locked-sign small { font-size:10px; }

.mi-farm-management { min-height:0; max-height:none; overflow:hidden; grid-template-rows:auto auto minmax(0,1fr); gap:7px; padding:7px clamp(14px,2.4cqw,20px); }
.mi-farm-market-head b { font-size:13px; }.mi-farm-market-head small { font-size:10px; }.mi-farm-market-head > strong { font-size:12px; }
.mi-farm-seed-shop { min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.mi-farm-seed-shop article { min-height:46px; grid-template-columns:44px minmax(0,1fr) auto auto; gap:6px; padding:4px 7px; }
.mi-farm-seed-shop article > img { width:44px; height:44px; }
.mi-farm-seed-shop article strong { font-size:12px; }.mi-farm-seed-shop article small { font-size:9px; }
.mi-farm-seed-shop button { min-width:45px; min-height:33px; padding-inline:8px; font-size:12px; }
.mi-fertilizer-art { width:41px; }.mi-fertilizer-art i { font-size:24px; }
.mi-farm-facilities { min-height:0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.mi-farm-facilities > button { min-height:0; height:100%; grid-template-columns:minmax(90px,43%) minmax(0,1fr); gap:7px; padding:5px; }
.mi-farm-facilities img { width:100%; height:100%; max-height:112px; }
.mi-farm-facilities small { font-size:9px; }.mi-farm-facilities strong { font-size:clamp(11px,1.3cqw,13px); }.mi-farm-facilities em { font-size:10px; }
.mi-friend-fertilizer-art { width:clamp(68px,9cqw,84px); }.mi-friend-fertilizer-art i { font-size:36px; }
.mi-spirit-farm > footer b { font-size:12px; }.mi-spirit-farm > footer span { font-size:11px; }.mi-spirit-farm > footer button { min-height:44px; font-size:14px; }

@container (max-width: 480px) {
    .mi-spirit-farm { grid-template-rows:auto auto minmax(0,1fr) 220px auto; }
    .mi-spirit-farm > header { padding:8px 11px; }.mi-spirit-farm > header h2 { font-size:23px; }.mi-spirit-farm > header p { display:none; }
    .mi-farm-toolbar { grid-template-columns:1fr; padding:5px 7px; }.mi-farm-toolbar > div:first-child { display:none; }.mi-farm-crops button { grid-template-columns:34px minmax(0,1fr); min-height:45px; padding:3px 5px; }.mi-farm-crops img { width:34px; height:34px; }.mi-farm-crops strong { font-size:11px; }.mi-farm-crops small { font-size:9px; }
    .mi-farm-board { padding:52px 10px 9px; }.mi-farm-landmarks { height:55px; }.mi-farm-landmark.is-rack { width:64px; height:70px; }.mi-farm-landmark.is-house { width:140px; height:70px; }.mi-farm-landmark span { font-size:7px; }
    .mi-farm-plots { grid-template-rows:repeat(3,minmax(0,1fr)); gap:2px 4px; }.mi-farm-crop-field { inset:-4% -12% 24%; }.mi-farm-ground-info { max-width:66%; gap:2px; padding:3px 4px; text-shadow:0 1px 3px #000; }.mi-farm-ground-info strong { font-size:11px; }.mi-farm-ground-info small { font-size:9px; }.mi-farm-ground-info i { display:none; }.mi-farm-ground-actions button { min-width:41px; min-height:28px; padding:2px 5px; font-size:10px; }.mi-farm-growth-line { bottom:24%; }.mi-farm-empty-bed i { width:32px; font-size:21px; }.mi-farm-empty-bed strong { font-size:11px; }.mi-farm-empty-bed small { font-size:9px; }
    .mi-farm-management { max-height:none; padding:4px 6px; gap:4px; }.mi-farm-market-head small { display:none; }.mi-farm-market-head b,.mi-farm-market-head > strong { font-size:11px; }
    .mi-farm-seed-shop { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }.mi-farm-seed-shop article { min-height:42px; grid-template-columns:32px minmax(0,1fr) auto auto; gap:3px; padding:2px 4px; }.mi-farm-seed-shop article > img { width:32px; height:32px; }.mi-farm-seed-shop article strong { font-size:10px; }.mi-farm-seed-shop article small { font-size:8px; }.mi-farm-seed-shop button { min-width:30px; min-height:27px; padding-inline:3px; font-size:10px; }.mi-fertilizer-art { width:30px; }.mi-fertilizer-art i { font-size:19px; }
    .mi-farm-facilities { grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }.mi-farm-facilities > button { min-height:0; grid-template-columns:42% minmax(0,1fr); gap:3px; padding:3px; }.mi-farm-facilities img { max-height:64px; }.mi-farm-facilities small { display:none; }.mi-farm-facilities strong { font-size:10px; line-height:1.15; white-space:normal; }.mi-farm-facilities em { font-size:8px; }.mi-friend-fertilizer-art { width:42px; }.mi-friend-fertilizer-art i { font-size:23px; }.mi-friend-fertilizer-art b { font-size:12px; }
    .mi-spirit-farm > footer { grid-template-columns:1fr auto; gap:4px; padding:5px 7px; }.mi-spirit-farm > footer div { display:grid; }.mi-spirit-farm > footer b { font-size:10px; }.mi-spirit-farm > footer span { display:none; }.mi-spirit-farm > footer button { width:auto; min-height:32px; padding-inline:8px; font-size:10px; }
}

/* Landscape desktop: use the available canvas instead of shrinking the whole game
   to a phone-width strip merely to preserve 9:16. Mobile keeps the portrait ratio. */
@media (min-width: 768px) and (max-height: 780px) {
    .gp-main-play {
        width:100vw;
        height:100dvh;
        min-height:100dvh;
        padding:0;
        place-items:stretch center;
        overflow:hidden;
    }
    .mi-stage {
        width:min(100vw,820px);
        height:100dvh;
        max-width:820px;
        max-height:100dvh;
        aspect-ratio:auto;
    }
    .mi-spirit-farm {
        grid-template-columns:minmax(0,1fr) minmax(300px,38%);
        grid-template-rows:auto auto minmax(0,1fr) auto;
    }
    .mi-spirit-farm > header,
    .mi-farm-toolbar,
    .mi-spirit-farm > footer { grid-column:1 / -1; }
    .mi-farm-board { grid-column:1; grid-row:3; min-height:0; }
    .mi-farm-management {
        grid-column:2;
        grid-row:3;
        min-height:0;
        border-top:0;
        border-left:1px solid rgba(104,231,210,.22);
    }
    .mi-farm-management .mi-farm-seed-shop {
        grid-template-columns:minmax(0,1fr);
        gap:3px;
    }
    .mi-farm-management .mi-farm-seed-shop article {
        min-height:38px;
        grid-template-columns:36px minmax(0,1fr) auto auto;
        gap:5px;
        padding:3px 5px;
    }
    .mi-farm-management .mi-farm-seed-shop article > img { width:36px; height:36px; }
    .mi-farm-management .mi-farm-seed-shop article strong { font-size:11px; }
    .mi-farm-management .mi-farm-seed-shop article small { font-size:8px; }
    .mi-farm-management .mi-farm-seed-shop button { min-width:38px; min-height:30px; padding-inline:5px; }
    .mi-farm-board .mi-farm-ground-info {
        right:64px;
        max-width:none;
        display:grid;
        grid-template-columns:auto auto;
        justify-content:start;
        gap:2px 5px;
    }
    .mi-farm-board .mi-farm-ground-info > span { grid-column:1 / -1; }
    .mi-farm-board .mi-farm-ground-actions {
        flex-direction:column;
        align-items:stretch;
        gap:3px;
    }
    .mi-farm-board .mi-farm-ground-actions button {
        min-width:56px;
        min-height:28px;
        padding:2px 7px;
    }
}