/* ============================================================
   BeBeRest COZY SIM v6.4 — rewrite penuh oleh Roshi (2026-10-13),
   revisi poin 1–5 Bos 2026-10-14 (bus 8468/8471),
   fix poin 3 2026-10-14 (bus 8490, QC Nuna),
   REVISI RONDE 2 (R1–R5) 2026-10-14 (bus 8910, screenshot Bos 10:07 WIB)
   REVISI RONDE 3 (S1–S4) 2026-10-14 (bus 8962, cek visual Bos via WhatsApp 11:02 WIB)
   REVISI RONDE 4 (M1–M6) 2026-10-14 (bus 9011, screenshot iPhone 390px Bos via WhatsApp 11:46 WIB)
   — FOKUS MOBILE SAJA, desktop (min-width:1001px) TIDAK disentuh.
   Tema: cozy sim RPG ala Stardew Valley (di-ACC Bos).
   - Papan kayu + perkamen, tombol chunky 3D (tekan mental),
     font Baloo 2 + Nunito, HUD simulasi Hari/Musim/Cuaca/Jam.
   - v6 fokus: rapikan yang berantakan di v5, terutama MOBILE.
     Perbaikan utama: konflik #controls mobile (base memaksa kolom
     430px vs v5 nowrap), #sideLeft tanpa override mobile, strip
     lantai jadi horizontal scroll, action bar jadi scroll strip
     dengan snap, panel kru jadi bottom sheet + state .minimized.
   - ATURAN: tidak mengubah id elemen / logika kantor. XP bar
     TIDAK dipasang (keputusan Bos: angka contoh dilarang).
   Dimuat terakhir setelah office_v2.css. Naikkan ?v=6 di link.
   ============================================================ */
@font-face { font-family: "Baloo 2"; src: url("assets/fonts/Baloo2-ExtraBold.ttf") format("truetype"); font-weight: 800; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/Nunito-ExtraBold.ttf") format("truetype"); font-weight: 800; }

body.ui {
  --wood: #6B4226; --wood-d: #46301B; --wood-l: #8B5E34;
  --parch: #F8ECD0; --parch-d: #EEDFB8; --card: #FFF8E6;
  --ink: #3A2A1A; --ink-soft: #7A6550;
  --leaf: #7CB342; --leaf-d: #558B2F; --sun: #FFD54F;
  --berry: #C96F4A; --gold: #E8A33D; --teal: #2E8B8B;
  --fh: "Baloo 2", "DejaVu Sans", sans-serif;
  --fe: "Nunito", "DejaVu Sans", sans-serif;
  --sh-wood: 0 4px 0 var(--wood-d);
  --sh-panel: 0 5px 0 var(--wood-d), 0 16px 34px rgba(10, 6, 2, .45);
  background: #221910;
  color: var(--ink);
}

/* ============ 1. TOMBOL CHUNKY ============ */
body.ui #header .btn,
body.ui .hud-dropdown .btn,
body.ui #controls .hgroup .btn,
body.ui .camctl .btn,
body.ui .crew-tab-btn,
body.ui #info .btn,
body.ui .minbtn {
  background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
  border: 3px solid var(--wood); border-radius: 14px;
  box-shadow: var(--sh-wood);
  font-family: var(--fe); color: var(--ink);
  transition: transform .08s, box-shadow .08s, filter .12s;
}
body.ui #header .btn:hover,
body.ui #controls .hgroup .btn:hover,
body.ui .camctl .btn:hover { filter: brightness(1.05); }
body.ui #header .btn:active,
body.ui #controls .hgroup .btn:active,
body.ui .camctl .btn:active,
body.ui .crew-tab-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-d); }
body.ui #header .btn::before,
body.ui #controls .hgroup .btn::before,
body.ui .camctl .btn::before,
body.ui #info .btn::before { display: none; }
body.ui .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ============ 2. TOPBAR ============ */
body.ui #header {
  background: linear-gradient(180deg, var(--parch), var(--parch-d));
  border: 3px solid var(--wood); border-radius: 16px;
  box-shadow: var(--sh-panel);
  padding: 8px 12px; align-items: center; flex-wrap: nowrap; gap: 10px;
}
body.ui #brand { background: none; border: 0; box-shadow: none; padding: 0; flex: none; min-width: 0; }
body.ui #brand .brand-mark {
  background: linear-gradient(135deg, var(--gold), var(--berry));
  border: 3px solid var(--wood); border-radius: 12px; color: #fff;
  box-shadow: 0 3px 0 var(--wood-d); flex: none;
}
body.ui #brand .brand-name { min-width: 0; }
body.ui #brand .brand-name strong { font-family: var(--fh); font-size: 21px; color: var(--wood-d); white-space: nowrap; }
body.ui #brand .brand-meta, body.ui #brand .brand-tagline { color: var(--ink-soft); font-family: var(--fe); font-size: 10.5px; white-space: nowrap; }
body.ui #brand .brand-tagline { display: none; }

/* klaster HUD simulasi */
body.ui .simhud {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 9px; background: rgba(255, 255, 255, .45);
  border: 2px dashed var(--wood-l); border-radius: 12px;
  max-width: 100%; overflow: hidden;
}
body.ui .simhud .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fe); font-size: 12.5px; background: var(--card);
  border: 2px solid var(--wood); border-radius: 10px; padding: 4px 9px;
  box-shadow: 0 2px 0 var(--wood-d); color: var(--ink); white-space: nowrap; flex: none;
}
body.ui .simhud .chip.clickable { cursor: pointer; }
body.ui .simhud .chip.clickable:active { transform: translateY(2px); box-shadow: none; }
body.ui .simhud .chip-clock #clockLabel {
  background: none; border: 0; box-shadow: none; padding: 0; min-height: 0;
  font-family: var(--fe); font-size: 13px; color: var(--ink); cursor: default;
}
body.ui .simhud .chip-clock #clockLabel::before { display: none; }

