@keyframes dream-logo-node-glitch {
    0%, 100% { transform: translate(0); filter: none; }
    20% { transform: translate(-2px, 1px); filter: hue-rotate(70deg); }
    40% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
    60% { transform: translate(-1px, -1px); filter: saturate(1.8); }
    80% { transform: translate(1px, 1px); filter: hue-rotate(280deg); }
}

.dream-logo-node-active .navbar .logo-title {
    animation: dream-logo-node-glitch .18s steps(2, end) 6;
}

.dream-logo-node-notice {
    position: fixed;
    top: 82px;
    left: 50%;
    z-index: 10020;
    display: flex;
    min-width: 220px;
    padding: 12px 18px;
    border: 1px solid var(--theme);
    border-radius: 8px;
    flex-direction: column;
    color: var(--main);
    background: var(--bg-b, #f2f6fc);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity .2s, transform .2s;
}

.dream-logo-node-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.dream-logo-node-notice span,
.dream-logo-node-notice small {
    opacity: .72;
    font-size: 11px;
}

.dream-logo-node-notice span {
    color: var(--theme);
    font-weight: 700;
    letter-spacing: .14em;
}

.dream-logo-node-notice strong {
    margin: 3px 0;
}

@media (prefers-reduced-motion: reduce) {
    .dream-logo-node-active .navbar .logo-title {
        animation: none;
    }

    .dream-logo-node-notice {
        transition: none;
    }
}

#dream-save-toggle,
#dream-random-teleport {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
    border: 0;
    border-radius: 5px;
    background: var(--theme, #50bfff);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

#dream-random-teleport.is-loading i {
    display: inline-block;
    opacity: .65;
}

.dream-404-anomaly {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 7vw, 76px) clamp(22px, 6vw, 68px);
    text-align: center;
    isolation: isolate;
}

.dream-404-anomaly::before,
.dream-404-anomaly::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.dream-404-anomaly::before {
    inset: 0;
    opacity: .13;
    background: repeating-linear-gradient(0deg, transparent 0 5px, var(--theme) 6px);
}

.dream-404-anomaly::after {
    width: 280px;
    height: 280px;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--theme);
    filter: blur(85px);
    opacity: .2;
}

.dream-404-signal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .18em;
    color: var(--theme);
    font-size: clamp(68px, 13vw, 132px);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.08em;
}

.dream-404-signal i {
    font-size: .42em;
    transform: rotate(12deg);
}

.dream-404-kicker {
    margin: 22px 0 8px;
    color: var(--theme);
    font: 700 11px/1.4 monospace;
    letter-spacing: .18em;
}

.dream-404-anomaly h1 {
    margin: 0;
    color: var(--dark-c);
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 700;
}

.dream-404-message {
    max-width: 560px;
    margin: 16px auto 0;
    color: var(--main);
    line-height: 1.8;
}

.dream-404-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.dream-404-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--light-b);
    border-radius: 7px;
    background: var(--bg-b);
    color: var(--dark-c);
    transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

.dream-404-button:hover {
    transform: translateY(-2px);
    border-color: var(--theme);
    color: var(--theme);
}

.dream-404-button.is-primary {
    border-color: var(--theme);
    background: var(--theme);
    color: #fff;
}

.dream-404-button.is-loading {
    opacity: .72;
}

.dream-404-path {
    display: block;
    max-width: 100%;
    margin: 24px auto 0;
    overflow: hidden;
    color: var(--main);
    background: transparent;
    opacity: .55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .dream-404-button {
        transition: none;
    }

    .dream-404-button:hover {
        transform: none;
    }
}

.dream-teleport-transition {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    background: rgba(2, 7, 19, .58);
    color: #fff;
    opacity: 0;
    pointer-events: all;
    transition: opacity .28s ease;
    backdrop-filter: blur(2px) saturate(.72);
}

.dream-teleport-transition.is-visible {
    opacity: 1;
}

