/* WinMC: tema igual ao site dos tiers (escuro, dourado, Inter + Silkscreen).
   Carregado depois do v2.css; só muda o visual, as classes e o JS são os do original. */

:root {
    --bg: #0b0d14; --panel: #12151f; --panel2: #171b28; --line: #232838; --text: #e7e9f0; --dim: #8a90a3;
    --gold: #ffc21a; --green: #4bd47a; --red: #ff5d5d; --radius: 12px;
}

* {
    font-family: Inter, system-ui, sans-serif;
    box-sizing: border-box;
    /* cores que o v2.css e o JS usam */
    --color1: #0b0d14;
    --color2: #12151f;
    --color3: #232838;
    --color4: #171b28;
    --color5: #8a90a3;
    --color6: #e7e9f0;
    --select-color1: rgba(255, 194, 26, .12);
    --select-color2: #ffc21a;
}

body, body.mcDirtBackground, .mcDirtBackground {
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    background: radial-gradient(900px 420px at 15% -10%, rgba(255,194,26,.10), transparent 60%),
                radial-gradient(800px 500px at 100% 0%, rgba(79,116,176,.12), transparent 60%), var(--bg) !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    image-rendering: auto !important;
}

/* ---------------------------------------------------------------- topo */

.winmcHeader {
    width: min(700px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0 14px;
}
.winmcHeader img {
    height: 64px;
    width: auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(255,194,26,.25));
}
.winmcHeader .winmcTitle {
    font-family: Silkscreen, monospace;
    font-size: 22px;
    line-height: 1.1;
    color: var(--text);
}
.winmcHeader .winmcSub {
    color: var(--dim);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------- cartão */

.mcContainerStyle {
    background: var(--panel);
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    clip-path: none;
}
.mainContainer { width: min(700px, calc(100vw - 32px)); }
body.flexContainer { justify-content: center; }
main { flex: 0 0 auto; height: auto; }
footer { margin-top: 18px; }

.joinLabel, .joinLabel * {
    font-family: Silkscreen, monospace;
    font-weight: 400;
    font-size: 24px;
    color: var(--gold);
    margin: 6px 0 0;
}
.joinSec { padding: 18px 20px 8px; }
.connectedSec { padding: 0 20px 20px; }

.mcTextStyle1 { color: var(--dim); }
.mcTextStyle2 { color: var(--text); text-shadow: none; }
.joinForm { color: var(--text); margin: 14px 0 6px; }
.joinFormLabel { font-weight: 600; color: var(--dim); padding: 4px 0; }

/* ---------------------------------------------------------------- campos */

.mcTextboxStyle {
    background: var(--panel2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
    font: inherit;
    cursor: text;
    user-select: text;
}
.mcTextboxStyle:hover { background: var(--panel2); color: var(--text); border-color: #2f3650; }
.mcTextboxStyle:focus { background: var(--panel2); color: var(--text); border-color: var(--gold); box-shadow: none; }
.mcTextboxStyle::placeholder { color: var(--dim); }

/* ---------------------------------------------------------------- botões e selects */

.mcButtonStyle, .mcIconButtonStyle, .mcCheckboxStyle {
    background: var(--panel2) !important;
    border: 1px solid var(--line);
    border-radius: 10px;
    image-rendering: auto;
    transition: border-color .15s, background-color .15s;
}
.mcButtonStyle:hover, .mcIconButtonStyle:hover, .mcCheckboxStyle:hover { border-color: var(--gold); }

.mcButtonStyle .mcButtonStyleInner,
.mcIconButtonStyle .mcIconButtonStyleInner,
.mcCheckboxStyle .mcCheckboxStyleInner {
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    padding: 0 12px;
}
.mcButtonStyle:hover .mcButtonStyleInner,
.mcIconButtonStyle:hover .mcIconButtonStyleInner {
    background: var(--select-color1);
    color: var(--gold);
    text-shadow: none;
}
.mcButtonStyle:active .mcButtonStyleInner,
.mcIconButtonStyle:active .mcIconButtonStyleInner { box-shadow: none; filter: brightness(.9); }
.mcIconButtonStyle .mcIconButtonStyleInner { padding: 6px; }

.mcButtonStyle select { cursor: pointer; }
.mcButtonStyle select option { background: var(--panel2); color: var(--text); }

/* Botão principal (Entrar/Sair) em verde */
.joinBtnContainer.mcButtonStyle { background: #2f8f66 !important; border-color: #2f8f66; height: 46px; }
.joinBtnContainer.mcButtonStyle .mcButtonStyleInner { color: #08160f; font-weight: 800; font-size: 15px; }
.joinBtnContainer.mcButtonStyle:hover { border-color: #3fb07f; }
.joinBtnContainer.mcButtonStyle:hover .mcButtonStyleInner { background: rgba(255,255,255,.10); color: #08160f; }
body.connected .joinBtnContainer.mcButtonStyle { background: var(--panel2) !important; border-color: var(--line); height: 40px; }
body.connected .joinBtnContainer.mcButtonStyle .mcButtonStyleInner { color: var(--red); }

.mcCheckboxStyle input:checked + .mcCheckboxStyleInner { background: var(--gold); }
.mcCheckboxStyle:hover .mcCheckboxStyleInner { background: var(--select-color1); }

/* ---------------------------------------------------------------- status e chat */

.statusLabel { color: var(--dim); font-weight: 600; }
.statusLabel.connected { color: var(--green) !important; }
.statusLabel.disconnected { color: var(--red) !important; }

.mcTextviewStyle {
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
    color: var(--text);
    padding: 10px 12px;
    width: 100%;
    font-family: Inter, system-ui, sans-serif;
    user-select: text;
}

.flexDivider { background: none; }

/* ---------------------------------------------------------------- aviso de http */

.winmcNotice {
    width: 100%;
    display: none;
    text-align: left;
    background: rgba(255,194,26,.08);
    border: 1px solid rgba(255,194,26,.35);
    border-radius: 10px;
    color: var(--text);
    padding: 10px 12px;
    font-size: 13px;
}
.winmcNotice b { color: var(--gold); }
body.insecure .winmcNotice { display: block; }
body.connected .winmcNotice { display: none; }

/* ---------------------------------------------------------------- alerta, rodapé e idioma */

.alertOverlay {
    background: var(--panel2) !important;
    border-bottom: 1px solid var(--gold);
    color: var(--text);
}
.alertOverlay h3 { font-weight: 600; }

footer, .footerLink { color: var(--dim); }
.footerLink { font-size: 12px; }
.footerLink:hover { color: var(--gold); }
.footerLink b { color: var(--text); font-family: Silkscreen, monospace; font-weight: 400; }

.floatingWidgetsOverlay { bottom: 16px; }
#langBtn, #langOptionsContainer button { background: none !important; }
#langBtnImg, #langOptionsContainer img { border-radius: 6px; filter: none !important; }

/* ---------------------------------------------------------------- fala em tela cheia */

.pttFullscreenSec { background: rgba(11,13,20,.96) !important; }
.pttFullscreenBtn.mcButtonStyle { border-radius: 24px; border: 2px solid var(--gold); }
.pttFullscreenBtn .mcButtonStyleInner { font-family: Silkscreen, monospace !important; color: var(--gold); }

@media (max-width: 600px) {
    .winmcCode { font-size: 32px; height: 72px; }
    .winmcHeader { padding: 0 0 12px; margin: 0 auto; }
    .winmcHeader img { height: 48px; }
    .winmcHeader .winmcTitle { font-size: 18px; }
    .mainContainer { margin: 0 auto; }
    .joinFormLabel { justify-content: flex-start; align-self: flex-start; }
    .usernameInput, .passwordInput, .micSelect, .speakerSelect { width: 100%; }
    .micContainer { width: 100%; }
}

/* ---------------------------------------------------------------- login por código (/voz) */

.winmcSteps {
    width: 100%;
    margin: 0;
    padding-left: 22px;
    text-align: left;
    color: var(--dim);
    font-size: 14px;
}
.winmcSteps li { margin: 3px 0; }
.winmcSteps b { color: var(--text); }

.winmcSaved {
    display: none;
    width: 100%;
    text-align: left;
    background: rgba(75,212,122,.08);
    border: 1px solid rgba(75,212,122,.35);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}
.winmcSaved.on { display: block; }
.winmcSaved b { color: var(--green); }
.winmcSaved a { color: var(--dim); text-decoration: underline; margin-left: 6px; }
.winmcSaved a:hover { color: var(--text); }

.winmcCode {
    width: 100%;
    height: 84px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    text-align: center;
    font: 700 40px/1 ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .35em;
    padding: 0 0 0 .35em;
    text-transform: uppercase;
    outline: none;
}
.winmcCode::placeholder { color: #3a4157; letter-spacing: .35em; }
.winmcCode:focus { border-color: #2f8f66; }
.winmcShake { animation: winmcShake .35s; border-color: var(--red) !important; }
@keyframes winmcShake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.winmcRemember {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.winmcRemember input { width: 18px; height: 18px; accent-color: #2f8f66; margin: 0; }

.winmcAudio {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
}
.winmcAudio summary { cursor: pointer; color: var(--dim); font-weight: 600; }
.winmcAudio[open] summary { margin-bottom: 8px; }
.winmcAudio > div { margin: 6px 0; }

.winmcHint {
    margin: 4px 0 0;
    text-align: left;
    color: var(--dim);
    font-size: 13px;
}

/* ---------------------------------------------------------------- dentro do app Android */

body.winmcApp .winmcHint, body.winmcApp .winmcNotice, body.winmcApp footer { display: none !important; }
body.winmcApp .winmcHeader { padding-top: 12px; }

/* ---------------------------------------------------------------- app: espera do /voz CÓDIGO */

.winmcPair { display: none; width: 100%; text-align: left; }
body.winmcApp .winmcPair { display: block; }
body.winmcApp .winmcSteps, body.winmcApp .winmcCode, body.winmcApp .winmcSaved { display: none !important; }
.winmcPairSteps { margin: 0 0 10px; padding-left: 22px; color: var(--dim); }
.winmcPairSteps li { margin: 3px 0; }
.winmcPairSteps b { color: var(--text); }
.winmcPairCode {
    width: 100%;
    min-height: 0;
    text-align: center;
    font: 700 40px/1 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    letter-spacing: .35em;
    padding-left: .35em;
    color: var(--gold);
}
.winmcPairCode:not(:empty) { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 22px 0 22px .35em; }
.winmcPairStatus { margin-top: 10px; color: var(--dim); font-weight: 600; text-align: center; }
body.winmcWaiting .winmcPairStatus::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; animation: winmcPulse 1.2s infinite; }
@keyframes winmcPulse { 50% { opacity: .25; } }