/* =========================================================================
   AANGAN · THE KIRANA — the dukaan after dark             (house, room 1/6)
   -------------------------------------------------------------------------
   Second build. The bill book — a ruled page, one line per item — was not
   working (owner 2026-07-29): a cream page lit evenly all over has no focus
   anywhere on it, and thirty-six lines of it is a spreadsheet, not a shop.
   The owner picked the dukaan out of three mockups (.claude/mockups/house/shop-ideas.html),
   built on the structure of a game-shop screen he sent:

     · ONE GOOD PER LIT CELL, in a framed teak unit. A display case, not a
       list. Everything bright in the room is a thing for sale.
     · THE PRICE ON A CARD AT THE SHELF LIP, the name under it. Where a shop
       puts it, and where the eye already is.
     · CATEGORIES ON A RAIL down the left that never scrolls away.
     · SOMEBODY BEHIND THE COUNTER. The single biggest difference between a
       shop and a menu, and it costs one figure.

   This is a SKIN and nothing else. Every `.shoptile` keeps its element, its
   class and its data-* key, so all of 12-home.js's rendering and all of
   13-presence.js's buy/apply delegation keep working untouched. Nothing here
   can spend a lakhoti. Scoped to `#paneShop.kir`; js/41-kirana.js adds that
   class, and dropping it puts the plain shop back unchanged.
   ========================================================================= */

/* the room: dark, with one bulb over the middle of the unit */
#paneShop.kir{position:relative;padding:0 0 126px;margin:0 -16px;min-height:100dvh}
/* THE ROOM IS A REAL ELEMENT, not the pane's background and not its ::before.
   chalk-home.css carries `#homeOv .pane{background:none !important}` AND
   `#homeOv .pane::before{display:none !important}` — the courtyard needs both
   to keep its panes transparent. Rather than out-shouting two !importants
   from a skin, js/41-kirana.js lays a .kir-floor as the pane's first child
   and the room is painted on that. Without it the courtyard grass showed
   either side of the unit and the dukaan read as a poster stuck on a lawn.

   FIXED, not absolute: the pane starts below the identity row, so an absolute
   floor left the courtyard grass showing across the top of the shop and the
   dukaan looked pasted onto the lawn. Fixed to the viewport it runs to the top
   of the screen and the row sits on it. It still leaves with the pane —
   a fixed child of a display:none ancestor is not rendered. */
#paneShop.kir .kir-floor{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 22% at 50% 2%, rgba(255,226,166,.2), rgba(255,226,166,0) 70%),
    repeating-linear-gradient(91deg, rgba(20,9,2,.14) 0 1px, rgba(20,9,2,0) 1px 6px),
    radial-gradient(120% 52% at 50% 3%, #6b5232 0%, #3a2c1c 46%, #241b12 100%)}
#paneShop.kir .kir-room{position:relative;z-index:1}
/* The identity row is a SIBLING of the body the shop lives in, and both sit at
   z-index:1 — so the body, being later, would paint the fixed floor over the
   marbles and the avatar. One step up puts the row back on top; it is
   transparent, so the dukaan runs behind it unbroken. Scoped to the shop being
   the open pane, so no other tab's stacking is touched. */
#homeOv:has(#paneShop.kir.on) .homehead{z-index:2}

/* ---------------- the room's two columns ----------------
   The rail is sticky, so switching counters never costs a scroll, and the
   unit takes whatever is left. minmax(0,1fr) and not 1fr: a grid column is
   min-content by default, and one long deck name in Gujarati would push the
   whole unit off the right of a 360px phone. */
/* The 24px of air under the header lives HERE, on the row, not on the rail
   and the unit separately. Put on the children it fought the sticky: the
   rail's natural top became lower than its own sticky threshold, so it
   pinned itself at rest and sat 18px above the shelf it is supposed to line
   up with. On the row, both columns start together and sticky only engages
   once you actually scroll. */
/* 76px, was 60. THE SIGNS WERE UNREADABLE AND THE RAIL WAS WHY. A 60px sign
   could only hold "CARD DECKS" at 7.5px — measured, and the smallest text
   anywhere in the app by a wide margin. The owner's audience for this release
   is "my mother's friends or elders"; 7.5px uppercase is not text to them, it
   is a texture. Widening the rail is what buys the type its size back; the
   shelf beside it loses 16px and still fits three columns at 360. */
#paneShop.kir .kir-room{display:grid;grid-template-columns:76px minmax(0,1fr);
  align-items:start;padding:24px 10px 0 0}