/* tumpukan avatar kru */
body.ui .crewstack { display: flex; align-items: center; flex: none; padding-left: 10px; border-left: 3px solid var(--wood-l); }
body.ui .crewstack #teamFaces { display: flex; }
body.ui .crewstack .face {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--wood);
  margin-left: -9px; box-shadow: 0 2px 0 var(--wood-d); background: var(--parch-d); color: var(--wood-d);
  font-family: var(--fe); font-size: 11px; padding: 0; flex: none;
}
body.ui .crewstack .face:first-child { margin-left: 0; }

body.ui #header .header-card {
  background: none; border: 0; box-shadow: none; padding: 0;
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-left: 0;
}
/* bungkus mobile_v2.js: di desktop tidak mengubah layout */
body.ui #header .hbtn-strip { display: contents; }
body.ui #header .team-picker { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
body.ui #header .team-picker label { display: none; }
body.ui #header .team-picker select {
  background: var(--card); border: 2.5px solid var(--wood); border-radius: 10px;
  color: var(--ink); font-family: var(--fe); font-size: 12px; padding: 5px 6px; width: 118px; max-width: 100%;
}
/* pil pencarian */
body.ui #header #bCmd {
  flex: 1 1 auto; min-width: 120px; max-width: 300px; margin: 0 auto; border-radius: 999px; justify-content: flex-start;
  color: var(--ink-soft); font-size: 12.5px; padding: 7px 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .10), 0 3px 0 var(--wood-d);
  overflow: hidden; text-overflow: ellipsis;
}
body.ui #header #bCmd kbd {
  background: #fff; border: 2px solid var(--wood-l); border-radius: 6px;
  padding: 0 6px; font-size: 11px; margin-left: auto; color: var(--ink); flex: none;
}
body.ui #header #bTasks { background: linear-gradient(180deg, #FFD968, var(--gold)); border-color: #8a5a1d; box-shadow: 0 4px 0 #6b4415; color: #4A2F0E; }
body.ui #header #bTasks:active { box-shadow: 0 1px 0 #6b4415; }
body.ui #header .btn { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; flex: none; }

/* dropdown menu */
body.ui .menuwrap { position: relative; flex: none; }
body.ui .hud-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; width: 238px; z-index: 90;
  background: var(--card); border: 3px solid var(--wood); border-radius: 16px;
  box-shadow: var(--sh-panel); padding: 8px; display: none;
}
body.ui .hud-dropdown.open { display: block; }
body.ui .hud-dropdown .btn {
  display: flex; width: 100%; text-align: left; justify-content: flex-start;
  border: 0; box-shadow: none; background: none; border-radius: 10px; padding: 9px 11px; font-size: 13.5px;
}
body.ui .hud-dropdown .btn:hover { background: var(--parch); }
body.ui .hud-dropdown .dd-lbl { font-size: 10.5px; letter-spacing: 1.5px; color: var(--ink-soft); font-family: var(--fe); padding: 7px 11px 3px; }
body.ui .hud-dropdown .dd-sep { height: 3px; background: var(--parch-d); border-radius: 2px; margin: 6px 4px; }

/* status suasana = kapsul */
body.ui #sceneStatus {
  position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 25;
  background: rgba(10, 14, 26, .55); color: #DCE6FA; border: 2px solid rgba(140, 180, 230, .25);
  border-radius: 999px; padding: 7px 18px; font-family: var(--fe); font-size: 12.5px;
  max-width: min(520px, calc(100vw - 32px)); box-shadow: none; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}

/* ============ 3. PANEL UMUM ============ */
body.ui .panel, body.ui .crew-panel, body.ui #followBar {
  background: linear-gradient(180deg, var(--card), var(--parch));
  border: 3px solid var(--wood); border-radius: 16px;
  box-shadow: var(--sh-panel);
  color: var(--ink);
}

/* ============ 4. KIRI: PAPAN PENUNJUK LANTAI ============ */
body.ui #sideLeft {
  position: fixed; left: 24px; top: 104px; width: 254px; z-index: 30;
  max-height: calc(100dvh - 260px); overflow-y: auto; scrollbar-width: thin;
  background: linear-gradient(180deg, var(--card), var(--parch));
  border: 3px solid var(--wood); border-radius: 16px;
  box-shadow: var(--sh-panel);
  display: flex; flex-direction: column; color: var(--ink);
}
body.ui #floors, body.ui #floorCaption {
  position: static; width: auto; max-width: none; background: transparent;
  border: 0; box-shadow: none; border-radius: 0;
}
body.ui #floors { padding: 11px 10px 6px; }
body.ui #floors .nav-title {
  font-family: var(--fh); font-size: 13px; letter-spacing: 2px; color: var(--wood-d);
  text-transform: uppercase; margin: 0 2px 9px;
}
body.ui #floors .section-stack { display: flex; flex-direction: column; gap: 0; }
body.ui #floors button[data-floor] {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; margin-bottom: 8px; border-radius: 12px;
  border: 3px solid transparent; background: transparent; color: var(--ink);
  box-shadow: none; transition: .12s; min-width: 0;
}
body.ui #floors button[data-floor]:hover { background: rgba(255, 255, 255, .55); }
body.ui #floors button[data-floor][aria-pressed="true"] {
  background: #fff; border-color: var(--leaf); box-shadow: 0 3px 0 var(--leaf-d);
}
body.ui #floors .floor-number {
  width: 46px; height: 50px; flex: none; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--wood-l), var(--wood));
  border: 3px solid var(--wood-d); color: #FFE9C4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fe); font-size: 10px; text-align: center; line-height: 1.1;
}
body.ui #floors button[data-floor] > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; font-family: var(--fe); font-size: 13.5px; }
body.ui #floors button[data-floor] small { color: var(--ink-soft); font-size: 10.5px; }
/* POIN 1 (klarifikasi Bos 2026-10-14 00:41 WIB): GAMBAR THUMBNAIL tiap lantai
   di kartu DENAH GEDUNG dihapus. Semua bentuk thumbnail (img/picture/kelas
   *thumb*) di baris lantai disembunyikan — baris cukup: chip signpost
   FL.01–FL.04 + nama lantai + keterangan + badge jumlah. */
