/*
 * Ekoloko World — commerce and belongings (UX3): basket, stores, potion shop, eco-coins store, house.
 * Every block names the original it follows. Panel units are stage px (the game stage is 960x600,
 * shown at 1.333 on a 1280 screen), so 11.25px here = the design language's 15px body text and
 * 18px = its 24px .Title.
 * Rules this sheet follows (/var/www/ekoloko/docs/ekoloko-design-language.md):
 *   "the original Ekoloko with modern abilities, not a modern site with a nostalgic skin" —
 *   original art and states first; text #18384f, muted #4a6076, image border 1px #a7b793, Arial;
 *   keyboard focus is a 3px outline, never only an art swap; no blur, no modern gradients,
 *   no generic cards; prefers-reduced-motion switches motion off.
 * Versioned in the file name: never edit in place, ship vN+1.
 * v2: empty-state notes re-anchored (v1 nested :has(), which the browser drops).
 */
:root{--eko-ink:#18384f;--eko-muted:#4a6076;--eko-edge:#a7b793;--eko-cream:#f9f8ef;--eko-short:#c9331f}

/* ---------------------------------------------------------------------------------------------
 * 1. Keyboard focus. The general ring (3px #fff + #18384f halo) is eko-world-hud.v3.css §1; tiles in
 *    this area sit inside clipped scroll viewports, where an outside ring is cut off, so they draw
 *    the same ring inside the tile.
 * ------------------------------------------------------------------------------------------- */
html :is(.source-inventory__items,.source-store-sell-items,.house-pane__track) button:focus-visible{
  outline:3px solid #fff!important;outline-offset:-4px!important;box-shadow:inset 0 0 0 5px #18384f
}

/* ---------------------------------------------------------------------------------------------
 * 2. Basket (main.swf myPlayerPanemInventory11 + PaneSlot char 2796).
 * ------------------------------------------------------------------------------------------- */
/* 2a. An item the player cannot wear: PaneSlot frame 4 + DisabledCoat (main.swf char 2790),
 *     a 55x55 rounded #7393c6 sheet at alpha .6 laid over the item. The bundle drew frame 4 only,
 *     which is the same grey as a normal tile, so a locked item looked wearable. */
section.source-inventory .source-inventory__slot.is-unwearable::after,
section.source-inventory .source-inventory__slot.is-unwearable:hover::after{
  content:'';position:absolute;inset:1.5px;border-radius:5px;background:rgba(115,147,198,.6);pointer-events:none
}
section.source-inventory .source-inventory__slot.is-unwearable{cursor:help}
/* 2b. Names are user names in Latin as often as in Hebrew: isolate them so "__name" does not
 *     render as "name__" inside the RTL panel. */
section.source-inventory .source-inventory__name,section.source-store .source-sale-name{unicode-bidi:plaintext}
/* 2c. Before anything is chosen the item card was four empty frames. Say what it is for, in the
 *     line where the item name will appear. */
section.source-inventory .source-inventory__details:not(:has(.source-inventory__item-picture))::before{
  content:'בחרו פריט כדי לראות את פרטיו';position:absolute;left:-9px;top:7px;width:252.6px;
  font:700 11.25px/1.2 Arial,sans-serif;color:var(--eko-muted);text-align:center;pointer-events:none
}
/* 2d. Empty tabs: a quiet note on the empty grid instead of three rows of blank tiles.
 *     (v1 nested :has() inside :has(), which browsers drop; anchored on the viewport now.) */
section.source-inventory .source-inventory__grid .source-scroll__viewport{position:relative}
section.source-inventory .source-inventory__items:not(:has(button))::after{
  position:absolute;left:12px;right:12px;top:58px;padding:9px 10px;border:1px solid var(--eko-edge);border-radius:6px;
  background:var(--eko-cream);box-shadow:0 1.5px 0 #6f8fb855;color:var(--eko-ink);direction:rtl;text-align:center;
  font:700 11.25px/1.35 Arial,sans-serif;white-space:pre-line;pointer-events:none;content:'אין כאן עדיין פריטים'
}
section.source-inventory .source-scroll__viewport[aria-label="בגדים"]>.source-inventory__items:not(:has(button))::after{content:'אין לכם עדיין בגדים בסל.\Aבגדים חדשים מחכים בחנויות שבעולם.'}
section.source-inventory .source-scroll__viewport[aria-label="אביזרים"]>.source-inventory__items:not(:has(button))::after{content:'אין לכם עדיין אביזרים.\Aכובעים, משקפיים ותכשיטים נמכרים בחנויות שבעולם.'}
section.source-inventory .source-scroll__viewport[aria-label="מיחזור"]>.source-inventory__items:not(:has(button))::after{content:'עוד לא אספתם פסולת.\Aאספו פסולת בחדרים והיא תחכה כאן עד שתמחזרו אותה.'}
section.source-inventory .source-scroll__viewport[aria-label="אוספים"]>.source-inventory__items:not(:has(button))::after{content:'האוסף שלכם עדיין ריק.'}
/* 2e. touch: a pressed tile answers immediately (Flash PaneSlot frame 3 is the "over" art) */
@media (hover:none){section.source-inventory .source-inventory__slot:active{background-image:url(/ui/source/inventory-PaneSlot-3.svg)}}

/* ---------------------------------------------------------------------------------------------
 * 3. Stores (main.swf StoreSelectMenuMC 1180 / StoreBuyMenuMC 1204 / StoreSellMenuMC 1165).
 * ------------------------------------------------------------------------------------------- */
/* 3a. Requirements the player does not meet yet: the number turns the client's own warning red
 *     (the basket already uses #c9331f for .is-short). The store view had switched it off, so a
 *     level-15 item looked exactly as buyable as a level-1 one until the refusal popup. */
section.source-store.source-store--buy .reqs__tile.is-short b{color:var(--eko-short);text-shadow:0 1px 0 #fff}
section.source-store.source-store--buy .reqs__tile.is-short::after{
  content:'';position:absolute;inset:3px;border:2px solid var(--eko-short);border-radius:7px;pointer-events:none
}
/* 3b. A row the player cannot buy (unmet requirement, or price above the purse — .is-poor is set
 *     by the store row): the price turns red and the Buy slab dims but stays clickable, so the
 *     original refusal popups (StoreNoMoney 112, item-not-allowed) still explain why. */
section.source-store.source-store--buy .store__row.is-poor .store__price{color:var(--eko-short)}
section.source-store.source-store--buy .store__row:is(.is-poor,:has(.reqs__tile.is-short)) .store__buy .btn{filter:saturate(.35) brightness(.97)}
section.source-store.source-store--buy .store__row:is(.is-poor,:has(.reqs__tile.is-short)) .store__buy .btn:hover{filter:saturate(.6)}
/* 3c. Sell view: the name sat in the top-right corner of its box while the buy view centres it,
 *     and the keeper picture overflowed the frame art. Match the buy view (StoreSellMenuMC). */
section.source-store.source-store--sell .store__name{display:flex;align-items:center;justify-content:center;height:100px;text-align:center}
section.source-store.source-store--sell .store__keeper{overflow:hidden;border-radius:8px}
/* 3d. The original "click an item to sell it" line was hidden; show it in the empty sale card until
 *     an item is chosen (the card's name line is empty until then). */
section.source-store.source-store--sell .store__main:not(:has(.source-sale-name:not(:empty))) .store__hint{
  display:block!important;position:absolute;left:9px;top:378px;width:280px;margin:0;padding:0 10px;
  font:700 11.25px/1.3 Arial,sans-serif!important;color:var(--eko-muted);text-align:center;pointer-events:none;z-index:1
}
/* 3e. Nothing to sell yet. */
section.source-store.source-store--sell .basket__grid--sell .source-scroll__viewport{position:relative}
section.source-store.source-store--sell .source-store-sell-items:not(:has(button))::after{
  content:'אין לכם עדיין פריטים למכירה בחנות הזאת.';position:absolute;left:12px;right:12px;top:80px;padding:9px 10px;
  border:1px solid var(--eko-edge);border-radius:6px;background:var(--eko-cream);color:var(--eko-ink);
  font:700 11.25px/1.35 Arial,sans-serif;text-align:center;direction:rtl;pointer-events:none
}
/* 3f. Pager arrows: the whole 190px strip is the button; give the arrow a visible pressed state. */
section.source-store .store__flip:not(:disabled):active .store__arrow{transform:translateY(1px)}

/* ---------------------------------------------------------------------------------------------
 * 4. Potion shop (main.swf PotionStoreBuyMenuMC 126). The original pages four slots with
 *    PotinStorePageFlipper (140); the web list has no pager and simply ran past the panel and over
 *    the HUD once a store stocked more than four potions. Keep it inside the original well and let
 *    it scroll, a slot at a time.
 * ------------------------------------------------------------------------------------------- */
section.native-potion-store .native-potion-slots{
  width:472px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;direction:ltr;
  scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:#8fc2b8 #0b3434
}
section.native-potion-store .native-potion-slot{scroll-snap-align:start}
section.native-potion-store .native-potion-slot.is-poor .native-potion-price{color:var(--eko-short)}
section.native-potion-store .native-potion-slot.is-poor .native-potion-buy{filter:saturate(.35) brightness(.97)}

/* ---------------------------------------------------------------------------------------------
 * 5. Eco-coins store (main_components/creditsStore.swf).
 * ------------------------------------------------------------------------------------------- */
/* 5a. An empty category opened onto a blank green well. */
section.eco-native .eco-native-grid:empty::after{
  content:'אין כרגע פריטים בקטגוריה הזאת.\Aכדאי לחזור ולבדוק שוב בקרוב!';white-space:pre-line;
  display:block;margin:120px auto 0;width:340px;padding:14px 16px;border:1px solid var(--eko-edge);border-radius:6px;
  background:var(--eko-cream);color:var(--eko-ink);direction:rtl;text-align:center;font:700 13.5px/1.4 Arial,sans-serif
}
/* 5b. Product names and the "you also get" lines are Hebrew: keep digits in item codes in order */
section.eco-native .eco-product-title b{unicode-bidi:plaintext}

/* ---------------------------------------------------------------------------------------------
 * 6. House (main_components/house.swf).
 * ------------------------------------------------------------------------------------------- */
/* 6a. Moon settle (buyplanetmenu 1124): the price box next to the button is now always rendered;
 *     give it the original white plaque under the number. */
section.native-settle .native-settle__price{border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #9aa9c8;text-align:center}
/* 6b. A furniture slot the player cannot buy (source-slot-3) also gets the DisabledCoat sheet. */
.house-bar button.house-slot.is-blocked::after{content:'';position:absolute;inset:2px;border-radius:5px;background:rgba(115,147,198,.45);pointer-events:none}

/* ---------------------------------------------------------------------------------------------
 * 7. Phones held upright. The stage is fitted to the width (960 stage px -> 375 css px, x0.39), so
 *    a 502-px basket became 196 css px with 21-px tiles. Panels in this area are Flash art that
 *    cannot reflow, so on portrait phones each one is enlarged about its own centre to ~97% of the
 *    screen width (the factor is 960 / panel width, constant because the stage is width-bound in
 *    portrait). Tiles grow to 36-40 css px. Landscape and desktop are untouched.
 * ------------------------------------------------------------------------------------------- */
@media (orientation:portrait) and (max-width:600px){
  .source-viewport--menu section.source-inventory{transform:scale(1.8);transform-origin:50% 50%}
  .source-viewport--menu section.source-store.source-store--choose{transform:scale(2.2);transform-origin:50% 50%}
  .source-viewport--menu section.source-store.source-store--buy{transform:scale(1.33);transform-origin:50% 50%}
  .source-viewport--menu section.source-store.source-store--sell{transform:scale(1.8);transform-origin:50% 50%}
  .source-viewport--menu section.native-potion-store{transform:scale(1.4);transform-origin:50% 50%}
  .source-viewport--menu section.native-settle{transform:scale(1.26);transform-origin:50% 50%}
  .source-viewport--menu section.native-greenhouse{transform:scale(1.3);transform-origin:50% 50%}
  .source-viewport--menu section.source-store-popup,
  .source-viewport--menu section.native-house-popup{transform:scale(1.7);transform-origin:50% 50%}
}

@media (prefers-reduced-motion:reduce){section.source-store .store__flip:active .store__arrow{transform:none}}