/* Compact mobile game chrome; the scene owns the screen. */
aside {
    display: none!important
}

body {
    background: #111e25
}

body main,body[data-screen=realm] main {
    margin: 0;
    max-width: none
}

body main {
    padding: 100px 22px 110px;
    min-height: 100dvh
}

body[data-screen=realm] main {
    padding: 0
}

body[data-screen=realm] .realm-shell {
    height: 100dvh;
    min-height: 570px;
    background: #111e25
}

.realm-shell>.realm-heading,.realm-shell>.world-toolbar,.realm-shell>.demo-strip,.realm-shell>.realm-hint,.realm-shell>.hero-badge,.realm-shell>.world-controls {
    display: none!important
}

.realm-shell .world-vignette {
    background: linear-gradient(#0d1a2380,transparent 24%,transparent 68%,#0c1824bb);
    pointer-events: none
}

.game-header {
    position: fixed;
    z-index: 15;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(#101a22f5,#101a22e6);
    border-bottom: 1px solid #b1976266;
    backdrop-filter: blur(12px)
}

.game-header a {
    font: 700 28px 'Cormorant Garamond',serif;
    letter-spacing: .5px;
    color: #f5e7c6;
    text-decoration: none;
    margin-right: auto
}

.game-header a span {
    font-size: 21px;
    color: #dcb86f;
    margin-left: 7px
}

.game-header button {
    background: transparent;
    color: #e7d5a7
}

.game-header #profilebutton {
    height: 38px;
    width: 38px;
    border: 1px solid #c6a96a;
    border-radius: 50%;
    font-size: 25px;
    padding: 0
}

.game-header #gamelevel {
    padding: 0 8px;
    font: 600 18px 'Cormorant Garamond';
    min-width: 73px
}

.leveltrack {
    height: 4px;
    border: 1px solid #8d7846;
    border-radius: 10px;
    display: block;
    margin-top: 5px;
    width: 65px;
    background: #111c23
}

.leveltrack i {
    height: 100%;
    background: #d9b76f;
    display: block;
    border-radius: 10px;
    transition: width .5s
}

.game-nav {
    position: fixed;
    z-index: 15;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 10px 8px max(11px,env(safe-area-inset-bottom));
    height: calc(66px + env(safe-area-inset-bottom));
    gap: 0;
    background: linear-gradient(#13212bf2,#0d1823fa);
    border-top: 1px solid #a9915c66;
    backdrop-filter: blur(12px)
}

.game-nav button {
    position: relative;
    text-align: center;
    background: transparent;
    color: #b9c2bf;
    font: 500 11px 'DM Sans';
    border-radius: 0;
    padding: 0;
    flex: 1
}

.game-nav button span {
    display: block;
    font: 25px Georgia;
    color: #c4c9bc;
    margin-bottom: 3px
}

.game-nav button.selected {
    color: #f2d58e
}

.game-nav button.selected span {
    color: #f2cf79;
    text-shadow: 0 0 16px #f5c86a66
}

.game-nav button.selected:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 24%;
    right: 24%;
    height: 2px;
    background: #d8b76b;
    box-shadow: 0 0 14px #edc968
}

.growthhud {
    position: absolute;
    top: 77px;
    left: 20px;
    right: 20px;
    pointer-events: none
}

.resource-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    pointer-events: auto
}

.resource-row button {
    border: 1px solid #bea36499;
    border-radius: 24px;
    background: #14232be3;
    color: #d9b76c;
    padding: 9px 15px;
    font-size: 13px;
    backdrop-filter: blur(8px);
    white-space: nowrap
}

.resource-row button span {
    color: #e0d6bc;
    font: 500 15px 'Cormorant Garamond',serif;
    margin: 0 5px
}

.resource-row button b {
    font: 600 16px 'Cormorant Garamond',serif;
    color: #f7e9cb
}

.realm-caption {
    margin: 22px 0 0;
    text-shadow: 0 2px 14px #07121dcc
}

