@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');

:root {
    font-family: 'DM Sans', sans-serif;
    color: #faf5dd;
    background: #152e28;
    font-synthesis: none;
    --mint: #c9ef9e;
    --muted: #b0c5ac;
    --gold: #ffd979
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    overflow: hidden
}

button,
input {
    font: inherit
}

button {
    cursor: pointer;
    color: inherit
}

button:focus-visible,
input:focus-visible {
    outline: 3px solid #ffe092;
    outline-offset: 5px
}

button:disabled {
    cursor: default;
    opacity: .4
}

canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none
}

.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 65% 45%, transparent 20%, #0d21183b 80%, #0b201a8c)
}

#app {
    position: fixed;
    inset: 0;
    overflow: auto;
    pointer-events: none
}

#app>* {
    pointer-events: auto
}

h1,
h2,
h3,
.display {
    font-family: 'Fredoka', sans-serif;
    margin: 0;
    font-weight: 600
}

button {
    border: 0
}

p {
    line-height: 1.6
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 4.5%;
    gap: 16px
}

.brand {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 17px;
    display: flex;
    gap: 12px;
    align-items: center
}

.brand-icon {
    border: 2px solid var(--mint);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    color: var(--mint)
}

.wallet {
    border: 1px solid #b9d8a837;
    background: #182f2dd9;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 11px
}

.coin {
    color: #ffda79
}

.menu {
    max-width: 1280px;
    margin: auto;
    padding: 5vh 5% 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw
}

.eyebrow {
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mint);
    text-transform: uppercase
}

.title {
    font-size: clamp(65px, 7.5vw, 112px);
    line-height: .87;
    letter-spacing: -3px;
    text-shadow: 0 6px 0 #172c28
}

.title span {
    display: block;
    color: var(--mint)
}

.intro {
    color: #c4d4bd;
    font-size: 15px;
    max-width: 350px;
    margin: 24px 0 28px
}

.primary {
    background: var(--mint);
    color: #233a29;
    border-radius: 14px;
    padding: 19px 25px;
    box-shadow: 0 5px 0 #729752;
    font-weight: 800;
    transition: transform .15s, filter .15s
}

.primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06)
}

.play {
    width: 315px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.play small {
    font-size: 11px;
    font-weight: 500;
    opacity: .65
}

.nav {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    width: min(560px,100%);
    flex-wrap: wrap
}

.nav button {
    flex: 1 1 78px;
    background: #213a32df;
    border: 1px solid #b9d8a824;
    border-radius: 12px;
    padding: 15px 4px;
    font-size: 11px;
    color: #dce6ca
}

.nav button span {
    display: block;
    font-size: 21px;
    margin-bottom: 6px
}

.nav button:hover {
    background: #3a5140
}

.scene-info {
    align-self: end;
    margin-top: 320px;
    padding: 18px 22px;
    max-width: 360px;
    background: #142c26c9;
    border: 1px solid #a0c39138;
    border-radius: 16px;
    backdrop-filter: blur(10px)
}

.scene-info h3 {
    font-size: 23px;
    margin: 6px 0
}

.scene-info p {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.tag {
    font-size: 10px;
    border-radius: 12px;
    padding: 5px 9px;
    background: #a8d68d21;
    color: var(--mint);
    float: right
}

.bottom {
    position: absolute;
    pointer-events: none;
    bottom: 22px;
    left: 4.5%;
    right: 4.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a2bda3;
    font-size: 11px
}

.key {
    border: 1px solid #839a7866;
    border-radius: 4px;
    padding: 3px 6px;
    color: #e0e8ce;
    margin: 0 2px
}

.overlay {
    min-height: 100%;
    display: grid;
    place-items: center;
    background: #091e19a8;
    padding: 24px;
    backdrop-filter: blur(8px)
}

.panel {
    width: min(540px, 100%);
    background: #1c342c;
    border: 1px solid #a6c58a44;
    border-radius: 26px;
    padding: 32px;
    box-shadow: 0 25px 90px #06181088;
    text-align: center
}

.panel.wide {
    width: min(850px, 100%)
}

.panel h2 {
    font-size: 36px;
    margin: 8px 0 12px
}

.panel p {
    color: var(--muted);
    font-size: 14px
}

.back,
.secondary {
    background: #314b3b;
    border: 1px solid #bdd19d27;
    border-radius: 12px;
    padding: 13px 19px;
    font-weight: 600
}

.back {
    float: right;
    padding: 7px 11px
}

.actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px
}

.actions button {
    flex: 1
}

.hero-portrait {
    font-size: 65px;
    background: radial-gradient(circle, #b4d98d26, transparent 70%);
    height: 100px
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 24px 0
}

.stat {
    padding: 13px 8px;
    background: #11271e80;
    border-radius: 12px;
    font-size: 11px;
    color: var(--muted)
}

.stat strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    color: #f6efd5;
    font-size: 24px;
    margin-bottom: 4px
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px
}

.card {
    text-align: left;
    border: 1px solid #819b704d;
    background: #294231;
    border-radius: 17px;
    padding: 22px 18px;
    transition: transform .15s
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--mint)
}

.card .icon {
    font-size: 32px;
    display: block;
    margin: 20px 0
}

.card h3 {
    font-size: 23px
}

.card p {
    font-size: 13px;
    min-height: 60px
}

.rarity {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mint)
}

.rare {
    border-color: #8ebfe27a
}

.rare .rarity {
    color: #9cd9ff
}

.training {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 17px 0;
    border-bottom: 1px solid #a5bc8f24;
    gap: 14px
}

.training .details {
    flex: 1
}

.training h3 {
    font-size: 18px
}

.training p {
    font-size: 11px;
    margin: 5px 0
}

.training button {
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--mint);
    color: #233a29;
    font-weight: 700
}

.setting {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin: 24px 0;
    text-align: left;
    font-size: 14px
}

.setting input[type=range] {
    width: 45%;
    accent-color: var(--mint)
}

.setting input[type=checkbox] {
    accent-color: var(--mint);
    width: 20px;
    height: 20px
}

#hud {
    position: fixed;
    left: 20px;
    right: 20px;
    top: max(16px, env(safe-area-inset-top));
    pointer-events: none
}

#hud[hidden] {
    display: none
}

.hud-row {
    display: flex;
    align-items: center;
    gap: 16px
}

.hp-wrap {
    width: 180px
}

.hud-label {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 7px
}

.bar {
    height: 9px;
    border-radius: 8px;
    background: #102a21dd;
    overflow: hidden
}

.bar i {
    display: block;
    background: #df8276;
    height: 100%;
    transition: width .15s
}

.xp {
    height: 5px;
    margin-top: 12px
}

.xp i {
    background: var(--mint)
}

.timer {
    margin: auto;
    font-family: 'Fredoka', sans-serif;
    font-size: 30px
}

.pause {
    pointer-events: auto;
    background: #1d372dd9;
    border: 1px solid #b9d8a842;
    border-radius: 12px;
    padding: 11px 16px
}

.bossbar {
    width: min(450px, 80%);
    margin: 20px auto;
    text-align: center;
    font-size: 12px;
    color: #ffe3aa
}

.bossbar .bar {
    margin-top: 7px
}

.bossbar i {
    background: #e8b45c
}

.skillbar {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    pointer-events: none
}

.skill-slot {
    background: #1a3126cc;
    border: 1px solid #a6c58a44;
    border-radius: 10px;
    padding: 9px;
    font-size: 20px
}

.skill-slot small {
    font-size: 10px;
    color: var(--mint)
}

#toast {
    position: fixed;
    top: max(88px, env(safe-area-inset-top));
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    pointer-events: none;
    border: 1px solid #d0dea25e;
    border-radius: 30px;
    background: #203d30e8;
    padding: 13px 24px;
    color: #eaf6ce;
    font-weight: 600;
    transition: opacity .25s, transform .25s;
    max-width: min(620px, calc(100vw - 24px));
    white-space: normal;
    text-align: center;
    font-size: 14px
}
#toast.urgent{border-color:#ffe4a4;background:#553b2cea;color:#fff1cb}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

#toast.visible {
    opacity: 1;
    transform: translate(-50%, 0)
}

.muted {
    color: var(--muted)
}