.dream-teleport-transition.is-leaving {
    opacity: 0;
}

.dream-teleport-transition::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 43%, rgba(80, 191, 255, .05) 0, rgba(1, 5, 15, .08) 32%, rgba(1, 4, 12, .7) 100%), linear-gradient(180deg, rgba(2, 7, 19, .04), rgba(2, 7, 19, .5));
    pointer-events: none;
}

.dream-teleport-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .24;
    background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(110, 211, 255, .2) 47px 48px);
    mask-image: linear-gradient(180deg, transparent 0, #000 35%, transparent 72%);
    animation: dream-teleport-scan 1.2s linear infinite;
}

.dream-teleport-streaks {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    transition: opacity .18s ease;
}

.dream-teleport-transition.has-target .dream-teleport-streaks {
    opacity: 1;
}

.dream-teleport-streaks i {
    position: absolute;
    top: 43%;
    left: 50%;
    width: var(--length);
    height: var(--thickness);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(148, 224, 255, .9) 48%, rgba(178, 93, 255, .72));
    box-shadow: 0 0 8px rgba(93, 190, 255, .75);
    opacity: 0;
    transform: rotate(var(--angle)) translateX(2vw) scaleX(.08);
    transform-origin: left center;
    animation: dream-teleport-flight .9s cubic-bezier(.18, .56, .3, 1) infinite;
    animation-delay: var(--delay);
}

.dream-teleport-copy {
    position: absolute;
    z-index: 2;
    display: flex;
    width: min(86vw, 620px);
    bottom: clamp(52px, 10vh, 110px);
    left: 50%;
    margin-top: 0;
    align-items: center;
    flex-direction: column;
    text-align: center;
    transform: translateX(-50%);
}

.dream-teleport-copy span,
.dream-teleport-copy small {
    color: #72ceff;
    font: 700 11px/1.4 monospace;
    letter-spacing: .2em;
}

