/* ================= Dasar ================= */
:root{
  --metal-1:#0e1218;
  --metal-2:#1a212b;
  --metal-3:#2a3441;
  --amber:#ffc94d;
  --hud:#8cffaf;
  --panel-h: clamp(58px, 13vh, 104px);
  --frame: clamp(10px, 2.4vmin, 22px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  overflow:hidden; position:fixed; inset:0;
  background:#05070a;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#e9eef5;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}

#app{ position:fixed; inset:0; overflow:hidden; }

#scene,#hud{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#hud{ pointer-events:none; }

.hidden{ display:none !important; }

/* ================= Kilat umpan balik ================= */
#flash{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .18s ease-out; z-index:6;
}
#flash.good{ background:radial-gradient(circle at 50% 45%, rgba(120,255,170,.42), rgba(120,255,170,0) 62%); opacity:1; }
#flash.bad{ background:radial-gradient(circle at 50% 45%, rgba(255,90,90,.42), rgba(255,90,90,0) 62%); opacity:1; }

/* ================= Kokpit ================= */
#cockpit{ position:absolute; inset:0; z-index:5; pointer-events:none; }
#cockpit .no-drag{ pointer-events:auto; }

/* bingkai kanopi */
.canopy{
  position:absolute; inset:0;
  border:var(--frame) solid #10151c;
  border-bottom-width:calc(var(--frame) * .4);
  border-radius: clamp(20px, 7vmin, 64px);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.05),
    inset 0 0 90px rgba(0,0,0,.55),
    inset 0 26px 60px rgba(0,0,0,.35);
  background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 16%),
    linear-gradient(0deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 14%);
  pointer-events:none;
}
.canopy::after{
  content:''; position:absolute; inset:calc(var(--frame) * -1);
  border:calc(var(--frame) * .55) solid #05080c;
  border-radius: clamp(24px, 8vmin, 76px);
  pointer-events:none;
}

/* tiang kanopi miring di dua sudut atas */
.pillar{
  position:absolute; top:calc(var(--frame) - 2px);
  width: clamp(26px, 7vmin, 74px); height: clamp(52px, 17vmin, 150px);
  background:linear-gradient(180deg,#151b23 0%, #10151c 60%, rgba(16,21,28,0) 100%);
  pointer-events:none;
}
.pillar-l{ left:calc(var(--frame) - 2px); transform-origin:top left; transform:skewX(19deg); border-bottom-right-radius:60% 90%; }
.pillar-r{ right:calc(var(--frame) - 2px); transform-origin:top right; transform:skewX(-19deg); border-bottom-left-radius:60% 90%; }

/* pantulan kaca */
.glare{
  position:absolute; inset:var(--frame);
  border-radius: clamp(16px, 6vmin, 54px);
  background:linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 42%);
  mix-blend-mode:screen; pointer-events:none;
}

/* ================= Perintah huruf ================= */
#order{
  position:absolute; top:calc(var(--frame) + env(safe-area-inset-top, 0px) + 4px);
  left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 16px 8px; border-radius:16px;
  background:linear-gradient(180deg, rgba(10,14,20,.82), rgba(10,14,20,.58));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:8;
}
.order-label{ font-size:clamp(8px,1.5vmin,11px); letter-spacing:.22em; color:#9fb2c6; font-weight:700; }
.order-row{ display:flex; align-items:center; gap:10px; }
#orderLetter{
  font-size:clamp(30px,7.4vmin,60px); font-weight:900; line-height:1;
  color:#fff; text-shadow:0 0 22px rgba(255,201,77,.75), 0 2px 0 rgba(0,0,0,.5);
  min-width:1.1em; text-align:center;
}
#order.listen-only #orderLetter{ color:transparent; text-shadow:none; }
#order.listen-only #orderLetter::after{ content:'?'; color:#5d708a; text-shadow:none; }

/* ================= Tombol ================= */
.icon-btn{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#232c37,#161d26);
  color:#dbe6f2; cursor:pointer;
}
.icon-btn:active{ transform:translateY(1px); }
.pill-btn{
  padding:7px 12px; border-radius:12px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#232c37,#161d26);
  color:#dbe6f2; cursor:pointer;
}
.pill-btn:active{ transform:translateY(1px); }

#topRight{
  position:absolute; z-index:8; display:flex; gap:8px; align-items:center;
  top:calc(var(--frame) + env(safe-area-inset-top, 0px) + 6px);
  right:calc(var(--frame) + env(safe-area-inset-right, 0px) + 8px);
}

/* ================= Umpan balik besar ================= */
#feedback{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%) scale(.7);
  font-size:clamp(26px,7vmin,64px); font-weight:900; letter-spacing:.02em;
  text-align:center; opacity:0; pointer-events:none; z-index:9;
  text-shadow:0 4px 22px rgba(0,0,0,.65);
}
#feedback.show{ animation:pop 1.15s ease-out forwards; }
@keyframes pop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
  18%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  35%{ transform:translate(-50%,-50%) scale(1); }
  75%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(1); }
}