/* ---------------- the rail of painted signs ---------------- */
/* A GRID ITEM MAY NOT BE THE STICKY ONE. Measured: with position:sticky on
   the rail itself the browser put it 45px below the shelf it shares a row
   with — a sticky grid item's static position is not the row start. Static
   item, sticky wrapper inside it, which is the ordinary pattern for this.

   Sticky UNDER the app's own header, not under the top of the page: at top:0
   the first sign slid up behind the name and the lakhoti chip. The header
   measures 64px, so 70 pins the rail with six of air under it. */
#paneShop.kir .kir-rail{position:static;padding:0}
/* NOT STICKY, and deliberately. Three ways were tried and each cost the one
   thing that matters more: sticky on the grid item put the rail 45px below
   the shelf it shares a row with (a sticky grid item does not take the row
   start as its static position); a sticky wrapper inside a shrink-to-fit
   item let go of the screen after 200px of scrolling; and stretching the
   item to fix that pinned the wrapper at rest and broke the alignment again.

   Four signs at the top of a short scroll do not need to follow you down the
   page, and a rail that is reliably level with the first row of goods beats
   one that is level only sometimes. Worth revisiting on its own. */
#paneShop.kir .kir-rail-in{position:static;z-index:6}
#paneShop.kir .kir-rail-in .subtabs{display:flex;flex-direction:column;gap:5px;
  margin:0;padding:0;background:none;border:0;overflow:visible;position:static}
#paneShop.kir .subtabs button{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  width:100%;flex:none;min-width:0;min-height:44px;padding:27px 3px 8px;
  border:0;border-radius:4px 0 0 4px;
  white-space:normal;line-height:1.05;text-align:center;
  /* 11px and MIXED CASE. The old note here read: "7.5px and hyphenating:
     'CARD DECKS' and 'TABLE THEMES' are wider than a 60px sign at 8.5" — true,
     and the conclusion drawn from it was the wrong one. The sign was the thing
     to change, not the type. Three changes together buy the size:
       · the rail went 60 -> 76px (see .kir-room above),
       · text-transform:none — and it has to be SET, not merely deleted:
         chalk-home.css uppercases every `#homeOv .subtabs button` in the app,
         so dropping the declaration here just let that one through and the
         signs came back out of the render still shouting. Mixed case is
         roughly 8% narrower at the same size, and word-shape is most of how
         an older reader recognises a word at a glance — ALL CAPS throws that
         away, which is the opposite of the point of this change,
       · letter-spacing is gone, which is another ~4% on a 10-character word.
     Measured after, at 390 and 360 and in all five languages: nothing prints
     over the wood, and the smallest text in the shop is 11px instead of 7.5. */
  font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:0;
  text-transform:none;color:#ffeec8;text-shadow:none;
  overflow-wrap:anywhere;hyphens:auto;
  /* !important, and only here: chalk-home.css paints every subtab as a chalk
     outline with `background:none !important` on the selected one. These are
     painted enamel signs in this room, not chalk. */
  background:linear-gradient(180deg,#8a6220,#5c3f10) !important;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.35), 0 2px 5px rgba(8,4,1,.45);
  transition:transform .16s ease, background .16s ease}
#paneShop.kir .subtabs button.on{
  background:linear-gradient(180deg,#c0342a,#8f2018) !important;color:#fff6e2;
  transform:translateX(3px);outline:0}
/* and the chalk outline it draws round each one has no business here */
#paneShop.kir .subtabs button::before{border:0 !important}
#paneShop.kir .subtabs button:focus-visible{outline:2px solid #ffdf9e;outline-offset:2px}
/* The mark on each sign, drawn inside the button's own padding so the label
   under it can never be pushed out of the rail, whatever a language does to
   the word. currentColor, so it follows the sign it is painted on. */
