/* Local UI review: keep the approved illustrated shop, but give products the
 * first screen at intermediate desktop and narrow widths. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .world:not(.world--no-shopkeeper) {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    column-gap: clamp(.75rem, 1.5vw, 1.5rem);
    width: calc(100% - 3rem);
    max-width: 90rem;
    margin: 0 auto 1.25rem;
    align-items: start;
  }
  .world:not(.world--no-shopkeeper) > .shopkeeper {
    position: sticky;
    top: var(--store-admin-gap);
    height: calc(100svh - 7.5rem);
    min-height: 0;
    margin: 0;
  }
  .world:not(.world--no-shopkeeper) .character-playground { inset: 0 0 4.5rem; max-width: none; }
  .world:not(.world--no-shopkeeper) .character-button { left: 0; bottom: 0; width: 82%; height: 100%; }
  .world:not(.world--no-shopkeeper) .speech { top: 0; right: 0; }
  .world:not(.world--no-shopkeeper) .wood-counter { left: 0; right: 0; bottom: 0; height: 4.75rem; }
  .world:not(.world--no-shopkeeper) > .store { padding-top: 0; }
}

@media (min-width: 601px) and (max-width: 1199px) {
  .world:not(.world--no-shopkeeper) > .shopkeeper { height: clamp(13rem, 27vw, 16rem); margin-bottom: .5rem; }
  .world:not(.world--no-shopkeeper) .character-playground { inset: 0 0 2.75rem; max-width: none; }
  .world:not(.world--no-shopkeeper) .character-button { left: 0; bottom: 0; height: 100%; }
  .world:not(.world--no-shopkeeper) .speech { top: .5rem; }
  .world:not(.world--no-shopkeeper) .wood-counter { height: 3.5rem; }
  .world:not(.world--no-shopkeeper) .shopkeeper.is-collapsed { height: 4.5rem; }
}

@media (max-width: 600px) {
  .world:not(.world--no-shopkeeper) > .shopkeeper { height: 10.25rem; margin-bottom: .25rem; }
  .world:not(.world--no-shopkeeper) .character-playground { inset: 0 0 1.75rem; }
  .world:not(.world--no-shopkeeper) .character-button { left: 0; bottom: 0; width: 55%; height: 100%; }
  .world:not(.world--no-shopkeeper) .speech { top: .2rem; right: .25rem; width: 47%; max-height: 6.7rem; padding: .7rem .55rem .35rem; }
  .world:not(.world--no-shopkeeper) .speech p { min-height: 0; font-size: .75rem; line-height: 1.35; }
  .world:not(.world--no-shopkeeper) .speech-next { min-height: 1.5rem; padding-top: 0; }
  .world:not(.world--no-shopkeeper) .wood-counter { left: 0; right: 0; bottom: 0; height: 2.25rem; }
  .world:not(.world--no-shopkeeper) .counter-sign { bottom: 0; }
  .world:not(.world--no-shopkeeper) .collapse-character { min-height: 2.75rem; padding: .5rem .65rem; font-size: .625rem; }
  .world:not(.world--no-shopkeeper) .shopkeeper.is-collapsed { height: 3.75rem; }
  .store .category-list {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .store .category { flex: 0 0 auto; }
  .store .category__surface { white-space: nowrap; }
  .store .awning { height: 2.5rem; }
  .store .awning-stripes { inset-block-start: 1.35rem; }
  .store-masthead { padding-block: .35rem .25rem; }
  .store .category-list { margin-bottom: .375rem; }
  .store .product-illustration { aspect-ratio: 1.3; }
}

@media (min-width: 1600px) {
  .world:not(.world--no-shopkeeper) > .shopkeeper {
    --pf-counter-height: clamp(4.5rem, 5vw, 6rem);
    --character-art-height: max(0px, calc(100svh - var(--store-admin-gap) - var(--character-stage-top) - var(--pf-counter-height)));
    min-height: 0;
    max-height: none;
  }
  .world:not(.world--no-shopkeeper) .wood-counter { height: var(--pf-counter-height); }
}

@media (min-width: 1600px) and (max-height: 950px) {
  .world:not(.world--no-shopkeeper) .speech { width: clamp(12rem, 15vw, 15rem); padding: 1rem .85rem .5rem; }
  .world:not(.world--no-shopkeeper) .speech p { font-size: 1rem; line-height: 1.4; }
}

@media (min-width: 700px) and (max-width: 1199px) and (max-height: 500px) {
  .world:not(.world--no-shopkeeper) {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    column-gap: .75rem;
    width: calc(100% - 1rem);
    max-width: none;
    margin-inline: auto;
    align-items: start;
  }
  .world:not(.world--no-shopkeeper) > .shopkeeper { height: calc(100svh - 7rem); margin: 0; }
  .world:not(.world--no-shopkeeper) .character-playground { inset: 0 0 2.5rem; }
  .world:not(.world--no-shopkeeper) .character-button { width: 65%; }
  .world:not(.world--no-shopkeeper) .speech { top: .5rem; right: 0; width: 43%; padding: .875rem .5rem .35rem; }
  .world:not(.world--no-shopkeeper) .speech p { min-height: 0; font-size: .75rem; line-height: 1.35; }
  .world:not(.world--no-shopkeeper) .wood-counter { height: 2.75rem; }
  .world:not(.world--no-shopkeeper) > .store { padding-top: 0; }
  .store .category-list { flex-wrap: nowrap; overflow-x: auto; }
  .store .category { flex: 0 0 auto; }
  .store .category__surface { white-space: nowrap; }
}

@media (max-width: 1199px) {
  .world:not(.world--no-shopkeeper) .shopkeeper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    background: linear-gradient(90deg, #fff8e61c, #fff8e60d);
    pointer-events: none;
  }
}

/* A bounded visual novel dialogue window sits below the character and desk.
 * The counter sign is a physical nameplate on the counter's top edge. */
