/* Kriegswerk — the furniture stores (stores-ui.js, stores-scene.js): Home → Shops and the shop window over the game.
   z-index 45: over the game, under the game's own modals (50), toasts (60) and the tooltip (70). The Soviet touch is one rule
   under body.kw-fac-su at the end. */

/* ---------------- Home → Shops ---------------- */
.kw-st-list { display: flex; flex-direction: column; gap: 6px; }
.kw-st-card-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-st-card-row > img { flex: 0 0 auto; image-rendering: pixelated; }
.kw-st-card-row > .kw-btn { flex: 0 0 auto; align-self: center; }
.kw-st-card-row.is-off { opacity: .6; }
.kw-st-cmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kw-st-cmain small { color: var(--kw-dim); line-height: 1.25; }
.kw-st-dim { color: var(--kw-dim); }
.kw-st-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.kw-st-tag { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 12px; line-height: 18px; color: var(--kw-text); background: #2b2a21; border: 1px solid #45422f; border-radius: 2px; }
.kw-st-tag.is-red { color: #fff4ee; background: #a8241e; border-color: #5a1410; }
.kw-st-tag.is-warn { color: var(--kw-gelb2); border-color: #6a5a2a; }
.kw-st-uqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kw-st-uq { display: inline-flex; gap: 6px; align-items: center; padding: 3px 8px 3px 3px; background: linear-gradient(#3a1a1c, #2a1214); border: 1px solid #c8a040; border-radius: 3px; }
.kw-st-uq img { image-rendering: pixelated; background: #1a0e0e; }
.kw-st-uq span { display: flex; flex-direction: column; line-height: 1.15; }
.kw-st-uq b { font-size: 13px; color: #f0d070; }
.kw-st-uq small { font-size: 12px; color: var(--kw-dim); }
.kw-st-owned { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* ---------------- the shop window ---------------- */
.kw-st { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: #0d0c09; color: var(--kw-text); font-family: var(--kw-font); animation: kw-fade .15s ease; }
.kw-st-top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; background: linear-gradient(#262419, #1b1a14); border-bottom: 1px solid #0a0907; }
.kw-st-top > img { image-rendering: pixelated; flex: 0 0 auto; }
.kw-st-top h3 { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; font-family: var(--kw-stencil); font-weight: 400; font-size: 20px; letter-spacing: .03em; color: var(--kw-paper); line-height: 1.1; }
.kw-st-top h3 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-st-top h3 small { font-family: var(--kw-font); font-size: 13px; letter-spacing: 0; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-st-modes { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.kw-st-modes .kw-chip[aria-pressed="true"] { color: #1b1a14; background: var(--kw-gelb); border-color: var(--kw-gelb2); }
.kw-st-have { flex: 0 0 auto; min-width: 96px; text-align: right; font-size: 15px; }
.kw-st-val { display: inline-flex; gap: 4px; align-items: center; color: var(--kw-gelb2); }
.kw-st-secs { flex: 0 0 auto; padding: 4px 12px 6px; background: #17160f; border-bottom: 1px solid #0a0907; }
.kw-st-strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kw-st-strip::-webkit-scrollbar { display: none; }
.kw-st-sec { flex: 0 0 auto; white-space: nowrap; font-size: 13px; padding: 2px 8px; }
.kw-st-sec i { margin-right: 4px; }
.kw-st-sec[aria-current="true"] { border-color: var(--kw-gelb); color: var(--kw-gelb2); }
.kw-st-sec.is-uq { border-color: #8a6a28; }
.kw-st-mini { position: relative; height: 4px; margin-top: 4px; background: #2b2a21; border-radius: 2px; }
.kw-st-mini i { position: absolute; top: 0; bottom: 0; left: 0; width: 10%; background: var(--kw-gelb); border-radius: 2px; }
.kw-st-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.kw-st-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #120e0c; }
.kw-st-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; cursor: default; }
.kw-st.is-cursor .kw-st-stage canvas { cursor: grab; }
.kw-st-hint { position: absolute; left: 10px; bottom: 8px; max-width: calc(100% - 20px); padding: 3px 8px; font-size: 12px; color: var(--kw-dim); background: rgba(13, 12, 9, .72); border-radius: 2px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the card over the view */
.kw-st-pop { position: absolute; left: 12px; top: 12px; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 52px); overflow-y: auto; padding: 10px; background: #1e1b16; border: 1px solid #5a5640; border-radius: 3px; box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
.kw-st-pop[hidden] { display: none; }
.kw-st-pop.is-uq { border-color: #c8a040; background: linear-gradient(#2a1a18, #1e1b16 40%); }
.kw-st-pop.is-sale { border-color: #a8241e; }
.kw-st-pop p { margin: 6px 0; line-height: 1.3; }
.kw-st-ph { display: flex; gap: 8px; align-items: flex-start; }
.kw-st-ph > img { image-rendering: pixelated; background: #2a2620; border: 1px solid #0a0907; flex: 0 0 auto; }
.kw-st-ph > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kw-st-ph > div b { font-size: 16px; color: var(--kw-paper); line-height: 1.15; }
.kw-st-ph > div small { color: var(--kw-dim); }
.kw-st-ph .kw-icon-btn { flex: 0 0 auto; }
.kw-st-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; padding: 4px 8px; background: #f4f2ea; color: #1c1814; border-radius: 2px; width: fit-content; }
.kw-st-price .kw-cash { color: inherit; }
.kw-st-price s { opacity: .75; }
.kw-st-price.is-sale { background: #c8241e; color: #fff4ee; }
.kw-st-price.is-uq { background: #d8b050; color: #2a1c08; }
.kw-st-off { font-size: 12px; color: #ffb0a0; }
.kw-st-price .kw-st-off { color: #fff4ee; }
.kw-st-prov { margin: 8px 0; padding: 8px 10px; background: #f4ecd8; color: #2a2418; border: 1px solid #8a7a5a; border-radius: 2px; font-family: var(--kw-type); }
.kw-st-prov p { margin: 4px 0; }
.kw-st-prov .kw-st-dim { color: #6a5e48; }
.kw-st-provh { display: flex; align-items: center; gap: 6px; font-family: var(--kw-stencil); letter-spacing: .03em; color: #7a1a14; }
.kw-st-sells { display: flex; flex-direction: column; gap: 4px; }
.kw-st-sell { display: flex; align-items: center; gap: 8px; padding: 3px; background: #26221b; border: 1px solid #0a0907; border-radius: 2px; }
.kw-st-sell img { image-rendering: pixelated; flex: 0 0 auto; }
.kw-st-sell span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.kw-st-sell small { color: var(--kw-dim); }
/* the basket */
.kw-st-bask { min-height: 0; display: flex; flex-direction: column; background: #1b1a14; border-left: 1px solid #0a0907; }
.kw-st-bbar { display: none; }
.kw-st-bhead { flex: 0 0 auto; padding: 10px 12px 6px; font-family: var(--kw-stencil); font-size: 18px; letter-spacing: .03em; color: var(--kw-paper); }
.kw-st-blines { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 4px; }
.kw-st-bl { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 26px; gap: 6px; align-items: center; padding: 3px; background: #26221b; border: 1px solid #0a0907; border-radius: 2px; }
.kw-st-bl img { image-rendering: pixelated; }
.kw-st-bl.is-gone { opacity: .55; }
.kw-st-bln { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.kw-st-bln b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-st-bln small { color: var(--kw-dim); font-size: 12px; }
.kw-st-blm { color: var(--kw-gold, #d8b050); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-st-q { display: inline-flex; align-items: center; gap: 2px; min-width: 64px; justify-content: center; }
.kw-st-q b { min-width: 14px; text-align: center; }
.kw-st-q .kw-icon-btn, .kw-st-bl > .kw-icon-btn { width: 24px; height: 24px; min-width: 24px; padding: 0; }
.kw-st-bls { font-size: 13px; text-align: right; min-width: 56px; }
.kw-st-bfoot { flex: 0 0 auto; padding: 8px 12px 12px; border-top: 1px solid #0a0907; background: #17160f; }
.kw-st-total { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.kw-st-why { min-height: 34px; margin: 4px 0 6px; font-size: 12px; line-height: 1.3; color: var(--kw-dim); }
.kw-st-why.is-bad { color: var(--kw-rot2); }
.kw-st-pay { width: 100%; justify-content: center; }
.kw-st-bask.is-flash { animation: kw-st-flash .5s ease; }
@keyframes kw-st-flash { 0% { box-shadow: inset 0 0 0 2px var(--kw-gelb); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* phones: the basket is a bottom sheet — a bar with the count and the total; a tap opens it */
@media (max-width: 760px) {
    .kw-st-top { gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
    .kw-st-top h3 { font-size: 17px; flex-basis: calc(100% - 80px); order: 0; }
    .kw-st-top .kw-icon-btn { order: 1; }
    .kw-st-modes { order: 2; }
    .kw-st-have { order: 3; flex: 1 1 auto; }
    .kw-st-secs { padding: 4px 8px 6px; }
    .kw-st-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 48px; }
    .kw-st-bask { position: relative; border-left: 0; border-top: 1px solid #0a0907; overflow: visible; }
    .kw-st-bbar { display: flex; align-items: center; gap: 6px; width: 100%; height: 48px; padding: 0 12px; color: var(--kw-text); font: inherit; font-size: 15px; background: #1b1a14; border: 0; cursor: pointer; }
    .kw-st-btot { margin-left: auto; }
    .kw-st-chev { transition: transform .15s; }
    .kw-st-bhead, .kw-st-blines, .kw-st-bfoot { display: none; }
    .kw-st.has-sheet .kw-st-bask { position: absolute; left: 0; right: 0; bottom: 0; height: min(70vh, 520px); z-index: 2; box-shadow: 0 -10px 24px rgba(0, 0, 0, .6); display: flex; }
    .kw-st.has-sheet .kw-st-bhead { display: none; }
    .kw-st.has-sheet .kw-st-blines { display: flex; padding-top: 6px; }
    .kw-st.has-sheet .kw-st-bfoot { display: block; }
    .kw-st.has-sheet .kw-st-chev { transform: rotate(180deg); }
    .kw-st-main { position: relative; }
    .kw-st-pop { left: 8px; top: 8px; width: calc(100% - 16px); max-height: calc(100% - 16px); }
    .kw-st-hint { display: none; }
    .kw-st-bl { grid-template-columns: 32px minmax(0, 1fr) auto auto 26px; }
    .kw-st-card-row { flex-wrap: wrap; }
    .kw-st-card-row > .kw-btn { margin-left: auto; }
}

/* the Soviet game: a thin red rule under the shop's bar (subtle, like the rest of the faction's look) */
body.kw-fac-su .kw-st-top { border-bottom: 2px solid var(--kw-su-red, #a8281e); }