/* ═══════════════════════════════════════════════════════════════
   QUACK — Design System
   Bootstrap 5.3.2 custom layer
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
    /* Paleta base */
    --color-primary:          #1E90FF;
    --color-primary-rgb:      30, 144, 255;
    --color-secondary:        #FFD700;
    --color-secondary-rgb:    255, 215, 0;
    --color-accent:           #FF8C00;
    --color-accent-rgb:       255, 140, 0;
    --color-dark:             #212121;
    --color-dark-rgb:         33, 33, 33;
    --color-light:            #FFFFFF;
    --verso-azul:             #004085;

    /* Tokens semânticos */
    --color-surface:          #f0f0f0;
    --color-border-card:      #333333;

    /* Gradiente de fundo */
    --bg-g1: #ffffff;
    --bg-g2: #f0f8ff;
    --bg-g3: #fffdf0;
    --bg-g4: #f8fbff;

    /* Pato Dourado */
    --color-pato-text:        #3e2723;
    --color-pato-border:      #b8860b;
    --color-pato-border-rgb:  184, 134, 11;

    /* Workbench */
    --wb-bg:                  #1a1a2e;
    --wb-surface:             #16213e;

    /* Tipos de carta */
    --type-puzzle:            var(--color-accent);
    --type-protecao:          #28a745;
    --type-penalizacao:       #dc3545;
    --type-especial:          #6f42c1;
    --type-estrategia:        var(--color-primary);
    --type-bloqueio:          #6c757d;
    --type-pvp:               #e83e8c;
    --type-item:              #20c997;
    --type-pato:              var(--color-pato-border);
}

/* ── 2. Base ──────────────────────────────────────────────────── */
body {
    font-family: 'Fredoka', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(-45deg, var(--bg-g1), var(--bg-g2), var(--bg-g3), var(--bg-g4));
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    min-height: 100vh;
}

@keyframes gradientAnimation {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* ── 3. Navegação ─────────────────────────────────────────────── */
.navbar {
    background: rgba(var(--color-primary-rgb), 0.95) !important; /* Bootstrap override */
    backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--color-secondary);
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(var(--color-dark-rgb), 0.2);
}

.nav-link { transition: transform 0.2s; }

.nav-link:hover {
    transform: scale(1.1);
    color: var(--color-secondary) !important;
}

.nav-ranking-gold {
    background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
    border-radius: 50px;
    color: var(--color-dark) !important;
    font-weight: 600;
    padding: 5px 15px !important;
}

.user-greeting {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(var(--color-dark-rgb), 0.15);
}

/* Ícone do pato (substitui o emoji 🦆). Escala com a fonte do contentor,
   como um emoji, e alinha-se ao texto. Usar via duck_icon() em PHP. */
.duck-emoji {
    height: 1em;
    width: auto;
    vertical-align: -0.15em;
    display: inline-block;
}

/* ── Modal de ataque/feitiço PvP — cartões de alvo ───────────────── */
.modal-pvp { border-radius: 16px; overflow: hidden; }

.pvp-target {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 9px 4px;
    border: 2px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s, background-color .15s;
}
.pvp-target:hover {
    border-color: var(--pvp-accent, var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.12);
}
.pvp-target-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f3f5;
    border: 2px solid rgba(var(--color-dark-rgb), 0.06);
}
.pvp-target-name {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: var(--color-dark);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pvp-target-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pvp-accent, var(--color-primary));
    color: #fff;
    font-size: .58rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .15s, transform .15s;
}
.btn-check:checked + .pvp-target {
    border-color: var(--pvp-accent, var(--color-primary));
    background: rgba(var(--color-secondary-rgb), 0.10);
    box-shadow: 0 4px 14px rgba(var(--color-dark-rgb), 0.12);
}
.btn-check:checked + .pvp-target .pvp-target-avatar {
    border-color: var(--pvp-accent, var(--color-primary));
}
.btn-check:checked + .pvp-target .pvp-target-check {
    opacity: 1;
    transform: scale(1);
}
.btn-check:focus-visible + .pvp-target {
    outline: 2px solid var(--pvp-accent, var(--color-primary));
    outline-offset: 2px;
}

/* ── 4. Stats pills — mobile ─────────────────────────────────── */
.navbar-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 4px 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.navbar-stat-pill:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}
.navbar-stat-pill i {
    font-size: 0.75rem;
    color: var(--color-secondary);
}
.navbar-stat-duck-icon {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ── 5. Sistema de Cartas 3D ──────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    padding: 20px;
}

