/* ===========================
   Fonts
   =========================== */
@font-face {
  font-family: 'Share Tech Mono';
  src: local('Share Tech Mono'),
       url('fonts/ShareTechMono.woff2') format('woff2'),
       url('fonts/ShareTechMono.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Digital-7';
  src: local('Digital-7'),
       url('fonts/digital-7.woff2') format('woff2'),
       url('fonts/digital-7.woff') format('woff');
  font-display: swap;
}

/* ===========================
   Theme variables
   =========================== */
:root{
  --bg:#000;
  --fg:#fff;
  --panel-bg:rgba(0,0,0,.72);
  --accent:#0f0;
  --accent-yellow:#ffe600;
  --accent-red:#ff3b30;
  --border:#fff;
  --shadow: 0 0 10px rgba(255,255,255,.08);
  --radius:10px;
  --gap:16px;

  --gauge-size:150px;
  --dial-size:110px;
  --needle-width:5px;
}

/* ===========================
   Base + ankkuroi peli alas
   =========================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background-color:var(--bg);
  color:var(--fg);
  font-family:'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin:0;
  display:flex;            /* ankkurointi alas */
  flex-direction:column;   /* ankkurointi alas */
  overflow:hidden;
  background-image:url('lunar.jpg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  text-shadow:2px 2px 4px rgba(0,0,0,.8);
}
@media (max-width: 900px){
  body{ background-attachment:scroll; }
}

/* Stars canvas taustalle */
#starsCanvas{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Screen-reader only */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{ outline:2px dashed var(--accent); outline-offset:3px; }

/* Retro-otsikko (poista jos et käytä) */
.retro-title{
  text-align:center;
  user-select:none;
  padding-top: clamp(12px, 2vh, 24px);
  z-index: 1; /* starsCanvas on z-index 0 */
  text-shadow:
    0 0 2px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.6);
}
.retro-title__top{
  font-size: clamp(18px, 2.6vw, 32px);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: .2em;
  background: linear-gradient(180deg, #ffc156, #ff5bb8 55%, #79d5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.retro-title__main{
  font-size: clamp(36px, 8vw, 96px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: .95;
  background: linear-gradient(180deg, #a0f0ff, #68a9ff 55%, #4b66ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 10px rgba(75,102,255,.35),
    0 0 18px rgba(75,102,255,.25);
}

/* ===========================
   Layout – Grid
   =========================== */
#game-container{
  position: relative;
  z-index: 1; /* tähtien päälle */
  display:grid;
  grid-template-columns: minmax(180px, 220px) minmax(640px, 840px) minmax(180px, 220px);
  gap: var(--gap);
  align-items:start;
  justify-content:center;
  padding: clamp(8px, 2vw, 24px);

  /* ankkuroi alas: ylätila joustaa, ala pieni marginaali */
  margin-top: auto;
  margin-bottom: clamp(10px, 3vh, 28px);
}
@media (max-width: 980px){
  #game-container{
    grid-template-columns: 1fr;
    gap: calc(var(--gap) * 1.25);
    padding: 12px;
    margin-bottom: 8px;
  }
  #left-panel, #right-panel{
    flex-direction: row;
    justify-content: center;
    gap: var(--gap);
    width: 100%;
  }
}

/* ===========================
   Panels
   =========================== */
#left-panel, #right-panel{
  display:flex; flex-direction:column; align-items:center;
  padding:12px; width:100%;
}
#center-panel{ display:flex; flex-direction:column; align-items:center; }

/* ===========================
   Instructions
   =========================== */
#instructions{
  margin-top:10px; text-align:center; background-color:var(--panel-bg);
  padding:12px 14px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow);
}
#instructions h2{ font-size:1.25rem; margin:0 0 6px 0; }
#instructions p{ margin:4px 0; line-height:1.35; }

/* ===========================
   Canvas
   =========================== */
canvas#gameCanvas{
  background-color:rgba(0,0,0,.7);
  border:2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0 18px rgba(0,0,0,.6);
  width: min(100%, 840px);
  height: auto;
  aspect-ratio: 4 / 3;
  display:block;
}

/* ===========================
   Message area & passengers
   =========================== */
