/* YouthRewind — Game Container (Canonical v2)
   Shared styles for /game/html5/{id}/ pages */
html, body { height: 100%; margin: 0; }
html { overflow: hidden; }
body { background: #0b1020; color: #fff; }
/* 视口高度约束：非全屏时，顶广告 + shell 总高度 = 视口高度（无滚动） */
body.not-fullscreen { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0,0,0,.55); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar a, .topbar button { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 8px; padding: 6px 10px; font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; cursor: pointer; }
.topbar a { text-decoration: none; }
.title { flex: 1; opacity: .9; }
.stage { position: relative; flex: 1; min-height: 0; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: #000; }
/* Legacy in-stage ad slot is permanently hidden to avoid overlap with game */
.ad-slot { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.50); border: 1px dashed rgba(255,255,255,.20); color: #ddd; padding: 6px 8px; border-radius: 8px; display: none !important; }
@media (max-width: 480px) { .topbar { gap: 8px; } .title { display: none; } }



/* Loading indicator inside .stage (does not cover .topbar) */
.loading-indicator {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 14px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.18);
  color: #eee;
  border-radius: 10px;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  pointer-events: none;
  z-index: 10;
}


/* Slow-network/failure timeout UI (inside .stage, not covering .topbar) */
.loading-timeout {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 14px 16px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.20);
  color: #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 12;
  width: min(92vw, 420px);
  text-align: center;
}
.loading-timeout .msg { font: 700 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin-bottom: 10px; }
.loading-timeout .hint { font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; opacity: .85; margin-top: 8px; }
.loading-timeout .retry {
  appearance: none; background: #1f6feb; color: #fff; border: 0; border-radius: 10px;
  padding: 8px 12px; font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; cursor: pointer;
}

/* Close button for timeout UI */
.loading-timeout .close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent; border: 0; color: #fff;
  font: 700 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer; opacity: .8;
}
.loading-timeout .close:hover { opacity: 1; }

@media (max-width: 480px) {
  .loading-timeout { padding: 12px 14px; }
  .loading-timeout .msg { font-size: 15px; }
}


/* Layout row for stage + optional sidebar (A/B variant test) */
.main-row { flex: 1; display: flex; min-height: 0; }
.main-row .stage { flex: 1; }
/* Legacy sidebar/below placements are deprecated and forced hidden */
.sidebar-ad { display: none !important; width: 336px; margin-left: 12px; align-self: flex-start; }
.sidebar-ad img { display:block; width: 336px; height: 280px; }
@media (min-width: 1280px) {
  body.not-fullscreen .sidebar-ad { display: none !important; }
}

/* Below-iframe ad container (deprecated) */
.below-ad-container { display: none !important; padding: 12px 12px 16px; text-align: center; }
.below-ad-container img { display:inline-block; width: 300px; height: 250px; }
body.not-fullscreen .below-ad-container { display: none !important; }


/* Top and Bottom full-width ad containers (replace sidebar/below strategy) */
.top-ad, .bottom-ad { display: none; padding: 12px 12px 16px; text-align: center; }
/* Default hide; show per breakpoint with exact sizes to avoid overlap & CLS */
.top-ad img, .bottom-ad img { display: none; height: auto; }
.top-ad img.ad-desktop, .bottom-ad img.ad-desktop { width: 728px; height: 90px; max-width: 100%; }
.top-ad img.ad-mobile,  .bottom-ad img.ad-mobile  { width: 320px; height: 50px;  max-width: 100%; }
@media (min-width: 813px) {
  body.not-fullscreen .top-ad img.ad-desktop,
  body.not-fullscreen .bottom-ad img.ad-desktop { display: inline-block; }
}
@media (max-width: 812px) {
  body.not-fullscreen .top-ad img.ad-mobile,
  body.not-fullscreen .bottom-ad img.ad-mobile { display: inline-block; }
}
body.not-fullscreen .top-ad, body.not-fullscreen .bottom-ad { display: block; }


/* Lazy-visible (no CLS) and A/B control */
.top-ad img, .bottom-ad img { opacity: 0; transition: opacity .2s ease; }
body.not-fullscreen .top-ad[data-init="1"] img,
body.not-fullscreen .bottom-ad[data-init="1"] img { opacity: 1; }

/* A/B: hide one side when needed */
body[data-ab-topbottom="top"] .bottom-ad { display: none !important; }
body[data-ab-topbottom="bottom"] .top-ad { display: none !important; }

/* Mobile size experiment: 320x50 vs 320x100 */
.top-ad img.ad-mobile-large, .bottom-ad img.ad-mobile-large { width: 320px; height: 100px; max-width: 100%; display: none; }
@media (max-width: 812px) {
  body[data-ab-mobile="50"]   .top-ad img.ad-mobile,
  body[data-ab-mobile="50"]   .bottom-ad img.ad-mobile { display: inline-block; }
  body[data-ab-mobile="100"]  .top-ad img.ad-mobile-large,
  body[data-ab-mobile="100"]  .bottom-ad img.ad-mobile-large { display: inline-block; }
}


/* Layout constraints: shell and top-ad aligned widths */
:root { --shell-max-width: 970px; --shell-min-width: 320px; }
.shell { max-width: var(--shell-max-width); min-width: var(--shell-min-width); width: 100%; margin: 0 auto; }
.top-ad { max-width: var(--shell-max-width); min-width: var(--shell-min-width); width: 100%; margin: 12px auto; position: static !important; z-index: auto !important; }
/* Remove bottom ad entirely per new requirement */
.bottom-ad { display: none !important; }
/* Ensure visible ad scales with shell width */
body.not-fullscreen .top-ad img { width: 100% !important; height: auto !important; }
/* Safety: hide any stray bottom ad images present in legacy templates */
body.not-fullscreen img[alt^="Bottom Ad"] { display: none !important; }