.room-page #bot-room {
    background-image: url('/images/my-bot/rooms/room_blank.jpg');
}

.room-heading {
    position: absolute;
    top: 3cqw;
    left: 3cqw;
    color: #2b2028;
}

.room-heading h1 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.room-status {
    position: absolute;
    top: 45%;
    left: 5%;
    right: 5%;
    margin: 0;
    color: #584652;
    font-size: 1rem;
    text-align: center;
}

.room-page[data-room-mode="room"] :is(
    #bot-room > .bot-ui-overlay,
    #bot-room > .game-view-overlay,
    #mining-status-panel,
    #mining-message,
    #projectile-layer,
    #bot-poo,
    #bot-speech-bubble,
    .bot-customize-link,
    #admin-bot-tools
),
.room-page[data-room-mode="buddy"] .room-mode-only,
.room-page [hidden] {
    display: none !important;
}

.room-page[data-room-mode="room"] #bot-room > .bot-entity-wrapper {
    position: absolute !important;
    width: 18cqw !important;
    left: 78%;
    bottom: 24%;
    transform: translateX(-50%);
}

.room-page #bot-collision {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    touch-action: manipulation;
}

.room-page #bot-collision:focus-visible {
    outline: 3px solid #d93f7d;
    outline-offset: 4px;
}

.room-page[data-room-mode="room"] #bot-collision {
    top: -18.5%;
    left: 0;
    width: 100%;
    height: 118.5%;
    min-width: 44px;
    min-height: 44px;
}

.room-page[data-room-mode="room"] .bot-sprite-group.dead #bot-collision {
    display: block;
}

.room-buddy-name {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 26cqw;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fff8e9;
    color: #2b2028;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.room-back-button {
    position: absolute;
    left: 3cqw;
    bottom: 2cqw;
    z-index: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 2px solid #2b2028;
    border-radius: 6px;
    background: #fff8e9;
    color: #2b2028;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.room-back-button:hover {
    background: #f6b3cf;
}

.room-back-button:focus-visible {
    outline: 3px solid #d93f7d;
    outline-offset: 3px;
}

.room-page #bot-mine-btn {
    top: calc(55% + 9.5cqw);
}

.room-page #bot-room:has(> :is(
    #bot-inventory-overlay,
    #bot-equipment-overlay,
    #bot-rename-overlay,
    #mining-confirm-overlay
)[style*="display: flex"]) :is(.room-back-button, .bot-customize-link) {
    display: none;
}

@media (max-width: 560px) {
    .room-heading h1 { font-size: 1.1rem; }
    .room-page[data-room-mode="room"] #bot-room > .bot-entity-wrapper {
        width: 23cqw !important;
    }
    .room-buddy-name { font-size: 0.7rem; }
    .room-back-button {
        min-height: 36px;
        padding: 6px 8px;
        font-size: 0.75rem;
        gap: 5px;
    }
}

@media (max-width: 360px) {
    .room-back-button { left: 14cqw; min-width: 36px; justify-content: center; }
    .room-back-label { display: none; }
}

/* Colorful site-style interface */
.room-page {
    --room-ink: #2b2028;
    --room-paper: #fff8e9;
    --room-pink: #e84f8d;
    --room-yellow: #ffd04d;
    --room-blue: #8bdadd;
    --room-mint: #9dd7bd;
    --room-lavender: #c2afea;
    background: #f6dbe7;
}

.room-page * {
    letter-spacing: 0;
}

.room-page .game-page-wrapper {
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
}

.room-page .bot-game-view {
    --text-color: var(--room-ink);
    --nav-text-color: #584652;
    --card-bg: var(--room-paper);
    --border-color: var(--room-ink);
    --accent-pink: var(--room-pink);
    --accent-yellow: var(--room-yellow);
    --accent-blue: var(--room-blue);
    --button-bg: var(--room-pink);
    --button-bg-hover: #cf3777;
    --button-secondary-bg: var(--room-yellow);
    --button-secondary-bg-hover: #ffe17d;
    width: min(100%, 1180px);
    border: 2px solid var(--room-ink);
    border-radius: 8px;
    background: var(--room-paper);
    box-shadow: 10px 12px 0 var(--room-ink);
    color: var(--room-ink);
    color-scheme: light;
}

