/* --- MY BOT PAGE STYLES --- */

.bot-game-view {
    --text-color: #f7edf5;
    --nav-text-color: #e3d3df;
    --card-bg: rgba(36, 20, 35, 0.86);
    --border-color: rgba(255, 218, 239, 0.14);
    --accent-pink: #ff74ad;
    --accent-yellow: #ffd166;
    --accent-blue: #79d2ea;
    --button-bg: #e84f8d;
    --button-bg-hover: #c93273;
    --button-secondary-bg: #ffc947;
    --button-secondary-bg-hover: #efb329;
    --button-secondary-text: #2b2028;
    --shadow-color: rgba(0, 0, 0, 0.44);
    width: 80%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border: 5px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    background: #2c3e50;
    color: var(--text-color);
    color-scheme: dark;
    /* Prevent highlighting */
    user-select: none;
    -webkit-user-select: none;
    /* Enable container queries for proportional element scaling */
    container-type: inline-size;
    /* Transition only specific layout properties to avoid snap-to-center glitch */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.5s ease;
}

.bot-game-view *,
.bot-game-view *::before,
.bot-game-view *::after {
    box-sizing: border-box;
}

/* Prevent image dragging inside game views */
.bot-game-view img {
    -webkit-user-drag: none;
}

.my-bot-shop-panel {
    width: 80%;
    margin: 18px auto 0;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(245, 191, 69, 0.16), rgba(233, 122, 155, 0.1)),
        var(--card-bg);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.my-bot-shop-copy {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.my-bot-shop-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    object-fit: contain;
}

.my-bot-shop-panel h2 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.15rem;
    line-height: 1.1;
}

.my-bot-shop-panel p {
    margin: 4px 0 0;
    color: var(--nav-text-color);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
}

.bot-game-view.maximized {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    z-index: 99999;
    border: none;
    border-radius: 0;
    background: #000; /* Letterbox/Pillarbox color */
    display: flex;
    justify-content: center;
    align-items: center;
}

.bot-game-view.maximized .bot-room-background {
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio (9/16 = 0.5625) */
    max-height: 100vh;
    max-width: 177.77vh; /* 16:9 aspect ratio (16/9 = 1.7777) */
    position: relative;
    border-radius: 0;
    margin: auto !important; /* Force instant centering */
    flex-shrink: 0;
}

/* UI Overlays */
.bot-ui-overlay, #bot-maximize-btn {
    position: absolute;
    z-index: 200; /* Higher than bot layers */
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.bot-game-view.ui-hidden .bot-ui-overlay, 
.bot-game-view.ui-hidden #bot-maximize-btn,
.bot-game-view.ui-hidden .shop-nav-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

.bot-ui-overlay.top-left {
    top: 3cqw;
    left: 3cqw;
    display: flex;
    flex-direction: column;
    gap: 1cqw;
}

.name-overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 1cqw 2cqw;
    border-radius: 2cqw;
    backdrop-filter: blur(5px);
    border: 0.1cqw solid rgba(255, 255, 255, 0.1);
    align-self: flex-start;
}

#bot-maximize-btn {
    bottom: 1.5cqw;
    right: 1.5cqw;
    z-index: 1000; /* Above everything */
}

.stat-overlay {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    background: rgba(0, 0, 0, 0.5);
    padding: 1cqw 1.8cqw;
    border-radius: 3cqw;
    backdrop-filter: blur(5px);
    border: 0.1cqw solid rgba(255, 255, 255, 0.1);
}

.stat-label {
    font-size: 3.2cqw;
}

