/* =====================================================================
   Conquiste o Mundo — UX da partida (match-ux.js)
   Seletor de tropas, dicas, foco no ataque, último combate, painel de
   jogadores, tabela de trocas, rótulos no mapa e layouts de celular.
   ===================================================================== */

[hidden] { display: none !important; }

/* ---------------- Seletor de tropas ---------------- */
.troop-picker {
    --tp-accent: #00e5ff;
    position: fixed;
    z-index: 450;
    /* Centro da área do mapa (colunas 280px | mapa | 300px) */
    left: calc(50% - 10px);
    bottom: 28px;
    transform: translateX(-50%);
    width: min(410px, calc(100vw - 24px));
    background: #080d1c;
    border: 1.5px solid var(--tp-accent);
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.75), 0 0 22px color-mix(in srgb, var(--tp-accent) 25%, transparent);
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: tpIn 0.18s ease-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.troop-picker[data-kind="attack"] { --tp-accent: #ff3d57; }
.troop-picker[data-kind="occupation"] { --tp-accent: #00e676; }
.troop-picker[data-kind="fortify"] { --tp-accent: #3399ff; }

@keyframes tpIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tp-head { display: flex; flex-direction: column; gap: 2px; }

.tp-title {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--tp-accent);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.tp-sub b { color: var(--text-light); }

.tp-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
}

.tp-btn {
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    border: 1px solid rgba(100, 120, 160, 0.55);
    background: rgba(28, 38, 60, 0.9);
    color: var(--text-light);
    font-family: var(--font-heading);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.tp-btn:hover:not(:disabled) { border-color: var(--tp-accent); }
.tp-btn:active:not(:disabled) { transform: scale(0.94); background: rgba(45, 60, 92, 0.95); }
.tp-btn:disabled { opacity: 0.32; cursor: default; }
.tp-step { font-size: 1.6rem; line-height: 1; font-weight: 700; }
.tp-minmax { min-width: 44px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.5px; }

.tp-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.tp-value {
    background: transparent;
    border: none;
    border-bottom: 1.5px dashed rgba(140, 156, 184, 0.5);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    min-width: 64px;
    padding: 0 6px;
    cursor: text;
    text-shadow: 0 0 12px color-mix(in srgb, var(--tp-accent) 60%, transparent);
}

.tp-input {
    width: 92px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    background: rgba(5, 10, 25, 0.9);
    border: 1.5px solid var(--tp-accent);
    border-radius: 8px;
    padding: 2px 4px;
    outline: none;
}

.tp-unit {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tp-range {
    text-align: center;
    font-size: 0.64rem;
    color: var(--text-muted);
    margin-top: -4px;
}

.tp-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.tp-actions .btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.74rem;
    letter-spacing: 0.5px;
}

.tp-cancel { flex: 0 1 auto; }
/* Confirmar sempre na ponta direita do seletor */
.tp-confirm {
    flex: 1 1 auto;
    margin-left: auto;
    background: var(--tp-accent);
    color: #04070f;
    font-weight: 800;
    box-shadow: 0 0 14px color-mix(in srgb, var(--tp-accent) 45%, transparent);
}
.tp-confirm:hover { filter: brightness(1.12); background: var(--tp-accent); }

.tp-extra {
    flex: 0 1 auto;
    background: linear-gradient(135deg, #ff1744, #ff5252);
    border: 1.5px solid #ff1744;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Com o seletor aberto, a legenda de continentes sai de baixo dele */
body.picker-open .continents-legend { visibility: hidden; }

/* ---------------- Prévia no mapa ---------------- */
#map-canvas .army-badge-group.preview-dest,
#map-canvas .army-badge-group.preview-dest circle,
#map-canvas .army-badge-group.preview-dest text,
#map-canvas .army-badge-group.preview-src,
#map-canvas .army-badge-group.preview-src circle,
#map-canvas .army-badge-group.preview-src text { display: inline !important; opacity: 1 !important; }

#map-canvas .army-badge-group.preview-dest .army-badge-circle {
    stroke: #00e676 !important;
    stroke-width: 2.6px !important;
    filter: drop-shadow(0 0 6px #00e676) !important;
}

#map-canvas .army-badge-group.preview-src .army-badge-circle {
    stroke: #ffb300 !important;
    stroke-width: 2.4px !important;
    filter: drop-shadow(0 0 5px #ffb300) !important;
}

#map-canvas .badge-preview-tag {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 900;
    fill: #00e676;
    paint-order: stroke;
    stroke: rgba(3, 6, 14, 0.9);
    stroke-width: 2.6px;
    pointer-events: none;
}

#map-canvas .preview-src .badge-preview-tag { fill: #ffb300; }

/* ---------------- Foco no ataque / deslocamento ---------------- */
#map-canvas .country-path,
#map-canvas .territory-bloc,
#map-canvas .army-badge-group,
#map-canvas .terr-name-label { transition: opacity 0.25s ease; }

#map-canvas.focus-mode .country-path:not(.focus-keep),
#map-canvas.focus-mode .territory-bloc:not(.focus-keep) {
    opacity: 0.2 !important;
    filter: grayscale(0.7) !important;
}

#map-canvas.focus-mode .army-badge-group:not(.focus-keep) { opacity: 0.28; }
#map-canvas.focus-mode .terr-name-label:not(.focus-keep) { opacity: 0.25; }
#map-canvas.focus-mode .continent-labels-layer { opacity: 0.35; }

/* ---------------- Rótulos no mapa ---------------- */
#map-canvas .terr-name-label {
    display: none;
    font-family: var(--font-body);
    font-size: var(--name-fs, 7px);
    font-weight: 700;
    fill: #e8eef9;
    paint-order: stroke;
    stroke: rgba(3, 6, 14, 0.92);
    stroke-width: 0.3em;
    stroke-linejoin: round;
    dominant-baseline: hanging;
    pointer-events: none;
}

/* Nomes: só com o botão "Nomes" ligado (padrão: desligado) ou com o painel de cartas aberto */
#map-canvas.names-on .terr-name-label,
#map-canvas.show-names .terr-name-label { display: inline; }
#map-canvas.names-on:not(.names-zoomed) .terr-name-label { font-size: var(--name-fs-forced, 8px); }

#map-canvas.show-names:not(.names-zoomed) .terr-name-label { font-size: var(--name-fs-forced, 8px); }

/* Territórios das cartas na mão do jogador: dourados e em destaque */
#map-canvas .terr-name-label.card-terr { fill: #ffd54f; font-weight: 900; }

#map-canvas .army-badge-group.card-terr .army-badge-circle {
    stroke: #ffd54f !important;
    stroke-width: 2.4px !important;
    stroke-dasharray: 3 2;
    filter: drop-shadow(0 0 5px #ffd54f) !important;
}

#map-canvas .continent-label {
    font-family: var(--font-heading);
    font-size: var(--cont-fs, 12px);
    fill: var(--cc, #8c9cb8);
    opacity: 0.78;
    paint-order: stroke;
    stroke: rgba(3, 6, 14, 0.88);
    stroke-width: 0.22em;
    stroke-linejoin: round;
    letter-spacing: 0.06em;
    pointer-events: none;
}

#map-canvas .continent-label.controlled { opacity: 1; }
#map-canvas .continent-label .cl-name { font-size: 0.6em; font-weight: 700; }
#map-canvas .continent-label .cl-bonus { font-size: 1.1em; font-weight: 900; }
#map-canvas .continent-label .cl-owner { font-family: var(--font-body); font-size: 0.58em; font-weight: 800; letter-spacing: 0; }

/* ---------------- Último combate ---------------- */
.last-combat {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    width: 252px;
    background: rgba(8, 13, 28, 0.93);
    border: 1px solid rgba(56, 75, 112, 0.6);
    border-radius: 10px;
    padding: 7px 10px 8px;
    font-size: 0.72rem;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.last-combat.flash { animation: lcFlash 0.7s ease-out; }

@keyframes lcFlash {
    0% { border-color: #ffb300; box-shadow: 0 0 18px rgba(255, 179, 0, 0.55); }
    100% { border-color: rgba(56, 75, 112, 0.6); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); }
}

.lc-head { display: flex; align-items: center; gap: 6px; }

.lc-title {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lc-summary { display: none; font-family: var(--font-heading); font-weight: 800; font-size: 0.7rem; }
.last-combat.collapsed .lc-summary { display: inline; }
.last-combat.collapsed .lc-content,
.last-combat.collapsed .lc-skip { display: none; }
.last-combat.collapsed { width: auto; }

.lc-toggle {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(100, 120, 160, 0.5);
    background: rgba(28, 38, 60, 0.9);
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
}

.lc-fight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
    margin-top: 6px;
    align-items: start;
}

.lc-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    border-left: 3px solid var(--pc);
    padding-left: 6px;
}

.lc-side:last-child {
    border-left: none;
    border-right: 3px solid var(--pc);
    padding: 0 6px 0 0;
    align-items: flex-end;
    text-align: right;
}

.lc-who {
    color: var(--pc);
    font-weight: 800;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-terr { color: var(--text-muted); font-size: 0.66rem; }
.lc-dice { display: flex; gap: 3px; margin: 3px 0 2px; }

.lc-die {
    width: 21px;
    height: 21px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.72rem;
    background: #1b2540;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.lc-die.win { background: #00c853; color: #03130a; border-color: #69f0ae; box-shadow: 0 0 6px rgba(0, 230, 118, 0.55); }
.lc-die.lose { background: #3a1018; color: #ff8a95; border-color: rgba(255, 51, 68, 0.55); text-decoration: line-through; }
.lc-die.idle { opacity: 0.35; }

.lc-loss { font-family: var(--font-heading); font-weight: 800; font-size: 0.78rem; color: var(--text-muted); }
.lc-loss.hit { color: #ff5c6c; }
.lc-vs { align-self: center; color: var(--text-muted); font-weight: 900; font-size: 0.9rem; }

.lc-result {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-light);
    font-weight: 600;
}

.lc-result.conquered { color: #69f0ae; }
.lc-skip { margin-top: 6px; }

/* Dados do overlay: quem venceu cada par */
.die.win { outline: 2px solid #00e676; box-shadow: 0 0 16px rgba(0, 230, 118, 0.9) !important; }
.die.lose { opacity: 0.42; transform: scale(0.86); }

/* ---------------- Interruptores ---------------- */
.ux-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.ux-toggle input { accent-color: #00e5ff; width: 15px; height: 15px; cursor: pointer; }

/* ---------------- Dicas e confirmação ---------------- */
.ux-dialog {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 6, 12, 0.6);
    backdrop-filter: blur(3px);
}

.ux-dialog-card {
    width: min(440px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: rgba(10, 15, 30, 0.98);
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 26px rgba(0, 229, 255, 0.12);
    animation: zoom-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ux-dialog-card h3 {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.ux-dialog-body { font-size: 0.86rem; line-height: 1.5; color: var(--text-light); }
.ux-dialog-body p + p, .ux-dialog-body p + ul { margin-top: 8px; }
.ux-dialog-body b { color: #fff; }

.ux-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ux-dialog-actions .btn { min-height: 44px; padding: 10px 16px; font-size: 0.76rem; }

.ux-tip-kicker {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #00e5ff;
    margin-bottom: 4px;
}

#ux-confirm .ux-dialog-card { border-color: rgba(255, 143, 0, 0.65); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 26px rgba(255, 143, 0, 0.15); }
#ux-confirm-yes { border: 1.5px solid rgba(255, 143, 0, 0.7); color: #ffb74d; background: transparent; }
#ux-confirm-yes:hover { background: rgba(255, 143, 0, 0.12); }

/* ---------------- Reforços e dicas de fase no painel ---------------- */
.reinf-breakdown:empty { display: none; }

.reinf-title {
    font-family: var(--font-heading);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.reinf-list { list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 0.76rem; }

.reinf-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(22, 31, 51, 0.4);
}

.reinf-list li span { color: var(--text-light); min-width: 0; }
.reinf-list li b { font-family: var(--font-heading); color: #80deea; flex: none; }
.reinf-list li.total { background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); }
.reinf-list li.total b { color: #fff; }

.card-chance {
    font-size: 0.74rem;
    line-height: 1.35;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px dashed rgba(255, 213, 79, 0.55);
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.06);
}

.card-chance:empty { display: none; }
.card-chance.earned { border-style: solid; border-color: rgba(0, 230, 118, 0.5); color: #69f0ae; background: rgba(0, 230, 118, 0.07); }

/* Cartões atacante x defensor cabem na coluna (sem estourar a lateral) */
.battle-setup { gap: 8px !important; }
#combat-attacker-card, #combat-defender-card { min-width: 0; overflow-wrap: break-word; }
#combat-attacker-name, #combat-defender-name { font-size: 0.8rem !important; }

.btn-end-attack {
    background: transparent;
    border: 1.5px solid rgba(255, 143, 0, 0.7);
    color: #ffb74d;
    padding: 9px 12px;
    font-size: 0.72rem;
}

.btn-end-attack:hover { background: rgba(255, 143, 0, 0.12); }

/* ---------------- Painel de jogadores ---------------- */
.btn-toggle-panel { display: none; }
.players-panel { gap: 7px; overflow: visible; max-height: none !important; }
/* A lista de jogadores não encolhe (sem rolagem aninhada); quem rola é a coluna */
.sidebar-left .panel-section:first-child { flex-shrink: 0; }
.sidebar-left .log-section { min-height: 150px; }

.pcard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(56, 75, 112, 0.3);
    border-left: 4px solid var(--pc);
    background: rgba(22, 31, 51, 0.25);
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.pcard.is-turn {
    border-color: var(--pc);
    border-left-width: 4px;
    background: rgba(22, 31, 51, 0.65);
    box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 35%, transparent);
}

.pcard.is-out { opacity: 0.45; }
.pcard.is-out .pcard-name { text-decoration: line-through; }

.pcard-top { display: flex; align-items: center; gap: 6px; min-width: 0; }

.pcard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    background: var(--pc);
    box-shadow: 0 0 6px var(--pc);
}

.pcard-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcard-you {
    font-style: normal;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.5);
    border-radius: 4px;
    padding: 0 4px;
    margin-left: 3px;
    vertical-align: 1px;
}

.pcard-turn {
    flex: none;
    font-family: var(--font-heading);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #04070f;
    background: var(--pc);
    border-radius: 10px;
    padding: 2px 7px;
    animation: pcardTurn 1.6s ease-in-out infinite;
}

@keyframes pcardTurn {
    0%, 100% { box-shadow: 0 0 2px var(--pc); }
    50% { box-shadow: 0 0 10px var(--pc); }
}

.pcard-meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.58rem;
    text-transform: uppercase;
}

.pcard-status { color: #9fb3d9; white-space: nowrap; }
.pcard-status.st-ai { color: var(--text-muted); }
.pcard-status.st-off { color: #ff9800; }
.pcard-status.st-out { color: #ff5252; }

.pcard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }

.pcard-stats div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 3px 2px;
    border-radius: 5px;
    background: rgba(5, 10, 20, 0.45);
    line-height: 1.2;
    overflow: hidden;
}

.pcard-stats b { font-family: var(--font-heading); font-size: 0.8rem; color: #fff; }
.pcard-stats small { font-size: 0.55rem; color: var(--text-muted); white-space: nowrap; }

/* Faixa compacta (só no celular) */
.players-strip { display: none; }
.side-backdrop { display: none; }

.pchip {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 14px;
    border: 1px solid rgba(56, 75, 112, 0.45);
    background: rgba(22, 31, 51, 0.55);
    font-size: 0.66rem;
    white-space: nowrap;
}

.pchip.is-turn {
    border-color: var(--pc);
    background: rgba(22, 31, 51, 0.95);
    box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 45%, transparent);
}

.pchip.is-out { opacity: 0.4; text-decoration: line-through; }
.pchip .pcard-dot { width: 8px; height: 8px; }
.pchip-name { font-weight: 700; max-width: 84px; overflow: hidden; text-overflow: ellipsis; color: var(--text-light); }
.pchip-nums { font-family: var(--font-heading); font-size: 0.6rem; color: #cfd8ea; }
.pchip-nums i { font-style: normal; font-size: 0.52rem; color: var(--text-muted); margin: 0 3px 0 1px; }
.pchip-flag { font-size: 0.62rem; }
.pchip-flag.st-off { color: #ff9800; }

/* ---------------- Painel de cartas ---------------- */
.sub-overlay-panel { overflow-y: auto; }

.card-figures-rule {
    border: 1px solid rgba(176, 38, 255, 0.35);
    background: rgba(176, 38, 255, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
}

.cfr-title {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d9a6ff;
    margin-bottom: 6px;
    text-align: center;
}

.cfr-options { display: flex; align-items: center; justify-content: space-around; gap: 6px; }
.cfr-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.68rem; font-weight: 700; color: var(--text-light); }
.cfr-figs { font-size: 1.05rem; letter-spacing: 2px; }
.cfr-or { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; }
.cfr-note { margin-top: 5px; font-size: 0.66rem; color: var(--text-muted); text-align: center; }

.trade-table {
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    padding: 8px 10px 10px;
    background: rgba(0, 229, 255, 0.04);
}

.tt-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 7px;
    font-family: var(--font-heading);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tt-next { color: #00e5ff; }
.tt-next b { color: #fff; font-size: 0.82rem; }

.tt-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.tt-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 5px;
    border-radius: 5px;
    background: rgba(22, 31, 51, 0.5);
    border: 1px solid rgba(56, 75, 112, 0.35);
}

.tt-n { font-size: 0.52rem; color: var(--text-muted); }
.tt-v { font-family: var(--font-heading); font-weight: 800; font-size: 0.8rem; color: var(--text-light); }
.tt-cell.done { opacity: 0.4; }
.tt-cell.done .tt-v { text-decoration: line-through; }

.tt-cell.next {
    background: rgba(0, 229, 255, 0.18);
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
}

.tt-cell.next .tt-v { color: #fff; font-size: 0.92rem; }

.tt-arrow {
    position: absolute;
    bottom: -13px;
    font-size: 0.6rem;
    color: #00e5ff;
    animation: ttBounce 1s ease-in-out infinite;
}

@keyframes ttBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.tt-foot { margin-top: 13px; font-size: 0.62rem; line-height: 1.35; color: var(--text-muted); }

.card-rules-extra {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.66rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* ---------------- Telas médias (tablet deitado, notebook pequeno) ---------------- */
@media (max-width: 1180px) and (min-height: 541px) and (orientation: landscape) {
    .game-layout { grid-template-columns: 230px 1fr 260px; gap: 10px; padding: 10px; }
    .sidebar-left.glass-panel, .sidebar-right.glass-panel { padding: 12px; }
    .sidebar-left .panel-section { padding: 10px; }
    .game-dashboard { padding: 0 12px; gap: 10px; }
    .dash-right { gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .dash-right > * { flex: 0 0 auto; }
    .troop-picker { left: calc(50% - 15px); }
}

/* =====================================================================
   CELULAR — partes comuns (retrato e paisagem)
   A tela da partida vira um "app": ocupa a viewport inteira, sem rolar a
   página; o painel lateral esquerdo vira gaveta.
   ===================================================================== */
@media (max-width: 900px) and (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
    #game-screen.screen {
        position: fixed !important;
        inset: 0;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: hidden;
    }

    .btn-toggle-panel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        padding: 4px 10px;
        font-size: 1rem;
        line-height: 1;
        margin-right: 6px;
    }

    .players-strip {
        display: flex;
        gap: 6px;
        flex: none;
        overflow-x: auto;
        padding: 4px 8px;
        background: rgba(8, 12, 24, 0.94);
        border-bottom: 1px solid var(--border-glass);
        scrollbar-width: none;
        cursor: pointer;
    }

    .players-strip::-webkit-scrollbar { display: none; }

    /* Gaveta: jogadores, objetivo, revoltas e registro */
    .sidebar-left {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 430;
        width: min(330px, 86vw) !important;
        max-width: none !important;
        height: 100dvh !important;
        padding: 14px !important;
        border-radius: 0 12px 12px 0 !important;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }

    body.side-open .sidebar-left { transform: translateX(0); }

    .side-backdrop {
        position: fixed;
        inset: 0;
        z-index: 425;
        background: rgba(0, 0, 0, 0.55);
    }

    body.side-open .side-backdrop { display: block; }

    .sidebar-right {
        height: auto !important;
        overflow-y: auto;
        /* Sem backdrop-filter: o painel de cartas (filho) pode ser position: fixed */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(8, 12, 24, 0.94) !important;
    }

    .action-card { height: auto; gap: 10px; }
    .continents-legend, .map-guide { display: none !important; }
    #player-territories-tooltip { display: none !important; }

    .neon-timer { font-size: 0.95rem; padding: 1px 6px; letter-spacing: 1px; }

    #turn-banner { font-size: 1rem; padding: 10px 22px; letter-spacing: 2px; white-space: nowrap; }

    .modal-content { max-height: calc(100dvh - 24px); overflow-y: auto; }

    /* Dados: painel compacto no topo (o seletor ocupa a base da tela) */
    .dice-overlay { top: 6px; bottom: auto; left: 6px; right: 6px; justify-content: center; }
    .dice-container { width: min(420px, 100%); max-width: none; padding: 10px 12px; }
    .dice-container h3 { font-size: 0.72rem; margin-bottom: 6px; }
    .battle-header { font-size: 0.72rem; margin-bottom: 6px; }
    .dice-tray { height: 46px; margin-bottom: 8px; gap: 12px; }
    .die { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 6px; }
    .dice-group { gap: 6px; }
    .dice-result { font-size: 0.78rem; height: auto; margin-bottom: 6px; }
    #btn-close-dice { padding: 6px 12px; font-size: 0.7rem; }

    /* Chat flutuante: folha na base */
    .floating-window {
        left: 6px !important;
        right: 6px !important;
        top: auto !important;
        bottom: 6px !important;
        width: auto !important;
        height: 60dvh !important;
        min-width: 0;
        resize: none;
    }

    .floating-window.minimized { height: 42px !important; width: auto !important; }
    #toast-container > div { max-width: calc(100vw - 24px) !important; }
}

/* =====================================================================
   CELULAR EM RETRATO
   Cabeçalho em 3 linhas compactas, faixa de jogadores, mapa e painel de
   ações embaixo (rolável). Seletor, cartas e chat abrem como folhas.
   ===================================================================== */
@media (max-width: 900px) and (orientation: portrait) {
    .game-dashboard {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 6px 8px;
        flex: none;
    }

    .dash-left { order: 1; flex: 1 1 auto; min-width: 0; }
    .active-badge { padding: 4px 10px; font-size: 0.78rem; gap: 6px; min-width: 0; }
    #active-player-name { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ideology-label { font-size: 0.52rem; padding: 1px 5px; }

    .dash-center { order: 2; width: 100%; gap: 6px !important; margin: 0 !important; }
    .phase-stepper { flex-direction: row !important; align-items: stretch; max-width: none; width: 100%; gap: 3px; }
    .phase-step { flex: 1; text-align: center; font-size: 0.56rem; letter-spacing: 0; padding: 5px 3px; white-space: nowrap; }

    .dash-right {
        order: 3;
        width: 100%;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        gap: 6px !important;
        scrollbar-width: none;
    }

    .dash-right::-webkit-scrollbar { display: none; }
    .dash-right > * { flex: 0 0 auto; }
    .turn-counter { font-size: 0.62rem; padding: 4px 8px; }
    .dash-right .btn-small { font-size: 0.6rem; padding: 6px 9px; white-space: nowrap; }

    .game-layout {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        padding: 6px !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .map-viewport {
        order: 1;
        flex: 0 0 auto;
        height: clamp(240px, 42dvh, 560px) !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .map-controls { top: 8px; left: 8px; gap: 5px; }
    .map-controls .btn-icon { width: 34px; height: 34px; }
    .map-view-select { max-width: 140px; font-size: 0.6rem; padding: 6px 8px; }

    .last-combat { top: auto; bottom: 8px; right: 8px; width: min(252px, calc(100% - 16px)); }

    .sidebar-right { order: 2; flex: 1 1 auto; min-height: 0; padding: 12px !important; }

    .troop-picker {
        left: 6px;
        right: 6px;
        bottom: 6px;
        width: auto;
        transform: none;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        animation-name: tpUp;
    }

    /* Cartas: folha na base, com o mapa (e os nomes) visível em cima */
    .sub-overlay-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: min(66dvh, 640px);
        z-index: 420;
        border-radius: 14px 14px 0 0;
        transform: translateY(105%);
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
    }

    .sub-overlay-panel.active { transform: translateY(0); }
}

@keyframes tpUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   CELULAR EM PAISAGEM
   Cabeçalho de 40px, faixa de jogadores, mapa à esquerda e painel de
   ações à direita. O seletor abre sobre o painel de ações, deixando o
   mapa (e a prévia) inteiro à vista.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 540px) {
    .game-dashboard {
        height: 40px;
        flex: none;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 0 8px;
    }

    .active-badge { padding: 3px 8px; font-size: 0.72rem; gap: 6px; }
    .ideology-label { display: none; }
    #active-player-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Indicador online/offline: só o ponto colorido (o texto não cabe nos 40px) */
    #connection-badge-wrapper { margin-left: 6px !important; }
    #connection-badge { padding: 4px !important; }
    #connection-badge-text { display: none; }

    .dash-center { gap: 6px !important; min-width: 0; }
    .phase-stepper { flex-direction: row !important; max-width: 380px; }
    .phase-step { font-size: 0.54rem; padding: 4px 8px; letter-spacing: 0; white-space: nowrap; }

    .dash-right {
        max-width: 44vw;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        gap: 5px !important;
        scrollbar-width: none;
    }

    .dash-right::-webkit-scrollbar { display: none; }
    .dash-right > * { flex: 0 0 auto; }
    .turn-counter { font-size: 0.58rem; padding: 3px 6px; }
    .dash-right .btn-small { font-size: 0.56rem; padding: 4px 7px; white-space: nowrap; }

    .players-strip { padding: 3px 8px; }
    .pchip { padding: 2px 8px 2px 6px; font-size: 0.62rem; }

    .game-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 252px !important;
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        padding: 6px !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .map-viewport { grid-column: 1; grid-row: 1; height: auto !important; min-height: 0 !important; padding: 0 !important; }
    .sidebar-right { grid-column: 2; grid-row: 1; min-height: 0; padding: 10px !important; }

    .map-controls { top: 6px; left: 6px; gap: 4px; }
    .map-controls .btn-icon { width: 30px; height: 30px; }
    .map-view-select { max-width: 130px; font-size: 0.56rem; padding: 5px 8px; }
    .last-combat { top: 6px; right: 6px; width: 236px; }

    .action-card h3 { font-size: 0.86rem; padding-bottom: 6px; margin-bottom: 0; }
    .action-description { font-size: 0.7rem; }
    .battle-setup { flex-direction: column !important; gap: 6px !important; margin: 0 !important; padding: 8px; }
    .vs-divider { display: none !important; }
    .combatant-card { padding: 6px 8px !important; width: 100%; }
    #combat-attacker-name, #combat-defender-name { font-size: 0.72rem !important; margin-bottom: 0 !important; }
    #combat-attacker-details, #combat-defender-details { display: none !important; }
    #btn-finish-turn { margin-top: 14px; padding: 10px; }
    #btn-finish-turn::before { top: -8px; }

    /* Seletor sobre a coluna de ações */
    .troop-picker {
        left: auto;
        right: 6px;
        bottom: 6px;
        width: 252px;
        transform: none;
        padding: 9px 10px 10px;
        gap: 6px;
        animation-name: tpUp;
    }

    .tp-row { gap: 4px; }
    .tp-btn { height: 42px; min-width: 40px; }
    .tp-minmax { min-width: 36px; font-size: 0.56rem; }
    .tp-value { font-size: 1.6rem; min-width: 48px; }
    .tp-input { width: 70px; font-size: 1.3rem; }
    .tp-actions { flex-wrap: wrap; }
    .tp-actions .btn { min-height: 40px; padding: 8px 10px; font-size: 0.66rem; }
    .tp-extra { order: -1; flex: 1 1 100%; }

    /* Cartas: coluna à direita, mapa com nomes à esquerda */
    .sub-overlay-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(360px, 62vw);
        height: 100dvh;
        z-index: 420;
        border-radius: 12px 0 0 12px;
        transform: translateX(105%);
        padding: 12px;
    }

    .sub-overlay-panel.active { transform: translateX(0); }
    .card-item { width: 92px; height: 132px; padding: 8px 6px; }

    .dice-overlay { left: 6px; right: auto; width: min(380px, calc(100vw - 270px)); }

    .floating-window {
        left: auto !important;
        top: 46px !important;
        width: min(420px, 70vw) !important;
        height: auto !important;
    }

    .ux-dialog { padding: 8px; }
    .ux-dialog-card { padding: 14px 16px; }
    .ux-dialog-body { font-size: 0.8rem; }
}

/* ---------------- Painel de jogadores compacto (16/out/2026) ----------------
   Fechado: cor, nome e a vez. Clicar abre facção, bônus/ônus, time, situação e números. */
.pcard { cursor: pointer; padding: 6px 10px; gap: 0; }
.pcard:focus-visible { outline: 2px solid var(--pc); outline-offset: 1px; }
.pcard:hover { background: rgba(22, 31, 51, 0.5); }
.pcard-caret { flex: none; color: var(--text-muted); font-size: 0.7rem; line-height: 1; }
.pcard-more { display: none; flex-direction: column; gap: 5px; margin-top: 6px; }
.pcard.is-open .pcard-more { display: flex; }
.pcard-fx {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--text-light);
}
.pcard-fx li.is-cost { color: #ffc107; }