/* ================= Throttle ================= */
#throttle{
  position:absolute; z-index:8;
  right:calc(var(--frame) + env(safe-area-inset-right, 0px) + 10px);
  bottom:calc(var(--panel-h) + 12px);
  width:clamp(46px,8vmin,62px);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  touch-action:none;
}
.thr-label{ font-size:9px; letter-spacing:.2em; color:#9fb2c6; font-weight:800; }
.thr-track{
  position:relative; width:clamp(26px,4.6vmin,34px);
  height:clamp(92px,26vh,190px);
  border-radius:18px;
  background:linear-gradient(180deg,#0c1016,#161d26);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.7);
  overflow:visible;
}
.thr-fill{
  position:absolute; left:3px; right:3px; bottom:3px; height:55%;
  border-radius:14px;
  background:linear-gradient(180deg,#ffd76b,#e8890f);
  opacity:.85;
}
.thr-notches{
  position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,0) 1px 12.5%);
}
.thr-lever{
  position:absolute; left:50%; bottom:calc(55% - 15px);
  width:clamp(38px,7vmin,50px); height:30px; margin-left:calc(clamp(38px,7vmin,50px) / -2);
  border-radius:9px;
  background:linear-gradient(180deg,#4d5a6b,#232c37 55%,#151c24);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.thr-lever::after{
  content:''; position:absolute; left:6px; right:6px; top:50%; height:2px; margin-top:-1px;
  background:rgba(255,255,255,.28); border-radius:2px;
  box-shadow:0 5px 0 rgba(255,255,255,.16), 0 -5px 0 rgba(255,255,255,.16);
}
.thr-value{ font-size:11px; font-weight:800; color:var(--amber); font-variant-numeric:tabular-nums; }

/* ================= Panel instrumen ================= */
#panel{
  position:absolute; left:0; right:0; bottom:0; height:var(--panel-h);
  padding:0 calc(var(--frame) + 6px) env(safe-area-inset-bottom, 0px);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:
    linear-gradient(180deg,#222b36 0%, #141a22 38%, #0b0f14 100%);
  border-top:2px solid #38424f;
  box-shadow:0 -8px 26px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.07);
  border-radius: clamp(14px,4vmin,30px) clamp(14px,4vmin,30px) 0 0;
  z-index:7;
}
.gauge{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; }
.gauge.score{ flex:0 0 auto; text-align:right; align-items:flex-end; padding-right:clamp(52px,9vmin,70px); }
.g-label{ font-size:clamp(7px,1.4vmin,10px); letter-spacing:.18em; color:#8ea3b8; font-weight:800; }
.g-value{ font-size:clamp(15px,3.4vmin,26px); font-weight:800; color:#eaf2fb; font-variant-numeric:tabular-nums; line-height:1; }
.g-unit{ font-size:.52em; color:#8ea3b8; margin-left:3px; font-weight:700; }
.g-sub{ font-size:clamp(8px,1.6vmin,11px); color:var(--amber); font-weight:700; }
.g-bar{ height:5px; border-radius:4px; background:#0a0e13; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); }
.g-bar i{ display:block; height:100%; width:0%; border-radius:4px; background:linear-gradient(90deg,#5fd6a0,#8cffaf); }
.gauge:nth-child(2) .g-bar i{ background:linear-gradient(90deg,#5aa9e6,#9ad7ff); }

/* ================= Layar penuh (mulai / jeda) ================= */
.screen{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:
    radial-gradient(1200px 700px at 50% -10%, #1d3b60 0%, #0a1017 62%, #05070a 100%);
  overflow:auto;
}
.screen-inner{
  width:min(560px,100%); text-align:center;
  background:linear-gradient(180deg, rgba(24,32,43,.92), rgba(12,17,24,.94));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px; padding:18px 18px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.screen-inner.narrow{ width:min(420px,100%); }
.logo{ font-size:44px; line-height:1; }
h1{
  margin:4px 0 6px; font-size:clamp(26px,6vmin,40px); font-weight:900; letter-spacing:.04em;
  background:linear-gradient(180deg,#fff,#ffd070); -webkit-background-clip:text; background-clip:text; color:transparent;
}
h2{ margin:0 0 12px; font-size:clamp(20px,5vmin,30px); font-weight:900; letter-spacing:.06em; }
.tagline{ margin:0 0 14px; color:#adbdcf; font-size:clamp(12px,2.6vmin,15px); line-height:1.5; }

.opt-block{ margin:12px 0; text-align:left; }
.opt-title{ font-size:11px; letter-spacing:.16em; color:#8ea3b8; font-weight:800; margin-bottom:6px; }
.opt-hint{ font-size:11.5px; color:#93a6ba; margin-top:6px; line-height:1.45; }

.seg{ display:flex; gap:6px; background:#0c1117; padding:5px; border-radius:14px; border:1px solid rgba(255,255,255,.08); }
.seg button{
  flex:1; padding:10px 6px; border-radius:10px; border:0; cursor:pointer;
  background:transparent; color:#a9bccf; font-weight:800; font-size:13px;
}
.seg button.on{ background:linear-gradient(180deg,#3a4757,#232d3a); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4); }

.check{ display:flex; align-items:center; gap:10px; padding:8px 2px; font-size:13.5px; color:#cfdcea; cursor:pointer; }
.check input{ width:20px; height:20px; accent-color:#ffc94d; }

.big-btn{
  width:100%; margin-top:14px; padding:16px; border:0; border-radius:16px; cursor:pointer;
  font-size:17px; font-weight:900; letter-spacing:.06em; color:#22180a;
  background:linear-gradient(180deg,#ffe08a,#f0a827);
  box-shadow:0 8px 22px rgba(240,168,39,.32), inset 0 1px 0 rgba(255,255,255,.6);
}
.big-btn:active{ transform:translateY(2px); }
.ghost-btn{
  width:100%; margin-top:9px; padding:12px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:#c6d4e3;
  font-size:13.5px; font-weight:700;
}
.note{ margin-top:10px; font-size:11.5px; color:#7f93a8; line-height:1.45; }

.stat-row{ display:flex; gap:8px; margin-bottom:6px; }
.stat-row>div{ flex:1; background:#0c1117; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:9px 4px; }
.stat-row b{ display:block; font-size:20px; color:var(--amber); font-weight:900; }
.stat-row span{ font-size:10px; color:#8ea3b8; letter-spacing:.08em; }

/* ================= Hitung mundur ================= */
#countdown{
  position:absolute; inset:0; z-index:15; display:grid; place-items:center;
  pointer-events:none;
}
#countdown span{
  font-size:clamp(60px,22vmin,170px); font-weight:900; color:#fff;
  text-shadow:0 0 40px rgba(255,201,77,.8), 0 6px 0 rgba(0,0,0,.35);
  animation:cd .9s ease-out;
}
@keyframes cd{ from{ transform:scale(1.9); opacity:0 } 30%{ opacity:1 } to{ transform:scale(.85); opacity:.15 } }

/* ================= Tata letak layar mulai ================= */
/* Portrait: satu kolom, tombol MULAI di paling bawah. */
.start-grid{ display:flex; flex-direction:column; }
.col-head{ display:contents; }
.start-grid .logo{ order:1 }
.start-grid h1{ order:2 }
.start-grid .tagline{ order:3 }
.col-opts{ order:5 }
.start-grid .big-btn{ order:8 }
.start-grid .note{ order:9 }

/* ================= Penyesuaian layar pendek (landscape HP) ================= */
@media (orientation:landscape) and (max-height:540px){
  :root{ --panel-h: clamp(48px,17vh,74px); }

  /* dua kolom supaya semua muat tanpa perlu di-scroll */
  .screen-inner{ width:min(880px,100%); padding:14px 16px 16px; }
  .start-grid{ display:grid; grid-template-columns:1fr 1.15fr; column-gap:20px; align-items:start; }
  .col-head{ display:block; }
  .col-opts{ order:0; }
  .logo{ font-size:30px; }
  h1{ margin:2px 0 4px; }
  .tagline{ margin-bottom:8px; font-size:12.5px; }
  .opt-block{ margin:6px 0; }
  .big-btn{ padding:14px; margin-top:12px; }
  .check{ padding:5px 2px; font-size:12.5px; }
  .note{ margin-top:8px; }

  /* perintah huruf dibuat mendatar supaya tidak makan tinggi layar */
  #order{ flex-direction:row; align-items:center; gap:10px; padding:4px 14px 5px; }
  .order-label{ font-size:9px; }

  /* layar jeda dipadatkan supaya muat tanpa scroll */
  #pauseScreen .screen-inner{ width:min(540px,100%); padding:10px 14px 12px; }
  #pauseScreen h2{ margin-bottom:6px; }
  #pauseScreen .stat-row{ margin-bottom:2px; }
  #pauseScreen .stat-row>div{ padding:5px 4px; }
  #pauseScreen .stat-row b{ font-size:17px; }
  #pauseScreen .seg button{ padding:7px 6px; }
  #pauseScreen .big-btn{ padding:11px; margin-top:8px; }
  #pauseScreen .ghost-btn{ padding:9px; margin-top:6px; }
}
@media (orientation:landscape) and (max-height:400px){
  .thr-track{ height:clamp(70px,22vh,110px); }
}