.realm-caption h1 {
    font: 600 italic 36px 'Cormorant Garamond',serif;
    color: #f4e6c5;
    letter-spacing: .2px;
    margin: 0
}

.realm-caption p {
    color: #e0d4b9;
    font: italic 17px 'Cormorant Garamond';
    margin: 5px 0 0
}

.realm-caption:after {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg,#e0bd73,transparent);
    margin-top: 12px
}

.journey {
    position: absolute;
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(80px + env(safe-area-inset-bottom));
    max-width: none;
    padding: 15px 17px;
    background: linear-gradient(120deg,#10202aeF,#152631eF);
    border: 1px solid #bda26599;
    border-radius: 13px;
    box-shadow: 0 8px 35px #0004;
    backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: center
}

.journey .journeysteps,.journey .foldmission,.journey #missioncopy {
    display: none
}

.journey #missionstep {
    grid-column: 1;
    font-size: 9px;
    letter-spacing: 1.6px;
    color: #d4b16d
}

.journey #missiontitle {
    grid-column: 1;
    font: 600 24px 'Cormorant Garamond';
    margin: 6px 0 0;
    color: #f0e4c9;
    max-width: 230px
}

.journey #missionnext {
    grid-column: 2;
    grid-row: 1/3;
    width: auto;
    max-width: 145px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px
}

.journey.folded {
    max-width: none;
    padding: 15px 17px
}

.journey.folded .btn,.journey.folded .eyebrow {
    display: block
}

.journey.folded h2 {
    font-size: 24px
}

.growthhud #previewbanner {
    pointer-events: auto;
    margin: 14px auto 0;
    display: block;
    border: 1px solid #d7bb78;
    background: #27343aed;
    border-radius: 6px;
    color: #f1d798;
    padding: 9px 12px;
    font-size: 10px
}

.growthhud #previewbanner[hidden] {
    display: none
}

.realm-canvas {
    cursor: default;
    touch-action: pan-y
}

.realm-shell .travel-status {
    display: none
}

.world-modal {
    max-height: 82dvh
}

.top {
    display: none
}

.intro {
    margin: 0 0 25px
}

.intro h1 {
    font-size: 31px
}

.view:not(#overview) {
    max-width: 1150px;
    margin: auto
}

.toast {
    bottom: calc(90px + env(safe-area-inset-bottom));
    max-width: 90vw;
    text-align: center;
    font-size: 12px
}

dialog {
    z-index: 30
}

.realm-shell .realm-canvas:focus-visible {
    outline: 2px solid #e1c17d;
    outline-offset: -3px
}

@media(min-width: 850px) {
    body[data-screen=realm] .realm-shell {
        background:radial-gradient(ellipse at center,#294047,#111c25 70%)
    }

    .game-header {
        padding-inline:32px}

    .game-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 440px;
        border: 1px solid #a9915c66;
        border-bottom: 0;
        border-radius: 18px 18px 0 0
    }

    .growthhud {
        left: max(30px,calc(50% - 245px));
        right: max(30px,calc(50% - 245px))
    }

    .realm-caption {
        margin-top: 20px
    }

    .journey {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 490px;
        bottom: 82px
    }

    .game-nav button {
        font-size: 11px
    }

    .realm-caption h1 {
        font-size: 39px
    }

    .resource-row button {
        padding: 10px 21px
    }

    .realm-shell .world-vignette {
        background: linear-gradient(#0d1a2350,transparent 25%,transparent 75%,#0c182480)
    }
}

@media(max-width: 370px) {
    .game-header {
        padding-inline:14px;
        gap: 10px
    }

    .game-header a {
        font-size: 26px
    }

    .growthhud {
        left: 13px;
        right: 13px
    }

    .resource-row {
        gap: 7px
    }

    .resource-row button {
        padding: 8px 10px
    }

    .resource-row button span {
        font-size: 14px
    }

    .resource-row button b {
        font-size: 15px
    }

    .realm-caption h1 {
        font-size: 32px
    }

    .journey {
        left: 10px;
        right: 10px;
        column-gap: 9px;
        padding: 13px
    }

    .journey #missiontitle {
        font-size: 21px
    }

    .journey #missionnext {
        font-size: 11px;
        padding: 9px 10px;
        max-width: 120px
    }
}

