/* Sell chest: closed / hover (lid ajar) / open (item dragged over). Module: js/ui/sellChest.js */
.sellchest { perspective: 420px; overflow: visible; }
.sellchest .sc-body { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 65%; }
.sellchest .sc-lid { position: absolute; left: 0; right: 0; bottom: 59%; height: 40%; transform-origin: 50% 100%;
  transition: transform .26s cubic-bezier(.3,1.5,.5,1); will-change: transform; }
.sellchest .sc-lid-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.sellchest.sc-hover .sc-lid { transform: rotateX(-50deg) translateY(-6px); }
.sellchest.sc-open .sc-lid { transform: rotateX(-66deg) translateY(-14px); }
.sellchest.sc-closed .sc-lid { transition: transform .12s cubic-bezier(.6,0,.9,.4); }
.sc-glow { position: absolute; left: 8%; right: 8%; bottom: 55%; height: 44%; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 70%, #fff3b0 0%, #ffcf4a 30%, rgba(255,170,30,.45) 58%, rgba(255,150,20,0) 78%);
  transition: opacity .22s; filter: blur(1px); }
.sc-rays { position: absolute; left: 4%; right: 4%; bottom: 56%; height: 85%; opacity: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,214,90,.75), rgba(255,190,60,.25) 50%, rgba(255,180,40,0) 72%);
  clip-path: polygon(30% 100%, 0 0, 100% 0, 70% 100%); transition: opacity .25s, transform .25s; transform: scaleY(.6); transform-origin: 50% 100%; }
.sellchest.sc-hover .sc-glow { opacity: .55; }
.sellchest.sc-open .sc-glow { opacity: 1; animation: sc-pulse 1s ease-in-out infinite; }
.sellchest.sc-open .sc-rays { opacity: 1; transform: scaleY(1); }
.sellchest.sc-open { filter: drop-shadow(0 0 14px rgba(255,200,70,.8)); }
@keyframes sc-pulse { 50% { opacity: .78; } }
.sellchest.drop-hot { transform: none; }
.sc-tag { position: absolute; left: 50%; top: -6px; transform: translate(-50%, 10px); opacity: 0; white-space: nowrap; pointer-events: none; z-index: 3;
  font-family: var(--font-head); font-size: 14px; color: #ffe9a8; padding: 2px 10px; border-radius: 10px;
  background: rgba(20,12,4,.88); border: 1px solid #c9a24a; text-shadow: 0 1px 0 #000;
  transition: opacity .18s, transform .22s cubic-bezier(.3,1.4,.5,1); }
.sellchest.sc-hover .sc-tag, .sellchest.sc-open .sc-tag { opacity: 1; transform: translate(-50%, 0); }
.sellchest.sc-open .sc-tag { color: #fff3b0; border-color: #ffd34a; box-shadow: 0 0 10px rgba(255,200,70,.7); }

/* v2: unmistakable open state - dome lid folds away, inner face of the lid stands up behind, gold-lit interior with coins */
.sc-lid-open { position: absolute; left: 0; right: 0; bottom: 60%; height: 36%; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
  transition: transform .22s cubic-bezier(.3,1.5,.5,1), opacity .12s; pointer-events: none; }
.sc-lid-open-svg, .sc-inside-svg { width: 100%; height: 100%; display: block; }
.sc-inside { position: absolute; left: 6%; right: 6%; bottom: 55%; height: 17%; opacity: 0; transition: opacity .15s; pointer-events: none; }
.sellchest.sc-open .sc-lid-open { transform: scaleY(1); opacity: 1; }
.sellchest.sc-open .sc-lid { transform: scaleY(.04) translateY(10px); opacity: 0; transition: transform .2s, opacity .12s; }
.sellchest.sc-open .sc-inside { opacity: 1; }
.sellchest.sc-hover .sc-lid { transform: rotateX(-32deg) translateY(-5px); }
.sellchest.sc-hover .sc-inside { opacity: .9; clip-path: inset(70% 0 0 0); }
.sellchest.sc-hover .sc-glow { opacity: .8; }
.sc-tag { top: -30px; }
.sellchest.sc-slam .sc-lid { animation: sc-slam .22s ease-in; }
.sellchest.sc-slam { animation: sc-thud .22s ease-out; }
@keyframes sc-slam { from { transform: rotateX(-66deg) translateY(-14px); } to { transform: none; } }
@keyframes sc-thud { 60% { transform: translateY(2px) scaleY(.97); } }

/* v3: real Classic chest model (js/ui/model3d.js chestModel). SVG pieces are fallback only. */
.sellchest .m3d.chest3d { position: absolute; left: -6%; right: -6%; top: -34%; bottom: -4%; z-index: 1; pointer-events: none; }
.sellchest .m3d.chest3d:not(.live) { display: none; }
.sellchest:has(.m3d.chest3d.live) .sc-fb { display: none; }
.sellchest:has(.m3d.chest3d.live) { filter: none; }
.sellchest.sc-open:has(.m3d.chest3d.live) { filter: drop-shadow(0 0 12px rgba(255,200,70,.55)); }
.chest3d.live::before { display: none; }

/* no 2D SVG chest: show nothing until the 3D chest loads (drop zone, glow and tag stay) */
.sellchest .sc-fb { display: none !important; }
/* hit area = the whole visible 3D chest (its canvas is pointer-events:none and overhangs the box), so drops on the lid register */
.sellchest::before { content: ""; position: absolute; left: -6%; right: -6%; top: -34%; bottom: -4%; z-index: 0; }

/* interaction pass: the chest reads as a sell zone at rest (small plaque + faint idle glow), before any drag */
.sellchest.sc-closed .sc-tag { opacity: .78; transform: translate(-50%, 0); font-size: 12px; padding: 1px 9px; }
.sellchest.sc-closed .sc-glow { opacity: .22; animation: sc-idle 3.2s ease-in-out infinite; }
@keyframes sc-idle { 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) { .sellchest.sc-closed .sc-glow { animation: none; } }

/* v4: the chest is 4x larger on desktop (css/shop-scene.css): tag, glow and shine scale with it. Mobile keeps the pinned size. */
@media (min-width: 901px) {
  .sellchest .sc-tag { top: -16%; font-size: 19px; padding: 3px 14px; border-radius: 12px; border-width: 2px; }
  .sellchest.sc-closed .sc-tag { font-size: 16px; padding: 2px 12px; }
  .sellchest .sc-glow { filter: blur(3px); }
  .sellchest.sc-open:has(.m3d.chest3d.live) { filter: drop-shadow(0 0 22px rgba(255,200,70,.55)); }
}
/* touch: sc-hover/sc-open are JS classes (drag-over), so no hover media needed; lighter filters on coarse pointers */
.sellchest:active { transform: scale(.97); }
@media (pointer: coarse) { .sellchest .sc-lid-svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); } .sellchest.sc-open { filter: drop-shadow(0 0 8px rgba(255,200,70,.7)); } }