@font-face {
    font-family: 'Chewy';
    font-style: normal;
    font-weight: 400;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 400;
    src: url("") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 400;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Luckiest Guy';
    font-style: normal;
    font-weight: 400;
    src: url("") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Luckiest Guy';
    font-style: normal;
    font-weight: 400;
    src: url("") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
    overscroll-behavior: none;
}

body {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .container {
        width: 100%
    }

    @media (width>=40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (width>=48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (width>=64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (width>=80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (width>=96rem) {
        .container {
            max-width: 96rem
        }
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .inline {
        display: inline
    }

    .table {
        display: table
    }

    .flex-shrink {
        flex-shrink: 1
    }

    .grow {
        flex-grow: 1
    }

    .border-collapse {
        border-collapse: collapse
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .resize {
        resize: both
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .rounded {
        border-radius: .25rem
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .underline {
        text-decoration-line: underline
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .\[dev\:test\] {
        dev: test
    }
}

:root {
    --font-display: "Lilita One", system-ui, sans-serif;
    --font-ui: "Fredoka", system-ui, sans-serif;
    --cream: #fff4e2;
    --sand: #e7c9a0;
    --sand-dark: #c8a373;
    --wood: #8a5a32;
    --wood-dark: #5e3d20;
    --ink: #3a2716;
    --mint: #14f195;
    --violet: #9945ff;
    --gold: #ffd66e;
    --sky: #8fc2e6;
    --shadow-pop: 0 6px 0 #00000038, 0 10px 22px #00000059
}

.ui-panel {
    image-rendering: pixelated;
    color: #4a2f17;
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 22px;
    border-image: url("") 64 fill/22px
}

.ui-panel.blue {
    color: #fff7e6;
    border-image-source: url("")
}

.ui-title {
    font-family: var(--font-display);
    letter-spacing: .5px
}

* {
    scrollbar-width: thin;
    scrollbar-color: #5e3d2073 transparent
}

::-webkit-scrollbar {
    background: 0 0;
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-corner {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background: #5e3d2073 padding-box padding-box;
    border: 2px solid #0000;
    border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
    background: #5e3d20a6 padding-box padding-box
}

:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px)
}

html,
body {
    overscroll-behavior: none;
    color: #e7ecf3;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: var(--media-url-3) 2 2, auto;
    background: #0b1220;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden
}

a,
button,
summary,
label,
select,
[role=button],
[role=tab],
.clickable,
input[type=checkbox],
input[type=radio] {
    cursor: var(--media-url-10) 10 3, pointer !important
}

button:disabled,
[disabled],
[aria-disabled=true],
.disabled {
    cursor: url() 16 16, not-allowed !important
}

input[type=text],
input[type=search],
input:not([type]),
textarea,
[contenteditable=true] {
    cursor: text
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

.game.svelte-1v40tg6 {
    touch-action: none;
    background: #3b6dca;
    width: 100vw;
    height: 100dvh;
    display: block;
    position: fixed;
    inset: 0
}

.ui-btn.svelte-3vzle9 {
    --h: 42px;
    height: var(--h);
    min-width: calc(var(--h) * 2);
    padding: 0 8px calc(var(--h) * .31);
    border: solid #0000;
    border-width: 0 var(--h);
    border-image: var(--img) 0 64 fill / 0 var(--h) stretch;
    font-family: var(--font-display, system-ui);
    letter-spacing: .5px;
    color: #fff7e6;
    text-shadow: 0 1.5px #0006;
    cursor: pointer;
    image-rendering: pixelated;
    -webkit-tap-highlight-color: transparent;
    background: 0 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    display: inline-flex;
    position: relative;
    transition: all 0.3s;
}

.inner.svelte-3vzle9 {
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0 -18px;
    line-height: 1;
    display: inline-flex
}

.ui-btn.square.svelte-3vzle9 {
    width: var(--h);
    min-width: var(--h);
    background-image: var(--img);
    padding: 0 0 calc(var(--h) * .31);
    background-size: 100% 100%;
    border: 0;
}

.ui-btn.svelte-3vzle9:not(.square):hover:not(:disabled):not(.active) {
    scale: 1.05;
}

.ui-btn.square.svelte-3vzle9:hover:not(:disabled):not(.active) {
    background-image: var(--img-hover)
}

.ui-btn.active.svelte-3vzle9 {
    border-image-source: var(--img-gold)
}

.ui-btn.square.active.svelte-3vzle9 {
    background-image: var(--img-gold)
}

.ui-btn.svelte-3vzle9:active:not(:disabled) {
    border-image-source: var(--img-pressed)
}

.ui-btn.active.svelte-3vzle9:active:not(:disabled) {
    border-image-source: var(--img-gold-pressed)
}

.ui-btn.square.svelte-3vzle9:active:not(:disabled) {
    background-image: var(--img-pressed)
}

.ui-btn.square.active.svelte-3vzle9:active:not(:disabled) {
    background-image: var(--img-gold-pressed)
}

.ui-btn.svelte-3vzle9:active:not(:disabled) .inner:where(.svelte-3vzle9) {
    transform: translateY(2px)
}

.ui-btn.cta.svelte-3vzle9 {
    animation: 1.8s ease-in-out infinite svelte-3vzle9-cta-pulse
}

@keyframes svelte-3vzle9-cta-pulse {

    0%,
    to {
        filter: drop-shadow(0 0 #ffd66e00)
    }

    50% {
        filter: drop-shadow(0 0 7px #ffd66ed9)
    }
}

.ui-btn.svelte-3vzle9:disabled {
    border-image-source: var(--img-disabled);
    color: #fff7e68c;
    cursor: not-allowed
}

.ui-btn.square.svelte-3vzle9:disabled {
    background-image: var(--img-disabled)
}

.sheet.svelte-jb4iyz {
    max-width: 840px;
    margin: 0 auto calc(6px + var(--sab, 0px));
    image-rendering: pixelated;
    pointer-events: auto;
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 16px 14px 14px;
    position: relative
}

@media (width<=870px) {
    .sheet.svelte-jb4iyz {
        margin-left: 8px;
        margin-right: 8px
    }
}

.ribbon.svelte-jb4iyz {
    z-index: 2;
    height: 42px;
    image-rendering: pixelated;
    font-family: var(--font-display);
    letter-spacing: .05em;
    color: #fff7e6;
    text-shadow: 0 1.5px #00000073;
    white-space: nowrap;
    pointer-events: none;
    border-style: solid;
    border-width: 0 38px;
    border-image: url("") 0 97 0 98 fill/0 38px;
    align-items: center;
    padding: 0 16px 5px;
    font-size: 15px;
    display: flex;
    position: absolute;
    top: -36px;
    left: calc(50% - 2px);
    transform: translate(-50%)
}

.float.svelte-jb4iyz {
    --h: 38px;
    align-items: center;
    gap: 4px;
    display: flex;
    position: absolute;
    top: -50px
}

.float.svelte-jb4iyz .ui-btn {
    --h: 38px;
    font-size: 12px
}

.float.left.svelte-jb4iyz {
    left: 0
}

.float.right.svelte-jb4iyz {
    right: 0
}

@media (width<=700px) {

    .float.left.svelte-jb4iyz,
    .float.right.svelte-jb4iyz {
        top: -100px
    }
}

@media (width<=480px) {
    .tlbl.svelte-jb4iyz {
        display: none
    }
}

.tlbl.svelte-jb4iyz {
    font-family: var(--font-display);
    letter-spacing: .06em;
    color: #fff7e6;
    text-shadow: 0 1.5px #00000080;
    margin-right: 2px;
    font-size: 12px
}

.bar.svelte-jb4iyz {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 3px 2px 5px;
    display: flex
}

.bar.svelte-jb4iyz .ui-btn {
    --h: 46px
}

.bar.svelte-jb4iyz canvas,
.items.svelte-jb4iyz canvas:where(.svelte-jb4iyz) {
    image-rendering: pixelated;
    pointer-events: none
}

.bar.svelte-jb4iyz canvas {
    width: 38px;
    height: 38px;
    transform: translateY(3px)
}

.items.svelte-jb4iyz {
    scrollbar-width: thin;
    flex-wrap: wrap;
    place-content: flex-start center;
    gap: 3px;
    max-height: 168px;
    margin-top: 6px;
    display: flex;
    overflow-y: auto
}

.item.svelte-jb4iyz {
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    flex-direction: column;
    flex: none;
    align-items: center;
    gap: 1px;
    width: 70px;
    padding: 5px 2px 3px;
    transition: background .1s, transform 60ms;
    display: flex;
    position: relative
}

.res.svelte-jb4iyz {
    justify-content: center;
    gap: 8px;
    margin: -8px 0 2px;
    display: flex
}

.res.svelte-jb4iyz .chip:where(.svelte-jb4iyz) {
    font-family: var(--font-display);
    color: var(--ink, #3a2716);
    align-items: center;
    gap: 3px;
    font-size: 13px;
    display: inline-flex
}

.res.svelte-jb4iyz .chip:where(.svelte-jb4iyz) img:where(.svelte-jb4iyz) {
    width: 17px;
    height: 17px;
    image-rendering: pixelated
}

.item.cant.svelte-jb4iyz {
    opacity: .5;
    filter: saturate(.4)
}

.item.cant.svelte-jb4iyz .cost,
.item.cant.svelte-jb4iyz .cost:where(.svelte-jb4iyz) {
    opacity: 1;
    background: #962319e0
}

.cost.svelte-jb4iyz {
    font-family: var(--font-display);
    color: #ffe9b8;
    text-shadow: 0 1px #0000008c;
    pointer-events: none;
    background: #3a2716d1;
    border-radius: 8px;
    align-items: center;
    gap: 1px;
    padding: 1px 5px 1px 2px;
    font-size: 10px;
    display: inline-flex;
    position: absolute;
    top: 1px;
    right: 1px
}

.cost.svelte-jb4iyz img:where(.svelte-jb4iyz) {
    width: 14px;
    height: 14px;
    image-rendering: pixelated
}

.item.svelte-jb4iyz:hover {
    background: #5e3d201f
}

.item.svelte-jb4iyz:active {
    transform: scale(.94)
}

.item.sel.svelte-jb4iyz {
    background: #ffd66e61;
    box-shadow: inset 0 0 0 2px #d9a514
}

.item.svelte-jb4iyz canvas:where(.svelte-jb4iyz) {
    width: 50px;
    height: 50px
}

.ilbl.svelte-jb4iyz {
    font-family: var(--font-ui);
    color: var(--ink, #3a2716);
    white-space: normal;
    text-align: center;
    max-width: 100%;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.1
}

.screen.svelte-1e0693s {
    z-index: 50;
    padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
    background: radial-gradient(120% 90% at 50% 0, #14324a40, #0000 60%), linear-gradient(#07121c8c, #07121cd1);
    place-items: center;
    animation: .5s svelte-1e0693s-fade;
    display: grid;
    position: fixed;
    inset: 0
}

.vignette.svelte-1e0693s {
    pointer-events: none;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 220px 60px #0009
}

.content.svelte-1e0693s {
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    position: relative
}

.logo.svelte-1e0693s {
    opacity: 0;
    margin: 6px 0 2px;
    line-height: 0;
    animation: .7s cubic-bezier(.2, 1.3, .4, 1) .2s forwards svelte-1e0693s-pop;
    transform: scale(.9)
}

.logo-img.svelte-1e0693s {
    filter: drop-shadow(0 10px 24px #0000008c);
    width: min(440px, 78vw);
    height: auto
}

.tag.svelte-1e0693s {
    font-family: var(--font-ui);
    color: #d9e6f2;
    text-shadow: 0 2px 8px #0009;
    opacity: 0;
    margin: 4px 0 26px;
    font-size: clamp(14px, 3.6vw, 18px);
    font-weight: 500;
    animation: .6s .45s forwards svelte-1e0693s-rise
}

.actions.svelte-1e0693s {
    opacity: 0;
    flex-direction: column;
    gap: 12px;
    width: min(320px, 86vw);
    animation: .6s .6s forwards svelte-1e0693s-rise;
    display: flex
}

.actions.svelte-1e0693s .ui-btn {
    width: 100%;
    font-size: 17px
}

.actions.svelte-1e0693s .ico:where(.svelte-1e0693s) {
    object-fit: contain;
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    transform: translateY(2px)
}

.links.svelte-1e0693s {
    font-family: var(--font-ui);
    opacity: 0;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 13px;
    animation: .6s .8s forwards svelte-1e0693s-rise;
    display: flex
}

.link.svelte-1e0693s {
    color: #9fb3c6;
    align-items: center;
    text-decoration: none;
    transition: color .15s;
    display: inline-flex
}

.link.svelte-1e0693s:hover {
    color: var(--gold, #ffd9a0)
}

.dot.svelte-1e0693s {
    color: #5e7287
}

.ca.svelte-1e0693s {
    max-width: 100%;
    font-family: var(--font-ui);
    color: #aebfd0;
    cursor: pointer;
    opacity: 0;
    background: #07121c80;
    border: 1px solid #9fb3c640;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 12.5px;
    transition: border-color .15s;
    animation: .6s .95s forwards svelte-1e0693s-rise;
    display: inline-flex
}

.ca.svelte-1e0693s:hover:not(.tba) {
    color: #ffd9a0;
    border-color: #ffd9a099
}

.ca.tba.svelte-1e0693s {
    cursor: default
}

.ca-label.svelte-1e0693s {
    letter-spacing: .08em;
    color: #6f8499;
    font-weight: 700
}

.ca-full.svelte-1e0693s {
    font-family: var(--font-mono, ui-monospace, monospace);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden
}

.ca-short.svelte-1e0693s {
    font-family: var(--font-mono, ui-monospace, monospace);
    display: none
}

.ca-copy.svelte-1e0693s {
    color: #6f8499;
    font-size: 11px
}

@media (width<=600px) {
    .ca-full.svelte-1e0693s {
        display: none
    }

    .ca-short.svelte-1e0693s {
        display: inline
    }
}

@keyframes svelte-1e0693s-fade {
    0% {
        opacity: 0
    }
}

@keyframes svelte-1e0693s-rise {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

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

@keyframes svelte-1e0693s-pop {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

.overlay.svelte-uu8xdu {
    z-index: 60;
    background: linear-gradient(#07121cb3, #07121ce0);
    place-items: center;
    padding: 16px;
    animation: .3s svelte-uu8xdu-fade;
    display: grid;
    position: fixed;
    inset: 0
}

.card.svelte-uu8xdu {
    flex-direction: column;
    gap: 12px;
    width: min(360px, 92vw);
    padding: 16px;
    display: flex
}

.head.svelte-uu8xdu {
    color: #4a2f17;
    align-items: center;
    gap: 8px;
    display: flex
}

.head.svelte-uu8xdu .ui-title:where(.svelte-uu8xdu) {
    font-size: 20px
}

.field.svelte-uu8xdu {
    color: #cfe0f0;
    background: #07121c66;
    border: 2px solid #ffffff1f;
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    display: flex
}

.field.svelte-uu8xdu input:where(.svelte-uu8xdu) {
    color: var(--cream);
    font-family: var(--font-ui);
    background: 0 0;
    border: none;
    outline: none;
    flex: 1;
    padding: 12px 0;
    font-size: 16px
}

.rule.svelte-uu8xdu {
    font-family: var(--font-ui);
    color: #6b5235;
    font-size: 11px
}

.err.svelte-uu8xdu {
    font-family: var(--font-ui);
    color: #ff9b9b;
    font-size: 12px
}

.card.svelte-uu8xdu .ui-btn {
    width: 100%
}

@keyframes svelte-uu8xdu-fade {
    0% {
        opacity: 0
    }
}

.ui-input.svelte-1hbvpqx {
    --h: 38px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--h);
    border: solid #0000;
    border-width: 0 calc(var(--h) * .47);
    border-image: url("") 0 24 fill / 0 calc(var(--h) * .47) stretch;
    image-rendering: pixelated;
    font-family: var(--font-display, system-ui);
    letter-spacing: .4px;
    color: #fff4e2;
    text-shadow: 0 1.5px #261608b3;
    background: 0 0;
    padding: 0 2px 3px;
    font-size: 13px
}

.ui-input.center.svelte-1hbvpqx {
    text-align: center
}

.ui-input.svelte-1hbvpqx::placeholder {
    color: #fff4e273;
    text-shadow: none
}

.ui-input.svelte-1hbvpqx:focus {
    filter: brightness(1.18);
    outline: none
}

.ui-input.svelte-1hbvpqx:disabled {
    opacity: .55;
    cursor: not-allowed
}

.ui-input[type=number].svelte-1hbvpqx {
    appearance: textfield
}

.ui-input[type=number].svelte-1hbvpqx::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.ui-input[type=number].svelte-1hbvpqx::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.panel.svelte-q8mo71 {
    right: calc(14px + var(--sar, 0px));
    bottom: calc(118px + var(--sab, 0px));
    z-index: 26;
    min-width: 286px;
    max-height: 62vh;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 14px 16px 12px;
    position: fixed;
    overflow-y: auto
}

@media (width<=700px) {
    .panel.svelte-q8mo71 {
        right: calc(78px + var(--sar, 0px));
        bottom: calc(14px + var(--sab, 0px));
        max-width: calc(100vw - 92px)
    }
}

.panel-title.svelte-q8mo71 {
    font-family: var(--font-display);
    letter-spacing: .5px;
    text-align: center;
    margin-bottom: 8px;
    font-size: 15px
}

.island.svelte-q8mo71 {
    border-bottom: 2px solid #5e3d202e;
    padding: 7px 0
}

.island.svelte-q8mo71:last-of-type {
    border-bottom: 0
}

.isl-name.svelte-q8mo71 {
    font-family: var(--font-display);
    margin-bottom: 5px;
    font-size: 14px
}

.rename-row.svelte-q8mo71 {
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    display: flex
}

.rename-row.svelte-q8mo71 .ui-btn {
    --h: 38px;
    flex: none;
    transform: translateY(2px)
}

.boost-row.svelte-q8mo71 {
    align-items: center;
    gap: 8px;
    display: flex
}

.boost-row.svelte-q8mo71 .ui-btn {
    --h: 38px;
    flex: none;
    transform: translateY(2px)
}

.boost-info.svelte-q8mo71 {
    flex-direction: column;
    flex: 1;
    display: flex
}

.boost-name.svelte-q8mo71 {
    font-size: 13px;
    font-weight: 600
}

.boost-desc.svelte-q8mo71 {
    opacity: .7;
    font-size: 11px
}

.cost-ico.svelte-q8mo71 {
    object-fit: contain;
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    transform: translateY(1px)
}

.active.svelte-q8mo71 {
    font-family: var(--font-display);
    color: #1d7a4f;
    white-space: nowrap;
    font-size: 12px
}

.hint.svelte-q8mo71 {
    opacity: .75;
    margin-top: 6px;
    font-size: 11.5px
}

.sec-head.svelte-q8mo71 {
    font-family: var(--font-display);
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 4px;
    font-size: 13px;
    display: flex
}

.cap.svelte-q8mo71 {
    opacity: .65;
    font-size: 11px
}

.unit-row.svelte-q8mo71 {
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    display: flex
}

.unit-row.dead.svelte-q8mo71 .unit-name:where(.svelte-q8mo71) {
    opacity: .55
}

.unit-row.svelte-q8mo71 .ui-btn {
    --h: 34px;
    flex: none;
    transform: translateY(2px)
}

.unit-info.svelte-q8mo71 {
    flex: 1;
    align-items: center;
    gap: 8px;
    display: flex
}

.unit-name.svelte-q8mo71 {
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 600
}

.unit-sub.svelte-q8mo71 {
    opacity: .55;
    text-transform: capitalize;
    font-size: 10.5px
}

.unit-lvl.svelte-q8mo71 {
    font-family: var(--font-display);
    color: #59390a;
    text-transform: none;
    vertical-align: 1px;
    background: linear-gradient(#ffd86b, #e2a23a);
    border: 1px solid #6e47108c;
    border-radius: 9px;
    padding: 3px 7px 4px;
    font-size: 10px;
    line-height: 1;
    display: inline-block
}

.unit-hp.svelte-q8mo71 {
    opacity: .85;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    display: flex
}

.unit-hp.fallen.svelte-q8mo71 {
    color: #a33;
    font-weight: 700
}

.hp-track.svelte-q8mo71 {
    background: #3a27164d;
    border-radius: 3px;
    width: 52px;
    height: 7px;
    display: inline-block;
    overflow: hidden
}

.hp-fill.svelte-q8mo71 {
    background: #1d7a4f;
    border-radius: 3px;
    height: 100%;
    display: block
}

.levelbar.svelte-1vi9hc {
    width: 100%
}

.levelbar.svelte-1vi9hc canvas:where(.svelte-1vi9hc) {
    width: 100%;
    display: block
}

.panel.svelte-ix13td {
    right: calc(14px + var(--sar, 0px));
    bottom: calc(118px + var(--sab, 0px));
    z-index: 26;
    min-width: 280px;
    max-width: calc(100vw - 24px);
    max-height: 64vh;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 14px 16px 12px;
    position: fixed;
    overflow-y: auto
}

.panel.elevated.svelte-ix13td {
    z-index: 59
}

@media (width<=700px) {
    .panel.svelte-ix13td {
        right: calc(78px + var(--sar, 0px));
        bottom: calc(14px + var(--sab, 0px));
        max-width: calc(100vw - 92px)
    }
}

.panel-title.svelte-ix13td {
    font-family: var(--font-display);
    letter-spacing: .5px;
    text-align: center;
    margin-bottom: 8px;
    font-size: 15px
}

.xp-text.svelte-ix13td {
    opacity: .75;
    text-align: center;
    margin-top: 5px;
    font-size: 11px
}

.kd-row.svelte-ix13td {
    justify-content: center;
    gap: 16px;
    margin: 2px 0 8px;
    font-size: 12px;
    display: flex
}

.kd.svelte-ix13td b:where(.svelte-ix13td) {
    color: #8a6a1d
}

.eff-row.svelte-ix13td {
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    display: flex
}

.eff-row.svelte-ix13td img:where(.svelte-ix13td) {
    object-fit: contain;
    width: 26px;
    height: 26px;
    image-rendering: pixelated;
    flex: none
}

.eff-bar.svelte-ix13td {
    flex: 1;
    min-width: 0
}

.eff-empty.svelte-ix13td {
    opacity: .6;
    padding: 1px 0 3px;
    font-size: 11px
}

.stat-head.svelte-ix13td {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    display: flex
}

.stat-title.svelte-ix13td {
    font-family: var(--font-display);
    font-size: 13px
}

.stat-free.svelte-ix13td {
    opacity: .6;
    font-size: 12px
}

.stat-free.has.svelte-ix13td {
    opacity: 1;
    color: #1d7a4f;
    font-weight: 700
}

.stat-row.svelte-ix13td {
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    display: flex
}

.stat-info.svelte-ix13td {
    flex-direction: column;
    flex: 1;
    display: flex
}

.stat-name.svelte-ix13td {
    font-size: 13px;
    font-weight: 600
}

.stat-desc.svelte-ix13td {
    opacity: .65;
    font-size: 10.5px
}

.stat-val.svelte-ix13td {
    font-family: var(--font-display);
    text-align: right;
    min-width: 28px;
    font-size: 14px
}

.stat-buff.svelte-ix13td {
    font-family: var(--font-display);
    color: #1d7a4f;
    white-space: nowrap;
    flex: none;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    display: inline-flex
}

.stat-buff.svelte-ix13td img:where(.svelte-ix13td) {
    object-fit: contain;
    width: 16px;
    height: 16px;
    image-rendering: pixelated
}

.stat-plus.svelte-ix13td {
    width: 30px;
    height: 30px;
    image-rendering: pixelated;
    color: #fff4e2;
    text-shadow: 0 1px #261608cc;
    font-family: var(--font-display);
    cursor: pointer;
    background: url("") 50%/100% 100% no-repeat;
    border: 0;
    padding: 2px 0 0;
    font-size: 16px;
    line-height: 1
}

.stat-plus.svelte-ix13td:hover:not(:disabled) {
    filter: brightness(1.12)
}

.stat-plus.svelte-ix13td:active:not(:disabled) {
    transform: translateY(1px)
}

.stat-plus.svelte-ix13td:disabled {
    filter: grayscale(.9)brightness(.85);
    opacity: .6;
    cursor: default
}

.sep.svelte-ix13td {
    background: #5e3d2040;
    border-radius: 2px;
    height: 2px;
    margin: 9px 0
}

.g-card.svelte-ix13td {
    padding: 9px 0 8px
}

.g-card.svelte-ix13td+.g-card:where(.svelte-ix13td) {
    border-top: 1px dashed #5e3d2038
}

.g-card.dead.svelte-ix13td .unit-name:where(.svelte-ix13td) {
    opacity: .55
}

.g-head.svelte-ix13td,
.g-hp.svelte-ix13td,
.feed-row.svelte-ix13td {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    display: flex
}

.g-hp.svelte-ix13td,
.feed-row.svelte-ix13td {
    margin-top: 7px
}

.g-fill.svelte-ix13td {
    flex: 1 1 0;
    min-width: 4px
}

.g-card.svelte-ix13td .ui-btn,
.unit-hire.svelte-ix13td .ui-btn,
.picker-row.svelte-ix13td .ui-btn {
    --h: 34px;
    flex: none;
    transform: translateY(2px)
}

.unit-name.svelte-ix13td {
    text-transform: capitalize;
    color: inherit;
    cursor: pointer;
    text-underline-offset: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    flex: 0 auto;
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    -webkit-text-decoration: underline dotted #5e3d2073;
    text-decoration: underline dotted #5e3d2073;
    overflow: hidden
}

.unit-name.svelte-ix13td:hover {
    text-decoration-color: #5e3d20e6
}

.unit-sub.svelte-ix13td {
    opacity: .55;
    text-transform: capitalize;
    flex: none;
    font-size: 10.5px
}

.unit-lvl.svelte-ix13td {
    font-family: var(--font-display);
    color: #59390a;
    text-transform: none;
    background: linear-gradient(#ffd86b, #e2a23a);
    border: 1px solid #6e47108c;
    border-radius: 9px;
    flex: none;
    padding: 3px 7px 4px;
    font-size: 10px;
    line-height: 1
}

.rename-row.svelte-ix13td {
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    display: flex
}

.rename-row.svelte-ix13td .ui-btn {
    --h: 38px;
    flex: none;
    transform: translateY(2px)
}

.unit-hp.fallen.svelte-ix13td {
    color: #a33;
    flex: none;
    font-size: 11px;
    font-weight: 700
}

.hp-num.svelte-ix13td {
    font-family: var(--font-display);
    opacity: .85;
    flex: none;
    font-size: 11px
}

.hpbar.svelte-ix13td {
    width: 56px;
    height: 13px;
    image-rendering: pixelated;
    vertical-align: middle;
    flex: none
}

.unit-where.svelte-ix13td {
    opacity: .65;
    margin-top: 5px;
    font-size: 10.5px
}

.picker.svelte-ix13td {
    background: #5e3d201a;
    border-radius: 6px;
    margin: 2px 0 5px;
    padding: 5px 8px
}

.picker-title.svelte-ix13td {
    font-family: var(--font-display);
    margin-bottom: 3px;
    font-size: 11.5px
}

.picker-row.svelte-ix13td {
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    display: flex
}

.picker-name.svelte-ix13td {
    flex: 1;
    font-size: 12px;
    font-weight: 600
}

.picker-cap.svelte-ix13td {
    font-family: var(--font-display);
    opacity: .7;
    font-size: 11px
}

.unit-hire.svelte-ix13td {
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    display: flex
}

.costs.svelte-ix13td {
    font-family: var(--font-display);
    white-space: nowrap;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    display: flex
}

.costs.svelte-ix13td img:where(.svelte-ix13td) {
    object-fit: contain;
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    margin-left: 4px
}

.hint.svelte-ix13td {
    opacity: .75;
    margin-top: 4px;
    font-size: 11px
}

.boost-row.svelte-ix13td {
    align-items: center;
    gap: 8px;
    display: flex
}

.boost-row.svelte-ix13td .ui-btn {
    --h: 38px;
    flex: none;
    transform: translateY(2px)
}

.boost-info.svelte-ix13td {
    flex-direction: column;
    flex: 1;
    display: flex
}

.boost-name.svelte-ix13td {
    font-size: 13px;
    font-weight: 600
}

.boost-desc.svelte-ix13td {
    opacity: .7;
    font-size: 11px
}

.cost-ico.svelte-ix13td {
    object-fit: contain;
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    transform: translateY(1px)
}

.active.svelte-ix13td {
    font-family: var(--font-display);
    color: #1d7a4f;
    white-space: nowrap;
    font-size: 12px
}

.panel.svelte-1kybccq {
    right: calc(14px + var(--sar, 0px));
    bottom: calc(118px + var(--sab, 0px));
    z-index: 26;
    width: 330px;
    max-width: calc(100vw - 24px);
    max-height: 62vh;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    flex-direction: column;
    padding: 14px 16px 12px;
    display: flex;
    position: fixed
}

@media (width<=700px) {
    .panel.svelte-1kybccq {
        right: calc(78px + var(--sar, 0px));
        bottom: calc(14px + var(--sab, 0px));
        max-width: calc(100vw - 92px)
    }
}

.panel-title.svelte-1kybccq {
    font-family: var(--font-display);
    letter-spacing: .5px;
    text-align: center;
    margin-bottom: 6px;
    font-size: 15px
}

.volume.svelte-1kybccq {
    text-align: center;
    color: var(--ink, #3a2716);
    opacity: .85;
    margin: -2px 0 8px;
    font-size: 12px
}

.vol-amt.svelte-1kybccq {
    font-family: var(--font-display);
    color: #8a6a1d
}

.tabs.svelte-1kybccq {
    gap: 6px;
    margin-bottom: 8px;
    display: flex
}

.tabs.svelte-1kybccq .ui-btn {
    --h: 38px;
    flex: 1
}

.filter.svelte-1kybccq {
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    display: flex
}

.filter.svelte-1kybccq .ui-btn {
    --h: 34px
}

.chip-ico.svelte-1kybccq {
    object-fit: contain;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    transform: translateY(1px)
}

.list.svelte-1kybccq {
    flex: 1;
    min-height: 0;
    padding-right: 2px;
    overflow-y: auto
}

.row.svelte-1kybccq {
    border-bottom: 2px solid #5e3d201f;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    display: flex
}

.row.svelte-1kybccq:last-of-type {
    border-bottom: 0
}

.row.svelte-1kybccq .ui-btn {
    --h: 32px;
    flex: none;
    font-size: 11px;
    transform: translateY(2px)
}

.row-ico.svelte-1kybccq {
    object-fit: contain;
    width: 24px;
    height: 24px;
    image-rendering: pixelated
}

.row-mid.svelte-1kybccq {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.row-qty.svelte-1kybccq {
    text-transform: capitalize;
    font-size: 12.5px;
    font-weight: 600
}

.row-sub.svelte-1kybccq {
    opacity: .65;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    overflow: hidden
}

.row-price.svelte-1kybccq {
    font-family: var(--font-display);
    color: #1d6c8f;
    white-space: nowrap;
    font-size: 13px
}

.form-lbl.svelte-1kybccq {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600
}

.item-pick.svelte-1kybccq {
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    display: flex
}

.item-pick.svelte-1kybccq .ui-btn {
    --h: 38px
}

.item-pick.svelte-1kybccq .have:where(.svelte-1kybccq) {
    opacity: .7;
    margin-left: auto;
    font-size: 11px
}

.form-row.svelte-1kybccq {
    align-items: center;
    gap: 6px;
    display: flex
}

.form-row.svelte-1kybccq .ui-input {
    flex: 1;
    min-width: 0
}

.form-row.svelte-1kybccq .ui-btn {
    --h: 38px;
    flex: none;
    transform: translateY(2px)
}

.sep.svelte-1kybccq {
    background: #5e3d2040;
    border-radius: 2px;
    height: 2px;
    margin: 9px 0
}

.hint.svelte-1kybccq {
    opacity: .72;
    margin-top: 5px;
    font-size: 11px
}

.hint.center.svelte-1kybccq {
    text-align: center;
    padding: 8px 0
}

.hud-br.svelte-12p78q3 {
    right: calc(14px + var(--sar, 0px));
    bottom: calc(14px + var(--sab, 0px));
    z-index: 25;
    gap: 8px;
    display: flex;
    position: fixed
}

.map-only.svelte-12p78q3 {
    display: none
}

@media (width<=700px) {
    .hud-br.svelte-12p78q3 {
        right: calc(8px + var(--sar, 0px));
        flex-direction: column;
        gap: 5px
    }

    .map-only.svelte-12p78q3 {
        display: block
    }
}

.ts-btn.svelte-12p78q3 {
    background-image: var(--bg);
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background-color: #0000;
    background-size: 100% 100%;
    border: 0;
    padding: 0;
    transition: filter .1s;
    position: relative
}

.ts-btn.svelte-12p78q3:hover {
    filter: brightness(1.09)
}

.ts-btn.svelte-12p78q3:active {
    background-image: var(--bg-pressed)
}

.ts-btn.svelte-12p78q3:active .icon:where(.svelte-12p78q3) {
    transform: translateY(2px)
}

.ts-btn.svelte-12p78q3 .icon:where(.svelte-12p78q3) {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    pointer-events: none;
    position: absolute;
    top: 10px;
    left: 16px
}

.ts-btn.bumping.svelte-12p78q3 {
    animation: .45s cubic-bezier(.34, 1.56, .64, 1) svelte-12p78q3-bump
}

.ts-btn.attention.svelte-12p78q3 {
    animation: 1.6s ease-in-out infinite svelte-12p78q3-attention-glow
}

.ts-btn.attention.svelte-12p78q3 .icon.pawn:where(.svelte-12p78q3) {
    animation: 1.6s ease-in-out infinite svelte-12p78q3-attention-pulse
}

@keyframes svelte-12p78q3-attention-glow {

    0%,
    to {
        filter: drop-shadow(0 0 #ffd84a00)
    }

    50% {
        filter: drop-shadow(0 0 7px #ffd84af2)brightness(1.06)
    }
}

@keyframes svelte-12p78q3-attention-pulse {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

.ts-btn.svelte-12p78q3 .badge:where(.svelte-12p78q3) {
    color: #3a2716;
    min-width: 18px;
    height: 18px;
    font-family: var(--font-display);
    text-align: center;
    pointer-events: none;
    background: #ffd84a;
    border: 2px solid #6e4a23;
    border-radius: 9px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 14px;
    position: absolute;
    top: -5px;
    right: -5px
}

.ts-btn.svelte-12p78q3 .icon.pawn:where(.svelte-12p78q3) {
    background-image: var(--pawn);
    image-rendering: pixelated;
    background-position: -27px -31px;
    background-repeat: no-repeat;
    background-size: 518.4px 518.4px
}

@keyframes svelte-12p78q3-bump {
    0% {
        transform: scale(1)
    }

    35% {
        transform: scale(1.22)rotate(-4deg)
    }

    70% {
        transform: scale(.96)rotate(2deg)
    }

    to {
        transform: scale(1)
    }
}

.panel.svelte-12p78q3 {
    right: calc(14px + var(--sar, 0px));
    bottom: calc(118px + var(--sab, 0px));
    z-index: 26;
    min-width: 252px;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 14px 16px 12px;
    position: fixed
}

@media (width<=700px) {
    .panel.svelte-12p78q3 {
        right: calc(78px + var(--sar, 0px));
        bottom: calc(14px + var(--sab, 0px));
        max-width: calc(100vw - 92px)
    }
}

.panel-title.svelte-12p78q3 {
    font-family: var(--font-display);
    letter-spacing: .5px;
    text-align: center;
    margin-bottom: 8px;
    font-size: 15px
}

.row.svelte-12p78q3 {
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    display: flex
}

.row.svelte-12p78q3 img:where(.svelte-12p78q3) {
    object-fit: contain;
    width: 30px;
    height: 30px;
    image-rendering: pixelated
}

.row.svelte-12p78q3 .lbl:where(.svelte-12p78q3) {
    flex: 1;
    font-size: 14px;
    font-weight: 600
}

.row.svelte-12p78q3 .num:where(.svelte-12p78q3) {
    font-family: var(--font-display);
    font-size: 17px
}

.sep.svelte-12p78q3 {
    background: #5e3d2040;
    border-radius: 2px;
    height: 2px;
    margin: 8px 0
}

.consumables.svelte-12p78q3 {
    max-height: 36vh;
    padding-right: 2px;
    overflow-y: auto
}

.use-row.svelte-12p78q3 {
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    display: flex
}

.use-main.svelte-12p78q3 {
    cursor: pointer;
    min-width: 0;
    color: inherit;
    text-align: left;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    flex: 1;
    align-items: center;
    gap: 9px;
    padding: 4px;
    font-family: inherit;
    display: flex
}

.use-main.svelte-12p78q3:hover {
    background: #ffd66e38
}

.use-main.svelte-12p78q3:active {
    transform: translateY(1px)
}

.use-main.svelte-12p78q3 img:where(.svelte-12p78q3) {
    object-fit: contain;
    width: 28px;
    height: 28px;
    image-rendering: pixelated
}

.use-main.svelte-12p78q3 .lbl:where(.svelte-12p78q3) {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden
}

.use-main.svelte-12p78q3 .num:where(.svelte-12p78q3) {
    font-family: var(--font-display);
    font-size: 15px
}

.use-main.svelte-12p78q3 .num.cost:where(.svelte-12p78q3) {
    align-items: center;
    gap: 2px;
    font-size: 13px;
    display: inline-flex
}

.use-main.svelte-12p78q3 .num.cost:where(.svelte-12p78q3) img:where(.svelte-12p78q3) {
    object-fit: contain;
    width: 14px;
    height: 14px;
    image-rendering: pixelated
}

.slots.svelte-12p78q3 {
    flex: none;
    gap: 3px;
    display: flex
}

.slots.svelte-12p78q3 .ui-btn {
    --h: 26px;
    font-size: 12px
}

.logout-row.svelte-12p78q3 {
    border-top: 1px solid #5e3d2040;
    justify-content: center;
    margin-top: 14px;
    padding-top: 12px;
    display: flex
}

.logout-row.svelte-12p78q3 .ui-btn {
    width: 100%
}

.set-row.svelte-12p78q3 {
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    display: flex
}

.set-name.svelte-12p78q3 {
    flex: 0 0 64px;
    font-size: 13px;
    font-weight: 600
}

.tgl.svelte-12p78q3 {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: 0 0;
    border: 0;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0
}

.tgl.svelte-12p78q3:hover {
    filter: brightness(1.12)
}

.tgl.svelte-12p78q3:active {
    transform: translateY(1px)
}

.tgl.svelte-12p78q3 img:where(.svelte-12p78q3) {
    object-fit: contain;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none
}

.vol.svelte-12p78q3 {
    appearance: none;
    border: 2px solid var(--wood-dark, #5e3d20);
    background: var(--cream, #fff4e2);
    min-width: 0;
    height: 8px;
    accent-color: var(--gold, #ffd66e);
    cursor: pointer;
    border-radius: 6px;
    flex: 1
}

.vol.svelte-12p78q3::-webkit-slider-thumb {
    appearance: none;
    background: var(--gold, #ffd66e);
    border: 2px solid var(--wood-dark, #5e3d20);
    border-radius: 50%;
    width: 16px;
    height: 16px
}

.vol.svelte-12p78q3:disabled {
    opacity: .45;
    cursor: not-allowed
}

.coach.svelte-1jxm45t {
    top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 60;
    width: min(660px, 100vw - 18px);
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    filter: drop-shadow(0 6px 14px #00000073);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 11px 16px;
    animation: .3s ease-out svelte-1jxm45t-coach-in;
    display: flex;
    position: fixed;
    left: 50%;
    transform: translate(-50%)
}

.coach.bottom.svelte-1jxm45t {
    top: auto;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    animation: .3s ease-out svelte-1jxm45t-coach-in-b
}

@keyframes svelte-1jxm45t-coach-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -12px)
    }

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

@keyframes svelte-1jxm45t-coach-in-b {
    0% {
        opacity: 0;
        transform: translate(-50%, 12px)
    }

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

.ico.svelte-1jxm45t {
    object-fit: contain;
    width: 30px;
    height: 30px;
    image-rendering: pixelated;
    flex-shrink: 0
}

.mid.svelte-1jxm45t {
    flex-direction: column;
    flex: auto;
    gap: 5px;
    min-width: 0;
    display: flex
}

.txt.svelte-1jxm45t {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.35
}

.hint.svelte-1jxm45t {
    opacity: .7;
    font-style: italic
}

.dots.svelte-1jxm45t {
    gap: 5px;
    display: flex
}

.dots.svelte-1jxm45t span:where(.svelte-1jxm45t) {
    background: #5e3d204d;
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.dots.svelte-1jxm45t span.on:where(.svelte-1jxm45t) {
    background: #c79a3a
}

.ctl.svelte-1jxm45t {
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    display: flex
}

.x.svelte-1jxm45t {
    cursor: pointer;
    background: 0 0;
    border: 0;
    width: 30px;
    height: 30px;
    padding: 0
}

.x.svelte-1jxm45t img:where(.svelte-1jxm45t) {
    width: 100%;
    height: 100%;
    image-rendering: pixelated
}

@media (width<=700px) {
    .coach.svelte-1jxm45t {
        filter: drop-shadow(0 6px 16px #0000008c);
        gap: 10px;
        width: calc(100vw - 12px);
        padding: 10px 10px 13px 14px;
        animation: .3s ease-out svelte-1jxm45t-coach-in, 2.2s ease-in-out .3s infinite svelte-1jxm45t-coach-glow
    }

    .coach.bottom.svelte-1jxm45t {
        animation: .3s ease-out svelte-1jxm45t-coach-in-b, 2.2s ease-in-out .3s infinite svelte-1jxm45t-coach-glow
    }

    .ico.svelte-1jxm45t {
        width: 34px;
        height: 34px
    }

    .txt.svelte-1jxm45t {
        font-size: 14px;
        font-weight: 600
    }
}

@keyframes svelte-1jxm45t-coach-glow {

    0%,
    to {
        filter: drop-shadow(0 6px 16px #0000008c)
    }

    50% {
        filter: drop-shadow(0 0 10px #ffd66ed9)drop-shadow(0 6px 16px #0000008c)
    }
}

.scrim.svelte-1jxm45t {
    z-index: 58;
    pointer-events: none;
    border-radius: 6px;
    position: fixed;
    box-shadow: 0 0 0 9999px #000000b8
}

.fulldim.svelte-1jxm45t {
    z-index: 58;
    pointer-events: auto;
    background: #000000a8;
    animation: .25s ease-out svelte-1jxm45t-fade-in;
    position: fixed;
    inset: 0
}

@keyframes svelte-1jxm45t-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ptr.svelte-1jxm45t {
    z-index: 61;
    pointer-events: none;
    width: 42px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 3px #0009);
    animation: .85s ease-in-out infinite svelte-1jxm45t-ptr-bob;
    position: fixed;
    transform: translate(-50%)
}

@keyframes svelte-1jxm45t-ptr-bob {

    0%,
    to {
        transform: translate(-50%)translateY(0)
    }

    50% {
        transform: translate(-50%)translateY(-7px)
    }
}

.minimap.svelte-1q4gp9r {
    top: calc(8px + var(--sat, 0px));
    z-index: 14;
    image-rendering: pixelated;
    background: url("") 0 0/100% 100% no-repeat;
    padding: 14px 20px 32px;
    position: fixed;
    right: 8px
}

.minimap.svelte-1q4gp9r canvas:where(.svelte-1q4gp9r) {
    cursor: pointer;
    border-radius: 3px;
    display: block
}

.minimap.pop.svelte-1q4gp9r {
    z-index: 55;
    padding: 38px 34px 58px;
    animation: .22s cubic-bezier(.34, 1.56, .64, 1) svelte-1q4gp9r-map-pop;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%)
}

.minimap.pop.svelte-1q4gp9r canvas:where(.svelte-1q4gp9r) {
    width: min(70vw, 52vh);
    height: min(70vw, 52vh);
    image-rendering: pixelated
}

.minimap.pop.svelte-1q4gp9r .close:where(.svelte-1q4gp9r) {
    cursor: pointer;
    background: 0 0;
    border: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    transition: transform 80ms, filter .1s;
    position: absolute;
    top: 14px;
    right: 14px
}

.minimap.pop.svelte-1q4gp9r .close:where(.svelte-1q4gp9r) img:where(.svelte-1q4gp9r) {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none
}

.minimap.pop.svelte-1q4gp9r .close:where(.svelte-1q4gp9r):hover {
    filter: brightness(1.12);
    transform: scale(1.08)
}

.minimap.pop.svelte-1q4gp9r .close:where(.svelte-1q4gp9r):active {
    transform: scale(.92)
}

@keyframes svelte-1q4gp9r-map-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%)scale(.85)
    }
}

.md-col.svelte-17kago5 {
    flex-direction: column;
    gap: 7px;
    display: flex
}

.md-label.svelte-17kago5 {
    opacity: .8;
    margin-bottom: 6px;
    font-size: 13px
}

.panel.svelte-1p61i0q {
    right: calc(14px + var(--sar, 0px));
    bottom: calc(118px + var(--sab, 0px));
    z-index: 26;
    min-width: 250px;
    max-width: calc(100vw - 24px);
    max-height: 64vh;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 14px 16px 12px;
    position: fixed;
    overflow-y: auto
}

@media (width<=700px) {
    .panel.svelte-1p61i0q {
        right: calc(78px + var(--sar, 0px));
        bottom: calc(14px + var(--sab, 0px))
    }
}

.close.svelte-1p61i0q {
    cursor: pointer;
    background: 0 0;
    border: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    position: absolute;
    top: 2px;
    right: 6px
}

.close.svelte-1p61i0q img:where(.svelte-1p61i0q) {
    width: 100%;
    height: 100%;
    image-rendering: pixelated
}

.panel-title.svelte-1p61i0q {
    font-family: var(--font-display);
    letter-spacing: .5px;
    text-align: center;
    margin-bottom: 8px;
    font-size: 15px
}

.lvl.svelte-1p61i0q {
    color: #8a6a1d;
    font-size: 12px
}

.sec-head.svelte-1p61i0q {
    font-family: var(--font-display);
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex
}

.total.svelte-1p61i0q {
    opacity: .7;
    font-size: 12px
}

.kill-grid.svelte-1p61i0q {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    display: grid
}

.kill-cell.svelte-1p61i0q {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    display: flex
}

.kill-cell.svelte-1p61i0q img:where(.svelte-1p61i0q) {
    width: 38px;
    height: 38px;
    image-rendering: pixelated
}

.res-row.svelte-1p61i0q {
    justify-content: center;
    gap: 14px;
    display: flex
}

.res-cell.svelte-1p61i0q {
    align-items: center;
    gap: 5px;
    display: flex
}

.res-cell.svelte-1p61i0q img:where(.svelte-1p61i0q) {
    object-fit: contain;
    width: 22px;
    height: 22px;
    image-rendering: pixelated
}

.num.svelte-1p61i0q {
    font-family: var(--font-display);
    font-size: 13px
}

.empty.svelte-1p61i0q {
    opacity: .65;
    text-align: center;
    padding: 4px 0;
    font-size: 12px
}

.sep.svelte-1p61i0q {
    background: #5e3d2040;
    border-radius: 2px;
    height: 2px;
    margin: 9px 0
}

.duel-row.svelte-1p61i0q {
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    display: flex
}

.block-row.svelte-1p61i0q {
    justify-content: flex-end;
    margin-bottom: 8px;
    display: flex
}

.mod-wrap.svelte-1p61i0q {
    margin-bottom: 8px
}

.panel.svelte-1s2ohzq {
    z-index: 40;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 76vh;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    flex-direction: column;
    padding: 16px 18px 14px;
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.x.svelte-1s2ohzq {
    width: 30px;
    height: 30px;
    font-family: var(--font-display);
    color: #a3331f;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: -6px;
    right: -2px
}

.panel-title.svelte-1s2ohzq {
    font-family: var(--font-display);
    text-align: center;
    margin-bottom: 2px;
    font-size: 16px
}

.hint.svelte-1s2ohzq {
    opacity: .72;
    font-size: 11px
}

.hint.center.svelte-1s2ohzq {
    text-align: center;
    margin-bottom: 8px
}

.list.svelte-1s2ohzq {
    flex: 1;
    min-height: 0;
    padding-right: 2px;
    overflow-y: auto
}

.row.svelte-1s2ohzq {
    border-bottom: 2px solid #5e3d201f;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    display: flex
}

.row.svelte-1s2ohzq:last-of-type {
    border-bottom: 0
}

.row.svelte-1s2ohzq .ui-btn {
    --h: 34px;
    flex: none;
    font-size: 11px;
    transform: translateY(2px)
}

.row-ico.svelte-1s2ohzq {
    object-fit: contain;
    width: 34px;
    height: 34px;
    image-rendering: pixelated
}

.row-mid.svelte-1s2ohzq {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.row-name.svelte-1s2ohzq {
    font-size: 13px;
    font-weight: 600
}

.row-sub.svelte-1s2ohzq {
    opacity: .7;
    font-size: 11px
}

.cost.svelte-1s2ohzq {
    gap: 8px;
    margin-top: 2px;
    display: flex
}

.chip.svelte-1s2ohzq {
    font-family: var(--font-display);
    align-items: center;
    gap: 2px;
    font-size: 12px;
    display: inline-flex
}

.chip.svelte-1s2ohzq img:where(.svelte-1s2ohzq) {
    object-fit: contain;
    width: 16px;
    height: 16px;
    image-rendering: pixelated
}

.chip.lack.svelte-1s2ohzq {
    color: #a3331f
}

.quickbar.svelte-e4bczw {
    left: calc(14px + var(--sal, 0px));
    bottom: calc(14px + var(--sab, 0px));
    z-index: 15;
    gap: 8px;
    display: flex;
    position: fixed
}

.qs-btn.svelte-e4bczw {
    background: var(--bg) 0 0 / 100% 100% no-repeat;
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: 0;
    padding: 0;
    transition: filter .1s;
    position: relative
}

.qs-btn.svelte-e4bczw:hover:not(:disabled) {
    filter: brightness(1.09)
}

.qs-btn.svelte-e4bczw:active:not(:disabled) {
    background-image: var(--bg-pressed)
}

.qs-btn.svelte-e4bczw:disabled {
    opacity: .62;
    cursor: default
}

.qs-btn.svelte-e4bczw .key:where(.svelte-e4bczw) {
    font-family: var(--font-display, system-ui);
    color: #fff7e6;
    text-shadow: 0 1px #0000008c;
    pointer-events: none;
    font-size: 11px;
    position: absolute;
    top: 3px;
    left: 6px
}

.qs-btn.svelte-e4bczw .qs-icon:where(.svelte-e4bczw) {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    pointer-events: none;
    position: absolute;
    top: 9px;
    left: 14px
}

.qs-btn.svelte-e4bczw:active:not(:disabled) .qs-icon:where(.svelte-e4bczw) {
    transform: translateY(2px)
}

.qs-btn.svelte-e4bczw .qs-num:where(.svelte-e4bczw) {
    color: #3a2716;
    min-width: 14px;
    height: 15px;
    font-family: var(--font-display, system-ui);
    text-align: center;
    pointer-events: none;
    background: #ffd84a;
    border: 1.5px solid #6e4a23;
    border-radius: 8px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 13px;
    position: absolute;
    bottom: 4px;
    right: 5px
}

.qs-btn.svelte-e4bczw .qs-cost:where(.svelte-e4bczw) {
    font-family: var(--font-display, system-ui);
    color: #fff7e6;
    text-shadow: 0 1px #0009;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    gap: 1px;
    font-size: 10px;
    display: flex;
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0
}

.qs-btn.svelte-e4bczw .qs-cost:where(.svelte-e4bczw) img:where(.svelte-e4bczw) {
    object-fit: contain;
    width: 13px;
    height: 13px;
    image-rendering: pixelated
}

@media (width<=700px) {
    .quickbar.svelte-e4bczw {
        left: calc(8px + var(--sal, 0px))
    }

    .qs-btn.svelte-e4bczw {
        width: 50px;
        height: 50px
    }

    .qs-btn.svelte-e4bczw .qs-icon:where(.svelte-e4bczw) {
        width: 26px;
        height: 26px;
        top: 8px;
        left: 12px
    }
}

.invite.svelte-1fq3vj1 {
    left: 50%;
    top: calc(96px + var(--sat, 0px));
    z-index: 62;
    text-align: center;
    width: min(360px, 100vw - 24px);
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    filter: drop-shadow(0 6px 14px #00000073);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 14px 16px 16px;
    position: fixed;
    transform: translate(-50%)
}

.txt.svelte-1fq3vj1 {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.35
}

.row.svelte-1fq3vj1 {
    justify-content: center;
    gap: 10px;
    display: flex
}

.chat-wrap.svelte-1csz7wk {
    left: calc(14px + var(--sal, 0px));
    bottom: calc(14px + var(--sab, 0px));
    z-index: 24;
    position: fixed
}

.panel.svelte-1csz7wk {
    width: 320px;
    max-width: calc(100vw - 28px);
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 10px 14px 12px
}

.head.svelte-1csz7wk {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    display: flex
}

.head.svelte-1csz7wk:active {
    cursor: grabbing
}

.head-ico.svelte-1csz7wk {
    object-fit: contain;
    width: 22px;
    height: 22px;
    image-rendering: pixelated
}

.title.svelte-1csz7wk {
    font-family: var(--font-display);
    letter-spacing: .5px;
    flex: 1;
    font-size: 15px
}

.modbtn.svelte-1csz7wk {
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    line-height: 0
}

.modbtn.svelte-1csz7wk img:where(.svelte-1csz7wk) {
    width: 22px;
    height: 22px;
    image-rendering: pixelated
}

.x.svelte-1csz7wk {
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    line-height: 0
}

.x.svelte-1csz7wk img:where(.svelte-1csz7wk) {
    width: 22px;
    height: 22px;
    image-rendering: pixelated
}

.tabs.svelte-1csz7wk {
    gap: 6px;
    margin-bottom: 6px;
    display: flex
}

.tab.svelte-1csz7wk {
    color: inherit;
    font-family: var(--font-display);
    cursor: pointer;
    background: #5e3d201a;
    border: 0;
    border-radius: 5px;
    flex: 1;
    padding: 5px 0;
    font-size: 12px
}

.tab.active.svelte-1csz7wk {
    background: #5e3d2047
}

.msgs.svelte-1csz7wk {
    flex-direction: column;
    gap: 3px;
    height: 200px;
    padding-right: 4px;
    display: flex;
    overflow-y: auto
}

.msg.svelte-1csz7wk {
    word-break: break-word;
    font-size: 13px;
    line-height: 1.4
}

.who.svelte-1csz7wk {
    vertical-align: -3px;
    align-items: center;
    gap: 3px;
    display: inline-flex
}

.name-btn.svelte-1csz7wk {
    text-shadow: 0 1px #ffffff40;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: inherit;
    vertical-align: middle;
    background: 0 0;
    border: 0;
    padding: 0
}

.name-btn.svelte-1csz7wk:hover {
    text-decoration: underline
}

.badge.svelte-1csz7wk {
    object-fit: contain;
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    flex: none;
    display: block
}

.whisper.svelte-1csz7wk .warrow:where(.svelte-1csz7wk) {
    color: #7d4fc0;
    font-style: italic;
    font-weight: 700
}

.whisper.svelte-1csz7wk .text:where(.svelte-1csz7wk) {
    color: #5a4632;
    font-style: italic
}

.sep.svelte-1csz7wk {
    opacity: .6;
    margin-right: 4px
}

.text.svelte-1csz7wk {
    color: #463221
}

.chat-block.svelte-1csz7wk {
    opacity: .4;
    cursor: pointer;
    vertical-align: middle;
    color: inherit;
    background: 0 0;
    border: 0;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1
}

.chat-block.svelte-1csz7wk:hover {
    opacity: .9
}

.wrow.svelte-1csz7wk {
    cursor: pointer;
    width: 100%;
    color: inherit;
    text-align: left;
    background: #5e3d2014;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    font-family: inherit;
    display: flex
}

.wrow.svelte-1csz7wk:hover {
    background: #5e3d202e
}

.wpeer.svelte-1csz7wk {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: none;
    max-width: 40%;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden
}

.wlast.svelte-1csz7wk {
    opacity: .65;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    overflow: hidden
}

.wbadge.svelte-1csz7wk {
    text-align: center;
    color: #fff;
    background: #b5432f;
    border-radius: 9px;
    flex: none;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 700
}

.wthead.svelte-1csz7wk {
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    display: flex
}

.back.svelte-1csz7wk {
    cursor: pointer;
    color: inherit;
    background: #5e3d201f;
    border: 0;
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 16px;
    line-height: 1
}

.wtitle.svelte-1csz7wk {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700
}

@keyframes svelte-1csz7wk-blink {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

.blink.svelte-1csz7wk {
    animation: 1s ease-in-out infinite svelte-1csz7wk-blink
}

.empty.svelte-1csz7wk {
    opacity: .6;
    padding: 6px 0;
    font-size: 13px;
    font-style: italic
}

.compose.svelte-1csz7wk {
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    display: flex
}

.in-wrap.svelte-1csz7wk {
    flex: 1;
    min-width: 0
}

.compose.svelte-1csz7wk .ui-input {
    --h: 40px
}

.compose.svelte-1csz7wk .ui-btn {
    --h: 40px;
    flex: none;
    font-size: 14px
}

.err.svelte-1csz7wk {
    color: #b5432f;
    margin-top: 5px;
    font-size: 12px
}

.locked.svelte-1csz7wk {
    opacity: .7;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    font-style: italic
}

@media (width<=700px) {
    .chat-wrap.svelte-1csz7wk {
        left: calc(8px + var(--sal, 0px));
        bottom: calc(8px + var(--sab, 0px))
    }

    .panel.svelte-1csz7wk {
        width: min(280px, 100vw - 92px)
    }

    .msgs.svelte-1csz7wk {
        height: 150px
    }
}

.backdrop.svelte-8og2ve {
    z-index: 60;
    background: #00000059;
    border: 0;
    position: fixed;
    inset: 0
}

.pop.svelte-8og2ve {
    z-index: 61;
    width: 260px;
    max-width: calc(100vw - 28px);
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 10px 16px 14px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.head.svelte-8og2ve {
    align-items: center;
    margin-bottom: 8px;
    display: flex
}

.title.svelte-8og2ve {
    font-family: var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 15px;
    overflow: hidden
}

.x.svelte-8og2ve {
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    line-height: 0
}

.x.svelte-8og2ve img:where(.svelte-8og2ve) {
    width: 22px;
    height: 22px;
    image-rendering: pixelated
}

.search.svelte-8og2ve {
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    display: flex
}

.search.svelte-8og2ve .ui-input {
    --h: 38px;
    flex: 1;
    min-width: 0
}

.results.svelte-8og2ve {
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    display: flex;
    overflow-y: auto
}

.row.svelte-8og2ve {
    cursor: pointer;
    color: inherit;
    background: #5e3d2014;
    border: 0;
    border-radius: 5px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    display: flex
}

.row.svelte-8og2ve:hover {
    background: #5e3d202e
}

.rname.svelte-8og2ve {
    font-weight: 700
}

.rtag.svelte-8og2ve {
    opacity: .7;
    text-transform: uppercase;
    font-size: 10px
}

.col.svelte-8og2ve {
    flex-direction: column;
    gap: 7px;
    display: flex
}

.sub.svelte-8og2ve {
    font-family: var(--font-display);
    opacity: .7;
    margin-top: 2px;
    font-size: 12px
}

.note.svelte-8og2ve {
    opacity: .7;
    margin: -2px 0 2px;
    font-size: 11px
}

.err.svelte-8og2ve {
    color: #b5432f;
    font-size: 12px
}

.hint.svelte-8og2ve {
    opacity: .7;
    text-align: center;
    padding: 4px 0;
    font-size: 11px;
    font-style: italic
}

.backdrop.svelte-5z9pfz {
    z-index: 60;
    background: #00000059;
    border: 0;
    position: fixed;
    inset: 0
}

.pop.svelte-5z9pfz {
    z-index: 61;
    width: 220px;
    max-width: calc(100vw - 28px);
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 10px 16px 14px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.head.svelte-5z9pfz {
    align-items: center;
    margin-bottom: 8px;
    display: flex
}

.title.svelte-5z9pfz {
    font-family: var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-size: 16px;
    overflow: hidden
}

.x.svelte-5z9pfz {
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    line-height: 0
}

.x.svelte-5z9pfz img:where(.svelte-5z9pfz) {
    width: 22px;
    height: 22px;
    image-rendering: pixelated
}

.col.svelte-5z9pfz {
    flex-direction: column;
    gap: 7px;
    display: flex
}

.topbar.svelte-1uha8ag {
    top: calc(8px + var(--sat, 0px));
    z-index: 20;
    pointer-events: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    display: flex;
    position: fixed;
    left: 8px;
    right: 8px
}

.seg.svelte-1uha8ag {
    pointer-events: auto;
    gap: 5px;
    display: flex
}

.seg.svelte-1uha8ag .ui-btn {
    min-height: 44px;
    font-size: 14px
}

@media (width>=701px) {
    .seg.svelte-1uha8ag .ui-btn {
        --h: 58px;
        min-height: 58px;
        font-size: 19px
    }

    .seg.svelte-1uha8ag .btn-ico:where(.svelte-1uha8ag) {
        width: 28px;
        height: 28px
    }
}

.spacer.svelte-1uha8ag {
    flex: 1
}

.scroll-pop.svelte-1uha8ag {
    z-index: 60;
    min-width: 270px;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    text-align: center;
    background: url("") 0 0/100% 100% no-repeat;
    padding: 26px 34px 46px;
    animation: .25s cubic-bezier(.34, 1.56, .64, 1) svelte-1uha8ag-pop-in;
    position: fixed;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.sp-close.svelte-1uha8ag {
    cursor: pointer;
    background: 0 0;
    border: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    transition: transform 80ms, filter .1s;
    position: absolute;
    top: 10px;
    right: 12px
}

.sp-close.svelte-1uha8ag img:where(.svelte-1uha8ag) {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none
}

.sp-close.svelte-1uha8ag:hover {
    filter: brightness(1.12);
    transform: scale(1.08)
}

.sp-close.svelte-1uha8ag:active {
    transform: scale(.92)
}

.repair-act.svelte-1uha8ag .ui-btn {
    padding-bottom: 6px
}

@keyframes svelte-1uha8ag-pop-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%)scale(.85)
    }
}

.sp-title.svelte-1uha8ag {
    font-family: var(--font-display);
    letter-spacing: .4px;
    margin-bottom: 2px;
    font-size: 17px
}

.sp-sub.svelte-1uha8ag {
    opacity: .78;
    margin-bottom: 10px;
    font-size: 12.5px
}

.sp-row.svelte-1uha8ag {
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    display: flex
}

.sp-row.svelte-1uha8ag img:where(.svelte-1uha8ag) {
    object-fit: contain;
    width: 28px;
    height: 28px;
    image-rendering: pixelated
}

.sp-num.svelte-1uha8ag {
    font-family: var(--font-display);
    font-size: 17px
}

.sp-lbl.svelte-1uha8ag {
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 600
}

.sp-usd.svelte-1uha8ag {
    color: #c98a1a;
    text-transform: none;
    margin-left: auto
}

.sp-input.svelte-1uha8ag {
    box-sizing: border-box;
    border: 2px solid var(--wood-dark, #5e3d20);
    background: var(--cream, #fff4e2);
    width: 100%;
    font-family: var(--font-ui);
    color: var(--ink, #3a2716);
    text-align: center;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 14px
}

.sp-input.svelte-1uha8ag:focus {
    outline: 2px solid var(--gold, #ffd66e)
}

.sp-actions.svelte-1uha8ag {
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    display: flex
}

.btn-ico.svelte-1uha8ag {
    object-fit: contain;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    transform: translateY(2px)
}

.price.svelte-1uha8ag {
    font-family: var(--font-ui);
    color: #ffe9bf;
    align-items: center;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

.bottom.svelte-1uha8ag {
    z-index: 15;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

.map-backdrop.svelte-1uha8ag {
    z-index: 54;
    background: #060e0a73;
    border: 0;
    padding: 0;
    position: fixed;
    inset: 0
}

@media (width<=700px) {
    .topbar.svelte-1uha8ag {
        justify-content: center
    }

    .topbar.svelte-1uha8ag .spacer:where(.svelte-1uha8ag) {
        display: none
    }
}

.dbg.svelte-1uha8ag {
    top: calc(64px + var(--sat, 0px));
    z-index: 30;
    pointer-events: none;
    color: #d7ffe3;
    white-space: pre;
    background: #08100cd1;
    border: 1px solid #78e68c66;
    border-radius: 8px;
    min-width: 196px;
    padding: 8px 10px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    position: fixed;
    right: 8px
}

.dbg.svelte-1uha8ag .dbg-h:where(.svelte-1uha8ag) {
    color: #ffe066;
    margin-bottom: 4px;
    font-weight: 700
}

.dbg.svelte-1uha8ag .hot:where(.svelte-1uha8ag) {
    color: #66e0ff;
    font-weight: 700
}

.dbg.svelte-1uha8ag .sep:where(.svelte-1uha8ag) {
    height: 6px
}

.toast.svelte-1uha8ag {
    top: calc(70px + var(--sat, 0px));
    z-index: 70;
    height: 42px;
    image-rendering: pixelated;
    font-family: var(--font-display);
    letter-spacing: .04em;
    color: #fff7e6;
    text-shadow: 0 1.5px #00000073;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-style: solid;
    border-width: 0 38px;
    border-image: url("") 0 97 0 98 fill/0 38px;
    align-items: center;
    max-width: 86vw;
    padding: 0 18px 5px;
    font-size: 13px;
    animation: .25s cubic-bezier(.2, 1.3, .4, 1) svelte-1uha8ag-drop;
    display: flex;
    position: fixed;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%)
}

.toast.err.svelte-1uha8ag {
    border-image-source: url("")
}

@media (width<=700px) {
    .toast.svelte-1uha8ag {
        top: 126px
    }
}

@keyframes svelte-1uha8ag-drop {
    0% {
        opacity: 0;
        transform: translate(-50%)translateY(-10px)
    }
}

.duel-go.svelte-1uha8ag {
    z-index: 64;
    pointer-events: none;
    font-family: var(--font-display);
    color: #ffe066;
    -webkit-text-stroke: 3px #5e3d20;
    text-shadow: 0 6px #00000059;
    place-items: center;
    font-size: clamp(64px, 16vw, 160px);
    animation: 1.1s ease-out forwards svelte-1uha8ag-duel-go-pop;
    display: grid;
    position: fixed;
    inset: 0
}

@keyframes svelte-1uha8ag-duel-go-pop {
    0% {
        opacity: 0;
        transform: scale(.4)
    }

    25% {
        opacity: 1;
        transform: scale(1.15)
    }

    70% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(1.05)
    }
}

.duel-shake.svelte-1uha8ag {
    animation: .55s cubic-bezier(.36, .07, .19, .97) both svelte-1uha8ag-duel-shake
}

@keyframes svelte-1uha8ag-duel-shake {

    10%,
    90% {
        transform: translate(-2px, 1px)
    }

    20%,
    80% {
        transform: translate(4px, -2px)
    }

    30%,
    50%,
    70% {
        transform: translate(-7px, 2px)
    }

    40%,
    60% {
        transform: translate(7px, -1px)
    }
}

.kicked-overlay.svelte-1uha8ag {
    z-index: 60;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: #060e0ad1;
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: flex;
    position: fixed;
    inset: 0
}

.kicked-card.svelte-1uha8ag {
    text-align: center;
    max-width: 340px;
    image-rendering: pixelated;
    color: var(--ink, #3a2716);
    font-family: var(--font-ui);
    border-style: solid;
    border-width: 17px 21px 28px 25px;
    border-image: url("") 68 84 111 100 fill/17px 21px 28px 25px;
    padding: 16px 24px 14px
}

.kicked-card.svelte-1uha8ag h2:where(.svelte-1uha8ag) {
    font-family: var(--font-display);
    letter-spacing: .5px;
    margin: 0 0 10px;
    font-size: 20px
}

.kicked-card.svelte-1uha8ag p:where(.svelte-1uha8ag) {
    color: #5e3d20;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5
}

.attack-btn.svelte-1uha8ag {
    left: 50%;
    bottom: calc(14px + var(--sab, 0px));
    z-index: 15;
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: url("") 0 0/100% 100%;
    border: 0;
    padding: 0;
    position: fixed;
    transform: translate(-50%)
}

.attack-btn.svelte-1uha8ag:hover {
    filter: brightness(1.09)
}

.attack-btn.svelte-1uha8ag:active {
    background-image: url("")
}

.attack-btn.svelte-1uha8ag .atk-icon:where(.svelte-1uha8ag) {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
    pointer-events: none;
    position: absolute;
    top: 12px;
    left: 18px
}

.attack-btn.svelte-1uha8ag:active .atk-icon:where(.svelte-1uha8ag) {
    transform: translateY(2px)
}

.attack-btn.svelte-1uha8ag .atk-icon.swing:where(.svelte-1uha8ag) {
    animation: .26s ease-out svelte-1uha8ag-atk-swing
}

@keyframes svelte-1uha8ag-atk-swing {
    0% {
        transform: rotate(0)scale(1)
    }

    30% {
        transform: rotate(-14deg)scale(1.12)
    }

    60% {
        transform: rotate(9deg)scale(1.04)
    }

    to {
        transform: rotate(0)scale(1)
    }
}

@media (width<=700px) {
    .attack-btn.svelte-1uha8ag {
        width: 96px;
        height: 96px;
        bottom: calc(18px + var(--sab, 0px))
    }

    .attack-btn.svelte-1uha8ag .atk-icon:where(.svelte-1uha8ag) {
        width: 48px;
        height: 48px;
        top: 15px;
        left: 24px
    }
}

#kiwi-widget {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

#kiwi-widget.show {
    display: block;
}

:root {
    --media-url-3: url(images/image_a4054fd161ce371e81b315587bdb9d7ee33ea16a.png);
    --media-url-9: url(images/image_1a661f8a4cd99f85469d40d877484a4888fa752b.png);
    --media-url-10: url(images/image_4b6934c894f70e2df4dcf70d9bba3ccd6d592e69.png);
}