/* Dinding Catatan — kertas krem, tinta tangan, pita. Hanya dimuat di Simak Web. */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Fredoka:wght@500;600;700&display=swap");

.dinding-masuk { padding: 0 14px 8px; flex: none; }
.dinding-masuk button {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed #C9452E; background: #F6EFE3; color: #C9452E;
  font-family: Fredoka, var(--sans, system-ui), sans-serif; font-weight: 600; font-size: 15px;
  border-radius: 999px; padding: 8px 12px; cursor: pointer;
}
.dinding-masuk button:hover { background: #fff; }
.dinding-masuk .ik { width: 16px; height: 16px; }

#halaman-dinding { min-height: 100%; background: #F6EFE3; color: #2c2620; }
.dinding {
  --kertas: #F6EFE3; --merah: #C9452E; --biru: #2F5596; --kuning: #E7B83A; --tinta: #2c2620;
  min-height: 100%;
  padding: 18px 16px calc(128px + env(safe-area-inset-bottom));
  font-family: Fredoka, var(--sans, system-ui), sans-serif;
}
.dinding-kepala { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dinding-judul { flex: 1; min-width: 0; }
.dinding-alis {
  margin: 0; color: var(--merah); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.dinding h1 {
  margin: 2px 0 6px; font: 700 clamp(32px, 8vw, 44px)/1 Fredoka, sans-serif; color: var(--biru); letter-spacing: -.4px;
}
.dinding-judul p { margin: 0; color: #5c5348; font-size: 14.5px; line-height: 1.45; font-weight: 500; }
.pet.dinding-moci { width: 78px; height: 72px; cursor: default; }
.dinding-kembali {
  display: none; border: 0; background: transparent; color: var(--merah);
  font: 600 15px Fredoka, sans-serif; padding: 0 0 8px; cursor: pointer;
}
.dinding-alat { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.dinding-petunjuk { margin: 0 0 12px; color: #7a7064; font-size: 13px; line-height: 1.4; }
#dinding-rapikan { margin-left: auto; }
.dinding-alat button {
  border: 1.5px solid rgb(47 85 150 / .25); background: transparent; color: var(--biru);
  font: 600 14px Fredoka, sans-serif; border-radius: 999px; padding: 7px 14px; cursor: pointer; min-height: 40px;
}
.dinding-alat button[aria-pressed="true"] { background: var(--biru); color: #fff; border-color: var(--biru); }
.dinding-status { margin: 0 0 12px; color: #5c5348; font-size: 14.5px; min-height: 1.3em; }
.dinding-kisi { position: relative; display: block; min-height: 52vh; }

.kartu-dinding {
  position: absolute; left: 0; top: 0; width: var(--lebar, 240px);
  background: #fffaf3; color: #2c2620;
  border-radius: 4px 16px 14px 18px; padding: 28px 16px 16px;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--miring, -0.4deg));
  box-shadow: 0 12px 22px -16px rgb(44 38 32 / .65);
  border: 1px solid rgb(44 38 32 / .08);
  touch-action: pan-y;
  transition: transform .22s cubic-bezier(.2, .75, .2, 1), width .22s ease, box-shadow .22s ease;
}
.dinding-papan.rapih .kartu-dinding { transition: transform .4s cubic-bezier(.2, .8, .2, 1), width .4s ease; }
.kartu-dinding.diseret {
  transition: none;
  z-index: 30;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--miring, -0.4deg)) scale(1.03);
  box-shadow: 0 22px 36px -14px rgb(44 38 32 / .55);
}
.kartu-dinding::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 62px; height: 18px;
  transform: translateX(-50%) rotate(-3deg); background: rgb(231 184 58 / .9);
  box-shadow: 0 1px 0 rgb(255 255 255 / .4) inset;
}
.kartu-dinding.merah { box-shadow: inset 6px 0 0 #C9452E, 0 12px 22px -16px rgb(44 38 32 / .65); }
.kartu-dinding.biru { box-shadow: inset 6px 0 0 #2F5596, 0 12px 22px -16px rgb(44 38 32 / .65); }
.kartu-dinding.kuning { background: #fff6dc; box-shadow: inset 6px 0 0 #E7B83A, 0 12px 22px -16px rgb(44 38 32 / .65); }
.kartu-emoji { position: absolute; top: 14px; right: 14px; font-size: 22px; z-index: 1; pointer-events: none; }
.pegangan-geser {
  position: absolute; top: -6px; left: 0; right: 36px; height: 44px;
  border: 0; background: transparent; cursor: grab; touch-action: none; z-index: 2; padding: 0;
}
.kartu-dinding.diseret .pegangan-geser { cursor: grabbing; }
.ukur-dinding {
  position: absolute; right: -2px; bottom: -2px; width: 48px; height: 48px;
  border: 0; background: transparent; cursor: nwse-resize; touch-action: none; z-index: 3; padding: 0;
}
.ukur-dinding::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px;
  border-radius: 0 0 12px 0;
  background:
    linear-gradient(135deg, transparent 50%, #E7B83A 50%);
  box-shadow: -1px -1px 0 rgb(44 38 32 / .18);
}
.kartu-teks {
  margin: 0; font: 700 1.55rem/1.2 Caveat, "Segoe Print", cursive; white-space: pre-wrap; overflow-wrap: anywhere;
}
.kartu-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: #2F5596; font-size: 13px; font-weight: 600; }
.kartu-meta time { color: #7a7064; font-weight: 500; }
.kartu-aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.reaksi {
  border: 1px solid rgb(44 38 32 / .12); background: #fff; border-radius: 999px;
  min-height: 40px; padding: 4px 10px; cursor: pointer; font: 600 14px Fredoka, sans-serif; color: #2c2620;
}
.reaksi[aria-pressed="true"] { background: #F6EFE3; border-color: #C9452E; }
.reaksi:disabled { opacity: .55; cursor: default; }
.salin-dinding {
  margin-left: auto; border: 0; background: transparent; color: #C9452E;
  font: 600 13.5px Fredoka, sans-serif; cursor: pointer; min-height: 40px; padding: 4px 2px;
}

#dialog-dinding {
  width: min(460px, calc(100vw - 28px)); max-width: none; max-height: min(92dvh, 760px);
  overflow: auto; background: #F6EFE3; color: #2c2620; border: 0;
  border-radius: 18px; padding: 18px 16px 16px;
}
#dialog-dinding h3 { margin: 0 0 6px; font: 700 30px/1 Fredoka, sans-serif; color: #C9452E; }
#dialog-dinding .ingatan { margin: 0 0 10px; font: 500 14.5px/1.45 Fredoka, sans-serif; color: #3d362e; }
#dialog-dinding textarea, #dialog-dinding input[type="text"] {
  width: 100%; box-sizing: border-box; border: 1px solid rgb(44 38 32 / .16);
  background: #fffaf3; border-radius: 12px; color: #2c2620;
}
#dialog-dinding textarea {
  min-height: 140px; resize: vertical; padding: 10px 12px;
  font: 700 1.45rem/1.25 Caveat, cursive;
}
#dialog-dinding input[type="text"] { font: 600 16px Fredoka, sans-serif; padding: 10px 12px; }
#dialog-dinding .label { margin: 10px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7a7064; font-weight: 600; }
.pilih-emoji, .pilih-warna { display: flex; flex-wrap: wrap; gap: 6px; }
.pilih-emoji button, .pilih-warna button {
  min-width: 42px; min-height: 42px; border-radius: 12px; border: 1.5px solid rgb(44 38 32 / .12);
  background: #fff; cursor: pointer; font-size: 18px;
}
.pilih-warna button { font: 600 13px Fredoka, sans-serif; padding: 0 10px; color: #2c2620; }
.pilih-emoji button[aria-pressed="true"], .pilih-warna button[aria-pressed="true"] { border-color: #2F5596; background: rgb(47 85 150 / .1); }
.hitung-dinding { display: block; text-align: right; color: #7a7064; font-size: 12px; margin-top: 4px; }
.hitung-dinding.penuh { color: #C9452E; font-weight: 700; }
.dinding-perangkap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#dialog-dinding .galat { color: #C9452E; min-height: 1.2em; font: 600 14px Fredoka, sans-serif; }
#dialog-dinding .tombol-dialog { margin-top: 8px; }
#dialog-dinding .tombol.utama { background: #C9452E; }

@media (max-width: 760px) {
  .dinding-kembali { display: inline-flex; }
  .kartu-teks { font-size: 1.7rem; }
  .dinding { padding-top: max(12px, env(safe-area-inset-top)); }
}

/* Halaman moderasi (berdiri sendiri, tanpa style.css aplikasi) */
body.moderasi {
  margin: 0; min-height: 100dvh; background: #F6EFE3; color: #2c2620;
  font: 500 16px/1.45 Fredoka, system-ui, sans-serif;
}
.moderasi-bungkus { max-width: 720px; margin: 0 auto; padding: 22px 16px 48px; }
.moderasi-kepala { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.moderasi-kepala h1 { margin: 0; font: 700 36px/1 Fredoka, sans-serif; color: #2F5596; }
.moderasi-kepala p { margin: 4px 0 0; color: #5c5348; }
.moderasi .moci { width: 72px; height: 66px; }
.moderasi .moci .bulu, .moderasi .moci .telinga { fill: #fffdf7; stroke: #b9a68a; stroke-width: 2.5; stroke-linejoin: round; }
.moderasi .moci .telinga-dalam, .moderasi .moci .pipi { fill: #eba596; }
.moderasi .moci .perut { fill: rgb(47 85 150 / .12); }
.moderasi .moci .mata-buka circle { fill: #2c2620; }
.moderasi .moci .mata-buka .kilau { fill: #fff; }
.moderasi .moci .mulut { fill: none; stroke: #2c2620; stroke-width: 2.5; stroke-linecap: round; }
.moderasi .moci .mata-tutup, .moderasi .moci .mata-senang, .moderasi .moci .pensil, .moderasi .moci .gelombang, .moderasi .moci .zzz, .moderasi .moci .hati, .moderasi .moci .aksesori { display: none; }
.grup-mod { margin: 18px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #C9452E; }
.kartu-mod {
  background: #fffaf3; border-radius: 14px; padding: 12px 14px; margin: 8px 0;
  border: 1px solid rgb(44 38 32 / .08); box-shadow: 0 8px 18px -16px rgb(44 38 32 / .8);
}
.kartu-mod .siapa { color: #2F5596; font-weight: 650; }
.kartu-mod .isi { font: 700 1.35rem/1.25 Caveat, cursive; white-space: pre-wrap; margin: 6px 0; }
.lencana { font-size: 12px; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.lencana.menunggu { background: #F8E3A2; color: #6a4e08; }
.lencana.tayang { background: #d9e4f7; color: #2F5596; }
.lencana.ditolak { background: #f6d2cb; color: #C9452E; }
.aksi-mod { display: flex; flex-wrap: wrap; gap: 8px; }
.aksi-mod button {
  min-height: 40px; border-radius: 999px; border: 1.5px solid rgb(44 38 32 / .16);
  background: #fff; font: 600 14px Fredoka, sans-serif; padding: 6px 12px; cursor: pointer;
}
.aksi-mod .ya { background: #2F5596; color: #fff; border-color: #2F5596; }
.aksi-mod .tidak { color: #C9452E; }
.form-kunci { display: flex; gap: 8px; margin-top: 12px; }
.form-kunci input { flex: 1; border-radius: 12px; border: 1px solid rgb(44 38 32 / .2); padding: 10px 12px; font: inherit; }
.form-kunci button, .muat-ulang {
  border: 0; background: #C9452E; color: #fff; border-radius: 999px; padding: 10px 14px;
  font: 650 14px Fredoka, sans-serif; cursor: pointer;
}
.pesan-mod { color: #C9452E; min-height: 1.3em; }