.duck-card {
    width: 260px;
    height: 440px;
    perspective: 1000px;
}

.duck-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.duck-card:hover .duck-inner { transform: rotateY(0deg); }

.duck-inner:hover .duck-card-quantity-badge { display: inline-block; }

/* min-height:0 é obrigatório: sem isso o flex item recusa encolher
   abaixo do conteúdo e o scroll interno nunca chega a ativar,
   transbordando o texto para fora da carta (260×440 fixos). */
.duck-content {
    overflow: hidden;
    min-height: 0;
}

/* Só a descrição faz scroll — os botões de ação (.duck-flags)
   ficam sempre visíveis no fundo da carta. */
.duck-desc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.duck-flags { flex-shrink: 0; }

.duck-front,
.duck-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 25px rgba(var(--color-dark-rgb), 0.15);
    z-index: -1;
}

/* Verso */
.duck-back {
    background-color: var(--verso-azul);
    border: 6px solid var(--color-secondary);
    transform: rotateY(180deg);
    justify-content: center;
    align-items: center;
}

.duck-back img {
    width: 100px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

/* Frente */
.duck-front {
    background: var(--color-light);
    border: 4px solid var(--color-border-card);
}

.duck-image-full {
    width: 100%;
    height: 180px;
    flex: 0 0 auto;
    background: var(--color-surface);
    border-bottom: 2px solid rgba(var(--color-dark-rgb), 0.1);
}

.duck-image-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.duck-content {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.duck-title {
    font-size: 1.1rem;
    min-height: 2.5rem;
    margin-bottom: 5px;
}

/* ── 6. Tipos de Carta ────────────────────────────────────────── */
.tipo-estrategia  { border-color: var(--type-estrategia); }
.tipo-protecao    { border-color: var(--type-protecao); }
.tipo-penalizacao { border-color: var(--type-penalizacao); }
.tipo-especial    { border-color: var(--type-especial); }
.tipo-puzzle      { border-color: var(--type-puzzle); }
.tipo-bloqueio    { border-color: var(--type-bloqueio); }
.tipo-pvp         { border-color: var(--type-pvp); }
.tipo-item        { border-color: var(--type-item); }

/* Tipo Pato — dourado especial (especificidade aumentada para evitar !important) */
.duck-front.tipo-pato {
    background: linear-gradient(135deg, #ffd700 0%, #f9a825 50%, #ffeb3b 100%);
    border: 4px solid var(--color-pato-border);
    box-shadow: 0 0 25px rgba(var(--color-pato-border-rgb), 0.7);
    color: var(--color-pato-text);
    overflow: hidden;
}

.duck-front.tipo-pato .duck-content,
.duck-front.tipo-pato .duck-description {
    background: transparent !important; /* reset Bootstrap */
    color: var(--color-pato-text) !important;
}

.duck-front.tipo-pato .duck-image-full {
    background: rgba(255, 255, 255, 0.2) !important;
    border-bottom: 2px solid rgba(var(--color-pato-border-rgb), 0.3);
}

.duck-front.tipo-pato .badge {
    background-color: var(--color-pato-text) !important; /* Bootstrap override */
    color: var(--color-secondary) !important;
}

/* Shimmer no pato dourado */
.pato-gold-shimmer::after {
    content: "";
    pointer-events: none; /* nunca bloquear cliques/scroll nos botões */
    position: absolute;
    top: -150%; left: -150%;
    width: 300%; height: 300%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(45deg);
    animation: shimmer 4s infinite;
}

@keyframes shimmer {
    0%   { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%)  rotate(45deg); }
}

/* Forçar cartas para a frente via JS */
#container.show-all .duck-inner {
    transform: rotateY(0deg) !important; /* JS state override */
}

/* ── 7. Badge de quantidade ───────────────────────────────────── */
.card-quantity-badge {
    position: absolute;
    top: -12px; right: -12px;
    background: var(--color-dark);
    color: var(--color-secondary);
    border: 3px solid var(--color-secondary);
    min-width: 38px; height: 38px;
    padding: 0 5px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    z-index: 100;
    backface-visibility: hidden;
    box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
    font-family: 'Fredoka', sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: scale(0) translateZ(50px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.duck-card:hover .card-quantity-badge,
#container.show-all .card-quantity-badge {
    opacity: 1;
    transform: scale(1) translateZ(50px);
}

.duck-front.tipo-pato .card-quantity-badge {
    background: var(--color-secondary);
    color: var(--color-pato-text);
    border-color: var(--color-pato-text);
}

/* ── 9. Ranking ───────────────────────────────────────────────── */
.podium-gold {
    height: 220px;
    transform: scale(1.08);
    z-index: 2;
    position: relative;
}

.podium-silver { height: 160px; }
.podium-bronze { height: 140px; }

.pato-de-ouro {
    background: linear-gradient(135deg,
        rgba(var(--color-secondary-rgb), 0.15),
        rgba(var(--color-pato-border-rgb), 0.08));
}

.pato-de-ouro-row {
    background-color: rgba(var(--color-secondary-rgb), 0.1) !important;
}

/* ── 10. Utilitários ──────────────────────────────────────────── */
.avatar-xs  { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.avatar-sm  { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.avatar-md  { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.avatar-bg  { background-size: cover; background-position: center; background-repeat: no-repeat; }

.icon-xs    { height: 12px; }
.icon-md    { width: 50px;  height: 50px; }

.progress-sm { height: 10px; }
.progress-md { height: 12px; }

.text-gold      { color: var(--color-secondary) !important; }
.text-gold-dark { color: var(--color-pato-border) !important; }

/* ── 11. Status Effects ───────────────────────────────────────── */
body.effect-quatificador *:not(i):not(button):not(script) {
    color: transparent !important;
    text-shadow: 0 0 0 #333 !important;
}

body.effect-quatificador a, body.effect-quatificador p, body.effect-quatificador h1 {
    content: "QUACK!" !important;
    color: #ffc107 !important;
    text-shadow: none !important;
    visibility: visible !important;
}

body.effect-constipato :is(a, h1, h2, h3, h4, h5, p) {
    animation: duck-flu 1s infinite;
    overflow-x: hidden;
}

@keyframes duck-flu {
    0%, 15%, 30%  { transform: translate(0, 0); }
    2%, 6%, 10%   { transform: translate(-2px,  1px) rotate(-1deg); }
    4%, 8%, 12%   { transform: translate( 2px, -1px) rotate( 1deg); }
    16%, 45%      { transform: translate(0, 0) rotate(0deg); }
    47% { transform: translate(-3px, -2px) rotate(-2deg); }
    49% { transform: translate( 3px,  2px) rotate( 2deg); }
    51% { transform: translate(-1px,  3px) rotate(-1deg); }
    53% { transform: translate( 2px, -3px) rotate( 3deg); }
    55%, 100% { transform: translate(0, 0); }
}

body.effect-mirror      { transform: scaleX(-1); overflow-x: hidden; }
body.effect-depresopato { filter: grayscale(100%); }

body.effect-comic_sans * {
    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}

/* ── 12. Dashboard ────────────────────────────────────────────── */
.dash-hero {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.06) 0%,
        rgba(var(--color-secondary-rgb), 0.08) 100%);
    border-left: 4px solid var(--color-secondary) !important;
}

/* Cabeçalho consistente dos cartões do dashboard (Baralho, Pato Principal,
   Pato-etas, Acesso Rápido, etc.). Base = dourado da marca; variantes para
   painéis de ação (PvP vermelho, Jogos azul). */
.dash-card-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: var(--color-dark);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.2;
}
.dash-card-header i { font-size: .95rem; flex-shrink: 0; }
.dash-card-header .dash-header-extra { margin-left: auto; text-transform: none; letter-spacing: 0; }
.dash-card-header--pvp  { background: linear-gradient(135deg, #dc3545, #a52834); color: #fff; }
.dash-card-header--game { background: linear-gradient(135deg, var(--color-primary), #0d6efd); color: #fff; }

/* ── Painéis dos modais (Items / Cenário / Armada) ───────────────── */
/* Título de secção on-brand (substitui os <h6 text-muted> apagados) */
.panel-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-primary);
    margin-bottom: .6rem;
}
.panel-title > i { color: var(--color-accent); }
.panel-title .panel-note {
    margin-left: auto;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: .65rem;
    color: #9aa0a6;
}
.panel-title .badge { text-transform: none; letter-spacing: 0; }

/* Estado vazio amigável (com pato) */
.panel-empty {
    text-align: center;
    color: #9aa0a6;
    padding: 2rem 1rem;
}
.panel-empty .duck-emoji { height: 2.4rem; opacity: .55; margin-bottom: .5rem; }

/* Cartões de inventário (painel Items) */
.inventory-item {
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, opacity .2s, transform .15s;
}
.inventory-item[draggable="true"]:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 3px 10px rgba(var(--color-dark-rgb), .12);
    transform: translateY(-2px);
}

/* Botões de ação do dashboard — tamanho fixo, independente do texto. */
.dash-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 84px;
    padding: 10px 6px;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    transition: transform .15s, box-shadow .15s;
}
.dash-action-btn > i   { font-size: 1.3rem; height: 28px; display: flex; align-items: center; }
.dash-action-btn > img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.dash-action-btn > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    width: 100%;
}
.dash-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.18);
}
.dash-action-btn:disabled,
.dash-action-btn[disabled] { opacity: .55; transform: none; box-shadow: none; }

