:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --text: #e6eef6;
  --accent:#6ee7b7;
}
*{box-sizing:border-box}
html,body{height:100%;min-height:100%}
body{
  font-family: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  margin:0;
  /* Ensure full-viewport background and avoid seams on scroll */
  background: radial-gradient(1200px 600px at 10% 10%, rgba(22,34,50,0.18), transparent), linear-gradient(180deg,var(--bg),#071027);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Ensure background covers edge-to-edge and matches across html/body */
html{background:inherit}

/* Respect iPhone safe area inset at bottom (avoid large white gap behind browser UI) */
body{padding-bottom:env(safe-area-inset-bottom,12px)}
/* header: add top safe-area padding (iPhone notch) to avoid clipping */
header{padding:calc(env(safe-area-inset-top,12px) + 24px) 16px 8px;text-align:center}
.header-inner{max-width:920px;margin:0 auto}
/* place title centered at the top; the toggle will be positioned absolute so the title stays centered */
.header-inner{display:block;position:relative;text-align:center}
.header-inner h1{margin:0;font-size:2.1rem;letter-spacing:0.4px}
.header-inner p{margin:6px 0 0;color:var(--muted);font-size:0.95rem}

/* site title / logo */
.site-title{display:inline-flex;align-items:center;gap:12px;justify-content:center;margin:0;padding:0}
.site-title .logo{display:inline-flex;align-items:center;justify-content:center}
.site-title .logo svg{width:36px;height:36px;display:block;transform-origin:center;transition:transform .36s ease,opacity .36s ease}
.site-title .logo svg:hover{transform:translateY(-3px) rotate(-4deg)}

/* entrance animation: slide up + fade for logo and wordmark */
.site-title{opacity:0;transform:translateY(-6px);animation:siteSlideFade 560ms cubic-bezier(.2,.9,.25,1) forwards;animation-delay:140ms}
.site-title .logo{opacity:0;transform:translateY(-4px);animation:siteSlideFadeChild 520ms cubic-bezier(.2,.9,.25,1) forwards;animation-delay:160ms}
.site-title .wordmark{opacity:0;transform:translateY(-4px);animation:siteSlideFadeChild 520ms cubic-bezier(.2,.9,.25,1) forwards;animation-delay:220ms}

@keyframes siteSlideFade{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes siteSlideFadeChild{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-title, .site-title .logo, .site-title .wordmark, .site-title .logo svg{animation:none !important;transition:none !important;transform:none !important}
}
.site-title .wordmark{display:inline-block;line-height:1}
.site-title .w-strong{font-weight:800;font-size:2.1rem;color:var(--text);letter-spacing:0.2px}
.site-title .w-accent{font-weight:700;font-size:2.1rem;margin-left:4px;background:linear-gradient(90deg,#6ee7b7,#59b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:600px){
  .site-title .w-strong, .site-title .w-accent{font-size:1.45rem}
  .site-title .logo svg{width:28px;height:28px}
}
/* move the theme toggle to the top-right but keep it visually over the header */
.header-inner .theme-toggle{position:absolute;right:12px;top:12px}

/* On narrow viewports, place the theme toggle below the title to avoid clipping */
@media (max-width:520px){
  .header-inner .theme-toggle{position:static;display:inline-flex;margin-top:10px;float:none;right:auto;top:auto}
  .header-inner{padding-bottom:8px}
}
.site-tagline{max-width:920px;margin:18px auto 6px auto;color:var(--muted);text-align:center;font-size:0.98rem}

/* Layout: make main container fluid and responsive */
main{max-width:980px;margin:8px auto 48px auto;padding:12px 16px}
.game{margin-bottom:22px}
.banner-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:start;grid-auto-rows:1fr}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:16px;border-radius:12px;box-shadow:0 8px 26px rgba(2,6,12,0.55);border:1px solid rgba(255,255,255,0.02);overflow:hidden;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s;display:flex;flex-direction:column;justify-content:space-between}
.card, #warning-bar, .char-avatar { transition: background .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease }
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,8,20,0.65)}
.card h3{margin:0 0 10px 0;font-size:1.05rem}
.countdown{font-weight:700;color:var(--accent);font-size:1.02rem}
.meta{font-size:0.86rem;color:var(--muted);margin-bottom:8px}
footer{padding:36px 16px 48px;text-align:center;color:var(--muted)}

