:root {
    --md-primary: #006C4C; --md-on-primary: #FFFFFF; --md-primary-container: #89F8C7; --md-on-primary-container: #002114;
    --md-secondary: #4D6357; --md-on-secondary: #FFFFFF; --md-secondary-container: #D0E8D8; --md-on-secondary-container: #0A1F16;
    --md-tertiary: #3D6374; --md-on-tertiary: #FFFFFF; --md-tertiary-container: #C1E8FC; --md-on-tertiary-container: #001E2C;
    --md-error: #BA1A1A; --md-on-error: #FFFFFF; --md-error-container: #FFDAD6; --md-on-error-container: #410E0B;
    --md-surface: #FBFDF8; --md-on-surface: #191C1A; --md-surface-variant: #DCE5DD; --md-on-surface-variant: #414942;
    --md-outline: #717971; --md-outline-variant: #C1C9C0;
    --md-surface-dim: #DADBD7; --md-surface-container-lowest: #FFFFFF; --md-surface-container-low: #F5F7F2;
    --md-surface-container: #EFF1EC; --md-surface-container-high: #E9EBE7; --md-surface-container-highest: #E3E6E1;
    --md-inverse-surface: #2E312D; --md-inverse-on-surface: #EFF1EC; --md-inverse-primary: #6CDBAC;
    --md-shape-xs: 4px; --md-shape-sm: 8px; --md-shape-md: 12px; --md-shape-lg: 16px; --md-shape-xl: 28px; --md-shape-full: 9999px;
    --md-elevation-1: 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3);
    --md-elevation-2: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3);
    --md-duration-short: 200ms; --md-duration-medium: 300ms; --md-easing-standard: cubic-bezier(.2,0,0,1);
    --md-font: 'Google Sans Flex', system-ui, sans-serif;
}

