/* screen-shop.css — the Shop screen. Owner: S6.
   Two pockets, colour-coded so she never has to read a word to know which one
   she is spending from:
     ❤️  hearts    -> var(--c-heart)  -> treats
     🐾  paw bucks -> var(--c-buck)   -> books and dress-up
   Unaffordable items keep their full size and price and go grey — never hidden. */

#screen-shop {
  /* the fixed #hud sits top-right; leave it room at 320px */
  padding-top: calc(var(--sp-6) + 56px);
}

.shop {
  max-width: 1100px;
  margin: 0 auto;
}

.shop__h1 {
  text-align: center;
  margin-bottom: var(--sp-3);
}

/* ---- the friendly nudge banner ---------------------------------------- */
.shop-nudge {
  margin: 0 auto var(--sp-4);
  max-width: 640px;
  background: var(--c-surface);
  border: 3px dashed var(--c-primary);
  color: var(--c-ink);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  text-align: center;
  box-shadow: var(--shadow);
}
.shop-nudge[hidden] { display: none; }
.shop-nudge.is-in { animation: shop-nudge-in var(--dur) var(--ease-pop); }
@keyframes shop-nudge-in {
  from { opacity: 0; transform: translateY(-10px) scale(.94); }
}

/* ---- the postbox ------------------------------------------------------- */
.post {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  min-height: var(--tap);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #FFF9E8, var(--c-bg-2));
  border: 4px solid var(--c-buck);
  box-shadow: var(--shadow-lg);
}
.post--waiting { cursor: pointer; }
.post--waiting:active { transform: scale(.98); }
.post--gift {
  flex-direction: column;
  text-align: center;
  border-color: var(--c-good);
  animation: post-pop var(--dur-slow) var(--ease-pop);
}
@keyframes post-pop { from { opacity: 0; transform: scale(.85); } }

.post__art { font-size: 64px; line-height: 1; flex: 0 0 auto; }
.post__art--wiggle { animation: post-wiggle 1.6s ease-in-out infinite; }
@keyframes post-wiggle {
  0%, 70%, 100% { transform: rotate(0deg); }
  78% { transform: rotate(-9deg); }
  86% { transform: rotate(9deg); }
  94% { transform: rotate(-4deg); }
}
.post__words { flex: 1 1 200px; }
.post__title { margin: 0; font-size: var(--fs-big); }
.post__body  { margin: var(--sp-2) 0 0; font-size: var(--fs-body); color: var(--c-ink-soft); }
.post__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3); margin-top: var(--sp-4); width: 100%;
}

/* ---- shelves ------------------------------------------------------------ */
.shelf {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  border-top: 8px solid var(--c-line);
}
.shelf--heart { border-top-color: var(--c-heart); }
.shelf--buck  { border-top-color: var(--c-buck); }

.shelf__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.shelf__coin {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  border-radius: 50%;
  background: var(--c-bg-2);
}
.shelf--heart .shelf__coin { background: #FFE1EB; }
.shelf--buck  .shelf__coin { background: #FFF0D2; }

.shelf__words { flex: 1 1 auto; min-width: 0; }
.shelf__title { margin: 0; font-size: var(--fs-big); }
.shelf--heart .shelf__title { color: var(--c-heart); }
.shelf--buck  .shelf__title { color: #A9761A; }
.shelf__sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--c-ink-soft); }

.shelf__hint {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-ink-soft);
}
.shelf__empty {
  margin: 0; padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  font-size: var(--fs-body);
  text-align: center;
}

/* ---- item grid ---------------------------------------------------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}

.shop-item {
  position: relative;
  display: flex;
  min-height: 168px;
  padding: var(--sp-3);
  border: 3px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.shop-item--treat { border-color: #FFC6D8; background: linear-gradient(180deg, #FFF7FA, #fff); }
.shop-item--book,
.shop-item--cosmetic { border-color: #F6DFAF; background: linear-gradient(180deg, #FFFBF0, #fff); }

.shop-item__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
/* .is-disabled (components.css) greys the BODY, not the card, so the card can
   still receive a tap and answer with a friendly hint. */

.shop-item__art { font-size: 54px; line-height: 1; }
.shop-item__name {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.shop-item__note { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); }

/* already hers — a trophy, never greyed out */
.shop-item__owned {
  margin: auto 0 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: #E4F7EA;
  color: #2E7D4F;
  font-size: var(--fs-body);
  font-weight: 700;
}
.shop-item.is-owned { border-color: var(--c-good); border-style: solid; }
.shop-item .price { margin-top: auto; font-size: var(--fs-big); }
.price__coin { font-size: var(--fs-body); }

/* she cannot afford it yet: still here, still priced, just quiet */
.shop-item--cant { border-style: dashed; }

/* purchase lock — set for the length of the transaction so a second tap in the
   same breath cannot buy twice (render.tap also refuses .is-disabled nodes).
   `.is-disabled` rides along only to make render.tap bail out, so its grey is
   cancelled here: a card mid-celebration must look happy, not switched off. */
#screen-shop .is-locked { pointer-events: none; }
#screen-shop .is-locked.is-disabled {
  filter: none; opacity: 1; box-shadow: var(--shadow);
}

/* ---- book covers --------------------------------------------------------- */
.book__cover {
  position: relative;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 6px var(--r-sm) var(--r-sm) 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  box-shadow: var(--shadow);
  background: var(--c-accent);
}
.book__spine {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 12px;
  border-radius: 6px 0 0 6px;
  background: rgba(0, 0, 0, .16);
}
/* level is a real difficulty signal for her: colour AND pip count */
.book--l1 .book__cover { background: #BDEBE9; }
.book--l2 .book__cover { background: #D6CDF6; }

.book__title { min-height: 2.3em; }

.book__level {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-bg-2);
  font-size: var(--fs-small);
  font-weight: 700;
}
.book__pips { display: inline-flex; gap: 3px; }
.pip {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-locked);
  display: inline-block;
}
.book--l1 .pip { background: var(--c-accent); }
.book--l2 .pip { background: var(--c-stars); }
.book--l1 .book__level { color: #2F8C8C; }
.book--l2 .book__level { color: #5A48B8; }

/* ---- bought! ------------------------------------------------------------- */
.shop-item.is-bought {
  animation: shop-bought var(--dur-slow) var(--ease-pop);
  border-color: var(--c-good);
}
@keyframes shop-bought {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1); }
}

.shop-burst {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: rgba(111, 207, 143, .94);
  color: #fff;
  text-align: center;
  border-radius: var(--r-md);
  animation: shop-burst-in var(--dur) var(--ease-pop);
}
@keyframes shop-burst-in { from { opacity: 0; transform: scale(.7); } }
.shop-burst__mark { font-size: 40px; line-height: 1; }
.shop-burst__text { font-size: var(--fs-body); font-weight: 700; overflow-wrap: anywhere; }

/* ---- sizes --------------------------------------------------------------- */
@media (min-width: 560px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .shop-item { min-height: 210px; }
  .shop-item__art { font-size: 66px; }
}

@media (min-width: 900px) {
  .shelf { padding: var(--sp-5); }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* very narrow phones: two columns still fit, cards just get shorter */
@media (max-width: 360px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .shop-item { min-height: 156px; padding: var(--sp-2); }
  .shop-item__art { font-size: 44px; }
  .shop-item .price { font-size: var(--fs-body); }
  .book__cover { max-width: 82px; font-size: 30px; }
  .post { padding: var(--sp-3); gap: var(--sp-3); }
  .post__art { font-size: 48px; }
}