@media(prefers-reduced-motion:reduce) {
    .leveltrack i {
        transition: none
    }
}

.game-nav button span {
    margin-right: 0
}

.town-development-link {
    pointer-events: auto;
    background: transparent;
    color: #e7c784;
    font-size: 10px;
    letter-spacing: .3px;
    padding: 9px 0 0;
    text-shadow: 0 1px 5px #000
}

.realm-caption:after {
    margin-top: 8px
}

.development-next {
    padding: 18px;
    border: 1px solid #947e4d77;
    border-radius: 10px;
    background: linear-gradient(120deg,#3f443326,#172833)
}

.development-next small {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #c5ad75
}

.development-next h3 {
    font: 600 25px 'Cormorant Garamond';
    margin: 8px 0;
    color: #f0dfba
}

.development-roadmap {
    margin: 22px 0
}

.development-roadmap summary {
    font-size: 12px;
    color: #dbbf83;
    cursor: pointer;
    padding: 10px 0
}

.development-roadmap ol {
    padding: 0;
    list-style: none;
    max-height: 300px;
    overflow: auto;
    margin: 12px 0
}

.development-roadmap li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #ffffff0b;
    opacity: .65
}

.development-roadmap li.earned {
    opacity: 1
}

.development-roadmap li>span {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #777e6b;
    color: #d6c192;
    font-size: 10px
}

.development-roadmap li.earned>span {
    background: #8a784333;
    border-color: #c2a76b
}

.development-roadmap li b {
    font-size: 12px
}

.development-roadmap li p {
    font-size: 11px;
    margin: 5px 0 0
}

#growthplayer {
    position: absolute;
    z-index: 7;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    padding: 17px;
    background: #122530f2;
    border: 1px solid #c7aa6e99;
    border-radius: 12px;
    backdrop-filter: blur(12px)
}

#growthplayer[hidden],#growthribbon[hidden] {
    display: none
}

.growth-previewing .journey {
    display: none
}

.growth-player-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0
}

.growth-player-title strong {
    font: 600 23px 'Cormorant Garamond';
    color: #ead9b1
}

#growthscrub {
    padding: 0;
    width: 100%;
    accent-color: #d9ba78;
    height: 22px;
    border: 0;
    background: transparent
}

.growth-player-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 9px
}

.growth-player-actions span {
    font-size: 10px;
    color: #adbfbd
}

.growth-player-actions button {
    font-size: 11px;
    padding: 8px 20px
}

#growthribbon {
    position: absolute;
    z-index: 8;
    top: 44%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(110deg,#152d36f0,#162634f0);
    border: 1px solid #d6b670a8;
    border-radius: 12px;
    padding: 18px 25px;
    text-align: center;
    box-shadow: 0 12px 50px #0005;
    pointer-events: none;
    max-width: 85%;
    width: max-content;
    animation: realm-reveal .7s ease-out
}

#growthribbon small {
    display: block;
    font-size: 9px;
    letter-spacing: 1.7px;
    color: #d3b878
}

#growthribbon strong {
    display: block;
    font: 600 30px 'Cormorant Garamond';
    color: #f4e4bc;
    margin-top: 7px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

@keyframes realm-reveal {
    from {
        opacity: 0;
        transform: translate(-50%,-45%)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%)
    }
}

@media(min-width: 850px) {
    #growthplayer {
        left:50%;
        right: auto;
        transform: translateX(-50%);
        width: 490px
    }
}

@media(max-width: 370px) {
    .growth-player-title strong {
        font-size:20px
    }
}

@media(prefers-reduced-motion:reduce) {
    #growthribbon {
        animation: none
    }
}