:root {
    --primary: #FF6B6B;
    --secondary: #4ECDC4;
    --accent: #FFE66D;
    --dark: #2C3E50;
    --light: #F7FFF7;
    --success: #2ECC71;
}

body {
    font-family: 'Comic Neue', cursive;
    background-color: #ffffff;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

/* MAIN CONTAINER (The Stage) */
#app-container {
    width: 95%;
    max-width: 1000px;
    position: relative;
    perspective: 1000px;
}

/* VIEW CARDS (Wizard Steps) */
.view-card {
    background: white;
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    border-bottom: 8px solid rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    animation: slideUp 0.5s ease-out;
}

.view-card.hidden {
    display: none !important;
    opacity: 0;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TYPOGRAPHY */
h1,
h2 {
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px;
    color: var(--dark);
    margin: 0 0 20px 0;
}

h1 {
    font-size: 3.5rem;
    color: var(--primary);
    text-shadow: 2px 2px 0 var(--dark);
}

h2 {
    font-size: 2.2rem;
}

p {
    font-size: 1.3rem;
    color: #555;
}

/* INPUTS */
.neat-input {
    font-family: 'Bangers', cursive;
    font-size: 2rem;
    text-align: center;
    padding: 15px;
    border: 3px solid #ddd;
    border-radius: 15px;
    width: 80%;
    max-width: 300px;
    outline: none;
    transition: border-color 0.3s;
    background: #fdfdfd;
}

.neat-input:focus {
    border-color: var(--primary);
    background: #fff;
}

.code-input {
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* BUTTONS */
.btn-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
}

.btn-big {
    font-family: 'Bangers', cursive;
    font-size: 1.8rem;
    padding: 15px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    min-width: 250px;
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
    top: 0;
}

.btn-big:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-big:active {
    transform: translateY(0);
    top: 3px;
    box-shadow: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border-bottom: 5px solid #c0392b;
}

.btn-secondary {
    background: var(--success);
    color: white;
    border-bottom: 5px solid #27ae60;
}

.btn-back {
    background: #95a5a6;
    color: white;
    margin-top: 20px;
    font-size: 1.2rem;
    padding: 10px 30px;
    border-bottom: 4px solid #7f8c8d;
}

.toggle-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.toggle-option {
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    color: #777;
}

.toggle-option.selected {
    background: var(--accent);
    color: var(--dark);
    border-color: var(--dark);
    transform: scale(1.1);
}

/* GAME UI */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px 30px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.timer-badge {
    background: var(--accent);
    color: var(--dark);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.5rem;
    border: 2px solid var(--dark);
}

.canvas-container {
    background: white;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    cursor: url('pencil-cursor.png'), crosshair;
    /* Fallback */
}

.canvas-toolbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
    background: white;
    padding: 10px;
    border-radius: 50px;
    display: inline-flex;
}

.color-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.color-dot:hover {
    transform: scale(1.2);
}

.color-dot.active {
    border-color: var(--dark);
    transform: scale(1.2);
}

/* CHAT */
.chat-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    height: 150px;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    margin-top: 10px;
    text-align: left;
    border: 2px solid #eee;
    scroll-behavior: smooth;
}

.guess-input-container {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px 0;
    margin-top: 10px;
}

.msg-guess {
    background: #f1f2f6;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 5px 0;
    display: inline-block;
}

.msg-correct {
    background: #dff9fb;
    color: #27ae60;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.msg-chat {
    background: #e3f2fd;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 5px 0;
    display: block;
    border-left: 3px solid #2196f3;
}

.emoji-picker {
    display: flex;
    gap: 5px;
    margin: 5px 0;
    flex-wrap: wrap;
}

.emoji-btn {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
}

.emoji-btn:hover {
    background: #f0f0f0;
    transform: scale(1.1);
}

/* UTILS */
.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.5s;
}

/* WINNER OVERLAY */
.winner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.5s;
}

#confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.winner-card {
    background: white;
    border-radius: 30px;
    padding: 50px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    position: relative;
    z-index: 2;
    animation: scaleUp 0.6s ease-out;
}

.winner-card h1 {
    font-size: 4rem;
    margin: 0 0 20px 0;
    animation: bounce 1s infinite;
}

.winner-name {
    font-family: 'Bangers', cursive;
    font-size: 3rem;
    color: var(--primary);
    margin: 20px 0;
    text-shadow: 2px 2px 0 var(--dark);
}

