/* Tampilan bawaan GAEA — kaca berbingkai lembut, tanpa sudut tajam.
Ditanam ke dalam bundel oleh build.py — bukan aset terpisah.
============================================================
TIGA HAL YANG TIDAK BOLEH DIKALAHKAN OLEH RUPA
============================================================
Kaca bekerja dengan menurunkan kontras: ia membiarkan apa pun yang ada di
belakangnya ikut terlihat. Untuk panel biasa itu indah. Untuk penanda
keadaan itu berbahaya, dan di papan pemantauan bahayanya bukan soal selera.
1. APA PUN YANG MEMBAWA KEADAAN TIDAK PERNAH TEMBUS PANDANG.
Lencana awas, penanda kebasian, dan tanda sambungan putus memakai latar
PEKAT. Sebuah peringatan merah setengah tembus di atas medan yang terang
dapat menjadi nyaris tak terbaca — dan tidak ada satu pun galat yang
memberi tahu bahwa peringatan itu tidak sampai.
2. PEREDUPAN SAAT PUTUS TETAP BERLAPIS TIGA.
Warna diturunkan, arsir miring dipasang, dan seluruh tepi layar diberi
bingkai merah. Ini bukan berlebihan: saat diuji, meredupkan SAJA sampai
42% pada papan gelap terlihat hampir sama persis dengan sebelumnya.
Peredupan hanya bekerja pada isi yang terang.
3. KABURNYA DAPAT DIMATIKAN, DAN ITU DISENGAJA.
backdrop-filter memaksa komposer membaca balik lalu mengaburkan isi di
belakang tiap panel, tiap bingkai. Di atas kanvas WebGL — apalagi awan
splat di VR yang sudah terikat laju isi piksel — panel kaca bertumpuk
memakan anggaran yang tidak tersisa. Setel data-kaca="mati" pada akar
layar dan seluruh kaca berubah menjadi permukaan pekat: rupanya berubah,
keterbacaannya TIDAK.
*/
/* ————————————————————————————————————————————————— token */
:root{
/* Jari-jari. Tidak ada satu pun bernilai nol — itu memang syaratnya. */
--gaea-r-1: 10px; /* kendali kecil, lencana persegi */
--gaea-r-2: 14px; /* masukan, keping, tombol */
--gaea-r-3: 18px; /* widget, kartu */
--gaea-r-4: 24px; /* panel besar, kisi layar */
--gaea-r-penuh: 999px;
/* Kaca. Tiga tingkat kedalaman; makin di atas makin pekat supaya teksnya
tetap terbaca di atas apa pun. */
--gaea-kabur: 14px;
--gaea-kaca-1: rgba(22, 32, 28, .52);
--gaea-kaca-2: rgba(20, 29, 25, .68);
--gaea-kaca-3: rgba(16, 24, 20, .82);
--gaea-kaca-tepi: rgba(255, 255, 255, .13);
--gaea-kaca-kilau: rgba(255, 255, 255, .10);
/* Permukaan pekat — dipakai segala sesuatu yang membawa keadaan. */
--gaea-pekat: #16201C;
--gaea-pekat-tepi: #2A3A32;
--gaea-tinta: #E6EDE9;
--gaea-redup: #8C9A8E;
--gaea-aman: #7FBF93;
--gaea-waspada: #E8A33D;
--gaea-awas: #B4432B;
--gaea-basi: #E8A33D;
--gaea-naung-1: 0 2px 10px rgba(0,0,0,.28);
--gaea-naung-2: 0 10px 34px rgba(0,0,0,.44);
}
/* Satu tempat untuk seluruh sifat kaca, supaya mematikannya cukup sekali. */
.gaea-kaca{
background: var(--gaea-kaca-2);
border: 1px solid var(--gaea-kaca-tepi);
border-radius: var(--gaea-r-3);
-webkit-backdrop-filter: blur(var(--gaea-kabur)) saturate(1.35);
backdrop-filter: blur(var(--gaea-kabur)) saturate(1.35);
box-shadow: var(--gaea-naung-2), inset 0 1px 0 var(--gaea-kaca-kilau);
}
/* Kaca dimatikan: permukaan menjadi pekat, bukan sekadar tidak kabur.
Menghapus kaburnya saja akan meninggalkan panel setengah tembus TANPA
pengaburan — dan itu justru yang paling buruk keterbacaannya. */
[data-kaca="mati"] .gaea-kaca,
[data-kaca="mati"] .gaea-pin,
[data-kaca="mati"] .gaea-widget{
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--gaea-pekat);
border-color: var(--gaea-pekat-tepi);
}
@media (prefers-reduced-transparency: reduce){
.gaea-kaca, .gaea-pin, .gaea-widget{
-webkit-backdrop-filter: none; backdrop-filter: none;
background: var(--gaea-pekat);
}
}
/* ———————————————————————— Penanda model di peta 2D ———————————————————————— */
.gaea-mdl{
display:flex; align-items:center; gap:6px;
margin:-14px 0 0 -14px; white-space:nowrap; cursor:pointer;
font:600 11px/1 system-ui,"Segoe UI",Arial,sans-serif; color:#0f172a;
}
.gaea-mdl-ico{
width:28px; height:28px; border-radius:var(--gaea-r-penuh); flex:none;
display:grid; place-items:center; color:#fff; font-size:13px;
border:2px solid rgba(255,255,255,.92); box-shadow:var(--gaea-naung-1);
}
/* Bangunan dan kawasan dibedakan bentuknya, tetapi tetap berpojok lembut. */
.gaea-mdl-kotak .gaea-mdl-ico{ border-radius:var(--gaea-r-1); }
.gaea-mdl-nm{
background:rgba(255,255,255,.93); padding:3px 8px;
border-radius:var(--gaea-r-penuh); box-shadow:var(--gaea-naung-1);
max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.gaea-mdl-off{ opacity:.35; }
.gaea-mdl-taut .gaea-mdl-ico::after{
content:''; position:absolute; width:9px; height:9px; margin:-20px 0 0 20px;
border-radius:var(--gaea-r-penuh); background:#34d399; border:2px solid #0f172a;
}
/* ———————————————————————— Kartu pratinjau 3D ———————————————————————— */
.gaea-pin{
position:absolute; right:14px; top:14px; z-index:40; width:272px;
background:var(--gaea-kaca-3);
border:1px solid var(--gaea-kaca-tepi);
border-radius:var(--gaea-r-4); color:#fff; overflow:hidden;
font:12px/1.45 system-ui,"Segoe UI",Arial,sans-serif;
box-shadow:var(--gaea-naung-2), inset 0 1px 0 var(--gaea-kaca-kilau);
-webkit-backdrop-filter:blur(var(--gaea-kabur)) saturate(1.35);
backdrop-filter:blur(var(--gaea-kabur)) saturate(1.35);
}
.gaea-pin-head{
display:flex; align-items:center; gap:8px; padding:10px 12px;
border-bottom:1px solid rgba(255,255,255,.09);
}
.gaea-pin-ico{
width:26px; height:26px; border-radius:var(--gaea-r-1); flex:none;
display:grid; place-items:center; color:#fff; font-size:12px;
}
.gaea-pin-judul{ flex:1; overflow:hidden; }
.gaea-pin-judul b{
display:block; font-size:12px; font-weight:700;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gaea-pin-judul span{ font-size:10px; color:rgba(255,255,255,.55); }
.gaea-pin-tutup{
background:rgba(255,255,255,.08); border:0; color:rgba(255,255,255,.6);
cursor:pointer; font-size:13px; line-height:1;
width:24px; height:24px; border-radius:var(--gaea-r-penuh);
display:grid; place-items:center;
}
.gaea-pin-tutup:hover{ color:#fff; background:var(--gaea-awas); }
/* Kanvas pun tidak bersudut tajam: ia diberi jari-jari dan dipotong induknya. */
.gaea-pin-kanvas{
width:100%; height:190px; display:block; border-radius:var(--gaea-r-2);
background:radial-gradient(circle at 50% 35%,#1b2a3f 0%,#0a1220 75%);
cursor:grab;
}
.gaea-pin-kanvas:active{ cursor:grabbing; }
.gaea-pin-isi{ padding:10px 12px; font-size:10.5px; color:rgba(255,255,255,.72); }
.gaea-pin-isi dl{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; }
.gaea-pin-isi dt{ color:rgba(255,255,255,.45); }
.gaea-pin-isi dd{ margin:0; color:#fff; }
.gaea-pin-aksi{ display:flex; gap:6px; padding:0 12px 12px; }
.gaea-pin-aksi button{
flex:1; padding:8px 0; border:1px solid var(--gaea-kaca-tepi);
border-radius:var(--gaea-r-2); cursor:pointer;
font:700 11px/1 system-ui,"Segoe UI",Arial,sans-serif;
background:rgba(255,255,255,.10); color:#fff;
}
.gaea-pin-aksi button.utama{ background:#059669; border-color:#059669; }
.gaea-pin-aksi button:hover{ filter:brightness(1.22); }
/* ————————————————————————————————————————— kulit layar (gaea-layar.js) */
.gaea-layar{
position:relative; width:100%; height:100%;
background:var(--gaea-layar-dasar,#0E1512); color:var(--gaea-layar-tinta,var(--gaea-tinta));
font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
overflow:hidden; border-radius:var(--gaea-r-4);
}
.gaea-layar-kisi{
position:absolute; inset:0; display:grid; gap:12px; padding:12px;
transition:opacity .25s, filter .25s;
}
/* Putus: keadaan terakhir tetap terlihat — operator memerlukannya — tetapi ia
* tidak boleh lagi terbaca sebagai keadaan SEKARANG. Lihat catatan 2 di kepala
* berkas: tiga lapis, dan yang menanggung bebannya dua yang terakhir. */
.gaea-layar[data-putus="1"] .gaea-layar-kisi{opacity:.62; filter:saturate(.2)}
.gaea-layar[data-putus="1"] .gaea-layar-kisi::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:30;
border-radius:var(--gaea-r-4);
background:repeating-linear-gradient(135deg,
rgba(180,67,43,.16) 0 14px, rgba(180,67,43,0) 14px 34px);
}
.gaea-layar[data-putus="1"]::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:35;
border:6px solid var(--gaea-awas);
border-radius:var(--gaea-r-4);
box-shadow:inset 0 0 26px rgba(180,67,43,.45);
}
/* ————————————————————————————————————————— widget */
.gaea-widget{
display:flex; flex-direction:column; min-width:0; min-height:0;
background:var(--gaea-kaca-1);
border:1px solid var(--gaea-kaca-tepi);
border-radius:var(--gaea-r-3); overflow:hidden;
-webkit-backdrop-filter:blur(var(--gaea-kabur)) saturate(1.3);
backdrop-filter:blur(var(--gaea-kabur)) saturate(1.3);
box-shadow:var(--gaea-naung-1), inset 0 1px 0 var(--gaea-kaca-kilau);
}
.gaea-widget>header{
display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:12px; flex:0 0 auto;
background:linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,0));
}
.gaea-widget>header h3{margin:0; font-size:12.5px; font-weight:600; flex:1;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Penanda umur data: PEKAT, bukan kaca. Lihat catatan 1 di kepala berkas —
* angka yang sudah basi tidak boleh lebih sulit dibaca daripada yang segar. */
.gaea-widget-umur{
font-size:11px; opacity:.6; font-variant-numeric:tabular-nums; white-space:nowrap;
padding:.1rem .45rem; border-radius:var(--gaea-r-penuh);
}
.gaea-widget-umur[data-basi="1"]{
opacity:1; color:#1B1206; background:var(--gaea-basi); font-weight:700;
}
.gaea-widget-isi{flex:1; min-height:0; position:relative; overflow:auto}
.gaea-kanvas{display:block; width:100%; height:100%}
/* Bilah gulung ikut dibulatkan; sudut tajam di sini paling mudah terlewat. */
.gaea-widget-isi::-webkit-scrollbar{width:10px; height:10px}
.gaea-widget-isi::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.16); border-radius:var(--gaea-r-penuh);
border:2px solid transparent; background-clip:content-box;
}
.gaea-widget-isi::-webkit-scrollbar-track{background:transparent}
.gaea-widget-isi{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent}
/* Keadaan dibedakan warna DAN garis tepi: sekitar satu dari dua belas lelaki
* tidak membedakan merah dari hijau.
*
* Widget yang membawa keadaan juga kehilangan kacanya — latarnya menjadi pekat.
* Peringatan yang harus terbaca dari jarak dinding tidak boleh bersaing dengan
* apa pun yang kebetulan ada di belakangnya. */
.gaea-widget[data-keadaan="awas"]{
border-color:var(--gaea-awas); box-shadow:inset 0 0 0 2px var(--gaea-awas), var(--gaea-naung-1);
background:var(--gaea-pekat); -webkit-backdrop-filter:none; backdrop-filter:none;
}
.gaea-widget[data-keadaan="waspada"]{
border-color:var(--gaea-waspada); box-shadow:inset 0 0 0 1px var(--gaea-waspada), var(--gaea-naung-1);
background:var(--gaea-pekat); -webkit-backdrop-filter:none; backdrop-filter:none;
}
.gaea-widget[data-keadaan="tak-diketahui"]{border-style:dashed}
.gaea-widget[data-rusak="1"]{
border-color:var(--gaea-awas);
background:var(--gaea-pekat); -webkit-backdrop-filter:none; backdrop-filter:none;
}
.gaea-widget-rusak{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:.6rem; height:100%; padding:1rem; text-align:center;
}
.gaea-widget-rusak p{margin:0; font-size:12px; line-height:1.5; opacity:.85; max-width:34ch}
.gaea-widget-rusak .gaea-ikon{width:26px; height:26px; color:#E8836B}
/* ————————————————————————————————————————— lapisan jaminan
* Digambar mesin di luar susunan apa pun. Tidak ada widget yang mewakilinya,
* jadi tidak ada yang dapat menghapusnya — dan tidak ada yang membuatnya
* tembus pandang. */
.gaea-layar-jaminan{
position:absolute; left:12px; bottom:12px; z-index:40;
display:flex; flex-direction:column; gap:.4rem; max-width:min(46ch,90%);
pointer-events:none;
}
.gaea-layar-sambungan{
display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
padding:.4rem .75rem; border-radius:var(--gaea-r-penuh);
font-size:11.5px; font-weight:600;
background:var(--gaea-pekat); border:1px solid var(--gaea-pekat-tepi);
box-shadow:var(--gaea-naung-1);
}
.gaea-layar-sambungan[data-keadaan="tersambung"]{color:var(--gaea-aman); border-color:#2F4A38}
.gaea-layar-sambungan[data-keadaan="menunggu"]{color:var(--gaea-waspada); border-color:#4A3A1E}
.gaea-layar-sambungan[data-keadaan="putus"]{
color:#fff; background:var(--gaea-awas); border-color:var(--gaea-awas);
/* Berdenyut supaya tertangkap penglihatan tepi dari jarak dinding. */
animation:gaea-denyut 2s ease-in-out infinite;
}
@keyframes gaea-denyut{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
.gaea-layar-sambungan[data-keadaan="putus"]{animation:none; outline:2px solid #fff}
}
.gaea-layar-catatan{display:flex; flex-direction:column; gap:.3rem; pointer-events:auto}
.gaea-layar-catatan p{
display:flex; gap:.45rem; margin:0; padding:.5rem .75rem;
border-radius:var(--gaea-r-2);
background:#1E1710; border:1px solid #4A3A1E; color:#F0D9B0;
font-size:11.5px; line-height:1.45; box-shadow:var(--gaea-naung-1);
}
/* ————————————————————————————————————————— kendali umum */
.gaea-tombol{
display:inline-flex; align-items:center; gap:.4rem;
padding:.45rem .9rem; border-radius:var(--gaea-r-2);
border:1px solid var(--gaea-kaca-tepi);
background:var(--gaea-kaca-2); color:var(--gaea-tinta);
font:600 12px/1 system-ui,sans-serif; cursor:pointer;
-webkit-backdrop-filter:blur(var(--gaea-kabur)); backdrop-filter:blur(var(--gaea-kabur));
box-shadow:inset 0 1px 0 var(--gaea-kaca-kilau);
}
.gaea-tombol:hover{ border-color:rgba(255,255,255,.26); }
.gaea-tombol:active{ transform:translateY(1px); }
/* Fokus papan tik tidak boleh hilang demi rupa: tanpa cincin ini, siapa pun
* yang menelusur dengan Tab kehilangan jejak di mana ia berada. */
.gaea-tombol:focus-visible, .gaea-pin-aksi button:focus-visible,
.gaea-pin-tutup:focus-visible{
outline:2px solid var(--gaea-aman); outline-offset:2px; border-radius:var(--gaea-r-2);
}
.gaea-masukan{
padding:.45rem .8rem; border-radius:var(--gaea-r-2);
border:1px solid var(--gaea-kaca-tepi); background:rgba(0,0,0,.28);
color:var(--gaea-tinta); font:13px system-ui,sans-serif;
}
.gaea-masukan:focus{ outline:2px solid var(--gaea-aman); outline-offset:1px; }
.gaea-keping{
display:inline-flex; align-items:center; gap:.35rem;
padding:.2rem .6rem; border-radius:var(--gaea-r-penuh);
background:var(--gaea-kaca-2); border:1px solid var(--gaea-kaca-tepi);
font-size:11px; font-weight:600;
}
/* ————————————————————————————————————————— ikon
* Berkas SVG dipakai sebagai TOPENG, bukan sebagai gambar. Gambar SVG di dalam
* adalah dokumen terpisah yang tidak mewarisi color dari halaman, jadi
* currentColor di dalamnya jatuh ke hitam — tidak terlihat di papan gelap, dan
* tanpa satu galat pun. Sebagai topeng, berkasnya jadi bentuk saja dan yang
* mengecatnya background-color di bawah ini. */
.gaea-ikon{
width:15px; height:15px; flex:0 0 auto; display:inline-block;
background-color:currentColor;
-webkit-mask:var(--gaea-ikon) center/contain no-repeat;
mask:var(--gaea-ikon) center/contain no-repeat;
}
/* Yang ditanam sebaris tetap