.world:not(.world--no-shopkeeper) .shopkeeper {
  --pf-dialogue-height: clamp(8.5rem, 18svh, 10.5rem);
  --pf-counter-height: 4.75rem;
}
.world:not(.world--no-shopkeeper) .character-playground {
  inset: 0 0 calc(var(--pf-dialogue-height) + var(--pf-counter-height));
  max-width: none;
}
.world:not(.world--no-shopkeeper) .character-button {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.world:not(.world--no-shopkeeper) .speech {
  top: calc(100% + var(--pf-counter-height) + .25rem);
  bottom: auto;
  left: .25rem;
  right: .25rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: auto;
  height: calc(var(--pf-dialogue-height) - .5rem);
  max-height: none;
  overflow: auto;
  border: 2px solid #995f49;
  border-radius: .9rem;
  background: linear-gradient(180deg, #fffdf5f7, #fff1d5f7);
  box-shadow: inset 0 0 0 3px #ffe2b6, inset 0 .25rem 0 #fff, 0 .3rem 0 #8e5943b8;
  color: #513b32;
  padding: 1rem 1.1rem .35rem;
  transform: none;
}
.world:not(.world--no-shopkeeper) .speech::before {
  content: '';
  position: absolute;
  top: -.125rem;
  bottom: auto;
  left: 1rem;
  z-index: 1;
  width: 3.5rem;
  height: .5rem;
  border: 1px solid #fff8e8;
  border-radius: 0 0 .4rem .4rem;
  background: linear-gradient(90deg, #f1bd6c, #f26f78);
  transform: none;
}
.world:not(.world--no-shopkeeper) .speech p {
  min-height: 0;
  margin: 0;
  font-size: clamp(.875rem, 1.1vw, 1rem);
  line-height: 1.45;
  text-align: left;
}
.world:not(.world--no-shopkeeper) .speech-next {
  flex: none;
  min-height: 2.75rem;
  margin: auto 0 0 auto;
  padding: .25rem .35rem;
  color: #a3314b;
  font-weight: 800;
}
.world:not(.world--no-shopkeeper) .speech-next span { font-size: .75rem; }
.world:not(.world--no-shopkeeper) .wood-counter {
  left: 0;
  right: 0;
  bottom: var(--pf-dialogue-height);
  height: var(--pf-counter-height);
}
.world:not(.world--no-shopkeeper) .counter-sign {
  left: 56%;
  right: auto;
  bottom: calc(var(--pf-dialogue-height) + var(--pf-counter-height) - 1rem);
  max-width: 40%;
  transform: rotate(-3deg);
}
.world:not(.world--no-shopkeeper) .keeper-foot {
  right: .25rem;
  bottom: calc(var(--pf-dialogue-height) + .25rem);
  left: auto;
}
.world:not(.world--no-shopkeeper) .shopkeeper.is-collapsed .keeper-foot { bottom: 0; }

@media (min-width: 1200px) {
  .world:not(.world--no-shopkeeper) { grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); }
}
@media (min-width: 1600px) {
  .world:not(.world--no-shopkeeper) .shopkeeper {
    --pf-dialogue-height: clamp(8rem, 18svh, 11rem);
    --pf-counter-height: clamp(4.5rem, 5vw, 6rem);
  }
}
@media (min-width: 601px) and (max-width: 1199px) {
  .world:not(.world--no-shopkeeper) > .shopkeeper { height: clamp(19rem, 40vw, 23rem); }
  .world:not(.world--no-shopkeeper) .shopkeeper { --pf-dialogue-height: 6.75rem; --pf-counter-height: 3rem; }
  .world:not(.world--no-shopkeeper) .speech { padding: .65rem .9rem .25rem; }
}
@media (max-width: 600px) {
  .world:not(.world--no-shopkeeper) > .shopkeeper { height: 16rem; }
  .world:not(.world--no-shopkeeper) .shopkeeper { --pf-dialogue-height: 6.5rem; --pf-counter-height: 2.25rem; }
  .world:not(.world--no-shopkeeper) .character-button { width: 57%; }
  .world:not(.world--no-shopkeeper) .speech { left: 0; right: 0; padding: .35rem .75rem .125rem; }
  .world:not(.world--no-shopkeeper) .speech p { font-size: .75rem; line-height: 1.3; }
  .world:not(.world--no-shopkeeper) .speech-next { min-height: 2.5rem; padding-block: 0; }
  .world:not(.world--no-shopkeeper) .counter-sign { left: 52%; max-width: 44%; bottom: calc(var(--pf-dialogue-height) + var(--pf-counter-height) - .75rem); }
  .world:not(.world--no-shopkeeper) .collapse-character { min-height: 2.75rem; }
}