/* Cursed Cabin — sistem desain bersama.
   Palet diwarisi dari halaman asli agar seluruh kabin terasa satu tempat. */

:root{
  --positive:#38B20A; --negative:#EC3535;
  --stat1:#08C1C1; --stat2:#559BC0; --stat3:#4372FF; --stat4:#AA4BC8;
  --ink:#efe6d5; --dim:#9a8f7c; --link:#7fc3e8; --gold:#d6a454;
  --rose:#ff8fb4;
  /* diambil dari logogame.png — logo itu merah darah dan tulang, tanpa emas,
     jadi aksen antarmuka mengikutinya. Emas disisakan untuk cahaya api saja. */
  --blood:#a32b2b; --blood-lit:#e04a4a; --bone:#d8cec2;
  --night:#070504; --wood:#3a3128; --deep:#050403;
  --serif:Georgia,"Times New Roman",serif;
  --chrome:"Segoe UI",Tahoma,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;height:100dvh}
body{
  margin:0;background:var(--night);color:var(--ink);
  font-family:var(--serif);font-size:clamp(13px,1.7vh,17px);line-height:1.55;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- tipografi bersama ---------- */
.smallcaps{font-variant:small-caps;letter-spacing:.14em}
.overline{
  font-family:var(--chrome);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:#6d6455;
}
.dim{color:var(--dim)}
.gold{color:var(--gold)}
.negative{color:var(--negative)}
.positive{color:var(--positive)}

/* ---------- kendali ---------- */
.field{display:block;margin:0 0 .85rem}
.field label{
  display:block;font-family:var(--chrome);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:#6d6455;margin-bottom:.35rem;
}
.field input{
  width:100%;padding:.62rem .8rem;
  background:rgba(6,4,3,.72);color:var(--ink);
  border:1px solid #2e2822;border-radius:0;
  font-family:var(--serif);font-size:1.02rem;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{color:#4a4238;font-style:italic}
.field input:focus{
  outline:none;border-color:rgba(163,43,43,.75);
  background:rgba(12,8,5,.85);
  box-shadow:0 0 0 1px rgba(163,43,43,.2), 0 0 26px rgba(224,74,74,.09);
}

.btn{
  display:block;width:100%;cursor:pointer;
  padding:.72rem 1rem;
  font-family:var(--serif);font-size:1.06rem;
  font-variant:small-caps;letter-spacing:.14em;
  color:var(--bone);
  background:linear-gradient(180deg, rgba(52,16,16,.72), rgba(16,8,8,.92));
  border:1px solid rgba(163,43,43,.6);
  transition:color .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.btn:hover{
  color:#fff;border-color:rgba(224,74,74,.9);
  box-shadow:0 0 34px rgba(163,43,43,.24), inset 0 0 26px rgba(224,74,74,.08);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.notice{
  margin:0 0 .9rem;padding:.55rem .8rem;
  border:1px solid rgba(236,53,53,.5);border-left:3px solid var(--negative);
  background:rgba(13,7,5,.9);
  color:#ffc9c9;font-style:italic;font-size:.95rem;
}

/* ---------- lapisan adegan ---------- */
.vig{
  position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 46%, transparent 40%, rgba(0,0,0,.34) 74%, rgba(0,0,0,.82) 100%);
}
.firelight{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  animation:flicker 3.1s ease-in-out infinite;
}
@keyframes flicker{0%,100%{opacity:.9}35%{opacity:1}52%{opacity:.82}70%{opacity:.97}}

@media (prefers-reduced-motion:reduce){
  .firelight,.snowfall,.snowfall *{animation:none !important}
}

/* ═══════════ sasaran sentuh global ═══════════
   Dipakai halaman login, threshold, dan beranda. Jari bukan kursor. */
@media (max-width: 820px), (pointer: coarse){
  .btn{min-height:48px;font-size:1.05rem}
  .field input{min-height:48px;font-size:16px}   /* 16px mencegah iOS auto-zoom */
  .field label{font-size:.7rem}
}

/* Author style menang atas aturan bawaan browser, jadi .btn{display:block}
   membatalkan [hidden] dan tombol yang harusnya tersembunyi tetap tampil. */
[hidden]{display:none !important}

/* ══════════════════════════════════════════════════════════ musik ══ */

/* Melayang, bukan di dalam .side — sidebar ikut ditukar tiap perpindahan
   adegan, dan tombol yang ikut terbuang harus dipasang ulang setiap kali.
   Di sini ia berdiri sendiri dan tidak pernah tahu apa pun soal itu. */
.audiobtn{
  position:fixed;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:40;
  width:48px;height:48px;          /* aturan 3: sasaran sentuh tidak pernah di bawah 48 */
  display:grid;place-items:center;
  border:1px solid rgba(163,43,43,.32);
  border-radius:50%;
  background:rgba(9,6,4,.82);
  color:#6d6455;
  cursor:pointer;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:color .25s, border-color .25s, background .25s, opacity .25s;
  opacity:.55;
}
.audiobtn:hover,
.audiobtn:focus-visible{opacity:1;color:var(--bone);border-color:rgba(163,43,43,.7)}
.audiobtn.is-on{opacity:1;color:var(--gold);border-color:rgba(214,164,84,.5)}

/* Garis coret hanya ada selagi musiknya mati. */
.audiobtn.is-on .slash{opacity:0}
.audiobtn .slash{opacity:.85;transition:opacity .25s}
@media (prefers-reduced-motion:reduce){
  .audiobtn,.audiobtn .slash{transition:none}
}

/* Tombol melayang tidak boleh menutupi pilihan terakhir. Di layar sempit
   panggungnya diberi ruang bernapas di bawah, persis setinggi tombolnya. */
@media (max-width:820px){
  .stage{padding-bottom:76px}

  /* Aturan 3: sentuh >=48px. Tautan navigasi sebaris berdiri 15px tinggi —
     lolos dengan tetikus, menyiksa dengan jempol, dan HP adalah perangkat
     utama di sini. Diukur di lebar 390px: .bar a 15px, .ch .again 18px.
     Ditaruh di CSS BERSAMA, bukan di <style> tiap halaman: `.bar` dipakai
     enter, game, journal, dan keeper — aturan yang sama disalin empat kali
     pasti melenceng di salah satunya, dan yang melenceng tidak akan
     kelihatan salah. Halaman-halaman itu hanya menyetel warna, jadi
     properti di sini tidak bertabrakan. */
  .bar a,
  .ch .again{
    display:inline-flex;align-items:center;min-height:48px;padding:0 6px;
  }
}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}