/* Shop = a goblin trading-post room: backpack + hero + crate on the left, wall shelves + sell chest + merchant on the right. */
.scene { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px 22px;
  padding: 14px 18px 0; border-radius: 8px; min-height: 640px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(0,0,0,.35) 78.4%, transparent 79%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 120px),
    radial-gradient(ellipse at 60% 30%, #4a3520, #2a1d10 70%, #1a1209);
  box-shadow: inset 0 0 0 3px #1a0f06, inset 0 0 0 6px #5a3d22, inset 0 0 0 7px #000, inset 0 0 80px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.7); }
/* floorboards */
.scene::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 64px; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, #4a2f18 0 90px, #3a2410 90px 92px), linear-gradient(#2a1a0c, #1a1006); opacity: .9; }
.scene > * { position: relative; z-index: 1; }

.scene-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene .sign { font-family: var(--font-head); font-size: 20px; color: #3a2410; padding: 5px 22px; border-radius: 4px;
  background: linear-gradient(#e8d2a8, #c9ad7a); box-shadow: inset 0 0 0 2px #8a6d3b, inset 0 0 0 3px #f6e6c4, 0 3px 0 #000, 0 4px 8px rgba(0,0,0,.6); }
.top-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fight-sign { font-family: var(--font-head); font-size: 30px; line-height: 1; color: #fff3d0; padding: 10px 34px 12px; border: 0; cursor: pointer; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,90,40,.6);
  background: radial-gradient(ellipse at 50% 30%, #c8321c, #7a1608); box-shadow: inset 0 0 0 2px #e0b84a, inset 0 0 0 4px #4a0c04, 0 4px 0 #000, 0 0 24px rgba(220,60,20,.45);
  transition: transform .12s; }
.fight-sign small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #f0d090; font-family: var(--font-body, inherit); }
.fight-sign:active { transform: scale(.97); }

.scene-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.scene-left .board-wrap { background: none; box-shadow: none; padding: 0; }
.scene-left .selbar { min-height: 30px; }
.scene-floor { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-bottom: 14px; }

/* character stats: a parchment card */
.stats-card { width: 190px; flex: none; padding: 10px 12px; border-radius: 4px; color: #3a2410; font-size: 13px;
  background: linear-gradient(#ead6ae, #cdb282); box-shadow: inset 0 0 0 2px #8a6d3b, inset 0 0 18px rgba(120,80,30,.35), 0 4px 10px rgba(0,0,0,.6); }
.stats-card h4 { margin: 0 0 6px; text-align: center; font-family: var(--font-head); font-size: 16px; color: #3a2410; }
.srow { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; border-radius: 3px; }
.srow b { display: flex; align-items: center; gap: 4px; color: #2a1608; }
.srow.s-gold { background: linear-gradient(90deg, rgba(240,190,40,.45), transparent); }
.srow.s-hp { background: linear-gradient(90deg, rgba(220,70,50,.4), transparent); }
.srow-sep { height: 1px; margin: 5px 0; background: rgba(90,60,20,.4); }
.stats-card .hearts { color: #c0281c; } .stats-card .hearts .gone { color: rgba(60,30,10,.25); }

.me { width: 118px; height: 186px; flex: none; animation: idle 2.6s ease-in-out infinite; transform-origin: 50% 100%; }

/* storage crate */
/* a floor-level bin: fixed height, items lie in a pile (storage-bin.css places them); wider than the old flex crate */
.storage.crate { position: relative; flex: 2 1 240px; min-width: 200px; height: 150px; padding: 0; border: 0; border-radius: 3px;
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3)),
    repeating-linear-gradient(0deg, #6b4423 0 34px, #5a381c 34px 36px, #000 36px 37px),
    linear-gradient(90deg, #7a4e28, #5e3b1d);
  box-shadow: inset 0 0 0 6px #3e2610, inset 0 0 0 8px #8a5a2e, inset 0 0 0 9px #000, inset 0 12px 24px rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.6); }
.storage.crate::before, .storage.crate::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 11px; pointer-events: none;
  background: linear-gradient(90deg, #4a2d14, #8a5a2e, #4a2d14); box-shadow: inset 0 0 0 1px #000; }
.storage.crate::before { left: 6px; } .storage.crate::after { right: 6px; }
.crate-label { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; pointer-events: none;
  font-family: var(--font-head); letter-spacing: .18em; text-transform: uppercase; font-size: 14px; color: rgba(230,200,150,.45); text-shadow: 0 1px 0 #000; }
.storage.crate.drop-hot { background-color: transparent; box-shadow: inset 0 0 0 6px #3e2610, inset 0 0 0 8px var(--gold), inset 0 0 0 9px #000, inset 0 12px 24px rgba(0,0,0,.8), 0 0 18px rgba(255,209,0,.4); }

/* wall shelves */
.scene-right { display: flex; flex-direction: column; min-width: 0; }
.reroll-tag { align-self: flex-start; margin-left: 8%; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer;
  border: 0; padding: 4px 12px 5px; font-size: 13px; color: #3a2410; border-radius: 3px; transform: rotate(-4deg); position: relative;
  background: linear-gradient(#ead6ae, #cdb282); box-shadow: inset 0 0 0 2px #8a6d3b, 0 3px 6px rgba(0,0,0,.6); transition: transform .12s; }
.reroll-tag::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 22px; background: #c9a24a; }
.reroll-tag b { display: flex; align-items: center; gap: 4px; font-size: 18px; font-family: var(--font-head); }
.reroll-tag:disabled { opacity: .5; cursor: not-allowed; }
.shelves { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 0; }
.shelf { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; min-height: 120px; padding: 0 16px 14px; }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 2px;
  background: linear-gradient(#8a5a2e, #5a381c 60%, #3a2410); box-shadow: 0 1px 0 #000, 0 8px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.25); }
.shelf::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -12px; height: 12px;
  background: linear-gradient(90deg, #3a2410 0 10px, transparent 10px calc(100% - 10px), #3a2410 calc(100% - 10px)); }

.ware { --qc: var(--q-common); position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 8px; }
.ware.r-uncommon { --qc: var(--q-uncommon); } .ware.r-rare { --qc: var(--q-rare); } .ware.r-epic { --qc: var(--q-epic); } .ware.r-legendary { --qc: var(--q-legendary); }
.ware-art { cursor: pointer; line-height: 0; transition: transform .14s; transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px color-mix(in srgb, var(--qc) 65%, transparent)); }
.ware.poor .ware-art { cursor: not-allowed; }
.ware-icon img { width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: 0 0 0 1px #000; }
.ware-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ware .lock { border: 0; background: none; cursor: pointer; font-size: 12px; padding: 0; opacity: .5; }
.ware.locked .lock { opacity: 1; }
.ware.locked .ware-art { filter: drop-shadow(0 4px 3px rgba(0,0,0,.7)) drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 9px var(--gold)); }

/* yellow tent price card: big number + a coin, nothing behind it */
.tag { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 12px 3px 14px; border: 0; cursor: pointer; min-height: 0;
  font-family: var(--font-head); font-size: 22px; line-height: 1; color: #fff; background: none; }
.tag::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background: linear-gradient(#f6cf3a, #e0a816); }
.tag::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; z-index: -1; background: #8a6200; clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%); }
.tag b { -webkit-text-stroke: 4px #2a1608; paint-order: stroke fill; text-shadow: 0 2px 0 #2a1608; }
.tag:disabled { cursor: not-allowed; filter: saturate(.35) brightness(.75); }
.tag.empty { opacity: .6; cursor: default; padding: 6px 16px; }
.ware.sold { min-width: 70px; justify-content: center; }
.coin { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe27a, #d9a014 60%, #9a6a00); box-shadow: 0 0 0 1.5px #5a3a00, inset 0 0 0 3px rgba(255,240,170,.55); }
.tag .coin { width: 18px; height: 18px; }

/* sell chest + merchant */
.scene-floor.right { justify-content: flex-end; gap: 0; }
.sellchest { position: relative; width: 150px; height: 120px; flex: none; cursor: default; transition: transform .14s; transform-origin: 50% 100%; }
.sellchest.drop-hot { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 0 12px var(--gold)); }
.chest-label { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-family: var(--font-head); font-size: 14px; color: #f0d090; text-shadow: 0 1px 0 #000, 0 0 4px #000; pointer-events: none; }
.merchant { width: 150px; height: 205px; flex: none; animation: idle 2.2s ease-in-out infinite; transform-origin: 50% 100%; margin-right: 6px; }
@keyframes idle { 50% { transform: translateY(-3px) scaleY(1.015); } }

@media (max-width: 900px) {
  .scene { grid-template-columns: 1fr; padding: 10px 10px 0; min-height: 0; }
  .scene .sign { display: none; }
  .scene-top { justify-content: center; }
  .scene-floor { flex-wrap: wrap; }
  .stats-card { width: 100%; order: 3; }
  .me { width: 74px; height: 118px; }
  .storage.crate { min-width: 0; height: 132px; }
  .merchant { width: 96px; height: 132px; } .sellchest { width: 110px; height: 88px; }
  .shelf { min-height: 96px; padding: 0 6px 14px; flex-wrap: wrap; }
}

/* shelf wares are real pieces: grab and drag them straight into a bag */
.ware-piece { position: relative; }
.ware-piece .piece { left: 0; top: 0; }
.ware-piece .piece .cell { cursor: grab; }
.ware-piece .star { display: none !important; }
.ware.poor .ware-piece .piece .cell { cursor: not-allowed; }

/* --- shelf HD pass: real plank (top face + lit front edge + grain), contact shadows, crisper icons --- */
.shelf::after { height: 18px; border-radius: 3px 3px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255,226,170,.55) 0 2px, rgba(255,214,150,.16) 2px 6px, transparent 6px),
    repeating-linear-gradient(92deg, rgba(0,0,0,.0) 0 14px, rgba(0,0,0,.16) 14px 15px, rgba(255,210,150,.06) 15px 17px, rgba(0,0,0,0) 17px 38px),
    repeating-linear-gradient(88deg, rgba(60,30,8,.0) 0 53px, rgba(60,30,8,.28) 53px 54px, rgba(60,30,8,0) 54px 97px),
    linear-gradient(180deg, #a56b36 0, #8a5a2e 34%, #5f3b1c 72%, #3a2410 100%);
  box-shadow: 0 1px 0 #000, 0 3px 0 rgba(0,0,0,.35), 0 10px 14px rgba(0,0,0,.6), inset 0 -2px 0 rgba(0,0,0,.45), inset 1px 0 0 rgba(255,220,160,.2); }
.shelf::before { height: 14px; bottom: -14px;
  background: linear-gradient(90deg, #4a2e16 0 10px, transparent 10px calc(100% - 10px), #4a2e16 calc(100% - 10px));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
/* soft contact shadow where each ware touches the plank */
.ware-art { position: relative; }
.ware-art::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 12px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), rgba(0,0,0,0)); filter: blur(2px); pointer-events: none; }
.ware-art { filter: drop-shadow(0 5px 3px rgba(0,0,0,.65)) drop-shadow(0 0 8px color-mix(in srgb, var(--qc) 55%, transparent)); }
/* icons: HD source, smooth downscale, a touch more punch + a soft top gloss on the frame */
.piece .icon { image-rendering: auto; filter: contrast(1.05) saturate(1.1); }
.ware-piece .piece.item .frame { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--qc), inset 0 0 14px color-mix(in srgb, var(--qc) 40%, transparent), 0 3px 6px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); }

/* ======================= SCENE v3: lit merchant room with depth (wall / lanterns / floor plane / vignette) ======================= */
#app:has(.scene) { max-width: none; padding: 10px 14px 14px; }
.scene { min-height: max(620px, calc(100vh - 34px)); gap: 6px 28px; padding: 16px 28px 0; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  background: #140d07;
  box-shadow: inset 0 0 0 3px #120a04, inset 0 0 0 6px #5a3d22, inset 0 0 0 7px #000, 0 10px 30px rgba(0,0,0,.8); }
.scene::after { display: none; }
.scene > .scene-vig { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 8px; }
.scene-vig { background: radial-gradient(ellipse 78% 82% at 50% 46%, transparent 55%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(0,0,0,.45), transparent 12%);
  box-shadow: inset 0 0 90px 10px rgba(0,0,0,.75); z-index: 3 !important; }

/* top row; the round history is a labelled plaque of win/loss pips (it was a stray green dot) */
.scene-top { align-items: flex-start; }
.history:not(:empty) { margin: 0; justify-content: center; gap: 5px; padding: 3px 10px; border-radius: 10px; background: rgba(10,6,2,.6); box-shadow: inset 0 0 0 1px #5a3d22, 0 2px 4px rgba(0,0,0,.6); }
.history i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-style: normal; font-size: 11px; font-weight: bold; line-height: 1; color: #fff; text-shadow: 0 1px 0 #000; }
.history .w::after { content: "\2713"; } .history .l::after { content: "\2715"; } .history .d::after { content: "="; }

/* left: backpack board big, framed like a leather pack on the lit wall, hint tucked under it */
.scene-left { gap: 6px; }
.scene-left .board-wrap { margin-top: auto; align-self: center; padding: 16px 18px 18px; border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,190,110,.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #4a3320, #2a1b0e);
  box-shadow: inset 0 0 0 2px #1a0f06, inset 0 0 0 4px #7a5630, inset 0 0 0 5px #000, inset 0 10px 26px rgba(0,0,0,.8), inset 0 -8px 18px rgba(0,0,0,.5), 0 16px 26px -6px rgba(0,0,0,.85), 0 0 50px rgba(255,160,70,.12); }
.scene-left .selbar { justify-content: center; text-align: center; min-height: 30px; color: #d8c49a; text-shadow: 0 1px 2px #000; }
.scene-left .selbar .muted { font-size: 13px; }
.scene-floor { margin-top: auto; padding-bottom: 12px; min-height: 0; }
.scene-floor .me { filter: drop-shadow(0 6px 4px rgba(0,0,0,.6)); }
.me, .merchant { position: relative; }
.me::after, .merchant::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -6px; height: 16px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); }

/* storage = a chest on the floor: iron straps, dark inside lip */
.storage.crate { background:
    radial-gradient(ellipse at 50% -20%, rgba(0,0,0,.0), rgba(0,0,0,.55) 90%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 38px, rgba(0,0,0,.45) 38px 40px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, rgba(255,200,140,.05) 1px 3px, transparent 3px 22px),
    linear-gradient(180deg, #7c5128, #5a3819 70%, #402711);
  box-shadow: inset 0 0 0 5px #2e1b0b, inset 0 0 0 7px #7a5630, inset 0 0 0 8px #000, inset 0 14px 26px rgba(0,0,0,.85), 0 14px 18px -4px rgba(0,0,0,.8); }
.storage.crate::before, .storage.crate::after { width: 12px; background: linear-gradient(90deg, #26262a, #6a6a72 45%, #2a2a2e); box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(0,0,0,.5); }
.crate-label { color: rgba(240,210,150,.55); }

/* right: shelves fill the wall; thick boards with top face, lit front lip, wall shadow and brackets */
.reroll-tag { margin-top: -2px; margin-bottom: 8px; }
.shelves { flex: 1; justify-content: space-evenly; gap: 30px; padding: 20px 0 6px; }
.shelf { flex: 1; align-items: flex-end; min-height: 110px; padding: 0 22px 18px; }
.shelf::after { height: 26px; border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,226,170,.65) 0 1px, rgba(255,214,150,.30) 1px 8px, rgba(0,0,0,.35) 8px 9px, transparent 9px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 61px, rgba(40,20,5,.35) 61px 62px, rgba(0,0,0,0) 62px 140px),
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 14px, rgba(0,0,0,.16) 14px 15px, rgba(255,210,150,.06) 15px 17px, rgba(0,0,0,0) 17px 38px),
    linear-gradient(180deg, #b27a40 0, #9b6a35 34%, #6a4220 36%, #5a381a 80%, #321e0c 100%);
  box-shadow: 0 1px 0 #000, 0 16px 16px -4px rgba(0,0,0,.7), 0 30px 26px -6px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.5), inset 1px 0 0 rgba(255,220,160,.25); }
.shelf::before { left: 10%; right: 10%; bottom: -22px; height: 22px; z-index: 0;
  background:
    linear-gradient(135deg, #4a2e16 0 50%, transparent 50%) left top / 22px 22px no-repeat,
    linear-gradient(225deg, #4a2e16 0 50%, transparent 50%) right top / 22px 22px no-repeat;
  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.6)); }
/* shelf items sit on the plank with a pooled contact shadow and only a faint footprint */
.ware-art::after { left: -4%; right: -4%; bottom: -5px; height: 14px; background: radial-gradient(closest-side, rgba(0,0,0,.8), rgba(0,0,0,0)); filter: blur(1.5px); z-index: -1; }
.ware-piece .piece .cell:not(.fill) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* price tag hangs from a nail on the plank directly under its item */
.ware { flex-direction: column; align-items: center; }
.ware-foot { position: absolute; left: 50%; top: calc(100% + 11px); transform: translateX(-50%); z-index: 3; flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
.ware-foot::before { content: ""; position: absolute; left: 50%; top: -7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ddd, #555); box-shadow: 0 1px 1px #000; }
.ware .tag { font-size: 20px; padding: 3px 11px 2px 13px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.7)); }
.ware.sold { min-width: 90px; }
.ware.sold .ware-foot { position: static; transform: none; }
.ware .lock { font-size: 13px; filter: drop-shadow(0 1px 1px #000); }
.scene-floor.right { gap: 18px; align-items: flex-end; }

@media (max-width: 900px) {
  .scene { padding: 10px 10px 0; min-height: 0; }
  #app:has(.scene) { padding: 8px; }
  .scene-left .board-wrap { margin-top: 0; padding: 8px; }
  .shelves { gap: 26px; padding-top: 14px; }
  .shelf { flex: none; padding: 0 8px 21px; }
  .scene-floor { margin-top: 0; }
}

/* characters: big, standing on the floor plane (hero ~ 36vh, merchant a little shorter); they overlap upward into the wall space */
.scene-floor .me { width: clamp(150px, 36vh, 400px); height: clamp(186px, 38vh, 440px); margin-top: calc(clamp(186px, 38vh, 440px) * -.32); }
.scene-floor .merchant { width: clamp(150px, 34vh, 380px); height: clamp(205px, 36vh, 410px); margin-top: calc(clamp(205px, 36vh, 410px) * -.32); margin-right: 0; }
.scene-floor.right .sellchest { width: clamp(150px, 17vh, 200px); height: clamp(120px, 14vh, 160px); }
.ware.sold .tag, .ware.sold .ware-foot { display: none; }
@media (max-width: 900px) {
  .scene-floor .me { width: 96px; height: 150px; margin-top: 0; }
  .scene-floor .merchant { width: 110px; height: 150px; margin-top: 0; }
  .scene-floor.right .sellchest { width: 110px; height: 88px; }
}
@media (max-width: 900px) {
  .scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .scene-left .board-wrap { align-self: flex-start; max-width: 100%; }
  .scene-floor .me, .scene-floor .merchant { margin-top: 0; }
}
@media (min-width: 901px) {
  .scene-left .selbar { max-width: 34%; align-self: center; margin-right: auto; margin-left: 4%; justify-content: flex-start; text-align: left; flex-wrap: wrap; }
}
@media (min-width: 901px) {
  .scene { height: max(620px, calc(100vh - 34px)); grid-template-rows: auto minmax(0, 1fr); }
  .scene-left, .scene-right { min-height: 0; }
  .stats-card { padding: 8px 12px; } .srow { padding: 1px 4px; } .stats-card h4 { margin-bottom: 3px; }
}

/* ======================= SHOP FIX PASS (layout: fit, shelves clear of the goblin, board grid, hint, class row, crate, mobile) ======================= */
/* the board is a 9x7 play grid (bags can go anywhere in it), so the empty part reads as deliberate slots, not an empty slab */
/* interaction pass: the empty board is a plain worn surface (no Tetris-well lattice); only bag cells read as slots.
   While a BAG is dragged (drag.js sets body.drag-bag) faint cell marks fade in so the player can aim it. */
.scene .board { background-image: radial-gradient(ellipse at 50% 45%, rgba(255,214,150,.035), transparent 70%);
  background-size: auto; box-shadow: inset 0 0 0 1px rgba(255,214,150,.05); border-radius: 4px; transition: box-shadow .2s; }
body.drag-bag .scene .board { background-image: radial-gradient(circle at center, rgba(255,214,150,.22) 1.4px, transparent 1.9px);
  background-size: var(--cell) var(--cell); box-shadow: inset 0 0 0 1px rgba(255,214,150,.14); }
.scene-left .board-wrap { padding: 10px 12px 12px; }

/* character card: Class value was a pale class colour on parchment; dark text + a colour dot */
.cls-val { display: inline-flex; align-items: center; gap: 6px; color: #2a1608; font-weight: bold; }
.cls-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px #2a1608, inset 0 0 0 1px rgba(255,255,255,.35); }

/* non-rectangular shelf wares: only the icon square is shown, resting on the plank (the empty footprint stays invisible) */
.ware-piece.trim { overflow: hidden; border-radius: 4px; }
.ware-piece.trim .piece .frame.shape { display: none; }
.ware-piece.trim .piece .icon { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--qc); }

/* storage hint */
.crate-hint { position: absolute; left: 22px; right: 22px; top: 4px; text-align: center; pointer-events: none; font-size: 11px; line-height: 1.2; color: rgba(255,226,170,.8); text-shadow: 0 1px 2px #000; }

@media (min-width: 901px) {
  /* footer stays but as one line so the room fits the viewport exactly: no page scroll */
  body:has(.scene) .fcp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 18px; padding: 2px 16px; }
  .scene { height: calc(100vh - 47px); min-height: 500px; padding-top: 12px; }
  .scene-left .selbar { max-width: none; align-self: stretch; margin: 0; justify-content: center; text-align: center; min-height: 26px; }
  .scene-floor .me { width: clamp(120px, 24vh, 320px); height: clamp(170px, 34vh, 440px); margin-top: calc(clamp(170px, 34vh, 440px) * -.12); flex: 0 1 auto; min-width: 0; }
  .stats-card { padding: 6px 12px 8px; font-size: 13px; line-height: 1.2; } .stats-card h4 { font-size: 15px; margin-bottom: 2px; } .srow { padding: 0 4px; } .srow-sep { margin: 3px 0; }
  .scene-floor .merchant { width: clamp(120px, 23vh, 300px); height: clamp(165px, 30vh, 380px); margin-top: 0; }
  .scene-floor.right .sellchest { width: clamp(130px, 15vh, 190px); height: clamp(104px, 12vh, 150px); }
  .scene-floor { gap: 8px; }
  .storage.crate { flex: 3 1 400px; min-width: 240px; height: clamp(150px, 27vh, 280px); padding: 0; }   /* bin cells are board-sized (56..64px): a deeper, wider crate */
  .scene-floor .stats-card { width: 172px; } .scene-left .scene-floor .me { flex-shrink: 4; min-width: 110px; }   /* room for a wide storage bin (the hero model is narrow) */
  /* 2 shelves, each as tall as the tallest ware the shop can offer (--shelf-h from shopScreen.js: tallest x shelf cell +
     plank pad - 4px), so a 4-tall ware pokes past the rail above by 4px at most; 52px under the bottom plank so its price
     tags clear the sell chest's sign, which rises ~34px above the floor row */
  .shelves { flex: 1 1 0; min-height: 0; justify-content: space-evenly; gap: 0; padding: 0 0 52px; }
  .shelf { flex: none; min-height: 0; height: var(--shelf-h, auto); padding-bottom: 20px; }
  /* the reroll tag hangs over the top shelf's left end (out of flow, so the shelves get its row); that shelf starts after it */
  .scene-right { position: relative; }
  .scene-right .reroll-tag { position: absolute; top: -4px; left: 8%; margin: 0; z-index: 2; }
  .scene-right .shelf:first-child { padding-left: calc(8% + 84px); }
  .scene-right .scene-floor.right { margin-top: 0; }
}

@media (max-width: 900px) {
  /* compact phone layout: board, then the shop, with the sell chest pinned bottom-right so a drag can always reach it */
  .scene { display: flex; flex-direction: column; gap: 8px; }
  .scene-left, .scene-right { display: contents; }
  .scene-top { order: 0; }
  .scene-left .board-wrap { order: 1; align-self: center; }
  .scene-left .selbar { order: 2; min-height: 0; text-align: center; justify-content: center; max-width: none; }
  .scene-right .reroll-tag { order: 3; align-self: center; margin: 22px 0 0; }
  .scene-right .shelves { order: 4; padding-top: 6px; gap: 26px; }
  .scene-left .scene-floor { order: 5; }
  .scene-right .scene-floor.right { order: 6; z-index: 5; }
  .scene-floor.right .sellchest { position: fixed; right: 8px; bottom: 8px; width: 92px; height: 74px; z-index: 40; filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)); }
  .scene-floor.right { justify-content: flex-start; }
  .scene-floor .me { width: 80px; height: 120px; }
  .scene-floor .merchant { width: 96px; height: 130px; }
  .stats-card { order: 0; width: 100%; }
  .scene { padding-bottom: 92px; }
}

/* interaction pass: the selection bar always sits above the hero body that overlaps it from the floor row */
.scene-left .selbar { position: relative; z-index: 6; }
.scene .m3d, .scene .m3d-canvas { pointer-events: none; }
@media (min-width: 901px) {
  /* footer disclaimer: one full line, not clipped (the <p> default margin pushed it out of its 18px box) */
  body:has(.scene) .fcp { height: auto; min-height: 18px; line-height: 16px; box-sizing: border-box; }
  body:has(.scene) .fcp p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ======================= SELL CHEST beside the storage bin (owner ask 11-04: "right next to storage and 4x its size") ======================= */
@media (min-width: 901px) {
  /* chest = left end of the right floor, so only the column gap separates it from the bin; the goblin keeps the right end */
  .scene-right .scene-floor.right { justify-content: space-between; align-items: flex-end; }
  /* 2x width and height of the old clamp(130..190 x 104..150): ~300x240 at 1280x800 */
  .scene-floor.right .sellchest { width: clamp(260px, 37.5vh, 300px); height: clamp(208px, 30vh, 240px); margin-left: -6px; }
}

/* ======================= HERO SCALE PASS (owner 11-04 Ready Check: "character model is far too small in the shop") =======================
   Desktop: the hero stands ~45vh tall on the floor line at the far left of the left column; the board sits to the hero's
   right (right-aligned, cell size from shopScreen.js shopCell() leaves the hero its width); the stats card moves up onto the
   wall above the hero; the goblin is scaled to pair with the hero (shorter, as a goblin is). Nothing overlaps: hero top is
   below the stats card, board starts right of the hero, the crate keeps the rest of the floor. */
@media (min-width: 901px) {
  .scene { --hero-h: clamp(300px, 48vh, 560px); --hero-w: calc(var(--hero-h) * .64); --crate-h: clamp(150px, 27vh, 280px);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }   /* owner 11-06 "the bag is too small": the board column takes 1.6 shares */
  .scene-left { position: relative; }
  .scene-left .board-wrap { align-self: flex-end; margin-right: 0; }
  .scene-left .selbar { padding-left: calc(var(--hero-w) + 8px); box-sizing: border-box; }
  .scene-left .scene-floor .stats-card { position: absolute; left: 0; top: 0; z-index: 3; width: 172px; }
  .scene-left .scene-floor .me { flex: 0 0 var(--hero-w); width: var(--hero-w); min-width: 0; height: var(--hero-h);
    margin-top: calc(var(--crate-h) - var(--hero-h)); }   /* in-flow height = the crate's, the body rises up the wall */
  .storage.crate { height: var(--crate-h); }
  .scene-floor .merchant { --gob-h: calc(var(--hero-h) * .75); height: var(--gob-h); width: calc(var(--gob-h) * .75); flex: 0 0 auto; margin-top: 0; }
  .scene-floor.right .sellchest { --chest-w: min(clamp(240px, 36vh, 300px), 18vw); width: var(--chest-w); height: calc(var(--chest-w) * .8); }
}

/* shoploop: hover-only rules gated to real hover devices; touch gets :active */
@media (hover: hover) {
  .fight-sign:hover { transform: scale(1.05) rotate(-1deg); }
  .reroll-tag:hover:not(:disabled) { transform: rotate(3deg); }
  .ware-art:hover { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 8px 5px rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--qc)); }
  .ware .lock:hover { opacity: 1; }
  .tag:hover:not(:disabled) { transform: translateY(-1px); }
  .ware-art:hover::after { opacity: .6; transform: translateY(4px) scaleX(.9); }
}
.tag:active:not(:disabled), .reroll-tag:active:not(:disabled), button.sign:active, .ware-art:active { transform: scale(.96); filter: brightness(1.15); }