.final-scores {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    max-height: 200px;
    overflow-y: auto;
}

.score-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 1.2rem;
}

.score-item:last-child {
    border-bottom: none;
}

.score-item.winner-highlight {
    background: linear-gradient(90deg, #FFE66D, #FF6B6B);
    border-radius: 10px;
    font-weight: bold;
    color: var(--dark);
}

@keyframes scaleUp {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================
   MOBILE RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {

    /* Wizard Screens */
    .view-card {
        padding: 20px;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .btn-big {
        min-width: 200px;
        font-size: 1.5rem;
    }

    /* GAME SCREEN - Stack Vertically */
    #view-game>div {
        flex-direction: column !important;
    }

    /* Hide players list on mobile (save space) */
    #view-game>div>.view-card:first-child {
        display: none;
    }

    /* Canvas Container - Full Width */
    #view-game>div>div:nth-child(2) {
        width: 100% !important;
    }

    .canvas-container {
        width: 100%;
    }

    #main-canvas {
        width: 100% !important;
        height: auto;
        max-height: 300px;
    }

    /* Toolbar - Wrap colors */
    .canvas-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Chat - Show below canvas */
    #view-game>div>.view-card:last-child {
        width: 100% !important;
        margin-top: 10px;
        padding: 15px;
    }

    .chat-box {
        height: 120px;
        max-height: 120px;
    }

    .guess-input-container {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
    }

    .winner-card {
        padding: 30px 20px;
        max-width: 90%;
    }

    .winner-card h1 {
        font-size: 2.5rem;
    }

    .winner-name {
        font-size: 2rem;
    }

    /* Game Header - Stack */
    .game-header {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    #word-display {
        font-size: 1.5rem !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    .btn-big {
        font-size: 1.3rem;
        padding: 12px 30px;
    }

    .neat-input {
        font-size: 1.5rem;
        width: 90%;
    }
}

/* Exit Button */
.btn-exit {
    background: #e74c3c;
    color: white;
    font-family: 'Bangers', cursive;
    padding: 8px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1.2rem;
}

.btn-exit:hover {
    background: #c0392b;
    transform: scale(1.05);
}

/* Canvas Improvements */
.canvas-container {
    cursor: crosshair !important;
    position: relative;
}

.color-dot.active {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px var(--accent);
}

/* Mobile Updates - Bigger Canvas */
@media (max-width: 768px) {
    #main-canvas {
        height: 350px !important;
    }

    /* Stack sidebar below canvas */
    #view-game>div>div:last-child {
        width: 100% !important;
        flex-direction: row;
        gap: 10px;
    }

    #view-game>div>div:last-child>.view-card {
        flex: 1;
    }
}

/* PREMIUM WELCOME REDESIGN */
.welcome-redesign {
    padding: 60px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.welcome-cols {
    display: flex;
    gap: 40px;
    align-items: center;
}

.brand-text {
    flex: 1.2;
    text-align: left;
}

.welcome-right {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centered as requested */
    gap: 25px;
}

.welcome-greet {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--dark);
    font-weight: 700;
}

