/*
 * 5 · Diorama Shelf: the Verse's own HD-2D look. A warm room with out-of-focus lights and a
 * tilt-shift vignette, items standing on lit wooden shelves (the price is printed on the plank),
 * a spotlight on the one you pick, and a museum card under a turntable for its details. The
 * backpack is a cubby shelf with a warm light in the selected cubby.
 */
.m--shelf {
  --room: #2A1C19; --room-l: #3A2620; --plank-top: #E0A469; --plank: #A9652F; --plank-d: #8A5326; --card: #FFF6E6; --warm: rgba(255, 214, 140, 0.55);
  --ink: #FFF1DC; --short: #FFB3A6; --focus: #FCAA1A;
  padding: 26px; border-radius: 24px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(252, 170, 26, 0.22), transparent 60%), linear-gradient(180deg, var(--room-l), var(--room) 60%, #1E1513);
  box-shadow: 0 18px 34px rgba(30, 15, 10, 0.35), inset 0 0 0 2px rgba(255, 220, 170, 0.08);
}
/* bokeh lights and the tilt-shift vignette */
.m--shelf .m-bokeh i { position: absolute; width: var(--s, 80px); height: var(--s, 80px); border-radius: 50%; background: radial-gradient(circle, var(--c, var(--warm)), transparent 70%); animation: m-drift 9s ease-in-out infinite alternate; }
.m--shelf .m-bokeh i:nth-child(1) { left: 4%; top: 6%; --s: 90px; }
.m--shelf .m-bokeh i:nth-child(2) { left: 24%; top: 32%; --s: 46px; --c: rgba(225, 72, 38, 0.4); animation-delay: -2s; }
.m--shelf .m-bokeh i:nth-child(3) { left: 68%; top: 2%; --s: 130px; animation-delay: -4s; }
.m--shelf .m-bokeh i:nth-child(4) { left: 88%; top: 38%; --s: 70px; --c: rgba(252, 170, 26, 0.45); }
.m--shelf .m-bokeh i:nth-child(5) { left: 44%; top: 10%; --s: 40px; animation-delay: -6s; }
.m--shelf .m-bokeh i:nth-child(6) { left: 10%; top: 68%; --s: 120px; --c: rgba(225, 72, 38, 0.3); animation-delay: -3s; }
.m--shelf .m-bokeh i:nth-child(7) { left: 58%; top: 76%; --s: 84px; animation-delay: -5s; }
.m--shelf .m-bokeh i:nth-child(8) { left: 82%; top: 86%; --s: 60px; --c: rgba(252, 170, 26, 0.4); }
.m--shelf .m-bokeh i:nth-child(9) { left: 34%; top: 54%; --s: 34px; animation-delay: -1s; }
@keyframes m-drift { to { transform: translate(12px, -10px) scale(1.1); } }
.m--shelf .m__deco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 10, 0.5), transparent 16%, transparent 84%, rgba(20, 12, 10, 0.55)); }

