/* ── Akimi Islands — the shop and the dressing room ───────────────────────
   Both show the same card. The shop is a full panel because buying deserves
   the whole screen; the dressing room is a low sheet so the explorer stays
   visible above it while clothes are being tried on.
   ───────────────────────────────────────────────────────────────────────── */

.panel--wide { width: min(700px, 100%); }

/* ── The purse in the shop's title bar ────────────────────────────────── */

.purse { display: flex; gap: 8px; margin-left: auto; margin-right: 4px; }

.purse-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: 18px;
  font-weight: 700;
}
.purse-chip--coins b { color: var(--gold-deep); }
.purse-chip--stars b { color: var(--coral-deep); }

/* ── Hats / Colours / Capes ───────────────────────────────────────────── */

/* Reuses .segments and .segment from panels.css so the picker feels the same
   as the one in Settings. Scrolls sideways rather than wrapping, because a
   second row of tabs pushes the shelf off a phone screen. */
.tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 16px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(27, 42, 56, .08);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .segment { flex: 1 0 auto; white-space: nowrap; }

/* ── What the shop says back ──────────────────────────────────────────── */

/* A toast would appear behind this panel, so the shop keeps its own line.
   Two moods only: something happy, or something to work towards. Never a
   warning colour and never a cross. */
.panel-say {
  /* Always the same height, whatever it is saying, so the shelf below it
     never moves under a finger. */
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -6px 0 14px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: #E4FBF1;
  color: #0E7A55;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  transition: background .2s ease, color .2s ease;
}
.panel-say[data-mood="soft"] { background: #FFF3DC; color: #8A5B12; }
/* Resting: it is only the instruction, so it should not shout. */
.panel-say[data-mood="note"] {
  background: none;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 16px;
}
.panel-say.pop { animation: say-pop .4s var(--ease) both; }
@keyframes say-pop { from { opacity: 0; transform: scale(.9); } }

/* ── The shelf ────────────────────────────────────────────────────────── */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 12px;
}

.card {
  /* A whole card is the tap target — far easier than aiming at a button. */
  min-height: 148px;
  padding: 14px 10px 12px;
  border: none;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover  { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card:active { transform: translateY(2px); }
.card:focus-visible { outline: 4px solid var(--grape); outline-offset: 3px; }

.card-face {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(27, 42, 56, .06);
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
}
/* Colour sets have no sensible emoji, so the card shows the actual colours. */
.card-face--swatch { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .75); }

.card-name  { font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; }
.card-price { font-size: 15px; font-weight: 700; color: var(--gold-deep); }

/* ── What state each card is in ───────────────────────────────────────── */

/* Wearing it — a gold ring, the same gold as the coins. */
.card[data-state="worn"] {
  background: #FFF7E4;
  box-shadow: 0 0 0 3px var(--gold), var(--shadow-sm);
}
.card[data-state="worn"] .card-price { color: #0E7A55; }

/* Owned but not on — the invitation is the whole message. */
.card[data-state="owned"] .card-price { color: var(--ink-soft); font-weight: 600; }

/* Cannot pay for it yet. Faded a little, never crossed out, never red. */
.card[data-state="poor"] { opacity: .74; }
.card[data-state="poor"] .card-price { color: var(--ink-soft); }

/* Comes at a higher level. Kept on the shelf on purpose — it is the reason
   to carry on playing, so hiding it would be exactly the wrong move. */
.card[data-state="locked"] { opacity: .62; }
.card[data-state="locked"] .card-face { filter: grayscale(.7); }
.card[data-state="locked"] .card-price { color: var(--ink-soft); font-weight: 600; }

/* ── The dressing room sheet ──────────────────────────────────────────── */

/* No dark wash and no blur: the point of this panel is seeing the explorer
   turning around behind it. */
.scrim--sheet {
  background: none;
  backdrop-filter: none;
  padding: 0;
}
.scrim--sheet.on { align-content: end; justify-items: center; }

.sheet {
  width: min(720px, 100%);
  max-height: 54vh;
  overflow-y: auto;
  padding: 18px 20px max(18px, env(safe-area-inset-bottom));
  background: var(--cream);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(27, 42, 56, .3);
  animation: sheet-in .35s var(--ease) both;
}
@keyframes sheet-in { from { transform: translateY(70%); } }

.sheet-foot {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.card--small { min-height: 118px; padding: 11px 8px 10px; }
.card--small .card-face { width: 50px; height: 50px; font-size: 28px; }
.card--small .card-name { font-size: 15px; }

.sheet .shop-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }

.sheet-hint {
  text-align: center;
  font-size: 16px;
  color: var(--ink-soft);
  margin: -8px 0 12px;
}

.sheet-empty {
  text-align: center;
  font-size: 16px;
  color: var(--ink-soft);
  padding: 10px 0;
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Title, purse and close button will not fit on one line, so the purse
     drops onto its own row rather than squashing the other two. */
  #shop-scrim .panel-head { flex-wrap: wrap; }
  #shop-scrim .purse { order: 3; width: 100%; margin: 4px 0 0; justify-content: center; }
  .shop-grid  { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .card       { min-height: 132px; }
  .card-face  { width: 54px; height: 54px; font-size: 30px; }
  .purse-chip { font-size: 16px; padding: 6px 11px; }
}

/* Phone held sideways: there is no room for rows of cards, so the rail
   scrolls across instead and the explorer keeps most of the screen. */
@media (max-height: 520px) {
  .sheet { max-height: 62vh; padding-top: 12px; }
  .sheet .shop-grid {
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .card--small { min-height: 108px; }
}