@media(min-width:1500px) {
    .menu {
        padding-top: 10vh
    }
}

@media(max-width:700px) {
    .topbar {
        padding: 20px 6%
    }

    .brand {
        font-size: 12px
    }

    .wallet {
        padding: 8px 13px;
        font-size: 13px
    }

    .menu {
        display: block;
        padding: 5vh 7% 110px
    }

    .title {
        font-size: 73px
    }

    .intro {
        max-width: 240px;
        font-size: 13px
    }

    .play,
    .nav {
        width: min(300px, 100%)
    }

    .scene-info {
        margin: 32px 0 0;
        max-width: 300px;
        padding: 14px 18px
    }

    .scene-info h3 {
        font-size: 20px
    }

    .bottom {
        position: relative;
        padding: 0 7% 20px;
        bottom: auto;
        left: 0;
        right: 0
    }

    .bottom .desktop-help {
        display: none
    }

    .panel {
        padding: 24px 20px
    }

    .panel h2 {
        font-size: 30px
    }

    .cards {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px
    }

    .card {
        padding: 14px 18px;
        position: relative;
        padding-left: 68px
    }

    .card .icon {
        position: absolute;
        left: 20px;
        top: 26px;
        margin: 0;
        font-size: 28px
    }

    .card h3 {
        font-size: 21px;
        margin-top: 5px
    }

    .card p {
        min-height: 0;
        margin: 5px 0;
        font-size: 12px
    }

    .hp-wrap {
        width: 115px
    }

    #hud {
        left: 12px;
        right: 12px
    }

    .hud-row {
        gap: 10px
    }

    .timer {
        font-size: 26px
    }

    .hud-row .wallet {
        padding: 8px 10px
    }

    .overlay {
        padding: 15px
    }

    .skillbar {
        bottom: 18px
    }

    .stats {
        gap: 7px
    }

    .stat strong {
        font-size: 21px
    }
}

@media(max-height:680px) and (min-width:701px) {
    .menu {
        padding-top: 10px
    }

    .title {
        font-size: 75px
    }

    .scene-info {
        margin-top: 230px
    }

    .intro {
        margin: 16px 0
    }

    .topbar {
        padding-top: 18px;
        padding-bottom: 18px
    }

    .bottom {
        bottom: 12px
    }
}

@media(max-height:500px) and (max-width:700px) {
    .topbar {
        padding: 12px 5%
    }

    .brand {
        font-size: 10px
    }

    .brand-icon {
        width: 24px;
        height: 24px
    }

    .menu {
        padding: 5px 6% 35px
    }

    .title {
        font-size: 52px
    }

    .eyebrow {
        font-size: 9px;
        margin: 8px 0 12px
    }

    .intro {
        font-size: 11px;
        margin: 14px 0;
        line-height: 1.45
    }

    .play {
        padding: 13px 18px;
        font-size: 14px;
        width: 265px
    }

    .nav {
        width: 265px;
        margin-top: 14px
    }

    .nav button {
        padding: 9px 4px
    }

    .nav button span {
        font-size: 16px;
        margin-bottom: 3px
    }

    .scene-info,
    .bottom {
        display: none
    }

    .wallet {
        padding: 7px 12px
    }

    .panel {
        margin: 5px 0
    }

    .overlay {
        align-items: start
    }

    .menu>div {
        max-width: 290px
    }
}

/* Phase 1.5: short, readable feedback with no input-blocking animation. */
canvas:focus {
    outline: none
}

.topbar {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-left: max(5%, env(safe-area-inset-left));
    padding-right: max(5%, env(safe-area-inset-right))
}

.overlay {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    align-items: safe center
}

#hud {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    top: max(16px, env(safe-area-inset-top))
}

.hud-grid {
    display: grid;
    grid-template-columns: 170px minmax(140px, 290px) 90px auto;
    align-items: center;
    gap: 22px;
    max-width: 1100px;
    margin: auto
}

.hp-wrap {
    width: auto;
    min-width: 0
}

.xp-wrap {
    min-width: 0
}

.xp-wrap .xp {
    margin: 0;
    height: 7px
}

.hud-tools {
    display: flex;
    gap: 10px;
    justify-content: end;
    align-items: center
}

.hud-tools .wallet {
    min-width: 70px;
    padding: 10px 13px;
    font-variant-numeric: tabular-nums
}

.timer {
    font-variant-numeric: tabular-nums;
    margin: 0;
    text-align: center;
    font-size: 28px
}

.hud-label {
    font-size: 11px
}

.kill-count {
    grid-column: 1/-1;
    text-align: center;
    font-size: 10px;
    color: #d1e0bc;
    opacity: .8;
    margin-top: -16px
}

.low-hp .bar i {
    animation: healthPulse 1.4s ease-in-out infinite
}

.critical-hp .bar i {
    animation-duration: .8s;
    background: #ff887d
}

.pickup-pulse {
    filter: brightness(1.2);
    transform: scale(1.018);
    transition: transform .12s, filter .12s
}

.bossbar {
    position: relative;
    max-width: 420px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #263127e6;
    border: 1px solid #d5b16b69;
    border-radius: 11px
}

.bossbar>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px
}

.bossbar strong {
    font-size: 8px;
    letter-spacing: 1px;
    color: #f5c777
}

.boss-half {
    position: absolute;
    width: 2px;
    height: 9px;
    background: #263127;
    bottom: 10px;
    left: 50%
}

.skillbar {
    bottom: max(18px, env(safe-area-inset-bottom));
    gap: 8px
}

.skill-slot {
    position: relative;
    isolation: isolate;
    width: 49px;
    height: 54px;
    padding: 7px 4px;
    text-align: center;
    background: #1c342be8;
    overflow: hidden
}

.skill-slot>span {
    position: relative;
    z-index: 1;
    display: block;
    line-height: 22px
}

.skill-slot small {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 9px;
    line-height: 15px
}

.cooldown {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: conic-gradient(#d3ecc937 var(--cooldown, 0deg), transparent 0deg);
    pointer-events: none
}

.moment {
    position: fixed;
    z-index: 2;
    top: 29%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    width: min(92%, 650px);
    filter: drop-shadow(0 3px 9px #10291f);
    animation: momentIn .18s ease-out
}

.moment[hidden] {
    display: none
}

.moment strong {
    display: block;
    font: 600 clamp(27px, 4vw, 48px)/1.1 'Fredoka', sans-serif;
    letter-spacing: 1px;
    color: #edf5cb
}

.moment span {
    display: block;
    margin-top: 10px;
    color: #e4e7cf;
    font-size: 12px;
    letter-spacing: .3px
}

.moment.countdown {
    top: 39%
}

.moment.countdown strong {
    font-size: 85px;
    color: var(--mint)
}

.moment.level strong {
    color: #d5f9a9
}

.moment.boss strong,
.moment.swarm strong,
.moment.elite strong {
    color: #ffe1a0
}

.moment.elite strong {
    font-size: 27px
}

.moment.victory strong {
    color: #ffecba
}

#toast {
    max-width: 92%;
    white-space: normal;
    text-align: center;
    font-size: 12px;
    top: 21%;
    padding: 11px 20px;
    z-index: 2
}

.card {
    position: relative;
    animation: cardIn .25s backwards;
    animation-delay: var(--delay, 0ms);
    display: flex;
    flex-direction: column;
    min-width: 0
}

.card p {
    min-height: 48px;
    margin-bottom: 14px
}

.card .icon {
    margin: 20px 0 12px
}

.card h3 {
    font-size: 22px
}

.card .rarity {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.5px;
    font-size: 9px
}

.card .rarity b {
    font-size: 12px;
    letter-spacing: 0
}

.card.rare {
    border-style: double;
    border-width: 3px;
    padding: 20px 16px
}

.card.epic {
    border: 2px dashed #c5a6f7;
    border-radius: 6px 22px;
    background: linear-gradient(145deg, #3c3652, #263c35)
}

.card.legendary {
    border: 3px double #efcc77;
    border-radius: 24px 5px;
    box-shadow: inset 0 0 0 5px #efcc7715;
    background: repeating-linear-gradient(135deg, #e5c67108 0px, #e5c67108 2px, transparent 2px, transparent 12px), #354331
}

.epic .rarity {
    color: #d7b6ff
}

.legendary .rarity {
    color: #ffe398
}

.upgrade-level {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 9px;
    letter-spacing: 1px;
    color: #a9bf9c;
    margin: 4px 0 12px
}

.upgrade-level span {
    color: #e2efc7
}

.comparison {
    padding: 10px 12px;
    border-radius: 10px;
    background: #112a235e;
    margin-bottom: 18px
}

.comparison>span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    font-size: 10px;
    color: #afc4a5;
    margin: 4px 0
}

.comparison b {
    font-size: 11px;
    color: #d4e1c6;
    text-align: right;
    font-weight: 500
}

.comparison>span:last-child b {
    color: #ddf6b1;
    font-weight: 700
}

.choose-label {
    margin-top: auto;
    font-size: 11px;
    color: var(--mint)
}

.reroll-slot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    color: #afc39c;
    margin-top: 22px
}

.reroll-slot button {
    font-size: 11px;
    padding: 8px 12px;
    border: 1px solid #afc39c40;
    border-radius: 8px;
    background: transparent;
    opacity: .55
}

.first-upgrade .card {
    box-shadow: 0 0 0 2px #d8f5ad35
}

.cards.selecting .card {
    opacity: .25;
    transform: scale(.97);
    transition: opacity .14s, transform .14s
}

.cards.selecting .card.selected {
    opacity: 1;
    transform: scale(1.025);
    border-color: #e9fcc9;
    box-shadow: 0 0 25px #bcec8c36
}

.setting select {
    background: #2f4939;
    border: 1px solid #9ebc8169;
    color: #f1f4dd;
    padding: 10px 14px;
    border-radius: 9px;
    min-width: 145px
}

.build-heading {
    text-align: left;
    font-size: 17px;
    margin: 20px 0 12px;
    color: #d6e9b5
}

.build-list>div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 11px 0;
    border-bottom: 1px solid #a4bd9026;
    font-size: 13px
}

