/* ===========================================================
   AirRocket Lab — token sistem desain
   Tema: "buku catatan lab lapangan" — kertas milimeter biru muda,
   tinta biru-tua untuk sains, aksen oranye "tekanan/energi" dan
   hijau-air untuk cairan. Bukan gradient ungu generik AI-app.
   =========================================================== */
:root{
  --paper:      #f6f5ef;
  --paper-line: #e4e8ee;
  --ink:        #16324f;
  --ink-soft:   #4c657e;
  --sky:        #cfe8f3;
  --sky-deep:   #7fb8d8;
  --water:      #1e8fa6;
  --water-deep: #0b5f74;
  --air:        #eef6f2;
  --pressure:   #e8622c;
  --pressure-soft:#f7cdb8;
  --good:       #2f9e5e;
  --warn:       #d9a621;
  --bad:        #d8443c;
  --card:       #ffffff;
  --shadow:     0 2px 0 rgba(22,50,79,.08), 0 10px 24px rgba(22,50,79,.08);
  --radius:     14px;
  --font-display: Georgia, "Palatino Linotype", "Iowan Old Style", ui-serif, serif;
  --font-body:  -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --font-mono:  "SF Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0; max-width:100%;}
/* overflow-x hanya di html. Bila body juga diberi overflow, body menjadi scroll
   container tersendiri sementara yang benar-benar menggulir adalah html —
   akibatnya position:sticky pada keturunan body tidak pernah menempel. Itulah
   yang membuat blueprint terkunci tetap ikut tergulir hilang. */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden;}
body{
  background:
    linear-gradient(180deg, var(--sky) 0%, var(--air) 340px, var(--paper) 340px);
  background-attachment:fixed;
  font-family:var(--font-body);
  color:var(--ink);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.35;
  mask-image:linear-gradient(180deg, transparent, black 340px);
}

h1,h2,h3,.display{font-family:var(--font-display); font-weight:600; color:var(--ink);}

/* ---------------------------------------------------------- top bar */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px clamp(16px,4vw,48px) 8px;
  flex-wrap:wrap; gap:10px;
}
.brand{display:flex; align-items:baseline; gap:12px;}
.brand .logo{font-size:34px; line-height:1;}
.brand h1{font-size:clamp(22px,3vw,30px); margin:0; letter-spacing:-.01em;}
.brand .tag{color:var(--ink-soft); font-size:14px; margin-left:4px;}
.mode-toggle{
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--paper-line);
  border-radius:999px; padding:6px 6px 6px 14px; box-shadow:var(--shadow);
  font-size:13px; color:var(--ink-soft);
}
.switch{position:relative; width:42px; height:24px; background:#dbe3ea; border-radius:999px; cursor:pointer; transition:.2s;}
.switch.on{background:var(--pressure);}
.switch .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.2s;}
.switch.on .knob{left:20px;}

/* ---------------------------------------------------------- layout */
.layout{
  display:grid; grid-template-columns: 340px 1fr; gap:20px;
  padding:0 clamp(16px,4vw,48px) 40px; align-items:start;
}
@media (max-width:920px){ .layout{grid-template-columns:1fr;} }

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; border:1px solid rgba(22,50,79,.05); min-width:0;
}
.card + .card{margin-top:16px;}
.card h2{font-size:16px; margin:0 0 4px; display:flex; align-items:center; gap:8px;}
.card .sub{color:var(--ink-soft); font-size:12.5px; margin:0 0 14px;}

/* ---------------------------------------------------------- sliders */
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink);
}
.field label .val{font-family:var(--font-mono); color:var(--water-deep); font-weight:700; font-size:13px;}
.field .hint{font-size:11.5px; color:var(--ink-soft); margin-top:4px; line-height:1.4;}
input[type=range]{
  -webkit-appearance:none; width:100%; height:8px; border-radius:999px;
  background:linear-gradient(90deg, var(--water) 0%, var(--sky-deep) 100%);
  outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--water-deep); cursor:grab;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
