/* UI overlays (no background canvas), rendered above the OpenTTD canvas. */

:root{
  --crt-fg: rgba(236, 242, 252, 0.96);
  --crt-fg-dim: rgba(236, 242, 252, 0.78);
  --crt-panel: rgba(8, 10, 14, 0.42);
  --crt-panel-border: rgba(236, 242, 252, 0.16);
  --crt-shadow: 0 16px 50px rgba(0,0,0,0.35);
}

#crt-overlay{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none; /* re-enabled on interactive children */
  color:var(--crt-fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  /* With viewport-fit=cover (iOS), keep UI out of the unsafe areas, while the game stays full-bleed. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#crt-overlay .floating-nav,
#crt-overlay .floating-footer,
#crt-overlay .default-left,
#crt-overlay .acknowledgements{
  pointer-events:auto;
}

#crt-overlay .floating-nav,
#crt-overlay .floating-footer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(1120px, calc(100% - 40px));
  background:var(--crt-panel);
  border:1px solid var(--crt-panel-border);
  border-radius:18px;
  box-shadow:var(--crt-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#crt-overlay .floating-nav{
  top:22px;
}

#crt-overlay .floating-footer{
  bottom:22px;
}

#crt-overlay .floating-nav-wrapper{
  padding:14px 16px;
}

#crt-overlay .floating-nav-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

#crt-overlay .nav-logo{
  display:block;
  width:124px;
  height:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

#crt-overlay .text.is--small{
  margin:0;
  font-size:12px;
  line-height:1.1;
  letter-spacing:0.02em;
  color:var(--crt-fg-dim);
}

#crt-overlay .time-wrapper{
  display:flex;
  gap:10px;
  align-items:baseline;
}

#crt-overlay .content-wrapper{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  pointer-events:none; /* allow click-through except the hero block */
}

#crt-overlay .container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
  padding:0;
}

#crt-overlay .default-left{
  max-width:620px;
}

#crt-overlay .title-spacing{
  margin-bottom:18px;
}

#crt-overlay .h2{
  margin:0;
  font-family: ui-serif, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size:48px;
  line-height:1.04;
  font-weight:500;
  letter-spacing:-0.02em;
  /* Strong outer glow for readability over busy/bright gameplay. */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.25),
    0 0 10px rgba(0,0,0,0.70),
    0 0 28px rgba(0,0,0,0.55),
    0 0 60px rgba(0,0,0,0.40);
}

#crt-overlay .hero-subscribe-form{
  margin-top:12px;
}

#crt-overlay .footer-subscribe-form-block{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
}

#crt-overlay .input{
  flex:1 1 180px;
  min-width:180px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--crt-panel-border);
  background:rgba(8,10,14,0.35);
  /* Subtle glass blur, intentionally weaker than nav/footer. */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color:var(--crt-fg);
  font-size:14px;
  -webkit-text-size-adjust: 100%;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#crt-overlay .input::placeholder{
  color:rgba(236, 242, 252, 0.55);
}

#crt-overlay .input:focus{
  border-color:rgba(236, 242, 252, 0.36);
}

#crt-overlay .button.is--submit{
  flex:0 0 auto;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(236, 242, 252, 0.92);
  color:rgba(10, 12, 16, 0.92);
  font-size:14px;
  font-weight:650;
  cursor:pointer;
}

#crt-overlay .button.is--submit:hover{
  background:rgba(255,255,255,0.96);
}

#crt-overlay .acknowledgements{
  position:fixed;
  right:max(12px, env(safe-area-inset-right));
  bottom:max(8px, env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:0.22em;
  max-width:calc(100vw - 24px);
  white-space:nowrap;
  z-index:12;
}

#crt-overlay .acknowledgements-toggle{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  display:inline-grid;
  align-items:center;
  font-size:10px;
  line-height:1;
  letter-spacing:0.02em;
  color:rgba(236, 242, 252, 0.42);
  text-transform:none;
  cursor:pointer;
  white-space:nowrap;
  overflow:clip;
  max-width:190px;
  transition:transform 260ms ease, color 200ms ease;
}

#crt-overlay .acknowledgements-label{
  grid-area:1 / 1;
  transition:opacity 220ms ease;
}

#crt-overlay .acknowledgements-label-open{
  opacity:0;
}

#crt-overlay .acknowledgements-repo-link{
  margin-left:0;
  max-width:0;
  opacity:0;
  overflow:hidden;
  font-size:10px;
  line-height:1;
  color:rgba(236, 242, 252, 0.80);
  text-decoration:none;
  font-weight:500;
  transform:translateX(8px);
  transition:max-width 260ms ease, opacity 220ms ease, transform 260ms ease, margin-left 260ms ease;
  pointer-events:none;
}

#crt-overlay .acknowledgements-toggle:hover{
  color:rgba(236, 242, 252, 0.60);
}

#crt-overlay .acknowledgements-repo-link:hover{
  color:rgba(236, 242, 252, 0.96);
}

#crt-overlay .acknowledgements.is-open .acknowledgements-toggle{
  transform:translateX(-10px);
  color:rgba(236, 242, 252, 0.62);
}

#crt-overlay .acknowledgements.is-open .acknowledgements-label-closed{
  opacity:0;
}

#crt-overlay .acknowledgements.is-open .acknowledgements-label-open{
  opacity:1;
}

#crt-overlay .acknowledgements.is-open .acknowledgements-repo-link{
  margin-left:-10px;
  max-width:250px;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

@media (max-width: 720px){
  #crt-overlay .h2{ font-size:34px; }
  #crt-overlay .floating-nav,
  #crt-overlay .floating-footer{
    width:calc(100% - 24px);
  }
  #crt-overlay .floating-nav{ top:12px; }
  #crt-overlay .floating-footer{ bottom:12px; }
  #crt-overlay .acknowledgements{
    font-size:9px;
    right:max(12px, env(safe-area-inset-right));
    bottom:calc(max(12px, env(safe-area-inset-bottom)) + 54px);
  }
  #crt-overlay .acknowledgements-toggle{ font-size:9px; }
  #crt-overlay .acknowledgements-repo-link{ font-size:9px; }
  #crt-overlay .acknowledgements.is-open .acknowledgements-repo-link{ max-width:170px; }
  /* iOS: prevents viewport zooming when focusing inputs. */
  #crt-overlay .input{ font-size:16px; }
}