/* ============ War Zone + War detail pages ============ */
.war-page {
    max-width: 1060px;
    margin: 0 auto;
    padding: 26px 18px 80px;
    color: #e7ecf3;
}

.war-hero {
    text-align: center;
    padding: 26px 0 30px;
}
.war-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.35);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.war-hero h1 {
    font-size: 2.3rem;
    margin: 6px 0 8px;
    color: #f3f6fb;
}
.war-hero .grad {
    background: linear-gradient(90deg, #fbbf24, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.war-hero p {
    max-width: 640px;
    margin: 0 auto;
    color: #9aa7bd;
    font-size: 0.95rem;
    line-height: 1.6;
}

.war-section { margin-top: 34px; }
.war-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 1.15rem;
    color: #e7ecf3;
    margin: 0 0 14px;
}
.war-section-title i { color: #fbbf24; }
.war-sub { font-size: 0.8rem; color: #8b98ad; font-weight: 600; }

/* ---- Hot grid ---- */
.war-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.war-card {
    display: block;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.war-card:hover { border-color: rgba(251, 191, 36, 0.5); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.war-card.hot { border-color: rgba(251, 191, 36, 0.35); background: linear-gradient(180deg, #161c2b, #111827); }
.war-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.war-status {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 1px;
    padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
}
.war-status.live { color: #4ade80; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.4); }
.war-status.ended { color: #fbbf24; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.35); }
.war-battlers { font-size: 0.75rem; color: #8b98ad; display: inline-flex; align-items: center; gap: 5px; }

.war-review-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.war-author { font-weight: 800; color: #f3f6fb; }
.war-anime-title { font-size: 0.92rem; font-weight: 700; color: #4ade80; margin: 6px 0 4px; }
.war-ep { color: #8b98ad; font-weight: 600; font-size: 0.8rem; }
.war-rating { font-size: 0.8rem; color: #facc15; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.war-score { background: #fbbf24; color: #111827; font-weight: 900; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; }
.war-comment {
    font-size: 0.85rem; color: #c6cfdd; line-height: 1.5; margin: 8px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.war-leader-line { font-size: 0.8rem; color: #fde68a; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.war-leader-line.none { color: #8b98ad; }
.war-crown { font-size: 0.95rem; }
.war-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #1f2937; }
.war-countdown { font-size: 0.8rem; font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; }
.war-enter { font-size: 0.78rem; font-weight: 800; color: #fbbf24; }

/* ---- All wars list ---- */
.war-list { display: flex; flex-direction: column; gap: 10px; }
.war-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #111827; border: 1px solid #1f2937; border-radius: 12px;
    padding: 12px 16px; text-decoration: none; color: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.war-row:hover { border-color: rgba(251, 191, 36, 0.45); background: #141b2b; }
.war-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.war-rating-mini { font-size: 0.72rem; color: #facc15; font-weight: 700; }
.war-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 150px; }
.war-leader-mini { font-size: 0.76rem; color: #fde68a; }
.war-leader-mini.none { color: #8b98ad; font-style: italic; }

.war-empty { text-align: center; padding: 70px 20px; color: #8b98ad; }
.war-empty i { font-size: 2.6rem; color: #fbbf24; opacity: 0.7; }
.war-empty h3 { color: #e7ecf3; margin: 12px 0 6px; }
.war-empty a { color: #fbbf24; font-weight: 700; }

/* ============ War detail ============ */
.war-page.detail { max-width: 860px; }
.war-back { display: inline-flex; align-items: center; gap: 7px; color: #8b98ad; font-size: 0.85rem; font-weight: 700; text-decoration: none; margin-bottom: 14px; }
.war-back:hover { color: #fbbf24; }
.war-detail-head { text-align: center; padding: 6px 0 18px; }
.war-detail-head h1 { font-size: 1.8rem; margin: 8px 0 4px; }
.war-timer-line { color: #9aa7bd; font-size: 0.9rem; }
.war-timer-line b { color: #4ade80; font-variant-numeric: tabular-nums; }

/* Original review box — same two-column shape as the /reviews cards:
   content left, fixed-size thumbnail right (128px 2:3 poster for anime,
   360px landscape for episodes). History + Share buttons bottom-right. */
.war-original {
    background: #111827; border: 1px solid #1f2937; border-radius: 16px;
    padding: 18px 20px; margin-bottom: 16px;
    display: grid; grid-template-columns: minmax(0, 1fr) 128px; grid-template-areas: "body art";
    gap: 18px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.war-original.clickable { cursor: pointer; }
.war-original.clickable:hover {
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), 0 8px 30px rgba(0, 0, 0, 0.25);
}
.war-orig-open-hint {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700; color: #9aa7bd;
    background: rgba(255, 255, 255, 0.04); border: 1px solid #243247;
    padding: 5px 10px; border-radius: 999px; white-space: nowrap;
    transition: all 0.15s;
}
.war-original.clickable:hover .war-orig-open-hint {
    color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.08);
}
.war-original:has(.war-orig-art.ep) { grid-template-columns: minmax(0, 1fr) 360px; }
.war-orig-body { grid-area: body; min-width: 0; }
.war-orig-user { display: flex; align-items: center; gap: 10px; }
.war-orig-avatar {
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff; font-size: 1rem; overflow: hidden; flex-shrink: 0;
}
.war-orig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.war-orig-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.war-orig-xp { font-size: 0.74rem; color: #8b98ad; font-weight: 700; }
.war-orig-title { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: 12px; }
.war-orig-stars { font-size: 0.86rem; color: #facc15; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.war-orig-time { color: #8b98ad; font-size: 0.75rem; letter-spacing: 0; }
.war-orig-comment { margin-top: 10px; color: #c6cfdd; font-size: 0.95rem; line-height: 1.55; }
.war-orig-stats { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.war-orig-stat { font-size: 0.82rem; color: #9aa7bd; display: inline-flex; align-items: center; gap: 6px; }
.war-orig-stat i { color: #6b7a93; }
.war-orig-actions { margin-left: auto; display: inline-flex; gap: 8px; }

/* Thumbnail — matches .rv-card art sizing on the feed */
.war-orig-art { grid-area: art; display: block; border-radius: 12px; overflow: hidden; background: #0a101c; }
.war-orig-art.anime { width: 128px; aspect-ratio: 2 / 3; }
.war-orig-art.anime img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.war-orig-art:hover img { transform: scale(1.04); }
.war-orig-art.ep { width: 360px; align-self: start; }
.war-orig-art.ep img { width: 100%; height: auto; max-height: 235px; object-fit: contain; display: block; }
/* No 16:9 episode still: fall back to the anime poster, fill the box */
.war-orig-art.ep.poster { aspect-ratio: 16 / 9; }
.war-orig-art.ep.poster img { max-height: none; height: 100%; object-fit: cover; object-position: center 22%; }
@media (max-width: 639px) {
    .war-original { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art body"; gap: 14px; padding: 14px 16px; }
    .war-original:has(.war-orig-art.ep) { grid-template-columns: 1fr; grid-template-areas: "art" "body"; }
    .war-orig-art.anime { width: 96px; }
    .war-orig-art.ep { width: 100%; border-radius: 0; }
    .war-orig-actions { margin-left: 0; }
}

/* ---- Stance chips (Positive / Negative) ---- */
.war-stance, .rv-stance {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3px;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid; vertical-align: middle;
}
.war-stance.positive, .rv-stance.positive { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); background: rgba(34, 197, 94, 0.1); }
.war-stance.negative, .rv-stance.negative { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(239, 68, 68, 0.1); }

/* Composer stance picker */
.war-stance-pick { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.war-stance-btn {
    flex: 1 1 220px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
    font-size: 0.82rem; font-weight: 700; text-align: left;
    background: #0c131f; border: 1px solid #243247; color: #9aa7bd;
    transition: all 0.14s;
}
.war-stance-btn.pos:hover { border-color: rgba(74, 222, 128, 0.5); color: #4ade80; }
.war-stance-btn.neg:hover { border-color: rgba(248, 113, 113, 0.5); color: #f87171; }
.war-stance-btn.active.pos { border-color: #22c55e; color: #4ade80; background: rgba(34, 197, 94, 0.1); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25); }
.war-stance-btn.active.neg { border-color: #ef4444; color: #f87171; background: rgba(239, 68, 68, 0.1); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25); }

/* ---- Podium ---- */
.war-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.war-podium-slot {
    background: #111827; border: 1px solid #1f2937; border-radius: 14px; padding: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.war-podium-slot.place-1 { border-color: rgba(251, 191, 36, 0.55); background: linear-gradient(180deg, rgba(251,191,36,0.12), #111827); }
.war-podium-slot.place-2 { border-color: rgba(203, 213, 225, 0.4); }
.war-podium-slot.place-3 { border-color: rgba(251, 146, 60, 0.4); }
.war-medal { font-size: 1.9rem; }
.war-podium-name { font-weight: 900; color: #f3f6fb; font-size: 1rem; }
.war-podium-ratio { font-size: 0.8rem; color: #fbbf24; font-weight: 700; }
.war-podium-take { font-size: 0.82rem; color: #c6cfdd; font-style: italic; line-height: 1.45; }
.war-podium-none { grid-column: 1 / -1; text-align: center; color: #8b98ad; padding: 18px; border: 1px dashed #1f2937; border-radius: 12px; }

/* ---- Leader banner (live) ---- */
.war-leader-banner {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
    color: #e7ecf3; font-size: 0.88rem;
}
.war-leader-take { color: #fde68a; font-style: italic; }

/* ---- Entries ---- */
.war-entries { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.war-entry {
    display: flex; gap: 12px; background: #111827; border: 1px solid #1f2937;
    border-radius: 12px; padding: 13px 15px;
}
.war-entry.leader { border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.05); }
.war-entry.podium { border-color: rgba(251, 191, 36, 0.35); }
.war-entry-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; font-size: 0.95rem;
}
.war-entry-avatar img { width: 100%; height: 100%; object-fit: cover; }
.war-entry-body { flex: 1; min-width: 0; }
.war-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.war-entry-name { color: #f3f6fb; }
.war-entry-mine { font-size: 0.72rem; color: #4ade80; font-weight: 700; }
.war-medal-inline { font-size: 0.78rem; font-weight: 800; color: #fbbf24; }
.war-entry-time { margin-left: auto; font-size: 0.72rem; color: #8b98ad; }
.war-entry-text { margin-top: 6px; color: #d6dde8; font-size: 0.93rem; line-height: 1.5; }
.war-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.war-entry-ratio { font-size: 0.78rem; color: #8b98ad; }
.war-entry-ratio b { color: #fbbf24; }
.war-vote { display: flex; gap: 7px; }
.war-vbtn {
    background: #1a2332; border: 1px solid #2b3a52; color: #c6cfdd;
    border-radius: 9px; padding: 5px 12px; font-size: 0.84rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.12s;
}
.war-vbtn:hover { border-color: #4ade80; }
.war-vbtn[data-kind="dislike"]:hover { border-color: #ef4444; }
.war-vbtn.voted { border-color: #22c55e; color: #4ade80; background: rgba(34, 197, 94, 0.12); }
.war-vbtn[data-kind="dislike"].voted { border-color: #ef4444; color: #f87171; background: rgba(239, 68, 68, 0.12); }
.war-login-hint { font-size: 0.8rem; color: #8b98ad; }
.war-login-hint a { color: #fbbf24; font-weight: 700; }
.war-closed-tag { font-size: 0.76rem; color: #8b98ad; }

/* ---- Composer ---- */
.war-composer {
    background: #0f172a; border: 1px solid #1f2937; border-radius: 14px; padding: 16px;
}
.war-composer-title { color: #c6cfdd; font-size: 0.88rem; margin: 0 0 10px; }
.war-composer-title b { color: #fbbf24; }
.war-composer-input {
    width: 100%; background: #0b1220; border: 1px solid #2b3a52; border-radius: 10px;
    color: #e7ecf3; padding: 11px 13px; font-size: 0.92rem; min-height: 64px;
    resize: vertical; outline: none;
}
.war-composer-input:focus { border-color: #fbbf24; }
.war-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.war-composer-submit {
    background: linear-gradient(90deg, #fbbf24, #fb923c); color: #111827;
    border: none; border-radius: 10px; padding: 9px 18px; font-weight: 900; font-size: 0.88rem; cursor: pointer;
}
.war-composer-submit:hover { filter: brightness(1.08); }
.war-composer-submit:disabled { opacity: 0.55; cursor: wait; }
.war-composer-err { color: #f87171; font-size: 0.8rem; }
.war-composer-lock, .war-composer-in { color: #8b98ad; font-size: 0.88rem; margin: 4px 0; }
.war-composer-lock b { color: #fbbf24; }
.war-composer-lock a, .war-composer-in a { color: #fbbf24; font-weight: 700; }
.war-composer-in { color: #4ade80; }
/* ===== Standalone War Zone ===== */
/* Create-a-war panel */
.wz-create { margin-top: 24px; }
.wz-create-toggle {
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #0b0f19;
    border: none; font-weight: 900; font-size: 0.95rem; padding: 11px 22px; border-radius: 999px;
    cursor: pointer; box-shadow: 0 4px 18px rgba(239, 68, 68, 0.35); transition: transform .15s;
}
.wz-create-toggle:hover { transform: translateY(-1px); }
.wz-create-box {
    display: none; margin-top: 12px; background: #141b2b; border: 1px solid #26324a;
    border-radius: 14px; padding: 18px 20px; max-width: 640px;
}
.wz-create-box h3 { margin: 0 0 4px; color: #f3f6fb; font-size: 1.05rem; }
.wz-create-hint { color: #8b98ad; font-size: 0.8rem; margin: 0 0 12px; }
.wz-create-box label { display: block; color: #c3cfe0; font-size: 0.78rem; font-weight: 800; margin: 12px 0 5px; }
.wz-create-box input[type=text], .wz-create-box input:not([type=checkbox]), .wz-create-box textarea, .wz-create-box select {
    width: 100%; box-sizing: border-box; background: #0e1420; border: 1px solid #26324a; color: #eef2f8;
    border-radius: 9px; padding: 10px 12px; font-size: 0.9rem; margin-top: 4px;
}
.wz-create-box textarea { resize: vertical; font-family: inherit; }
.wz-topic-fields { display: grid; gap: 8px; margin-top: 8px; }
.wz-priv-label { display: flex !important; align-items: center; gap: 8px; font-weight: 600; color: #c3cfe0; cursor: pointer; }
.wz-create-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.wz-create-err { color: #f87171; font-size: 0.8rem; }
.wz-create-submit {
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #0b0f19; border: none; font-weight: 900;
    padding: 10px 20px; border-radius: 999px; cursor: pointer;
}
.wz-create-submit:disabled { opacity: 0.55; cursor: wait; }
.wz-create.open .wz-create-box { display: block; animation: wzIn .18s ease; }
@keyframes wzIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Mode / topic chips */
.wz-mode { font-size: 0.7rem; font-weight: 800; color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); padding: 1px 8px; border-radius: 999px; }
.wz-mode.private { color: #f472b6; background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.4); }
.wz-anime, .wz-ep { color: #8b98ad; font-size: 0.8rem; }

/* Declaration panel (duel board top) */
.wz-declaration {
    display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; background: #141b2b;
    border: 1px solid #26324a; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px;
}
.wz-decl-body { min-width: 0; }
.wz-decl-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wz-decl-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: #374151; font-size: .95rem; }
.wz-decl-meta { display: flex; flex-direction: column; }
.wz-decl-label { font-size: 0.7rem; color: #8b98ad; font-weight: 700; }
.wz-decl-stats { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wz-anime-line { margin: 10px 0 6px; }
.wz-decl-text { color: #eef2f8; font-size: 1rem; line-height: 1.5; }
.wz-thumb { max-height: 230px; overflow: hidden; border-radius: 10px; }
.wz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .wz-declaration { grid-template-columns: 1fr; } }

/* Verdict / status flags (green win flag vs broken flag) */
.wz-flag {
    display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
    border: 1px solid #26324a; background: #141b2b;
}
.wz-flag.win { border-color: rgba(34,197,94,.5); background: linear-gradient(135deg, rgba(34,197,94,.15), #111827); }
.wz-flag.broken { border-color: rgba(239,68,68,.5); background: linear-gradient(135deg, rgba(239,68,68,.13), #111827); }
.wz-flag.live { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.wz-flag-emoji { font-size: 1.7rem; }
.wz-flag b { display: block; color: #eef2f8; font-size: 0.98rem; }
.wz-flag em { color: #9aa7bd; font-style: normal; font-size: 0.83rem; }
.wz-flag-inline { font-size: 0.7rem; font-weight: 900; padding: 1px 8px; border-radius: 999px; }
.wz-flag-inline.win { color: #16a34a; background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.5); }
.wz-flag-inline.lost { color: #f87171; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); }

/* ===== Guild / GvG war ===== */
.wz-guild-tag { padding: 8px 14px; border-radius: 10px; margin-bottom: 16px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.4); color: #93c5fd; font-size: 0.85rem; }

/* VS duel band */
.wz-vs {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
    background: #141b2b; border: 1px solid #26324a; border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.wz-vs-side {
    display: flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; text-align: center;
    padding: 14px; border-radius: 12px; border: 1px solid #26324a; background: #0e1420;
}
.wz-vs-side.win { border-color: rgba(34,197,94,.6); background: linear-gradient(180deg, rgba(34,197,94,.18), #0e1420); }
.wz-vs-side.lose { border-color: rgba(239,68,68,.45); background: linear-gradient(180deg, rgba(239,68,68,.12), #0e1420); }
.wz-vs-name { font-weight: 900; color: #f3f6fb; font-size: 1.05rem; }
.wz-vs-meta { font-size: 0.78rem; color: #8b98ad; }
.wz-vs-badge { font-size: 0.72rem; font-weight: 900; padding: 2px 10px; border-radius: 999px; }
.wz-vs-badge.win { color: #16a34a; background: rgba(34,197,94,.2); border: 1px solid rgba(34,197,94,.6); }
.wz-vs-badge.lose { color: #f87171; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.5); }
.wz-vs-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 90px; }
.wz-vs-word { font-size: 1.6rem; font-weight: 900; color: #fbbf24; letter-spacing: 2px; }
@media (max-width: 560px) { .wz-vs { grid-template-columns: 1fr; } .wz-vs-mid { order: -1; } }

/* Claims panel (declared GvG) */
.wz-claims { background: #141b2b; border: 1px dashed #26324a; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.wz-claims h3 { color: #f3f6fb; margin: 0 0 4px; font-size: 1rem; }
.wz-claims-sub { color: #8b98ad; font-size: 0.82rem; margin: 0 0 12px; }
.wz-claims-list { display: flex; flex-direction: column; gap: 8px; }
.wz-claim-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #26324a; border-radius: 10px; }
.wz-claim-meta { color: #8b98ad; font-size: 0.78rem; margin-right: auto; }
.wz-claim-empty { color: #8b98ad; font-size: 0.85rem; }
.wz-claim-ctrl { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.wz-claim-ctrl select { flex: 1; background: #0e1420; border: 1px solid #26324a; color: #eef2f8; border-radius: 9px; padding: 9px 10px; }
.wz-pick-btn, .wz-claim-btn {
    background: linear-gradient(135deg, #ef4444, #f97316); color: #0b0f19; font-weight: 900; font-size: 0.82rem;
    border: none; padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.wz-claim-btn { background: linear-gradient(135deg, #f59e0b, #ef4444); }

@media (max-width: 640px) {
    .war-hero h1 { font-size: 1.7rem; }
    .war-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .war-row-side { align-items: flex-start; min-width: 0; }
}

/* Creator avatar + XP on war rows and battler entries */
.war-ava {
    width: 22px; height: 22px; border-radius: 99px; object-fit: cover;
    vertical-align: -5px; margin-right: 5px; border: 1px solid rgba(255,255,255,0.2);
}
.war-creator-name { font-weight: 700; color: #f3f6fb; }
.war-xp-pill {
    font-size: 0.62rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    color: #ffd9a8; background: rgba(255,160,64,0.12); border: 1px solid rgba(255,160,64,0.35);
    margin-left: 4px; white-space: nowrap;
}
.war-entry-head .war-xp-pill { vertical-align: middle; }

/* Topic pickers (anime / episode / GIF) on create-a-war */
.hidden { display: none !important; }

.wz-topic-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 10px; }
.wz-topic-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); cursor: pointer;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.75);
    transition: all 0.18s ease; font-family: inherit;
}
.wz-topic-card i { font-size: 1.15rem; }
.wz-topic-card span { font-weight: 700; font-size: 0.82rem; }
.wz-topic-card small { font-size: 0.66rem; color: rgba(255,255,255,0.45); }
.wz-topic-card:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
.wz-topic-card.active {
    background: linear-gradient(145deg, rgba(255,160,64,0.22), rgba(255,120,40,0.10));
    border-color: #ffa040; box-shadow: 0 0 0 1px rgba(255,160,64,0.4), 0 4px 18px rgba(255,140,50,0.18);
    color: #ffd9a8;
}
.wz-topic-card.active small { color: rgba(255,200,140,0.7); }

.wz-topic-fields .wz-pick { margin-top: 6px; }
.wz-topic-fields .wz-pick input[type="text"],
.wz-topic-fields .wz-pick input:not([type="hidden"]) {
    width: 100%; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05); color: #fff; outline: none; box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wz-topic-fields .wz-pick input:focus { border-color: #ffa040; box-shadow: 0 0 0 3px rgba(255,160,64,0.15); }
.wz-topic-fields .wz-pick input:disabled { opacity: 0.4; }
.wz-pick-results { max-height: 230px; overflow: auto; display: grid; gap: 6px; margin: 0 0 6px; }
.wz-picker-empty { color: rgba(255,255,255,0.55); font-size: 0.85rem; padding: 6px 2px; }
.wz-picker-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px;
    background: rgba(255,255,255,0.06); cursor: pointer; transition: background 0.15s ease, transform 0.12s ease;
}
.wz-picker-item:hover { background: rgba(255,255,255,0.14); transform: translateX(2px); }
.wz-picker-item img { width: 46px; height: 60px; object-fit: cover; border-radius: 6px; flex: none; }
.wz-picker-noimg { width: 46px; height: 60px; display: grid; place-items: center; background: rgba(255,255,255,0.08); border-radius: 6px; flex: none; }
.wz-picker-title { font-weight: 700; font-size: 0.88rem; }
.wz-picker-meta { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
.wz-pick-use {
    margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 4px 9px; border-radius: 99px; color: #0d1117; background: #ffa040;
    opacity: 0; transform: translateX(4px); transition: all 0.15s ease; flex: none;
}
.wz-picker-item:hover .wz-pick-use { opacity: 1; transform: translateX(0); }

.wz-pick-picked .wz-picker-tag {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px;
    background: rgba(255,160,64,0.10); border: 1px solid rgba(255,160,64,0.45); font-size: 0.84rem;
    animation: wzPop 0.22s ease;
}
.wz-pick-picked .wz-picker-tag img { width: 36px; height: 46px; object-fit: cover; border-radius: 5px; flex: none; }
.wz-pick-title-main { line-height: 1.3; }
.wz-pick-check {
    width: 18px; height: 18px; border-radius: 99px; background: #2ea043; color: #fff;
    display: grid; place-items: center; font-size: 0.7rem; flex: none;
}
.wz-pick-clear {
    margin-left: auto; border: none; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
    width: 22px; height: 22px; border-radius: 99px; cursor: pointer; font-size: 0.72rem; flex: none;
}
.wz-pick-clear:hover { background: rgba(255,255,255,0.25); }
@keyframes wzPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Episode thumb grid */
.wz-ep-grid { grid-template-columns: repeat(3, 1fr); }
.wz-ep-card {
    position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.wz-ep-card:hover { transform: translateY(-2px); border-color: #ffa040; }
.wz-ep-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.wz-ep-meta { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.wz-ep-meta b { font-size: 0.75rem; color: #ffd9a8; }
.wz-ep-meta span { font-size: 0.68rem; color: rgba(255,255,255,0.6); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* GIF grid */
.wz-gif-grid { grid-template-columns: repeat(3, 1fr); }
.wz-gif-cell { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; }
.wz-gif-cell img { width: 100%; height: auto; display: block; transition: transform 0.2s ease; }
.wz-gif-cell:hover img { transform: scale(1.06); }
.wz-gif-ov {
    position: absolute; inset: auto 0 0 0; padding: 14px 6px 5px; text-align: center;
    font-size: 0.7rem; font-weight: 700; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.75)); opacity: 0; transition: opacity 0.15s ease;
}
.wz-gif-cell:hover .wz-gif-ov { opacity: 1; }