input[type=range].press::-webkit-slider-thumb{border-color:var(--pressure);}
input[type=range].press{background:linear-gradient(90deg, #ffd8b0, var(--pressure));}
select{
  width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--paper-line);
  font-family:var(--font-body); font-size:13px; background:#fff; color:var(--ink);
}
.fin-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:13px 18px; font-weight:700;
  font-size:15px; cursor:pointer; transition:.15s transform, .15s box-shadow;
  font-family:var(--font-body);
}
.btn:active{transform:translateY(1px);}
.btn-launch{
  width:100%; background:linear-gradient(180deg, var(--pressure) 0%, #c94f1e 100%);
  color:#fff; box-shadow:0 4px 0 #a83f16, 0 8px 16px rgba(216,68,60,.25);
  font-size:17px; padding:16px;
}
.btn-launch:hover{filter:brightness(1.04);}
.btn-launch:active{box-shadow:0 2px 0 #a83f16;}
.btn-launch.stale{background:linear-gradient(180deg, #f0a04b 0%, var(--pressure) 100%); animation:pulse-stale 1.4s ease-in-out infinite;}
@keyframes pulse-stale{0%,100%{filter:brightness(1);}50%{filter:brightness(1.12);}}
.btn-ghost{
  background:transparent; border:1.5px solid var(--paper-line); color:var(--ink-soft);
}

/* ---------------------------------------------------------- stage */
.stage-card{padding:0; overflow:hidden;}
.stage-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--paper-line);
}
.stage-head h2{margin:0;}
.playbar{display:flex; align-items:center; gap:10px;}
.playbar button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--paper-line);
  background:#fff; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
}
#stageSvgWrap{background:linear-gradient(180deg,#bfe3f2 0%, #eaf6ee 78%, #dff1df 100%); position:relative;}
svg#stage{display:block; width:100%; height:auto;}

