:root {
  background: #f0e7d7;
  color: #2b2925;
  --accent: #315a48;
  --line: #d7c9b5;
  --paper: #fffcf4;
}

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: .35rem;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid #b5c7a7;
  border-top: .55rem solid #315a48;
  border-radius: .95rem;
  background: #e8efdf;
}

.shop-hero h1 { font-family: Georgia, "Hiragino Mincho ProN", serif; }
.shop-hero .intro { max-width: 37rem; }
.shop-art { display: block; width: 100%; height: auto; border-radius: .65rem; }
.shop-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.shop-jump a { display: inline-flex; align-items: center; min-height: 44px; }
.shop-jump .shop-start { padding: .5rem .85rem; border-radius: .5rem; color: white; background: var(--accent); font-weight: 700; }
.chapter-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.chapter-controls select { min-width: min(16rem, 100%); margin: 0; padding: .35rem; }
.play-panel h3 { margin: .85rem 0 .4rem; }
.goal { padding: .65rem .75rem; border-left: 4px solid #a96e30; background: #fbefda; font-weight: 650; }
details summary { min-height: 44px; padding: .55rem 0; cursor: pointer; color: var(--accent); }
.hint { font-weight: 650; }

.meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}
.meters div { padding: .55rem; border: 1px solid var(--line); border-radius: .6rem; background: #f3eddf; }
.meters dt { color: #534b3a; font-size: .86rem; }
.meters dd { margin: 0; color: #213f34; font-weight: 750; font-size: clamp(1rem, 4vw, 1.55rem); }

.desk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; }
.first-order-tip { margin: 0 0 .65rem; padding: .55rem .7rem; border-left: 3px solid var(--accent); background: #e8efdf; }
.order-list { display: grid; gap: .45rem; }
.order { display: grid; gap: .2rem; text-align: start; }
.order[aria-pressed="true"] { background: #dcead9; box-shadow: inset 0 0 0 1px var(--accent); }
.order-name { font-weight: 750; }
.order-detail { font-size: .9rem; }
.forecast { min-height: 4rem; padding: .65rem .8rem; border-radius: .55rem; background: #f3eddf; }
.forecast[data-risk="true"] { background: #f7e4d4; color: #6d3422; }
.ledger { padding: .25rem .75rem .7rem; border: 1px solid var(--line); border-radius: .65rem; background: #f8f3e8; }
.ledger table { width: 100%; border-collapse: collapse; text-align: start; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: .45rem .2rem; border-bottom: 1px solid var(--line); text-align: start; }
.ending { padding: clamp(1rem, 4vw, 1.8rem); border: 1px solid #b5c7a7; border-radius: .8rem; background: #e8efdf; }
.ending h3 { margin: .3rem 0; color: #274737; font-family: Georgia, "Hiragino Mincho ProN", serif; font-size: clamp(1.3rem, 5vw, 2rem); }
.ending p { max-width: 35rem; }
.ending-summary { width: fit-content; padding: .35rem .65rem; border-radius: .35rem; background: #fffcf4; font-weight: 700; }
.replay { padding-top: .75rem; border-top: 1px solid var(--line); }
.journal { margin-top: 1rem; }
.journal td { overflow-wrap: anywhere; }
.journal th:last-child, .journal td:last-child { width: 6rem; }
.shop footer { padding: .75rem 0; }
@media (max-width: 42rem) {
  .shop-hero { grid-template-columns: 1fr; }
  .shop-art { width: min(100%, 15rem); justify-self: end; }
  .desk { grid-template-columns: 1fr; }
}