/* =============================
   css/scenes/market.css
   ============================= */
/* ===== cena: mercado (fase 3) ===== */
#scene-market{background:linear-gradient(#fff2c9 0 436px,#8fa3a8 436px)}

/* prateleira ao fundo, com caixas e latas coloridas */
#scene-market .shelf{left:0;right:0;top:196px;height:12px;background:#8d6e50;border-top:4px solid var(--k);border-bottom:4px solid var(--k)}
#scene-market .shelf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:34px;
  background:repeating-linear-gradient(90deg,#e63946 0 22px,transparent 22px 28px,#4aa8ff 28px 50px,transparent 50px 56px,#ffd93b 56px 78px,transparent 78px 84px,#3ecf5a 84px 106px,transparent 106px 112px)}

#scene-market .headcard{left:8px;width:196px;top:8px}
#scene-market .bal{left:12px;right:12px;top:70px}
#scene-market .bal.narr{text-align:center}

#scene-market .char.vendor{left:130px;top:224px;width:190px;height:142px}
#scene-market .char.vendor .hm{transform-origin:100px 72px}

/* balcão */
#scene-market .plank{left:-6px;right:-6px;top:366px;height:18px;background:#e0a96d;border:4px solid var(--k)}
#scene-market .front{left:-6px;right:-6px;top:384px;height:54px;border:4px solid var(--k);border-top:0;
  background:repeating-linear-gradient(90deg,#8d6e50 0 36px,#7a5d42 36px 40px)}

/* itens clicáveis na bancada */
#scene-market .item{top:296px;width:102px;height:128px;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;font:inherit}
#scene-market .item[data-k=meat]{left:12px}
#scene-market .item[data-k=kit]{left:124px}
#scene-market .item[data-k=fruit]{left:236px}
#scene-market .item svg{width:100px;height:76px;transition:transform .15s}
#scene-market .item span{margin-top:6px;text-align:center;font:900 11px/1.15 "PDDText","Comic Sans MS",sans-serif;color:#fff;
  text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
#scene-market .item:disabled{cursor:default}
#scene-market .item.on svg{animation:itemHint .7s ease-in-out infinite alternate}
#scene-market .item.on:hover svg{transform:scale(1.12)}
#scene-market .item.taken{animation:itemTaken .7s ease-in forwards}
#scene-market .item.gone{opacity:0;transition:opacity .4s;pointer-events:none}
@keyframes itemHint{to{transform:translateY(-6px)}}
@keyframes itemTaken{to{transform:translate(70px,-80px) scale(.4);opacity:0}}

#scene-market .price{top:250px;z-index:6;text-align:center;background:var(--y);border:3px solid var(--k);border-radius:10px;padding:3px 8px;
  font:900 15px "PDDTitle",Impact,sans-serif;color:var(--r);box-shadow:3px 3px 0 var(--k);transform:rotate(-3deg);animation:pop .3s ease-out}
#scene-market .price small{display:block;font:700 10px "PDDText","Comic Sans MS",sans-serif;color:var(--k)}

#scene-market .tag{left:24px;top:405px;transform:rotate(-4deg)}
#scene-market .char.h{left:18px;bottom:8px;width:130px;height:195px}