main{background:url(/images/background.webp) 50%/cover no-repeat fixed;position:relative}main:before{content:"";z-index:0;pointer-events:none;background:#131313d9;position:absolute;inset:0}main>*{z-index:1;position:relative}
#war{background-color:var(--color-surface-1);border:1px solid var(--color-ghost-border)}.war-outcome{background-color:var(--color-surface-1);border:2px solid var(--color-ghost-border);font-family:var(--font-display);text-transform:uppercase;flex:1;align-items:center;padding:.5rem 1rem;font-size:1.25rem;font-weight:900;display:flex}.war-outcome.victory{border-color:var(--color-primary);color:var(--color-primary)}.war-outcome.defeat{border-color:var(--color-danger);color:var(--color-danger)}
.war-timeline{contain:layout;flex-direction:column;gap:.5rem;width:100%;min-width:0;display:flex;overflow:hidden}.timeline-controls{background-color:#000000bf;border:1px solid #ffffff1a;flex-direction:column;gap:.5rem;width:100%;min-width:0;padding:.75rem 1rem;display:flex;overflow:hidden}.timeline-desktop{display:none}@media (min-width:640px){.timeline-desktop{display:flex}.timeline-mobile{display:none}}.timeline-track{height:18px;margin:0 .25rem;position:relative}.timeline-range{width:100%;accent-color:var(--color-primary);cursor:pointer}.timeline-marker{pointer-events:none;border-radius:50%;width:7px;height:7px;position:absolute;top:50%;transform:translate(-50%,-50%)}.timeline-marker.defend{background-color:var(--color-danger);box-shadow:0 0 3px #f009}.timeline-marker.attack{background-color:var(--color-success);box-shadow:0 0 3px #22c55e99}.timeline-info{background-color:#0009;border:1px solid #ffffff1a;justify-content:space-between;align-items:center;gap:.5rem;height:2rem;padding:.375rem .5rem;font-size:.8rem;display:flex;overflow:hidden}.timeline-info-label{color:var(--color-primary);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:500;overflow:hidden}.timeline-info-time{color:var(--color-text-muted);white-space:nowrap}.timeline-mobile{display:flex}.timeline-nav{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.timeline-nav-btn{background-color:var(--color-surface-3);border:1px solid var(--color-outline-variant);width:2.5rem;height:2.5rem;color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;display:flex}.timeline-nav-btn:disabled{opacity:.3;cursor:not-allowed}.timeline-nav-count{color:var(--color-text-muted);font-family:var(--font-mono);font-size:.8rem}.timeline-carousel{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.5rem;padding:.25rem 0;display:flex;overflow-x:auto}.timeline-carousel::-webkit-scrollbar{display:none}.timeline-card{scroll-snap-align:center;background-color:var(--color-surface-2);border:1px solid var(--color-outline-variant);border-left:4px solid var(--color-text-muted);cursor:pointer;text-align:left;width:200px;color:var(--color-text);flex-direction:column;flex-shrink:0;gap:.25rem;padding:.5rem .75rem;display:flex}.timeline-card.defend{border-left-color:var(--color-danger)}.timeline-card.attack{border-left-color:var(--color-success)}.timeline-card.snapshot{border-left-color:var(--color-text-muted)}.timeline-card.active{border-color:var(--color-primary);border-left-color:var(--color-primary);background-color:var(--color-surface-3)}.timeline-card-label{font-family:var(--font-body);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:500;overflow:hidden}.timeline-card.active .timeline-card-label{color:var(--color-primary)}.timeline-card-time{font-family:var(--font-mono);color:var(--color-text-muted);font-size:.7rem}.war-timeline #map{aspect-ratio:806.93/868.81}