/*
 * shop.css — the tool shop's internals (DESIGN.md §7). Lane K.
 *
 * Built only from style.css's tokens (--ink, --paper, --cream, --mustard,
 * --navy, --line, --font, --radius, --shadow) and its components (.card,
 * .btn, .btn.ghost, .funds). No new colours, no new fonts; everything is
 * scoped under #shop so nothing here can leak into another screen.
 *
 * THE SHAPE. Two regions, the counter and the wares.
 *   portrait   counter on top (title + funds / shopkeeper + bubble / Back),
 *              wares below it filling the rest.
 *   landscape  (or any wide screen) counter as a left column, wares right.
 * Either way the wrap is exactly the viewport tall and only the wares card
 * scrolls, inside itself: funds and Back never scroll away. #shop keeps
 * overflow:auto behind that as a safety net only (hub §2).
 *
 * THE ONE GRID (hub §2). All twelve tiles sit in one .shop-grid with the four
 * group headings spanning it, so tiles in a column share both edges whichever
 * group they are in. Tiles are peers, so the columns are equal (1fr) and each
 * row of tiles stretches to one height. Inside a tile the buy button has a
 * fixed width, so every button in a column starts at the same x.
 */

#shop {
  overflow: auto; /* safety net on very short viewports, not the plan */
}

#shop .shop-wrap {
  box-sizing: border-box;
  height: 100%;
  max-width: 72rem;
  margin: 0 auto;
  /* Clear of the corner's three plates, which sit over every screen. */
  padding: calc(env(safe-area-inset-top, 0px) + var(--corner-h, 64px)) max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

/* ------------------------------------------------------------ the counter */

#shop .shop-counter {
  display: grid;
  gap: 0.6rem;
  min-height: 0;
  /* Portrait: a short strip. Title + funds, then the shopkeeper beside his
     bubble, then Back across the bottom. */
  grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr);
  grid-template-rows: auto 8rem auto;
  grid-template-areas:
    'title  funds'
    'keeper bubble'
    'back   back';
  align-items: center;
}

#shop .shop-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font);
  font-size: 1.6rem;
  line-height: 1.1;
  /* The colour and outline are the shared h2's: mustard on the night card. */
}

#shop .shop-funds {
  grid-area: funds;
  justify-self: end;
}

#shop .shop-funds.pop {
  animation: shop-pop 0.35s ease-out;
}

#shop .shop-keeper {
  grid-area: keeper;
  position: relative;
  align-self: stretch;
  min-height: 0;
}

#shop .shop-keeper-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The speech bubble: an ink-bordered paper balloon with a tail pointing at
   the shopkeeper — left in portrait (he is beside it), down when the counter
   is a column (he is under it). The tail is two stacked triangles, ink behind
   paper, so it carries the same outline as the balloon. */
#shop .shop-bubble {
  grid-area: bubble;
  position: relative;
  align-self: center;
  margin: 0;
  padding: 0.55rem 0.75rem;
  background: var(--paper);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.3;
  min-height: 2.6em;
}

#shop .shop-bubble::before,
#shop .shop-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  border-style: solid;
  border-color: transparent;
}
#shop .shop-bubble::before {
  right: 100%;
  margin-top: -0.6rem;
  border-width: 0.6rem 0.8rem 0.6rem 0;
  border-right-color: var(--ink);
}
#shop .shop-bubble::after {
  right: calc(100% - var(--line) * 1.6);
  margin-top: -0.42rem;
  border-width: 0.42rem 0.56rem 0.42rem 0;
  border-right-color: var(--paper);
}

#shop .shop-bubble.pop {
  animation: shop-pop 0.3s ease-out;
  transform-origin: left center;
}

#shop .shop-back {
  grid-area: back;
  justify-self: stretch;
  min-height: 2.75rem;
}

/* -------------------------------------------------------------- the wares */

#shop .shop-wares {
  min-height: 0;
  overflow-y: auto; /* the only thing that scrolls */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#shop .shop-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  align-items: stretch;
}

#shop .shop-group {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--cream);
}
#shop .shop-group:first-child {
  margin-top: 0;
}

/* A tile: icon | words | buy. The words column is three rows (name, perk,
   meta); the icon and button span all three. */
#shop .shop-ware {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 6.75rem;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'icon name buy'
    'icon perk buy'
    'icon meta buy';
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  padding: 0.5rem;
  background: var(--cream);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font);
}

#shop .shop-icon {
  grid-area: icon;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  display: block;
}

#shop .shop-name {
  grid-area: name;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.2;
}

#shop .shop-perk {
  grid-area: perk;
  font-size: 0.85rem;
  line-height: 1.25;
}

#shop .shop-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

#shop .shop-count {
  display: none; /* the short "1/3" is for the landscape phone only */
}

