.octane-room-widgets {
    pointer-events: none;
}

.no-resize {
    resize: none !important;
    min-width: 340px !important;
    max-width: 340px !important;
    min-height: 430px !important;
    max-height: 430px !important;
}

.octane-widget-custom-stack-height {
    width: 320px;
    min-height: 185px;

    .octane-stack-height-arrow {
        width: 19px;
        min-height: 20px;
        height: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.octane-room-widget-toner {
    width: 190px;
}

.octane-room-widget-background-color {
    width: 314px;

    .bgcolor-widget-content {
        gap: 10px;
        padding: 8px;
    }

    .bgcolor-widget-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 154px;
        padding: 10px;
        border: 1px solid #9c9c9c;
        border-radius: 2px;
        background: #f3f3f1;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .bgcolor-widget-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .bgcolor-widget-info {
        color: #111;
        font-size: 12px;
        line-height: 1.2;
    }

    .bgcolor-widget-preview {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border: 1px solid #b4b4a3;
        background: #c8ce8c;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .bgcolor-widget-slider-group {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .bgcolor-widget-label {
        color: #000;
        font-size: 12px;
        line-height: 1;
    }

    .bgcolor-widget-slider-shell {
        position: relative;
        width: 100%;
        padding: 2px 0;
    }

    .bgcolor-widget-slider-shell::before {
        content: '';
        position: absolute;
        left: 4px;
        right: 4px;
        top: 50%;
        height: 8px;
        transform: translateY(-50%);
        background:
            repeating-linear-gradient(
                to right,
                transparent 0 9px,
                #1a1a1a 9px 10px
            );
        opacity: 0.75;
        pointer-events: none;
    }

    .bgcolor-widget-slider-shell .octane-slider-wrapper {
        position: relative;
        z-index: 1;
        gap: 0;
    }

    .bgcolor-widget-slider-shell .octane-slider {
        height: 16px;
    }

    .bgcolor-widget-slider-track {
        height: 2px !important;
        border: 0 !important;
        border-radius: 999px;
        box-shadow: none !important;

        &.track-0,
        &.track-1 {
            background: #000 !important;
        }
    }

    .bgcolor-widget-slider-thumb {
        width: 11px !important;
        height: 18px !important;
        margin-top: -1px;
        border-radius: 4px !important;
        border: 1px solid #345b72 !important;
        background: linear-gradient(180deg, #6ba7c7 0%, #4a87a9 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }

    .bgcolor-widget-actions {
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    .bgcolor-widget-button {
        min-width: 74px;
        color: #000 !important;
        border-color: #7f7f7f !important;
        background: linear-gradient(180deg, #f7f7f7 0%, #d9d9d9 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 0 rgba(0, 0, 0, 0.15) !important;
    }

    .bgcolor-widget-button:hover {
        background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 100%) !important;
        border-color: #767676 !important;
    }
}

.octane-room-widget-dimmer {
    width: min(275px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);

    .dimmer-banner {
        width: 56px;
        height: 79px;
        background: url('@/assets/images/room-widgets/dimmer-widget/dimmer_banner.png')
            center no-repeat;
    }

    .color-swatch {
        height: 30px;
        border: 2px solid #FFF;
        box-shadow: inset 3px 3px rgba(0, 0, 0, 0.2);

        &.active {
            box-shadow: none;
        }
    }
}

.octane-widget-crafting {
    width: min(500px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: min(300px, calc(100vh - 16px));
    min-height: 0;
    max-height: calc(100vh - 16px);

    .crafting-widget-layout {
        min-height: 0;
    }

    .crafting-widget-pane {
        flex: 1 1 0;
    }
}

.octane-widget-exchange-credit {
    width: min(375px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: min(150px, calc(100vh - 16px));
    min-height: 0;
    max-height: calc(100vh - 16px);

    .exchange-image {
        background-image: url('@/assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
        width: 103px;
        height: 103px;
    }
}

/* AIR stories_image_widget at a 320px photo: ExternalImageWidget.drawImage geometry. */
.octane-photo-viewer {
    position: relative;
    width: 490px;
    height: 464px;
    color: #ffffff;
    /* id_regular / id_link_regular: Ubuntu 11, white, no filters. */
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    text-shadow: none;
    user-select: none;
    image-rendering: var(--octane-pixel-art, pixelated);

    button {
        padding: 0;
        border: 0;
        background-color: transparent;
        cursor: pointer;
    }
}

.octane-photo-viewer__panel {
    position: absolute;
    inset: 0;
    border: 6px solid transparent;
    border-image: url('@/assets/images/camera/photo-viewer/panel.png') 6 fill / 6px stretch;
    opacity: 0.65;
}

/* drawImage paints the photo black at four 1px offsets, leaving the corner pixels clear. */
.octane-photo-viewer__photo {
    position: absolute;
    top: 71px;
    left: 84px;
    width: 322px;
    height: 322px;
    background:
        linear-gradient(#000000, #000000) 1px 0 / 320px 322px no-repeat,
        linear-gradient(#000000, #000000) 0 1px / 322px 320px no-repeat;

    img {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 320px;
        height: 320px;
    }
}

/* updateWindowPosition centres the arrows on the panel, or on the stage when the panel is taller. */
.octane-photo-viewer__browse {
    position: absolute;
    top: min(200px, calc(50vh - 32px));
    width: 64px;
    height: 64px;
    background: url('@/assets/images/camera/photo-viewer/browse-ffwd.png') 0 0 / 64px 64px no-repeat !important;
}

.octane-photo-viewer__browse--previous {
    left: 10px;
    transform: scaleX(-1);
}

.octane-photo-viewer__browse--next {
    left: 416px;
}

.octane-photo-viewer__date,
.octane-photo-viewer__creator {
    position: absolute;
    padding: 4px;
    color: #ffffff;
    font: inherit;
    line-height: 16px;
    white-space: nowrap;
}

.octane-photo-viewer__date {
    top: 393px;
    left: 87px;
}

/* senderName is right-aligned in a 129px region ending 3px inside the photo. */
.octane-photo-viewer__creator {
    top: 395px;
    right: 87px;
    text-decoration: underline;
}

/* Caption `m` under the date line, at most two lines across the photo width. */
.octane-photo-viewer__caption {
    position: absolute;
    top: 419px;
    left: 88px;
    width: 314px;
    max-height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 16px;
    overflow-wrap: anywhere;
    user-select: text;
}

/* buttonContainer boxsizer: padding 8/5, spacing 5, pinned to the panel's top right. */
.octane-photo-viewer__buttons {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 5px 8px 0;
}

.octane-photo-viewer__button {
    position: relative;
    width: 19px;
    height: 20px;
    border: 5px solid transparent !important;
    border-image: url('@/assets/images/camera/photo-viewer/report-button-default.png') 5 fill / 5px stretch !important;

    &:hover {
        border-image-source: url('@/assets/images/camera/photo-viewer/report-button-hover.png') !important;
    }

    &:active {
        border-image-source: url('@/assets/images/camera/photo-viewer/report-button-pressed.png') !important;
    }

    &::after {
        position: absolute;
        content: '';
    }
}

/* reportButtonContainer is 20px wide around the 19px button. */
.octane-photo-viewer__button--report {
    margin-right: 1px;

    &::after {
        top: -1px;
        left: -1px;
        width: 11px;
        height: 13px;
        background: url('@/assets/images/camera/photo-viewer/flag.png') no-repeat;
    }
}

/* common_trashcan_small with the #icon etching: 0x48000000 one pixel above. */
.octane-photo-viewer__button--remove::after {
    top: -1px;
    left: 0;
    width: 9px;
    height: 10px;
    background: url('@/assets/images/camera/photo-viewer/trashcan.png') no-repeat;
    filter: drop-shadow(0 -1px 0 rgb(0 0 0 / 0.282));
}

.octane-photo-viewer__close {
    width: 19px;
    height: 20px;
    background: url('@/assets/images/habbo-skin/slices/close-3-default.png') 0 0 / 19px 20px no-repeat !important;

    &:hover {
        background-image: url('@/assets/images/habbo-skin/slices/close-3-hover.png') !important;
    }

    &:active {
        background-image: url('@/assets/images/habbo-skin/slices/close-3-pressed.png') !important;
    }
}

.octane-gift-opening {
    width: min(340px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: none;
}

.octane-mannequin {
    width: 300px;

    .mannequin-preview {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 83px;
        height: 130px;
        background-image: url('@/assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
        overflow: hidden;

        .avatar-image {
            background-position: unset;
            top: -8px;
        }
    }
}

.octane-stickie {
    position: relative;
    width: 185px;
    height: 178px;
    top: 25px;
    left: 25px;
    padding: 1px;
    pointer-events: all;

    &.stickie-plain {
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25));

        &::before {
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 2px;
            background-color: var(--stickie-color);
            background-image:
                linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 18px, rgba(255, 255, 255, 0.18) 19px, rgba(255, 255, 255, 0) 32px),
                linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.05) 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
        }

        &::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 22px;
            height: 22px;
            background-color: var(--stickie-color);
            background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(255, 255, 255, 0.2) 100%);
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        .stickie-context {
            font-family: 'Segoe Print', 'Bradley Hand', 'Lucida Handwriting', 'Comic Sans MS', cursive;
            line-height: 1.4;

            textarea {
                font-style: normal;
            }
        }
    }

    .stickie-header {
        width: 183px;
        height: 18px;
        padding: 0 7px;

        .header-trash,
        .header-close {
            cursor: pointer;
        }

        .stickie-color {
            width: 10px;
            height: 10px;
            cursor: pointer;
            border: 1px solid rgba(0, 0, 0, 0.4);
        }
    }

    .stickie-context {
        width: 183px;
        height: 145px;
        padding: 2px 7px;
        font-size: 12px;
        color: #000;

        .context-text {
            width: 100%;
            height: 100%;
            padding: 0;
            overflow-wrap: break-word;
            white-space: break-spaces;
            overflow-y: auto;
        }

        textarea {
            background: transparent;
            border: 0;
            outline: none;
            box-shadow: none;
            resize: none;
            font-family: inherit;
            font-size: inherit;
            font-style: italic;

            &:active {
                border: 0;
                outline: none;
                box-shadow: none;
            }
        }
    }
}

.octane-stickie-image {
    &.stickie-christmas {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-christmas.png');
    }

    &.stickie-shakesp {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-shakesp.png');
    }

    &.stickie-dreams {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-dreams.png');
    }

    &.stickie-heart {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-heart.png');
    }

    &.stickie-juninas {
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-juninas.png');
    }

    &.stickie-close {
        width: 10px;
        height: 10px;
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-close.png');
    }

    &.stickie-trash {
        width: 9px;
        height: 10px;
        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-trash.png');
    }
}

.octane-engraving-lock {
    width: 300px;

    .engraving-lock-stage-1 {
        width: 31px;
        height: 39px;
        background-position: -380px -43px;
        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
    }

    .engraving-lock-stage-2 {
        width: 36px;
        height: 43px;
        background-position: -375px 0px;
        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
    }
}

/* lovelock_engraving_xml.xml — 375×210, absolute layout */
.octane-engraving-lock-view {
    position: relative;
    width: 375px;
    height: 210px;
    background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 411px 630px;
    image-rendering: var(--octane-pixel-art, pixelated);
    color: #59224a;
    font-family: UbuntuCondensed, Ubuntu, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    text-shadow: 0 1px 0 #ffffff;
    user-select: none;
}

.octane-engraving-lock-view.engraving-lock-3 {
    background-position: 0 -210px;
    color: #614110;
}

.octane-engraving-lock-view.engraving-lock-4 {
    background-position: 0 -420px;
    color: #f1dcc8;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.octane-engraving-lock-view .engraving-lock-close {
    position: absolute;
    top: 33px;
    right: 24px;
    width: 21px;
    height: 17px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.octane-engraving-lock-view .engraving-lock-avatar {
    position: absolute;
    top: 7px;
    width: 70px;
    height: 115px;
    overflow: hidden;
    pointer-events: none;
}

.octane-engraving-lock-view .engraving-lock-avatar .avatar-image {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 90px !important;
    height: 130px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    image-rendering: var(--octane-pixel-art, pixelated);
}

.octane-engraving-lock-view .engraving-lock-avatar--left {
    left: 115px;
}

.octane-engraving-lock-view .engraving-lock-avatar--right {
    left: 186px;
}

.octane-engraving-lock-view .engraving-lock-header,
.octane-engraving-lock-view .engraving-lock-date,
.octane-engraving-lock-view .engraving-lock-name {
    position: absolute;
    display: block;
    height: 17px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.octane-engraving-lock-view .engraving-lock-header {
    top: 126px;
    left: 82px;
    width: 217px;
    text-align: center;
}

.octane-engraving-lock-view .engraving-lock-date {
    top: 151px;
    left: 143px;
    width: 97px;
    text-align: center;
}

.octane-engraving-lock-view .engraving-lock-name {
    top: 175px;
}

.octane-engraving-lock-view .engraving-lock-name--left {
    left: 19px;
    width: 150px;
    text-align: right;
}

.octane-engraving-lock-view .engraving-lock-name--right {
    left: 199px;
    width: 87px;
    text-align: left;
}

.octane-widget-high-score {
    border-radius: 0.3rem;
    border: solid 1px #000;

    .header {
        border-image-source: none !important;
        background-color: #40403e;
        border-radius: 0.3rem 0.3rem 0 0;
    }

    .align-right {
        text-align: right;
    }

    .section-border {
        border: solid 1px #8c8a88;
    }

    .high-score-content {
        height: 100%;
        background-color: #000;
        border-radius: 0.3rem;
    }

    .score-footer {
        color: #9a9896;
        font-weight: bold;
    }
}

.youtube-tv-widget {
    width: 600px;
    height: 380px;

    .youtube-video-container {
        .empty-video {
            background-color: black;
            color: white;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .youtubeContainer {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin-bottom: 50px;
        }

        .youtubeContainer iframe {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    .playlist-container {
        overflow-y: auto;
        margin-right: -10px;
        color: black;
        height: 100%;

        .playlist-controls {
            width: 100%;
            .icon {
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }

        .playlist-grid {
            height: 100%;
            width: 100%;
        }
    }
}

.octane-playlist-editor-widget {
    width: min(625px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: min(440px, calc(100vh - 16px));
    min-height: 0;
    max-height: calc(100vh - 16px);

    .playlist-editor-layout {
        min-height: 0;
    }

    .playlist-editor-pane {
        flex: 1 1 0;
    }

    img.my-music {
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: 0;
    }

    img.playlist-img {
        position: absolute;
        top: -4px;
        left: 0;
        z-index: 0;
    }

    img.get-more,
    img.add-songs {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }

    .playlist-bottom {
        z-index: 3;
    }

    .move-disk {
        width: 22px;
        height: 18px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
    }

    .disk-2,
    .disk-image {
        background-blend-mode: multiply;
    }

    .disk-2 {
        width: 38px;
        height: 38px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
        background-position: center;
        background-repeat: no-repeat;

        &.playing-song {
            background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
        }

        &.selected-song {
            background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
            transform: scaleX(-1);
        }

        &:not(.playing-song):not(.selected-song) {
            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
        }
    }

    .pause-song {
        width: 18px;
        height: 20px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/pause.png');
    }

    .pause-btn {
        width: 16px;
        height: 16px;

        background-image: url('@/assets/images/room-widgets/playlist-editor/pause-btn.png');
    }

    .music-note {
        width: 38px;
        height: 38px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
    }

    .preview-song {
        width: 16px;
        height: 16px;
        background-image: url('@/assets/images/room-widgets/playlist-editor/preview.png');
    }

    .layout-grid-item {
        min-height: 106px;
        min-width: 95px;
        position: relative;

        .disk-image {
            background: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
            height: 76px;
            width: 76px;
        }
    }
}

@media (max-width: 640px), (max-height: 520px) {
    .octane-playlist-editor-widget {
        .playlist-editor-layout {
            flex-direction: column;
        }

        .playlist-editor-pane {
            width: 100%;
            min-height: 0;
        }
    }
}

.octane-mysterybox-dialog {
    width: min(375px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: min(210px, calc(100vh - 16px));
    min-height: 0;
    max-height: calc(100vh - 16px);

    .prize-container {
        height: 80px;
        width: 81px;
        background-image: url('@/assets/images/prize/prize_background.png');
        background-repeat: no-repeat;
        background-position: center;
    }
}

.octane-mysterytrophy-dialog {
    .mysterytrophy-dialog-top {
        width: 100%;
        min-height: 120px;
        border-radius: 2px;
        background-color: #0E3F52;

        .mysterytrophy-image {
            width: 80px;
            height: 84px;
            position: relative;
            background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png');
            background-repeat: no-repeat;
        }

        .mysterytrophy-text-big {
            font-size: 16px;
        }
    }

    .mysterytrophy-dialog-bottom {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 120px;
        border-radius: 2px;
        background-color: #E9E9E1;

        .input-mysterytrophy-dialog {
            width: min(380px, 100%);
            min-width: 0;
            border: 1px solid black;

            .input-mysterytrophy {
                width: 100%;
                min-width: 0;
                border: 0;
                outline: 0;
            }

            .mysterytrophy-pencil-image {
                width: 16px;
                height: 16px;
                position: relative;
                background-image: url('@/assets/images/infostand/pencil-icon.png');
                background-repeat: no-repeat;
            }
        }

        .text-decoration {
            text-decoration: underline;
        }
    }
}

@media (max-width: 560px), (max-height: 460px) {
    .octane-widget-crafting {
        .crafting-widget-layout {
            flex-direction: column;
            overflow: auto;
        }

        .crafting-widget-pane {
            width: 100%;
            min-height: 0;
        }
    }

    .octane-widget-exchange-credit {
        height: auto;
    }
}

/* Official ecotronbox_card (257 x 114): gift-card background, date at 12/9, 39 px preview at 7/38,
   message at 49/39 and the buttons on the bottom row at y 90. */
.octane-ecotronbox-card {
    position: relative;
    width: 257px;
    height: 114px;
    background-color: #f3f1e5;
    background-repeat: no-repeat;
    border-radius: 6px;
    pointer-events: all;
    cursor: move;
    font-size: 11px;
    color: #000;

    .octane-ecotronbox-date {
        position: absolute;
        left: 12px;
        top: 9px;
        width: 104px;
        height: 12px;
        line-height: 12px;
        overflow: hidden;
    }

    .octane-ecotronbox-preview {
        position: absolute;
        left: 7px;
        top: 38px;
        width: 39px;
        height: 39px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            max-width: 39px;
            max-height: 39px;
            image-rendering: pixelated;
        }
    }

    .octane-ecotronbox-msg {
        position: absolute;
        left: 49px;
        top: 39px;
        width: 139px;
        height: 45px;
        overflow: hidden;
        word-wrap: break-word;
    }

    .octane-ecotronbox-open,
    .octane-ecotronbox-close {
        position: absolute;
        top: 90px;
        height: 22px;
        padding: 0 8px;
        border: 1px solid #000;
        border-radius: 4px;
        background: linear-gradient(#fff, #d6d6d6);
        font-size: 11px;
        cursor: pointer;
    }

    .octane-ecotronbox-open {
        left: 47px;
        width: 148px;
        font-weight: bold;
    }

    .octane-ecotronbox-close {
        left: 200px;
        width: 50px;
    }
}

/* Official niko_trophy (428 x 325): dark 169 px band (0xff36494e) with the 93 x 112 trophy at 26/30 and
   the 249 px text column at 153, then the 320 x 92 app store banner. */
.octane-niko-trophy {
    width: 428px;

    .octane-niko-trophy-content {
        padding: 0;
    }

    .octane-niko-trophy-band {
        display: flex;
        gap: 34px;
        height: 169px;
        padding: 28px 26px 0;
        background: #36494e;
        color: #fff;
    }

    .octane-niko-trophy-preview {
        width: 93px;
        height: 112px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .octane-niko-trophy-texts {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 249px;
    }

    .octane-niko-trophy-description {
        min-height: 64px;
    }

    .octane-niko-trophy-link {
        align-self: flex-start;
        padding: 0;
        border: 0;
        background: none;
        color: #9fd8ff;
        text-decoration: underline;
        cursor: pointer;
    }

    .octane-niko-trophy-store {
        align-self: center;
        width: 320px;
        height: 92px;
        margin: 14px 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;

        img {
            width: 320px;
            height: 92px;
        }
    }
}