.build-list small {
    font-size: 11px;
    color: #b6c9a7;
    text-align: right
}

.passive-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    text-align: left
}

.passive-list>span {
    font-size: 11px;
    background: #2f4838;
    padding: 8px 10px;
    border-radius: 7px
}

.record-badge {
    background: #e8d08712;
    border: 1px solid #e8d08748;
    border-radius: 12px;
    padding: 12px;
    color: #ffe299;
    font-weight: 700;
    font-size: 13px
}

.record-badge small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    margin-top: 6px
}

.result-emblem {
    font-size: 45px;
    animation: momentIn .3s ease-out
}

.stat strong {
    font-variant-numeric: tabular-nums
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes momentIn {
    from {
        opacity: 0;
        translate: 0 6px;
        scale: .97
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1
    }
}

@keyframes healthPulse {
    50% {
        filter: brightness(1.4)
    }
}

@media(max-width:700px) {
    .hud-grid {
        grid-template-columns: minmax(95px, 1fr) 64px auto;
        gap: 10px 12px
    }

    .hp-wrap {
        grid-column: 1;
        grid-row: 1
    }

    .timer {
        grid-column: 2;
        grid-row: 1;
        font-size: 25px
    }

    .hud-tools {
        grid-column: 3;
        grid-row: 1;
        gap: 6px
    }

    .hud-tools .wallet {
        min-width: 54px;
        padding: 8px;
        font-size: 12px
    }

    .pause {
        padding: 9px 13px;
        min-height: 42px;
        min-width: 42px
    }

    .xp-wrap {
        grid-column: 1/3;
        grid-row: 2
    }

    .kill-count {
        grid-column: 3;
        grid-row: 2;
        margin: 0;
        font-size: 9px;
        align-self: end;
        padding-bottom: 2px
    }

    .hud-label {
        font-size: 9px;
        margin-bottom: 5px
    }

    .xp-wrap .xp {
        height: 5px
    }

    .bossbar {
        width: 94%;
        padding: 9px 11px
    }

    .bossbar>div:first-child {
        font-size: 10px
    }

    .bossbar strong {
        font-size: 7px
    }

    .card,
    .card.rare {
        padding: 14px 14px 14px 63px
    }

    .card .icon {
        left: 19px;
        top: 24px;
        font-size: 27px
    }

    .card h3 {
        font-size: 20px
    }

    .card p {
        min-height: 0;
        margin: 5px 0 10px;
        font-size: 11px
    }

    .upgrade-level {
        margin: 0 0 6px;
        font-size: 8px
    }

    .comparison {
        padding: 7px 10px;
        margin-bottom: 9px
    }

    .comparison>span {
        font-size: 9px;
        margin: 2px 0
    }

    .comparison b {
        font-size: 10px
    }

    .rarity {
        font-size: 8px
    }

    .choose-label {
        font-size: 10px
    }

    .cards {
        gap: 10px
    }

    .panel.wide {
        padding: 23px 16px
    }

    .panel.wide>p {
        margin: 7px 0;
        font-size: 12px
    }

    .panel.wide h2 {
        font-size: 27px
    }

    .reroll-slot {
        font-size: 9px;
        margin-top: 14px
    }

    .reroll-slot button {
        font-size: 10px
    }

    .build-list>div {
        font-size: 12px
    }

    .build-list small {
        max-width: 45%;
        font-size: 10px
    }

    .stat strong {
        font-size: 19px
    }

    .moment {
        top: 30%
    }
}

@media(max-width:360px) {
    .hud-grid {
        gap: 9px 6px
    }

    .hud-tools {
        gap: 4px
    }

    .hud-tools .wallet {
        min-width: 48px
    }

    .panel {
        padding: 22px 15px
    }

    .card,
    .card.rare {
        padding-left: 53px
    }

    .card .icon {
        left: 13px
    }

    .comparison {
        padding: 6px
    }

    .skill-slot {
        width: 44px
    }

    .skillbar {
        gap: 5px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }

    .cards.selecting .card.selected {
        transform: none
    }

    .pickup-pulse {
        transform: none
    }
}

#app {
    z-index: 3
}

#hud {
    z-index: 1
}

#moment {
    z-index: 2
}

#toast {
    z-index: 4
}

@media(max-height:500px) and (min-width:540px) {
    .panel.wide {
        padding: 15px;
        width: min(850px, 100%)
    }

    .panel.wide h2 {
        font-size: 25px;
        margin: 5px 0
    }

    .panel.wide>p {
        margin: 5px 0;
        font-size: 11px
    }

    .cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 14px
    }

    .card,
    .card.rare {
        padding: 12px
    }

    .card .icon {
        position: static;
        margin: 10px 0 6px;
        font-size: 23px
    }

    .card h3 {
        font-size: 18px
    }

    .card p {
        font-size: 10px;
        min-height: 40px
    }

    .upgrade-level {
        font-size: 7px
    }

    .comparison {
        padding: 6px
    }

    .comparison>span {
        flex-wrap: wrap;
        gap: 2px
    }

    .comparison b {
        font-size: 9px
    }

    .rarity {
        font-size: 8px
    }

    .reroll-slot {
        margin-top: 12px
    }

    .choose-label {
        font-size: 9px
    }
}

@media(max-height:500px) and (min-width:540px) {
    .overlay {
        padding: 8px
    }

    .panel.wide {
        padding: 12px
    }

    .panel.wide .eyebrow {
        font-size: 8px;
        margin: 3px 0
    }

    .panel.wide h2 {
        font-size: 23px;
        margin: 3px 0
    }

    .panel.wide>p {
        font-size: 10px;
        margin: 3px 0
    }

    .cards {
        margin-top: 10px
    }

    .card,
    .card.rare {
        padding: 10px
    }

    .card .icon {
        font-size: 20px;
        line-height: 20px;
        margin: 5px 0
    }

    .card h3 {
        font-size: 17px;
        line-height: 1.1
    }

    .card p {
        font-size: 10px;
        line-height: 1.3;
        min-height: 26px;
        margin: 5px 0 7px
    }

    .comparison {
        padding: 4px 6px;
        margin-bottom: 7px
    }

    .upgrade-level {
        margin-bottom: 5px
    }

    .card .rarity {
        font-size: 8px
    }

    .card .rarity b {
        font-size: 9px
    }

    .reroll-slot {
        margin-top: 10px
    }

    .reroll-slot button {
        padding: 5px 9px
    }
}