#paneShop.kir .subtabs button::before{
  content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:21px;height:21px;background:currentColor;border-radius:0;box-shadow:none;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#paneShop.kir .subtabs button::after{content:none}
#paneShop.kir .subtabs button[data-s="decks"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='11' height='16' rx='2'/%3E%3Crect x='9' y='6' width='11' height='16' rx='2'/%3E%3C/svg%3E")}
/* THE MAT, SEEN FROM ABOVE — wider than it is tall, with the weave across it.
   The first drawing was a tall rounded rect with one line through the middle,
   which at 21px read as a Greek theta rather than a chatai: nothing about it
   said "the thing you sit and play on". Landscape plus two weave lines is the
   same three strokes spent better. */
#paneShop.kir .subtabs button[data-s="tables"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='19' height='11' rx='2'/%3E%3Cpath d='M2.5 10.5h19M2.5 13.9h19'/%3E%3C/svg%3E")}
#paneShop.kir .subtabs button[data-s="themes"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 5l8 7v8H4z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E")}
#paneShop.kir .subtabs button[data-s="bangles"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='14' r='5.5'/%3E%3Ccircle cx='16' cy='10' r='4.5'/%3E%3C/svg%3E")}

/* ---------------- the teak unit ---------------- */
#paneShop.kir .kir-unit{position:relative;margin:0;padding:9px;border-radius:4px;
  background:
    repeating-linear-gradient(91deg, rgba(20,9,2,.2) 0 1px, rgba(20,9,2,0) 1px 5px),
    linear-gradient(178deg,#7d5228,#472a12);
  box-shadow:inset 0 0 0 3px rgba(18,8,2,.55), 0 8px 18px rgba(6,3,1,.5)}

/* Every wrap becomes the grid of cells. 12-home.js sets `display:""` to show
   one, which clears the inline value and lets this through — an explicit
   `display:block` there would have cost us the grid. */
#paneShop.kir #deckWrap,#paneShop.kir #tableWrap,
#paneShop.kir #themeWrap,#paneShop.kir #bangleWrap{
  margin:0 !important;display:grid;grid-template-columns:1fr 1fr;gap:11px 8px}

/* ---------------- one good, in its lit cell ---------------- */
#paneShop.kir .shoptile{
  position:relative;display:grid;grid-template-rows:98px auto;justify-items:center;
  margin:0;padding:0 0 4px;border:0;border-radius:0;background:none;box-shadow:none;
  min-height:0;gap:0;cursor:pointer;transition:transform .16s ease}
#paneShop.kir .shoptile:hover,#paneShop.kir .shoptile:focus-visible{transform:translateY(-3px)}
#paneShop.kir .shoptile:focus-visible{outline:2px solid #ffdf9e;outline-offset:2px;border-radius:4px}
/* the recess */
#paneShop.kir .shoptile::before{content:"";position:absolute;left:0;right:0;top:0;height:98px;
  border-radius:3px;background:linear-gradient(180deg,#2f2013,#4a3320);
  box-shadow:inset 0 4px 9px rgba(6,3,1,.75), inset 0 -3px 0 rgba(255,214,150,.16)}
/* and the light falling into it, which is the reason any of this reads */
#paneShop.kir .shoptile::after{content:"";position:absolute;left:0;right:0;top:0;height:98px;
  border-radius:3px;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 16%, rgba(255,226,166,.34), rgba(255,226,166,0) 72%)}
/* what you already own gets a brass frame; an heirloom, a gold hairline */
#paneShop.kir .shoptile.on::before{
  box-shadow:inset 0 0 0 2px #c9a03c, inset 0 4px 9px rgba(6,3,1,.6)}
#paneShop.kir .shoptile.premium::before{
  box-shadow:inset 0 0 0 1.5px rgba(242,213,130,.55), inset 0 4px 9px rgba(6,3,1,.75)}

