* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: #282c34;
    color: #e4e4e4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Screens: one visible at a time --- */
.screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* --- Landing (Lichess-style home) --- */
.landing-header {
    text-align: center;
    margin-bottom: 32px;
}

.landing-header .logo {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.landing-header .tagline {
    color: #9aa;
    font-size: 1rem;
    margin: 0;
}

.landing-header .how-to-play {
    color: #7a8;
    font-size: 0.9rem;
    margin: 12px 0 0 0;
    max-width: 420px;
    line-height: 1.4;
}

.landing-main {
    width: 100%;
    max-width: 360px;
}

.landing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.landing-btn {
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #555;
    border-radius: 6px;
    background: #3d4350;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.landing-btn:hover {
    background: #4a5160;
    border-color: #666;
}

.landing-btn.primary {
    background: #7fa650;
    border-color: #7fa650;
    color: #fff;
}

.landing-btn.primary:hover {
    background: #8fb85a;
    border-color: #8fb85a;
}

.landing-btn.secondary {
    background: transparent;
    margin-top: 16px;
}

.landing-hint {
    color: #8a8;
    font-size: 0.85rem;
    margin: 0 0 16px 0;
}

.landing-footer {
    margin-top: 48px;
}

.footer-link {
    color: #7a8;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-link:hover {
    text-decoration: underline;
}

/* --- Waiting (share link / finding opponent) --- */
.waiting-main {
    text-align: center;
    max-width: 420px;
}

.waiting-message {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.waiting-message.error {
    color: #e88;
}

.share-link-box {
    text-align: left;
    margin-bottom: 20px;
    padding: 16px;
    background: #2c313a;
    border-radius: 8px;
    border: 1px solid #444;
}

.share-link-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #9aa;
}

.share-row {
    display: flex;
    gap: 8px;
}

.share-row input {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.9rem;
    background: #1c1f26;
    border: 1px solid #444;
    border-radius: 4px;
    color: #e4e4e4;
}

.share-row .landing-btn {
    max-width: none;
    width: auto;
}

/* --- Lobby chat on landing --- */
.lobby-chat {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #444;
}

.lobby-chat-title {
    font-size: 0.95rem;
    margin: 0 0 8px 0;
    color: #ccd;
}

.chat-panel {
    margin-top: 12px;
}

.chat-messages {
    max-height: 140px;
    overflow-y: auto;
    padding: 8px;
    margin-bottom: 8px;
    background: #22252e;
    border-radius: 4px;
    border: 1px solid #444;
    font-size: 0.85rem;
}

.chat-message-line {
    margin-bottom: 4px;
}

.chat-message-author {
    font-weight: 600;
    margin-right: 4px;
}

.chat-form {
    display: flex;
}

.chat-form input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
    border: 1px solid #444;
    background: #1c1f26;
    color: #e4e4e4;
}

/* --- Game screen --- */
#gameScreen.screen {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

#gameScreen #mainContainer {
    display: flex;
}

#mainContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px; /* Space between left and right panels */
    padding: 20px;
}

#leftPanel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#rightPanel {
    width: 200px;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px;
    max-height: 650px;
    overflow-y: auto;
}

#rightPanel h3 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: #ccd;
}

#rightPanel h3:not(:first-child) {
    margin-top: 12px;
}

/* Spectator mode: dim interactive panels */
#rightPanel.spectator-mode {
    opacity: 0.5;
    pointer-events: none;
}

#rightPanel.spectator-mode::after {
    content: 'Spectating';
    display: block;
    text-align: center;
    padding: 8px;
    margin-top: 12px;
    color: #9aa;
    font-size: 0.85rem;
    border-top: 1px solid #444;
}

/* --- Send creeps (WC3-style) --- */
.send-panel {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #444;
}

.send-hint {
    font-size: 0.85rem;
    color: #9aa;
    margin: 0 0 8px 0;
}

#sendCreepButtons button,
.send-creep-btn {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 8px;
    text-align: left;
    background-color: #3a4550;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.12s;
}

#sendCreepButtons button:hover:not(.disabled) {
    background-color: #4a5560;
}

#sendCreepButtons button.disabled {
    color: #666;
    cursor: not-allowed;
    background-color: #2a3038;
}

#towerSelectionPanel button {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 8px;
    text-align: left;
    background-color: #444;
    color: white;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.12s;
}

#towerSelectionPanel button:hover:not(.disabled) {
    background-color: #555;
}

#towerSelectionPanel button.selected {
    background-color: #5a6a4a;
    border-color: #7fa650;
    font-weight: bold;
}

#towerSelectionPanel button.disabled {
    color: #888;
    cursor: not-allowed;
    background-color: #333;
}

#selectedTowerInfo,
.selected-tower-info {
    background-color: #222;
    font-size: 0.9em;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 4px;
    margin-top: 12px;
}

.status-display {
    margin-top: 10px;
    font-weight: 600;
}

.game-over-display {
    color: #e88;
    font-size: 1.25rem;
    margin-top: 15px;
    padding: 12px;
    background: #2a1a1a;
    border: 1px solid #e88;
    border-radius: 6px;
}

canvas {
    border: 1px solid #666;
    border-radius: 4px;
}

#infoPanel {
    text-align: center;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px;
    width: 800px;
    box-sizing: border-box;
    margin-top: 4px;
}

#infoPanel button {
    margin-left: 5px;
    padding: 5px 10px;
    background-color: #444;
    color: white;
    border: 1px solid #666;
    cursor: pointer;
}

#infoPanel button.selected {
    background-color: #666;
    border-color: #888;
}

#playerStats, #opponentStats {
    margin-bottom: 8px;
}

/* --- Keyboard shortcut hint --- */
.selected-tower-info .shortcut-hint {
    font-size: 0.8em;
    color: #888;
    margin-top: 4px;
}

/* --- Responsive: prevent game screen from overflowing on small screens --- */
@media (max-width: 1080px) {
    #mainContainer {
        flex-direction: column;
        align-items: center;
    }

    #rightPanel {
        width: 100%;
        max-width: 800px;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #rightPanel h3 {
        width: 100%;
    }

    #towerSelectionPanel,
    #sendCreepPanel {
        flex: 1;
        min-width: 200px;
    }
}