/* Phase 2 build details use the existing compact, scrollable panels. */
.damage-list {
    display: grid;
    gap: 18px;
    text-align: left;
    margin: 24px 0
}

.damage-list>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    font-size: 13px
}

.damage-list .bar {
    grid-column: 1/-1;
    height: 6px
}

.evolution-slot {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 5px;
    height: 5px
}

.build-list small {
    line-height: 1.5;
    max-width: 65%
}

@media(max-width:500px) {
    .build-list>div {
        align-items: flex-start;
        gap: 8px
    }

    .build-list small {
        font-size: 10px
    }

    .damage-list>div {
        font-size: 11px
    }
}

/* Evolutions have a distinct shape, label and transformation, not just a rarity color. */
.card.evolution {
    border: 2px solid #f4d3a3;
    background: linear-gradient(145deg, #3d3148, #203b36);
    box-shadow: inset 0 0 0 3px #71577b66, 0 0 20px #c9a1e328
}

.card.evolution .rarity {
    letter-spacing: .16em;
    color: #ffe0a4
}

.evolution-path {
    font-size: 11px;
    line-height: 1.5;
    margin: 8px 0
}

.evolution-path b {
    display: block;
    font-size: 21px
}

.card.evolution .icon {
    font-size: 38px
}

.card.evolution h3 {
    color: #ffe2b2
}

.card.evolution small {
    font-size: 10px;
    line-height: 1.4
}

.evolution-hint {
    display: block;
    font-size: 10px;
    line-height: 1.45;
    color: #c9b5de;
    border-top: 1px solid #829f7550;
    margin: 8px 0;
    padding-top: 6px
}

.evolution-behavior {
    font-size: 11px !important
}

.skill-slot.ready {
    border-color: #ffdb99;
    box-shadow: 0 0 10px #efcb8866
}

.skill-slot.evolved {
    border-color: #d6afe7
}

.skill-slot.evolved small {
    font-size: 7px
}

.evolution-slot {
    width: auto;
    height: auto;
    color: #ffe3a1;
    font-size: 9px
}

.moment.evolution {
    background: #213035e8;
    border: 1px solid #e5c695;
    padding: 18px 24px;
    max-width: calc(100vw - 32px)
}

.moment.evolution strong {
    font-size: clamp(20px, 5vw, 38px);
    color: #ffe1b0
}

.moment.evolution span {
    line-height: 1.5;
    max-width: 410px
}

.transformation {
    font-size: 38px;
    animation: transform-glow 1.25s ease-in-out
}

.transformation b {
    display: inline-block;
    color: #d1aff0;
    font-size: 26px
}

@keyframes transform-glow {
    0% {
        opacity: .2;
        transform: scale(.7)
    }

    55% {
        opacity: 1;
        transform: scale(1.12)
    }

    100% {
        transform: scale(1)
    }
}

.build-list .build-skill {
    display: flex;
    flex-wrap: wrap
}

.build-list .build-skill>span {
    flex: 1
}

.build-list .evolution-progress {
    flex-basis: 100%;
    font-size: 11px;
    line-height: 1.55;
    margin: 8px 0 0;
    color: #c4b8d6
}

.evolution-progress.ready {
    color: #ffe2ae
}

.synergy-list {
    display: grid;
    gap: 9px;
    text-align: left
}

.synergy-list>div {
    border: 1px solid #6b8d7050;
    padding: 10px;
    border-radius: 8px
}

.synergy-list small {
    display: block;
    margin-top: 4px;
    color: #b7c9b0
}

.codex-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left
}

.codex-entry {
    padding: 16px;
    border: 1px solid #77987055;
    border-radius: 12px;
    background: #223c34
}

.codex-entry.discovered {
    border-color: #c5a6dc88
}

.codex-entry p,
.codex-entry small {
    font-size: 12px;
    line-height: 1.6
}

.codex-status {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: #d3bce4
}

.codex-subtitle {
    margin-top: 32px
}

.codex-stats {
    border-top: 1px solid #56745b;
    padding-top: 8px
}

.evolutions-achieved {
    border: 1px solid #c6a4d4;
    border-radius: 10px;
    padding: 12px;
    margin: 14px 0
}

.evolutions-achieved p {
    color: #f3d5a7
}

.element-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center
}

.element-list span {
    padding: 6px;
    border: 1px solid #819a6e;
    border-radius: 5px;
    font-size: 11px
}

.build-summary {
    box-sizing: border-box;
    width: 100%;
    min-height: 190px;
    resize: vertical;
    border: 1px solid #9cae8c;
    border-radius: 8px;
    background: #172e29;
    color: #e2eccd;
    padding: 14px;
    font: 13px/1.7 sans-serif
}