.stat-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:1px; background:var(--paper-line);
}
.stat{background:#fff; padding:12px 14px;}
.stat .k{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.stat .v{font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--water-deep);}
.stat .v.warn{color:var(--warn);} .stat .v.bad{color:var(--bad);} .stat .v.good{color:var(--good);}

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700;
}
.badge.good{background:#e2f4e9; color:var(--good);}
.badge.warn{background:#fbf0d6; color:#8a6c14;}
.badge.bad{background:#fbe1df; color:var(--bad);}

/* ---------------------------------------------------------- scientist panel */
#sciPanel{display:none;}
#sciPanel.show{display:block;}
.formula-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:13px; padding:8px 0; border-bottom:1px dashed var(--paper-line);
}
.formula-row:last-child{border-bottom:none;}
.charts-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){ .charts-grid{grid-template-columns:1fr;} }
.chart-box{background:#fbfbf8; border-radius:10px; padding:8px; border:1px solid var(--paper-line);}
.chart-box canvas{max-height:180px;}
.chart-box .title{font-size:11.5px; font-weight:700; color:var(--ink-soft); padding:2px 4px 4px; text-transform:uppercase; letter-spacing:.03em;}

/* ---------------------------------------------------------- missions */
.mission-list{display:flex; flex-direction:column; gap:8px;}
.mission{
  border:1.5px solid var(--paper-line); border-radius:12px; padding:10px 12px; cursor:pointer;
  transition:.12s border-color, .12s background;
}
.mission:hover{border-color:var(--sky-deep);}
.mission.active{border-color:var(--pressure); background:#fff6f0;}
.mission .title{font-weight:700; font-size:13.5px; display:flex; gap:6px; align-items:center;}
.mission .desc{font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.4;}
.mission .result{margin-top:8px; font-size:12.5px;}

.feedback-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.feedback-list li{font-size:13px; line-height:1.4; padding:8px 10px; background:var(--paper); border-radius:8px;}

.score-ring{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:18px; color:#fff; flex-shrink:0;
}

/* ---------------------------------------------------------- builder grid & gauge */
.builder-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
@media (max-width:760px){ .builder-grid{grid-template-columns:1fr;} }
.builder-grid .card{margin-top:0;}

.pressure-gauge{width:100%;}
.pg-track{position:relative; height:16px; border-radius:999px; overflow:hidden; display:flex; border:1px solid var(--paper-line);}
.pg-zone{height:100%;}
.pg-zone.safe{background:#bfe3c5; flex:0 0 50%;}
.pg-zone.caution{background:#f3dfa0; flex:0 0 17%;}
.pg-zone.danger{background:#f3b6b1; flex:1;}
.pg-needle{position:absolute; top:-3px; bottom:-3px; width:4px; background:var(--ink); border-radius:2px; left:0%; transition:left .25s;}
.pg-labels{display:flex; justify-content:space-between; font-size:10px; color:var(--ink-soft); margin-top:3px; font-family:var(--font-mono);}

footer.note{padding:6px 4px 30px; color:var(--ink-soft); font-size:11.5px; text-align:center; max-width:900px; margin:0 auto;}

/* Android / layar sentuh kecil */
@media (max-width:640px){
  .topbar{
    align-items:center; padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    gap:9px; background:rgba(246,245,239,.94); backdrop-filter:blur(10px);
    position:sticky; top:0; z-index:50; box-shadow:0 1px 0 var(--paper-line);
  }
  .brand{flex:1; min-width:0; align-items:center;}
  .brand .logo{font-size:26px;}
  .brand h1{font-size:21px;}
  .brand .tag{display:none;}
  .mode-toggle{padding:5px 5px 5px 9px; font-size:11px; box-shadow:none;}
  .mode-toggle > span{font-size:0;}
  .mode-toggle > span::after{content:"Ilmuwan"; font-size:11px;}
  .layout{padding:10px 10px calc(30px + env(safe-area-inset-bottom)); gap:12px;}
  .layout > div{min-width:0;}
  .layout > div:first-child{order:2;}
  .layout > div:nth-child(2){order:1;}
  .card{padding:15px 14px; border-radius:12px;}
  .card + .card{margin-top:12px;}
  .builder-grid{gap:12px; margin-top:12px;}
  .fin-grid{grid-template-columns:1fr;}
  .field{margin-bottom:18px;}
  input[type=range]{height:10px;}
  input[type=range]::-webkit-slider-thumb{width:24px; height:24px;}
  .stage-head{padding:11px 12px; gap:8px;}
  .stage-head h2{font-size:14px;}
  #blueprintWrap{min-height:150px; align-items:center; overflow:hidden;}
  #blueprintSvg{width:100% !important; height:150px !important; max-width:none !important;}
  #stageSvgWrap{min-height:220px; display:flex; align-items:flex-end;}
  svg#stage{min-height:220px;}
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat{padding:10px;}
  .stat .v{font-size:17px;}
  .btn{min-height:46px;}
  footer.note{padding:8px 14px calc(24px + env(safe-area-inset-bottom));}
}

/* ------------------------------------------------- blueprint terkunci */
/* Di ponsel, kontrol sirip berada 1090 px di bawah blueprint sedangkan tinggi
   layar hanya 844 px — gambar roket sudah hilang jauh sebelum pemain sampai ke
   slider yang ingin diubahnya. Selama menyetel, kartu blueprint dikunci di atas
   layar; tombol "Selesai atur" melepaskannya agar halaman bisa digulir bebas. */
.pin-btn{
  margin-left:auto; border:1.5px solid var(--paper-line); background:#fff;
  border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700;
  color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.pin-btn:active{transform:translateY(1px);}

/* Tombol luncur kini berada di dalam kartu panggung, tepat di bawah animasi. */
#stageSvgWrap + .btn-launch{width:100%; margin-top:10px;}
.blueprint-card.is-pinned .pin-btn{background:#e9f7ee; border-color:#9ed3b0; color:#1f7a4d;}

@media (max-width:640px){
  .pin-btn{display:inline-block;}
  .blueprint-card.is-pinned{
    position:sticky; top:var(--sticky-top,0px); z-index:30;
    box-shadow:0 6px 18px rgba(30,40,60,.16);
  }
  /* Saat terkunci gambar dipendekkan supaya slider di bawahnya tetap kebagian layar. */
  .blueprint-card.is-pinned #blueprintSvg{height:118px !important;}
  .blueprint-card.is-pinned #blueprintWarn{padding-top:2px; padding-bottom:8px;}
}
@media (min-width:641px){
  /* Desktop tidak butuh penguncian: blueprint sudah terlihat saat menyetel. */
  .pin-btn{display:none;}
}