.stat-bar {
    width: 12cqw;
    height: 1cqw;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.5cqw;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.stat-fill.happiness { background: #ff69b4; }
.stat-fill.energy { background: #00bfff; }

.icon-button {
    background: rgba(0, 0, 0, 0.5);
    border: 0.1cqw solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 5cqw;
    height: 5cqw;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2cqw;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    padding: 0; /* Clear any inherited padding */
}

.icon-button:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.days-alive-counter {
    font-weight: 900;
    font-size: 2cqw;
    color: #fff;
    text-shadow: 0 0.2cqw 0.4cqw rgba(0,0,0,0.3);
}

#give-goodie-btn {
    width: 8cqw;
    height: 8cqw;
    font-size: 4cqw;
}

.bot-ui-overlay.top-right {
    top: 3cqw;
    right: 3cqw;
}

.bot-ui-overlay.middle-left {
    top: 65%;
    left: 3cqw;
    transform: translateY(-50%);
}

.bot-ui-overlay.middle-left-secondary {
    top: calc(65% + 9.5cqw);
    left: 3cqw;
    transform: translateY(-50%);
}

.skin-button {
    width: 8cqw;
    height: 8cqw;
    border-radius: 50%;
    font-size: 3.6cqw;
    font-weight: 900;
}

/* Overlays inside the 16:9 view */
.game-view-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    overflow: hidden; /* Prevent parent scrollbars */
}

.menu-title {
    color: var(--accent-pink);
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 3.5cqw;
    text-align: center;
}

#bot-naming-overlay {
    z-index: 700; /* Highest priority */
}

.birth-overlay-content {
    background: rgba(8, 10, 18, 0.72) !important;
}

.birth-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22cqw, 32cqw);
    gap: 2cqw;
    align-items: end;
    margin-bottom: 2cqw;
}

.birth-topbar p {
    margin: 0.8cqw 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.35cqw;
    font-weight: 800;
}

.birth-title {
    text-align: left;
}

.birth-name-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8cqw;
    align-items: center;
}

.birth-name-box input {
    min-width: 0;
    border-radius: 1.2cqw;
    border: 0.2cqw solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 1.2cqw 1.4cqw;
    font-size: 1.35cqw;
    font-weight: 900;
    text-transform: uppercase;
    outline: none;
}

.birth-name-box input:focus {
    border-color: var(--accent-pink);
}

#bot-naming-error {
    grid-column: 1 / -1;
    min-height: 1.2em;
    color: #ff6666;
    font-size: 1cqw;
    font-weight: 900;
    visibility: hidden;
    text-align: right;
}

.birth-picker-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2cqw;
    flex: 1;
    min-height: 0;
}

.birth-picker-layout section {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.birth-picker-layout h4 {
    margin: 0 0 1cqw;
    color: #fff;
    font-size: 2cqw;
    letter-spacing: 0;
}

/* Disable hover effects for elements with .no-hover class (like the inventory overlay) */
.no-hover:hover {
    transform: none !important;
    box-shadow: none !important;
}

.no-hover:hover::before {
    display: none !important;
    opacity: 0 !important;
}

.overlay-content {
    width: 100%;
    height: 100%;
    padding: 3cqw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-color);
}

.goodie-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14cqw, 1fr));
    gap: 1.5cqw;
    padding-bottom: 2cqw;
    overflow-y: auto; /* Scroll only the grid */
    flex-grow: 1;
    align-content: start; /* Prevent items from stretching vertically */
}

.goodie-item-compact {
    background: rgba(255, 255, 255, 0.05);
    border: 0.2cqw solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5cqw;
    padding: 1cqw;
    text-align: center;
    cursor: pointer;
    height: fit-content; /* Ensure height matches content */
    color: var(--text-color);
}

.goodie-item-compact img {
    width: 6cqw;
    height: 6cqw;
    object-fit: contain;
    margin-bottom: 0.5cqw;
}

.goodie-name-compact {
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.1cqw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-bottom: 0.2cqw;
}

.goodie-stats-brief {
    color: var(--nav-text-color);
    font-size: 0.9cqw;
    font-weight: bold;
    opacity: 0.8;
}

.skin-picker-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2cqw;
    min-height: 0;
    flex: 1;
}

.skin-picker-layout section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.skin-picker-layout h4 {
    margin: 0 0 1cqw;
    color: #fff;
    font-size: 2cqw;
}

.bot-skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11cqw, 1fr));
    gap: 1.2cqw;
    overflow-y: auto;
    align-content: start;
}

