:root{
  --bg:#f8fff1;
  --panel:#fffdf2;
  --accent:#8ecf4d;
  --accent-dark:#5aa328;
  --accent-soft:#cdeaa3;
  --ink:#5a4a3f;
  --ink-soft:#7b6a5d;
  --round:16px;
  --font:"Baloo 2","Comic Neue",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700&display=swap');

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0;
  background:
    url('images/site-bg.jpg') center/cover fixed no-repeat,
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:#2e6c3a;text-decoration:underline;}
a.button{
  display:inline-block;padding:.6rem 1rem;border-radius:999px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  border:2px solid #3b7b1d;box-shadow:0 2px 0 #3b7b1d;
}
a.button:active{transform:translateY(1px);box-shadow:0 1px 0 #3b7b1d;}
button{font-family:inherit}

.wrapper{max-width:1350px;margin:0 auto;padding:12px;}

/* HEADER — banner image with overlayed title */
.header{
  background:none;
  padding:0; border:none;
  position:relative; overflow:hidden;
  border-radius:20px;
  margin:12px 0 8px;
}
.banner-img{width:100%;height:auto;display:block;}

/* Keep the big soft glow on the wrapper (not on the text) */
.title-overlay{
  position:absolute;
  left:18%;
  top:50%; transform:translateY(-50%);
  color:#ffffff;
  text-shadow:0 10px 24px rgba(0,0,0,.45);
}
.title-overlay55{
  position:absolute;
  left:76%;
  top:50%; transform:translateY(-50%);
  color:#ffffff;
  text-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* SAFARI-FRIENDLY OUTLINE USING FILTER DROP-SHADOWS (no text-stroke, no text-shadow on the text) */
.title-overlay h1,
.title-overlay55 h1{
  margin:0;
  font-size:60px;
  font-weight:800;
  color:#fff;
  letter-spacing:.6px;         /* tiny spacing avoids glyph bridging */
  -webkit-text-stroke:0;       /* ensure stroke is off */
  text-shadow:none;            /* outline handled by filter */
  transform:translateZ(0);     /* nudge Safari compositor */
  /* 8-way 2px outline + soft drop under everything */
  -webkit-filter:
    drop-shadow( 2px  0   0 #000)
    drop-shadow(-2px  0   0 #000)
    drop-shadow( 0    2px 0 #000)
    drop-shadow( 0   -2px 0 #000)
    drop-shadow( 1.5px  1.5px 0 #000)
    drop-shadow(-1.5px  1.5px 0 #000)
    drop-shadow( 1.5px -1.5px 0 #000)
    drop-shadow(-1.5px -1.5px 0 #000)
    drop-shadow(0 10px 24px rgba(0,0,0,.45));
  filter:
    drop-shadow( 2px  0   0 #000)
    drop-shadow(-2px  0   0 #000)
    drop-shadow( 0    2px 0 #000)
    drop-shadow( 0   -2px 0 #000)
    drop-shadow( 1.5px  1.5px 0 #000)
    drop-shadow(-1.5px  1.5px 0 #000)
    drop-shadow( 1.5px -1.5px 0 #000)
    drop-shadow(-1.5px -1.5px 0 #000)
    drop-shadow(0 10px 24px rgba(0,0,0,.45));
}

.title-overlay .banner-sub,
.title-overlay55 .banner-sub{
  margin-top:1px;font-size:15px;font-weight:800;
}

.ribbon{
  background: var(--accent);
  color:white;
  border-radius:12px;
  padding:8px 14px;
  margin:0 0 12px;
  display:flex;align-items:center;gap:8px;justify-content:center;
  border:2px solid #3b7b1d;
  text-align:center;
}
.subpage .banner-sub a {
  color: #fff;
}

.main{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:14px;
}

.card{
  background:var(--panel);
  border:2px solid var(--accent-soft);
  border-radius:var(--round);
  padding:14px;
  box-shadow:0 2px 0 #e6f5cc;
}

.news-preview h2{margin:0 0 6px;font-size:28px;text-align:center;color:#6b3a2e}
.news-list article{border-top:1px dashed #cfdcbc;padding-top:12px;margin-top:12px}
.news-list h3{margin:.2rem 0 .1rem;font-size:20px}
.news-meta{font-size:13px;color:var(--ink-soft)}

.center{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:12px;
  align-items:start;
}
.center img{width:100%;border-radius:12px;border:2px solid var(--accent-soft)}

.sidebar .nav{display:flex;flex-direction:column;gap:10px}
.sidebar .nav a{
  display:block;background:#eaffd6;border:2px solid var(--accent-soft);
  padding:.6rem 1rem;border-radius:999px;color:#3b5b24;
  text-decoration:none;font-weight:700;text-align:center
}
.sidebar .nav a:hover{background:#dcf7be}

.gallery-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
  grid-auto-flow: dense;  /* ✅ lets shorter blocks fill gaps */
}

.gallery-items a{
-  display:block;background:#eef9d9;border:2px solid var(--accent-soft);
+  display:block;background:#eef9d9;
   padding:10px;border-radius:12px;text-decoration:none;color:inherit
}

.gallery-items img{
-  width:100%;border-radius:8px;margin-bottom:6px;border:2px solid #cfe6a9
+  display:block;width:100%;border-radius:8px;margin-bottom:6px;border:2px solid #cfe6a9
}


.games .game{
  display:grid;grid-template-columns: 160px 1fr;gap:12px;
  border-top:1px dashed #cfdcbc;padding-top:12px;margin-top:12px
}
.games .game img{width:100%;border-radius:12px;border:2px solid var(--accent-soft)}
.game h3{margin:0 0 4px}
.game .buttons{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
footer{margin:18px 0 40px;text-align:center;color:#FFFFFF;font-size:13px}
.small{font-size:13px;color:#7c7468}

/* Label above the news preview */
.section-label{
  margin: 0 0 4px;
  font-size: 32px;
  line-height: 1.1;
  text-align: center;
  color: #3b5b24;
}


/* --- Mobile layout fixes (merged) --- */
@media (max-width: 800px) {
  .wrapper { padding: 10px; }

  /* Banner: show full art, keep rounded corners */
  .header { border-radius: 16px; }
  .banner-img {
    width: 100%;
    height: auto;          /* keep natural aspect */
    object-fit: contain;   /* no crop; entire image visible */
  }

  /* Center the title; keep outline for readability */
  .title-overlay,
  .title-overlay55 {
    left: 50%;
    top: auto;
    bottom: 10%;
    transform: translateX(-50%);
    text-align: center;
    padding: 0 10px;
  }
  .title-overlay h1,
  .title-overlay55 h1 {
    font-size: clamp(28px, 7vw, 44px);
    letter-spacing: .3px;
    text-shadow: none; /* outline handled by filter */
    -webkit-filter:
      drop-shadow( 2px  0   0 #000)
      drop-shadow(-2px  0   0 #000)
      drop-shadow( 0    2px 0 #000)
      drop-shadow( 0   -2px 0 #000)
      drop-shadow( 1.5px  1.5px 0 #000)
      drop-shadow(-1.5px  1.5px 0 #000)
      drop-shadow( 1.5px -1.5px 0 #000)
      drop-shadow(-1.5px -1.5px 0 #000)
      drop-shadow(0 6px 16px rgba(0,0,0,.45));
    filter:
      drop-shadow( 2px  0   0 #000)
      drop-shadow(-2px  0   0 #000)
      drop-shadow( 0    2px 0 #000)
      drop-shadow( 0   -2px 0 #000)
      drop-shadow( 1.5px  1.5px 0 #000)
      drop-shadow(-1.5px  1.5px 0 #000)
      drop-shadow( 1.5px -1.5px 0 #000)
      drop-shadow(-1.5px -1.5px 0 #000)
      drop-shadow(0 6px 16px rgba(0,0,0,.45));
  }

  /* Main layout: single column */
  .main { grid-template-columns: 1fr; gap: 12px; }

  /* About section: stack image above text */
  .center { grid-template-columns: 1fr; gap: 10px; }
  .center img { max-width: 220px; margin: 0 auto; }

  /* Lists: 1 column on phones */
  .gallery-items { grid-template-columns: 1fr; }
  .games .game { grid-template-columns: 1fr; }

  /* Small tweaks */
  .ribbon { font-size: 14px; padding: 6px 10px; }
  .news-preview h2 { font-size: 22px; }
}