/* statusbar.css */
@font-face{
  font-family:'gang-of-tree';
  src:url("/fonts/gang-of-tree.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

.status-strip{
  margin-bottom:0px;
  width:100%;
  background:none;
}

.status-strip__inner{
  max-width:1588px; /* wie Bild1; wenn full-width -> entfernen */
  margin:0 auto;
  height:138px;     /* exakt Bild1 */
  display:grid;
  grid-template-columns:repeat(3,1fr); /* (3,1fr); ist für 3 status boxen = (4,1fr); ist für 4 status boxen */
}

/* leichte Panel-Abwechslung wie im Beispiel */
.status-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:18px;
}

/* Kopfzeile: Ornament links, Text, Ornament rechts */
.status-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
}

/* Ornamente em1/em2 */
.status-orn{
  width:39px;  /* em1/em2 original */
  height:22px;
  image-rendering:auto;
  opacity:.95;
}

/* Title wie Bild1 */
.status-title{
  font-family:"gang-of-tree";
  font-size:20px;
  font-weight:800;
  letter-spacing:2px;
  color:#222423;
  text-transform:uppercase;
  transform:translateY(-1px); /* minimal höher wie Bild1 */
  text-shadow:1px 1px 0px rgba(255, 255, 255, 0.8);
}

/* Divider em3: die goldene Linie unter dem Titel */
.status-divider{
  display:block;
  margin-top:6px;
  width:86%;
  max-width:280px; /* em3 ist 500px breit */
  height:auto;
  opacity:.95;
}

/* Status-Text in Rot */
.status-state{
  margin-top:5px;
  font-family:"gang-of-tree";
  font-size:20px;
  font-weight:900;
  letter-spacing:1.2px;
  color:#d30000;
  text-transform:uppercase;
  text-shadow: none;     /* kein Schatten */
}

#server-status.is-online { color: #0b7a0b; }
#server-status.is-offline { color: #d30000; }
#server-status.is-error { color: #b36b00; }

#castle-owner[data-state="error"] { opacity: 0.75; }


/* Nur Server Time Styling */
#server-time {
  font-size:20px;
  color: #000000;        /* schwarz */
  font-weight: 400;
  text-shadow: none;     /* kein Schatten */
}

/* Nur Server Time Styling */
#castle-owner {
  font-size:25px;
  color: #000000;        /* schwarz */
  text-shadow: none;     /* kein Schatten */
}

/* Responsive */
@media (max-width:900px){
  .status-strip__inner{ height:auto; grid-template-columns:repeat(2,1fr); }
  .status-cell{ padding:16px 0 20px; }
}
@media (max-width:520px){
  .status-strip__inner{ grid-template-columns:1fr; }
}