/* lit plaque */
.m--shelf .m__titlebox { padding: 9px 20px; border-radius: 10px; background: linear-gradient(180deg, #4A2E22, #3A2219); box-shadow: inset 0 0 0 2px #C08A2E, 0 0 0 4px var(--room), 0 8px 18px rgba(0, 0, 0, 0.45), 0 -14px 30px rgba(252, 170, 26, 0.18); }
.m--shelf .m__title { color: #FFE7A8; text-shadow: 0 0 18px rgba(252, 170, 26, 0.6), 0 2px 0 rgba(0, 0, 0, 0.45); }
.m--shelf .m__sub { color: #E9C58F; }
.m--shelf .m__keeper { background: rgba(255, 241, 220, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.2); font-style: italic; }
.m--shelf .m__who { color: #FCAA1A; font-style: normal; }
.m--shelf .m-coin { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.25); }

/* cream labels held up with tape */
.m--shelf .m__tabs { gap: 12px; padding-top: 6px; }
.m--shelf .m-tab { padding: 8px 14px 8px 8px; border-radius: 4px; color: #3A2412; background: #FFF1DC; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); transform: rotate(-1deg); transition: transform 0.2s ease, background 0.2s ease; }
.m--shelf .m-tab:nth-child(even) { transform: rotate(1deg); }
.m--shelf .m-tab::before { content: ''; position: absolute; left: 50%; top: -7px; width: 34px; height: 14px; margin-left: -17px; background: rgba(252, 170, 26, 0.7); transform: rotate(-3deg); }
.m--shelf .m-tab:hover { transform: rotate(0) translateY(-2px); }
.m--shelf .m-tab[aria-selected='true'] { color: var(--room); background: #FCAA1A; transform: rotate(0) translateY(-2px); box-shadow: 0 0 0 2px #FFF1DC, 0 6px 16px rgba(252, 170, 26, 0.35); }
.m--shelf .m-tab[aria-selected='true']::before { background: rgba(225, 72, 38, 0.85); }

/* shelves: options stand on planks that join across a row */
.m--shelf .m__list { --cell: 140px; --gap: 0px; row-gap: 22px; padding: 10px 8px 4px; border-radius: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.08)); box-shadow: inset 0 0 0 2px rgba(255, 220, 170, 0.08); }
.m--shelf .m-opt { padding: 16px 6px 34px; gap: 6px; }
.m--shelf .m-opt::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: linear-gradient(180deg, var(--plank-top) 0 7px, var(--plank) 7px 9px, var(--plank-d) 9px 100%); box-shadow: 0 9px 10px -4px rgba(0, 0, 0, 0.6);
}
.m--shelf .m-opt::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: -10px; bottom: 24px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: conic-gradient(from 160deg at 50% 0%, rgba(255, 226, 160, 0.42) 0deg 40deg, transparent 40deg 360deg);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent);
}
.m--shelf .m-opt__art { filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.55)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease; }
.m--shelf .m-opt__name { color: #FFE7C2; font-size: 13px; }
.m--shelf .m-opt__meta { position: absolute; z-index: 1; left: 0; right: 0; bottom: 3px; }
.m--shelf .m-opt__price { color: #FFF6E6; font-size: 12.5px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); }
.m--shelf .m-opt__have, .m--shelf .m-opt__status { color: #FFE7C2; font-size: 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); }
.m--shelf .m-opt.is-short .m-opt__price { color: #FFC9BE; }
.m--shelf .m-opt__tag { left: 50%; top: 2px; transform: translateX(-50%) rotate(-4deg); background: var(--card); color: #CC3530; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); }
.m--shelf .m-opt__rarity { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.m--shelf .m-opt:hover::before { opacity: 0.45; }
.m--shelf .m-opt.is-sel::before { opacity: 1; }
.m--shelf .m-opt.is-sel::after { background: linear-gradient(180deg, #FFD08A 0 7px, var(--plank) 7px 9px, var(--plank-d) 9px 100%); }
.m--shelf .m-opt.is-sel .m-opt__art { transform: translateY(-8px) scale(1.08); filter: drop-shadow(0 0 18px rgba(255, 214, 140, 0.55)) drop-shadow(0 14px 6px rgba(0, 0, 0, 0.5)); }
.m--shelf .m-opt.is-sel .m-opt__name { color: #FCAA1A; }

/* turntable under a spotlight, and a museum card */
.m--shelf .m-detail { padding: 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 241, 220, 0.07), rgba(255, 241, 220, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.16); }
.m--shelf .m-detail__stage {
  min-height: 214px;
  background: radial-gradient(ellipse 44% 9% at 50% 87%, var(--plank-top) 0 58%, var(--plank-d) 61%, transparent 66%), conic-gradient(from 156deg at 50% -8%, rgba(255, 226, 160, 0.38) 0deg 48deg, transparent 48deg 360deg);
}
.m--shelf .m-detail__art { margin-bottom: 20px; filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.55)); animation: m-bob 4s ease-in-out infinite; }
@keyframes m-bob { 50% { transform: translateY(-5px); } }
.m--shelf .m-detail__tag { background: var(--card); color: #CC3530; }
.m--shelf .m-detail__info { position: relative; padding: 16px 16px 14px; border-radius: 6px; background: var(--card); color: #3A2412; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45); }
.m--shelf .m-detail__info::before { content: ''; position: absolute; left: 50%; top: 6px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1C2, #C08A2E); }
.m--shelf .m-detail__name { color: #6B2A12; font-family: var(--title-font); }
.m--shelf .m-detail__stats div { background: rgba(184, 116, 54, 0.13); }
.m--shelf .m-detail__reason.is-warn { color: var(--short); }
.m--shelf .m-step { box-shadow: inset 0 0 0 2px rgba(255, 220, 170, 0.35); }
.m--shelf .m-buy { border-radius: 999px; background: linear-gradient(90deg, #FCAA1A, #E14826 55%, #CC3530); box-shadow: 0 6px 18px rgba(225, 72, 38, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35); transition: transform 0.15s ease; }
.m--shelf .m-buy:hover:not([aria-disabled='true']) { transform: translateY(-2px); }
.m--shelf .m-ghost { color: #FFE7C2; }

/* backpack: a cubby shelf */
.m--shelf.m-inv .m__list { --slot: 70px; gap: 6px; row-gap: 6px; padding: 10px; border-radius: 10px; background: #6E3F1E; box-shadow: inset 0 0 0 4px var(--plank-d), 0 12px 22px rgba(0, 0, 0, 0.45); }
.m--shelf .m-slot { border-radius: 3px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 40%, rgba(255, 214, 140, 0.1)), #3A2219; box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.5), inset 4px 0 6px rgba(0, 0, 0, 0.25), inset -4px 0 6px rgba(0, 0, 0, 0.25); }
.m--shelf .m-slot .fz-icon { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.6)); }
.m--shelf .m-slot.is-sel { background: radial-gradient(ellipse at 50% 0%, rgba(255, 226, 160, 0.6), transparent 72%), #4A2E22; box-shadow: inset 0 0 0 2px #FCAA1A, 0 0 16px rgba(252, 170, 26, 0.45); }
.m--shelf .m-slot__qty { color: #FFF1DC; text-shadow: 0 1px 2px #000; }
.m--shelf .m-cap__bar { background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.2); }
.m--shelf .m-cap__bar i { background: linear-gradient(90deg, #FFD08A, #FCAA1A); box-shadow: 0 0 10px rgba(252, 170, 26, 0.6); }
.m--shelf .m-cap__bar.is-full i { background: linear-gradient(90deg, #FCAA1A, #E14826); }

@media (max-width: 760px) {
  /* keep the museum card whole on small screens */
  .m--shelf .m-detail__info { display: grid; grid-column: 1 / -1; }
  .m--shelf .m-detail__info > * { grid-column: auto; }
  .m--shelf .m-detail__stage { grid-column: 1 / -1; grid-row: auto; min-height: 150px; }
}
@media (max-width: 640px) {
  .m--shelf { padding: 18px 14px; border-radius: 20px; }
  .m--shelf .m-opt__have, .m--shelf .m-opt__status { display: none; }
  .m--shelf .m__list { --cell: 104px; padding: 8px 6px 4px; }
  .m--shelf.m-inv .m__list { --slot: 56px; padding: 8px; }
}