/* The goods, standing in the niche. Whatever node a category paints its art
   into, it stands in the same place at the same size. */
#paneShop.kir .shoptile .sti,#paneShop.kir .shoptile .sfelt,
#paneShop.kir .shoptile .sttheme,#paneShop.kir .shoptile .stbangle{
  position:relative;z-index:2;grid-row:1;align-self:center;flex:none;
  width:58px;height:76px;margin:0;border-radius:4px;
  filter:drop-shadow(0 3px 5px rgba(6,3,1,.6))}
/* a mat and a bangle are square-ish objects; a deck and a theme are cards */
#paneShop.kir .shoptile .sfelt,#paneShop.kir .shoptile .stbangle{
  width:72px;height:72px;border-radius:6px}
#paneShop.kir .shoptile .stbangle svg{width:100%;height:100%;display:block}
/* the bangle carries its own dark plate in the plain shop, which inside a lit
   niche reads as a black box sitting in the recess. The niche IS the plate. */
#paneShop.kir .shoptile .stbangle{background:none;border:0;box-shadow:none}

/* the name plaque under the cell */
#paneShop.kir .shoptile > div:not([class]){grid-row:2;padding-top:15px;text-align:center;
  max-width:100%}
#paneShop.kir .shoptile .stt{font-family:var(--sans);font-weight:700;font-size:11px;
  line-height:1.2;color:#f2e0ba;text-shadow:0 1px 2px rgba(6,3,1,.7)}
/* 11px floor — 9.5 was below it, and this line is where "Free" and "Locked"
   live, which is exactly what a player needs to read before tapping */
#paneShop.kir .shoptile .sts{font-family:var(--sans);font-size:11px;line-height:1.2;
  /* #b9a077 rendered as #8a6a44 over the niche and measured 4.06-4.11:1 — just
     under AA on the one line a player reads before tapping. Darkened to clear
     it; the hue is unchanged. (owner 2026-08-16, contrast gate) */
  color:#6f5228;margin-top:1px;text-shadow:none}

/* THE PRICE CARD, clipped to the lip of the niche.
   Measured off the niche's own height, NOT off the tile's bottom — the tile
   also holds the name, and measuring from the bottom printed the price
   straight over it in every single cell (caught in .claude/mockups/house/shop-ideas.html). */
#paneShop.kir .shoptile .stbadge{
  position:absolute;z-index:6;top:89px;left:50%;right:auto;bottom:auto;
  transform:translateX(-50%);height:auto;
  display:flex;align-items:center;justify-content:center;gap:3px;
  padding:1px 8px 2px;border:0;border-radius:2px;
  background:linear-gradient(178deg,#fdf6e2,#e4d4ac);
  box-shadow:0 2px 4px rgba(8,4,1,.6);
  font-family:"Baloo Bhai 2",var(--sans);font-weight:700;font-size:12px;line-height:1.4;
  color:#6b3a10;white-space:nowrap;max-width:98%;overflow:hidden;
  text-shadow:none;pointer-events:none}
#paneShop.kir .shoptile .stbadge:empty{display:none}
#paneShop.kir .shoptile .stbadge .lakicon,
#paneShop.kir .shoptile .stbadge .ck-marble{width:14px!important;height:14px!important;
  flex:0 0 14px!important;filter:none}
/* what is already yours reads green, so a shelf sorts itself before you read it */
/* THE APPLIED RIBBON IS RETIRED (2026-09-05). It sat across the lower frame
   of the card back / mat / bangle being sold, covering the bottom of the very
   artwork the tile exists to show, while the star already on the cell corner
   said the same thing — two indicators for one fact, one of them in the way.
   "Applied" moved into the paper label where the price sits (12-home.js), so
   the whole back stays visible.
   It KEEPS THE RIBBON'S INK. Without this the word landed in the same muted
   grey as "Locked", so a state you are pleased about and a state you are not
   read identically — visible the moment it was rendered, invisible in the
   diff. Same #2f5220 the ribbon used, now as ink instead of a band. */
