@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lilita One', cursive, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #111111;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    overflow: hidden;
}

/* --- BASE MOBILE APP CONTAINER --- */
.app-container {
    width: 100%;
    max-width: 420px;
    height: 100dvh;
    background-color: #1a1a1a;
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Sidebar hidden entirely on Mobile */
.desktop-sidebar {
    display: none;
}

.main-content {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- VIEW ANIMATIONS --- */
.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    opacity: 0;
    transform: translateX(40px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.view.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

h1 {
    font-size: 48px;
    letter-spacing: 1px;
}

/* --- CHAT VIEW --- */
.chat-log {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    padding-top: 10px;
}

.system-msg { color: #666666; font-style: italic; font-size: 15px; }

.chat-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 80%;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.5px;
}
.chat-bubble.user { background-color: #2b2b2b; align-self: flex-end; }
.chat-bubble.carl { color: #e0e0e0; align-self: flex-start; }
.chat-image { max-width: 100%; border-radius: 8px; margin-top: 8px; display: block; }

/* --- UNIVERSAL INPUT PILL --- */
.input-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.input-container {
    background-color: #262626;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 16px;
    margin-bottom: 12px;
    border: 1px solid #333;
    width: 100%;
    max-width: 800px;
}

.upload-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-container input {
    background: transparent;
    border: none;
    color: #fff;
    flex: 1;
    font-size: 16px;
    outline: none;
    letter-spacing: 0.5px;
}
.input-container input::placeholder { color: #888; }

.send-btn {
    background-color: #9333ea;
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- MOBILE BOTTOM NAV --- */
.pc-only { display: none !important; }
.mobile-only { display: flex; }

.bottom-nav {
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.nav-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-item img {
    width: 55px;
    height: 50px;
    object-fit: contain;
    opacity: 0.5;
    transition: transform 0.2s;
}

.nav-item:active img { transform: scale(0.9); }
.nav-divider { width: 3px; height: 28px; background-color: #333333; border-radius: 2px; }

.copyright {
    text-align: center;
    color: #444;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-top: auto;
}

/* --- CALL VIEW --- */
#view-call {
    padding: 24px 20px 12px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.call-header { text-align: center; margin-top: 45px; }
.call-header h1 { font-size: 62px; letter-spacing: 1px; line-height: 1; }
#call-timer { color: #888888; font-size: 28px; margin-top: 6px; letter-spacing: 1px; }
.call-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: auto; margin-bottom: 12px; }
.call-option-row { display: flex; gap: 14px; width: 100%; justify-content: center; }
.call-img-btn { width: 48%; max-width: 175px; height: auto; object-fit: contain; cursor: pointer; transition: transform 0.1s, opacity 0.2s; }
.call-img-btn:active { transform: scale(0.96); }
.call-img-btn-end { width: 100%; max-width: 364px; height: auto; object-fit: contain; cursor: pointer; transition: transform 0.1s; }
.call-img-btn-end:active { transform: scale(0.96); }
#view-call .copyright { margin-top: 0 !important; }

/* --- GAMES VIEW --- */
.games-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #666; }
.back-btn { background: transparent; border: 3px solid #333; border-radius: 50%; width: 40px; height: 40px; color: #555; font-size: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; }
.difficulty-picker { display: flex; align-items: center; justify-content: space-between; background-color: #262626; border: 1px solid #333; border-radius: 12px; padding: 8px 14px; margin-top: 10px; font-size: 16px; }
.difficulty-picker label { color: #aaa; }
.difficulty-dropdown { background-color: #1a1a1a; color: #84cc16; border: 1px solid #84cc16; border-radius: 8px; padding: 6px 12px; font-size: 15px; outline: none; cursor: pointer; }
.games-scroll-box { flex: 1; overflow-y: auto; margin: 15px 0; padding-right: 5px; min-height: 0; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-items: center; padding-bottom: 10px; }
.game-card-img { width: 100%; max-width: 150px; height: 115px; object-fit: contain; cursor: pointer; border-radius: 15px; border: 2px solid transparent; transition: transform 0.2s; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.game-card-img:active { transform: scale(0.95); }
.game-card-img.selected { border-color: #84cc16; }
.play-btn { background-color: #84cc16; color: #ffffff; border: none; border-radius: 16px; padding: 16px; font-size: 42px; cursor: pointer; margin-bottom: 15px; width: 100%; transition: transform 0.1s; }
.play-btn:active { transform: scale(0.97); }
.games-footer { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* --- MINIGAMES (Inherited base styling) --- */
.bj-arena { display: flex; flex-direction: column; gap: 20px; background-color: #262626; border: 1px solid #333; border-radius: 16px; padding: 20px 10px; margin: auto 0; }
.bj-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bj-label { font-size: 18px; color: #aaa; }
.bj-hands-container { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; width: 100%; }
.bj-single-hand { display: flex; flex-direction: column; align-items: center; padding: 8px; border: 2px solid transparent; border-radius: 12px; transition: border-color 0.2s, background-color 0.2s; }
.bj-single-hand.active { border-color: #84cc16; background-color: rgba(132, 204, 22, 0.1); }
.bj-hand-score { font-size: 14px; color: #aaa; margin-bottom: 6px; }
.bj-hand-result { font-size: 16px; font-weight: bold; margin-top: 8px; text-align: center; }
.bj-hand-result.win { color: #84cc16; } .bj-hand-result.lose { color: #ef4444; } .bj-hand-result.push { color: #aaa; }
.bj-cards { display: flex; gap: -15px; justify-content: center; min-height: 70px; }
.bj-card { background-color: #fff; border-radius: 6px; width: 50px; height: 70px; display: flex; justify-content: center; align-items: center; font-size: 22px; font-family: Arial, sans-serif; font-weight: bold; color: #111; box-shadow: -2px 2px 6px rgba(0,0,0,0.4); margin-left: -15px; }
.bj-card:first-child { margin-left: 0; }
.bj-card.red { color: #ef4444; }
.bj-card.hidden { background: repeating-linear-gradient(45deg, #9333ea, #9333ea 10px, #7e22ce 10px, #7e22ce 20px); color: transparent; }
.bj-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.bj-controls-row { display: flex; gap: 10px; width: 100%; }
.bj-btn { flex: 1; border: none; border-radius: 12px; padding: 12px; font-size: 20px; cursor: pointer; color: #fff; transition: transform 0.1s, opacity 0.2s; }
.bj-btn:active { transform: scale(0.95); } .bj-btn:disabled { opacity: 0.3; pointer-events: none; }
.bj-btn.hit { background-color: #84cc16; color: #111; } .bj-btn.stand { background-color: #ef4444; } .bj-btn.double { background-color: #3b82f6; } .bj-btn.split { background-color: #9333ea; }
.rps-arena { display: flex; align-items: center; justify-content: space-between; background-color: #262626; border: 1px solid #333; border-radius: 16px; padding: 24px 15px; margin: auto 0; width: 100%; }
.rps-fighter { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 35%; }
.rps-label { font-size: 20px; color: #aaa; }
.rps-img-wrapper { width: 100%; display: flex; justify-content: center; }
.rps-hand-img { width: 100%; max-width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5)); }
.rps-vs { font-size: 32px; color: #aaa; }
.rps-controls { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.rps-choice-btn { flex: 1; background-color: #262626; border: 2px solid #333; border-radius: 12px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: #fff; transition: transform 0.1s, border-color 0.1s; }
.rps-choice-btn:active { transform: scale(0.95); border-color: #84cc16; }
.rps-choice-btn img { width: 45px; height: 45px; object-fit: contain; }
.rps-choice-btn span { font-size: 15px; }
.game-status { text-align: center; font-size: 24px; margin: 10px 0; color: #fff; }
.ttt-board { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px; justify-content: center; align-content: center; margin: auto; }
.ttt-cell { width: 80px; height: 80px; background-color: #262626; border: 2px solid #333333; border-radius: 12px; font-size: 48px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: transparent; transition: background-color 0.1s; }
.ttt-cell:active { background-color: #2c2c2c; } .ttt-cell.x { color: #ff4757; border-color: #ff4757; } .ttt-cell.o { color: #1e90ff; border-color: #1e90ff; }
.reset-btn { background-color: #262626; color: #888; border: 1px solid #333; border-radius: 10px; padding: 12px; font-size: 18px; cursor: pointer; margin-bottom: 10px; }
.hm-drawing-container { display: flex; justify-content: center; margin-bottom: 10px; }
.hm-word { text-align: center; font-size: 28px; letter-spacing: 6px; margin-bottom: 20px; color: #fff; }
.hm-keyboard { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.hm-row { display: flex; justify-content: center; gap: 5px; }
.hm-key { background-color: #262626; border: 2px solid #333333; border-radius: 6px; color: white; font-size: 16px; padding: 10px 0; width: 32px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.hm-key:active { background-color: #333; } .hm-key:disabled { cursor: not-allowed; } .hm-key.correct { background-color: #84cc16; border-color: #84cc16; color: #111; } .hm-key.wrong { background-color: #111111; border-color: #111111; color: #444; }
.c4-container { background-color: #0a0a0a; border-radius: 12px; padding: 10px; margin: 0 auto; width: fit-content; }
.c4-drop-row { display: grid; grid-template-columns: repeat(7, 38px); gap: 5px; margin-bottom: 8px; justify-content: center; }
.c4-drop-btn { background-color: #262626; color: #ff4757; font-size: 18px; border: 2px solid #333; border-radius: 6px; height: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.c4-board { display: grid; grid-template-columns: repeat(7, 38px); grid-template-rows: repeat(6, 38px); gap: 5px; justify-content: center; }
.c4-cell { background-color: #1a1a1a; border-radius: 50%; width: 38px; height: 38px; box-shadow: inset 0 0 6px rgba(0,0,0,0.8); }
.c4-cell.red { background-color: #ff4757; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); } .c4-cell.yellow { background-color: #eccc68; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); }
.bs-container { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: auto 0; }
.bs-controls-row { display: flex; gap: 10px; margin-bottom: 4px; }
.bs-action-btn { background-color: #27272a; color: #e4e4e7; border: 1px solid #3f3f46; border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.bs-action-btn.confirm { background-color: #84cc16; color: #18181b; border-color: #84cc16; }
.bs-label { font-size: 13px; color: #71717a; text-align: center; letter-spacing: 0.5px; }
.bs-grid { display: grid; grid-template-columns: repeat(6, 36px); grid-template-rows: repeat(6, 36px); gap: 2px; justify-content: center; background-color: #18181b; padding: 4px; border-radius: 8px; border: 1px solid #27272a; }
.bs-cell { background-color: #27272a; border-radius: 4px; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; }
.bs-cell.preview { border: 2px dashed #38bdf8; background-color: rgba(56, 189, 248, 0.15); }
.bs-cell.ship { background-color: #3f3f46; border: 1px solid #52525b; }
.bs-cell.hit { background-color: #ef4444; }
.bs-cell.miss::after { content: ""; width: 8px; height: 8px; background-color: #52525b; border-radius: 50%; }
.chk-container { display: flex; justify-content: center; margin: auto 0; }
.chk-board { display: grid; grid-template-columns: repeat(8, 38px); grid-template-rows: repeat(8, 38px); border: 1px solid #27272a; border-radius: 8px; overflow: hidden; }
.chk-tile { width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; }
.chk-tile.light { background-color: #27272a; } .chk-tile.dark { background-color: #18181b; }
.chk-tile.selected { outline: 2px solid #84cc16; outline-offset: -2px; }
.chk-tile.target::after { content: ""; width: 10px; height: 10px; background-color: #84cc16; border-radius: 50%; opacity: 0.8; z-index: 3; }
.chk-tile.jump-capture { outline: 2px dashed #ef4444; outline-offset: -2px; background-color: rgba(239, 68, 68, 0.15); }
.chk-piece { width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; }
.chk-piece.red { background-color: #ef4444; } .chk-piece.black { background-color: #3f3f46; }
.chk-piece.king::after { content: ""; position: absolute; top: -6px; width: 16px; height: 6px; border-radius: 50%; border: 2px solid #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); }
.chs-container { display: flex; justify-content: center; margin: auto 0; }
.chs-board { display: grid; grid-template-columns: repeat(8, 38px); grid-template-rows: repeat(8, 38px); border: 1px solid #27272a; border-radius: 8px; overflow: hidden; }
.chs-tile { width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; }
.chs-tile.light { background-color: #52525b; } .chs-tile.dark { background-color: #27272a; }
.chs-tile.selected { outline: 2px solid #84cc16; outline-offset: -2px; }
.chs-tile.target::after { content: ""; width: 10px; height: 10px; background-color: #84cc16; border-radius: 50%; opacity: 0.8; position: absolute; z-index: 3; }
.chs-tile.target-capture { outline: 2px solid #84cc16; outline-offset: -2px; background-color: rgba(132, 204, 22, 0.25); }
.chs-tile.target-capture::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; background-color: #84cc16; border-radius: 50%; z-index: 4; }
.chs-piece { width: 85%; height: 85%; object-fit: contain; user-select: none; z-index: 2; pointer-events: none; filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5)); }

/* ========================================================================= */
/* --- DESKTOP UI OVERRIDES --- */
/* ========================================================================= */
@media (min-width: 768px) {
    body { background-color: #1a1a1a; }

    .app-container {
        max-width: 100%;
        border-radius: 0;
    }
    
    .mobile-only { display: none !important; }

    /* SIDEBAR STYLES */
    .desktop-sidebar {
        display: flex;
        flex-direction: column;
        background-color: #212121;
        height: 100%;
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border-right: 1px solid #333;
        flex-shrink: 0;
    }

    .desktop-sidebar.expanded { width: 280px; }
    .desktop-sidebar.collapsed { width: 75px; }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        height: 80px;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
    }

    .sidebar-logo-watermark {
        height: 36px;
        object-fit: contain;
        transition: opacity 0.2s;
    }

    .desktop-sidebar.collapsed .sidebar-logo-watermark {
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-toggle {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        margin-top: 10px;
    }
    
    .full-nav-items {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pc-nav-btn {
        width: 100%;
        max-width: 150px;
        height: auto;
        object-fit: contain;
        object-position: left;
        cursor: pointer;
        transition: transform 0.2s ease, opacity 0.2s ease;
        margin-left: 0;
    }
    .pc-nav-btn:hover {
        transform: scale(1.04) translateX(4px);
        opacity: 0.9;
    }
    .pc-nav-btn:active { transform: scale(0.97); }
    
    .mini-nav-items {
        display: none;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .mini-nav-btn {
        width: 36px;
        height: 36px;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .mini-nav-btn:hover {
        transform: scale(1.15);
    }

    .desktop-sidebar.expanded .mini-nav-items { display: none; }
    .desktop-sidebar.collapsed .full-nav-items { display: none; }
    .desktop-sidebar.collapsed .mini-nav-items { display: flex; }
    .desktop-sidebar.collapsed .sidebar-nav { align-items: center; padding: 0; }
    .desktop-sidebar.collapsed .sidebar-header { justify-content: center; }
    .desktop-sidebar.collapsed .sidebar-brand { display: none; }

    .sidebar-chats {
        flex: 1;
        padding: 20px;
        margin-top: 20px;
        overflow-y: auto;
    }

    .chats-header {
        font-size: 20px;
        color: #fff;
        margin-bottom: 12px;
        white-space: nowrap;
    }

    .desktop-sidebar.collapsed .sidebar-chats { display: none; }

    .saved-chat-item {
        color: #e0e0e0;
        font-size: 16px;
        padding: 8px 0;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.1s;
    }
    .saved-chat-item:hover { color: #9333ea; }

    .sidebar-footer {
        padding: 20px;
        display: flex;
        align-items: center;
        margin-top: auto;
    }
    .settings-icon-img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .settings-icon-img:hover {
        transform: rotate(90deg) scale(1.1);
    }
    .desktop-sidebar.collapsed .sidebar-footer { justify-content: center; }

    /* DESKTOP CONTENT RE-ALIGNMENT */
    #view-chat { justify-content: flex-end; padding-bottom: 15px; }
    .chat-log { 
        max-width: 800px; 
        margin: 0 auto; 
        width: 100%; 
        flex: none; 
        height: calc(100% - 70px); 
        overflow-y: auto; 
    }
    
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        justify-content: center;
        align-content: center;
        max-width: 400px;
        margin: 0 auto;
    }
    .game-card-img { height: 110px; max-width: 100%; }
    
    .play-btn { max-width: 300px; }
    
    #view-call { justify-content: center; padding-bottom: 40px; }
    .call-controls { margin-top: 60px; }
}