/* character avatars in banner cards */
.chars-wrap{display:flex;gap:10px;margin:12px 0;align-items:center;flex-wrap:wrap;justify-content:flex-start}
.char-item{display:flex;flex-direction:column;align-items:center;width:72px;flex:0 0 auto}
.char-avatar{width:56px;height:56px;border-radius:12px;object-fit:cover;background:linear-gradient(180deg,#22334a,#102233);border:2px solid rgba(255,255,255,0.04);box-shadow:0 6px 12px rgba(0,0,0,0.55)}
.char-label{font-size:0.78rem;color:var(--muted);text-align:center;margin-top:8px;word-break:keep-all}

/* featured 5★ character styling */
.char-main{width:120px}
.char-main .char-avatar{width:96px;height:96px;border-radius:14px}
.char-main .char-label{font-size:0.92rem;color:var(--text);font-weight:700;margin-top:10px}

/* supporting 4★ characters */
.char-aux{width:72px}
.char-aux .char-avatar{width:56px;height:56px;border-radius:10px}
.char-aux .char-label{font-size:0.78rem;color:var(--muted);margin-top:8px}

/* theme toggle button */
.theme-toggle{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:8px;font-size:15px;position:relative;min-width:46px;min-height:40px;justify-content:center}
.theme-toggle:hover{transform:translateY(-2px);background:rgba(255,255,255,0.02)}
.theme-toggle .icon{line-height:1;transition:opacity .36s ease, transform .36s ease}
.icon-sun{opacity:0;transform:scale(.8) rotate(-10deg)}

/* light theme overrides */
.theme-light{
  --bg: #f6f8fb;
  --card: #ffffff;
  /* stronger muted color for legibility on pale backgrounds */
  --muted: #334155;
  /* slightly stronger, readable accent for timers */
  --accent: #0b74d1;
  --text: #071023;
}

/* soften the background gradient in light mode so text stands out better */
body.theme-light{background: radial-gradient(900px 420px at 10% 8%, rgba(22,34,50,0.02), transparent), linear-gradient(180deg,var(--bg),#eef3f8)}

/* show proper icon */
body.theme-light .icon-sun{display:inline}
body.theme-light .icon-moon{display:none}
.icon-moon{display:inline}

/* animated svg behavior */
body.theme-light .icon-sun{opacity:1;transform:scale(1) rotate(0deg)}
body.theme-light .icon-moon{opacity:0;transform:scale(.8) rotate(-10deg)}
.icon-moon{opacity:1;transform:scale(1) rotate(0deg)}

/* tooltip */
.theme-tooltip{position:absolute;right:0;top:calc(100% + 8px);background:rgba(0,0,0,0.72);color:#fff;padding:6px 8px;border-radius:6px;font-size:13px;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.theme-toggle:hover .theme-tooltip{opacity:1;transform:translateY(0)}
body.theme-light .theme-tooltip{background:rgba(255,255,255,0.92);color:var(--text);box-shadow:0 6px 18px rgba(2,8,20,0.08)}

/* make the toggle visible in light mode (border/background contrast) */
body.theme-light .theme-toggle{border-color:rgba(2,6,20,0.06);background:rgba(2,6,20,0.03);color:var(--muted)}

/* warning bar shown when opened via file:// or when falling back to mock data */
#warning-bar{max-width:920px;margin:12px auto;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,#5b2f2f,#6b3b3b);color:#fff;border:1px solid rgba(255,200,200,0.06);font-size:0.95rem;box-shadow:0 6px 20px rgba(0,0,0,0.5)}
.warn-strong{font-weight:700;margin-right:8px}
.warn-code{background:rgba(255,255,255,0.04);padding:3px 8px;border-radius:6px;font-family:monospace;margin-left:8px}

/* last-updated text */
#last-updated{color:var(--muted);margin:6px auto 12px auto;text-align:center;font-size:0.92rem}

/* placeholder: subtle empty avatar background (used when image missing) */
.char-placeholder{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#172832,#0f2636);color:#9fb3c1;font-weight:700}

/* previous status */
#previous-status{color:var(--muted);margin:6px 0 10px 0}
small a{color:var(--accent)}

/* animations */
.fade-up{animation:fadeUp .42s ease both}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Mobile and tablet adjustments */
@media (max-width:900px){
  .banner-list{grid-template-columns:1fr}
  .card{padding:14px;border-radius:12px}
  .header-inner h1{font-size:1.6rem}
  .char-item{width:60px}
  .char-avatar{width:48px;height:48px}
  .char-main .char-avatar{width:80px;height:80px}
  /* prevent large gaps under cards by making grid rows auto-size to content */
  .banner-list{grid-auto-rows:auto}
}

@media (max-width:480px){
  main{padding:10px}
  .header-inner h1{font-size:1.35rem}
  .site-title .w-strong, .site-title .w-accent{font-size:1.25rem}
  .card{padding:12px;border-radius:10px}
  .banner-list{gap:12px}
  .char-item{width:52px}
  .char-avatar{width:44px;height:44px}
  .char-main .char-avatar{width:72px;height:72px}
  .consent-banner{left:8px;right:8px;bottom:12px;padding:10px}
  .consent-inner{flex-direction:column;align-items:flex-start}
  .consent-actions{width:100%;display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
  /* reduce excessive bottom spacing often caused by mobile browser UI */
  footer{margin-bottom:env(safe-area-inset-bottom,8px)}
}

/* Ensure images inside cards are not causing overflow or large gaps */
.card img{max-width:100%;height:auto;display:block}


/* star icon used in section headings */
.star-icon{vertical-align:middle;color:var(--accent);margin-right:6px}
.previous-heading{margin-top:18px}

/* style for previous (ended) banners: desaturated / grayscale to emphasize they ended */
.card.previous-card{
  filter: grayscale(100%) contrast(0.9);
  opacity:0.92;
}
.card.previous-card .char-avatar{ filter: grayscale(100%); opacity:0.95 }
.card.previous-card h3{ color:var(--muted) }
.card.previous-card .countdown{ color:var(--muted); font-weight:600 }

/* small site tagline above footer */
.site-tagline{max-width:920px;margin:18px auto 6px auto;color:var(--muted);text-align:center;font-size:0.98rem}

/* Consent banner & ad placeholders */
.consent-banner{position:fixed;left:12px;right:12px;bottom:18px;background:linear-gradient(180deg,#071427,rgba(7,16,33,0.9));border:1px solid rgba(255,255,255,0.04);padding:12px 14px;border-radius:12px;box-shadow:0 14px 40px rgba(2,8,20,0.6);z-index:9999;max-width:980px;margin:0 auto}
.consent-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.consent-inner .consent-text{color:var(--muted);font-size:0.95rem;margin-top:6px}
.consent-actions{display:flex;gap:8px}
.btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;background:transparent;color:var(--text)}
.btn-primary{background:var(--accent);color:#071023;border:none}
.btn-muted{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04)}

.ad-slot{max-width:980px;margin:10px auto;padding:0 16px}
.ad-slot-top{margin-top:8px}

@media (max-width:720px){
  .consent-inner{flex-direction:column;align-items:flex-start}
  .consent-actions{width:100%;justify-content:flex-end}
}

/* Light-theme adjustments: make consent banner readable on pale backgrounds */
body.theme-light .consent-banner{
  background: linear-gradient(180deg,#ffffff,#f6f8fb);
  border:1px solid rgba(3,7,18,0.06);
  color:var(--text);
  box-shadow:0 10px 30px rgba(12,20,30,0.06);
}

/* Consent show/hide without layout shift */
.consent-banner{transition:transform .36s cubic-bezier(.2,.9,.25,1),opacity .28s ease;transform:translateY(0);opacity:1}
.consent-banner.consent-hidden{transform:translateY(120%);opacity:0;pointer-events:none}

/* Side ad gutters (desktop). Fixed position so they don't affect layout.
   Hidden on smaller screens to avoid reflow and cramped mobile UX. */
.side-ad{position:fixed;top:50%;transform:translateY(-50%);width:120px;height:auto;z-index:997}
.side-ad ins{display:block}
.side-ad-left{left:12px}
.side-ad-right{right:12px}

/* Hide side ads on small viewports */
@media (max-width:1100px){
  .side-ad{display:none}
}

/* Bottom ad for mobile: fixed horizontal banner above footer */
.bottom-ad{display:none}
@media (max-width:1100px){
  .bottom-ad{display:block;position:fixed;left:0;right:0;bottom:0;z-index:998;background:transparent;padding:8px 12px;box-sizing:border-box}
  .bottom-ad ins{display:block;margin:0 auto;max-width:980px}
  /* ensure content doesn't get hidden behind the bottom ad */
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom,12px))}
  /* position consent banner above bottom ad to avoid overlap */
  .consent-banner{bottom:calc(80px + env(safe-area-inset-bottom,12px) + 12px)}
}
body.theme-light .consent-inner .consent-text{ color:var(--muted) }
body.theme-light .btn{ color:var(--text); border-color: rgba(3,7,18,0.06) }
body.theme-light .btn-primary{ background:var(--accent); color:#fff; border:none }
body.theme-light .btn-muted{ background:transparent; color:var(--muted); border:1px solid rgba(3,7,18,0.06) }
body.theme-light .consent-banner a{ color:var(--accent) }

/* Consent modal overlay (centered) */
.consent-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:10000}
.consent-modal-centered{background:var(--card);padding:20px;border-radius:12px;max-width:720px;width:calc(100% - 48px);box-shadow:0 20px 60px rgba(2,8,20,0.7);border:1px solid rgba(255,255,255,0.03);color:var(--text)}
.consent-modal-centered h3{margin:0 0 8px 0}
.consent-modal-centered p{margin:0 0 12px 0;color:var(--muted)}
.consent-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.btn-small{padding:6px 10px;border-radius:8px;font-size:0.9rem}

@media (max-width:720px){
  .consent-modal-centered{width:92%;padding:16px}
}