.room-page .bot-game-view.maximized {
    width: 100vw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--room-ink);
}

.room-page .room-heading {
    top: 2.2cqw;
    left: 2.2cqw;
    padding: 0.65cqw 1cqw;
    border: 0.16cqw solid var(--room-ink);
    border-radius: 0.45cqw;
    background: var(--room-blue);
    box-shadow: 0.32cqw 0.38cqw 0 var(--room-ink);
}

.room-page .room-heading h1 {
    color: var(--room-ink);
    font-size: clamp(1rem, 2.2cqw, 2rem);
}

.room-page .room-buddy-name {
    padding: 0.38cqw 0.75cqw;
    border: 0.12cqw solid var(--room-ink);
    border-radius: 0.38cqw;
    background: var(--room-yellow);
    color: var(--room-ink);
    box-shadow: 0.2cqw 0.24cqw 0 var(--room-ink);
}

.room-page .name-overlay,
.room-page .stat-overlay {
    border: 0.16cqw solid var(--room-ink);
    border-radius: 0.5cqw;
    background: var(--room-paper);
    color: var(--room-ink);
    box-shadow: 0.34cqw 0.4cqw 0 var(--room-ink);
    backdrop-filter: none;
}

.room-page .name-overlay {
    background: var(--room-blue);
}

.room-page .name-overlay #bot-name-display {
    color: var(--room-ink) !important;
}

.room-page .bot-ui-overlay.top-left .stat-overlay:nth-child(2) {
    background: #f6b3cf;
}

.room-page .bot-ui-overlay.top-left .stat-overlay:nth-child(3) {
    background: var(--room-mint);
}

.room-page .bot-ui-overlay.top-right .stat-overlay {
    background: var(--room-yellow);
}

.room-page .stat-bar,
.room-page .inventory-stat-bar {
    border: 0.1cqw solid var(--room-ink);
    background: rgba(255, 248, 233, 0.72);
}

.room-page .stat-val-text,
.room-page .days-alive-counter,
.room-page .inventory-stat-value {
    color: var(--room-ink);
    opacity: 1;
    text-shadow: none;
}

.room-page .happiness-status-pill {
    border: 0.1cqw solid var(--room-ink);
    color: var(--room-ink);
    box-shadow: 0.14cqw 0.17cqw 0 var(--room-ink);
}

.room-page .happiness-status-pill.happy { background: #ff8fc1; }
.room-page .happiness-status-pill.satisfied { background: var(--room-mint); }
.room-page .happiness-status-pill.sad { background: var(--room-lavender); }
.room-page .happiness-status-pill.so-sad { background: #9d88cf; }

.room-page .bot-name-edit-button,
.room-page .icon-button,
.room-page #bot-maximize-btn {
    border: 0.16cqw solid var(--room-ink);
    border-radius: 0.48cqw;
    background: var(--room-yellow);
    color: var(--room-ink);
    box-shadow: 0.3cqw 0.35cqw 0 var(--room-ink);
    backdrop-filter: none;
}

.room-page .bot-name-edit-button {
    background: var(--room-paper);
}

.room-page #give-goodie-btn {
    background: #f6b3cf;
}

.room-page #bot-mine-btn {
    background: var(--room-mint);
}

.room-page .icon-button:hover,
.room-page .bot-name-edit-button:hover,
.room-page .icon-button:focus-visible,
.room-page .bot-name-edit-button:focus-visible {
    border-color: var(--room-ink);
    background: #ffe17d;
    color: var(--room-ink);
    transform: translate(-0.12cqw, -0.12cqw);
    box-shadow: 0.44cqw 0.5cqw 0 var(--room-ink);
}

.room-page .bot-ui-overlay.middle-left.icon-button:hover,
.room-page .bot-ui-overlay.middle-left-secondary.icon-button:hover,
.room-page .bot-ui-overlay.middle-left-tertiary.icon-button:hover {
    transform: translate(-0.12cqw, calc(-50% - 0.12cqw));
}

.room-page .equipment-slots-overlay {
    gap: 0.8cqw;
}

.room-page .equipment-slot-button {
    border: 0.14cqw solid var(--room-ink);
    border-radius: 0.48cqw;
    background: var(--room-paper);
    color: var(--room-ink);
    box-shadow: 0.28cqw 0.33cqw 0 var(--room-ink);
    backdrop-filter: none;
}