/* the colour itself lives in legible.css with the other measured ink
   decisions, where the sibling .sts rule already sits at a specificity this
   file cannot beat. */
#paneShop.kir .shoptile.on .stbadge{left:50%;right:auto;
  background:linear-gradient(178deg,#dff0cf,#b4d39c);color:#2f5220;
  font-size:11px;border:0;transform:translateX(-50%)}
/* the showcase star belongs on the cell's own corner, not on the price card */
#paneShop.kir .shoptile .pfstar{position:absolute;z-index:7;left:auto;right:4px;top:4px;
  transform:none;margin:0}
/* 34x34 measured, 10 short of the floor. The pad is biased OUTWARD — more of
   it goes up and right, into the tile's own corner margin, than down and left
   over the goods — so the star gets its 44 without taking a 44px bite out of
   the middle of the cell a player is aiming at to buy. */
#paneShop.kir .shoptile .pfstar::after{content:"";position:absolute;
  top:-7px;right:-7px;bottom:-3px;left:-3px}
/* the chalk system draws its line icons in chalk white; on a cream card that
   is invisible, so inside a price they are drawn in ink */
#homeOv #paneShop.kir .shoptile .stbadge [data-ck-ico] svg{stroke:#6b3a10}
#homeOv #paneShop.kir .shoptile .stbadge [data-ck-ico]{width:16px;height:16px}

/* ---------------- the counter, and the man behind it ----------------
   Fixed to the bottom of the screen, and safe there because it is a CHILD of
   the shop pane: the moment another tab shows, the pane goes display:none and
   this goes with it — which a body-level fixed bar would not. */
#paneShop.kir .kir-counter{position:fixed;left:0;right:0;bottom:0;z-index:20;
  height:118px;pointer-events:none}
#paneShop.kir .kc-top{position:absolute;left:0;right:0;bottom:58px;height:13px;
  background:linear-gradient(180deg,#b07a3c,#7a4a20);box-shadow:0 3px 7px rgba(6,3,1,.6)}
#paneShop.kir .kc-front{position:absolute;left:0;right:0;bottom:0;height:60px;
  background:
    repeating-linear-gradient(87deg, rgba(20,9,2,.16) 0 1px, rgba(20,9,2,0) 1px 5px),
    linear-gradient(178deg,#8a5c2c,#4e3115)}
/* bottom:14, up from 6 (owner 2026-08-26: "the spacing between shopkeeper, his
   comments and the navigation bar"). Flush on the nav is right — no floating
   gap — but the dukandar and his bubble sat 6px off it, jammed against the wood
   with a fat empty band above, so the counter read lopsided. Lift both so they
   sit with a clean, even gap over the bar and the band reads centred. */
#paneShop.kir .kc-keep{position:absolute;right:2px;bottom:14px;z-index:2}
/* Head and shoulders only. Drawn at full height he stands up into the shelves
   and his head prints over the last cell's name — and head and shoulders is
   all you see of somebody standing behind a counter anyway. */
#paneShop.kir .kc-keep svg{display:block;width:auto;height:110px;
  filter:drop-shadow(-4px 2px 8px rgba(6,3,1,.6));
  transform-origin:70% 100%;
  animation:kcbreathe 5.2s ease-in-out infinite}

/* ---- he is alive now (owner 2026-08-01: "Add some animation in shopkeeper")
   Three separate movements, deliberately on different clocks so they never
   line up into one puppet-like beat:

     breathe  the whole man, a pixel and a half of rise and a hair of lean.
              Origin at his own feet-end, or he pivots about the counter.
     blink    two skin shutters behind the lenses. THIS is what stops him
              reading as a cardboard cut-out — a face that never blinks is
              the thing your eye calls out as a picture.
     cloth    the angocha over his shoulder swings a degree either way,
              hinged where it sits on the shoulder rather than at the SVG's
              origin, which would have swept it across his chest.

   A nod is fired on top when he actually says something (see speak() in
   41-kirana.js); it out-specifies the breathing for its own three quarters
   of a second and then hands back. */
@keyframes kcbreathe{
  0%,100%{transform:translateY(0)      rotate(0deg)}
  50%    {transform:translateY(-1.6px) rotate(-.5deg)}}
#paneShop.kir .kc-lid rect{transform-box:fill-box;transform-origin:50% 0%;
  animation:kcblink 6.4s ease-in-out infinite}