#shop .shop-pips {
  display: inline-flex;
  gap: 0.2rem;
  flex: none;
}

#shop .shop-pip {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: calc(var(--line) * 0.6) solid var(--ink);
  background: var(--paper);
  box-sizing: border-box;
}
#shop .shop-pip.on {
  background: var(--mustard);
}

/* The buy button fills its column at one fixed width: the word on top, the
   price (or what is missing) under it. An unaffordable or maxed one is the
   ghost button — still visible, still priced, never hidden. */
#shop .shop-buy {
  grid-area: buy;
  align-self: center;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.3rem 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  line-height: 1.1;
  text-align: center;
}

#shop .shop-buy-word {
  font-size: 0.95rem;
}

#shop .shop-price {
  font-size: 0.75rem;
}

#shop .shop-buy[aria-disabled='true'] {
  opacity: 0.8;
}

#shop .shop-ware.maxed .shop-buy[aria-disabled='true'] {
  opacity: 1; /* "Maxed" is good news, not a refusal */
}

#shop .shop-price[hidden] {
  display: none;
}

@keyframes shop-pop {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #shop .shop-bubble.pop,
  #shop .shop-funds.pop {
    animation: none;
  }
}

/* ------------------------------------------------ wide: counter as column */

@media (orientation: landscape), (min-width: 60rem) {
  #shop .shop-wrap {
    grid-template-columns: minmax(13rem, 30%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* Title, bubble, the shopkeeper taking whatever height is left, funds,
     then Back last. */
  #shop .shop-counter {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(4rem, 1fr) auto auto;
    grid-template-areas:
      'title'
      'bubble'
      'keeper'
      'funds'
      'back';
    align-items: stretch;
  }

  #shop .shop-funds {
    justify-self: stretch;
  }

  /* The tail turns to point down at him. */
  #shop .shop-bubble::before {
    top: 100%;
    right: auto;
    left: 50%;
    margin: 0 0 0 -0.6rem;
    border-width: 0.8rem 0.6rem 0 0.6rem;
    border-color: var(--ink) transparent transparent transparent;
  }
  #shop .shop-bubble::after {
    top: calc(100% - var(--line) * 1.6);
    right: auto;
    left: 50%;
    margin: 0 0 0 -0.42rem;
    border-width: 0.56rem 0.42rem 0 0.42rem;
    border-color: var(--paper) transparent transparent transparent;
  }
  #shop .shop-bubble.pop {
    transform-origin: center bottom;
  }
}

/* --------------------------------------- landscape phone: compact, no page
   scroll. Same shape as maxgear's block (hub §2): a sideways phone has width
   where it lacks height, so the counter narrows, the tiles go two abreast
   with the meta squeezed onto the name row, and controls come down to about
   38px and stop there — a finger is still the pointer. */

@media (orientation: landscape) and (max-height: 500px) {
  #shop .shop-wrap {
    gap: 0.5rem;
    padding: calc(env(safe-area-inset-top, 0px) + var(--corner-h, 64px)) max(0.5rem, env(safe-area-inset-right, 0px))
      max(0.4rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
    grid-template-columns: minmax(10.5rem, 27%) minmax(0, 1fr);
  }

  #shop .shop-counter {
    gap: 0.4rem;
    grid-template-rows: auto auto minmax(2.5rem, 1fr) auto auto;
  }

  #shop .shop-title {
    font-size: 1.2rem;
  }

  #shop .shop-bubble {
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
  }

  #shop .shop-back {
    min-height: 2.4rem;
  }

  #shop .shop-grid {
    gap: 0.4rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }

  #shop .shop-group {
    font-size: 0.8rem;
    margin-top: 0.15rem;
  }

  #shop .shop-ware {
    grid-template-columns: 2rem minmax(0, 1fr) auto 5.25rem;
    grid-template-rows: auto auto;
    grid-template-areas:
      'icon name meta buy'
      'icon perk perk buy';
    column-gap: 0.4rem;
    row-gap: 0.1rem;
    padding: 0.3rem 0.4rem;
  }

  #shop .shop-icon {
    width: 2rem;
    height: 2rem;
  }

  #shop .shop-name {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Two lines of perk, then an ellipsis: the rule still reads. */
  #shop .shop-perk {
    font-size: 0.7rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  #shop .shop-note {
    display: none;
  }
  #shop .shop-count {
    display: inline;
    font-size: 0.7rem;
  }
  #shop .shop-ware[data-kind='tool'] .shop-count {
    display: none; /* the pips already say it */
  }

  #shop .shop-pip {
    width: 0.55rem;
    height: 0.55rem;
  }

  #shop .shop-buy {
    min-height: 2.4rem;
    padding: 0.2rem 0.25rem;
  }
  #shop .shop-buy-word {
    font-size: 0.8rem;
  }
  #shop .shop-price {
    font-size: 0.65rem;
  }
}