.ranking-entry {
    transition: background-color .15s;
}

.ranking-entry:hover {
    background-color: rgba(var(--color-secondary-rgb), 0.12) !important;
}

/* ───────────────────────────────────────────────────────────────
   22. Wordle — Pato Wordle do Dia
   ─────────────────────────────────────────────────────────────── */

.wordle-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    max-width: 330px;
}

.wordle-row {
    display: flex;
    gap: 5px;
}

.wordle-tile {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #d3d6da;
    border-radius: 4px;
    background: #fff;
    color: #1a1a1b;
    transition: transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
    line-height: 1;
    user-select: none;
}

/* Estados das tiles */
.wordle-tile-correct {
    background: #6aaa64 !important;
    border-color: #6aaa64 !important;
    color: #fff !important;
}
.wordle-tile-present {
    background: #c9b458 !important;
    border-color: #c9b458 !important;
    color: #fff !important;
}
.wordle-tile-absent {
    background: #787c7e !important;
    border-color: #787c7e !important;
    color: #fff !important;
}
.wordle-tile-empty {
    background: #fff;
    border-color: #d3d6da;
    color: #1a1a1b;
}

/* Preenchimento de letra (pop-in subtil) */
.wordle-tile-fill {
    animation: wlTileFill 0.1s ease-out;
    border-color: #878a8c;
}