#paneShop.kir .kc-lid rect:last-child{animation-duration:6.55s}
@keyframes kcblink{
  0%,95%  {transform:scaleY(0)}
  97.4%   {transform:scaleY(1)}
  100%    {transform:scaleY(0)}}
#paneShop.kir .kc-cloth{transform-box:fill-box;transform-origin:0% 0%;
  animation:kccloth 4.3s ease-in-out infinite}
@keyframes kccloth{
  0%,100%{transform:rotate(-1.1deg)}
  50%    {transform:rotate(1.1deg)}}
#paneShop.kir .kc-keep.nod svg{animation:kcnod .78s cubic-bezier(.34,.7,.4,1)}
@keyframes kcnod{
  0%  {transform:translateY(0)    rotate(0deg)}
  26% {transform:translateY(3px)  rotate(2.4deg)}
  58% {transform:translateY(-1px) rotate(-1deg)}
  100%{transform:translateY(0)    rotate(0deg)}}
/* What he is in the middle of saying: the app's own shop line, moved here, so
   it stays one translated string instead of becoming a new one.

   A speech cloud, kept DOWN ON THE COUNTER (owner 2026-07-29). The bubble
   itself was never the problem — floating it up over the shelves was. It
   lives inside the counter's footprint now, tucked to the left of the
   dukandar with its tail pointing across at him, so it reads as him talking
   to you across the counter rather than a panel dropped on the shop.

   Sized to sit ON the counter front and never climb its top slab: three
   lines at 11px is 43px of text, plus 10px of padding, is 53 of the 60px the
   front is tall. Beyond three lines it clips instead of growing — the clamp
   is a -webkit- property Chromium no longer honours on this display, so the
   max-height is what actually holds the ceiling.

   The balance is not repeated down here — the identity row at the top of the
   screen already carries it. */
