/* ==========================================================================
   hutan.css - pasangan hutan.js. Dimuat SETELAH theme.css (menimpa gaya bingkai lama).
   Bila hutan.js gagal jalan atau gambar bingkai tidak ada, halaman tetap rapi memakai gaya cadangan di theme.css.
   ========================================================================== */

/* ---------- bingkai akar (digambar hutan.js ke kanvas, tanpa border-image) ---------- */
html.hutan .frame {
    --k: .1; --fo: 10px; --gap: 8px;
    isolation: isolate;
    background: none; border: 0; border-radius: 0; box-shadow: none;
}
html.hutan .frame .frame-art { display: none; }
/* panel isi: tepinya berada di tengah tebal bingkai dan digelapkan, jadi tidak tampak sebagai kotak yang ditempel */
html.hutan .frame::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: calc(121px * var(--k) - var(--fo)) calc(147px * var(--k) - var(--fo)) calc(118px * var(--k) - var(--fo)) calc(138px * var(--k) - var(--fo));
    background: var(--panel, linear-gradient(180deg, var(--bg-2), var(--bg-1)));
    box-shadow: inset 0 0 22px 8px var(--panel-shadow, rgba(0, 0, 0, .72));
}
/* padding isi mengikuti tebal bingkai supaya akar tidak menutupi teks */
html.hutan .frame .frame-body {
    padding: calc(258px * var(--k) - var(--fo) + var(--gap)) calc(312px * var(--k) - var(--fo) + var(--gap)) calc(252px * var(--k) - var(--fo) + var(--gap)) calc(294px * var(--k) - var(--fo) + var(--gap));
}
html.hutan { --fsh: rgba(0, 0, 0, .7); }
html[data-theme="light"].hutan { --fsh: rgba(40, 60, 25, .55); }
html.hutan .frame--tinggi > .hutan-fcv { filter: none !important; }
.hutan-fcv {
    position: absolute; left: calc(var(--fo) * -1); top: calc(var(--fo) * -1); pointer-events: none; z-index: 3;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .75)); transition: filter .3s;
}
html.hutan .frame--card  { --k: .105; --fo: 10px; --gap: 8px; }
html.hutan .frame--wide  { --k: .07;  --fo: 8px;  --gap: 6px; }
html.hutan .frame--panel { --k: .12;  --fo: 12px; --gap: 20px; }
html.hutan .frame--hero  {
    --k: .245; --fo: 18px; --gap: 22px;
    --panel: radial-gradient(ellipse at 50% 112%, rgba(230, 220, 154, .2), transparent 62%), linear-gradient(180deg, #14251a, #08100b);
}

/* ---------- bingkai glow BARU (hero): akarnya lebih tebal dari bingkai polos, jadi angkanya sendiri ---------- */
html.hutan .frame--hero::before {
    inset: calc(131px * var(--k) - var(--fo)) calc(171px * var(--k) - var(--fo)) calc(131px * var(--k) - var(--fo)) calc(165px * var(--k) - var(--fo));
}
html.hutan .frame--hero .frame-body {
    padding: calc(280px * var(--k) - var(--fo) + var(--gap)) calc(363px * var(--k) - var(--fo) + var(--gap)) calc(280px * var(--k) - var(--fo) + var(--gap)) calc(352px * var(--k) - var(--fo) + var(--gap));
}
@media (max-width: 767px) {
    html.hutan .frame--card  { --k: .09;  --gap: 7px; }
    html.hutan .frame--panel { --k: .1;   --fo: 10px; --gap: 14px; }
    html.hutan .frame--hero  { --k: .165; --fo: 12px; --gap: 16px; }
}
html.hutan .tile:hover, html.hutan .tile:focus-visible { box-shadow: none; }
html.hutan .tile:hover .hutan-fcv, html.hutan .tile:focus-visible html.hutan { --fsh: rgba(0, 0, 0, .7); }
html[data-theme="light"].hutan { --fsh: rgba(40, 60, 25, .55); }
html.hutan .frame--tinggi > .hutan-fcv { filter: none !important; }
.hutan-fcv { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .8)) brightness(1.18); }