.bot-skin-card {
    border: 0.2cqw solid rgba(255, 255, 255, 0.14);
    border-radius: 1.4cqw;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 1cqw;
    cursor: pointer;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bot-skin-card:hover {
    transform: translateY(-0.2cqw);
    border-color: var(--accent-pink);
    background: rgba(255, 105, 180, 0.14);
}

.bot-skin-card.selected {
    border-color: #00bfff;
    background: rgba(0, 191, 255, 0.18);
}

.bot-skin-card img {
    width: 7cqw;
    height: 7cqw;
    object-fit: contain;
    display: block;
    margin: 0 auto 0.6cqw;
}

.bot-skin-name {
    font-size: 1.05cqw;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bot-skin-rarity {
    margin-top: 0.25cqw;
    font-size: 0.8cqw;
    font-weight: 900;
    opacity: 0.72;
}

@media (max-width: 700px) {
    .skin-picker-layout {
        grid-template-columns: 1fr;
    }

    .birth-topbar,
    .birth-picker-layout {
        grid-template-columns: 1fr;
    }

    .birth-name-box {
        grid-template-columns: 1fr;
    }

    #bot-naming-error {
        text-align: left;
    }
}

/* Death State */
.game-view-overlay.death-bg {
    background: rgba(20, 0, 0, 0.85);
    z-index: 500; /* Behind the bot */
    backdrop-filter: blur(5px);
}

.game-view-overlay.death-ui {
    z-index: 600; /* In front of the bot */
    pointer-events: none; /* Let clicks pass to content but not block */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Move from center to top */
    padding-top: 5%; /* Higher up at the top */
}

.death-content {
    text-align: center;
    color: white;
    z-index: 610; /* Highest priority */
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

.death-content.visible {
    pointer-events: auto; /* Enable clicks on the button */
    animation: death-ui-fade 1s ease-out 1.2s forwards; /* Wait for bot fall (0.6s) + head disconnect (0.6s) */
}

@keyframes death-ui-fade {
    from { opacity: 0; transform: translateY(2cqw); }
    to { opacity: 1; transform: translateY(0); }
}

.death-title {
    font-family: 'Georgia', serif;
    font-size: 6cqw;
    color: #ff3333;
    text-shadow: 0 0 2cqw rgba(255, 0, 0, 0.5);
    margin: 0;
}

.death-subtitle {
    font-size: 2cqw;
    opacity: 0.7;
    font-style: italic;
    margin: 0.5cqw 0 0.5cqw 0;
}

/* Projectile and Effects */
.projectile {
    position: absolute;
    width: 10cqw;
    height: 10cqw;
    object-fit: contain;
    z-index: 600;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                left 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                top 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.2s ease-in;
}

.bot-flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00ff00;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    mix-blend-mode: soft-light;
    border-radius: 50%;
    filter: blur(2cqw);
}

@keyframes flash-green {
    0% { opacity: 0; }
    30% { opacity: 0.8; }
    100% { opacity: 0; }
}

.flash-anim {
    animation: flash-green 0.5s ease-out;
}

.bot-room-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Bot stands on the floor */
    padding-bottom: 5%; /* Offset from bottom */
    box-sizing: border-box;
}

.bot-entity-wrapper {
    position: relative;
    z-index: 10;
}

.bot-entity-wrapper.dead-active,
.bot-entity-wrapper:has(.bot-sprite-group.dead) {
    z-index: 510 !important;
}

.bot-sprite-group {
    position: relative;
    width: 100%; /* Relative to the entity wrapper now */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom center; /* Ground the feet */
}

/* Base width moved to wrapper for stability */
.bot-entity-wrapper {
    width: 35cqw;
    aspect-ratio: 1 / 1;
}

.bot-sprite-group.breathing {
    animation: bot-breathe 1.25s ease-in-out infinite;
}

.bot-collision-box {
    position: absolute;
    top: 10%;
    left: 30%;
    width: 40%;
    height: 80%;
    z-index: 100; /* Above images */
    pointer-events: auto;
}

.bot-sprite-group.dead .bot-collision-box {
    display: none; /* Disable interaction when dead */
}

.bot-collision-box.clickable-bot {
    cursor: pointer;
}

/* Apply glow to the whole bot when the collision box is hovered */
.bot-sprite-group:has(.bot-collision-box:hover) {
    filter: drop-shadow(0 0 15px var(--accent-pink));
}