#paneShop.kir .kc-say{position:absolute;left:12px;right:110px;bottom:14px;z-index:3;
  margin:0;padding:5px 9px;border-radius:9px;
  background:linear-gradient(178deg,#fdf7e6,#ecdfbe);
  box-shadow:0 2px 6px rgba(8,4,1,.5);
  font-family:var(--sans);font-size:11px;line-height:1.3;
  color:#4a2f10;text-shadow:none;text-align:left}
/* THE CLAMP IS ON THE INNER SPAN, not on the cloud. It needs overflow:hidden,
   and the tail below is an ::after hanging 7px off the cloud's right edge —
   put the two on the same element and the clamp cuts the tail in half. */
#paneShop.kir .kc-say .kc-line{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  max-height:3.9em;overflow:hidden}
/* the cloud pops when he says something new, so a change of counter is
   something you SEE happen and not something you have to notice has happened */
#paneShop.kir .kc-say.pop{animation:kcpop .44s cubic-bezier(.3,1.5,.5,1)}
@keyframes kcpop{
  0%  {transform:scale(.93) translateY(4px);opacity:.35}
  62% {transform:scale(1.025) translateY(0); opacity:1}
  100%{transform:scale(1) translateY(0)}}
/* the tail points SIDEWAYS at the dukandar, not down at the counter — he is
   stood to the right of the cloud, not under it */
#paneShop.kir .kc-say::after{content:"";position:absolute;right:-5px;bottom:15px;
  width:11px;height:11px;background:#f0e3c4;transform:rotate(45deg);border-radius:2px}

/* the app's own "cosmetic only" line is what he is saying now */
#paneShop.kir #shopSubP{display:none}

/* ========================= the preview ==============================
   Unchanged from the bill book, because it was already right. Tapping a cell
   shows you the thing before you spend anything on it, and the panel NEVER
   buys: its button re-clicks the tile the app already owns, so every lakhoti
   still goes out through 13-presence.js. */
.kir-prev{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;padding:22px;background:rgba(28,16,6,.72)}
.kir-prev .kp-card{width:100%;max-width:330px;border-radius:14px;overflow:hidden;
  background:linear-gradient(#faf2de,#efe3c4);
  box-shadow:0 18px 42px rgba(10,5,1,.6);
  border:1px solid rgba(120,90,40,.4)}
.kir-prev .kp-art{display:flex;align-items:center;justify-content:center;
  padding:22px 18px 16px;background:linear-gradient(#6b3f1d,#4a2a12)}
.kir-prev .kp-art > *{width:150px!important;height:210px!important;flex:none!important;
  border-radius:9px!important;box-shadow:0 8px 20px rgba(0,0,0,.5)!important;
  background-size:cover!important;background-position:center!important;
  border:0!important;padding:0!important;margin:0!important}
.kir-prev .kp-art > .kir-sq{height:150px!important}
.kir-prev .kp-art > .kir-sq svg{width:100%;height:100%;display:block}
.kir-prev .kp-txt{padding:14px 16px 4px;text-align:center}
.kir-prev .kp-nm{font-family:var(--sans);font-weight:700;font-size:17px;color:#2c2415}
.kir-prev .kp-st{font-family:var(--sans);font-size:12px;color:#7d6640;margin-top:2px}
.kir-prev .kp-pr{display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--sans);font-weight:700;font-size:19px;color:#8e3320;margin-top:8px}
.kir-prev .kp-pr svg{width:20px;height:20px}
.kir-prev .kp-btns{display:flex;gap:9px;padding:14px 16px 16px}
.kir-prev .kp-btns button{flex:1;border:0;border-radius:10px;padding:12px 8px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:13.5px}
.kir-prev .kp-go{background:linear-gradient(#c8963f,#8a6220);color:#2c1c06;
  box-shadow:0 3px 0 #6b4a14}
.kir-prev .kp-go:active{transform:translateY(2px);box-shadow:0 1px 0 #6b4a14}
.kir-prev .kp-no{background:rgba(90,60,26,.14);color:#5a4632}

/* ---------------- narrow phones ----------------
   At 320 the two columns of cells get tight before anything else does, so the
   niche and the art step down together rather than the cell reflowing. */
@media (max-width:340px){
  #paneShop.kir .kir-room{grid-template-columns:54px minmax(0,1fr)}
  #paneShop.kir .shoptile{grid-template-rows:86px auto}
  #paneShop.kir .shoptile::before,#paneShop.kir .shoptile::after{height:86px}
  #paneShop.kir .shoptile .stbadge{top:77px;font-size:11px}
  #paneShop.kir .shoptile .sti,#paneShop.kir .shoptile .sttheme{width:50px;height:66px}
  #paneShop.kir .shoptile .sfelt,#paneShop.kir .shoptile .stbangle{width:62px;height:62px}
  #paneShop.kir .kc-say{left:9px;right:108px;font-size:10px;padding:5px 8px}
}

@media (prefers-reduced-motion:reduce){
  #paneShop.kir .shoptile,#paneShop.kir .subtabs button{transition:none}
  /* he stands perfectly still, and the cloud simply changes. What he SAYS is
     the content and it is unaffected — only the movement goes. */
  #paneShop.kir .kc-keep svg,#paneShop.kir .kc-keep.nod svg,
  #paneShop.kir .kc-lid rect,#paneShop.kir .kc-cloth,
  #paneShop.kir .kc-say.pop{animation:none}
}

/* The courtyard must not show through above the dukaan either (owner
   2026-07-31, seen on a phone). `.kir-floor` is fixed, but #paneShop is a
   containing block, so fixed resolves against the PANE — which starts below
   the identity row, leaving a band of lawn across the top of the shop. Same
   fix as the games room: take the lawn out while this room is open and let
   #homeOv carry the room's own dark behind the header. */
#homeOv:has(#paneShop.kir.on) > .ck-floor{display:none}
#homeOv:has(#paneShop.kir.on){background:#241b12}