body.ui #floors button[data-floor] img,
body.ui #floors button[data-floor] picture,
body.ui #floors button[data-floor] .thumb,
body.ui #floors button[data-floor] [class*="thumb"],
body.ui #floors button[data-floor] .floor-img,
body.ui #floors button[data-floor] .floor-thumb { display: none !important; }
/* komposisi baris dirapikan ulang setelah thumbnail dicabut: tetap presisi & seimbang */
body.ui #floors button[data-floor] { gap: 12px; padding: 9px 10px; margin-bottom: 9px; }
body.ui #floors button[data-floor] > span:last-child { gap: 1px; }
/* badge jumlah di ujung kanan baris, tidak menumpuk dengan teks */
body.ui #floors button[data-floor] .count-badge,
body.ui #floors button[data-floor] .floor-badge,
body.ui #floors button[data-floor] [class*="badge-count"] { margin-left: auto; flex: none; }

/* ============================================================
   POIN 2–5 (revisi Bos 2026-10-14 00:39 WIB, bus 8468, layar 1512px)
   v6.2 — hanya CSS, tanpa ubah JS/DOM/presence_v1.js/css.
   ============================================================ */

/* ---- POIN 2: strip melayang di bawah panel denah dihapus permanen ---- */
body.ui #fz1-bar { display: none !important; }

/* ---- RONDE 3 / S2: tombol PERSETUJUAN jadi ISI kartu denah, paling bawah ----
   Perintah langsung Bos (WhatsApp 2026-10-14 11:02, via Nuna bus 8962).
   DOM dipindah oleh presence_v1.js (placeButton -> #sideLeft, anak terakhir).
   Desktop: margin-top:auto me-pin tombol ke bagian paling bawah kartu.
   Saat denah minimized tombol disembunyikan (badge ⏳N di kartu kru tetap
   jadi penanda + pembuka meja). Presence titik di kartu kru tidak berubah. */
@media (min-width: 1001px) {
  body.ui #sideLeft > #fz1-appr-btn {
    position: static; z-index: auto;
    margin: auto 12px 12px; align-self: stretch; text-align: center;
    font-size: 12.5px; padding: 8px 12px;
  }
  body.ui #sideLeft.minimized > #fz1-appr-btn { display: none !important; }
}

/* ---- POIN 3: tombol minimize di panel Denah Gedung ---- (fix v6.3, bus 8490)
   Samakan perilaku dengan panel PARTY (minimize_v2.js).
   KONTRAK JS: TARGETS tambah baris baru target #sideLeft, jangkar head
   #floorCaption; .minbtn disisipkan sebagai ANAK LANGSUNG TERAKHIR
   #floorCaption (setelah .tb-foot, BUKAN di dalam .tb-head).
   Baris target lama #floorCaption DIHAPUS dari TARGETS (tombolnya memang
   disembunyikan by design; fungsi toggle-caption digantikan target baru).
   Klik toggle class .minimized di #sideLeft (persis seperti .crew-panel).
   Spesifisitas rule tampil (2,2,1)/(2,3,1) selalu menang atas rule sembunyi
   caption (1,2,1) — tidak tergantung urutan di file. */
/* ---- RONDE 2 / R2: tombol minimize denah PINDAH KE POJOK KANAN ATAS PANEL ----
   Sejajar judul "DENAH GEDUNG" (.nav-title), sama seperti posisi .minbtn
   panel PARTY. .minbtn tetap anak langsung #floorCaption (akhir) agar di
   state minimized ia ikut jadi isi slim bar — tapi di state normal ia
   diposisikan absolut terhadap PANEL (#sideLeft, position:fixed), BUKAN
   terhadap caption. Maka position:relative di #floorCaption DIHAPUS. */
body.ui #sideLeft #floorCaption > .minbtn { display: inline-flex !important; }
body.ui #sideLeft:not(.minimized) #floorCaption > .minbtn { position: absolute; top: 10px; right: 10px; }
body.ui #sideLeft.minimized #floorCaption > .minbtn { position: static; margin-left: auto; }
/* state minimized = bar ramping berisi judul + tombol tampilkan lagi */
/* RONDE 3 / S3 — AKAR BUG: base office_v2.css memaksa #sideLeft
   top:104px + bottom:160px (selektor ID menang atas body.ui), sehingga
   tinggi panel SELALU 100dvh-264px walau #floors disembunyikan — bidang
   background (gradasi+border+shadow) tersisa kosong. bottom:auto membebaskan
   tinggi -> panel benar-benar menciut jadi slim bar setinggi isinya. */
body.ui #sideLeft.minimized { max-height: none !important; overflow: hidden !important; bottom: auto !important; }
body.ui #sideLeft.minimized #floors { display: none !important; }
body.ui #sideLeft.minimized #floorCaption { display: flex !important; align-items: center; gap: 8px; border-top: 0; padding: 8px 12px; }
body.ui #sideLeft.minimized #floorCaption #floorTitle,
body.ui #sideLeft.minimized #floorCaption #floorDescription,
body.ui #sideLeft.minimized #floorCaption .tb-foot { display: none !important; }
body.ui #sideLeft.minimized #floorCaption::before {
  content: "DENAH GEDUNG"; flex: 1;
  font-family: var(--fh); font-size: 12px; letter-spacing: 2px; color: var(--wood-d);
}