.bot-bubble {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 1.5cqw 2.5cqw;
    border-radius: 2cqw;
    font-weight: 700;
    font-size: 1.6cqw;
    box-shadow: 0 1cqw 2.5cqw rgba(0,0,0,0.2);
    z-index: 100;
    white-space: nowrap;
    animation: bubble-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.bot-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 1cqw;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

@keyframes bubble-pop {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to { opacity: 1; transform: translateX(-50%) scale(1.0); }
}

.bot-sprite-group.dead {
    z-index: 510; /* Above the 500 overlay background */
    transform-origin: center center !important; /* Fall from the center for consistency */
    animation: bot-fall-over 0.6s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}

.bot-sprite-group.dead .bot-layer.head {
    /* Trigger head disconnect slightly before body fall fully completes for a more forceful impact feel */
    animation: head-disconnect 0.3s ease-out 0.4s forwards;
}

@keyframes bot-fall-over {
    0% { transform: rotate(0deg) translate(0, 0); }
    100% { transform: rotate(90deg) translateX(100px) translateY(-100px); }
}

@keyframes head-disconnect {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(0, -110px) rotate(20deg); }
}

.bot-sprite-group:hover:not(.dead) {
    transform: scale(1.02);
}

.bot-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; /* Let clicks pass through if needed */
}

.bot-layer.body {
    z-index: 10;
}

.bot-layer.head {
    z-index: 20;
}

/* Stats Styling */
.stats-grid {
    margin-top: 20px;
}

.stat-item label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#bot-name-display {
    font-size: 2.8cqw;
    font-family: 'Georgia', serif;
    font-weight: 900;
}

.stat-val-text {
    font-size: 1.5cqw;
    font-weight: 900;
    color: var(--text-color);
    opacity: 0.8;
    text-align: center;
}

#vouchers-hud {
    border-color: #ffd700;
}

#voucher-hud-img {
    width: 2.5cqw;
    height: 2.5cqw;
}

#user-vouchers-display {
    font-weight: 900;
    font-size: 1.8cqw;
    color: #ffd700;
}

/* Global Button Scaling in Game Views */
.bot-game-view .nav-cta-button {
    background-color: var(--button-bg);
    color: #ffffff !important;
    font-size: 1.8cqw;
    padding: 1cqw 2cqw;
    border-radius: 2cqw;
    width: fit-content;
    height: auto;
    line-height: 1.2;
}

.bot-game-view .nav-cta-button:hover {
    background-color: var(--button-bg-hover);
}

.bot-game-view .nav-cta-button.secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text) !important;
}

.bot-game-view .nav-cta-button.secondary:hover {
    background-color: var(--button-secondary-bg-hover);
}

.bot-game-view .nav-cta-button.small {
    font-size: 1.4cqw;
    padding: 0.8cqw 1.5cqw;
    border-radius: 1.5cqw;
}

.goodie-owned-compact {
    font-size: 0.9cqw;
    opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 1062px) {
    .game-page-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bot-game-view {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: 5px solid var(--border-color);
        border-bottom: 5px solid var(--border-color);
    }

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

    /* Mobile Text Scaling Overrides */
    #bot-name-display { font-size: 4cqw; }
    .stat-label { font-size: 4.5cqw; }
    .stat-val-text { font-size: 2.2cqw; }
    .stat-bar { height: 1.5cqw; border-radius: 1cqw; }
    #user-vouchers-display { font-size: 2.8cqw; }
    #voucher-hud-img { width: 3.5cqw; height: 3.5cqw; }
    .bot-game-view .nav-cta-button { font-size: 2.5cqw; padding: 1.5cqw 2.5cqw; border-radius: 2.5cqw; }
    .bot-game-view .nav-cta-button.small { font-size: 2cqw; padding: 1.2cqw 1.8cqw; border-radius: 2cqw; }
    .goodie-name-compact { font-size: 1.8cqw; margin-bottom: 0.5cqw; }
    .goodie-stats-brief { font-size: 1.5cqw; }
    .goodie-owned-compact { font-size: 1.5cqw; }
    .menu-title { font-size: 5cqw; }
    .days-alive-counter { font-size: 3cqw; }
    .bot-bubble { font-size: 2.2cqw; padding: 1.5cqw 2.5cqw; }
    .death-title { font-size: 8cqw; }
    .death-subtitle { font-size: 3cqw; }
}

@media (max-width: 620px) {
    .my-bot-shop-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .my-bot-shop-panel .nav-cta-button {
        width: 100%;
        justify-content: center;
    }
}