:root{

    /* Cores */

    --background:#0B0B0D;
    --panel:#17171B;
    --panel-light:#1E1E23;

    --gold:#C9A84F;
    --gold-hover:#E0C36B;

    --purple:#7A4DFF;

    --text:#F2F2F2;
    --text-secondary:#B6B6B6;

    --border:#34343A;

    --danger:#B94A48;
    --success:#4CAF7D;

    /* Cores por parte (bordas das cartas) */
    --part-0:#111114;   /* Genérica: preta */
    --part-1:#C0335C;   /* Battle Tendency: vermelho azulado */
    --part-2:#E9C838;   /* Stardust Crusaders: amarelo */
    --part-3:#9C55D4;   /* Diamond is Unbreakable: roxo... */
    --part-3b:#E3B23C;  /* ...amarelado */
    --part-4:#F0629E;   /* Golden Wind: rosa */
    --part-5:#3E7BD9;   /* Stone Ocean: azul */
    --part-6:#A8C23F;   /* Steel Ball Run: verde amarelado */
    --part-7:#8ED8EC;   /* JoJolion: azul clarinho */

    /* Sombras */

    --shadow:
        0 0 30px rgba(0,0,0,.35);

    /* Bordas */

    --radius:16px;

    /* Transição */

    --transition:.25s ease;

}

body{

    background:

        radial-gradient(circle at top,
            #1b1635 0%,
            #0B0B0D 30%),

        var(--background);

    color:var(--text);

    font-family:"Poppins",sans-serif;

    min-height:100vh;

}

#app{

    width:100%;
    min-height:100vh;

}

.screen{

    display:none;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:40px;

}

.screen.active{

    display:flex;

}

.panel{

    width:100%;

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:24px;

    box-shadow:var(--shadow);

}

/* Painel estreito e centralizado, usado só nas telas de login/cadastro */

.login-panel{

    max-width:430px;

    padding:40px;

}

.panel.large{

    max-width:1200px;

    min-height:750px;

}

.title{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:34px;

    text-align:center;

    letter-spacing:2px;

    margin-bottom:10px;

}

.subtitle{

    color:var(--text-secondary);

    text-align:center;

    margin-bottom:35px;

}

.input{

    width:100%;

    background:var(--panel-light);

    color:white;

    padding:14px 18px;

    border:1px solid var(--border);

    border-radius:10px;

    margin-bottom:15px;

    transition:var(--transition);

}

.input:focus{

    border-color:var(--gold);

    box-shadow:

        0 0 10px rgba(201,168,79,.25);

}

.button{

    width:100%;

    padding:14px;

    border-radius:10px;

    background:var(--gold);

    color:#111;

    font-weight:600;

    transition:var(--transition);

    margin-top:10px;

}

.button:hover{

    background:var(--gold-hover);

    transform:translateY(-2px);

}

.button.small{

    width:auto;

    padding:10px 22px;

}

.button.secondary{

    background:var(--panel-light);

    color:var(--text);

    border:1px solid var(--border);

}

.button.secondary:hover{

    background:var(--panel);

    border-color:var(--gold);

    transform:translateY(-2px);

}

.button.danger{

    background:var(--danger);

    color:white;

}

.button.danger:hover{

    filter:brightness(1.15);

}

/* ==========================================================
   STAT CARDS (HOME)
========================================================== */

.stat-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-bottom:28px;

}

.stat-card{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);

}

.stat-label{

    display:block;

    color:var(--text-secondary);

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:8px;

}

.stat-value{

    display:block;

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.6rem;

    overflow-wrap:break-word;

}

.progress-bar{

    margin-top:12px;

    height:8px;

    border-radius:999px;

    background:var(--panel-light);

    overflow:hidden;

}

.progress-bar-fill{

    height:100%;

    width:0%;

    background:linear-gradient(90deg,var(--gold),var(--purple));

    transition:width .4s ease;

}

.home-grid{

    display:grid;

    grid-template-columns:1.25fr 1fr;

    gap:18px;

    align-items:start;

}

@media (max-width:900px){

    .home-grid{
        grid-template-columns:1fr;
    }

}

.home-column{

    display:flex;

    flex-direction:column;

    gap:18px;

    min-width:0;

}

.home-panel h2{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.1rem;

    margin-bottom:4px;

}

.home-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    flex-wrap:wrap;

}

.home-panel-header .button{

    margin-top:0;

}

