/* ============================================================
   Growvia — Diorama The Viaz (diorama.js).
   Semua scene digambar CSS murni + sprite pixel yang ada.
   ============================================================ */

/* ─────────── bingkai scene ─────────── */
.dz {
  --acc: #8ac926;
  position: relative; overflow: hidden; isolation: isolate;
  height: 340px;
  border: 3px solid #0d0a07;
  box-shadow: 0 0 0 2px var(--line2), 0 6px 0 rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .06);
  image-rendering: pixelated;
  animation: dz-in .45s cubic-bezier(.2, .9, .3, 1.1) both;
}
.dz.acc-gold { --acc: #f2b23a; }
.dz.acc-blue { --acc: #4fa8e0; }
.dz.acc-red { --acc: #e05252; }
.dz-stage { position: absolute; inset: 0; z-index: 0; }
.dz-stage > * { position: absolute; }
/* vignette + scanline halus di atas scene */
.dz::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .45) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
}
.dz .pix { image-rendering: pixelated; }
.main .dz img.pix { max-width: none; max-height: none; }

/* ─────────── HUD dalam scene ─────────── */
.dz-hud { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }
.dz-level { position: relative; width: 64px; height: 64px; pointer-events: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }
.dz-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.dz-ring-bg { fill: rgba(13, 10, 7, .82); stroke: #2a2017; stroke-width: 7; }
.dz-ring-fg { fill: none; stroke: var(--acc); stroke-width: 7; stroke-linecap: butt; transition: stroke-dashoffset .8s ease-out; filter: drop-shadow(0 0 4px var(--acc)); }
.dz-level-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.dz-level-in small { font-family: var(--font-pixel); font-size: 8px; color: var(--muted); }
.dz-level-in b { font-family: var(--font-pixel); font-size: 15px; color: #fff; text-shadow: 2px 2px 0 #000; }
.dz-ticks { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.dz-tick {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px;
  background: rgba(13, 10, 7, .82); border: 2px solid #2a2017; box-shadow: 0 3px 0 rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px);
}
.dz-tick img { width: 22px; height: 22px; }
.dz-tick > div { display: flex; flex-direction: column; line-height: 1.2; }
.dz-tick-v { font-family: var(--font-pixel); font-size: 12px; color: #fff; text-shadow: 2px 2px 0 #000; min-width: 64px; text-align: right; }
.dz-tick small { font-size: 10px; color: var(--muted); text-align: right; }
.dz-tick.viaz.live .dz-tick-v { color: #ffd469; }
.dz-tick.xp.live .dz-tick-v { color: #d6b4f7; }
.dz-tick.live { border-color: color-mix(in srgb, var(--acc) 60%, #2a2017); }
.dz-tick.live img { animation: dz-beat 1.2s ease-in-out infinite; }

/* ─────────── bar bawah ─────────── */
.dz-bottom {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: linear-gradient(0deg, rgba(10, 8, 6, .95) 0%, rgba(10, 8, 6, .75) 70%, transparent 100%);
}
.dz-status { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dz-status b { font-family: var(--font-pixel); font-size: 10px; color: #fff; text-shadow: 2px 2px 0 #000; line-height: 1.5; }
.dz-status small { font-size: 11px; color: #d8cbb2; }
.dz-prog { display: block; height: 8px; max-width: 360px; background: #0d0a07; border: 2px solid #2a2017; overflow: hidden; }
.dz-prog i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 55%, #000), var(--acc)); box-shadow: 0 0 8px var(--acc); transition: transform .6s ease-out; }
.dz-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.dz-cta {
  position: relative; overflow: hidden;
  padding: 12px 20px; font-family: var(--font-pixel); font-size: 11px; text-transform: uppercase; color: #160f04;
  background: linear-gradient(#ffe08a, #f2b23a 55%, #c98d16); border: 3px solid #0d0a07;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .5), 0 4px 0 #0d0a07;
  transition: transform .08s ease;
}
.dz-cta.green { background: linear-gradient(#c6f26a, #8ac926 55%, #5c8a1e); }
.dz-cta.blue { background: linear-gradient(#a8dcfb, #4fa8e0 55%, #2f7fb5); }
.dz-cta.red { background: linear-gradient(#ffa59d, #e05252 55%, #a8322b); color: #fff; text-shadow: 1px 1px 0 #000; }
.dz-cta:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 0 #0d0a07; }
.dz-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg);
  animation: dz-shine 2.4s ease-in-out infinite;
}
.dz-cta.hot { animation: dz-hot 1s ease-in-out infinite; }
.dz-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: rgba(13, 10, 7, .85); border: 2px solid #2a2017; color: #d8cbb2; font-size: 11px; font-weight: 700;
}
.dz-stop {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  background: linear-gradient(rgba(64, 16, 12, .92), rgba(32, 9, 7, .92));
  border: 3px solid #0d0a07; color: #ff9b8f;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .07), 0 4px 0 #0d0a07;
  transition: transform .08s ease, color .15s ease, border-color .15s ease;
}
.dz-stop .pix { width: 14px; height: 14px; }
.dz-stop:hover { color: #fff; border-color: #e05252; background: linear-gradient(rgba(122, 42, 34, .95), rgba(58, 17, 13, .95)); }
.dz-stop:active { transform: translateY(3px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 0 #0d0a07; }
/* Baris konsekuensi di dialog konfirmasi (flee / cancel planting / cancel expedition). */
.dz-warnrow { display: flex; gap: 8px; align-items: flex-start; }
.dz-warnrow .pix { width: 20px; height: 20px; flex: none; }
.dz-warnrow span { color: #ffd9d3; line-height: 1.5; }
.dz-knob { position: relative; width: 26px; height: 14px; background: #2a2017; border: 2px solid #0d0a07; }
.dz-knob::after { content: ''; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; background: var(--muted); transition: left .2s ease, background .2s ease; }
.dz-toggle.on { color: #fff; border-color: var(--acc); }
.dz-toggle.on .dz-knob { background: color-mix(in srgb, var(--acc) 40%, #0d0a07); }
.dz-toggle.on .dz-knob::after { left: 13px; background: var(--acc); box-shadow: 0 0 6px var(--acc); }

/* ─────────── langit bersama (farm + fish) ─────────── */
.dz-fish { background: linear-gradient(180deg, #5fb4ea 0%, #a9dcf7 48%, #e6f4d6 64%); }
.ph-dawn { background: linear-gradient(180deg, #3d4f8a 0%, #e98a6a 44%, #f7cf8e 64%) !important; }
.ph-dusk { background: linear-gradient(180deg, #2b2a5c 0%, #b4527a 40%, #f09a5b 62%) !important; }
.ph-night { background: linear-gradient(180deg, #070b1f 0%, #18214a 45%, #2b3768 64%) !important; }
.dz-sun {
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, #fffbe0 0%, #ffe28a 40%, #f6b33c 72%);
  box-shadow: 0 0 30px 8px rgba(255, 214, 110, .75), 0 0 80px 24px rgba(255, 214, 110, .35);
  animation: dz-pulse 4s ease-in-out infinite;
}
.ph-dusk .dz-sun, .ph-dawn .dz-sun { background: radial-gradient(circle, #fff1c9 0%, #ff9b5c 60%, #e2533f 90%); box-shadow: 0 0 40px 14px rgba(255, 120, 70, .55); }
.dz-moon {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #d9d6c4 60%, #a9a693);
  box-shadow: 0 0 24px 6px rgba(220, 225, 255, .35), inset -6px -4px 0 rgba(0, 0, 0, .12);
}
.dz-stars { inset: 0; }
.dz-stars i { position: absolute; width: 2px; height: 2px; background: #fff; box-shadow: 0 0 4px #fff; animation: dz-twinkle 2.6s ease-in-out infinite; }
.dz-stars i:nth-child(3n) { width: 3px; height: 3px; }
.dz-cloud { height: 14px; background: #fff; border-radius: 0; opacity: .9; box-shadow: 10px -8px 0 0 #fff, 22px 0 0 2px #fff, 34px -4px 0 0 #fff; animation: dz-drift linear infinite; }
.dz-cloud.c1 { top: 12%; width: 40px; animation-duration: 48s; }
.dz-cloud.c2 { top: 24%; width: 30px; opacity: .7; animation-duration: 70s; animation-delay: -30s; }
.dz-cloud.c3 { top: 8%; width: 24px; opacity: .55; animation-duration: 90s; animation-delay: -60s; }
.ph-night .dz-cloud { opacity: .12; }
.ph-dusk .dz-cloud, .ph-dawn .dz-cloud { background: #ffd3c0; box-shadow: 10px -8px 0 0 #ffd3c0, 22px 0 0 2px #ffd3c0, 34px -4px 0 0 #ffd3c0; }

/* FARM: lihat bagian "farming datar" di akhir file */

/* ─────────── MINE ─────────── */
.dz-mine { background: radial-gradient(ellipse at 50% 120%, #4a3420 0%, #24180f 45%, #0f0a06 100%); }
.dz-strata { inset: 0; }
.dz-strata i { position: absolute; left: -5%; right: -5%; height: 28px; background: rgba(0, 0, 0, .22); border-radius: 50%; transform: rotate(-3deg); }
.dz-strata i:nth-child(1) { top: 12%; background: rgba(120, 90, 60, .14); }
.dz-strata i:nth-child(2) { top: 32%; transform: rotate(2deg); }
.dz-strata i:nth-child(3) { top: 52%; background: rgba(120, 90, 60, .12); transform: rotate(-1deg); }
.dz-strata i:nth-child(4) { top: 66%; height: 40px; }
.dz-vein { z-index: 1; padding: 6px; border-radius: 40% 60% 50% 45%; background: radial-gradient(circle, rgba(0, 0, 0, .45), transparent 70%); }
.dz-vein img { width: 30px; height: 30px; animation: dz-glint 3s ease-in-out infinite; animation-delay: inherit; }
.dz-lantern { top: 0; z-index: 2; width: 2px; height: 40px; background: #3a2a1a; transform-origin: top center; animation: dz-swing 3.2s ease-in-out infinite; }
.dz-lantern.l1 { left: 22%; }
.dz-lantern.l2 { left: 74%; height: 58px; animation-delay: -1.4s; }
.dz-lantern i { position: absolute; left: -7px; bottom: -16px; width: 16px; height: 18px; background: #ffcf5c; border: 3px solid #3a2a1a; box-shadow: 0 0 22px 10px rgba(255, 190, 80, .45), 0 0 80px 40px rgba(255, 170, 60, .18); animation: dz-flicker 1.8s steps(3) infinite; }
.dz-mine.idle .dz-lantern i { box-shadow: 0 0 10px 4px rgba(255, 190, 80, .25); filter: brightness(.6); }
.dz-dust { inset: 0; pointer-events: none; }
.dz-dust i { position: absolute; top: -4px; width: 2px; height: 2px; background: rgba(255, 230, 190, .55); animation: dz-fall 7s linear infinite; }
.dz-miner { left: 54%; bottom: 30%; z-index: 2; }
.dz-pick { display: block; transform-origin: 80% 80%; animation: dz-chop .7s cubic-bezier(.5, 0, .9, .4) infinite; }
.dz-pick-img { width: 44px; height: 44px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }
.dz-chips i { position: absolute; left: -6px; bottom: 6px; width: 4px; height: 4px; background: #c9b08a; animation: dz-chip .7s ease-out infinite; }
.dz-chips i:nth-child(2) { animation-delay: .1s; --cx: -16px; }
.dz-chips i:nth-child(3) { animation-delay: .2s; --cx: 10px; background: #ffe08a; }
.dz-rail { left: 0; right: 0; bottom: 22%; height: 6px; z-index: 1; background: repeating-linear-gradient(90deg, #5a4630 0 6px, #2a1f14 6px 18px); box-shadow: 0 -3px 0 #7d7466, 0 3px 0 #1a120b; }
.dz-cart { bottom: calc(22% + 6px); z-index: 2; width: 68px; height: 44px; transition: left 1s linear; }
.dz-mine.live .dz-cart { animation: dz-rattle .25s steps(2) infinite; }
.dz-cart-body { position: absolute; left: 0; right: 0; bottom: 8px; height: 26px; background: linear-gradient(#6b5236, #4a3826); border: 3px solid #1a120b; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
.dz-wheel { position: absolute; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: #2a2017; border: 3px solid #0d0a07; animation: dz-spin 1s linear infinite; }
.dz-mine.idle .dz-wheel { animation: none; }
.dz-wheel.a { left: 8px; } .dz-wheel.b { right: 8px; }
.dz-cart-load { position: absolute; left: 6px; right: 6px; bottom: 26px; display: flex; justify-content: center; }
.dz-cart-load img { width: 22px; height: 22px; margin: 0 -4px; }
.dz-cart.full { filter: drop-shadow(0 0 10px rgba(242, 178, 58, .9)); }
.dz-cart.full .dz-cart-load img { animation: dz-bounce .9s ease-in-out infinite; }
.dz-sign { z-index: 2; top: 78px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: #4a3420; border: 3px solid #1a120b; box-shadow: 0 4px 0 rgba(0, 0, 0, .5); }
.dz-sign img { width: 22px; height: 22px; }
.dz-sign b { font-family: var(--font-pixel); font-size: 9px; color: #f0e4cd; white-space: nowrap; }

/* ─────────── FISH ─────────── */
.dz-island { right: 6%; bottom: 44%; width: 120px; height: 34px; z-index: 0; background: #3c6b2a; border-radius: 50% 50% 0 0; box-shadow: 30px 6px 0 -6px #2f5622; }
.dz-island::after { content: ''; position: absolute; left: 36px; bottom: 24px; width: 6px; height: 34px; background: #6b4a2c; box-shadow: -10px -10px 0 8px #4e8a2e, 10px -12px 0 6px #4e8a2e; }
.ph-night .dz-island { filter: brightness(.3); }
.dz-sea { left: 0; right: 0; bottom: 0; height: 46%; overflow: hidden; background: linear-gradient(180deg, #3a8fc9 0%, #22659e 40%, #123a63 100%); }
.ph-night .dz-sea { background: linear-gradient(180deg, #1b3159 0%, #0f1f3d 50%, #070f22 100%); }
.ph-dusk .dz-sea { background: linear-gradient(180deg, #a9577a 0%, #4a3a6e 40%, #1d2448 100%); }
.dz-wave { position: absolute; left: -50%; width: 200%; height: 10px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 18px, transparent 18px 44px); animation: dz-wave linear infinite; }
.dz-wave.w1 { top: 2px; animation-duration: 9s; }
.dz-wave.w2 { top: 26%; opacity: .5; animation-duration: 14s; animation-direction: reverse; }
.dz-wave.w3 { top: 55%; opacity: .3; animation-duration: 20s; }
.dz-glint { position: absolute; left: 40%; top: 0; width: 80px; height: 100%; background: linear-gradient(180deg, rgba(255, 240, 180, .35), transparent 70%); filter: blur(4px); animation: dz-pulse 3s ease-in-out infinite; }
.ph-night .dz-glint { background: linear-gradient(180deg, rgba(220, 225, 255, .25), transparent 70%); }
.dz-shadow { z-index: 1; left: -60px; width: 46px; height: 12px; border-radius: 50%; background: rgba(5, 15, 30, .45); animation: dz-swim linear infinite; }
.dz-shadow::after { content: ''; position: absolute; right: -10px; top: 1px; border: 5px solid transparent; border-left: 10px solid rgba(5, 15, 30, .45); }
.dz-dock { left: 0; bottom: 34%; width: 38%; height: 54px; z-index: 2; }
.dz-plank { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, #8a6440 0 22px, #6b4a2c 22px 24px); border: 3px solid #2a1a0e; }
.dz-post { position: absolute; top: 12px; width: 10px; height: 60px; background: #5a3d22; border: 3px solid #2a1a0e; }
.dz-post.a { left: 24%; } .dz-post.b { right: 6%; }
/* Titik jangkar = permukaan papan dermaga dekat ujungnya; semua bagian dalam px relatif ke sini. */
.dz-angler { left: calc(38% - 26px); bottom: calc(34% + 54px); width: 0; height: 0; z-index: 3; }
.dz-angler > * { position: absolute; display: block; box-sizing: border-box; }
.dz-body { left: -9px; bottom: 0; width: 18px; height: 22px; background: #3a7bd5; border: 2px solid #0d0a07; }
.dz-head { left: -8px; bottom: 20px; width: 16px; height: 14px; background: #f2c08a; border: 2px solid #0d0a07; }
.dz-hat { left: -13px; bottom: 32px; width: 26px; height: 6px; background: #d9a441; border: 2px solid #0d0a07; z-index: 1; }
.dz-hat::after { content: ''; position: absolute; left: 5px; bottom: 3px; width: 12px; height: 7px; background: #d9a441; border: 2px solid #0d0a07; border-bottom: 0; }
.dz-arm { left: 4px; bottom: 9px; width: 14px; height: 6px; background: #2f66b3; border: 2px solid #0d0a07; z-index: 1; }
.dz-thigh { left: 4px; bottom: 0; width: 16px; height: 7px; background: #4a3826; border: 2px solid #0d0a07; }
.dz-shin { left: 14px; bottom: -16px; width: 7px; height: 18px; background: #4a3826; border: 2px solid #0d0a07; border-bottom: 4px solid #1a120b; }
.dz-rod { left: 14px; bottom: 11px; width: 68px; height: 3px; background: #6b4a2c; box-shadow: 0 1px 0 #0d0a07; transform-origin: left center; transform: rotate(-46deg); }
.dz-line { left: 61px; bottom: -36px; width: 64px; height: 96px; border-top: 2px solid rgba(255, 255, 255, .7); border-right: 1px solid rgba(255, 255, 255, .55); border-radius: 0 100% 0 0; transform-origin: left top; animation: dz-line 3s ease-in-out infinite; }
.dz-bobber { left: 110px; bottom: -62px; z-index: 4; width: 30px; height: 30px; animation: dz-bob 2.4s ease-in-out infinite; }
.dz-bobber i { position: absolute; left: 7px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #ff4f40 50%, #fff 50%); border: 2px solid #0d0a07; }
.dz-bobber.antsy { animation: dz-tug .35s ease-in-out infinite; }
.dz-ripple { position: absolute; left: -10px; right: -10px; bottom: -2px; height: 10px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; animation: dz-ripple 2.4s ease-out infinite; }
.dz-bobber.antsy .dz-ripple { animation-duration: .7s; }
.dz-jump { right: 26%; bottom: 40%; z-index: 3; animation: dz-leap 5s ease-in-out infinite; }
.dz-jump img { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }

/* ─────────── DUNGEON ─────────── */
.dz-dgn { background: radial-gradient(ellipse at 50% 60%, #2a1512 0%, #120908 60%, #060303 100%); }
.dz-bricks { inset: 0; opacity: .5;
  background-image:
    linear-gradient(#0a0505 2px, transparent 2px),
    linear-gradient(90deg, #0a0505 2px, transparent 2px);
  background-size: 48px 24px, 48px 48px;
  background-position: 0 0, 24px 0;
  mask: radial-gradient(ellipse at 50% 55%, #000 30%, transparent 75%);
}
.dz-torch { top: 32%; z-index: 2; width: 10px; height: 34px; background: #4a2a1a; border: 2px solid #0d0a07; }
.dz-torch.a { left: 22%; } .dz-torch.b { right: 22%; }
.dz-torch i { position: absolute; left: -9px; top: -30px; width: 24px; height: 30px; background: radial-gradient(ellipse at 50% 80%, #fff3b0 0%, #ffb340 35%, #e0422a 70%, transparent 72%); filter: drop-shadow(0 0 14px #ff8a3a); animation: dz-fire .45s steps(3) infinite alternate; transform-origin: bottom center; }
.dz-torch::after { content: ''; position: absolute; left: -70px; top: -90px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 60, .28), transparent 65%); animation: dz-flicker 1.5s steps(4) infinite; }
.dz-gate { left: 50%; bottom: 18%; z-index: 1; width: 180px; height: 200px; transform: translateX(-50%); background: #2a2420; border: 4px solid #0d0a07; border-radius: 90px 90px 0 0; box-shadow: inset 0 0 0 10px #3a322c, 0 0 0 4px #1a1512; overflow: hidden; }
.dz-void { position: absolute; inset: 14px 14px 0; border-radius: 76px 76px 0 0; background: radial-gradient(ellipse at 50% 70%, #3a0f0c, #050202 70%); display: grid; place-items: center; }
.dz-door { position: absolute; top: 14px; bottom: 0; width: calc(50% - 14px); z-index: 2; background: repeating-linear-gradient(90deg, #5a3d22 0 14px, #4a3018 14px 16px); border: 3px solid #1a0f08; transition: transform 1s cubic-bezier(.6, 0, .3, 1); }
.dz-door.l { left: 14px; border-radius: 76px 0 0 0; transform-origin: left; }
.dz-door.r { right: 14px; border-radius: 0 76px 0 0; transform-origin: right; }
.dz-dgn.open .dz-door.l { transform: perspective(400px) rotateY(70deg); }
.dz-dgn.open .dz-door.r { transform: perspective(400px) rotateY(-70deg); }
.dz-eyes { display: flex; gap: 14px; animation: dz-blink 5s steps(1) infinite; }
.dz-eyes i { width: 8px; height: 5px; background: #ff3b2f; box-shadow: 0 0 10px 3px rgba(255, 59, 47, .7); }
.dz-foe { width: 96px; height: 96px; filter: drop-shadow(0 0 16px rgba(224, 82, 82, .7)); animation: dz-bounce 2.2s ease-in-out infinite; }
.dz-dgn.boss .dz-foe { width: 120px; height: 120px; }
.dz-dgn.boss .dz-gate { box-shadow: inset 0 0 0 10px #3a322c, 0 0 0 4px #1a1512, 0 0 50px 10px rgba(224, 82, 82, .45); }
.dz-fog { left: 0; right: 0; bottom: 0; height: 40%; z-index: 2; pointer-events: none; }
.dz-fog i { position: absolute; left: -30%; width: 160%; height: 70%; bottom: 0; background: radial-gradient(ellipse, rgba(180, 160, 170, .18), transparent 65%); animation: dz-fog 14s ease-in-out infinite alternate; }
.dz-fog i:nth-child(2) { animation-duration: 20s; animation-delay: -6s; opacity: .7; }
.dz-embers { inset: 0; pointer-events: none; z-index: 2; }
.dz-embers i { position: absolute; bottom: 10%; width: 3px; height: 3px; background: #ffb340; box-shadow: 0 0 6px #ff8a3a; animation: dz-ember 6s ease-out infinite; }
.dz-sign.dgn { top: auto; bottom: calc(18% + 210px); background: #2a1512; border-color: #0d0a07; }

/* ─────────── strip target ─────────── */
.dz-goals { --acc: #8ac926; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dz-goals.acc-gold { --acc: #f2b23a; } .dz-goals.acc-blue { --acc: #4fa8e0; } .dz-goals.acc-red { --acc: #e05252; }
.dz-goal {
  --rc: var(--line2);
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px; background: linear-gradient(180deg, #2a2017, #1c150f);
  border: 3px solid #0d0a07; box-shadow: 0 0 0 2px var(--line), 0 4px 0 rgba(0, 0, 0, .5);
  animation: dz-in .4s ease-out both;
}
.dz-goal:nth-child(2) { animation-delay: .05s; } .dz-goal:nth-child(3) { animation-delay: .1s; } .dz-goal:nth-child(4) { animation-delay: .15s; }
.dz-goal-k { font-family: var(--font-pixel); font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dz-goal-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.dz-goal-main > div { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dz-goal-main > div:last-child { display: flex; flex-direction: column; min-width: 0; gap: 2px; }

.dz-goal-main b { font-size: 13px; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-goal-main small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.dz-goal-v { font-family: var(--font-pixel); font-size: 15px !important; line-height: 1.4; }
.dz-goal.chest .dz-goal-main > div:last-child { min-width: 0; overflow: hidden; }

.dz-goal.chest .dz-goal-v { overflow: visible; white-space: normal; }
.dz-goal.chest .dz-goal-main small { overflow: visible; white-space: normal; }
/* Utility warna emas untuk teks. Kecualikan <button>: varian .btn.gold /
   .cs-bet-btn.gold / .dz-goal-btn.gold sudah punya warna teks gelap sendiri;
   !important di sini dulu menimpanya jadi teks emas di atas latar emas. */
.gold:not(button) { color: var(--gold) !important; }
.main img.dz-goal-ic { width: 38px; height: 38px; max-width: none; max-height: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.main img.dz-goal-ic.dim { width: 26px; height: 26px; opacity: .55; }
.main img.dz-goal-ic.hero { animation: dz-float 2.4s ease-in-out infinite; }
.dz-tool-pair { display: flex; align-items: center; gap: 4px; flex: none; }
.dz-arrow { width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid var(--acc); animation: dz-nudge 1.1s ease-in-out infinite; }
.dz-goal.tool.r-uncommon { --rc: #8ac926; } .dz-goal.tool.r-rare { --rc: #4fa8e0; } .dz-goal.tool.r-epic { --rc: #b07ce0; } .dz-goal.tool.r-legendary { --rc: #f2b23a; }
.dz-goal.tool { box-shadow: 0 0 0 2px var(--rc), 0 4px 0 rgba(0, 0, 0, .5); }
.dz-goal.tool.max { --rc: #f2b23a; }
.dz-goal-foot { display: flex; align-items: center; gap: 8px; }
.dz-afford { flex: 1; height: 8px; background: #0d0a07; border: 2px solid #2a2017; overflow: hidden; }
.dz-afford i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #a97c1c, #ffd469); transition: transform .6s ease-out; }
.dz-afford.lv i { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 50%, #000), var(--acc)); }
.dz-goal-btn {
  flex: none; padding: 8px 12px; font-family: var(--font-pixel); font-size: 8px; text-transform: uppercase; white-space: nowrap;
  color: var(--head); background: linear-gradient(#4a3826, #3a2b1d); border: 2px solid #0d0a07; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 #0d0a07;
}
.dz-goal-btn.gold { color: #160f04; background: linear-gradient(#ffe08a, #c98d16); }
.dz-goal-btn.green { color: #0d1405; background: linear-gradient(#c6f26a, #5c8a1e); }
.dz-goal-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0d0a07; }
.dz-goal-btn:disabled { opacity: .5; }
.dz-goal.chest > .dz-goal-btn { align-self: stretch; }
.dz-mystery { position: relative; flex: none; }
.dz-mystery img.dz-goal-ic { filter: brightness(.25) drop-shadow(0 0 6px var(--acc)); }
.dz-lockbadge { position: absolute; right: -6px; bottom: -6px; padding: 2px; background: #0d0a07; border: 2px solid var(--acc); }
.main .dz-lockbadge img { width: 14px; height: 14px; }
.dz-goal.boost.on { box-shadow: 0 0 0 2px #7a5a1e, 0 4px 0 rgba(0, 0, 0, .5); }
.dz-boost-list { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dz-boost { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--head); }
.dz-boost span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-boost .cd { color: var(--gold); font-weight: 700; }
.main img.dz-boost-ic { width: 20px; height: 20px; }

/* ─────────── keyframes ─────────── */
@keyframes dz-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dz-beat { 50% { transform: scale(1.18); } }
@keyframes dz-shine { 0%, 50% { left: -60%; } 100% { left: 130%; } }
@keyframes dz-hot { 50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .5), 0 4px 0 #0d0a07, 0 0 22px var(--acc); transform: translateY(-2px); } }
@keyframes dz-pulse { 50% { opacity: .75; transform: scale(1.06); } }
@keyframes dz-twinkle { 50% { opacity: .2; } }
@keyframes dz-drift { from { left: -15%; } to { left: 110%; } }
@keyframes dz-birds { from { transform: translateX(-60px); } to { transform: translateX(calc(100vw)); } }
@keyframes dz-flap { 50% { border-radius: 0 0 50% 50%; transform: translateY(2px); } }
@keyframes dz-spin { to { transform: rotate(360deg); } }
@keyframes dz-plot-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes dz-ready { 50% { box-shadow: 0 0 0 2px #0d0a07, 0 0 24px rgba(242, 178, 58, 1); } }
@keyframes dz-sway { 50% { transform: rotate(-5deg); } }
@keyframes dz-bounce { 50% { transform: translateY(-5px); } }
@keyframes dz-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(45deg); } }
@keyframes dz-walk { 0% { left: 6%; transform: scaleX(1); } 48% { left: 84%; transform: scaleX(1); } 50% { left: 84%; transform: scaleX(-1); } 98% { left: 6%; transform: scaleX(-1); } 100% { left: 6%; transform: scaleX(1); } }
@keyframes dz-step { 50% { transform: translateY(-2px); } }
@keyframes dz-fly { 0%, 100% { transform: translate(0, 0); opacity: .3; } 25% { transform: translate(14px, -24px); opacity: 1; } 50% { transform: translate(-8px, -40px); opacity: .5; } 75% { transform: translate(10px, -16px); opacity: 1; } }
@keyframes dz-glint { 0%, 70%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 80% { filter: brightness(1.8) drop-shadow(0 0 6px #fff6c8); } }
@keyframes dz-swing { 50% { transform: rotate(6deg); } }
@keyframes dz-flicker { 33% { opacity: .85; } 66% { opacity: 1; } 100% { opacity: .92; } }
@keyframes dz-fall { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(340px); opacity: 0; } }
@keyframes dz-chop { 0%, 100% { transform: rotate(-30deg); } 55% { transform: rotate(50deg); } 70% { transform: rotate(40deg); } }
@keyframes dz-chip { 0%, 55% { opacity: 0; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--cx, -22px), -26px); } }
@keyframes dz-rattle { 50% { transform: translateY(-1px); } }
@keyframes dz-wave { from { transform: translateX(0); } to { transform: translateX(44px); } }
@keyframes dz-swim { from { transform: translateX(0); } to { transform: translateX(calc(100vw)); } }
@keyframes dz-line { 50% { transform: rotate(2deg) scaleY(.92); } }
@keyframes dz-bob { 50% { transform: translateY(4px) rotate(-6deg); } }
@keyframes dz-tug { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(8px) rotate(-12deg); } 75% { transform: translateY(3px) rotate(10deg); } }
@keyframes dz-ripple { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@keyframes dz-leap { 0%, 70%, 100% { opacity: 0; transform: translateY(30px) rotate(0); } 78% { opacity: 1; transform: translate(-20px, -40px) rotate(-30deg); } 88% { opacity: 1; transform: translate(-44px, 10px) rotate(40deg); } 92% { opacity: 0; } }
@keyframes dz-fire { from { transform: scaleY(1) skewX(0); } to { transform: scaleY(1.15) skewX(4deg); } }
@keyframes dz-blink { 0%, 92% { opacity: 1; } 93%, 96% { opacity: 0; } }
@keyframes dz-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes dz-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, -220px); opacity: 0; } }
@keyframes dz-float { 50% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes dz-nudge { 50% { transform: translateX(3px); } }

/* ─────────── responsif ─────────── */
@media (max-width: 1180px) {
  .dz-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .dz { height: 300px; }
  .dz-level, .dz-ring { width: 52px; height: 52px; }
  .dz-level-in b { font-size: 12px; }
  .dz-tick { padding: 4px 7px 4px 5px; gap: 5px; }
  .dz-tick img { width: 16px; height: 16px; }
  .dz-tick-v { font-size: 9px; min-width: 48px; }
  .dz-bottom { flex-wrap: wrap; gap: 6px; padding: 8px; }
  .dz-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .dz-actions .dz-cta { flex: 1; padding: 11px 10px; font-size: 10px; }
  .dz-actions .dz-stop { padding: 9px 10px; font-size: 9px; }
  .dz-gate { width: 140px; height: 160px; }
  .dz-sign.dgn { bottom: calc(18% + 168px); }
  .dz-goals { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dz-dock { width: 46%; }
  .dz-angler { left: calc(46% - 26px); }
}
@media (prefers-reduced-motion: reduce) {
  .dz *, .dz-goals * { animation: none !important; }
}

/* ─────────── FARMING datar: banner artwork + petak rapi ─────────── */
.dz.flat {
  height: auto; display: flex; flex-direction: column;
  background: var(--panel); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--bg2), var(--shadow);
  image-rendering: auto;
}
.dz.flat::after { display: none; }
.dz-banner { position: relative; height: 210px; flex: none; overflow: hidden; background: #6fa830; }
.fa-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dz-banner .dz-hud { position: absolute; inset: 12px 12px auto; z-index: 1; }
.dz.flat .dz-tick { background: rgba(18, 14, 10, .78); border-color: var(--line); box-shadow: none; }
.dz.flat .dz-tick.live { border-color: var(--line2); }
.dz.flat .dz-tick.live img { animation: none; }
.dz.flat .dz-ring-fg { filter: none; }

.dz.flat .dz-field {
  position: static; transform: none; width: auto;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  padding: 12px; background: var(--bg2);
}
.dz.flat .dz-plot {
  position: relative; aspect-ratio: auto; height: 104px; padding: 8px 6px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #2e2318 0%, #3a2a1a 62%, #4a3420 100%);
  border: 2px solid var(--line); box-shadow: none; animation: none;
  color: var(--text); cursor: default; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.dz.flat .dz-plot::before { /* garis bedengan tanah */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px);
  pointer-events: none;
}
.dz.flat .dz-plot.empty { background: transparent; border-style: dashed; opacity: .5; }
.dz.flat .dz-plot.empty::before { display: none; }
.dz.flat .dz-plot.ready { cursor: pointer; border-color: #8a6a2a; box-shadow: inset 0 0 0 1px rgba(242, 178, 58, .35); }
.dz.flat .dz-plot.ready:hover { transform: translateY(-2px); border-color: var(--gold); }
.dz.flat .dz-crop { position: relative; z-index: 1; left: auto; bottom: auto; transform: none; flex: 1; display: grid; place-items: center; }
.main .dz.flat img.dz-crop-img { width: 44px; height: 44px; max-width: none; max-height: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); animation: none; transition: transform .4s ease; }
.dz.flat .dz-plot.s1 .dz-crop-img { transform: scale(.62); opacity: .85; }
.dz.flat .dz-plot.s2 .dz-crop-img { transform: scale(.82); }
.dz.flat .dz-plot.ready .dz-crop-img { animation: dz-sway 3.2s ease-in-out infinite; transform-origin: bottom center; }
.dz.flat .dz-sprout { width: 6px; height: 12px; border-radius: 3px 3px 0 0; background: #8ac926; clip-path: none; animation: none; box-shadow: -5px 4px 0 -1px #6fa01f, 5px 4px 0 -1px #6fa01f; }
.dz.flat .dz-plot-foot { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 11px; color: var(--muted); }
.dz.flat .dz-qty { position: static; transform: none; padding: 0; background: none; border: 0; font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--head); }
.dz.flat .dz-plot .cd { font-variant-numeric: tabular-nums; }
.dz-plot-ok { color: var(--gold); font-weight: 700; }
.dz.flat .dz-grow { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .35); box-shadow: none; transform: none; }
.dz.flat .dz-grow i { display: block; height: 100%; background: var(--green); transform-origin: left; }
.dz.flat .dz-plot.ready .dz-grow i { background: var(--gold); }

.dz.flat .dz-bottom { position: static; background: var(--panel); border-top: 2px solid var(--line); padding: 10px 12px; }
.dz.flat .dz-stop { border-width: 2px; box-shadow: 0 3px 0 #1c1410; padding: 9px 12px; }
.dz.flat .dz-status b { font-family: var(--font-body); font-size: 13px; text-shadow: none; color: var(--head); }
.dz.flat .dz-status small { color: var(--muted); }
.dz.flat .dz-cta { padding: 9px 16px; font-size: 9px; border: 2px solid #d8a83a; box-shadow: 0 3px 0 #1c1410; color: #1d1503; background: linear-gradient(#a97c1c, #7d5a12); }
.dz.flat .dz-cta.green { background: linear-gradient(#6f9c22, #4e7417); border-color: #93c240; color: #10160a; }
.dz.flat .dz-cta::after { display: none; }
.dz.flat .dz-cta.hot { animation: none; box-shadow: 0 3px 0 #1c1410, 0 0 0 2px rgba(147, 194, 64, .35); }
.dz.flat .dz-toggle { background: var(--panel2); border-color: var(--line2); }
@media (max-width: 860px) {
  .dz-banner { height: 150px; }
  .dz.flat .dz-field { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .dz.flat .dz-plot { height: 88px; padding: 6px 4px 8px; }
  .main .dz.flat img.dz-crop-img { width: 34px; height: 34px; }
  .dz.flat .dz-plot-foot { flex-direction: column; align-items: center; gap: 0; font-size: 10px; }
}

/* ─────────── kartu target: gaya kartu standar app (tenang) ─────────── */
.dz-goals .dz-goal {
  padding: 10px; gap: 8px;
  background: var(--panel2); border: 2px solid var(--line);
  box-shadow: var(--shadow); animation: none;
}
.dz-goals .dz-goal.tool, .dz-goals .dz-goal.chest.full, .dz-goals .dz-goal.boost.on { box-shadow: var(--shadow); }
.dz-goals .dz-goal.tool { border-left: 3px solid var(--rc); }
.dz-goal-k { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.dz-goal-v { font-family: var(--font-body); font-size: 16px !important; font-weight: 700; }
.main img.dz-goal-ic { width: 32px; height: 32px; filter: none; }
.main img.dz-goal-ic.hero { animation: none; }
.dz-arrow { border-left-color: var(--line2); animation: none; }
.dz-afford, .dz-afford.lv { height: 6px; background: var(--bg2); border: 1px solid var(--line); }
.dz-afford i { background: var(--gold); }
.dz-afford.lv i { background: var(--acc); }
.dz-goal-btn { font-family: var(--font-pixel); font-size: 8px; background: linear-gradient(#4a3826, #3a2b1d); border: 2px solid var(--line2); box-shadow: 0 3px 0 #1c1410; }
.dz-goal-btn.gold { background: linear-gradient(#a97c1c, #7d5a12); border-color: #d8a83a; color: #1d1503; }
.dz-goal-btn.green { background: linear-gradient(#6f9c22, #4e7417); border-color: #93c240; color: #10160a; }
/* Peti: ikon tenang, tanpa tutup terbuka & cahaya */
.dz-goal.chest .dz-goal-main::before {
  content: ''; flex: none; width: 32px; height: 32px;
  background: url('/files/ui/backpack.png') center / contain no-repeat; image-rendering: pixelated;
}
.dz-mystery img.dz-goal-ic { filter: grayscale(1) brightness(.45); }
.dz-lockbadge { border-color: var(--line2); background: var(--panel); }

/* ─────────── Farming: ilustrasi SVG buatan sendiri + bedengan ─────────── */
.fa-art .fa-cloud { animation: fa-drift linear infinite; }
.fa-art .fa-cloud.c1 { animation-duration: 90s; }
.fa-art .fa-cloud.c2 { animation-duration: 130s; animation-delay: -50s; }
.fa-art .fa-cloud.c3 { animation-duration: 110s; animation-delay: -80s; }
.fa-art .fa-blades { animation: fa-spin 9s linear infinite; }
.fa-art .fa-star { animation: fa-twinkle 3s ease-in-out infinite; }
.fa-art .fa-lit { filter: drop-shadow(0 0 6px #ffd36a); }
.fa-art .fa-birds { animation: fa-birds 40s linear infinite; }
@keyframes fa-drift { from { transform: translateX(-180px); } to { transform: translateX(900px); } }
@keyframes fa-spin { to { transform: rotate(360deg); } }
@keyframes fa-twinkle { 50% { opacity: .25; } }
@keyframes fa-birds { from { transform: translateX(-360px); } to { transform: translateX(600px); } }

/* Ladang = tanah di bawah pagar; tiap petak bedengan berbingkai kayu. */
.dz-farm.flat .dz-field {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #5a3d22 0%, #4a3018 100%);
  border-top: 4px solid #3a2414;
  padding: 14px 14px 12px; gap: 10px;
}
.ph-night.dz-farm.flat .dz-field { background: linear-gradient(180deg, #2e2014 0%, #24180e 100%); }
.dz-farm.flat .dz-plot {
  height: 108px; padding: 10px 6px 12px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 9px) 0 58% / 100% 42% no-repeat,
    linear-gradient(180deg, #7a5230 0%, #6b4628 100%);
  border: 3px solid #8a6440;
  box-shadow: inset 0 0 0 2px #5a3a22, 0 3px 0 #2a1a0e;
}
.dz-farm.flat .dz-plot::before { display: none; }
.dz-farm.flat .dz-plot.empty { background: rgba(0, 0, 0, .14); border: 3px dashed rgba(138, 100, 64, .55); box-shadow: none; opacity: 1; }
.dz-farm.flat .dz-plot.ready { border-color: #d8a83a; box-shadow: inset 0 0 0 2px #7a5212, 0 3px 0 #2a1a0e, 0 0 0 2px rgba(242, 178, 58, .25); }
.dz-farm.flat .dz-plot-foot { color: #e9dcc0; }
.dz-farm.flat .dz-qty { color: #fff; text-shadow: 1px 1px 0 #2a1a0e; }
.dz-farm.flat .dz-plot .cd { color: #e9dcc0; text-shadow: 1px 1px 0 #2a1a0e; }
.dz-farm.flat .dz-plot-ok { color: #ffd469; text-shadow: 1px 1px 0 #2a1a0e; }
.dz-farm.flat .dz-grow { left: 3px; right: 3px; bottom: 3px; height: 3px; background: rgba(0, 0, 0, .4); }
.dz-farm.flat .dz-sprout { box-shadow: -5px 4px 0 -1px #6fa01f, 5px 4px 0 -1px #6fa01f, 0 2px 0 0 #3a2414; }
.dz-farm.flat .dz-bottom { border-top: 2px solid #2a1a0e; }
@media (prefers-reduced-motion: reduce) { .fa-art * { animation: none !important; } }
@media (max-width: 860px) {
  .dz-farm.flat .dz-field { padding: 10px 8px; gap: 6px; }
  .dz-farm.flat .dz-plot { height: 86px; padding: 6px 3px 9px; border-width: 2px; }
}