[data-theme="dark"] {
    --md-primary: #6CDBAC; --md-on-primary: #003824; --md-primary-container: #005237; --md-on-primary-container: #89F8C7;
    --md-secondary: #B4CCBF; --md-on-secondary: #203529; --md-secondary-container: #374B3F; --md-on-secondary-container: #D0E8D8;
    --md-tertiary: #A5CED3; --md-on-tertiary: #073643; --md-tertiary-container: #234C5B; --md-on-tertiary-container: #C1E8FC;
    --md-error: #FFB4AB; --md-on-error: #690005; --md-error-container: #93000A; --md-on-error-container: #FFDAD6;
    --md-surface: #191C1A; --md-on-surface: #E1E3DE; --md-surface-variant: #414942; --md-on-surface-variant: #C1C9C0;
    --md-outline: #8B938B; --md-outline-variant: #414942;
    --md-surface-dim: #111411; --md-surface-container-lowest: #0C0F0C; --md-surface-container-low: #1E211E;
    --md-surface-container: #222522; --md-surface-container-high: #2D302D; --md-surface-container-highest: #383B38;
    --md-inverse-surface: #E1E3DE; --md-inverse-on-surface: #2E312D; --md-inverse-primary: #006C4C;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{ font-family:var(--md-font); background:var(--md-surface); color:var(--md-on-surface); line-height:1.6; -webkit-font-smoothing:antialiased; transition: background var(--md-duration-medium), color var(--md-duration-medium); overflow-x: hidden;}

.fundo-organico { position: fixed; pointer-events: none; animation: rotacaoOrganica 80s linear infinite; z-index: 0; transition: color var(--md-duration-medium); }
.velocidade-media { animation-duration: 40s; }
.velocidade-lenta { animation-duration: 70s; }
@keyframes rotacaoOrganica { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.barra-superior{ position:sticky;top:0;z-index:10; background:color-mix(in srgb, var(--md-surface) 85%, transparent); backdrop-filter:blur(16px); border-bottom:none; padding:0 24px; display:flex;align-items:center;gap:4px; height:64px;}

.botao-icone { width: 40px; height: 40px; border-radius: var(--md-shape-full); border: none; background: transparent; color: var(--md-on-surface-variant) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s;}
.botao-icone:hover { background: var(--md-surface-container-high); }
.botao-icone .material-symbols-rounded { color: var(--md-on-surface-variant); }

.titulo-grande { font-size: clamp(2.5rem, 6vw, 3.563rem); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--md-on-surface); margin-bottom: 8px;}
.descricao-secao { font-size: 1rem; color: var(--md-on-surface-variant); max-width: 640px; margin-bottom: 24px;}
.conteudo-principal { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 20px 24px 100px; }
.cabecalho-painel { margin-bottom: 32px; }

.chips-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-md{ display:inline-flex;align-items:center;gap:6px; border-radius:var(--md-shape-sm);padding:8px 16px;height:36px; font-size:.875rem;font-weight:500;cursor:pointer; border:1px solid var(--md-outline-variant);background:var(--md-surface); color:var(--md-on-surface-variant);transition:all var(--md-duration-short);}
.chip-md:hover{background:var(--md-surface-container-high)}
.chip-md.selecionado{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:var(--md-secondary-container)}

.grade-jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.estado-carregamento { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px; color: var(--md-on-surface-variant); }
.cartao-jogo { background:var(--md-surface-container-low); border-radius:var(--md-shape-xl); overflow:hidden; transition:all var(--md-duration-short) var(--md-easing-standard); display: flex; flex-direction: column; cursor: pointer;}
.cartao-jogo:hover { box-shadow: var(--md-elevation-2); transform: translateY(-4px); }
.cartao-jogo-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--md-surface-container); display: block; }
.cartao-jogo-corpo { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cartao-jogo-titulo { font-size: 1.1rem; font-weight: 600; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-jogo-usuario { font-size: 0.8rem; color: var(--md-outline); display: flex; align-items: center; gap: 4px; margin-top: auto; }

.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--md-shape-full); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; width: fit-content; }
.status-jogando { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.status-zerado { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.status-quero_jogar { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.status-abandonado { background: var(--md-error-container); color: var(--md-on-error-container); }

.fab { display:inline-flex;align-items:center;justify-content:center;gap:.6rem; background:var(--md-primary-container);color:var(--md-on-primary-container); border:none;cursor:pointer;font-family:var(--md-font); border-radius:var(--md-shape-lg);padding:0 1.2rem; height:56px; box-shadow:0 3px 8px rgba(0,0,0,.2);font-size:.9rem;font-weight:500; transition:all var(--md-duration-short);position:fixed;bottom:24px;right:24px;z-index:50;}
.fab:hover { box-shadow:0 6px 16px rgba(0,0,0,.25); transform:translateY(-2px); }

.dialogo-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--md-duration-medium);}
.dialogo-overlay.aberto{opacity:1;pointer-events:all;}
.dialogo{background:var(--md-surface-container-high);border-radius:var(--md-shape-xl);padding:24px;width:min(400px,90vw);transform:scale(.9);transition:transform var(--md-duration-medium) cubic-bezier(0,0,0,1);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.dialogo-overlay.aberto .dialogo{transform:scale(1);}
.dialogo-icone{font-size:1.8rem;margin-bottom:.5rem;text-align:center;}
.dialogo-titulo{font-size:1.3rem;font-weight:700;margin-bottom:.5rem;text-align:center;}
.dialogo-corpo{font-size:.9rem;color:var(--md-on-surface-variant);margin-bottom:1.5rem;}
.dialogo-acoes{display:flex;justify-content:flex-end;gap:.5rem;}

.usuarios-autenticacao { display: flex; justify-content: center; gap: 12px; }
.chip-autenticacao { padding: 10px 20px; border-radius: var(--md-shape-full); background: var(--md-surface-container); border: 2px solid var(--md-outline-variant); color: var(--md-on-surface); font-weight: 600; font-family: var(--md-font); cursor: pointer; transition: all .15s; }
.chip-autenticacao:hover { background: var(--md-surface-container-high); }
.chip-autenticacao.ativo { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }

.campo-texto{position:relative;margin:.8rem 0;}
.campo-texto label{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-size:.9rem;color:var(--md-on-surface-variant);pointer-events:none;transition:all var(--md-duration-short) var(--md-easing-standard);background:transparent;padding:0 4px;}
.campo-texto input{width:100%;padding:.9rem .75rem;border-radius:var(--md-shape-xs);border:1px solid var(--md-outline);background:transparent;color:var(--md-on-surface);font-family:var(--md-font);font-size:.9rem;outline:none;transition:border-color var(--md-duration-short);}
.campo-texto input:focus{border-width:2px;border-color:var(--md-primary)}
.campo-texto input:focus ~ label,.campo-texto input:not(:placeholder-shown) ~ label{top:0;font-size:.7rem;color:var(--md-primary);background:var(--md-surface-container-high);}
.campo-texto.preenchido input{border:none;border-bottom:1px solid var(--md-outline);border-radius:var(--md-shape-xs) var(--md-shape-xs) 0 0;background:var(--md-surface-container-highest);padding-top:1.3rem;padding-bottom:.3rem;}
.campo-texto.preenchido input:focus{border-bottom-width:2px;border-color:var(--md-primary)}
.campo-texto.preenchido input:focus ~ label,.campo-texto.preenchido input:not(:placeholder-shown) ~ label{top:.35rem;font-size:.7rem;color:var(--md-primary);background:transparent;}

.md-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 24px;border-radius:var(--md-shape-full); font-family:var(--md-font);font-size:14px;font-weight:600; border:none;cursor:pointer;height:40px; transition:all var(--md-duration-short);}
.md-btn-preenchido{background:var(--md-primary);color:var(--md-on-primary);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.md-btn-texto{background:transparent;color:var(--md-primary)}

.md-progress-circular{position:relative;display:inline-flex;width:48px;height:48px;}
.md-progress-circular svg{transform:rotate(-90deg);width:48px;height:48px}
.md-progress-circular circle{fill:none;stroke-width:4;stroke-linecap:round;}
.md-progress-circular .track-c{stroke:var(--md-surface-container-highest)}
.md-progress-circular .bar-c{stroke:var(--md-primary);stroke-dasharray:125.66;}
.md-progress-circular.indeterminate svg{animation:circularSpin 1.4s linear infinite}
.md-progress-circular.indeterminate .bar-c{stroke-dasharray:40 85.66;animation:circularDash 1.4s ease-in-out infinite;}
@keyframes circularSpin{0%{transform:rotate(-90deg)}100%{transform:rotate(270deg)}}
@keyframes circularDash{0%{stroke-dasharray:1 125.66;transform:rotate(0)}50%{stroke-dasharray:60 125.66;transform:rotate(45deg)}100%{stroke-dasharray:1 125.66;transform:rotate(360deg)}}

.toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px); background:var(--md-inverse-surface);color:var(--md-inverse-on-surface); padding:12px 24px;border-radius:var(--md-shape-md); font-size:14px;font-weight:500;z-index:300; opacity:0;transition:all var(--md-duration-medium) var(--md-easing-standard); pointer-events:none; box-shadow:0 4px 16px rgba(0,0,0,.2);}
.toast.visivel{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:640px){ .grade-jogos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .fab { bottom: 16px; right: 16px; } }