/* Dibujaton: retro-pixel event window. Loaded after the legacy Paint styling. */
html.paint98-route .dibujaton-intro-overlay {
    background: rgba(17, 24, 21, 0.64) !important;
}

html.paint98-route .dibujaton-intro-panel {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.8fr) minmax(275px, 0.76fr) minmax(330px, 1fr) !important;
    grid-template-rows: 48px minmax(350px, auto) minmax(132px, auto) auto auto auto !important;
    width: min(1160px, calc(100vw - 38px)) !important;
    max-height: calc(100dvh - 38px) !important;
    overflow: auto !important;
    padding: 5px !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    outline: 2px solid #18201c !important;
    background: repeating-linear-gradient(90deg, #fff000 0 28px, #f8dd00 28px 56px) !important;
    color: #0b100d !important;
    font-family: "Courier New", Consolas, monospace !important;
    box-shadow: 9px 10px 0 rgba(0, 0, 0, 0.35), 0 28px 82px rgba(0, 0, 0, 0.44) !important;
}

html.paint98-route .dibujaton-window-bar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 43px !important;
    padding: 0 7px 0 13px !important;
    border: 2px solid #0e1455 !important;
    background: #061ca4 !important;
    color: #ffffff !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}

html.paint98-route .dibujaton-window-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html.paint98-route .dibujaton-window-controls {
    display: flex !important;
    gap: 5px !important;
    margin-left: auto !important;
}

html.paint98-route .dibujaton-window-controls i {
    display: grid !important;
    width: 29px !important;
    height: 29px !important;
    border: 2px solid #17201b !important;
    background: #deded9 !important;
    color: #121712 !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.22rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    place-items: center !important;
    box-shadow: inset 1px 1px #ffffff, inset -2px -2px #868983 !important;
}