/* ---- RONDE 5 / T1-T5: dropdown pemilih lantai = MOBILE SAJA ----
   <select id="m-floor-sel"> dibangun floor_select_v1.js sebagai anak
   pertama #sideLeft. Di desktop ia SELALU mati (tidak ada perubahan
   perilaku desktop, perintah Bos). Di mobile (<=1000px) ia tampil dan
   strip chip #floors disembunyikan total. */
body.ui #sideLeft > #m-floor-sel { display: none; }

/* ---- POIN 4: cluster kamera 2x2 di pojok kanan-bawah, sebelah volume musik ----
   RONDE 2 / R3: aturan tumpukan vertikal lama (v6.1, right:340px bottom:138px)
   DIHAPUS TOTAL dari file — ia menang cascade di desktop Bos karena
   spesifikasinya sama (0,2,1) tapi tertulis SETELAH blok ini. Blok ≥1001px
   kini satu-satunya aturan desktop; blok ≥1500px menegaskan 2x2 menang
   mutlak atas rule vertikal mana pun. Glyph ikon (v6.1) tetap dipakai.
   Desktop saja; mobile ≤1000px punya aturan sendiri di bawah. */
@media (min-width: 1001px) {
  body.ui .camctl {
    position: fixed; right: 16px; bottom: 14px; top: auto; z-index: 40;
    display: grid; grid-template-columns: repeat(2, 42px); grid-auto-rows: 42px; gap: 6px;
  }
}
/* ≥1500px (layar Bos 1512–1536px): 2x2 HARUS menang — !important supaya
   tidak bisa dikalahkan rule vertikal dari stylesheet mana pun. */
@media (min-width: 1500px) {
  body.ui .camctl {
    position: fixed !important; right: 16px !important; bottom: 14px !important; top: auto !important;
    display: grid !important; grid-template-columns: repeat(2, 42px) !important;
    grid-auto-rows: 42px !important; gap: 6px !important; flex-direction: row !important;
  }
}

/* ---- POIN 5: dropdown menu selalu paling depan ----
   Header diberi stacking context sendiri agar .hud-dropdown tidak
   ketutup kartu kru / panel lain.
   RONDE 2 / R4: position:relative TANPA SENGAJA mematikan position:fixed
   bawaan office_v2.css → header jadi selebar viewport + kegeser 28px ke
   kanan → tombol Menu kepotong tepi layar (screenshot Bos). position:fixed
   JUGA membentuk stacking context, jadi dropdown tetap paling depan
   sambil inset kiri-kanan 28px pulih seperti semula. */
body.ui #header { position: fixed; left: 28px; right: 28px; top: 22px; z-index: 100; }
/* R4: napas ekstra di sisi kanan + kompresi isi supaya semua elemen header
   (terutama tombol Menu) tampil utuh di dalam layar, tidak mepet tepi. */
@media (min-width: 1001px) {
  body.ui #header { padding: 8px 16px 8px 12px; gap: 8px; }
  body.ui #header .header-card { gap: 6px; }
  body.ui #header .menuwrap { margin-left: 2px; flex: none; }
}
body.ui .hud-dropdown { z-index: 9999 !important; }
body.ui #floors .building-button {
  width: 100%; border: 3px solid var(--wood); border-radius: 14px;
  background: linear-gradient(180deg, #FFFDF4, #F1E2BC); color: var(--ink);
  font-family: var(--fe); font-size: 12.5px; padding: 8px 10px; box-shadow: var(--sh-wood);
  margin: 2px 0 4px;
}
body.ui #floors .building-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-d); }
body.ui #floorCaption { border-top: 3px dashed var(--parch-d); padding: 9px 13px 12px; }
/* teks dev "Lembar 03/04" + tombol minimize LAMA di .tb-head disembunyikan (keputusan Bos).
   NB: tombol minimize BARU milik target #sideLeft adalah anak LANGSUNG #floorCaption
   (di luar .tb-head) — diatur di blok POIN 3, jangan sembunyikan di sini. */
body.ui #floorCaption .tb-head, body.ui #floorCaption .tb-head .minbtn { display: none !important; }
body.ui #floorCaption .tb-foot { display: none; }
body.ui #floorCaption #floorTitle { display: block !important; font-family: var(--fh); font-size: 16px; color: var(--wood-d); margin: 0 0 2px; }
body.ui #floorCaption #floorDescription { display: block !important; font-size: 11.5px; color: var(--ink-soft); margin: 0; }
/* tombol minimize (minimize_v2.js) */
body.ui .minbtn {
  width: 30px; height: 30px; padding: 0; border-radius: 10px; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
body.ui #floorCaption .minbtn { margin-left: auto; }

/* ---- RONDE 2 / R5: tombol minimize untuk kartu kontrol bawah (#controls) ----
   Perilaku konsisten dengan panel denah & panel kru (minimize_v2.js +
   simpan state localStorage): tombol melayang di sudut kanan-atas kartu,
   selalu terjangkau; saat minimized kartu menciut jadi bar ramping
   berlabel "KONTROL" + tombol tampilkan lagi.
   RONDE 3 / S1: top -15px -> -10px — badan tombol lebih masuk ke kartu
   (tidak melayang terlalu tinggi di atas tepi), tetap terjangkau untuk
   toggle dan tidak menutupi slider volume / tombol paling kanan. */
body.ui #controls .minbtn-float {
  position: absolute; top: -10px; right: 12px; z-index: 6;
  background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
  border: 2.5px solid var(--wood); box-shadow: 0 3px 0 var(--wood-d);
}
body.ui #controls .minbtn-float:active { transform: translateY(2px); box-shadow: none; }
body.ui #controls.minimized .simulation-controls { display: none !important; }
body.ui #controls.minimized { padding: 7px 56px 7px 18px; min-height: 0; }
body.ui #controls.minimized::before {
  content: "KONTROL"; align-self: center;
  font-family: var(--fh); font-size: 12px; letter-spacing: 2px; color: var(--wood-d);
}

