/* 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 2.5s 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: 400px;         /* smaller logo */
  max-width: 300vw;       /* sane scaling */
  opacity: 0.82;         /* slightly transparent */
}

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

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

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

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

/* =========================================================
   BOTTOM TICKER (above slideshow)
========================================================= */
.ticker {
  position: fixed;
  left: 30px;
  right: 30px;
  bottom: 30px;

  height: 60px;
  display: flex;
  align-items: center;

  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 0 18px;
  border-radius: 8px;

  overflow: hidden;
  z-index: 40;
}

#ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;

  width: max-content;       /* shrink-wrap: critical for no big gaps */
  will-change: transform;

  animation: ticker-marquee 40s linear infinite; /* slower: increase for slower */
}

#ticker-track span {
  flex: 0 0 auto;           /* don't stretch */
  padding-right: 20px;      /* small spacing between repeats */
}

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