/* Start Screen v1.8.0 */
.ga-root .ga-start-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,16,.78); z-index:9998; backdrop-filter:saturate(110%) blur(2px);
}
.ga-root .ga-start-card{
  width:min(720px, 92vw); color:#eaf2ff; background:#0d1420; border:1px solid #1b2a44;
  border-radius:16px; padding:18px 18px 14px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  font:14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.ga-root .ga-start-card h2{ margin:0 0 8px 0; font-size:22px; letter-spacing:.3px; }
.ga-root .ga-start-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ga-root .ga-start-col h3{ margin:4px 0 6px 0; font-size:15px; color:#b9d0ff; }
.ga-root .ga-start-col ul{ margin:0; padding-left:18px; }
.ga-root .ga-ctrl{ margin:6px 0; }
.ga-root .ga-start-actions{ margin-top:12px; display:flex; justify-content:center; }
.ga-root .ga-start-btn{
  padding:10px 18px; border-radius:12px; border:1px solid #274063; background:#183154; color:#fff;
  font:700 15px/1 system-ui; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.ga-root .ga-start-btn:active{ transform:translateY(1px); }
.ga-root .ga-start-overlay.hide{ opacity:0; transition:opacity .2s ease; }

@media (max-width:680px){
  .ga-root .ga-start-grid{ grid-template-columns:1fr; }
}
.ga-root .ga-start-overlay{z-index:10000;}
.ga-root .ga-start-overlay.ga-start-visible{display:flex;}


/* v1.8.6 viewport fallback */
.ga-start-viewport{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2147483647 !important; /* max */
}
.ga-start-overlay.ga-start-visible{ display:flex !important; }

.ga-root .ga-sponsor{margin:4px 0 10px;color:#cfe1ff;opacity:.9;font-size:13px}

/* v1.9.1 force visibility */
#ga-start-overlay.ga-start-viewport{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2147483647 !important;
}
.ga-start-overlay.ga-start-visible{ display:flex !important; }


/* ===== v1.9.2 Forest Theme ===== */
.ga-root .ga-start-overlay,
#ga-start-overlay.ga-start-viewport{
  /* Forest-green glass backdrop */
  background: rgba(10, 46, 26, 0.86) !important; /* #0A2E1A */
  backdrop-filter: saturate(120%) blur(2px);
}

.ga-root .ga-start-card{
  /* Deep forest card with glowing tan outline */
  background: #0F2A1A; /* deeper forest */
  color: #EDE3CE;      /* warm tan text */
  border: 2px solid rgba(210, 180, 140, 0.85); /* tan outline (#D2B48C) */
  box-shadow:
    0 0 0 2px rgba(10, 46, 26, 0.35),
    0 12px 34px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(210, 180, 140, 0.35); /* subtle tan glow */
}

.ga-root .ga-start-card h2{
  color: #F2E6CA; /* brighter tan for title */
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

.ga-root .ga-start-col h3{
  color: #E7D7B5; /* tan subheads */
}

.ga-root .ga-start-col ul{
  color: #EDE3CE; /* readable body */
}

.ga-root .ga-ctrl kbd{
  background: rgba(210,180,140,.15);
  border: 1px solid rgba(210,180,140,.35);
  color: #F2E6CA;
}

.ga-root .ga-sponsor{
  color: #E7D7B5;
  opacity: .95;
}

/* Start button: tan with green glow */
.ga-root .ga-start-btn{
  background: #D2B48C;          /* tan */
  border: 1px solid rgba(0, 168, 107, 0.6); /* jade green border */
  color: #0B2A17;               /* deep forest text */
  box-shadow:
    0 0 0 2px rgba(11,42,23,.25),
    0 8px 18px rgba(0,168,107,.25); /* green glow */
}
.ga-root .ga-start-btn:hover{
  filter: brightness(1.03);
  box-shadow:
    0 0 0 2px rgba(11,42,23,.28),
    0 10px 22px rgba(0,168,107,.32);
}
.ga-root .ga-start-btn:active{
  transform: translateY(1px);
}
.ga-root .ga-start-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,168,107,.5),
    0 0 0 6px rgba(210,180,140,.35);
}

/* Accessibility: ensure links/strong remain high-contrast */
.ga-root .ga-start-card a{ color:#A6F5C7; text-decoration:underline; }
.ga-root .ga-start-card strong{ color:#F2E6CA; }


/* v1.9.3 — Anchor overlay to game container */
.ga-root.ga-has-start{ position: relative !important; }
.ga-root .ga-start-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 9999;
}
/* Viewport fallback remains only until we rehome */
#ga-start-overlay.ga-start-viewport{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}


/* v1.9.4 — rect-locked overlay box */
#ga-start-overlay.ga-start-locked{
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}


/* v1.9.5 — container-only overlay */
.ga-root.ga-has-start{ position: relative !important; }
.ga-root .ga-start-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important; /* below most site headers (100+) */
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* opaque forest backdrop */
  background: #0A2E1A !important;
}


