html,body{height:100%;margin:0;overflow:hidden}
body{font-family:Segoe UI,Roboto,system-ui,-apple-system,"Helvetica Neue",Arial;background:#061427;color:#cfe8ff;overscroll-behavior:none;display:flex;flex-direction:column}
#layout{flex:1;display:flex;flex-direction:row;overflow:hidden;min-height:0}
#game-wrapper{flex:1;position:relative;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-tap-highlight-color:transparent}

/* ── Ad slots ─────────────────────────────────────────────────── */
.ad-slot{background:#060f1c;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
#ad-left,#ad-right{width:160px}
#ad-top,#ad-bottom{height:60px;display:none;width:100%}

/* Desktop narrow */
@media(max-width:768px){
  #ad-top,#ad-bottom{display:flex}
  #ad-left,#ad-right{display:none}
}

/* Mobile portrait — top/bottom ads */
@media(pointer:coarse) and (orientation:portrait){
  #ad-top,#ad-bottom{display:flex}
  #ad-left,#ad-right{display:none}
}

/* Mobile landscape — left/right ads, safe areas for notched phones */
@media(pointer:coarse) and (orientation:landscape){
  #ad-top,#ad-bottom{display:none}
  #ad-left,#ad-right{display:flex;width:120px}
  #ad-left{padding-left:env(safe-area-inset-left)}
  #ad-right{padding-right:env(safe-area-inset-right)}
}

/* ── Ad inner ─────────────────────────────────────────────────── */
.ad-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;text-align:center;width:100%;height:100%}
.ad-symbol{font-size:28px;line-height:1;opacity:0.9}
.ad-name{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.ad-tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;line-height:1.3}

/* company colours */
[data-co="weyland"]  .ad-symbol,[data-co="weyland"]  .ad-name{color:#5bb8e8;text-shadow:0 0 10px rgba(91,184,232,.5)}
[data-co="umbrella"] .ad-symbol,[data-co="umbrella"] .ad-name{color:#e84040;text-shadow:0 0 10px rgba(232,64,64,.5)}
[data-co="cyberdyne"].ad-symbol,[data-co="cyberdyne"].ad-name{color:#e8a020;text-shadow:0 0 10px rgba(232,160,32,.5)}
[data-co="weyland"]  .ad-tag{color:#5bb8e8}
[data-co="umbrella"] .ad-tag{color:#e84040}
[data-co="cyberdyne"].ad-tag{color:#e8a020}

/* horizontal layout for top/bottom bars */
#ad-top .ad-inner,#ad-bottom .ad-inner{flex-direction:row;gap:10px;padding:0 16px}
#ad-top .ad-symbol,#ad-bottom .ad-symbol{font-size:20px}
#ad-top .ad-tag,#ad-bottom .ad-tag{display:none}
#ad-top .ad-name,#ad-bottom .ad-name{font-size:10px}

@media (pointer: coarse) {
  #start-btn { padding: 20px 72px; font-size: clamp(18px, 3vw, 26px); }
}

/* HUD overlay (for small screens the HUD remains readable) */
.hud { position:fixed; left:12px; top:10px; color:#bfe8ff; font-size:14px; pointer-events:none }
.hud .right { position:fixed; right:12px; top:10px; pointer-events:none }

/* ── Start screen ─────────────────────────────────────────────── */
#start-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* transparent so the canvas starfield shows through */
  background: rgba(6, 20, 39, 0.72);
  transition: opacity 0.45s ease;
}
#start-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#start-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  padding: 0 24px;
}

#start-art {
  max-width: min(340px, 80vw);
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 32px rgba(102,238,255,0.25);
}

#start-title {
  margin: 0;
  font-size: clamp(42px, 9vw, 100px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6ef;
  text-shadow:
    0 0 18px #6ef,
    0 0 40px #3af,
    0 4px 10px rgba(0,0,0,0.9);
  line-height: 1;
}

#start-sub {
  margin: -16px 0 0;
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #6ab;
  opacity: 0.8;
}

#start-btn {
  font-family: inherit;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #061427;
  background: #6ef;
  border: none;
  border-radius: 6px;
  padding: 14px 56px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(102,238,255,0.55);
  transition: background 0.14s, transform 0.1s, box-shadow 0.14s;
}
#start-btn:hover  { background: #fff; transform: scale(1.07); box-shadow: 0 0 32px rgba(102,238,255,0.85); }
#start-btn:active { transform: scale(0.96); }

#start-controls {
  margin: 0;
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 0.06em;
  color: #6ab;
  opacity: 0.65;
}

#start-credit {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: 0.08em;
  color: #6ab;
  opacity: 0.45;
}

/* Level complete modal */
#level-complete { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; z-index:20; background: rgba(6,20,39,0.78); }
#level-complete.hidden { display:none; }
#level-complete-content { width: min(680px, 92%); max-width:760px; background: rgba(6,16,30,0.92); padding: 22px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); text-align:center; display:flex; flex-direction:column; gap:16px; }
#level-complete h2 { margin: 0; font-size: clamp(26px, 4.5vw, 46px); color:#6ef; }
#level-complete p { margin: 0; color:#dfe; opacity:0.9 }
#lc-ad { height: 110px; display:flex; align-items:center; justify-content:center; background:#071627; border-radius:8px; }
#lc-actions { display:flex; justify-content:center; gap:12px; }
#lc-continue { background:#6ef; color:#061427; border:none; padding:10px 28px; border-radius:6px; font-weight:700; cursor:pointer }

@media (max-width:480px) {
  #lc-ad { height: 86px }
  #level-complete-content { padding:14px }
}

/* ── Rotate overlay (portrait mobile only) ────────────────────── */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #061427;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#rotate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  color: #6ef;
  text-align: center;
  padding: 24px;
}
#rotate-icon {
  font-size: 80px;
  animation: rotate-hint 1.8s ease-in-out infinite;
}
#rotate-content p {
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6ab;
  margin: 0;
}
@keyframes rotate-hint {
  0%   { transform: rotate(0deg);   }
  40%  { transform: rotate(90deg);  }
  60%  { transform: rotate(90deg);  }
  100% { transform: rotate(0deg);   }
}
@media (pointer: coarse) and (orientation: portrait) {
  #rotate-overlay { display: flex; }
}