.home-panel .empty-state{

    padding:18px 10px;

}

.home-rules-text{

    color:var(--text-secondary);

    font-size:.9rem;

    line-height:1.5;

    margin-bottom:14px;

}

.home-panel .button{

    width:auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

/* ===== Novidades ===== */

.home-news-label{

    display:block;

    font-size:.7rem;

    text-transform:uppercase;

    letter-spacing:.8px;

    color:var(--text-secondary);

    margin-bottom:8px;

}

.home-news-strip{

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding-bottom:6px;

    margin-bottom:12px;

}

.home-news-card{

    width:58px;

    height:73px;

    flex-shrink:0;

    border-radius:6px;

    overflow:hidden;

    border:1px solid var(--border);

    background:var(--panel-light);

    transition:var(--transition);

}

.home-news-card:hover{

    transform:translateY(-3px);

    border-color:var(--gold);

}

.home-news-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.home-news-card img:not([src]){ display:none; }

.home-news-card span{

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

    padding:4px;

    font-size:.5rem;

    text-align:center;

    color:var(--text-secondary);

}

.home-news-updates{

    display:flex;

    flex-direction:column;

    gap:9px;

    font-size:.82rem;

    color:var(--text-secondary);

    line-height:1.5;

}

.home-news-updates li{

    display:flex;

    gap:10px;

    align-items:baseline;

}

.home-news-date{

    flex-shrink:0;

    font-size:.68rem;

    font-weight:600;

    color:var(--gold);

    background:rgba(201,168,79,.1);

    border:1px solid rgba(201,168,79,.3);

    border-radius:6px;

    padding:1px 7px;

    white-space:nowrap;

}

/* ===== Apoie o criador ===== */

.home-support h2{

    display:flex;

    align-items:center;

    gap:8px;

}

.gem-icon{

    width:20px;

    height:20px;

    color:var(--gold);

    filter:drop-shadow(0 0 6px rgba(201,168,79,.5));

}

.home-pix{

    display:flex;

    gap:8px;

    align-items:stretch;

}

.home-pix code{

    flex:1;

    min-width:0;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:10px;

    padding:10px 12px;

    font-size:.72rem;

    color:var(--text);

    overflow-wrap:anywhere;

    user-select:all;

}

.home-pix .button{

    margin-top:0;

    flex-shrink:0;

}

.home-pix-label{

    display:block;

    margin-top:8px;

    font-size:.7rem;

    color:var(--text-secondary);

}

/* ===== aviso de projeto de fã ===== */

.home-disclaimer{

    margin-top:26px;

    text-align:center;

    font-size:.8rem;

    color:var(--text-secondary);

    border-top:1px solid var(--border);

    padding-top:16px;

}

/* ==========================================================
   LINHAS DE LISTA (decks e salas na Home / Jogar)
========================================================== */

.list-rows{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.list-row{

    display:flex;

    align-items:center;

    gap:12px;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:10px;

    padding:12px 14px;

}

.list-row-info{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.list-row-title{

    font-weight:600;

    font-size:.92rem;

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}

.list-row-title > span:first-child{

    overflow-wrap:anywhere;

}

.list-row-subtitle{

    font-size:.78rem;

    color:var(--text-secondary);

    overflow-wrap:anywhere;

}

.list-row-actions{

    display:flex;

    gap:8px;

    flex-shrink:0;

    flex-wrap:wrap;

    justify-content:flex-end;

}

.list-row-actions .button{

    margin-top:0;

    padding:8px 14px;

    font-size:.8rem;

}

.badge-active{

    background:rgba(76,175,125,.15);
    color:var(--success);
    border-color:rgba(76,175,125,.4);

}

.badge-ready{

    background:rgba(76,175,125,.15);
    color:var(--success);
    border-color:rgba(76,175,125,.4);

}

.badge-building{

    background:rgba(201,168,79,.12);
    color:var(--gold);
    border-color:rgba(201,168,79,.35);

}

/* ==========================================================
   TELA "JOGAR"
========================================================== */

.play-layout{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:18px;

    align-items:start;

}

@media (max-width:900px){

    .play-layout{
        grid-template-columns:1fr;
    }

}

.play-panel h2{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.1rem;

    margin-bottom:12px;

}

.play-hint{

    color:var(--text-secondary);

    font-size:.85rem;

    line-height:1.5;

    margin-bottom:14px;

}

.play-deck-select{

    margin-bottom:4px;

}

.play-room-form{

    display:flex;

    gap:10px;

    margin-bottom:16px;

    flex-wrap:wrap;

}

.play-room-form .input{

    flex:1;

    min-width:180px;

    margin-bottom:0;

}

.play-room-form .play-room-password{

    flex:0 1 170px;

    min-width:130px;

}

.play-room-form .button{

    margin-top:0;

    flex-shrink:0;

}

.play-status{

    margin:22px 0;

    padding:14px 18px;

    border-radius:10px;

    font-size:.9rem;

    background:var(--panel-light);

    border:1px solid var(--border);

}

.play-status.status-ok{

    border-color:var(--success);

    color:var(--success);

}

.play-status.status-warning{

    border-color:var(--gold);

    color:var(--gold);

}

.play-panel .button{

    width:auto;

}

.text-button{

    width:100%;

    margin-top:20px;

    background:none;

    color:var(--gold);

    transition:.2s;

}

.text-button:hover{

    color:white;

}

.screen-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.screen-header h1{

    font-family:"Cinzel",serif;

    color:var(--gold);

}

.hidden{

    display:none !important;

}

.login-hint{

    margin-top:20px;
    text-align:center;
    font-size:.8rem;
    color:var(--text-secondary);

}

.login-hint strong{

    color:var(--gold);

}

/* ==========================================================
   ÍCONES (mask com os SVGs de assets/icons)
========================================================== */

.icon{

    display:inline-block;
    width:20px;
    height:20px;
    background-color:currentColor;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
    flex-shrink:0;
    vertical-align:middle;

}

.icon-xl{

    width:56px;
    height:56px;
    margin:0 auto 15px;
    color:var(--gold);

}

.icon-home{ -webkit-mask-image:url("../icons/home.svg"); mask-image:url("../icons/home.svg"); }
.icon-cards{ -webkit-mask-image:url("../icons/cards.svg"); mask-image:url("../icons/cards.svg"); }
.icon-play{ -webkit-mask-image:url("../icons/play.svg"); mask-image:url("../icons/play.svg"); }
.icon-admin{ -webkit-mask-image:url("../icons/admin.svg"); mask-image:url("../icons/admin.svg"); }
.icon-book{ -webkit-mask-image:url("../icons/book.svg"); mask-image:url("../icons/book.svg"); }
.icon-gallery{ -webkit-mask-image:url("../icons/gallery.svg"); mask-image:url("../icons/gallery.svg"); }
.icon-zoom{ -webkit-mask-image:url("../icons/zoom.svg"); mask-image:url("../icons/zoom.svg"); }
.icon-logout{ -webkit-mask-image:url("../icons/logout.svg"); mask-image:url("../icons/logout.svg"); }
.icon-info{ -webkit-mask-image:url("../icons/info.svg"); mask-image:url("../icons/info.svg"); }
.icon-warning{ -webkit-mask-image:url("../icons/warning.svg"); mask-image:url("../icons/warning.svg"); }
.icon-error{ -webkit-mask-image:url("../icons/error.svg"); mask-image:url("../icons/error.svg"); }
.icon-success{ -webkit-mask-image:url("../icons/success.svg"); mask-image:url("../icons/success.svg"); }

/* ==========================================================
   PÁGINAS DE CONTEÚDO / UTILITÁRIOS COMPARTILHADOS
========================================================== */

.content-page{

    padding:36px 42px;
    max-width:1200px;
    margin:0 auto;

}

.page-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:28px;
    gap:20px;
    flex-wrap:wrap;

}

.page-header > div{

    min-width:0;

}

.page-title{

    overflow-wrap:break-word;

}

.badge{

    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    background:var(--panel-light);
    color:var(--text-secondary);
    border:1px solid var(--border);

}

.badge-admin{

    background:rgba(201,168,79,.15);
    color:var(--gold);
    border-color:rgba(201,168,79,.4);

}

.badge-user{

    background:rgba(122,77,255,.15);
    color:#b7a3ff;
    border-color:rgba(122,77,255,.35);

}

.empty-state{

    color:var(--text-secondary);
    text-align:center;
    padding:30px;
    font-size:.95rem;

}

textarea.input{

    resize:vertical;
    min-height:80px;
    font-family:inherit;

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:999px;

}

::selection{

    background:var(--gold);

    color:black;

}