@media(max-width:600px) {
    .codex-grid {
        grid-template-columns: 1fr
    }

    .build-list .build-skill>span {
        flex-basis: 100%
    }

    .build-list .build-skill>small {
        max-width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    .transformation {
        animation: none
    }
}

.mini-hud{max-width:270px;margin:10px auto 0;text-align:center;font-size:11px;color:#f2d6a6}.mini-hud .bar{height:6px;margin-top:5px}.mini-hud .bar i{background:#e0bb83}.boss-reward{margin:14px 0;padding:14px;border:1px solid #c6b07a;border-radius:12px;background:#324d39}.boss-reward p{font-size:12px}.bossbar #boss-name{max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Hero roster shares the forest palette and stays scrollable at phone sizes. */
.hero-layout{display:grid;grid-template-columns:minmax(210px,.85fr) minmax(0,1.3fr);gap:28px;text-align:left;margin-top:22px}.hero-preview{align-self:start;touch-action:pan-y}.hero-art{display:block;width:100%;border-radius:30% 30% 16px 16px;border:1px solid #aec79455;box-shadow:0 15px 35px #12291c55}.hero-art.locked{filter:saturate(.3) brightness(.75)}.hero-arrows{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}.hero-arrows button{min-width:44px;min-height:44px}.hero-arrows span{font-size:10px;letter-spacing:1.3px}.hero-info h2{margin:4px 0;font-size:38px}.hero-info h3{margin:4px 0;font-size:16px}.hero-trait{padding:12px 14px;border:1px solid #8baf7755;border-radius:12px;margin:12px 0;background:#293f3422}.hero-trait p{font-size:12px;margin:5px 0;line-height:1.6}.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:14px 0}.hero-stats .stat{padding:9px 4px}.stat-up{color:#b7e8a4}.stat-down{color:#e8b9a3}.hero-progress{display:grid;gap:8px;font-size:12px;margin:14px 0}.hero-progress progress{width:100%;accent-color:#c6dba5;height:12px}.hero-select{width:100%;margin:16px 0 12px;min-height:48px}.hero-records{font-size:12px}.hero-records summary{cursor:pointer;padding:8px 0}.hero-roster{display:flex;gap:9px;overflow-x:auto;padding:14px 0 5px;margin-top:18px;scroll-snap-type:x proximity}.hero-thumb{flex:0 0 90px;min-width:0;padding:6px;border:1px solid #708d7755;border-radius:12px;background:#233d32;color:var(--cream);scroll-snap-align:center}.hero-thumb.active{border:2px solid #d8e9ac;background:#45614b}.hero-thumb img{display:block;width:100%;border-radius:8px;margin-bottom:5px}.hero-thumb strong,.hero-thumb small{display:block}.hero-thumb small{font-size:9px;margin-top:3px}.hero-identity{display:flex;justify-content:center;align-items:center;gap:18px;margin:16px 0}.hero-identity img{width:120px;border-radius:24px}.hero-identity h2{margin:0}.hero-identity p{margin:4px 0}.hero-identity.compact img{width:58px;border-radius:14px}.hero-identity.compact h2{font-size:22px}.hero-identity.compact p{font-size:11px}.hero-unlock{display:flex;align-items:center;gap:16px;text-align:left;margin:16px 0;padding:14px;border:1px solid #d2d998;border-radius:16px;background:#47634855}.hero-unlock img{width:82px;border-radius:18px;animation:hero-reveal .65s ease-out}.hero-unlock h3{font-size:16px;margin:5px 0}.hero-unlock .eyebrow{font-size:9px}.hero-passive-hud{text-align:center;font-size:10px;color:#e7e8ba;margin-top:7px;text-shadow:0 1px 3px #10271e}.hero-roster button:focus-visible,.hero-arrows button:focus-visible{outline:3px solid #e4ebbd;outline-offset:2px}
@keyframes hero-reveal{from{filter:brightness(.1);transform:scale(.9)}to{filter:brightness(1);transform:scale(1)}}
@media(max-width:600px){.hero-layout{grid-template-columns:1fr;gap:14px}.hero-preview{max-width:220px;margin:auto;width:100%}.hero-info{text-align:center}.hero-info h2{font-size:30px}.hero-trait{text-align:left}.hero-thumb{flex-basis:82px}.hero-roster{margin-top:10px}.hero-identity img{width:90px}.hero-unlock{gap:10px}.hero-unlock img{width:62px}}
@media(prefers-reduced-motion:reduce){.hero-unlock img{animation:none}}

.hero-panel{min-width:0;width:min(850px,calc(100vw - 48px))!important}.hero-info,.hero-roster{min-width:0}.hero-info small{overflow-wrap:anywhere}

.hero-preview{position:relative}.weapon-preview{position:absolute;top:0;left:0;width:100%;height:auto;border-radius:24px;pointer-events:none}.weapon-preview-button{width:100%;margin-top:10px;min-height:40px}

/* Equipment and inventory */
.gear-summary{display:inline-block;text-align:left;margin:5px 0}.gear-slot-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0}.gear-slot-row>span{font-size:11px;padding:7px;border:1px solid #829d7a66;border-radius:8px}.gear-slot,.gear-card,.gear-loadouts button{background:#244136;color:#f1eed9;border:1px solid #8cad8a88;border-radius:11px;min-height:48px;padding:10px;text-align:left;cursor:pointer}.gear-slot strong,.gear-slot span,.gear-card strong,.gear-card small{display:block}.gear-slot span,.gear-card small{font-size:11px;color:#c9d7ba;margin-top:4px}.gear-slot.selected,.gear-card.selected,.gear-loadouts button.selected{border:2px solid #d9e9b3;background:#3b5c48}.gear-loadouts{display:flex;gap:8px;flex-wrap:wrap}.gear-filters{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.gear-filters label{font-size:11px;display:grid;gap:4px;flex:1;min-width:105px}.gear-filters select{min-height:42px;border-radius:8px;padding:8px;background:#20392f;color:#f1eed9;border:1px solid #789477}.gear-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);gap:16px;align-items:start}.gear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:420px;overflow-y:auto;padding:2px}.gear-card{display:flex;align-items:center;gap:9px;min-width:0}.gear-symbol{font-size:24px;color:#d8e8ae}.gear-detail{padding:16px;border:1px solid #91aa8d;border-radius:15px;background:#21392e;min-width:0}.gear-detail h3{margin:4px 0}.gear-detail p{font-size:12px}.gear-stats{display:grid;gap:4px;margin:14px 0}.gear-stats div{display:flex;justify-content:space-between;gap:10px;font-size:12px}.gear-stats strong{text-align:right}.rarity-common{border-color:#adbea6}.rarity-rare{border-color:#8eced5}.rarity-epic{border-color:#c5a4e6}.rarity-legendary{border-color:#eed18a}.rarity-mythic{border-color:#e6a8bd}.gear-results{margin:16px 0;padding:13px;border:1px solid #b7c89b;border-radius:12px;background:#294539}.gear-results h3{margin:0 0 8px}.gear-results p{margin:4px 0;padding:6px;border-left:3px solid currentColor}.gear-results .rarity-rare{color:#a8e5e8}.gear-results .rarity-epic{color:#d7b9fc}.gear-results .rarity-legendary{color:#f5dd9b}.gear-results .rarity-mythic{color:#ffc0d8}
@media(max-width:650px){.gear-layout{grid-template-columns:1fr}.gear-slot-row{grid-template-columns:repeat(2,minmax(0,1fr))}.gear-grid{max-height:300px}.gear-detail{padding:12px}.gear-card{min-height:56px}}
.rarity-epic.gear-card,.rarity-epic.gear-detail{border-style:dashed}.rarity-legendary.gear-card,.rarity-legendary.gear-detail{border-style:double;border-width:3px}.rarity-mythic.gear-card,.rarity-mythic.gear-detail{border-style:double;border-width:4px;background-image:linear-gradient(130deg,#a86e8522,transparent 45%)}
.gear-results p{animation:gear-reveal .28s ease-out both}.gear-results p:nth-of-type(2){animation-delay:.18s}.gear-results p:nth-of-type(3){animation-delay:.36s}.gear-results.skip p{animation:none;opacity:1}
.loot-reveal{display:grid;gap:4px;margin:9px 0;padding:12px 14px;border:2px solid #96bfa2;border-radius:13px;background:#213f36;animation:gear-reveal .28s ease-out both}.loot-reveal strong{font-size:16px}.loot-reveal small{color:#d4e7d7}.loot-reveal .loot-rarity{font-size:10px;letter-spacing:.14em;font-weight:900}.loot-reveal.rarity-legendary{border-color:#f5d98e;box-shadow:0 0 18px #e9ba6452}.loot-reveal.rarity-mythic{border-color:#f2bdd9;box-shadow:0 0 22px #ca83aa66}.gear-results.skip .loot-reveal{animation:none}
.mastery-results.mastery-maxed{border:2px solid #f3db92;box-shadow:0 0 22px #ddc17352;background:linear-gradient(135deg,#375d49,#213b34)}.mastery-fanfare{margin-bottom:7px;color:#fff0b5;font-weight:900;font-size:19px;letter-spacing:.1em;text-align:center}
.menu-hero{display:flex;align-items:center;gap:12px;max-width:310px;margin:18px 0;padding:8px 12px;border:1px solid #b8d59d77;border-radius:14px;background:#214237a8}.menu-hero img{width:48px;height:48px;border-radius:10px;object-fit:cover}.menu-hero strong,.menu-hero span{display:block}.menu-hero strong{font-size:15px}.menu-hero span{font-size:11px;color:#d3e8cc;margin-top:3px}
#performance-overlay{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));z-index:20;max-width:calc(100vw - 16px);margin:0;padding:7px 9px;border:1px solid #a7d3bb88;border-radius:8px;background:#0d2827dc;color:#e2f7d5;font:10px/1.35 monospace;white-space:pre-wrap;pointer-events:none}
@keyframes gear-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.gear-results p{animation:none}}
.gear-detail .actions{gap:6px;flex-wrap:wrap;margin-top:16px}.gear-detail .actions button{flex:1 1 82px;min-width:82px;padding:10px 6px;font-size:12px}
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:10px;margin:18px 0}.map-card{display:flex;flex-direction:column;gap:8px;min-height:145px;padding:14px;text-align:left;border-radius:14px;background:linear-gradient(145deg,var(--map-bg),#142c2b);border:2px solid var(--map-color);color:#f4f2df;cursor:pointer}.map-card strong{font-size:18px}.map-card small{line-height:1.35;color:#e5e7d8}.map-card .map-index,.map-card .map-progress{font-size:10px;letter-spacing:.08em;color:var(--map-color)}.map-card .map-progress{margin-top:auto}.map-card.selected{box-shadow:0 0 0 2px #f9e5a2,0 8px 20px #0005}.map-card.locked{opacity:.68;cursor:default;filter:saturate(.45)}.map-focus{border-left:4px solid var(--map-color);padding:12px 16px;margin:18px 0;background:#1d3732;border-radius:0 12px 12px 0}.map-focus h3{margin:0 0 7px}.map-focus p{margin:6px 0;font-size:12px}.map-card:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:560px){.map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.map-card{min-height:170px;padding:10px}.map-card strong{font-size:15px}.map-card small{font-size:11px}}
.event-hud{position:absolute;top:82px;left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid #e8d58e;border-radius:12px;background:#1e332fe8;color:#fff4cd;box-shadow:0 5px 20px #0006;font-size:12px;white-space:nowrap}.event-hud[hidden]{display:none}.event-hud strong{font-size:15px}.event-hud button{pointer-events:auto;min-height:44px;padding:6px 12px;background:#ecd18a;color:#1f2f2d;border:0;border-radius:8px;font-weight:800;cursor:pointer}.event-hud button[hidden]{display:none}.event-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:20px 0 4px}.event-choice{min-height:84px;padding:13px;text-align:left;color:#f7f1dc;background:#29483c;border:2px solid #b9ca9a;border-radius:12px;cursor:pointer}.event-choice strong,.event-choice small{display:block}.event-choice small{font-size:12px;margin-top:5px;line-height:1.3;color:#d9e2ce}.event-choice:hover,.event-choice:focus-visible{border-color:#ffe59b;background:#365b49}.event-results{padding:10px 13px;margin:10px 0;border:1px solid #b8cda7;border-radius:12px}.event-results h3{margin:0 0 6px}.event-results p{margin:4px 0;font-size:12px}
@media(max-width:560px){.event-hud{top:100px;max-width:calc(100vw - 20px);white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;font-size:11px}.event-hud button{min-width:120px}.event-choices{grid-template-columns:1fr}.event-choice{min-height:62px}}
#event-debug{position:fixed;bottom:12px;left:12px;z-index:20;max-width:calc(100vw - 24px);white-space:pre-wrap;padding:9px;background:#0c181be0;color:#d9f8d0;font:11px monospace;pointer-events:none;border-radius:8px}
.account-badge,.meta-head,.meta-summary,.meta-results{background:rgba(19,48,42,.72);border:1px solid rgba(180,232,202,.24);border-radius:15px;padding:13px 16px;margin:14px 0;color:#e8f4df}
.account-badge{max-width:370px;font-size:12px}.account-badge strong{display:block;letter-spacing:.08em}.account-badge span{display:block;opacity:.8;margin:4px 0}.account-badge .bar,.meta-head .bar{height:8px;border-radius:8px;background:#34574c;overflow:hidden}.account-badge .bar i,.meta-head .bar i{display:block;height:100%;background:linear-gradient(90deg,#8fe7bc,#e4d790)}
.meta-head{display:grid;gap:8px}.meta-head strong{font-size:20px}.meta-head .wallet{justify-self:start}.meta-summary{font-size:13px}.meta-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}.meta-tabs button{min-height:42px;padding:8px 13px;border-radius:12px;background:#35594d;color:#f0f5df;border:1px solid #648578}.meta-tabs button.selected{background:#d7edb4;color:#173e37}.meta-list{display:grid;gap:10px}.meta-card{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid rgba(193,231,202,.23);border-radius:14px;background:rgba(29,66,56,.78)}.meta-card .details{flex:1;min-width:0}.meta-card h3{margin:0 0 5px}.meta-card p{margin:4px 0;font-size:12px}.meta-card button{min-width:100px;min-height:44px;border-radius:10px}.meta-icon{font-size:27px;color:#dceda2}.meta-locked{color:#ffca9f}.meta-results{padding:18px}.meta-results strong{font-size:19px;color:#e7efaa}
@media(max-width:600px){.meta-card{flex-wrap:wrap}.meta-card button{width:100%}.meta-tabs button{flex:1 1 31%;font-size:12px}.meta-head .wallet{font-size:13px}}
#meta-debug{position:fixed;right:8px;bottom:8px;z-index:1000;max-width:min(320px,90vw);max-height:45vh;overflow:auto;padding:12px;background:#112a25ed;color:#e4f6ca;border:1px solid #a5ca9a;border-radius:9px;font:11px/1.4 monospace;pointer-events:none}
.meta-tabs small{font-size:10px;opacity:.75}
.collection-dot{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border-radius:10px;background:#e5d894;color:#24443a;font-size:10px}.collection-nav{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 11px;margin:10px 0 15px;scrollbar-width:thin}.collection-nav button{flex:none;min-height:42px;padding:8px 13px;border-radius:11px;background:#34594e;color:#eef4e1;border:1px solid #618273;white-space:nowrap}.collection-nav button.selected{background:#dfedbc;color:#183c35}.collection-overall,.collection-welcome,.collection-category-head,.collection-rewards,.collection-recent,.collection-region-progress,.collection-results{padding:17px;margin:14px 0;border:1px solid rgba(179,224,192,.28);border-radius:15px;background:#1c3b34d9}.collection-overall strong{font-size:25px;color:#e7edb9}.collection-overall p,.collection-next{font-size:12px}.collection-overall .bar,.collection-summary .bar,.collection-category-head .bar,.collection-region-progress .bar{height:8px;background:#35594e;border-radius:8px;overflow:hidden;margin-top:10px}.collection-overall .bar i,.collection-summary .bar i,.collection-category-head .bar i,.collection-region-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,#8ce3ad,#eadb94)}.collection-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-summary button{min-height:85px;padding:12px;text-align:left;border-radius:13px;background:#264a40;color:#f5f4dc;border:1px solid #567867}.collection-summary strong,.collection-summary span{display:block}.collection-summary span{font-size:12px;margin-top:6px}.collection-recent button{display:inline-flex;flex-direction:column;gap:2px;align-items:flex-start;margin:3px;padding:8px 10px;background:#345a4d;color:#f1f3de;border-radius:9px}.collection-recent button small{opacity:.7}.collection-rewards button[data-collection-claim]{min-height:37px;margin-left:8px}.collection-stats{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.collection-stats span{padding:8px 11px;background:#2a5245;border-radius:9px;font-size:12px}.collection-category-head h2{margin:0 0 7px}.collection-category-head strong{color:#e4eeba}.collection-filters{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.collection-filters label{display:grid;gap:4px;flex:1 1 130px;font-size:11px}.collection-filters select,.collection-filters input{width:100%;min-height:42px;padding:7px 10px;border-radius:9px;border:1px solid #6a8c7a;background:#244a3f;color:#f3f4e5;font:inherit}.collection-count{font-size:11px;opacity:.75}.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-card{display:flex;align-items:center;gap:11px;min-height:82px;padding:12px;text-align:left;background:#264b40;color:#f2f3e2;border:1px solid #56786a;border-radius:13px}.collection-card.unknown{background:#263e39;color:#c0d0c2}.collection-card strong,.collection-card small{display:block}.collection-card strong{font-size:13px}.collection-card small{font-size:10px;margin-top:5px;line-height:1.3}.collection-portrait{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:#345e4c;color:#e6e3a3;font-size:24px}.collection-card.unknown .collection-portrait{background:#3b5048;color:#899f91}.collection-check{color:#bde7aa}.collection-question{color:#b8c5af}.collection-new{display:inline!important;padding:2px 4px;border-radius:4px;background:#e2dc91;color:#244038;font-size:9px!important}.collection-more{margin:15px auto}.collection-empty{padding:18px;color:#c9dbc8}.collection-detail-portrait{display:grid;place-items:center;width:90px;height:90px;margin:12px auto;border-radius:20px;background:#315b4b;color:#ece9ad;font-size:54px}.collection-tags,.collection-links{display:flex;flex-wrap:wrap;gap:7px}.collection-tags span,.collection-links button{padding:7px 10px;border-radius:8px;background:#33584c;color:#e7f1df;font-size:12px}.collection-links button{min-height:40px}.collection-welcome strong{color:#e9e59f}.collection-welcome p{font-size:13px}.collection-results h3{margin:0 0 6px;color:#e9e59f}
.overlay:has(.collection-panel){display:flex;align-items:flex-start;justify-content:center;padding:12px;min-width:0;width:100%}.panel.wide.collection-panel{flex:0 1 850px;width:min(850px,100%);min-width:0;max-width:calc(100vw - 24px)}.collection-nav{max-width:100%;min-width:0}.collection-card span:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){.collection-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-card{min-height:92px;padding:9px;gap:7px}.collection-portrait{width:34px;height:34px;font-size:20px}.collection-card strong{font-size:11px}.collection-filters label{flex:1 1 44%}}
.collection-badges{padding:17px;margin:14px 0;border:1px solid rgba(179,224,192,.28);border-radius:15px;background:#1c3b34d9}.collection-badges h3{margin:0 0 10px}.collection-badges span{display:inline-block;padding:7px 10px;margin:0 6px 6px 0;border-radius:8px;background:#345a4d;color:#efe8a5;text-transform:capitalize;font-size:12px}
.overlay:has(.mission-panel){display:flex;align-items:flex-start;justify-content:center;padding:12px;min-width:0;width:100%}.panel.wide.mission-panel{flex:0 1 850px;width:min(850px,100%);min-width:0;max-width:calc(100vw - 24px)}.mission-tabs{display:flex;gap:9px;margin:14px 0}.mission-tabs button{flex:1;min-height:44px;border-radius:10px;background:#315749;color:#f1f2dc;border:1px solid #73917a}.mission-tabs button.selected{background:#e0edb3;color:#183c33}.mission-intro,.mission-head,.mission-card,.mission-results{padding:17px;margin:12px 0;border:1px solid rgba(183,222,188,.3);border-radius:14px;background:#1c3b34df}.mission-intro p,.mission-head p,.mission-card p{font-size:13px}.mission-head>strong{display:block;color:#e9e5a6;font-size:18px}.mission-head>span{font-size:12px;opacity:.8}.mission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mission-card{margin:0;min-width:0}.mission-card.complete{border-color:#add997}.mission-card.claimed{opacity:.72}.mission-card-head{display:grid;gap:3px}.mission-card-head span{font-size:10px;letter-spacing:.12em;color:#c3dba7}.mission-card-head strong{font-size:17px;overflow-wrap:anywhere}.mission-card p{margin:9px 0}.mission-progress{height:9px;border-radius:9px;overflow:hidden;background:#345849}.mission-progress i{display:block;height:100%;background:linear-gradient(90deg,#89d5a8,#e7de97)}.mission-count{font-weight:700}.mission-reward{color:#e8e7b8}.mission-actions{display:flex;gap:8px;flex-wrap:wrap}.mission-actions button{min-height:42px}.mission-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}.mission-milestones>div{display:grid;align-content:start;gap:6px;padding:10px;border-radius:10px;background:#2c5146}.mission-milestones small{font-size:11px}.mission-milestones span{font-size:11px;opacity:.7}.mission-milestones button{min-height:36px}.mission-claim-all{margin:16px 0}.mission-note{font-size:11px;opacity:.75}.mission-results h3{margin:0 0 7px;color:#e9e5a6}.mission-pin{position:absolute;top:93px;left:50%;transform:translateX(-50%);max-width:min(360px,80vw);padding:6px 11px;border-radius:9px;background:#173e35dc;color:#f1f0c6;border:1px solid #a1bb87;font-size:11px;text-align:center;pointer-events:none;z-index:2}
@media(max-width:650px){.mission-list{grid-template-columns:1fr}.mission-milestones{grid-template-columns:1fr}.mission-pin{top:108px;font-size:10px}}

/* Phase 7.5 achievements */
.overlay:has(.achievement-panel){display:flex;align-items:flex-start;justify-content:center;padding:12px;min-width:0;width:100%}.panel.wide.achievement-panel{flex:0 1 920px;width:min(920px,100%);min-width:0;max-width:calc(100vw - 24px)}
.achievement-nav{display:flex;gap:7px;overflow-x:auto;max-width:100%;padding:6px 2px 11px;margin:11px 0 16px;scrollbar-width:thin}.achievement-nav button{flex:none;min-height:42px;padding:8px 12px;border-radius:10px;background:#315749;color:#f1f2df;border:1px solid #73917a;white-space:nowrap}.achievement-nav button.selected{background:#e0edb3;color:#183c33}
.achievement-profile,.achievement-welcome,.achievement-ap,.achievement-overview>section{padding:17px;margin:12px 0;border:1px solid rgba(183,222,188,.3);border-radius:14px;background:#1c3b34df}.achievement-profile h3{margin:7px 0;color:#e9e9b5}.achievement-profile p,.achievement-welcome p,.achievement-ap span{font-size:12px}.achievement-badges,.achievement-showcase{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.achievement-badges span,.achievement-showcase span{padding:7px 10px;border-radius:8px;background:#345a4d;color:#e9e5a7}.achievement-badges span{font-size:22px}.achievement-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.achievement-overview>section{margin:0}.achievement-overview h3{margin:0 0 10px}.achievement-mini{display:flex;justify-content:space-between;gap:9px;padding:8px 0;border-bottom:1px solid #ffffff22;font-size:12px}.achievement-mini span{white-space:nowrap;opacity:.75}.achievement-ap strong{display:block;font-size:23px;color:#e7edb9}.achievement-progress{height:9px;margin-top:9px;border-radius:9px;overflow:hidden;background:#345849}.achievement-progress i{display:block;height:100%;background:linear-gradient(90deg,#89d5a8,#e7de97)}
.achievement-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.achievement-filters input,.achievement-filters select{min-height:42px;padding:8px 10px;border:1px solid #6a8c7a;border-radius:9px;background:#244a3f;color:#f3f4e5;font:inherit}.achievement-filters input{flex:2 1 220px}.achievement-filters select{flex:1 1 130px}.achievement-list-count{font-size:11px;opacity:.75}.achievement-grid,.achievement-cosmetic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.achievement-card,.achievement-cosmetic{min-width:0;padding:15px;border:1px solid rgba(183,222,188,.3);border-radius:14px;background:#1c3b34df}.achievement-card.complete{border-color:#c9d997}.achievement-card-head{display:flex;align-items:center;gap:10px}.achievement-card-head>div{flex:1;min-width:0}.achievement-card-head small{font-size:10px;letter-spacing:.08em;color:#c3dba7}.achievement-card-head h3{margin:3px 0;font-size:16px;overflow-wrap:anywhere}.achievement-card-head b{color:#e7e19b}.achievement-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#315a4d;color:#e8e2aa;font-size:22px}.achievement-card p,.achievement-cosmetic p{font-size:12px;line-height:1.4}.achievement-count{font-weight:700}.achievement-reward{color:#e4e5b5}.achievement-actions{display:flex;gap:8px;flex-wrap:wrap}.achievement-actions button,.achievement-cosmetic button{min-height:40px}.achievement-cosmetic.locked{opacity:.67}.achievement-more{margin:16px auto}.achievement-results{padding:15px;margin:12px 0;border:1px solid #c8dca5;border-radius:14px;background:#254638}.achievement-results h3{margin:0 0 6px;color:#e8e9af}.achievement-results p{font-size:12px}
@media(max-width:650px){.achievement-grid,.achievement-cosmetic-grid,.achievement-overview{grid-template-columns:1fr}.achievement-filters input{flex-basis:100%}.achievement-nav button{font-size:12px}}
.achievement-pin{position:absolute;top:127px;left:50%;transform:translateX(-50%);max-width:min(360px,80vw);padding:6px 11px;border-radius:9px;background:#173e35dc;color:#f1f0c6;border:1px solid #a1bb87;font-size:11px;text-align:center;pointer-events:none;z-index:2}.achievement-pin[hidden]{display:none}
@media(max-width:650px){.achievement-pin{top:143px;font-size:10px}}

/* Optional account and recovery controls. */
.cloud-panel{max-width:720px!important}.cloud-panel p{line-height:1.5}.cloud-form,.cloud-snapshots{display:grid;gap:12px}.cloud-form{max-width:440px;margin:18px 0}.cloud-form label{display:grid;gap:5px;font-size:12px}.cloud-form input{min-height:44px;width:100%;padding:10px;border:1px solid #91b49b;border-radius:9px;background:#21473c;color:#f5f4df;font:inherit}.cloud-form button{min-height:44px}.cloud-tabs,.cloud-panel .actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.cloud-panel .actions button,.cloud-tabs button{min-height:44px}.cloud-note{font-size:12px;color:#d0dccb}.cloud-message{padding:10px;border-radius:9px;background:#376146;color:#f5f1ca}.cloud-status{display:flex;justify-content:space-between;gap:10px;padding:13px;border-radius:10px;background:#21483b}.cloud-status span{font-size:12px;color:#e7e8a8}.cloud-warning{padding:16px;border:1px solid #e6cf91;border-radius:13px;background:#4b4b3855}.cloud-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cloud-compare article,.cloud-snapshots article{padding:12px;border:1px solid #8eac94;border-radius:10px;background:#224438}.cloud-compare strong,.cloud-snapshots strong,.cloud-snapshots span{display:block}.cloud-snapshots span{font-size:11px;color:#d5e2cb;margin:5px 0}.cloud-snapshots article{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.cloud-snapshots article span{flex:1}.cloud-snapshots button{min-height:40px}@media(max-width:600px){.cloud-compare{grid-template-columns:1fr}.cloud-panel{padding:16px!important}}

/* Phase 8 run setup and restrained survival readout. */
.run-setup{margin:16px 0;padding:16px;border:1px solid #88ad91;border-radius:15px;background:#1c3d34e8}.run-setup h3{margin:3px 0 9px;font-size:15px;color:#edf3c4}.run-setup-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px;margin-bottom:13px}.run-setup-options button{min-height:66px;padding:10px;text-align:left;border:1px solid #739a80;border-radius:11px;background:#294f43;color:#f3f4dc}.run-setup-options button strong,.run-setup-options button small{display:block}.run-setup-options button small{margin-top:4px;font-size:11px;line-height:1.3;color:#d4e2d2}.run-setup-options button.selected{border-color:#f1e6a4;background:#46644a;box-shadow:inset 0 0 0 1px #f1e6a4}.run-setup-options button:disabled{opacity:.53;cursor:not-allowed}.run-modifiers{margin:3px 0 12px}.run-modifiers summary{min-height:43px;padding:10px;border-radius:9px;background:#31584a;cursor:pointer}.run-modifiers .run-setup-options{margin-top:10px}.run-setup-summary{margin:6px 0 0;color:#e8e7b8;font-size:12px}.endless-hud{position:absolute;left:50%;top:80px;transform:translateX(-50%);z-index:2;max-width:min(92vw,540px);padding:5px 11px;border:1px solid #d2c58c;border-radius:9px;background:#183b32dd;color:#f4edc0;font-size:11px;font-weight:700;text-align:center;pointer-events:none;white-space:nowrap}.endless-hud[hidden]{display:none}.endless-results{display:grid;gap:6px;margin:12px 0;padding:14px;border:1px solid #d7cd91;border-radius:12px;background:#2e4c3c}.endless-results strong{color:#f2e8af}.endless-results span{font-size:12px}
@media(max-width:650px){.run-setup{padding:11px}.run-setup-options{grid-template-columns:repeat(2,minmax(0,1fr))}.endless-hud{top:105px;font-size:9px;padding:4px 6px;max-width:94vw;overflow:hidden;text-overflow:ellipsis}}
.challenge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:12px;margin:18px 0}.challenge-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid #98b99b55;border-radius:15px;background:#183b3180}.challenge-card h3{margin:0;color:#e6f4d7}.challenge-card p{margin:0;line-height:1.4}.challenge-card small{color:#bdd4bc}.challenge-card button{margin-top:auto}.challenge-card.locked{opacity:.84}.challenge-feature{padding:12px 15px;border-radius:10px;background:#d1af6740;color:#f5dda8}.challenge-grid .primary{width:100%}
.menu{padding-bottom:100px}#app>.bottom{pointer-events:none}
/* Phase 9: readable branch cards at desktop and phone widths. */
.talent-head,.talent-presets,.talent-preset-tools,.talent-tabs,.talent-card-head,.talent-card-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.talent-head{padding:14px;border:1px solid #b8d6ac55;border-radius:14px;background:#173c34;margin:12px 0}
.talent-head strong{margin-right:auto}.talent-head span{font-size:12px;color:#deebcc}
.talent-presets,.talent-tabs{margin:16px 0}.talent-presets button,.talent-tabs button{flex:1 1 auto;min-height:42px}.talent-tabs button.selected,.talent-presets button.selected{background:#bfda96;color:#173b31}
.talent-branch-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:18px 0 10px}.talent-branch-head strong{font-size:20px}.talent-branch-head small{width:100%;color:#b9d9c8}
.talent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-bottom:20px}
.talent-card{padding:14px;border:1px solid #89b99655;border-radius:14px;background:#183b33;color:#ebf0d7}.talent-card.major{border-color:#e1c676;box-shadow:inset 0 0 0 1px #e1c67640}.talent-card.owned{background:#205142}.talent-card p{font-size:13px;min-height:2.8em}.talent-card-head{align-items:flex-start}.talent-card-head div{display:grid;gap:3px}.talent-card-head small,.talent-card-foot span{color:#c2d4be;font-size:11px}.talent-icon{font-size:24px;color:#efd180}.talent-card-foot{justify-content:space-between}.talent-card-foot button{min-height:36px}.talent-notice,.talent-prepare{padding:10px;border-radius:10px;background:#6e583a55}
@media(max-width:600px){.talent-head{display:grid;grid-template-columns:repeat(3,1fr)}.talent-head strong{grid-column:1/-1}.talent-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.talent-tabs button{font-size:11px;padding:8px 3px}.talent-grid{grid-template-columns:1fr}.talent-card p{min-height:0}}
/* Hero Mastery: compact rewards and large tap targets on small screens. */
.mastery-header{display:flex;gap:18px;align-items:center;padding:14px;border-radius:16px;background:#194136;margin:12px 0}.mastery-header img{width:116px;height:116px;border-radius:14px;object-fit:cover}.mastery-header>div{flex:1;min-width:0}.mastery-header h2{margin:0 0 7px}.mastery-header p{margin:4px 0 10px}.mastery-header small{display:block;margin-top:7px}
.mastery-header img.mastery-framed{border:4px double #f4d78d;box-shadow:0 0 0 3px #709c83,0 0 19px #e8d38c80}
.mastery-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 0 14px;scrollbar-width:thin}.mastery-tabs button{flex:1 0 auto;min-height:40px;padding:8px 12px;border:1px solid #779c88;border-radius:10px;background:#294b40;color:#f3f1dc}.mastery-tabs button.selected{border-color:#e5cd88;background:#d9e6b3;color:#173c32}.mastery-cosmetic.selected{border-color:#e5cd88;background:#2d5546}
.mastery-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mastery-overview article,.mastery-challenges article,.mastery-cosmetic,.mastery-reward{padding:13px;border:1px solid #95b59c66;border-radius:13px;background:#1a3933}.mastery-overview h3,.mastery-cosmetic-section h3{margin:0 0 8px}
.mastery-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.mastery-reward{display:flex;gap:8px;align-items:center;opacity:.65}.mastery-reward.unlocked{opacity:1;border-color:#d8c17e}.mastery-reward strong{color:#e8d08b}.mastery-reward div{flex:1;display:grid;font-size:12px}.mastery-reward small{font-size:10px}
.mastery-cosmetic-section{margin:18px 0}.mastery-cosmetics{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}.mastery-cosmetic{display:grid;gap:7px}.mastery-cosmetic img{width:100%;max-height:150px;object-fit:cover;border-radius:8px}.mastery-cosmetic small{color:#c9dbc6}.mastery-cosmetic button{min-height:38px;background:#dce7b9;color:#244239;border:0;border-radius:8px;font-weight:700}.mastery-cosmetic button:disabled{background:#436454;color:#d5e4cd;opacity:.82}
.mastery-challenges{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.mastery-challenges article{display:grid;gap:6px}.mastery-challenges article p{margin:0}.mastery-challenges progress{width:100%}.mastery-challenges span{font-size:11px;color:#d2dfc6}
.mastery-records{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px}.mastery-records>div{display:grid;gap:4px;padding:12px;border:1px solid #95b59c66;border-radius:12px;background:#1a3933}.mastery-records strong{font-size:20px}.mastery-records small{color:#c8d9c6}
.mastery-results,.mastery-backfill,.mastery-prepare{padding:12px;border:1px solid #d3c28a77;border-radius:12px;background:#4a4a3455}.mastery-results strong,.mastery-backfill strong{color:#f5df9a}
@media(max-width:600px){.mastery-header img{width:82px;height:82px}.mastery-header h2{font-size:20px}.mastery-overview{grid-template-columns:1fr}.mastery-rewards{grid-template-columns:1fr}.mastery-cosmetics{grid-template-columns:repeat(2,minmax(0,1fr))}}