/* ============ 5. KANAN: PANEL PARTY ============ */
body.ui .crew-panel {
  position: fixed; top: 104px; right: 24px; width: 308px; z-index: 30;
  max-height: calc(100dvh - 260px); padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
body.ui .crew-panel .crew-head { padding: 12px 15px 8px; border-bottom: 3px dashed var(--parch-d); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.ui .crew-panel .crew-head h2 { font-family: var(--fh); font-size: 15px; letter-spacing: 2px; color: var(--wood-d); margin: 0; }
body.ui .crew-panel .crew-live { color: var(--leaf-d); font-family: var(--fe); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
body.ui .crew-panel .crew-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); border: 2px solid var(--leaf-d); }
body.ui .crew-tabs { display: flex; gap: 7px; padding: 10px 13px 2px; }
body.ui .crew-tab-btn { flex: 1; justify-content: center; padding: 7px 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
body.ui .crew-tab-btn.active { background: linear-gradient(180deg, #5A4632, #3E2F20); color: var(--parch); border-color: #241A10; box-shadow: 0 4px 0 #171008; }
body.ui .crew-panel .crew-bos {
  margin: 10px 12px 0; border: 3px solid var(--gold); border-radius: 16px;
  background: linear-gradient(180deg, #FFFBEC, #FBEFC9); box-shadow: 0 4px 0 #a87b22;
  padding: 11px; color: var(--ink); cursor: pointer;
}
body.ui .crew-panel .crew-bos:hover { filter: brightness(1.03); }
body.ui .crew-panel .crew-avatar { border: 3px solid var(--wood); background: var(--parch-d); flex: none; }
body.ui .crew-panel .crew-name { font-family: var(--fe); color: var(--ink); }
body.ui .crew-panel .crew-role, body.ui .crew-panel .crew-task { color: var(--ink-soft); font-size: 11px; }
body.ui .crew-panel .crew-pill { font-family: var(--fe); font-size: 10.5px; border: 2px solid var(--wood-d); background: var(--wood); color: #FFE9C4; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* statistik tugas asli (bukan XP contoh) */
body.ui .crew-panel .bos-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 12px 0; }
body.ui .crew-panel .bos-stat {
  background: #fff; border: 3px solid var(--wood); border-radius: 12px; box-shadow: 0 3px 0 var(--wood-d);
  padding: 6px 2px; text-align: center; font-size: 10px; color: var(--ink-soft); font-family: var(--fe); min-width: 0;
}
body.ui .crew-panel .bos-stat strong { display: block; font-family: var(--fh); font-size: 17px; color: var(--wood-d); }
body.ui .crew-panel .crew-list { padding: 4px 12px 12px; overflow-y: auto; min-height: 0; }
body.ui .crew-panel .crew-wing h3 {
  font-family: var(--fh); font-size: 11px; letter-spacing: 2px; color: var(--wood-d);
  display: flex; align-items: center; gap: 8px; margin: 12px 2px 8px;
}
body.ui .crew-panel .crew-wing h3::after { content: ""; flex: 1; height: 3px; background: var(--parch-d); border-radius: 2px; }
body.ui .crew-panel .crew-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px;
  border: 3px solid var(--wood); border-radius: 14px; background: #fff;
  box-shadow: 0 3px 0 var(--wood-d); color: var(--ink); cursor: pointer; transition: .12s; min-width: 0;
}
body.ui .crew-panel .crew-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--wood-d); }
body.ui .crew-panel .crew-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-d); }
body.ui .crew-panel .crew-card .crew-avatar { border: 3px solid var(--wood-l); }
body.ui .crew-panel .crew-card > div:nth-child(2) { min-width: 0; }
body.ui .crew-panel .crew-card.status-working .crew-pill { background: #E3F0FD; color: #1d5fb8; border-color: #2E7DD1; }
body.ui .crew-panel .crew-card.status-istirahat .crew-pill,
body.ui .crew-panel .crew-card.status-break .crew-pill { background: #E6F4EA; color: #2c7a3f; border-color: #4CAF50; }
body.ui .crew-panel .crew-card.status-nganggur .crew-pill,
body.ui .crew-panel .crew-card.status-idle .crew-pill { background: #ECEFF1; color: #61656b; border-color: #9AA0A6; }
/* state minimized (minimize_v2.js): hanya kepala yang terlihat */
body.ui .crew-panel.minimized { max-height: none; }
body.ui .crew-panel.minimized .crew-tabs,
body.ui .crew-panel.minimized .crew-bos,
body.ui .crew-panel.minimized .bos-stats,
body.ui .crew-panel.minimized .crew-list,
body.ui .crew-panel.minimized #log.as-tab { display: none !important; }
/* mode tab Aktivitas: log jadi isi panel */
body.ui .crew-panel.tab-feed .crew-bos, body.ui .crew-panel.tab-feed .bos-stats,
body.ui .crew-panel.tab-feed .crew-list { display: none; }
body.ui #log.as-tab {
  position: static; transform: none; width: auto; height: auto; max-height: none;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  margin: 8px 12px 12px; padding: 0; overflow-y: auto; color: var(--ink); min-height: 0;
}
body.ui #log.as-tab .log-head, body.ui #log.as-tab .log-stats { display: none; }
body.ui #log.as-tab #logList { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
body.ui #log.as-tab #logList li {
  background: #fff; border: 3px solid var(--wood); border-radius: 12px; box-shadow: 0 3px 0 var(--wood-d);
  padding: 8px 10px; font-size: 12px; color: var(--ink);
}
body.ui #log.as-tab #logEmpty { color: var(--ink-soft); font-size: 12px; }
/* ---- RONDE 3 / S4: kartu Log MANDIRI harus tampil UTUH di depan saat
   diaktifkan dari Menu. Selama ini ketutup .crew-panel (satu kolom
   right:24px, z-30) sampai Bos memilih tidak mengaktifkan Log.
   z-index 60: di atas .crew-panel (30) & #info (40), di bawah #header (100).
   Desktop saja; mode tab (#log.as-tab) & layout tidak tersentuh; tidak
   perlu menyentuh office_v2.css (gamehud.css dimuat terakhir & menang).
   NB desktop: base menyembunyikan #log saat #info tampil, jadi tidak ada
   tabrakan dengan #info. */
@media (min-width: 1001px) {
  body.ui #log:not(.as-tab) { z-index: 60; }
}

/* ============ 6. ACTION BAR ============ */
body.ui #controls {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 35;
  background: linear-gradient(180deg, var(--parch), var(--parch-d));
  border: 3px solid var(--wood); border-radius: 18px;
  box-shadow: var(--sh-panel);
  padding: 9px 12px; max-width: min(1240px, calc(100vw - 24px));
  display: flex; gap: 0;
}
body.ui #controls .simulation-controls { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; min-width: 0; }
body.ui #controls .hgroup { display: flex; align-items: center; gap: 7px; padding: 0 10px; min-width: 0; }
body.ui #controls .hgroup:first-child { padding-left: 2px; }
body.ui #controls .hgroup + .hgroup { border-left: 3px solid rgba(139, 94, 52, .45); }
body.ui #controls .hgroup::before {
  content: attr(data-label); flex: none;
  font-family: var(--fh); font-size: 9.5px; letter-spacing: 1.5px; color: var(--wood-d);
  background: rgba(107, 66, 38, .12); border-radius: 8px; padding: 7px 6px;
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; white-space: nowrap;
}
body.ui #controls .hgroup .btn {
  flex-direction: column; gap: 2px; padding: 7px 10px; min-height: 58px; min-width: 64px;
  font-size: 11px; line-height: 1.15; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