/* v1.9.6 — Mobile-friendly card */
.ga-root .ga-start-card{
  width: min(720px, 92vw);
  max-height: min(92svh, 92vh);
  display: flex;
  flex-direction: column;
}
.ga-root .ga-start-body{
  overflow: auto;
  margin-top: 6px;
  margin-bottom: 10px;
  padding-right: 4px; /* avoid scrollbar overlaying text */
}
.ga-root .ga-start-actions{
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(15,42,26,0) 0%, rgba(15,42,26,0.75) 30%, rgba(15,42,26,0.95) 100%);
  padding-top: 8px;
  display: flex;
  justify-content: center;
}
@media (max-width: 520px){
  .ga-root .ga-start-card{ width: min(560px, 94vw); padding: 14px 14px 12px; }
  .ga-root .ga-start-card h2{ font-size: 20px; }
  .ga-root .ga-start-col h3{ font-size: 14px; }
  .ga-root .ga-start-col ul{ font-size: 13px; line-height: 1.35; }
  .ga-root .ga-start-btn{ width: 100%; padding: 12px 14px; font-size: 16px; }
  .ga-root .ga-ctrl{ font-size: 13px; }
}
@media (max-height: 640px){
  .ga-root .ga-start-card{ max-height: min(88svh, 88vh); }
}


/* v1.9.7 — Smaller smartphone card + safe interactions */
@media (max-width: 420px){
  .ga-root .ga-start-card{ width: 92vw; max-height: min(86svh, 86vh); padding: 12px 12px 10px; }
  .ga-root .ga-start-card h2{ font-size: 18px; margin-bottom: 4px; }
  .ga-root .ga-sponsor{ font-size: 12px; margin: 2px 0 6px; }
  .ga-root .ga-start-body{ margin-top: 4px; margin-bottom: 8px; }
  .ga-root .ga-start-col h3{ font-size: 13px; margin: 4px 0; }
  .ga-root .ga-start-col ul{ font-size: 12.5px; line-height: 1.3; }
  .ga-root .ga-ctrl{ font-size: 12.5px; }
  .ga-root .ga-start-btn{ width: 100%; padding: 10px 12px; font-size: 15px; }
}
@media (max-height: 560px){
  .ga-root .ga-start-card{ max-height: min(84svh, 84vh); }
}
/* Ensure backdrop remains opaque and inside container */
.ga-root .ga-start-overlay{ background: #0A2E1A !important; }


/* v1.9.8 — viewport fallback + mobile sizing */
/* Viewport fallback */
#ga-start-overlay.ga-start-viewport{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2147483647 !important;
}
/* Container mode */
.ga-root.ga-has-start{ position: relative !important; }
.ga-root .ga-start-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: #0A2E1A !important; /* opaque forest backdrop */
}
/* Card sizing & sticky actions preserved */
.ga-root .ga-start-card{
  width: min(720px, 92vw);
  max-height: min(92svh, 92vh);
  display: flex; flex-direction: column;
}
.ga-root .ga-start-body{ overflow: auto; margin-top: 6px; margin-bottom: 10px; padding-right: 4px; }
.ga-root .ga-start-actions{ position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(15,42,26,0) 0%, rgba(15,42,26,0.75) 30%, rgba(15,42,26,0.95) 100%); padding-top: 8px; display:flex; justify-content:center; }
@media (max-width: 520px){
  .ga-root .ga-start-card{ width: min(560px, 94vw); padding: 14px 14px 12px; }
  .ga-root .ga-start-card h2{ font-size: 20px; }
  .ga-root .ga-start-col h3{ font-size: 14px; }
  .ga-root .ga-start-col ul{ font-size: 13px; line-height: 1.35; }
  .ga-root .ga-ctrl{ font-size: 13px; }
  .ga-root .ga-start-btn{ width: 100%; padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 420px){
  .ga-root .ga-start-card{ width: 92vw; max-height: min(86svh, 86vh); padding: 12px 12px 10px; }
  .ga-root .ga-start-card h2{ font-size: 18px; margin-bottom: 4px; }
  .ga-root .ga-sponsor{ font-size: 12px; margin: 2px 0 6px; }
  .ga-root .ga-start-body{ margin-top: 4px; margin-bottom: 8px; }
  .ga-root .ga-start-col h3{ font-size: 13px; margin: 4px 0; }
  .ga-root .ga-start-col ul{ font-size: 12.5px; line-height: 1.3; }
  .ga-root .ga-ctrl{ font-size: 12.5px; }
  .ga-root .ga-start-btn{ width: 100%; padding: 10px 12px; font-size: 15px; }
}
@media (max-height: 560px){
  .ga-root .ga-start-card{ max-height: min(84svh, 84vh); }
}