.room-page .equipment-slot-button:nth-child(2n) {
    background: var(--room-lavender);
}

.room-page .equipment-slot-button:hover,
.room-page .equipment-slot-button:focus-visible {
    border-color: var(--room-ink);
    background: var(--room-yellow);
    box-shadow: 0.4cqw 0.46cqw 0 var(--room-ink);
}

.room-page .equipment-slot-label,
.room-page .equipment-slot-durability {
    color: var(--room-ink);
}

.room-page .equipment-slot-empty {
    opacity: 0.72;
    filter: none;
}

.room-page .room-back-button,
.room-page .bot-customize-link {
    border: 0.16cqw solid var(--room-ink);
    border-radius: 0.45cqw;
    background: var(--room-yellow);
    color: var(--room-ink);
    box-shadow: 0.32cqw 0.38cqw 0 var(--room-ink);
    backdrop-filter: none;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.room-page .bot-customize-link {
    background: var(--room-pink);
    color: var(--room-paper);
}

.room-page .room-back-button:hover,
.room-page .room-back-button:focus-visible,
.room-page .bot-customize-link:hover,
.room-page .bot-customize-link:focus-visible {
    background: #ffe17d;
    color: var(--room-ink);
    transform: translate(-0.12cqw, -0.12cqw);
    box-shadow: 0.48cqw 0.54cqw 0 var(--room-ink);
}

.room-page .bot-customize-link:hover,
.room-page .bot-customize-link:focus-visible {
    transform: translate(calc(-50% - 0.12cqw), -0.12cqw);
}

.room-page .game-view-overlay {
    background: rgba(43, 32, 40, 0.7);
    backdrop-filter: blur(4px);
}

.room-page .overlay-content {
    padding: 2.6cqw;
    background: var(--room-blue) !important;
    color: var(--room-ink);
}

.room-page .birth-overlay-content {
    background: var(--room-lavender) !important;
}

.room-page .menu-title,
.room-page .birth-picker-layout h4,
.room-page .skin-picker-layout h4,
.room-page .birth-topbar p,
.room-page .equipment-picker-note {
    color: var(--room-ink);
}

.room-page .menu-title {
    font-family: Georgia, 'Times New Roman', serif;
}

.room-page .inventory-stat-pill {
    border: 0.12cqw solid var(--room-ink);
    border-radius: 0.42cqw;
    background: var(--room-paper);
    box-shadow: 0.2cqw 0.24cqw 0 var(--room-ink);
}

.room-page .goodie-item-compact,
.room-page .bot-skin-card {
    border: 0.14cqw solid var(--room-ink);
    border-radius: 0.5cqw;
    background: var(--room-paper);
    color: var(--room-ink);
    box-shadow: 0.28cqw 0.34cqw 0 var(--room-ink);
}

.room-page .goodie-item-compact:nth-child(3n + 2),
.room-page .bot-skin-card:nth-child(3n + 2) {
    background: #f6b3cf;
}

.room-page .goodie-item-compact:nth-child(3n),
.room-page .bot-skin-card:nth-child(3n) {
    background: var(--room-mint);
}

.room-page .goodie-item-compact:hover,
.room-page .bot-skin-card:hover,
.room-page .goodie-item-compact:focus-visible,
.room-page .bot-skin-card:focus-visible {
    border-color: var(--room-ink);
    background: var(--room-yellow);
    transform: translate(-0.1cqw, -0.1cqw);
    box-shadow: 0.4cqw 0.46cqw 0 var(--room-ink);
}

.room-page .goodie-name-compact,
.room-page .goodie-stats-brief,
.room-page .inventory-effect-value,
.room-page .inventory-durability-value {
    color: var(--room-ink);
    opacity: 1;
}

.room-page .inventory-equipment-badge {
    border-color: var(--room-ink);
    background: var(--room-lavender);
    color: var(--room-ink);
}

.room-page .inventory-qty-btn,
.room-page .inventory-qty-input,
.room-page .rename-bot-card input,
.room-page .birth-name-box input {
    border: 0.14cqw solid var(--room-ink);
    border-radius: 0.38cqw;
    background: var(--room-paper);
    color: var(--room-ink);
}

.room-page .inventory-qty-btn {
    background: var(--room-yellow);
}

.room-page .mining-confirm-overlay {
    background: rgba(43, 32, 40, 0.7);
    backdrop-filter: blur(4px);
}

.room-page .mining-confirm-card {
    border: 0.18cqw solid var(--room-ink);
    border-radius: 0.65cqw;
    background: var(--room-lavender);
    color: var(--room-ink);
    box-shadow: 0.7cqw 0.8cqw 0 var(--room-ink);
}

.room-page .mining-confirm-card h3,
.room-page .mining-confirm-card p,
.room-page .rename-bot-card label {
    color: var(--room-ink);
}

.room-page .mining-status-panel,
.room-page .mining-message,
.room-page .bot-shutdown-message,
.room-page .bot-sick-message {
    border: 0.16cqw solid var(--room-ink);
    border-radius: 0.5cqw;
    background: var(--room-yellow);
    color: var(--room-ink);
    box-shadow: 0.34cqw 0.4cqw 0 var(--room-ink);
    backdrop-filter: none;
}

.room-page .mining-status-title,
.room-page .mining-status-meta,
.room-page .mining-status-earned,
.room-page .mining-drain-note,
.room-page .bot-shutdown-message strong,
.room-page .bot-shutdown-message span,
.room-page .bot-sick-message strong,
.room-page .bot-sick-message span {
    color: var(--room-ink);
}

.room-page .mining-drain-note {
    border: 0.1cqw solid var(--room-ink);
    background: var(--room-paper);
}

.room-page .bot-bubble {
    border: 0.15cqw solid var(--room-ink);
    border-radius: 0.5cqw;
    background: var(--room-paper);
    color: var(--room-ink);
    box-shadow: 0.34cqw 0.4cqw 0 var(--room-ink);
}

.room-page .bot-bubble::after {
    border-color: var(--room-ink) transparent transparent transparent;
}

.room-page .bot-game-view .nav-cta-button,
.room-page .my-bot-shop-panel .nav-cta-button {
    border: 0.16cqw solid var(--room-ink);
    border-radius: 0.48cqw;
    background: var(--room-pink);
    color: var(--room-paper) !important;
    box-shadow: 0.34cqw 0.4cqw 0 var(--room-ink);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.room-page .bot-game-view .nav-cta-button.secondary {
    background: var(--room-yellow);
    color: var(--room-ink) !important;
}

.room-page .bot-game-view .nav-cta-button:hover,
.room-page .bot-game-view .nav-cta-button:focus-visible,
.room-page .my-bot-shop-panel .nav-cta-button:hover,
.room-page .my-bot-shop-panel .nav-cta-button:focus-visible {
    background: #cf3777;
    transform: translate(-0.12cqw, -0.12cqw);
    box-shadow: 0.48cqw 0.54cqw 0 var(--room-ink);
}

.room-page .bot-game-view .nav-cta-button.secondary:hover,
.room-page .bot-game-view .nav-cta-button.secondary:focus-visible {
    background: #ffe17d;
}

.room-page .my-bot-shop-panel {
    width: min(100%, 1180px);
    margin-top: 28px;
    border: 2px solid var(--room-ink);
    border-radius: 8px;
    background: var(--room-mint);
    box-shadow: 8px 9px 0 var(--room-ink);
}

.room-page .my-bot-shop-panel h2,
.room-page .my-bot-shop-panel p {
    color: var(--room-ink);
}

.room-page .my-bot-shop-panel h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
}

.room-page #admin-bot-tools {
    width: min(100%, 1180px);
    border: 2px solid var(--room-ink) !important;
    border-radius: 8px;
    background: var(--room-lavender);
    box-shadow: 7px 8px 0 var(--room-ink);
}

@media (max-width: 1062px) {
    .room-page .bot-game-view {
        border: 2px solid var(--room-ink);
        border-radius: 8px;
        box-shadow: 6px 7px 0 var(--room-ink);
    }

    .room-page .my-bot-shop-panel {
        width: calc(100% - 16px);
    }
}

@media (max-width: 620px) {
    .room-page main.page-container {
        padding: 0 8px !important;
    }

    .room-page .game-page-wrapper {
        padding: 0 !important;
    }

    .room-page .my-bot-shop-panel {
        padding: 14px;
    }

    .room-page .my-bot-shop-copy {
        align-items: flex-start;
    }
}