body.ui #controls .hgroup .btn .ic { font-size: 19px; line-height: 1; }
body.ui #controls .hgroup .btn .lb { font-family: var(--fe); font-size: 10.5px; }
body.ui #controls .hgroup .btn[aria-pressed="true"] { background: linear-gradient(180deg, #EAF5DC, #D9EDBE); border-color: var(--leaf-d); box-shadow: 0 4px 0 var(--leaf-d); }
body.ui #controls #bWork { background: linear-gradient(180deg, #8FD07A, #6FAE54); border-color: #3E6B28; box-shadow: 0 4px 0 #2E5220; color: #1E3A14; }
body.ui #controls #bWork:active { box-shadow: 0 1px 0 #2E5220; }
body.ui #controls #bPause { background: linear-gradient(180deg, #5A4632, #3E2F20); color: var(--parch); border-color: #241A10; box-shadow: 0 4px 0 #171008; }
body.ui #controls #bPause:active { box-shadow: 0 1px 0 #171008; }
body.ui #controls #bBrief { background: linear-gradient(180deg, #FFD968, var(--gold)); border-color: #8a5a1d; box-shadow: 0 4px 0 #6b4415; color: #4A2F0E; }
body.ui #controls #bBrief:active { box-shadow: 0 1px 0 #6b4415; }
body.ui #controls .camera-controls { display: none; }
body.ui #controls .music-volume { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--fe); font-size: 10px; color: var(--wood-d); flex: none; }
body.ui #controls .music-volume input { accent-color: var(--gold); width: 64px; }

/* (R3) aturan vertikal lama v6.1 sudah DIHAPUS — digantikan blok POIN 4 di atas. */
body.ui .camctl .btn { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 15px; border-radius: 12px; display: inline-flex; align-items: center; }
/* Putar + Atur ulang jadi glyph saja (teks disembunyikan via font-size, title tetap ada di HTML) */
body.ui .camctl #bRotate, body.ui .camctl #bReset { font-size: 0; }
body.ui .camctl #bRotate::after { content: "\27F3"; font-size: 18px; line-height: 1; }
body.ui .camctl #bReset::after { content: "\2922"; font-size: 18px; line-height: 1; }

body.ui #cameraHint {
  position: fixed; bottom: 108px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: rgba(10, 14, 26, .5); color: #B9C7E8; border-radius: 999px;
  padding: 6px 16px; font-size: 12px; text-shadow: none; pointer-events: none; white-space: nowrap;
}

/* nameplate RPG */
body.ui .name-label {
  background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
  border: 3px solid var(--wood); border-radius: 12px;
  box-shadow: 0 4px 0 var(--wood-d);
  font-family: var(--fh); color: var(--wood-d);
  padding: 3px 12px;
}

/* panel info agen */
body.ui #info { position: fixed; top: 104px; right: 24px; width: 308px; bottom: auto; max-height: calc(100dvh - 260px); color: var(--ink); z-index: 40; overflow-y: auto; }
body.ui #info .role, body.ui #info dt { color: var(--ink-soft); }
body.ui #info dl { border-color: var(--parch-d); }
body.ui #info .btn { padding: 7px 11px; font-size: 12.5px; }

/* dialog */
body.ui .studio-dialog, body.ui dialog { border-radius: 16px; border: 3px solid var(--wood); }
body.ui dialog::backdrop { background: rgba(20, 12, 4, .55); }

