// Pozvánka Kreslení nad pozvánkami ostatních her, aby se nepřekrývaly
.duel-invite.draw-invite {
    bottom: 224px;
}

.drawing-game-modal {
    .draw-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 10px;
        font-size: 1.05rem;
    }

    .draw-hint {
        // Mezery mezi slovy v masce se nesmí slít, jinak nejde poznat počet slov
        white-space: pre;
        font-family: monospace;
        font-size: 1.4rem;
        letter-spacing: 0.15em;
    }

    .draw-word strong {
        font-size: 1.3rem;
    }

    .draw-timer.urgent {
        color: #ef4444;
        font-weight: 700;
    }

    .draw-layout {
        display: flex;
        gap: 16px;
        align-items: stretch;
    }

    .draw-canvas-col {
        flex: 1 1 auto;
        min-width: 0;
    }

    .draw-canvas {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
        background: #fff;
        touch-action: none;

        &.active {
            cursor: crosshair;
        }
    }

    .draw-tools {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
    }

    .draw-color {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid rgba(127, 127, 127, 0.5);
        padding: 0;

        &.selected {
            outline: 3px solid var(--luncher-primary, #198754);
            outline-offset: 1px;
        }
    }

    .draw-size {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        border: 1px solid rgba(127, 127, 127, 0.5);
        background: transparent;

        span {
            display: block;
            border-radius: 50%;
            background: currentColor;
        }

        &.selected {
            outline: 3px solid var(--luncher-primary, #198754);
        }
    }

    .draw-sep {
        width: 8px;
    }

    .draw-side {
        flex: 0 0 260px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .draw-scores {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            display: flex;
            justify-content: space-between;
            padding: 2px 0;
        }

        .guessed {
            color: #22c55e;
        }
    }

    .draw-chat {
        flex: 1 1 auto;
        min-height: 200px;
        max-height: 360px;
        overflow-y: auto;
        border: 1px solid rgba(127, 127, 127, 0.35);
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 0.9rem;

        .system {
            color: #22c55e;
            font-style: italic;
        }
    }

    .draw-players {
        columns: 2;
    }
}