html.paint98-route .dibujaton-intro-head {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    padding: 34px 25px 18px 30px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

html.paint98-route .dibujaton-intro-eyebrow {
    display: none !important;
}

html.paint98-route .dibujaton-intro-panel h2 {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 6px 5px 0 !important;
    color: #050605 !important;
    font-family: Impact, "Arial Black", sans-serif !important;
    font-size: clamp(3.15rem, 4.4vw, 4.25rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.9 !important;
    text-transform: uppercase !important;
    text-shadow: 3px 3px 0 #ffffff !important;
}

html.paint98-route .dibujaton-intro-panel h2::after {
    display: none !important;
}

html.paint98-route .dibujaton-intro-lead {
    display: inline-block !important;
    max-width: 410px !important;
    margin: 30px 0 13px !important;
    padding: 10px 13px 9px !important;
    background: #060606 !important;
    color: #ffffff !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.015em !important;
    line-height: 1.28 !important;
    text-transform: uppercase !important;
}

html.paint98-route .dibujaton-intro-lead strong {
    color: #fff000 !important;
}

html.paint98-route .dibujaton-intro-head p:not(.dibujaton-intro-lead) {
    max-width: 380px !important;
    margin: 0 !important;
    color: #111512 !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.42 !important;
}

html.paint98-route .dibujaton-intro-preview {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid #111411 !important;
    border-radius: 0 !important;
    background: #fffdf3 !important;
    box-shadow: none !important;
}

html.paint98-route .dibujaton-intro-preview::before {
    position: absolute !important;
    z-index: 0 !important;
    right: 8% !important;
    bottom: 6% !important;
    left: 8% !important;
    height: 25% !important;
    border: 2px solid #898d8a !important;
    background: #d8d9d8 !important;
    box-shadow: 0 12px 0 #bec1bf !important;
    clip-path: polygon(8% 0, 92% 0, 100% 23%, 100% 100%, 0 100%, 0 23%) !important;
    content: "" !important;
}

html.paint98-route .dibujaton-intro-preview-heading {
    display: none !important;
    position: absolute !important;
    top: 21px !important;
    right: 5px !important;
    left: 5px !important;
    z-index: 3 !important;
    justify-content: space-between !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #131914 !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.64rem !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

html.paint98-route .dibujaton-intro-preview-heading strong {
    display: none !important;
}

html.paint98-route .dibujaton-intro-preview-heading span {
    margin-left: auto !important;
    color: #1b231e !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
}

html.paint98-route #dibujaton-intro-preview-canvas {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
}

html.paint98-route .dibujaton-prize-copy {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end !important;
    margin: 0 12px 22px 17px !important;
    padding: 17px 18px 16px !important;
    border: 3px solid #0d110e !important;
    background: #f7f5e8 !important;
    color: #101510 !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.38 !important;
    box-shadow: 5px 5px 0 rgba(16, 20, 17, 0.3) !important;
}

html.paint98-route .dibujaton-button-guide {
    display: none !important;
}

html.paint98-route .dibujaton-intro-steps {
    grid-column: 3 !important;
    grid-row: 2 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 28px 12px 20px 10px !important;
    border: 0 !important;
    background: transparent !important;
}

html.paint98-route .dibujaton-intro-step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 44px 64px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 11px 14px 11px 8px !important;
    border: 3px solid #0d110e !important;
    border-radius: 0 !important;
    background: #f7f5e8 !important;
    box-shadow: 4px 4px 0 rgba(16, 20, 17, 0.28) !important;
}

html.paint98-route .dibujaton-intro-step-number {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #061ca4 !important;
    color: #ffffff !important;
    font-family: Impact, "Arial Black", sans-serif !important;
    font-size: 1.65rem !important;
    line-height: 42px !important;
}

html.paint98-route .dibujaton-intro-step-icon {
    display: grid !important;
    width: 59px !important;
    height: 58px !important;
    color: #080b09 !important;
    font-family: Arial, sans-serif !important;
    font-size: 3.2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    place-items: center !important;
}

html.paint98-route .dibujaton-intro-step:nth-child(2) .dibujaton-intro-step-icon {
    transform: rotate(-18deg) !important;
}

html.paint98-route .dibujaton-intro-step strong {
    display: block !important;
    margin: 0 0 5px !important;
    color: #0b100d !important;
    font-family: Impact, "Arial Black", sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 0.95 !important;
    text-transform: uppercase !important;
}

html.paint98-route .dibujaton-intro-step small {
    display: block !important;
    color: #151a16 !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

html.paint98-route .dibujaton-intro-note {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin: 0 12px 9px !important;
    padding: 10px 13px !important;
    border: 2px solid #e4e5e2 !important;
    border-radius: 0 !important;
    background: #dfe0df !important;
    color: #242b26 !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    box-shadow: inset 2px 2px #ffffff !important;
}

html.paint98-route .dibujaton-intro-note::before {
    margin-right: 12px !important;
    color: #f4d800 !important;
    content: "◆" !important;
    font-size: 1rem !important;
}

html.paint98-route .dibujaton-terms {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin: 0 20px !important;
    color: #1d231f !important;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

html.paint98-route .dibujaton-credit {
    display: block !important;
    margin-top: 6px !important;
    color: #4c544d !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

html.paint98-route .dibujaton-intro-actions {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    justify-content: flex-end !important;
    gap: 13px !important;
    margin: 11px 11px 7px !important;
    padding: 13px 0 0 !important;
    border-top: 2px solid #0d110e !important;
}

html.paint98-route .dibujaton-intro-actions .tool-btn,
html.paint98-route .dibujaton-intro-actions .tool-btn.active {
    min-width: 205px !important;
    min-height: 51px !important;
    padding: 11px 18px !important;
    border: 3px solid #0d110e !important;
    border-radius: 0 !important;
    background: #d9dcda !important;
    color: #0d110e !important;
    box-shadow: inset 2px 2px #ffffff, 3px 3px 0 #535851 !important;
    font-family: Impact, "Arial Black", sans-serif !important;
    font-size: 1.04rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
}

html.paint98-route .dibujaton-intro-actions .tool-btn.active {
    min-width: 266px !important;
    background: #fff000 !important;
    box-shadow: inset 2px 2px #fffac4, 4px 4px 0 #111512 !important;
}

@media (max-width: 1100px) {
    html.paint98-route .dibujaton-intro-panel {
        grid-template-columns: minmax(0, 0.94fr) minmax(300px, 0.9fr) !important;
        grid-template-rows: 44px auto minmax(320px, auto) auto auto auto !important;
    }

    html.paint98-route .dibujaton-intro-head {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 345px !important;
        padding: 28px 22px 18px !important;
    }

    html.paint98-route .dibujaton-intro-panel h2 {
        max-width: 100% !important;
        font-size: clamp(3.2rem, 5.8vw, 4.25rem) !important;
    }

    html.paint98-route .dibujaton-intro-preview {
        grid-column: 2 !important;
        grid-row: 2 / span 2 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        align-self: start !important;
    }

    html.paint98-route #dibujaton-intro-preview-canvas {
        height: 100% !important;
    }

    html.paint98-route .dibujaton-intro-preview::before {
        right: 10% !important;
        bottom: 7% !important;
        left: 10% !important;
        height: 25% !important;
    }

    html.paint98-route .dibujaton-prize-copy {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    html.paint98-route .dibujaton-intro-steps {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(120px, 1fr)) !important;
        gap: 10px !important;
        padding: 12px 0 6px !important;
    }

    html.paint98-route .dibujaton-terms {
        grid-row: 5 !important;
    }

    html.paint98-route .dibujaton-intro-actions {
        grid-row: 6 !important;
    }
}

@media (max-width: 640px) {
    html.paint98-route .dibujaton-intro-panel {
        display: block !important;
        width: min(540px, calc(100vw - 16px)) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 4px !important;
        overflow: auto !important;
    }

    html.paint98-route .dibujaton-window-bar {
        min-height: 39px !important;
        padding-left: 8px !important;
        font-size: 0.7rem !important;
    }

    html.paint98-route .dibujaton-window-controls i {
        width: 24px !important;
        height: 24px !important;
        font-size: 1rem !important;
    }

    html.paint98-route .dibujaton-intro-head {
        min-height: 292px !important;
        padding: 24px 20px 19px !important;
    }

    html.paint98-route .dibujaton-intro-panel h2 {
        max-width: 100% !important;
        font-size: clamp(2.85rem, 11.5vw, 3.6rem) !important;
        line-height: 0.86 !important;
        text-shadow: 4px 4px #ffffff !important;
    }

    html.paint98-route .dibujaton-intro-lead {
        margin-top: 24px !important;
        font-size: 0.91rem !important;
    }

    html.paint98-route .dibujaton-intro-preview {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 13px !important;
    }

    html.paint98-route #dibujaton-intro-preview-canvas {
        height: 100% !important;
    }

    html.paint98-route .dibujaton-prize-copy {
        margin: 0 13px 13px !important;
        padding: 15px !important;
        font-size: 0.69rem !important;
    }

    html.paint98-route .dibujaton-intro-steps {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        gap: 8px !important;
        padding: 12px 13px !important;
    }

    html.paint98-route .dibujaton-intro-step {
        min-height: 103px !important;
        grid-template-columns: 38px 54px minmax(0, 1fr) !important;
        padding: 9px 11px 9px 7px !important;
    }

    html.paint98-route .dibujaton-intro-step-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.42rem !important;
        line-height: 36px !important;
    }

    html.paint98-route .dibujaton-intro-step-icon {
        width: 48px !important;
        height: 46px !important;
        font-size: 2.55rem !important;
    }

    html.paint98-route .dibujaton-intro-step strong {
        font-size: 0.98rem !important;
    }

    html.paint98-route .dibujaton-intro-note {
        margin: 0 13px 9px !important;
    }

    html.paint98-route .dibujaton-terms {
        display: block !important;
        margin: 0 15px !important;
    }

    html.paint98-route .dibujaton-intro-actions {
        justify-content: stretch !important;
        margin: 12px 13px 9px !important;
    }

    html.paint98-route .dibujaton-intro-actions .tool-btn,
    html.paint98-route .dibujaton-intro-actions .tool-btn.active {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 7px 5px !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.02em !important;
    }
}