/* ============ 7. RESPONSIVE: TABLET KECIL ============ */
@media (max-width: 1450px) {
  body.ui #brand .brand-meta { display: none; }
  body.ui .simhud .chip.chip-season { display: none; }
  body.ui #controls { max-width: calc(100vw - 24px); }
  body.ui #cameraHint { display: none; }
}
/* 1200–1450px: paksa 1 baris, slot ramping (req Bos via Nuna) */
@media (min-width: 1200px) and (max-width: 1450px) {
  body.ui #controls .hgroup { gap: 5px; padding: 0 7px; }
  body.ui #controls .hgroup .btn { min-width: 56px; min-height: 52px; padding: 5px 7px; }
  body.ui #controls .hgroup .btn .ic { font-size: 16px; }
  body.ui #controls .hgroup .btn .lb { font-size: 10px; }
  body.ui #controls .music-volume input { width: 52px; }
}
/* <1200px: action bar boleh 2 baris */
@media (max-width: 1199px) {
  body.ui #controls .simulation-controls { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  body.ui #controls .hgroup + .hgroup { border-left: 0; }
}
@media (min-width: 1001px) and (max-width: 1199px) {
  body.ui .camctl { bottom: 220px; }
}
@media (max-width: 1250px) {
  body.ui .crewstack { display: none; }
  body.ui #sideLeft { width: 224px; }
  body.ui .crew-panel { width: 280px; }
  body.ui #info { width: 280px; }
}
@media (max-width: 1100px) {
  body.ui #header { left: 12px; right: 12px; }
  body.ui #sideLeft { left: 12px; }
  body.ui .crew-panel, body.ui #info { right: 12px; }
}

/* ============ 8. RESPONSIVE: MOBILE (≤1000px) ============
   REVISI RONDE 4 (M1–M6) 2026-10-14 — dari Bos via WhatsApp 11:46 WIB
   (brief Nuna bus 9011, screenshot iPhone 390px milik Bos).
   FOKUS MOBILE SAJA — desktop (min-width:1001px) TIDAK disentuh.
   Variabel tinggi mobile (semua offset di bawah dihitung dari sini,
   bukan angka warisan):
     --m-head-h  = 96px   header mobile hasil M1 (top:8px)
     --m-strip-h = 48px   strip lantai hasil M2
     --m-ctl-h   = 88px   action bar hasil M5
   Angka final tercatat di CATATAN.md untuk QC Nuna.
   v6: header 2 baris ringkas, strip lantai horizontal, action bar
   jadi scroll strip + snap, panel kru jadi bottom sheet
   (minimized default via mobile_v2.js). */
