/* raid.css: modo Raide (menu, painel do chefe, caido, tela final). Usa as variaveis de css/style.css. */

/* menu: 4 modos de jogo */
.modes { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; }
@media (max-width: 960px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
@media (max-height: 520px) { .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* forma de poder do Raide (aparece sob os modos) */
.raidPower { max-width: 1000px; margin: 8px auto 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.raidPower[hidden] { display: none; }
.rpLabel { font-size: 14px; color: var(--mut); font-weight: 700; }
.rpBtns { display: flex; gap: 8px; flex-wrap: wrap; }
.rpBtn { display: flex; flex-direction: column; gap: 1px; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--panel-b); background: var(--panel); text-align: left; min-height: 44px; transition: border-color 0.15s, transform 0.12s; }
.rpBtn b { font-size: 15px; color: #fff; }
.rpBtn span { font-size: 12px; color: var(--mut); }
.rpBtn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.45); }
.rpBtn.sel { border-color: #7fd8ff; background: rgba(40, 70, 120, 0.85); box-shadow: 0 0 14px rgba(127, 216, 255, 0.35); }
.rpBtn.sel b { color: #bff4ff; }
.rpBtn.locked { cursor: not-allowed; opacity: 0.75; }
.rpNote { width: 100%; text-align: center; font-size: 12px; color: var(--mut); }
.rpNote[hidden] { display: none; }

/* painel do chefe no topo */
body.raidOn #banner { top: 112px; }
body.raidOn #toast { top: 160px; }
.raidHud { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: clamp(260px, 44vw, 600px); padding: 6px 10px 7px; border-radius: 14px;
  background: rgba(12, 18, 40, 0.86); border: 2px solid rgba(127, 216, 255, 0.45); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); pointer-events: auto; }
.raidHud[hidden] { display: none; }
.rhTop { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rhName { color: #bff4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhTypes { display: flex; gap: 4px; }
.rhType { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; color: #10142a; }
.rhClock { margin-left: auto; font-variant-numeric: tabular-nums; color: #e6ecff; font-size: 14px; }
.rhBar { position: relative; height: 16px; margin-top: 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.6); }
.rhBar i { position: absolute; left: 0; top: 0; bottom: 0; }
.rhLag { background: rgba(255, 240, 200, 0.75); }
.rhFill { background: linear-gradient(180deg, #ff6a5a, #c8283a); }
.rhM { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.85); }
.rhM.r70 { left: 70%; } .rhM.r35 { left: 35%; }
.rhPct { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 #000; }
.rhBrk { position: relative; height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.rhBrk i { position: absolute; left: 0; top: 0; bottom: 0; background: #ffd84a; }
.rhBrk.broken i { animation: rhBlink 0.3s infinite alternate; }
.rhBrk.lock i { background: #6b6b80; }
.rhBrkL { position: absolute; right: 4px; top: -1px; font-size: 8px; line-height: 9px; color: #fff; opacity: 0.85; }
@keyframes rhBlink { from { opacity: 1; } to { opacity: 0.35; } }
.rhRow { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 13px; color: #dfe6ff; }
.rhPhase { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhEnr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rhEnr.hot { color: #ff7a7a; font-weight: 700; }
.rhTries { color: #ff6a8a; font-size: 16px; letter-spacing: 1px; }
.rhCast { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); font-size: 15px; font-weight: 700; color: #ffd0d0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); white-space: nowrap; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.rhCast.on { opacity: 1; }
.rhInfo { margin-top: 3px; font-size: 13px; color: #bff4ff; text-align: center; }
.rhInfo[hidden] { display: none; }
.raidHud.pre .rhBar, .raidHud.pre .rhBrk { opacity: 0.55; }

/* caido: progresso e sangramento */
.raidDown { position: absolute; left: 50%; bottom: 190px; transform: translateX(-50%); width: min(420px, 86vw); padding: 8px 14px; border-radius: 14px; text-align: center;
  background: rgba(30, 12, 26, 0.86); border: 2px solid rgba(255, 120, 140, 0.6); pointer-events: auto; }
.raidDown[hidden] { display: none; }
.raidDown b { display: block; font-size: 15px; color: #ffd0d8; }
.rdBar { height: 10px; margin: 6px 0 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.rdBar i { display: block; height: 100%; width: 0; background: #6dff9a; transition: width 0.1s linear; }
.raidDown span { font-size: 12px; color: #ffb0b0; }

/* tela final */
.raidXpNote { font-size: 13px; color: var(--mut); text-align: center; padding: 6px; }
.raidTbl td.c2 { font-variant-numeric: tabular-nums; }

/* celular: painel compacto */
@media (max-width: 700px) {
  .raidHud { width: min(58vw, 340px); padding: 4px 7px 5px; top: 6px; }
  .rhTop { font-size: 12px; } .rhTypes { display: none; } .rhClock { font-size: 11px; }
  .rhBar { height: 12px; } .rhPct { font-size: 10px; line-height: 12px; }
  .rhRow { font-size: 10px; gap: 6px; } .rhTries { font-size: 12px; }
  .rhInfo { font-size: 10px; } .rhCast { font-size: 12px; }
  body.raidOn #banner { top: 92px; } body.raidOn #toast { top: 128px; }
  .raidDown { bottom: 150px; }
}
@media (max-height: 520px) {
  .raidHud { top: 4px; } .rhRow { margin-top: 2px; } .rhInfo { display: none; }
  body.raidOn #banner { top: 86px; }
  .raidDown { bottom: 120px; }
}
/* celular em pe: o painel desce para baixo dos botoes do topo */
@media (max-width: 520px) {
  .raidHud { top: 124px; width: 74vw; }
  body.raidOn #banner { top: 206px; } body.raidOn #toast { top: 244px; }
}
/* celular deitado: o placar de eventos sai da frente do painel do chefe (os avisos continuam no centro) */
@media (max-height: 520px) { body.raidOn #feed { display: none; } }