.dream-teleport-copy strong {
    margin: 8px 0;
    overflow: hidden;
    font-size: clamp(21px, 4vw, 34px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dream-teleport-copy small {
    opacity: .65;
}

@keyframes dream-teleport-scan {
    from { transform: translateX(-48px); }
    to { transform: translateX(0); }
}

@keyframes dream-teleport-flight {
    0% {
        opacity: 0;
        transform: rotate(var(--angle)) translateX(1vw) scaleX(.05);
    }
    18% {
        opacity: .95;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--angle)) translateX(72vw) scaleX(3.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dream-teleport-grid,
    .dream-teleport-streaks i {
        animation: none;
    }

    .dream-teleport-streaks {
        display: none;
    }

    .dream-teleport-transition {
        backdrop-filter: none;
        transition-duration: .12s;
    }
}

.dream-save-panel {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.dream-save-panel[hidden] {
    display: none;
}

.dream-save-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(12, 18, 28, .72);
    backdrop-filter: blur(6px);
}

.dream-save-card {
    position: relative;
    width: min(420px, 100%);
    padding: 1.25rem;
    border: 1px solid rgba(127, 127, 127, .38);
    background: var(--bg-b, #f2f6fc) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    opacity: 1;
}

.dream-save-header,
.dream-save-header > div,
.dream-save-meta p {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dream-save-header > div {
    align-items: flex-start;
    flex-direction: column;
}

.dream-save-header span {
    color: var(--theme, #50bfff);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.dream-save-header h2 {
    margin: .15rem 0 0;
}

.dream-save-header button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    cursor: pointer;
}

.dream-save-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
}

.dream-save-level {
    margin-top: 1.15rem;
    padding: .9rem;
    border-radius: 8px;
    background: rgba(80, 191, 255, .09);
}

.dream-save-level-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.dream-save-level-line strong {
    color: var(--theme, #50bfff);
    font-size: 1.35rem;
}

.dream-save-level-line > span {
    font-weight: 600;
}

.dream-save-exp-track {
    height: 6px;
    margin-top: .7rem;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(127, 127, 127, .2);
}

.dream-save-exp-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--theme, #50bfff);
    transition: width .35s ease;
}

.dream-save-level p {
    margin: .45rem 0 0;
    text-align: right;
    opacity: .7;
    font-size: .75rem;
}

.dream-level-notice {
    position: fixed;
    top: 5rem;
    left: 50%;
    z-index: 10020;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(80, 191, 255, .4);
    border-radius: 8px;
    background: var(--bg-b, #f2f6fc);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity .25s ease, transform .25s ease;
}

.dream-level-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.dream-level-notice span {
    color: var(--theme, #50bfff);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.dream-save-achievements {
    margin: 1.1rem 0;
}

.dream-save-achievements > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.dream-save-achievements h3 {
    margin: 0;
    font-size: 1rem;
}

.dream-save-achievements > header > span {
    opacity: .7;
    font-size: .8rem;
}

.dream-achievement-list {
    display: grid;
    gap: .5rem;
    max-height: 210px;
    overflow-y: auto;
}

.dream-achievement-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .65rem .7rem;
    border: 1px solid rgba(127, 127, 127, .16);
    border-radius: 7px;
}

.dream-achievement-item > i {
    color: var(--theme, #50bfff);
    font-size: 1.15rem;
}

.dream-achievement-item div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.dream-achievement-item span {
    margin-top: .1rem;
    opacity: .65;
    font-size: .75rem;
}

.dream-achievement-item em {
    font-size: .7rem;
    font-style: normal;
}

.dream-achievement-item.is-locked {
    opacity: .52;
}

.dream-achievement-item.is-rare.is-unlocked > i,
.dream-achievement-notice.is-rare span {
    color: #3b82f6;
}

.dream-achievement-item.is-epic.is-unlocked > i,
.dream-achievement-notice.is-epic span {
    color: #a855f7;
}

.dream-achievement-item.is-hidden.is-unlocked > i,
.dream-achievement-notice.is-hidden span {
    color: #f59e0b;
}

.dream-achievement-notice {
    position: fixed;
    top: 5rem;
    left: 50%;
    z-index: 10021;
    display: flex;
    min-width: 230px;
    flex-direction: column;
    padding: .75rem 1rem;
    border: 1px solid rgba(80, 191, 255, .4);
    border-radius: 8px;
    background: var(--bg-b, #f2f6fc);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity .25s ease, transform .25s ease;
}

.dream-achievement-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.dream-achievement-notice span {
    color: var(--theme, #50bfff);
    font-size: .72rem;
}

.dream-achievement-notice strong {
    margin-top: .15rem;
}

@media (prefers-reduced-motion: reduce) {
    .dream-save-exp-track span,
    .dream-level-notice {
        transition: none;
    }

    .dream-achievement-notice {
        transition: none;
    }
}

.dream-save-stats div {
    padding: .85rem;
    border: 1px solid rgba(127, 127, 127, .18);
    border-radius: 8px;
}

.dream-save-stats dt,
.dream-save-meta span {
    opacity: .7;
    font-size: .8rem;
}

.dream-save-stats dd {
    margin: .25rem 0 0;
    color: var(--theme, #50bfff);
    font-size: 1.35rem;
    font-weight: 700;
}

.dream-save-meta p {
    gap: 1rem;
    margin: .55rem 0;
}

.dream-save-meta strong,
.dream-save-meta time {
    text-align: right;
    font-size: .85rem;
}

.dream-save-reset {
    width: 100%;
    padding: .65rem 1rem;
    border: 1px solid rgba(239, 68, 68, .55);
    border-radius: 6px;
    background: transparent;
    color: #ef4444;
    cursor: pointer;
}

.dream-save-reset[data-confirm="1"] {
    background: #ef4444;
    color: #fff;
}