/* ==========================================================================
   metaeden-net/public/games/_shared/shop-ui.css -- THE ARCADE'S SHOP ROW
   (TASK-1669[Q]). One home for the store-shelf pieces two cabinets draw:
   Spam Clicker's software aisle, where these rules were born, and Counter
   Culture's wholesale board, upgrades and recipe book, which reuse them.

   EXTRACTED, NOT COPIED (living_docs/MINIGAME_UNIFICATION.md: share by
   extraction, never copy-and-fork). Every value below is the value
   metaeden-spamcleaner.js carried for its .scx-item / .scx-addon / .scx-chip
   / .scx-buymore / .scx-ringfx / .scx-banner, byte for byte, under a neutral
   .mshop- prefix. Spam Clicker's markup wears both names now (scx-item
   mshop-item), keeps every override it layers on top under its own .scx-
   names, and injects its own sheet AFTER this one loads, so each override
   still wins exactly the ties it won when both lived in one string. The
   keyframes are renamed with the rules (mshopringx, mshopaward, mshopsweep)
   and hold the same stops. One value has moved since: a disabled button's
   words went from #5b6a8c (3.3:1 on the row) to #7a88ab (5:1), for both
   cabinets, because a player reads why a button is off (TASK-1678[Q]).

   THE ANATOMY, for a new shop:
     .mshop-list                a scrolling column of rows
     .mshop-item                icon + .m (.nm name, .ds desc) + .buy (.pr, button)
       .cant                    price turns pink: you cannot afford it yet
       .working                 a job bar fills the row (--p: 0%..100%)
       .teaser                  a dashed, dimmed row: not yet available
     .mshop-addon               an indented add-on row under an item (.owned, .cant)
     .mshop-chip                a currency chip: icon + bold number
     .mshop-buymore             a dashed full-width "more" button
     .mshop-ringfx              a gold ring that pops where a purchase landed
     .mshop-banner              a slide-in award banner (b headline, small sub)
   games/_shared/shop-ui.js builds these rows; nothing requires it.

   ASCII only. Loaded by <link> on every page that mounts either cabinet.
   ========================================================================== */
@keyframes mshopringx{0%{width:26px;height:26px;opacity:0.9}100%{width:340px;height:340px;opacity:0}}
@keyframes mshopaward{0%{opacity:0;transform:translateX(-26px) skewX(-6deg)}9%{opacity:1;transform:translateX(0) skewX(0)}82%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-14px)}}
@keyframes mshopsweep{to{transform:translateX(120%)}}

.mshop-chip{display:flex;align-items:center;gap:5px;background:#10182c;border:1px solid #1c2338;border-radius:4px;padding:3px 7px}
.mshop-chip img{width:18px;height:18px;display:block}
.mshop-chip b{font-size:12px;font-weight:bold;color:#e8f4ff;min-width:14px;text-align:right}

.mshop-ringfx{position:absolute;border:3px solid #ffd400;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:mshopringx 0.7s ease-out forwards;z-index:4001}

.mshop-banner{position:absolute;left:34px;z-index:4010;width:298px;pointer-events:none;background:linear-gradient(180deg,rgba(14,12,4,0.96),rgba(6,6,10,0.96));border:1px solid rgba(255,212,0,0.55);border-left:4px solid #ffd400;box-shadow:0 6px 26px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,212,0,0.18);padding:10px 14px 11px;overflow:hidden;animation:mshopaward 3.6s cubic-bezier(0.16,1,0.3,1) forwards;transition:top 0.25s ease}
.mshop-banner:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,212,0,0.28) 50%,transparent 70%);transform:translateX(-120%);animation:mshopsweep 1.15s ease-out 0.18s}
.mshop-banner b{display:block;font:700 15px 'Arial Black','Arial Bold',Arial,sans-serif;letter-spacing:0.13em;color:#ffd400;text-shadow:0 0 12px rgba(255,212,0,0.45);line-height:1.15;position:relative}
.mshop-banner small{display:block;font:10px Tahoma,sans-serif;letter-spacing:0.24em;color:#a7a08a;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,212,0,0.22);position:relative;text-transform:uppercase}

.mshop-list{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px;padding:8px}
.mshop-item{display:flex;gap:8px;background:#10182c;border:1px solid #2a2d45;padding:7px;align-items:flex-start;position:relative}
.mshop-item img{width:32px;height:32px;flex:none;margin-top:1px}
.mshop-item .m{flex:1;min-width:0}
.mshop-item .nm{font-weight:700;font-size:13px;color:#e8f4ff;font-family:Tahoma,sans-serif}
.mshop-item .ds{font-size:11px;line-height:1.45;color:#9aa4c4;margin:3px 0;font-family:Tahoma,sans-serif}
.mshop-item .buy{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:none}
.mshop-item .pr{font-size:12px;font-weight:700;color:#00ffa0;white-space:nowrap}
.mshop-item.cant .pr{color:#ff3da8}
.mshop-item button{background:#10241c;border:1px solid #00ffa0;color:#00ffa0;font:700 11px Tahoma;letter-spacing:0.06em;padding:5px 9px;cursor:pointer;border-radius:3px}
.mshop-item button[disabled]{border-color:#2a2d45;color:#7a88ab;cursor:not-allowed;background:#10182c}
.mshop-item.working{background-image:linear-gradient(90deg,rgba(0,255,160,0.22) var(--p,0%),rgba(0,0,0,0) 0);background-repeat:no-repeat;border-color:#00ffa0}
.mshop-item.teaser{opacity:0.5;border-style:dashed}
.mshop-item.teaser .nm{color:#5b6a8c}

.mshop-addon{display:flex;gap:7px;background:#0c1322;border:1px solid #2a2d45;border-left:3px solid #ffd400;margin:-2px 0 0 22px;padding:6px 7px;align-items:center;font-family:Tahoma,sans-serif}
.mshop-addon .plus{flex:none;font:900 12px 'Courier New',monospace;color:#ffd400}
.mshop-addon .m{flex:1;min-width:0}
.mshop-addon .nm{font:700 12px Tahoma;color:#ffd400}
.mshop-addon .ds{font:11px/1.4 Tahoma;color:#9aa4c4;margin-top:1px}
.mshop-addon .buy{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex:none}
.mshop-addon .pr{font:700 11px Tahoma;color:#00ffa0;white-space:nowrap}
.mshop-addon.cant .pr{color:#ff3da8}
.mshop-addon button{background:#241c06;border:1px solid #ffd400;color:#ffd400;font:700 10px Tahoma;padding:3px 7px;cursor:pointer;border-radius:3px}
.mshop-addon button[disabled]{border-color:#2a2d45;color:#7a88ab;background:#10182c;cursor:not-allowed}
.mshop-addon.owned{opacity:0.65;border-left-color:#00ffa0}
.mshop-addon.owned .nm{color:#00ffa0}

.mshop-buymore{flex:none;display:block;width:calc(100% - 20px);margin:0 10px 6px;padding:6px 0;background:#132038;border:1px dashed #3c6f8c;color:#5be7ff;font:700 10px Tahoma;letter-spacing:0.14em;cursor:pointer}
.mshop-buymore:hover{background:#1b2f52;border-color:#5be7ff;color:#bff3ff}