/**
 * wood.css — DeayanXtra Nature Assets · "Workshop" skin
 * =============================================================================
 * Load AFTER theme.css (and shell.css on the pack page). theme.css keeps all layout;
 * this file swaps every metal token for oak / walnut / pine and re-carves the parts:
 *   sliders  → carved channel + dowel peg      buttons → chunky blocks that press down
 *   panels   → warm grain                       corners → creeping moss + carved leaves
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&display=swap');

:root {
  --grain-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='260'><filter id='w' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.25  0 0 0 0 0.09  0 0 0 1.5 -0.5'/></filter><rect width='100%25' height='100%25' filter='url(%23w)' opacity='0.55'/></svg>");
  --grain-d: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='260'><filter id='w' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.005 0.12' numOctaves='4' seed='19'/><feColorMatrix values='0 0 0 0 0.03  0 0 0 0 0.015  0 0 0 0 0.005  0 0 0 1.7 -0.45'/></filter><rect width='100%25' height='100%25' filter='url(%23w)' opacity='0.7'/></svg>");
  --moss: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='170'><filter id='m' x='-20%25' y='-20%25' width='140%25' height='140%25'><feTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='3' seed='4'/><feDisplacementMap in='SourceGraphic' scale='34'/></filter><g filter='url(%23m)'><circle cx='30' cy='30' r='58' fill='%23486b2a'/><circle cx='70' cy='20' r='30' fill='%23628a35'/><circle cx='22' cy='84' r='30' fill='%23557a2f'/><circle cx='52' cy='48' r='26' fill='%2378a044'/><circle cx='104' cy='12' r='14' fill='%2391b955'/><circle cx='12' cy='118' r='12' fill='%2378a044'/></g></svg>");
  --leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 3C9 3 4 9 4 15c0 1.5.4 2.700 1 3.600C3.800 20 3 21 3 21l1.500 1c.4-.6 1.200-1.500 2.300-2.200C8 20.600 9.500 21 11 21c6 0 10-6 9-18zM8 16c3-4 6-6 10-8-3 3-6 5-8.500 9z' fill='black'/></svg>");

  --bg: #1b120b; --bg-2: #24170e;
  --dot: rgba(255, 214, 160, 0.055); --dot-strong: rgba(255, 214, 160, 0.14);
  --ink: #2a190b; --ink-2: #5b3c20; --ink-3: #8b6a43;
  --paper: #f4e7cf; --paper-dim: #c4a67b;
  --line-dark: rgba(255, 210, 150, 0.14);

  --metal-light: var(--grain-l), linear-gradient(180deg, #ecca94 0%, #d9ac6b 55%, #c99757 100%);
  --metal-dark:  var(--grain-d), linear-gradient(180deg, #7a4d28 0%, #5b3819 60%, #4a2c12 100%);
  --plate: linear-gradient(180deg, #e4c391 0%, #d8b27a 48%, #cda06a 100%);
  --brush: var(--grain-l);
  --edge-hi: rgba(255, 240, 205, 0.85); --edge-lo: rgba(60, 30, 5, 0.45);
  --film: linear-gradient(transparent, transparent);
  --groove: linear-gradient(180deg, #1a0f06 0%, #2c1a0b 65%, #3f2711 100%);
  --groove-lit: linear-gradient(180deg, #4d7429 0%, #86ad4c 100%);
  --shadow-card: 0 1px 0 rgba(255,238,200,0.65) inset, 0 -2px 0 rgba(80,45,10,0.25) inset,
                 0 0 0 1px #3a2210, 0 14px 26px -12px rgba(0,0,0,0.75);
  --font-title: 'Fraunces', 'Poppins', Georgia, serif;
}

::selection { background: #9cc45a; color: #1b120b; }
body { background: var(--grain-d), radial-gradient(ellipse at 50% 30%, #33200f 0%, #1b120b 75%); }

/* ═════════ plank header ═════════ */
#dx-top, #dx-header {
  background: var(--grain-d), linear-gradient(180deg, #4a2d15 0%, #382110 100%) !important;
  border-bottom: 2px solid #1a0f06 !important;
  box-shadow: 0 1px 0 rgba(255,214,160,0.18) inset, 0 6px 18px -6px #000;
  backdrop-filter: none !important;
}
#dx-top::after, #dx-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent); pointer-events: none; }
.dx-crumb strong, #dx-title { font-family: var(--font-title); letter-spacing: 0.01em; }
.dx-crumb strong { color: #f8ebd0; text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,220,170,0.15); }
#dx-title { background-image: linear-gradient(180deg, #fff0d0 0%, #e8c689 45%, #b98a4b 55%, #f0d39a 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.dx-brand-deayan { color: #2a190b; } .dx-brand-xtra { color: #7b5630; }

/* ═════════ cards & panels: warm grain + carved bevel ═════════ */
.dx-card { border-radius: 14px; background: var(--brush), var(--plate); }
.dx-card::before { display: none; }
.dx-card::after { box-shadow: 0 0 0 1px rgba(255,240,205,0.4) inset, 0 0 0 2px rgba(90,50,15,0.18) inset; }
#dx-panel { background: var(--grain-d), linear-gradient(180deg, #3b2412, #2b190b); box-shadow: 4px 0 14px -4px #000 inset, 1px 0 0 rgba(255,214,160,0.16) inset; }
#dx-stage { position: relative; }
#dx-view { box-shadow: 0 0 0 5px #6d4526, 0 0 0 6px #241408, 0 0 0 7px rgba(255,214,160,0.22), 0 24px 60px -20px #000 inset; }
#dx-backdrop.grid { background-color: #0d0a06; background-image: radial-gradient(circle at 1px 1px, rgba(255,214,160,0.12) 1.1px, transparent 1.6px), radial-gradient(ellipse at 50% 40%, #1c1a0c 0%, #0a0805 80%); background-size: 22px 22px, 100% 100%; }

/* carved leaf on every section title */
.dx-sec-head h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 800; color: var(--ink); }
.dx-sec-head h3::before { content: ''; width: 14px; height: 14px; background: #6a8a3a; -webkit-mask: var(--leaf) center/contain no-repeat; mask: var(--leaf) center/contain no-repeat; filter: drop-shadow(0 1px 0 rgba(255,240,205,0.7)); }
.dx-ctl + .dx-ctl { border-top: 1px dashed rgba(90,50,15,0.22); }
.dx-val { background: rgba(60,30,5,0.12); box-shadow: 0 1px 2px rgba(60,30,5,0.35) inset, 0 1px 0 rgba(255,240,205,0.5); }
.dx-val:focus { background: #fff6e2; box-shadow: 0 0 0 1.5px #6a8a3a inset; }

/* ═════════ buttons: chunky blocks that press down ═════════ */
.dx-btn { border-radius: 10px; margin-bottom: 3px; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255,240,205,0.55);
  box-shadow: 0 1px 0 var(--edge-hi) inset, 0 -2px 3px rgba(120,70,20,0.35) inset, 0 0 0 1px #4a2a10, 0 3px 0 #6a4220, 0 5px 0 #2b170a, 0 9px 12px -2px rgba(0,0,0,0.6);
  transition: transform 0.09s ease-out, box-shadow 0.09s ease-out, filter 0.15s; }
.dx-btn::after { display: none; }
.dx-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.dx-btn:active { transform: translateY(3px); filter: brightness(0.94);
  box-shadow: 0 1px 0 rgba(255,240,205,0.5) inset, 0 2px 4px rgba(80,40,10,0.4) inset, 0 0 0 1px #4a2a10, 0 0 0 #6a4220, 0 2px 0 #2b170a, 0 2px 4px -1px rgba(0,0,0,0.6); }
.dx-btn.dark { color: #f6e6c6; text-shadow: 0 -1px 0 rgba(0,0,0,0.6); box-shadow: 0 1px 0 rgba(255,214,160,0.35) inset, 0 0 0 1px #1a0d04, 0 3px 0 #3a2210, 0 5px 0 #150a03, 0 9px 12px -2px rgba(0,0,0,0.6); }
.dx-btn.ghost { background: rgba(255,214,160,0.06); color: var(--paper); text-shadow: none; box-shadow: 0 0 0 1px var(--line-dark) inset, 0 2px 0 rgba(0,0,0,0.4); }
.dx-btn.ghost:hover { background: rgba(255,214,160,0.13); }
.dx-btn.hero { background: var(--grain-l), linear-gradient(180deg, #a9cf6a, #6f9a3c); color: #1c2a0a; box-shadow: 0 1px 0 rgba(235,255,190,0.8) inset, 0 0 0 1px #2c4512, 0 3px 0 #3f6320, 0 5px 0 #1a290a, 0 9px 12px -2px rgba(0,0,0,0.6); }
.dx-chip, .dx-index-chip { border-radius: 9px; background: rgba(255,214,160,0.07); color: var(--paper); box-shadow: 0 0 0 1px var(--line-dark) inset, 0 2px 0 rgba(0,0,0,0.45); }
.dx-chip:hover, .dx-index-chip:hover { background: rgba(255,214,160,0.15); }
.dx-chip.on, .dx-index-chip.on { background: var(--metal-light); color: var(--ink); box-shadow: 0 1px 0 var(--edge-hi) inset, 0 0 0 1px #3a2210, 0 3px 0 #6a4220; transform: translateY(1px); }

/* ═════════ sliders: carved channel + wooden peg ═════════ */
.dx-groove { height: 9px; margin-top: -4.5px; border-radius: 99px; background: var(--groove);
  box-shadow: 0 2px 3px rgba(0,0,0,0.85) inset, 0 -1px 0 rgba(255,214,160,0.06) inset, 0 1px 0 rgba(255,240,205,0.6); }
.dx-fill { height: 5px; margin-top: -2.5px; background: linear-gradient(180deg, #a8cf68, #5f8a34); box-shadow: 0 0 5px rgba(150,200,80,0.35); }
.dx-thumb { width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px;
  background: radial-gradient(circle at 34% 28%, #f6d9a2 0%, #d9a865 46%, #a97238 100%);
  box-shadow: 0 1px 0 rgba(255,244,215,0.95) inset, 0 -2px 3px rgba(90,50,15,0.5) inset, 0 0 0 1px #4a2a10, 0 4px 0 #6a4220, 0 6px 7px -1px rgba(0,0,0,0.65);
  transition: transform 0.12s var(--ease), box-shadow 0.12s; }
.dx-thumb::before { inset: 3px; background: repeating-radial-gradient(circle at 46% 44%, rgba(90,50,15,0.34) 0 0.8px, rgba(255,255,255,0) 0.8px 2.4px); box-shadow: 0 0 0 1px rgba(90,50,15,0.25) inset; }
.dx-thumb::after { display: none; }
.dx-track:hover .dx-thumb { transform: translateY(-1px) scale(1.04); }
.dx-track.active .dx-thumb { transform: translateY(3px) scale(1.06);
  box-shadow: 0 1px 0 rgba(255,244,215,0.9) inset, 0 -2px 3px rgba(90,50,15,0.5) inset, 0 0 0 1px #2b170a, 0 1px 0 #6a4220, 0 2px 4px -1px rgba(0,0,0,0.7); }
.dx-track:focus-visible .dx-thumb { outline: 2px solid #86ad4c; outline-offset: 2px; }
.dx-switch { background: var(--groove); box-shadow: 0 2px 3px rgba(0,0,0,0.85) inset, 0 1px 0 rgba(255,240,205,0.6); }
.dx-switch[aria-checked="true"] { background: var(--groove-lit); box-shadow: 0 2px 3px rgba(20,40,5,0.6) inset, 0 1px 0 rgba(255,240,205,0.6); }
.dx-seg, .dx-num, .dx-bar { background: var(--groove); box-shadow: 0 2px 3px rgba(0,0,0,0.85) inset, 0 1px 0 rgba(255,240,205,0.55); }
.dx-seg button { color: #d9bd90; } .dx-seg button[aria-checked="true"] { color: var(--ink); }
.dx-seg .dx-seg-thumb { border-radius: 99px; box-shadow: 0 1px 0 var(--edge-hi) inset, 0 0 0 1px #3a2210, 0 2px 0 #6a4220; }
.dx-select { background: var(--metal-dark); color: #f6e6c6; border-radius: 9px; box-shadow: 0 1px 0 rgba(255,214,160,0.3) inset, 0 0 0 1px #1a0d04, 0 3px 0 #2b170a; }
.dx-pop { background: var(--grain-l), var(--plate); border: 1px solid #3a2210; box-shadow: 0 14px 30px -6px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,240,205,0.4) inset; }
.dx-pop .opt:hover, .dx-pop .opt.focus { background: rgba(90,50,15,0.16); }
.dx-bar i { background: linear-gradient(180deg, #a8cf68, #5f8a34); }
.dx-hex { box-shadow: 0 2px 3px rgba(0,0,0,0.85) inset; }
.dx-swatch { border-radius: 50%; box-shadow: 0 1px 0 var(--edge-hi) inset, 0 0 0 1px #3a2210, 0 3px 0 #6a4220, 0 5px 6px -1px rgba(0,0,0,0.5); }
.dx-ramp-bar { box-shadow: 0 0 0 2px #3a2210, 0 2px 0 2px #6a4220, 0 3px 6px rgba(0,0,0,0.5); }
#dx-scrub .dx-groove { background: var(--groove); }
.dx-toast { border-radius: 12px; box-shadow: 0 0 0 1px #3a2210, 0 4px 0 #6a4220, 0 12px 20px -6px #000; }
.dx-loopchip.ok i { background: #b5e06a; box-shadow: 0 0 0 1px #2c4512, 0 0 8px rgba(160,220,90,0.9); }
.dx-scroll { scrollbar-color: rgba(230,190,130,0.35) transparent; }
.dx-scroll::-webkit-scrollbar-thumb { background: rgba(230,190,130,0.3); }

/* pack shell */
.dx-arc-card { border-radius: 18px; }
.dx-tile { box-shadow: 0 0 0 3px #4a2c14, 0 0 0 4px #150a03, 0 2px 8px rgba(0,0,0,0.6) inset; background: #0d0a06; }
.dx-badge { border-radius: 8px; }
.dx-brand-watermark { color: rgba(140, 190, 80, 0.05) !important; }


/* ═════════ moss — only in empty corners, never over a control ═════════ */
#dx-view { position: relative; }
#dx-view::after { content: ''; position: absolute; right: -8px; bottom: -8px; width: 150px; height: 118px; pointer-events: none; z-index: 3;
  background: var(--moss) no-repeat; background-size: contain; transform: scale(-1, -1); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5)); }
body.dx-shell::before { content: ''; position: fixed; z-index: 1; pointer-events: none; left: 0; bottom: 0; width: 220px; height: 170px; background: var(--moss) no-repeat; background-size: contain; transform: scaleY(-1); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
body.dx-shell::after { content: ''; position: fixed; z-index: 1; pointer-events: none; right: 0; bottom: 0; width: 240px; height: 185px; background: var(--moss) no-repeat; background-size: contain; transform: rotate(180deg); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }
body.in-effect.dx-shell::before, body.in-effect.dx-shell::after { display: none; }

/* ═════════ sound control (next to Undo / Redo) ═════════ */
.dx-sfx { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 0 12px 0 6px; height: 36px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.12)); box-shadow: 0 2px 4px rgba(0,0,0,0.6) inset, 0 1px 0 rgba(255,214,160,0.16); }
.dx-sfx .dx-sfx-btn { margin: 0; }
.dx-sfx .dx-sfx-btn svg { width: 16px; height: 16px; }
.dx-sfx.muted .dx-sfx-btn { opacity: 0.6; }
.dx-sfx-track { position: relative; width: 78px; height: 26px; cursor: pointer; touch-action: none; outline: 0; }
.dx-sfx-track .dx-groove { position: absolute; left: 0; right: 0; top: 50%; }
.dx-sfx-track .dx-fill { position: absolute; left: 0; top: 50%; width: 50%; border-radius: 99px; }
.dx-sfx-track .dx-thumb { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.dx-sfx-track:hover .dx-thumb { transform: translateY(-1px) scale(1.04); }
.dx-sfx-track.active .dx-thumb { transform: translateY(2px) scale(1.06); }
.dx-sfx-track:focus-visible .dx-thumb { outline: 2px solid #86ad4c; outline-offset: 2px; }
body.in-effect .dx-h-right .dx-sfx { display: none; }
@media (max-width: 1100px) { .dx-sfx-track { width: 52px; } }