/* CutRedTape-style 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;
}

#crt-overlay .floating-nav,
#crt-overlay .floating-footer,
#crt-overlay .default-left{
  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);
  color:var(--crt-fg);
  font-size:14px;
  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);
}

@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; }
}