/* Conquiste o Mundo — design tokens compartilhados (land / hub / game / mobile) */
:root {
    --com-bg: #040812;
    --com-panel: rgba(10, 18, 36, 0.94);
    --com-border: rgba(0, 229, 255, 0.22);
    --com-text: #e8eef8;
    --com-muted: #8b9bb4;
    --com-cyan: #00e5ff;
    --com-purple: #b026ff;
    --com-green: #00e676;
    --com-warn: #ffc107;
    --com-danger: #ff1744;
    --com-font-ui: 'Rajdhani', 'Inter', system-ui, sans-serif;
    --com-font-display: 'Orbitron', system-ui, sans-serif;
    --com-radius: 12px;
    --com-touch-min: 48px;
    --com-z-modal: 10050;
    --com-z-loading: 10060;
}

/* Loading global "Entrando no QG" */
#com-play-loading {
    position: fixed; inset: 0; z-index: var(--com-z-loading);
    background: rgba(4, 8, 18, 0.92);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; font-family: var(--com-font-ui); color: var(--com-text);
}
#com-play-loading.open { display: flex; }
#com-play-loading .com-spin {
    width: 42px; height: 42px; border-radius: 50%;
    border: 3px solid rgba(0, 229, 255, 0.2);
    border-top-color: var(--com-cyan);
    animation: com-spin 0.7s linear infinite;
}
#com-play-loading .com-load-title {
    font-family: var(--com-font-display); font-size: 1rem;
    letter-spacing: 1px; color: var(--com-cyan);
}
#com-play-loading .com-load-sub { color: var(--com-muted); font-size: 0.9rem; text-align: center; max-width: 280px; }
#com-play-loading .com-load-cancel {
    margin-top: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.2);
    color: var(--com-muted); padding: 10px 16px; border-radius: 8px; cursor: pointer;
    font-family: var(--com-font-display); font-size: 0.7rem; letter-spacing: 0.5px;
    min-height: var(--com-touch-min);
}
@keyframes com-spin { to { transform: rotate(360deg); } }

/* Auth modal unificado (injetado se a página não tiver o seu) */
.com-auth-overlay {
    position: fixed; inset: 0; z-index: var(--com-z-modal);
    background: rgba(4, 8, 18, 0.88); backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center; padding: 16px;
}
.com-auth-overlay.open { display: flex; }
.com-auth-box {
    width: 100%; max-width: 400px; background: var(--com-panel);
    border: 1.5px solid var(--com-border); border-radius: 16px;
    padding: 28px 22px 22px; position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
    font-family: var(--com-font-ui); color: var(--com-text); text-align: center;
}
.com-auth-box h2 {
    font-family: var(--com-font-display); font-size: 1.1rem; margin: 0 0 8px; letter-spacing: 0.5px;
}
.com-auth-box .com-auth-reason { color: var(--com-muted); font-size: 0.95rem; line-height: 1.4; margin: 0 0 16px; }
.com-auth-close {
    position: absolute; top: 10px; right: 14px; background: none; border: none;
    color: var(--com-muted); font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.com-auth-close:hover { color: #fff; }
.com-auth-google { display: flex; justify-content: center; min-height: 44px; margin-bottom: 12px; }
.com-auth-divider { color: var(--com-muted); font-size: 0.75rem; margin: 10px 0; }
.com-auth-fields { text-align: left; }
.com-auth-fields label { display: block; font-size: 0.78rem; color: var(--com-muted); margin-bottom: 4px; }
.com-auth-fields input {
    width: 100%; box-sizing: border-box; margin-bottom: 10px;
    padding: 10px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.4); color: #fff; font-size: 0.95rem;
}
.com-auth-fields button[type="submit"],
.com-auth-box .com-auth-submit {
    width: 100%; margin-top: 4px; cursor: pointer;
    background: linear-gradient(135deg, var(--com-purple), #7c00e6);
    color: #fff; border: 1.5px solid var(--com-cyan);
    font-family: var(--com-font-display); font-weight: 700;
    font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 12px; border-radius: 10px; min-height: var(--com-touch-min);
}
.com-auth-error { color: #ff5252; font-size: 0.85rem; margin-bottom: 10px; min-height: 1.1em; text-align: center; }
.com-auth-footer { margin-top: 14px; font-size: 0.85rem; color: var(--com-muted); }
.com-auth-footer a { color: var(--com-cyan); }

/* Multi home (classic): Criar | Entrar | Rápida */
.com-multi-home {
    display: none; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.com-multi-home.open { display: flex; }
.com-multi-home h3 {
    font-family: var(--com-font-display); font-size: 0.95rem; margin: 0 0 4px;
    letter-spacing: 0.5px; color: #fff;
}
.com-multi-home p { margin: 0 0 8px; font-size: 0.85rem; color: var(--com-muted); line-height: 1.4; }
.com-multi-home .com-multi-actions { display: flex; flex-direction: column; gap: 8px; }
.com-multi-home .com-multi-actions button {
    min-height: var(--com-touch-min); cursor: pointer;
    font-family: var(--com-font-display); font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.5px; text-transform: uppercase;
    border-radius: 10px; border: 1.5px solid transparent; padding: 12px 14px;
}
.com-multi-home .btn-create {
    background: linear-gradient(135deg, var(--com-purple), #7c00e6);
    color: #fff; border-color: var(--com-cyan);
}
.com-multi-home .btn-join {
    background: rgba(255,255,255,0.06); color: var(--com-text);
    border-color: rgba(255,255,255,0.18);
}
.com-multi-home .btn-quick {
    background: linear-gradient(135deg, #00e676, #00b248);
    color: #fff; border-color: #00ff88;
}

/* Demo overlay landpage */
.tm-demo-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 8, 18, 0.55); backdrop-filter: blur(2px);
    border-radius: inherit; pointer-events: none;
}
.tm-demo-overlay .tm-demo-chip {
    pointer-events: auto;
    font-family: var(--com-font-display); font-size: 0.72rem; letter-spacing: 1px;
    text-transform: uppercase; color: #fff;
    background: rgba(176, 38, 255, 0.35); border: 1px solid rgba(0, 229, 255, 0.5);
    padding: 10px 16px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 0 20px rgba(176, 38, 255, 0.35);
}