/* Tela de combate no desenho da página inicial (Leo, 02/10/2026). Backup do visual anterior em design/backup-eclipse-2026-10-02-antes-design-combate
   (ou a tag git "backup-antes-design-combate"). Para reverter: apague este arquivo e a linha dele no index.html.
   Respeita o que é específico do combate: tamanho e layout das cartas, animações dos golpes, cena de duelo, cores de vida (rosa) e mana (azul).
   Só visual; carregado por último. */

/* ---------- 1. HUDs: moldura dourada, retrato grande como medalhão ---------- */
#gameView .hud {
  background: linear-gradient(180deg, #1b1424f2, #0f0b15f2); border: 1px solid #e8c98b55; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #120d18, inset 0 0 0 4px #e8c98b22, 0 12px 28px -10px #000;
}
/* retrato maior (era 44 px): sai um pouco da moldura, como um medalhão; o HUD não cresce, então as cartas continuam do mesmo tamanho */
#gameView .hud .portrait {
  width: 84px; height: 84px; margin: -10px 0 -10px -4px; position: relative; z-index: 3; border-radius: 50%; flex: none; background-size: cover; background-position: center top;
  border: 2px solid #e8c98b; box-shadow: 0 0 0 3px #120d18, 0 0 0 4px #e8c98b66, 0 10px 22px -4px #000, 0 0 24px -4px #e8c98b66;
}
#gameView .hud .hudName { width: 220px; min-width: 220px; }
#gameView .hud .hudName small { font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .26em; color: #e8c98b; text-transform: uppercase; }
#gameView .hud .hudName h3 { font: 700 26px/1 var(--e-display, 'Grenze Gotisch', Georgia, serif); color: #f1e6cc; letter-spacing: .01em; text-shadow: 0 2px 8px #000; }
#gameView .hud .stats b { font-family: var(--e-display, Georgia, serif); font-size: 26px; letter-spacing: .02em; }
#gameView .hud .stats small { font: 500 11.5px var(--e-body, sans-serif); letter-spacing: .22em; color: #e8c98b; }
#gameView .hud .lifeTrack { height: 9px; border-radius: 2px; background: #0e0a14; border: 1px solid #e8c98b2e; box-shadow: inset 0 1px 3px #000a; }
@media (min-width: 761px) and (max-height: 780px) { #gameView .hud .portrait { width: 72px; height: 72px; margin-block: -8px; } #gameView .hud .hudName h3 { font-size: 23px; } }
@media (max-width: 760px) { #gameView .hud .portrait { width: 52px; height: 52px; margin: -4px 0; } #gameView .hud .hudName h3 { font-size: 18px; } }

/* ---------- 2. Selo de vez, rounds e botões ---------- */
#gameView .turnBadge {
  font: 700 22px/1 var(--e-display, 'Grenze Gotisch', Georgia, serif); letter-spacing: .22em; text-transform: uppercase; color: #1d1218;
  background: linear-gradient(180deg, #f0d28d, #d3a955); border: 1px solid #f3d896; border-radius: 4px; padding: 9px 26px;
  box-shadow: 0 8px 18px -8px #000, inset 0 0 0 3px #ffffff00, inset 0 1px 0 #fff8, 0 0 24px -6px #e8c98b88;
}
#gameView .roundInfo small { font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .26em; color: #e8c98b; }
#gameView .rounds span { border-radius: 3px; border: 1px solid #e8c98b55; background: linear-gradient(180deg, #1f1727, #120d18); font-family: var(--e-display, Georgia, serif); color: #f1e6cc; }
#gameView .rounds span.win { border-color: #8fd9a8; color: #8fd9a8; } #gameView .rounds span.loss { border-color: #ff8f9f; color: #ff8f9f; }
#gameView button:not(.card):not(.cxInfo) {
  border-radius: 4px; border: 1px solid #e8c98b55; background: linear-gradient(180deg, #1f1727, #120d18); color: #f1e6cc;
  font: 700 14.5px/1.1 var(--e-display, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 1px 0 #ffffff12, 0 6px 14px -8px #000;
  transition: border-color .18s, color .18s, transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
#gameView button:not(.card):hover:not(:disabled) { border-color: #e8c98bcc; color: #fff6e0; transform: translateY(-1px); background: linear-gradient(180deg, #2a1f1a, #150e13); box-shadow: 0 10px 20px -10px #000, 0 0 18px -6px #e8c98b88; }
#gameView .feed p, #gameView .turnHint { font-family: var(--e-body, sans-serif); color: #f1e6cc; }

/* ---------- 3. Ficha da carta (clique numa carta): X dentro do modal, desenho do jogo ---------- */
.ciLayout {
  position: relative; border-radius: 4px; padding: clamp(22px, 2.6vw, 34px); max-width: 940px;
  background: linear-gradient(180deg, #1b1424f7, #0f0b15f7); border: 1px solid #e8c98b66;
  box-shadow: inset 0 0 0 4px #120d18, inset 0 0 0 5px #e8c98b1f, 0 40px 90px -20px #000;
}
/* o X sai do canto da tela e fica no canto superior direito do modal */
.ciLayout .ciClose { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 4px; font-size: 16px; padding: 0; z-index: 5;
  background: linear-gradient(180deg, #1f1727, #120d18); border: 1px solid #e8c98b55; color: #f1e6cc; box-shadow: inset 0 1px 0 #ffffff12; }
.ciLayout .ciClose:hover { border-color: #e8c98b; color: #fff6e0; background: linear-gradient(180deg, #2a1f1a, #150e13); }
.ciBody h2 { font: 700 clamp(30px, 3.4vw, 44px)/1 var(--e-display, 'Grenze Gotisch', Georgia, serif); color: #f1e6cc; letter-spacing: .01em; text-shadow: 0 2px 14px #000a; padding-right: 40px; }
.ciTags span { border-radius: 3px; font: 500 12px var(--e-body, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.ciClan { font: 500 13px var(--e-body, sans-serif); letter-spacing: .22em; text-transform: uppercase; }
.ciNumbers > div { border-radius: 4px; border-color: #e8c98b2e; box-shadow: inset 0 0 0 3px #120d18, inset 0 0 0 4px #e8c98b18; }
.ciNumbers b { font-family: var(--e-display, Georgia, serif); font-size: 32px; }
.ciNumbers small { font: 500 11px var(--e-body, sans-serif); color: #e9e1f0; letter-spacing: .2em; }
.ciNumbers .lvl b { color: #ffd36b; }
.ciBlock { border-radius: 4px; background: linear-gradient(180deg, #1a1322e6, #100b16e6); border: 1px solid #e8c98b2e; box-shadow: inset 0 0 0 3px #120d18, inset 0 0 0 4px #e8c98b18; }
.ciBlock h4 { font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .22em; color: #e8c98b; }
.ciBlock h4 em { color: #e9e1f0; }
.ciBlock p { font: 400 17px/1.45 var(--e-body, 'Alegreya Sans', sans-serif); color: #f1e6cc; }
.ciBlock small, .ciHint { color: #d9cfe3; }
.ciLinks li { border-radius: 3px; }
.ciCard { border-radius: 8px; }
@media (max-width: 760px) { .ciLayout { padding: 18px 16px; } }

/* ---------- Ajuste de proporção (Leo, 02/10/2026): HUD da largura exata das cartas e fontes menores ---------- */
#gameView .hud, #gameView .midLine { width: max(calc(var(--cw) * 4 + var(--gap) * 3), min(100%, 720px)) !important; max-width: 100%; box-sizing: border-box; }
#gameView .hud { padding-inline: 16px; gap: 12px; }
#gameView .hud .hudName { width: 190px; min-width: 190px; }
#gameView .hud .hudName small { font-size: 10.5px; letter-spacing: .22em; }
#gameView .hud .hudName h3 { font-size: 20px; }
#gameView .hud .stats { gap: 18px; }
#gameView .hud .stats b { font-size: 19px; }
#gameView .hud .stats b span { font-size: 12px; }
#gameView .hud .stats small { font-size: 9.5px; letter-spacing: .18em; }
#gameView .hud .lifeTrack { height: 7px; }
#gameView .turnBadge { font-size: 15px; letter-spacing: .18em; padding: 7px 18px; }
#gameView .roundInfo small { font-size: 10.5px; letter-spacing: .2em; }
#gameView .rounds span { font-size: 13px; }
#gameView button:not(.card):not(.cxInfo) { font-size: 12px; letter-spacing: .1em; padding: 7px 13px; }
#gameView .turnHint, #gameView .feed p { font-size: 14px; }
@media (min-width: 761px) and (max-height: 780px) { #gameView .hud .hudName h3 { font-size: 18px; } #gameView .hud .stats b { font-size: 17px; } }
@media (max-width: 760px) { #gameView .hud, #gameView .midLine { width: 100% !important; } #gameView .hud .hudName h3 { font-size: 16px; } #gameView .turnBadge { font-size: 13px; padding: 5px 12px; } }

/* Vida e mana embaixo das cartas: números com o máximo ("12/12") e barras em segmentos (1 por ponto), mais fáceis de contar (Leo, 05/10/2026). */
#gameView .hud .stats b span{font-size:.62em;opacity:.75;margin-left:1px;letter-spacing:0}
#gameView .hud .lifeTrack{height:12px;position:relative;overflow:hidden}
#gameView .hud .lifeTrack::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--seg,15) - 2px),#0e0a14 calc(100% / var(--seg,15) - 2px) calc(100% / var(--seg,15)))}
#gameView .hud .lifeTrack.mana{--seg:12}
#gameView .hud .energy b{display:inline-flex;align-items:center;gap:4px}

/* Etiqueta DIA / NOITE ao lado dos rounds (Leo, 05/10/2026). */
#gameView .rounds .cycle{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 9px 2px 6px;border-radius:999px;font:800 10.5px/1.4 var(--e-body,'Alegreya Sans',sans-serif);letter-spacing:.16em;font-style:normal;vertical-align:middle;border:1px solid #ffffff2a}
#gameView .rounds .cycle::before{content:'';width:9px;height:9px;border-radius:50%}
#gameView .rounds .cycle.day{color:#ffe7a8;background:#5a3d08aa;border-color:#e8c98b66}
#gameView .rounds .cycle.day::before{background:radial-gradient(circle at 40% 40%,#fff6c9,#ffc74d);box-shadow:0 0 6px #ffc74d}
#gameView .rounds .cycle.night{color:#cfe0ff;background:#101c3aaa;border-color:#78a0e066}
#gameView .rounds .cycle.night::before{background:radial-gradient(circle at 65% 40%,#0b1226 38%,#cfe0ff 40%);box-shadow:0 0 6px #7da7f0}

/* Dia e Noite no combate (Leo, 07/10/2026): ambiente e aviso, só quando há carta em campo com efeito de Dia ou de Noite */
#gameView{position:relative}
.cycleFx{position:absolute;inset:0;pointer-events:none}
.cycleFx i{position:absolute;inset:0;display:block;opacity:0;z-index:0;overflow:hidden;transition:opacity .9s ease}
.cycleFx.day .cfSky{opacity:1;background:radial-gradient(ellipse 70% 55% at 88% -6%,#ffc74d55,#ffa63a1f 45%,transparent 72%),linear-gradient(180deg,#5a3d0818,transparent 40%)}
.cycleFx.day .cfBody{opacity:1;inset:-18% -14% auto auto;width:46vmin;height:46vmin;border-radius:50%;background:conic-gradient(from 0deg,#ffd97a00,#ffd97a40,#ffd97a00 8%,#ffd97a40 16%,#ffd97a00 24%,#ffd97a40 32%,#ffd97a00 40%,#ffd97a40 48%,#ffd97a00 56%,#ffd97a40 64%,#ffd97a00 72%,#ffd97a40 80%,#ffd97a00 88%,#ffd97a40 96%,#ffd97a00);-webkit-mask:radial-gradient(circle,#000 18%,transparent 70%);mask:radial-gradient(circle,#000 18%,transparent 70%);animation:cfRays 60s linear infinite}
.cycleFx.night .cfSky{opacity:1;background:radial-gradient(ellipse 80% 60% at 10% -8%,#4f7ae033,transparent 65%),linear-gradient(180deg,#0a1230aa,#07091c55 55%,transparent)}
.cycleFx.night .cfBody{opacity:1;inset:17% auto auto 2.6%;width:min(9vmin,90px);height:min(9vmin,90px);border-radius:50%;background:radial-gradient(circle at 66% 38%,transparent 0 46%,#dfe9ff 47%);box-shadow:0 0 28px 6px #7da7f066;filter:drop-shadow(0 0 14px #9cc0ff88);animation:cfBob 8s ease-in-out infinite}
.cycleFx.night .cfStars{opacity:1;background:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.4px 1.4px at 28% 12%,#cfe0ff,transparent),radial-gradient(1.8px 1.8px at 46% 28%,#fff,transparent),radial-gradient(1.4px 1.4px at 63% 10%,#cfe0ff,transparent),radial-gradient(1.6px 1.6px at 78% 24%,#fff,transparent),radial-gradient(1.4px 1.4px at 90% 14%,#cfe0ff,transparent),radial-gradient(1.2px 1.2px at 36% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 84% 44%,#cfe0ff,transparent);animation:cfTwinkle 4.5s ease-in-out infinite}
.cycleFx.hot.day .cfSky{background:radial-gradient(ellipse 70% 55% at 88% -6%,#ffc74d77,#ffa63a2e 45%,transparent 72%),linear-gradient(180deg,#5a3d0826,transparent 40%)}
.cfBanner{position:absolute;z-index:6;left:50%;top:50%;translate:-50% -50%;opacity:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 26px 8px;border-radius:14px;font:800 clamp(20px,2.6vw,30px)/1.1 var(--e-body,'Alegreya Sans',system-ui,sans-serif);letter-spacing:.22em;text-transform:uppercase;border:1px solid #ffffff2a;backdrop-filter:blur(4px)}
.cfBanner::after{content:attr(data-sub);font:600 12px/1.3 var(--e-body,'Alegreya Sans',system-ui,sans-serif);letter-spacing:.04em;text-transform:none;opacity:.85}
.cycleFx.day .cfBanner{color:#ffe7a8;background:#4a2f0acc;box-shadow:0 0 30px #ffc74d44}
.cycleFx.night .cfBanner{color:#cfe0ff;background:#0c1634d9;box-shadow:0 0 30px #5f8cf044}
.cfBanner.show{animation:cfBanner 2.6s ease both}
@keyframes cfBanner{0%{opacity:0;transform:scale(.92)}14%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0;transform:scale(1.03)}}
@keyframes cfRays{to{transform:rotate(360deg)}}
@keyframes cfBob{50%{transform:translateY(5px)}}
@keyframes cfTwinkle{50%{opacity:.55}}
#gameView > :not(.cycleFx){position:relative;z-index:1}
.cycleFx i{contain:paint}
@media(prefers-reduced-motion:reduce){.cycleFx .cfBody,.cycleFx .cfStars{animation:none}.cfBanner.show{animation:none;opacity:1}}
.reduced .cycleFx .cfBody,.reduced .cycleFx .cfStars{animation:none}.reduced .cfBanner.show{animation:none;opacity:1}