@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: 315px
}

.nav button {
    flex: 1;
    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;
    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: 24%;
    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;
    white-space: nowrap;
    font-size: 14px
}

#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}