@keyframes wlTileFill {
    0%   { transform: scale(0.9); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Reveal flip (3D) */
.wordle-tile-reveal {
    animation: wlTileFlip 0.4s ease forwards;
}

@keyframes wlTileFlip {
    0%   { transform: rotateX(0deg); }
    50%  { transform: rotateX(-90deg); }
    100% { transform: rotateX(0deg); }
}

/* Shake para tentativa inválida */
.wordle-row-shake .wordle-tile {
    animation: wlTileShake 0.5s ease;
}

@keyframes wlTileShake {
    0%, 100% { transform: translateX(0); }
    10%      { transform: translateX(-5px); }
    30%      { transform: translateX(5px); }
    50%      { transform: translateX(-4px); }
    70%      { transform: translateX(4px); }
    90%      { transform: translateX(-2px); }
}

/* ═══ Teclado Virtual ═══════════════════════════════════════════ */

.wordle-keyboard {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 2px;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 5px;
}

.kb-key {
    height: 50px;
    min-width: 28px;
    padding: 0 6px;
    border: none;
    border-radius: 4px;
    background: #d3d6da;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    max-width: 42px;
    color: #1a1a1b;
    transition: background-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.kb-key:hover  { background: #c0c3c7; }
.kb-key:active { transform: scale(0.94); }

.kb-wide {
    flex: 1.5 1 0;
    max-width: 65px;
    font-size: 0.7rem;
}

/* Estados das teclas */
.kb-key-correct { background: #6aaa64 !important; color: #fff !important; }
.kb-key-present { background: #c9b458 !important; color: #fff !important; }
.kb-key-absent  { background: #787c7e !important; color: #fff !important; }
.kb-key-empty   { background: #d3d6da; }

/* ═══ Responsivo ════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .wordle-tile {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    .kb-key {
        height: 44px;
        font-size: 0.7rem;
        max-width: 34px;
        padding: 0 3px;
    }
    .kb-wide {
        max-width: 52px;
        font-size: 0.6rem;
    }
}

/* Raridade "épico" (cenários, items) — Bootstrap não tem .bg-purple nativo */
.bg-purple {
    background-color: #9b59b6 !important;
    color: #fff !important;
}