.premium-input {
    width: 250px;
    padding: 12px 20px;
    border: 1.5px solid #E0E0E0;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}

.premium-input:focus {
    border-color: #3557FF;
    box-shadow: 0px 4px 12px rgba(53, 87, 255, 0.15);
}

.btn-premium {
    /* Base Frame */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    width: auto;
    min-width: 180px;
    height: auto;

    background: radial-gradient(117.86% 100% at 50.21% 100%, #6E9AFF 0%, #3557FF 100%);
    box-shadow: 0px 2.5px 5px rgba(0, 38, 128, 0.29), 0px 9px 9px rgba(0, 38, 128, 0.26), 0px 20.5px 12px rgba(0, 38, 128, 0.15), 0px 36px 14.5px rgba(0, 38, 128, 0.04), 0px 56.5px 16px rgba(0, 38, 128, 0.01);
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;

    position: relative;
    overflow: hidden;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0px 5px 10px rgba(0, 38, 128, 0.35);
}

.btn-premium:active {
    transform: translateY(0);
}

.btn-text {
    font-family: 'Patrick Hand', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    flex: none;
    order: 0;
    flex-grow: 0;
    white-space: nowrap;
}

.btn-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 50%;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.btn-svg {
    width: 18px;
    height: 18px;
}

.btn-admin {
    background: radial-gradient(117.86% 100% at 50.21% 100%, #FFD700 0%, #F1C40F 100%);
    box-shadow: 0px 2.5px 5px rgba(128, 100, 0, 0.29), 0px 9px 9px rgba(128, 100, 0, 0.26);
}

.btn-admin .btn-text {
    color: #333;
}

.btn-admin .btn-icon svg path {
    stroke: #F1C40F;
}

.hero-headline {
    font-family: 'Bangers', cursive;
    font-size: 4.5rem;
    line-height: 1.1;
    margin: 0 0 10px 0;
    color: var(--dark);
}

.headline-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.word-draw {
    color: #FF6B6B;
    text-shadow: 3px 3px 0 #2C3E50;
}

.word-guess {
    color: #4ECDC4;
    text-shadow: 3px 3px 0 #2C3E50;
    margin-left: 20px;
}

.word-win {
    color: #FFE66D;
    text-shadow: 3px 3px 0 #2C3E50;
    margin-left: 40px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(107, 184, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1.5px solid rgba(107, 208, 255, 0.2);
    margin-bottom: 10px;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #6bb8ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #58a4db;
}

.hero-subline {
    font-family: 'Comic Neue', cursive;
    font-size: 1.1rem !important;
    color: #6bc4ff !important;
    margin: 0 !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.hero-desc {
    font-family: 'Patrick Hand', cursive;
    font-size: 1.4rem;
    color: #555;
    line-height: 1.4;
    max-width: 500px;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* MODE SELECTION REDESIGN */
.mode-redesign {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-group-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.or-separator {
    font-family: 'Patrick Hand', cursive;
    font-size: 1.4rem;
    color: #888;
    margin: 5px 0;
}

.btn-back-premium {
    background: transparent;
    color: #888;
    border: 1.5px solid #ddd;
    border-radius: 50px;
    padding: 10px 30px;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-back-premium:hover {
    background: #f0f0f0;
    color: var(--dark);
    border-color: var(--dark);
}

/* CREATE ROOM SETTINGS REDESIGN */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 500px;
    margin-bottom: 30px;
}

.setting-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.setting-label {
    font-family: 'Patrick Hand', cursive;
    font-size: 1.5rem;
    color: #555;
    margin: 0;
}

.toggle-group-premium {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.toggle-option-premium {
    padding: 10px 20px;
    background: white;
    border: 2px solid #eee;
    border-radius: 15px;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

.toggle-option-premium:hover {
    border-color: #3557FF;
    color: #3557FF;
    transform: translateY(-2px);
}

.toggle-option-premium.selected {
    background: radial-gradient(117.86% 100% at 50.21% 100%, #6E9AFF 0%, #3557FF 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(53, 87, 255, 0.3);
}

/* GAME ROOM - NEW FIGMA DESIGN */
#view-game {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(90deg, #0A47AB 0%, #B8D3FF 53.89%, #000E24 86.54%);
    color: #ffffff;
    overflow: hidden;
    z-index: 9999;
}

#view-game.hidden {
    display: none !important;
}

.game-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
}

/* SIDEBAR - TRANSPARENT ON GRADIENT */
.game-sidebar {
    width: 270px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0 20px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* SIDEBAR LABELS & SECTIONS */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

/* Room label at top */
.section-label-gray {
    font-family: 'Patrick Hand', cursive;
    font-size: 20px;
    line-height: 1.2;
    color: #CDCDCD;
    display: flex;
    align-items: center;
}

/* Room number big */
.room-number-white {
    font-family: 'Patrick Hand SC', cursive;
    font-size: 50px;
    line-height: 1;
    color: #FFFFFF;
    display: block;
    margin-top: 10px;
    letter-spacing: 2px;
}

/* PLAYERS LIST - WHITE TEXT ON GRADIENT */
.players-list-v3 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 200px;
}

.players-list-v3::-webkit-scrollbar {
    width: 3px;
}

.players-list-v3::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.player-row {
    font-family: 'Patrick Hand', cursive;
    font-size: 18px;
    line-height: 1.3;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 5px 0;
}

/* SIDEBAR CHAT SECTION */
.chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
}

.chat-messages-v3 {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
    min-height: 0;
}

.chat-messages-v3::-webkit-scrollbar {
    width: 3px;
}

.chat-messages-v3::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.chat-msg {
    font-family: 'Patrick Hand', cursive;
    font-size: 16px;
    line-height: 1.4;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 3px 0;
}

.chat-msg-correct {
    color: #A8FF78;
    font-weight: bold;
}

/* CHAT INPUT GLASS */
.chat-input-glass {
    width: 100%;
    height: 36px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.chat-input-glass input {
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Patrick Hand', cursive;
    font-size: 18px;
    line-height: 1;
    color: #FFFFFF;
    width: 100%;
}

.chat-input-glass input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

/* EMOJI BAR */
.sidebar-emoji-bar {
    display: flex;
    gap: 6px;
    padding: 8px 0 14px 0;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sidebar-emoji-bar button {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 2px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    line-height: 1;
}

.sidebar-emoji-bar button:hover {
    transform: scale(1.5);
}

/* SIDEBAR CHAT CONTROLS */
.sidebar-chat-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    padding-bottom: 10px;
}

/* MAIN CANVAS AREA - White panel, top-left radius only */
.canvas-area-redesign {
    position: absolute;
    right: 0;
    top: 40px;
    left: 270px;
    bottom: 0;
    background: #FFFFFF;
    border-radius: 50px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* CANVAS HEADER (word + timer + clear) */
.canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 10px 40px;
    flex-shrink: 0;
}

/* word display in canvas */
.word-status-v3 {
    font-family: 'Patrick Hand', cursive;
    font-size: 2rem;
    color: #1a1a1a;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.canvas-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-skip {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.btn-skip:hover {
    background: #4b5563;
    color: white;
}

.btn-clear {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fee2e2;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.btn-clear:hover {
    background: #ef4444;
    color: white;
}

/* HOST CONTROLS */
.host-controls-v3 {
    display: flex;
    justify-content: center;
    padding: 0 40px 10px;
    flex-shrink: 0;
}

/* Canvas fills the white panel directly */
#main-canvas {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 0;
    cursor: crosshair;
}

/* GUESSING AREA - BOTTOM OF CANVAS */
.guessing-area-v3 {
    flex-shrink: 0;
    padding: 10px 20px 16px 20px;
    position: relative;
    /* Position context for floating guesses */
}

.guessing-bar-premium {
    width: 400px;
    margin: 0 auto;
    height: 70px;
    background: radial-gradient(117.86% 100% at 50.21% 100%, #6E9AFF 0%, #3557FF 100%);
    box-shadow: 0px 2.5px 5px rgba(0, 38, 128, 0.29),
        0px 9px 9px rgba(0, 38, 128, 0.26),
        0px 20.5px 12px rgba(0, 38, 128, 0.15),
        0px 36px 14.5px rgba(0, 38, 128, 0.04),
        0px 56.5px 16px rgba(0, 38, 128, 0.01);
    border-radius: 22px;
    display: flex;
    align-items: center;
    padding: 0 14px 0 28px;
    gap: 12px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.floating-guess-area {
    position: absolute;
    bottom: 80px;
    /* Above the input bar */
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
    /* Space for bubbles to float up */
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    overflow: visible;
}

.guess-bubble {
    font-family: 'Patrick Hand', cursive;
    font-size: 24px;
    color: #3557FF;
    background: white;
    padding: 8px 16px;
    border-radius: 18px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 38, 128, 0.15);
    animation: floatBlur 3s forwards ease-out;
    white-space: nowrap;
    border: 2px solid #3557FF;
}

@keyframes floatBlur {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
        filter: blur(5px);
    }

    10% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
        filter: blur(0);
    }

    70% {
        transform: translateY(-80px) scale(1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(-120px) scale(1.2);
        opacity: 0;
        filter: blur(15px);
    }
}

.guessing-bar-premium:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 38, 128, 0.4);
}

.guessing-bar-premium input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Patrick Hand', cursive;
    font-size: 22px;
    line-height: 1;
    color: #FFFFFF;
}

.guessing-bar-premium input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.guess-submit-circle {
    width: 51px;
    height: 50px;
    background: radial-gradient(117.86% 100% at 50.21% 100%, #E6E6E6 0%, #FFFFFF 100%);
    box-shadow: 0px 2.5px 5px rgba(230, 230, 230, 0.29),
        0px 9px 9px rgba(230, 230, 230, 0.26),
        0px 20.5px 12px rgba(230, 230, 230, 0.15),
        0px 36px 14.5px rgba(230, 230, 230, 0.04),
        0px 56.5px 16px rgba(230, 230, 230, 0.01);
    border-radius: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.guess-submit-circle:hover {
    transform: scale(1.1);
}

.arrow-svg {
    width: 24px;
    height: 24px;
}

/* EXIT BUTTON - TOP RIGHT */
.premium-exit-area {
    position: fixed;
    top: 9px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10000;
}

.exit-label {
    font-family: 'Patrick Hand', cursive;
    font-size: 24px;
    line-height: 26px;
    color: #FF0303;
}

.btn-exit-premium {
    background: transparent;
    border: 2.5px solid #FF0000;
    border-radius: 8px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.btn-exit-premium:hover {
    background: rgba(255, 0, 0, 0.1);
}

.exit-svg {
    width: 20px;
    height: 20px;
    color: #FF0000;
    stroke: #FF0000;
}

/* ==========================================
   WORD REVEAL OVERLAY (Drawer word prompt)
   ========================================== */
.word-reveal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(90deg, #FFD139 0%, #FFC812 53.89%, #FFD139 99.52%);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.word-reveal-overlay.hidden {
    display: none !important;
}

.word-reveal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.word-reveal-label {
    font-family: 'Patrick Hand', cursive;
    font-size: 40px;
    line-height: 1;
    color: #000000;
    letter-spacing: 1px;
}

.word-reveal-big {
    font-family: 'Patrick Hand', cursive;
    font-size: 120px;
    line-height: 0.85;
    color: #000000;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.word-reveal-btn {
    margin-top: 20px;
    width: 269px;
    height: 98px;
    background: radial-gradient(117.86% 100% at 50.21% 100%, #6E9AFF 0%, #3557FF 100%);
    box-shadow: 0px 2.5px 5px rgba(0, 38, 128, 0.29),
        0px 9px 9px rgba(0, 38, 128, 0.26),
        0px 20.5px 12px rgba(0, 38, 128, 0.15),
        0px 36px 14.5px rgba(0, 38, 128, 0.04),
        0px 56.5px 16px rgba(0, 38, 128, 0.01);
    border-radius: 30px;
    border: none;
    font-family: 'Patrick Hand', cursive;
    font-size: 32px;
    color: #FFFFFF;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.word-reveal-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0px 8px 20px rgba(0, 38, 128, 0.4);
}

.word-reveal-btn:active {
    transform: translateY(1px) scale(0.98);
}



/* ==========================================
   LOBBY VIEW - VIBRANT YELLOW THEME
   ========================================== */
.lobby-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(90deg, #FFD139 0%, #FFC812 53.89%, #FFD139 99.52%);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Patrick Hand', cursive;
    color: #000;
}

.lobby-view.hidden {
    display: none !important;
}

.lobby-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 800px;
    padding: 40px;
}

.lobby-section {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lobby-label {
    font-size: 42px;
    line-height: 1.2;
    margin: 0;
}

.lobby-room-code {
    font-size: 84px;
    line-height: 1;
    font-weight: 400;
    background: linear-gradient(180deg, #0061FF 44.71%, #062C69 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 8px;
}

.players-joined-section {
    margin-top: 16px;
}

.lobby-sublabel {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 20px;
}

.lobby-players-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
}

.lobby-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    line-height: 1;
}

.avatar-icon {
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.lobby-footer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lobby-prompt {
    font-size: 20px;
    line-height: 1;
    margin: 0;
}

.btn-lobby-start {
    width: 300px;
    height: 80px;
    background: radial-gradient(117.86% 100% at 50.21% 100%, #6E9AFF 0%, #3557FF 100%);
    box-shadow: 0px 2.5px 5px rgba(0, 38, 128, 0.29), 0px 9px 9px rgba(0, 38, 128, 0.26), 0px 20.5px 12px rgba(0, 38, 128, 0.15), 0px 36px 14.5px rgba(0, 38, 128, 0.04), 0px 56.5px 16px rgba(0, 38, 128, 0.01);
    border-radius: 24px;
    border: none;
    color: #FFFFFF;
    font-family: 'Patrick Hand', cursive;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-lobby-start:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0px 5px 10px rgba(0, 38, 128, 0.35);
}

.btn-lobby-start:active {
    transform: translateY(2px);
}

/* ==========================================
   GLOBAL WATERMARK
   ========================================== */
.global-watermark {
    position: fixed;
    bottom: 12px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 200000;
    pointer-events: none;
    /* Don't interfere with clicks */
}

.global-watermark span {
    font-family: 'Patrick Hand', cursive;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.global-watermark img {
    height: 30px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Specific view overrides if needed */
/* When game board is active, background is blue gradient, so white text is fine. 
   But if there's a white view, we might need a darker variant. */

#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
}