@media (max-width: 1000px) {
  body.ui {
    --m-head-h: 96px;
    --m-strip-h: 48px;
    --m-ctl-h: 88px;
  }

  /* --- M1: header mobile dipadatkan DRASTIS: 2 baris ramping ---
     Baris 1: brand + Inbox/Tugas + pilih inisial + Menu (nowrap;
     strip tombol bisa scroll-x sebagai katup pengaman supaya TIDAK
     PERNAH wrap ke baris 3). Baris 2: chip hari/jam mini scroll-x
     + pil search ringkas. TIDAK ADA fungsi/tombol yang hilang —
     .header-card dijadikan display:contents agar anak-anaknya
     (hbtn-strip, team-picker, bCmd) jadi item flex header langsung. */
  body.ui #header {
    top: 8px; left: 8px; right: 8px;
    padding: 6px 8px; gap: 6px; flex-wrap: wrap; align-items: center;
  }
  body.ui #header .header-card { display: contents; }
  body.ui #brand { order: 1; flex: none; }
  body.ui #brand .brand-mark { width: 30px; height: 30px; border-radius: 10px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
  body.ui #brand .brand-name strong { font-size: 15px; }
  body.ui #brand .brand-meta { display: none; }
  body.ui #header .hbtn-strip {
    order: 2; display: flex; gap: 6px; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 0;
  }
  body.ui #header .hbtn-strip::-webkit-scrollbar { display: none; }
  body.ui #header .hbtn-strip .btn { flex: none; padding: 5px 9px; font-size: 11.5px; border-radius: 10px; border-width: 2.5px; }
  body.ui #header .team-picker { order: 3; flex: none; }
  body.ui #header .team-picker select { width: 84px; font-size: 11px; padding: 4px 5px; border-width: 2.5px; }
  body.ui #header .menuwrap { order: 4; flex: none; }
  body.ui #header .menuwrap > .btn { padding: 5px 9px; font-size: 11.5px; border-radius: 10px; border-width: 2.5px; }
  /* baris 2 */
  body.ui .simhud {
    order: 5; flex: 1 1 auto; min-width: 0; max-width: none;
    overflow-x: auto; scrollbar-width: none;
    padding: 3px 6px; gap: 5px; border-width: 2px; border-radius: 10px;
  }
  body.ui .simhud::-webkit-scrollbar { display: none; }
  body.ui .simhud .chip { font-size: 11px; padding: 3px 8px; border-width: 2px; border-radius: 8px; }
  body.ui .simhud .chip.chip-weather { display: none; }
  body.ui .simhud .chip-clock #clockLabel { font-size: 11.5px; }
  body.ui #header #bCmd {
    order: 6; flex: none; max-width: none; margin: 0;
    font-size: 11.5px; padding: 5px 12px; border-width: 2.5px;
  }
  body.ui #header #bCmd kbd { display: none; }
  /* dropdown menu dibuka tepat di bawah header baru */
  body.ui .hud-dropdown { position: fixed; top: calc(8px + var(--m-head-h) + 4px); right: 8px; }

  /* --- M2: strip lantai SELALU tepat di bawah header ---
     top mengikuti tinggi header hasil M1 (bukan angka warisan 170px).
     Chip horizontal tipis, scroll-x, tidak tertutup elemen lain. */
  /* --- RONDE 5 / T1-T5: strip chip DIGANTI dropdown native ---
     Bos (WhatsApp 12:24 WIB, setelah tes v6.6 di iPhone): kontrol pindah
     lantai tidak ketemu di HP -> pakai dropdown saja untuk mobile.
     #sideLeft tetap bar ramping SATU BARIS di posisi strip (top di bawah
     header). Isi bar: [select lantai flex:1] + [chip Persetujuan, T3].
     Bar baru 48px = var --m-strip-h TIDAK BERUBAH -> offset #sceneStatus
     (M3) & elemen bawah (M5) aman, tidak ada yang bergeser (T5).
     Strip chip lama (#floors) disembunyikan TOTAL di mobile, tidak tampil
     dua-duanya. #floorCaption tetap mati di mobile (T4): nilai dropdown
     sendiri adalah indikator lantai aktif. */
  body.ui #sideLeft {
    left: 8px; right: 8px; top: calc(8px + var(--m-head-h) + 8px);
    width: auto; max-height: none; z-index: 30;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 10px; overflow: visible;
    border-width: 2.5px; border-radius: 14px;
  }
  body.ui #floors { display: none !important; }
  body.ui #floorCaption { display: none !important; }
  /* state .minimized yang terbawa dari desktop tidak boleh memunculkan
     caption "DENAH GEDUNG" di HP: bar dropdown tetap satu-satunya kontrol. */
  body.ui #sideLeft.minimized #floorCaption { display: none !important; }
  body.ui #sideLeft > #m-floor-sel {
    display: block; flex: 1 1 auto; min-width: 0; max-width: 100%;
    height: 36px; padding: 5px 30px 5px 12px;
    font-family: var(--fe); font-size: 13.5px; font-weight: 700; color: var(--wood-d);
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a5a1d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
    border: 2.5px solid var(--wood); border-radius: 12px;
    box-shadow: 0 2px 0 var(--wood-d);
    appearance: none; -webkit-appearance: none;
  }
  body.ui #sideLeft > #m-floor-sel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
  /* T3: chip Persetujuan tetap di bar yang sama, di samping dropdown,
     selalu bisa diklik. (presence_v1.js menaruhnya sbg anak terakhir
     #sideLeft -> otomatis di ujung kanan bar.) */
  body.ui #sideLeft > #fz1-appr-btn {
    flex: none; align-self: center; margin: 0; white-space: nowrap;
    font-size: 12px; padding: 8px 13px;
  }

  /* --- M3: kapsul status di bawah strip lantai (bukan 248px warisan) ---
     Kapsul mini, tidak menutupi tengah scene. */
  body.ui #sceneStatus {
    top: calc(8px + var(--m-head-h) + 8px + var(--m-strip-h) + 8px);
    bottom: auto; font-size: 11px; padding: 4px 12px;
  }

  /* --- M5: tumpukan bawah dirapikan ---
     #controls = elemen PALING BAWAH, utuh termasuk safe-area iPhone.
     Panel kru / info = bottom sheet DI ATAS controls dengan rapi. */
  body.ui #controls {
    left: 8px; right: 8px; transform: none; max-width: none;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 7px; border-radius: 16px; border-width: 2.5px;
  }
  body.ui #controls .simulation-controls {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: 2px; width: 100%;
  }
  body.ui #controls .simulation-controls::-webkit-scrollbar { display: none; }
  body.ui #controls .hgroup { flex: none; scroll-snap-align: start; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 4px; padding: 0 7px; align-items: center; }
  body.ui #controls .hgroup::before {
    grid-column: 1 / -1; writing-mode: horizontal-tb; transform: none;
    font-size: 8.5px; padding: 2px 7px; text-align: center;
  }
  body.ui #controls .hgroup + .hgroup { border-left: 2px solid rgba(139, 94, 52, .45); }
  body.ui #controls .hgroup .btn { min-width: 54px; min-height: 48px; padding: 5px 7px; border-radius: 10px; border-width: 2.5px; }
  body.ui #controls .hgroup .btn .ic { font-size: 16px; }
  body.ui #controls .hgroup .btn .lb { font-size: 10px; }
  body.ui #controls .music-volume input { width: 52px; }

  /* panel kru & info: bottom sheet di atas controls (bukan melayang
     menutupi / mendorong controls keluar layar). State minimized =
     bar ramping tepat di atas controls, bisa diketuk untuk buka. */
  body.ui .crew-panel,
  body.ui #info {
    left: 8px; right: 8px; top: auto; width: auto;
    bottom: calc(8px + var(--m-ctl-h) + 8px + env(safe-area-inset-bottom, 0px));
    max-height: 54dvh;
  }
  body.ui .crew-panel { z-index: 44; }
  body.ui .crew-panel .crew-list { max-height: 34dvh; }
  body.ui #info { z-index: 45; }

  /* --- M4: kamera mobile = grid 2x2 mini (seperti desktop) di pojok
     kanan bawah, di atas action bar. Tidak menutupi tengah scene,
     tetap gampang dijangkau jempol. --- */
  body.ui .camctl {
    position: fixed; right: 8px; left: auto;
    bottom: calc(8px + var(--m-ctl-h) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 40; display: grid; grid-template-columns: repeat(2, 34px); gap: 6px;
  }
  body.ui .camctl .btn { width: 34px; height: 34px; font-size: 13px; border-radius: 10px; border-width: 2.5px; }

  /* --- dialog muat di HP --- */
  body.ui dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  body.ui #followBar { top: auto; bottom: calc(196px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 16px); }
}

/* HP kecil (≤640px): hemat ruang baris 1 header */
@media (max-width: 640px) {
  body.ui #brand .brand-name { display: none; }
  body.ui #header .team-picker select { width: 76px; font-size: 10.5px; }
  body.ui #header .btn { padding: 5px 8px; font-size: 11px; }
  body.ui .simhud .chip { font-size: 10.5px; padding: 2px 7px; }
  body.ui #controls .hgroup .btn { min-width: 50px; min-height: 46px; }
}

/* layar desktop pendek */
@media (min-width: 1001px) and (max-height: 900px) {
  body.ui #sideLeft { top: 96px; max-height: calc(100dvh - 240px); }
  body.ui .crew-panel, body.ui #info { top: 96px; }
  body.ui #floors button[data-floor] { padding: 6px 8px; margin-bottom: 6px; }
  body.ui #floors .floor-number { height: 42px; }
}
@media (min-width: 1001px) and (max-height: 780px) {
  body.ui #floorCaption #floorDescription { display: none; }
}
@media (min-width: 1001px) and (max-height: 700px) {
  body.ui #floorCaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ui * { transition: none !important; animation: none !important; }
}