/*
 * 1 · Toy-box Drawer: a chunky wooden toy box. Wood frame with brass screws, a brass name plate,
 * drawer-pull tabs (the open drawer shows its felt), felt-lined cubbies for items and slots, brass
 * price plates, and a cream "lid" card for the selected item with a chunky toy button.
 */
.m--drawer {
  --wood-l: #D49455; --wood: #B87436; --wood-d: #8C5326; --wood-dd: #5E3415;
  --felt: #A3302A; --felt-d: #6F1F1A; --navy-felt: #2F4058; --navy-felt-d: #1E2A3B;
  --brass-l: #FFE08A; --brass: #F2C14E; --brass-d: #B8862C; --cream: #FFF4DF;
  --ink: #3A2412; --short: #8E1B12; --focus: #FFF4DF;
  padding: 26px; border-radius: 26px;
  background:
    repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px, rgba(60, 25, 5, 0.07) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, var(--wood-l), var(--wood) 38%, var(--wood-d));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -7px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 3px rgba(60, 25, 5, 0.25), 0 18px 34px rgba(80, 40, 10, 0.28);
}
/* brass screws in the corners */
.m--drawer .m-screws i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF6D2, var(--brass) 45%, var(--brass-d)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); }
.m--drawer .m-screws i::after { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; border-radius: 1px; background: rgba(90, 60, 10, 0.65); transform: rotate(35deg); }
.m--drawer .m-screws i:nth-child(1) { left: 8px; top: 8px; }
.m--drawer .m-screws i:nth-child(2) { right: 8px; top: 8px; }
.m--drawer .m-screws i:nth-child(3) { left: 8px; bottom: 8px; }
.m--drawer .m-screws i:nth-child(4) { right: 8px; bottom: 8px; }