/* ---------- gerak penuh (kursor akar, akar penggulir, akar klik, kunang-kunang, kartu miring) ---------- */
html.hutan-fx {
    scrollbar-width: none;
    cursor: url('/images/cursor/akar.png?v=1791618539') 1 0, auto;
}
html.hutan-fx::-webkit-scrollbar { display: none; }
html.hutan-fx a, html.hutan-fx button, html.hutan-fx [role="button"], html.hutan-fx label[for], html.hutan-fx summary,
html.hutan-fx select, html.hutan-fx .tile, html.hutan-fx .btn-gold, html.hutan-fx .btn-ghost, html.hutan-fx .choice {
    cursor: url('/images/cursor/akar-daun.png?v=1791618539') 1 0, pointer;
}
html.hutan-fx input, html.hutan-fx textarea { cursor: text; }

/* ruang di kanan supaya akar penggulir tidak menutupi teks di layar sempit (di layar lebar sudah ada ruang kosong) */
html.hutan-fx { --hutan-railw: 112px; }
html.hutan-fx body { padding-right: clamp(0px, calc(76px - (100vw - var(--wrap, 81rem)) / 2), 76px); }
#hutan-rail   { position: fixed; top: 0; right: 0; width: var(--hutan-railw); height: 100%; z-index: 50; pointer-events: none; }
#hutan-railhit{ position: fixed; top: 0; right: 0; width: 30px; height: 100%; z-index: 51; touch-action: none; }
#hutan-fx     { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; } /* di atas header menempel (60) dan menu bahasa (70) supaya akar klik terlihat di mana pun */
#hutan-ff     { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
@media (max-width: 1100px) { html.hutan-fx { --hutan-railw: 84px; } }
@media (max-width: 760px) {
    html.hutan-fx { --hutan-railw: 58px; }
}
/* HP dan layar sentuh: akar penggulir DIMATIKAN. Ia memakan ±30px lebar halaman (strip kosong di kanan, header dan footer ikut menyempit),
   dan area sentuhnya di tepi kanan (touch-action: none) menghalangi gulir dengan jempol. Di layar sentuh gulir sudah punya penanda bawaan. */
@media (max-width: 760px), (pointer: coarse) {
    html.hutan-fx body { padding-right: 0; }
    #hutan-rail, #hutan-railhit { display: none; }
}