#message-area{
  width: min(100%, 840px);
  text-align:center;
  margin-top:10px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding:8px 10px;
}
#passenger-info{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
#passenger-slots{ display:flex; gap:4px; }
.passenger-slot{
  width:20px;height:20px; background-color:#555; border:1px solid var(--border);
  border-radius:4px; display:grid; place-items:center; font-size:10px; font-weight:bold; color:#000;
}
.passenger-slot.filled{ background-color:#fff; }

/* ===========================
   Gauges – shared
   =========================== */
.gauge-container{
  position:relative;
  width: var(--gauge-size);
  height: var(--gauge-size);
  margin-bottom:24px;
  text-align:center;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding-top:18px;
  background-color: var(--panel-bg);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gauge-label{ margin-top:6px; color:var(--fg); text-shadow:1px 1px 2px #000; font-size:.95rem; }

/* Fuel gauge */
.gauge-dial{
  width: var(--dial-size); height: var(--dial-size);
  border-radius: 50%; border: 4px solid var(--border); position: relative; box-sizing: border-box; overflow: hidden;
}
.gauge-dial::after{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.45) 80%); z-index:1; }
.gauge-dial::before{ content:''; position:absolute; bottom:-10%; left:50%; width:60%; height:60%; background:#000; transform: translateX(-50%) rotate(135deg); border-radius: 0 0 100% 100%; z-index:0; }
.gauge-needle{
  position:absolute; bottom:50%; left:50%; transform-origin: bottom center;
  width: var(--needle-width); height: 45%; background-color: var(--accent-red);
  z-index:3; transition: transform 0.08s linear; will-change: transform; transform: translateZ(0);
}
.gauge-center{ width:12px;height:12px; background-color:#fff; border-radius:50%; position:absolute; bottom:50%; left:50%; transform: translate(-50%, 50%); z-index:4; }
.fuel-light{
  width:16px;height:16px; border-radius:50%; background-color:#333; border:1px solid var(--border);
  position:absolute; bottom:8px; left:50%; transform: translateX(-50%); z-index:5;
  box-shadow:0 0 0 rgba(255,0,0,0); transition: background-color .25s, box-shadow .25s;
}
.fuel-light.active{ background-color: var(--accent-red); box-shadow:0 0 14px var(--accent-red); }

/* Speed gauge */
.digital-display{
  background-color: rgba(0,0,0,.7);
  border:2px solid var(--accent);
  padding:10px 18px;
  font-size: 2.35rem;
  font-family: 'Digital-7', 'Share Tech Mono', ui-monospace, monospace;
  color: var(--accent);
  box-shadow: 0 0 10px rgba(0,255,0,.35);
  border-radius:6px;
  margin-bottom: 10px;
}
.color-indicator{ width:26px;height:26px; border-radius:50%; border:2px solid var(--border); box-shadow: 0 0 6px rgba(255,255,255,.4); background: var(--accent); }
.color-indicator.ok{ background: var(--accent); }
.color-indicator.warn{ background: var(--accent-yellow); }
.color-indicator.danger{ background: var(--accent-red); }

/* Angle gauge */
.lander-shape{ width:32px; height:42px; position:relative; transform-origin: 50% 100%; transition: transform 0.08s linear; will-change: transform; transform: translateZ(0); }
.lander-shape::before{
  content:''; position:absolute; top:0; left:50%;
  width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:42px solid #fff; transform: translateX(-50%);
}
#angle-gauge.ok    { box-shadow: 0 0 10px rgba(0,255,0,.35);   border-color: rgba(0,255,0,.35); }
#angle-gauge.warn  { box-shadow: 0 0 10px rgba(255,230,0,.35); border-color: rgba(255,230,0,.35); }
#angle-gauge.danger{ box-shadow: 0 0 10px rgba(255,59,48,.35); border-color: rgba(255,59,48,.35); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gauge-needle, .lander-shape{ transition: none; }
}

/* Very narrow screens */
@media (max-width: 420px){
  :root{ --gauge-size:130px; --dial-size:100px; }
  .digital-display{ font-size: 1.9rem; padding:8px 14px; }
  #instructions{ font-size:.95rem; }
}