/* brass name plate */
.m--drawer .m__titlebox {
  padding: 10px 22px 9px; border-radius: 12px; color: #5A3410; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, var(--brass-l), var(--brass) 48%, var(--brass-d));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 4px 0 rgba(60, 30, 5, 0.45), 0 7px 10px rgba(0, 0, 0, 0.2);
}
.m--drawer .m__titlebox::before, .m--drawer .m__titlebox::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brass-d); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.m--drawer .m__titlebox::before { left: 7px; }
.m--drawer .m__titlebox::after { right: 7px; }
.m--drawer .m__title { font-size: clamp(22px, 3vw, 32px); }
.m--drawer .m__sub { color: #7A4A14; opacity: 1; }

/* Pip on a cream speech card */
.m--drawer .m__keeper { background: var(--cream); box-shadow: 0 3px 0 rgba(60, 30, 5, 0.35); }
.m--drawer .m__keeper::before { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right: 9px solid var(--cream); }
.m--drawer .m__who { color: #A3302A; }

/* wallet tokens set into the wood */
.m--drawer .m-coin { color: var(--cream); background: linear-gradient(180deg, #4E2A10, #6E3D1A); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25); }
.m--drawer .m-coin.is-full b { color: #FFB3A6; }

/* drawer pulls: the open drawer drops down and shows its felt */
.m--drawer .m__tabs { gap: 10px; }
.m--drawer .m-tab {
  padding: 8px 16px 14px 10px; border-radius: 10px 10px 6px 6px; color: #4A2A10;
  background: linear-gradient(180deg, #E8B072, #C98B55);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #7A4520, 0 6px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.m--drawer .m-tab::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 34px; height: 5px; margin-left: -17px; border-radius: 3px; background: linear-gradient(180deg, var(--brass-l), var(--brass-d)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.m--drawer .m-tab:hover:not([aria-selected='true']) { transform: translateY(-2px); }
.m--drawer .m-tab[aria-selected='true'] {
  transform: translateY(4px); color: var(--cream);
  background: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(180deg, var(--felt), var(--felt-d));
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--brass), 0 0 14px rgba(252, 170, 26, 0.35);
}

/* felt lining and cubbies */
.m--drawer .m__list {
  --cell: 136px; --gap: 12px; padding: 14px; border-radius: 16px;
  background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 5px 5px, radial-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1.5px) 2px 3px / 6px 6px, linear-gradient(180deg, var(--felt), var(--felt-d));
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 4px rgba(60, 20, 10, 0.35), 0 2px 0 rgba(255, 255, 255, 0.3);
}
.m--drawer .m-opt {
  padding: 14px 8px 12px; border-radius: 14px; color: var(--cream);
  background: radial-gradient(120% 90% at 50% 25%, rgba(255, 255, 255, 0.09), transparent 60%), rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 5px 9px rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
.m--drawer .m-opt__art { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.45)); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.m--drawer .m-opt:hover .m-opt__art { transform: translateY(-3px) rotate(-4deg); }
.m--drawer .m-opt__desc { color: #FFE3D6; }
.m--drawer .m-opt__price { padding: 4px 9px; border-radius: 6px; color: #4A2A10; background: linear-gradient(180deg, var(--brass-l), var(--brass) 50%, var(--brass-d)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.m--drawer .m-opt.is-short .m-opt__price { color: var(--short); text-decoration: line-through 2px; }
.m--drawer .m-opt__tag { left: 50%; top: -1px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: var(--brass); color: #5A3410; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.m--drawer .m-opt__rarity { padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.m--drawer .m-opt.is-sel {
  background: radial-gradient(120% 90% at 50% 25%, rgba(255, 230, 160, 0.22), transparent 65%), rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--brass), 0 0 24px rgba(252, 170, 26, 0.55);
}
.m--drawer .m-opt.is-sel::before { content: ''; position: absolute; inset: 6px; border: 2px dashed rgba(255, 232, 170, 0.8); border-radius: 10px; pointer-events: none; }
.m--drawer .m-opt.is-sel .m-opt__art { transform: translateY(-5px) scale(1.07); }

/* the lid: a cream card in a dark wood frame */
.m--drawer .m-detail {
  border-radius: 18px; background: linear-gradient(180deg, #FFF8EA, #F4E2C0);
  box-shadow: 0 0 0 6px var(--wood-dd), 0 0 0 8px rgba(255, 255, 255, 0.22), 0 12px 22px rgba(0, 0, 0, 0.32);
}
.m--drawer .m-detail__stage {
  border-radius: 14px;
  background: radial-gradient(ellipse 44% 16% at 50% 84%, rgba(111, 31, 26, 0.95), rgba(111, 31, 26, 0) 100%), radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(180deg, var(--felt), var(--felt-d));
  box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.45);
}
.m--drawer .m-detail__art { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.4)); }
.m--drawer .m-detail__tag { background: var(--brass); color: #5A3410; }
.m--drawer .m-detail__name { color: #6B2A12; }
.m--drawer .m-detail__stats div { background: rgba(184, 116, 54, 0.15); box-shadow: inset 0 0 0 1px rgba(140, 83, 38, 0.2); }
.m--drawer .m-step { background: #EBD3A6; box-shadow: inset 0 2px 4px rgba(90, 50, 10, 0.3); }
.m--drawer .m-buy {
  border-radius: 16px; background: linear-gradient(180deg, #FF8A4C, #E14826 55%, #C2381C); text-shadow: 0 2px 0 rgba(120, 30, 10, 0.5);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 6px 0 #8E2A14, 0 10px 14px rgba(0, 0, 0, 0.25); transition: transform 0.1s, box-shadow 0.1s;
}
.m--drawer .m-buy:active:not([aria-disabled='true']) { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 1px 0 #8E2A14; }
.m--drawer .m-buy:focus-visible, .m--drawer .m-detail button:focus-visible { outline-color: #263445; }
.m--drawer .m-ghost { color: #7A4520; }

/* text that sits straight on the wood */
.m--drawer .m-cap, .m--drawer .m__hint { color: var(--cream); text-shadow: 0 1px 2px rgba(60, 25, 5, 0.6); }
.m--drawer .m-project { background: var(--cream); box-shadow: 0 3px 0 rgba(60, 30, 5, 0.35); }

/* backpack: navy felt slots */
.m--drawer.m-inv .m__list {
  --slot: 70px;
  background: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(180deg, var(--navy-felt), var(--navy-felt-d));
}
.m--drawer .m-slot { border-radius: 12px; background: rgba(0, 0, 0, 0.18); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 255, 255, 0.06); color: var(--cream); }
.m--drawer .m-slot .fz-icon { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.45)); }
.m--drawer .m-slot.is-empty { background: rgba(0, 0, 0, 0.08); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4); }
.m--drawer .m-slot__qty { right: 3px; bottom: 3px; padding: 2px 5px; border-radius: 999px; color: #4A2A10; background: linear-gradient(180deg, var(--brass-l), var(--brass-d)); font-size: 11px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.m--drawer .m-slot.is-sel { box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--brass), 0 0 18px rgba(252, 170, 26, 0.5); }
.m--drawer .m-cap__bar { background: var(--wood-dd); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55); }
.m--drawer .m-cap__bar i { background: linear-gradient(180deg, var(--brass-l), var(--brass-d)); }
.m--drawer .m-cap__bar.is-full i { background: linear-gradient(180deg, #FF8A4C, #C2381C); }

@media (max-width: 640px) {
  .m--drawer { padding: 18px 14px; border-radius: 20px; }
  .m--drawer .m__list { --cell: 100px; padding: 10px; }
  .m--drawer.m-inv .m__list { --slot: 54px; }
  .m--drawer .m__keeper::before { display: none; }
}