html.hutan-fx .tile {
    transform: perspective(900px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .18s ease-out;
}
html.hutan-fx .tile:hover, html.hutan-fx .tile:focus-visible { --ty: -5px; transform: perspective(900px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- hutan di hero ---------- */
[data-hutan-forest] { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #0f2418 0, #0a150e 55%, #060b07 100%); }
.hutan-layer { position: absolute; left: 0; right: 0; bottom: -40px; height: 115%; width: 100%; will-change: transform; }
.hutan-fog { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(60, 110, 75, .22) 75%, rgba(6, 11, 7, .9) 100%); pointer-events: none; }
.hutan-hf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hutan-ray {
    position: absolute; top: -12%; width: clamp(60px, 9vw, 130px); height: 125%;
    background: linear-gradient(180deg, rgba(230, 220, 154, .24), rgba(230, 220, 154, 0) 72%);
    filter: blur(10px); mix-blend-mode: screen; transform: rotate(16deg); animation: hutan-ray 9s ease-in-out infinite alternate; opacity: .7;
}
@keyframes hutan-ray { from { opacity: .35; } to { opacity: .85; } }

/* ---------- jalur akar di bagian "cara kerja" (cincin langkah tingginya 76px, pusatnya 38px dari atas) ---------- */
[data-hutan-steps] { position: relative; }
.hutan-rootpath { position: absolute; left: 0; top: 38px; width: 100%; height: 90px; transform: translateY(-45px); pointer-events: none; overflow: visible; }
.hutan-rootpath path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) { .hutan-rootpath { display: none; } }

/* ---------- akar menjuntai di footer (footer harus position:relative; overflow:hidden dan punya padding atas sekitar 96px) ---------- */
svg[data-hutan-footroots] { position: absolute; left: 0; top: 0; width: 100%; height: 170px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .hutan-ray { animation: none; }
    html.hutan-fx .tile, html.hutan { --fsh: rgba(0, 0, 0, .7); }
html[data-theme="light"].hutan { --fsh: rgba(40, 60, 25, .55); }
html.hutan .frame--tinggi > .hutan-fcv { filter: none !important; }
.hutan-fcv { transition: none; }
}

/* ---------- tema terang: hutan di hero dibuat pucat (warna dibalik), kunang-kunang dan sinar dimatikan; bingkai akar tetap dipakai ---------- */
html[data-theme="light"] [data-hutan-forest] { filter: invert(1) hue-rotate(180deg) saturate(.85) brightness(1.04); opacity: .95; }
html[data-theme="light"] #hutan-ff,
html[data-theme="light"] .hutan-ray { display: none; }
html[data-theme="light"].hutan .frame--hero {
    --panel: radial-gradient(ellipse at 50% 112%, rgba(120, 170, 100, .4), transparent 62%), linear-gradient(180deg, #f2f7e8, #dfeacb);
}
html[data-theme="light"] html.hutan { --fsh: rgba(0, 0, 0, .7); }
html[data-theme="light"].hutan { --fsh: rgba(40, 60, 25, .55); }
html.hutan .frame--tinggi > .hutan-fcv { filter: none !important; }
.hutan-fcv { filter: drop-shadow(0 3px 4px rgba(40, 60, 25, .5)); }
/* ---------- suasana hutan di seluruh halaman (hanya mode efek "Penuh", tema gelap, bukan tema event) ----------
   Latar polos terasa kosong di bagian bawah beranda, jadi ditambah: cahaya hangat dan kehijauan yang "bernapas" perlahan,
   berkas sinar tipis, dan siluet batang pohon di kedua tepi layar (disembunyikan di layar sempit). Semuanya hiasan di belakang konten. */
/* body dibuat ruang tumpukan sendiri supaya hiasan z-index -1 tampil di atas latar body tetapi di belakang konten */
html.hutan-fx:not([data-event]) body.t-forest { isolation: isolate; }
html.hutan-fx:not([data-event]) body.t-forest::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(55vw 45vh at 88% 6%, rgba(230, 220, 154, .2), transparent 70%),
        radial-gradient(48vw 48vh at 8% 88%, rgba(98, 224, 204, .13), transparent 70%),
        radial-gradient(42vw 40vh at 52% 58%, rgba(111, 174, 122, .12), transparent 72%),
        linear-gradient(102deg, transparent 36%, rgba(230, 220, 154, .09) 41%, transparent 47%),
        linear-gradient(106deg, transparent 56%, rgba(230, 220, 154, .07) 60%, transparent 66%),
        linear-gradient(98deg, transparent 12%, rgba(143, 197, 138, .065) 16%, transparent 22%);
    animation: hutan-napas 14s ease-in-out infinite alternate;
}
html.hutan-fx:not([data-event]) body.t-forest::after {
    content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='800' viewBox='0 0 240 800'%3E%3Cg fill='%23183222'%3E%3Cpath d='M0 0h58c-6 90 10 170 2 260-8 100 14 190 4 290-6 90 8 170 4 250H0Z'/%3E%3Cpath d='M0 0h120c-14 70 6 140-4 210-8 70 6 150-2 230 8 80-6 160 2 230 4 60-2 100 0 130H0Z' opacity='.55'/%3E%3C/g%3E%3Cg fill='none' stroke='%2352975f' stroke-width='3' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M60 40c30 40 18 90 44 140M62 300c34 30 24 80 54 120M58 560c28 36 14 86 40 130'/%3E%3C/g%3E%3Cg fill='%2358a063' opacity='.5'%3E%3Cellipse cx='104' cy='180' rx='9' ry='5' transform='rotate(40 104 180)'/%3E%3Cellipse cx='116' cy='420' rx='9' ry='5' transform='rotate(30 116 420)'/%3E%3Cellipse cx='98' cy='690' rx='9' ry='5' transform='rotate(50 98 690)'/%3E%3C/g%3E%3C/svg%3E") left top / clamp(120px, 14vw, 240px) auto repeat-y,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='800' viewBox='0 0 240 800' transform='scale(-1 1)'%3E%3Cg transform='translate(240 0) scale(-1 1)'%3E%3Cg fill='%23183222'%3E%3Cpath d='M0 0h58c-6 90 10 170 2 260-8 100 14 190 4 290-6 90 8 170 4 250H0Z'/%3E%3Cpath d='M0 0h120c-14 70 6 140-4 210-8 70 6 150-2 230 8 80-6 160 2 230 4 60-2 100 0 130H0Z' opacity='.55'/%3E%3C/g%3E%3Cg fill='none' stroke='%2352975f' stroke-width='3' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M60 40c30 40 18 90 44 140M62 300c34 30 24 80 54 120M58 560c28 36 14 86 40 130'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right top / clamp(120px, 14vw, 240px) auto repeat-y;
    opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 12%, transparent 22%, transparent 78%, #000 88%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 12%, transparent 22%, transparent 78%, #000 88%, #000 100%);
}
@keyframes hutan-napas { from { opacity: .72; transform: translateY(0); } to { opacity: 1; transform: translateY(-1.2vh); } }

/* ---------- versi tema TERANG: hutan yang disinari matahari (warna gelapnya dibalik: sinar putih-kuning, batang pohon hijau lumut tua, serbuk sari emas) ---------- */
html.hutan-fx[data-theme="light"]:not([data-event]) body.t-forest::before {
    background:
        radial-gradient(55vw 45vh at 88% 4%, rgba(255, 230, 130, .62), transparent 70%),
        radial-gradient(48vw 48vh at 6% 90%, rgba(46, 130, 90, .26), transparent 70%),
        radial-gradient(42vw 40vh at 52% 58%, rgba(255, 252, 205, .5), transparent 72%),
        linear-gradient(102deg, transparent 34%, rgba(255, 250, 200, .62) 40%, rgba(255, 250, 200, .62) 43%, transparent 50%),
        linear-gradient(106deg, transparent 55%, rgba(255, 248, 190, .5) 60%, transparent 67%),
        linear-gradient(98deg, transparent 10%, rgba(70, 120, 60, .1) 16%, transparent 24%);
}
html.hutan-fx[data-theme="light"]:not([data-event]) body.t-forest::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='800' viewBox='0 0 240 800'%3E%3Cg fill='%2345602f'%3E%3Cpath d='M0 0h58c-6 90 10 170 2 260-8 100 14 190 4 290-6 90 8 170 4 250H0Z'/%3E%3Cpath d='M0 0h120c-14 70 6 140-4 210-8 70 6 150-2 230 8 80-6 160 2 230 4 60-2 100 0 130H0Z' opacity='.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%232f6b3a' stroke-width='3.5' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M60 40c30 40 18 90 44 140M62 300c34 30 24 80 54 120M58 560c28 36 14 86 40 130'/%3E%3C/g%3E%3Cg fill='%23356f3a' opacity='.7'%3E%3Cellipse cx='104' cy='180' rx='10' ry='5.5' transform='rotate(40 104 180)'/%3E%3Cellipse cx='116' cy='420' rx='10' ry='5.5' transform='rotate(30 116 420)'/%3E%3Cellipse cx='98' cy='690' rx='10' ry='5.5' transform='rotate(50 98 690)'/%3E%3C/g%3E%3C/svg%3E") left top / clamp(120px, 14vw, 240px) auto repeat-y,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='800' viewBox='0 0 240 800'%3E%3Cg transform='translate(240 0) scale(-1 1)'%3E%3Cg fill='%2345602f'%3E%3Cpath d='M0 0h58c-6 90 10 170 2 260-8 100 14 190 4 290-6 90 8 170 4 250H0Z'/%3E%3Cpath d='M0 0h120c-14 70 6 140-4 210-8 70 6 150-2 230 8 80-6 160 2 230 4 60-2 100 0 130H0Z' opacity='.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%232f6b3a' stroke-width='3.5' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M60 40c30 40 18 90 44 140M62 300c34 30 24 80 54 120M58 560c28 36 14 86 40 130'/%3E%3C/g%3E%3Cg fill='%23356f3a' opacity='.7'%3E%3Cellipse cx='104' cy='180' rx='10' ry='5.5' transform='rotate(40 104 180)'/%3E%3Cellipse cx='116' cy='420' rx='10' ry='5.5' transform='rotate(30 116 420)'/%3E%3Cellipse cx='98' cy='690' rx='10' ry='5.5' transform='rotate(50 98 690)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right top / clamp(120px, 14vw, 240px) auto repeat-y;
    opacity: .55;
}
/* serbuk sari emas (kanvas kunang-kunang yang sama, warnanya digelapkan agar terbaca di latar terang) */
html.hutan-fx[data-theme="light"]:not([data-event]) #hutan-ff { display: block; filter: sepia(1) saturate(7) brightness(.78); opacity: .95; }
/* hutan di hero: kontras dinaikkan supaya tidak menyatu dengan panel yang pucat */
html[data-theme="light"] [data-hutan-forest] { filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(.88) contrast(1.28); opacity: 1; }
/* garis lurus kiri-kanan: gambar bingkai kartu menonjol keluar dari kotaknya (kartu game ±9px, kartu Trending ±6px, hero hanya ±2px),
   jadi tepi kartu tampak lebih kiri daripada judul dan hero. Daftar kartu dimasukkan sebesar tonjolan itu agar tepi yang terlihat sejajar. */
html.hutan:not([data-event]) .trend-grid { padding-inline: 4px; }
/* bingkai panel dan lebar yang berdiri sendiri (bukan kartu di daftar) menonjol keluar ±6 sampai ±12px: beri jarak sebesar itu
   supaya tepinya sejajar dengan kotak biasa di sekitarnya (pilihan nominal, kolom isian) dan tidak mepet elemen di atas/bawahnya */
html.hutan:not([data-event]) .frame--panel { margin: 12px 10px 10px; }
html.hutan:not([data-event]) .frame--wide  { margin: 8px 6px 6px; }
html.hutan:not([data-event]) .tile > .frame { margin: 0; }

/* kartu di daftar "Pilih game" (permintaan pemilik, mengacu ke tampilan bangjeff): gambar selebar kartu, mengisi penuh sampai ke bingkai TANPA celah
   di atas, kiri, dan kanan (bagian bawah untuk nama game dan penerbit); bingkai akar dibuat lebih tipis di kolom ini saja. Gambar sengaja
   melebar 3px ke bawah akar bingkai (bingkai digambar DI ATAS gambar), jadi tidak ada garis gelap di sela akar. */
html.hutan:not([data-event]) .game-grid { padding-inline: 4px; }
html.hutan:not([data-event]) .game-grid .frame--card { --k: .07; --fo: 6px; --gap: 0px; }
html.hutan:not([data-event]) .game-grid .tile .cover,
html.hutan:not([data-event]) .game-grid .tile .cover-fallback { width: calc(100% + 14px); max-width: none; margin: -7px -7px 0; border-radius: 3px 3px 0 0; }
html.hutan:not([data-event]) .game-grid .tile .name { padding: 0 8px; }
html.hutan:not([data-event]) .game-grid .tile .meta { padding: 0 8px 5px; }
@media (max-width: 767px) { html.hutan:not([data-event]) .game-grid .frame--card { --k: .062; --fo: 5px; --gap: 0px; } }

/* HP sempit: bingkai akar hero memakan lebar, kata panjang di judul (mis. "PETUALANGANMU!") meluber ke akar; rapatkan isi dan kecilkan judul */
@media (max-width: 480px) {
    html.hutan .frame--hero { --gap: 8px; }
    #judul-hero { font-size: 1.35rem; overflow-wrap: anywhere; }
}
@media (max-width: 899px) { html.hutan-fx body.t-forest::after { display: none; } }
@media (prefers-reduced-motion: reduce) { html.hutan-fx body.t-forest::before { animation: none; } }