/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* =========================================================
   BACKGROUND SLIDESHOW (must always be behind everything)
========================================================= */
#slideshow {
  position: fixed;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  overflow: hidden;
  z-index: 0;            /* hard-lock to the back */
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: 0;            /* slides never rise above overlays */
}

.slide.active {
  opacity: 1;
}

/* =========================================================
   CENTER LOGO OVERLAY (always on top)
========================================================= */
#logo-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  background: none;      /* no grey box */
  padding: 0;
  backdrop-filter: none; /* no blur box */
  pointer-events: none;
}

#logo-overlay img {
  height: 200px;         /* smaller logo */
  max-width: 100vw;       /* sane scaling */
  opacity: 0.75;         /* slightly transparent */
}

/* =========================================================
   NOTICE BOARD (above slideshow)
========================================================= */
.notice-board {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 300px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  z-index: 40;           /* above slideshow */
}

.notice-board h3 {
  margin-bottom: 10px;
}

.notice-board ul {
  list-style: none;
}

.notice-board li {
  margin-bottom: 8px;
}

/* =========================================================
   BOTTOM TICKER (above slideshow)
========================================================= */
#ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-marquee 12s linear infinite; /* lower = faster */
}

#ticker-track span {
  display: inline-block;
  padding-right: 80px; /* spacing between repeats */
}

@keyframes ticker-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}