/* Promised Lands SKIN, part 3 of 4: the BUILD category tray, the item row, the armed bar, the zone palette and its demand bars, flags and tags on the map. Owner: trays helper (WP-9U-B)
   Builds on skin.css (the k- classes and --k- tokens); later rules here win over styles.css because this file loads after it. The sizes come from src/ui/layout.js (--cat-w --cat-h --item-w
   --flat-w --pal-btn-w ...), so the picture and the coverage test read the same numbers. Raised things: 3 px ink outline, a solid step under them, a white inner highlight. Colours: cream = idle,
   orange = the lit/chosen one (and Done in the armed bar), green = the land's own pieces and the confirm buttons, navy = the demand gauges. Tile labels are 11-13 px; a word that is wider than
   its tile is squeezed sideways by fitLabels() in tray.js (a tile must not lose letters). This file moves nothing but the trays. */

/* ===================================================================================================================================================================================
   BUILD category tray (S1, S2): big candy tiles straight on the map. The tray itself is see-through; its padding is the room for the step under a tile and the halo of the lit one
   (the tray scrolls sideways on a very narrow phone, and a scroller clips whatever sticks out of it).
   =================================================================================================================================================================================== */
#tray-build { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 8px 2px 8px; gap: 2px; align-items: flex-start; color: var(--k-ink); font-family: var(--k-font); }
.l-compact #tray-build { padding-top: 4px; }
.cat {
  --c1: #fffdf0; --c2: #ffeeb4; --c3: #f9d57b; --dark: #c98d2c;
  position: relative; width: var(--cat-w); height: var(--cat-h); flex: none; margin: 0; padding: 2px 0 0; gap: 1px; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--k-ink); border-radius: 18px; color: var(--k-ink); font-family: var(--k-font);
  background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 5px 0 var(--dark), 0 5px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(0, 0, 0, 0.07);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.cat::before { content: ""; position: absolute; left: 9%; right: 9%; top: 2px; height: 36%; border-radius: 12px 12px 40% 40%; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.04)); pointer-events: none; }
.cat > * { position: relative; }
.cat .ci { display: grid; place-items: center; line-height: 0; }
.cat .ci svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.3)); }
.l-landscape .cat .ci svg { width: 30px; height: 30px; }
.cat .lb { flex: none; padding: 1px 0 0; font: 900 clamp(11px, calc(var(--cat-w) * 0.235), 13px)/1.2 var(--k-font); letter-spacing: -0.2px; white-space: nowrap; }
.cat:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.55); }
.cat:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.cat.land { --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d); }   /* the land's own pieces stand out: the only green tile */
.cat.land .lb, .cat.on .lb { color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; }
.cat.on {   /* the chosen one is lit: orange candy with a pale halo */
  --c1: var(--k-orange-l); --c2: var(--k-orange); --c3: #ec8410; --dark: var(--k-orange-d); z-index: 1;
  box-shadow: 0 5px 0 var(--dark), 0 5px 0 3px var(--k-ink), 0 0 0 3px #fff3b0, inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.cat.on:active { transform: translateY(3px); }

/* ===================================================================================================================================================================================
   Shared by the three cream panels (item row, zone palette, armed bar): 3 px ink outline, a step under, a soft shadow, a white inner highlight
   =================================================================================================================================================================================== */
#pop-items, #tray-zone, #armed {
  color: var(--k-ink); font-family: var(--k-font); border: 3px solid var(--k-ink); border-radius: 26px;
  background: linear-gradient(#fffbe9, var(--k-cream2) 82%, #f9db8f);
  box-shadow: 0 5px 0 var(--k-ink), var(--k-drop), inset 0 3px 0 #fff;
}

/* ===================================================================================================================================================================================
   The item row (S2): a cream shelf with the category's words on top, group names, and cards that scroll sideways. A tall phone gets the TALL card (picture over the words); landscape,
   compact and a short phone get the FLAT card (.flat on the row, set by tray.js from layout.flatItems: picture beside the words, group names standing on their side), which is how the
   map keeps half the screen. Compact has no shelf at all: the cards stand on the map.
   =================================================================================================================================================================================== */
#pop-items { padding: 8px 8px 0; }
.l-portrait #pop-items { max-width: min(calc(100% - 12px), 600px); }
#pop-items h6 { height: auto; margin: 0 4px 3px; max-width: 100%; font: 900 14px/1.2 var(--k-font); letter-spacing: 0; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popgroups { gap: 12px; padding: 4px 4px 10px; }   /* (the bottom padding is the room for the step under a card: a scroller clips what sticks out) */
.popgroups .grp { gap: 3px; }
.popgroups .row { gap: 8px; }
.popgroups .grp em {   /* a group name: a small orange tag */
  align-self: flex-start; padding: 2px 9px; border-radius: 10px; font: 900 11px/1 var(--k-font); letter-spacing: 0.4px; color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill;
  background: linear-gradient(#ffb95a, #ff8a1e); border: 2px solid var(--k-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.item {
  --c1: #fffdf2; --c2: #fff1c6; --c3: #fbe09a; --dark: #d3a24a;
  position: relative; flex: none; width: var(--item-w); height: var(--item-h); margin: 0; padding: 4px 4px 4px; gap: 2px; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden;
  border: 3px solid var(--k-ink); border-radius: 20px; color: var(--k-ink); font-family: var(--k-font);
  background: linear-gradient(var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow: 0 4px 0 var(--dark), 0 4px 0 3px var(--k-ink), inset 0 2px 0 #fff;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.item:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink), inset 0 2px 0 #fff; }
.item:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.item .ph { display: grid; place-items: center; flex: none; width: 100%; max-width: 54px; height: 38px; border-radius: 14px; background: radial-gradient(circle at 50% 38%, #fff 0%, #fdeec0 100%); box-shadow: inset 0 0 0 2px rgba(74, 39, 18, 0.16); }
.item .ph svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.28)); }
.item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; margin: auto 0; font: 900 12px/1.05 var(--k-font); text-align: center; color: var(--k-ink); }
.item small { margin-top: auto; max-width: 100%; padding: 1px 6px 2px; border-radius: 10px; font: 900 11px/1.1 var(--k-font); text-align: center; color: var(--k-ink);
  background: linear-gradient(#fff4bf, #ffd54a); border: 2px solid var(--k-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); }
.item small:empty { display: none; }
.item small.free { color: #fff; -webkit-text-stroke: 2.5px var(--k-ink); paint-order: stroke fill; background: linear-gradient(var(--k-green-l), var(--k-green)); }
.item small.mv { color: #fff; -webkit-text-stroke: 2.5px var(--k-ink); paint-order: stroke fill; background: linear-gradient(var(--k-blue-l), var(--k-blue)); }
.item.on { transform: translateY(-2px); box-shadow: 0 6px 0 var(--dark), 0 6px 0 3px var(--k-ink), 0 0 0 3px #fff3b0, inset 0 2px 0 #fff; }
.item.landmark { --c1: #fff6c8; --c2: #ffe27a; --c3: #f6c640; --dark: #c8921c; }
.item.poor, .zb.poor { opacity: 0.8; filter: grayscale(0.95) brightness(1.04); }   /* greyed, still there: a tap says "need N more shekels" */
.item.poor small { filter: grayscale(1); }
/* a piece of the land: painted picture, a green check when it already stands on the land */
.item.sp .ph { height: 42px; max-width: 58px; }
.item.sp .ph canvas.thumb { display: block; }
.item.sp .ck { top: 4px; right: 4px; width: 24px; height: 24px; border: 2.5px solid var(--k-ink); background: linear-gradient(var(--k-green-l), var(--k-green) 50%, #3fb126); box-shadow: 0 2px 0 var(--k-ink); }
.item.sp .ck svg { width: 14px; height: 14px; }
.item.sp.placed { --c1: #f6ffe6; --c2: #dcf8b8; --c3: #bdee86; --dark: #56a834; }
.item.sp.placed small.mv { color: #fff; }   /* (styles.css greens the word of a placed piece: Move stays white on its blue pill) */

/* the FLAT card: picture on the left, the words on the right */
#pop-items.flat .item { width: var(--flat-w); height: var(--flat-h); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; justify-items: start; column-gap: 7px; row-gap: 2px; padding: 2px 7px 2px 4px; }
#pop-items.flat .item .ph { grid-row: 1 / 3; grid-column: 1; width: 42px; max-width: none; height: 42px; }
#pop-items.flat .item b { grid-column: 2; grid-row: 1; align-self: end; margin: 0; text-align: left; line-height: 1.05; }
#pop-items.flat .item small { grid-column: 2; grid-row: 2; align-self: start; margin: 0; padding: 1px 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
#pop-items.flat .item.sp .ph { width: 46px; height: 46px; max-width: none; }
#pop-items.flat .item.sp .ck { top: 2px; right: 2px; width: 22px; height: 22px; }
#pop-items.flat .popgroups .grp { flex-direction: row; gap: 6px; }
#pop-items.flat .popgroups .grp em {   /* the group name stands on its side beside its cards: it costs width, not height */
  align-self: flex-start; height: var(--flat-h); padding: 0 3px; letter-spacing: 0.2px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.l-landscape #pop-items { padding-top: 6px; max-width: calc(100% - var(--pal-left) - var(--pal-right)); }   /* (as wide as the palette: it stands between BUILD and MENU) */
.l-landscape .item .ph svg { width: 32px; height: 32px; }
.l-compact #pop-items { max-width: calc(100% - var(--pal-left) - var(--pal-right)); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }   /* no shelf: the cards stand on the map */
.l-compact .popgroups { padding: 2px 4px 8px; gap: 10px; }
.l-compact .popgroups .grp em { display: none; }   /* (no height for the names in compact: the cards say what they are) */
.l-compact #pop-items.flat .item { padding: 2px 6px 2px 3px; column-gap: 6px; }
.l-compact #pop-items.flat .item .ph { width: 36px; height: 36px; }
.l-compact #pop-items.flat .item.sp .ph { width: 38px; height: 38px; }
.l-compact .item .ph svg { width: 26px; height: 26px; }
.l-compact .item.sp .ph canvas.thumb { width: 32px !important; height: 32px !important; }
.l-compact .item b { -webkit-line-clamp: 1; font-size: 11px; }
.l-compact #pop-items.flat .item small { font-size: 11px; }
.l-compact .item.sp .ck { top: 1px; right: 1px; width: 18px; height: 18px; } .l-compact .item.sp .ck svg { width: 11px; height: 11px; }

/* ===================================================================================================================================================================================
   The armed bar (S3): picture, name, price, Change, the green tick, Done. A cream bar with big candy buttons. Portrait: two rows (a name needs room); landscape and compact: one row.
   =================================================================================================================================================================================== */
#armed { gap: 8px; padding: 8px 10px 10px; align-items: center; }
#armed .ph { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: radial-gradient(circle at 50% 38%, #fff 0%, #fdeec0 100%); box-shadow: inset 0 0 0 2px rgba(74, 39, 18, 0.16), 0 0 0 2.5px var(--k-ink); }
#armed .ph svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.28)); }
#armed .ph canvas.thumb { display: block; width: 44px !important; height: 44px !important; }
#armed .at { flex: 1; min-width: 0; gap: 3px; }
#armed .at b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 900 17px/1.1 var(--k-font); color: var(--k-ink); }
#armed .at small { align-self: flex-start; max-width: 100%; padding: 2px 8px 3px; border-radius: 10px; font: 900 12px/1.1 var(--k-font); color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(#fff4bf, #ffd54a); border: 2px solid var(--k-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); }
#armed .at small:empty { display: none; }
#armed .bt, #armed .bt.done, #armed .bt.gold { min-height: 48px; padding: 0 18px; font-size: 18px; flex: none; background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%); }   /* (styles.css gives .bt.done its own flat green: the candy gradient is put back here) */
#armed .bt.done { --c1: var(--k-orange-l); --c2: var(--k-orange); --c3: #ec8410; --dark: var(--k-orange-d); }   /* Done leaves BUILD (orange); the green one is the tick that builds */
#armed .tick { flex: none; width: 64px; height: 56px; }
#armed .tick svg { width: 34px; height: 34px; }
.l-portrait #armed { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(100% - 12px), 520px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; padding: 8px 10px 12px; }
.l-portrait #armed .ph, .l-portrait #armed canvas.thumb { grid-column: 1; grid-row: 1; }
.l-portrait #armed .at { grid-column: 2; grid-row: 1; }
.l-portrait #armed .tick { grid-column: 3; grid-row: 1; justify-self: end; }
.l-portrait #armed .chg { grid-column: 1 / 3; grid-row: 2; }
.l-portrait #armed .dn { grid-column: 3; grid-row: 2; }
.l-portrait #armed.piece .at { grid-column: 2 / 4; }   /* a piece of the land has no tick: the words use the room */
.l-landscape #armed .bt, .l-compact #armed .bt { padding: 0 14px; font-size: 17px; }   /* (one row: the words and the price need the room) */
.l-compact #armed { padding: 6px 10px 8px; } .l-compact #armed .tick { height: 52px; } .l-compact #armed .ph { width: 44px; height: 44px; }
.l-compact #armed .ph canvas.thumb { width: 40px !important; height: 40px !important; } .l-compact #armed .at b { font-size: 15px; }

/* ===================================================================================================================================================================================
   The zone palette (Z): brushes as candy tiles in their zone colour (green homes, blue markets, gold industry), the three demand gauges, Done. A cream shelf.
   Portrait wraps into two rows (homes + markets, then industry + the gauges + Done) and the tiles share the width; landscape and compact are ONE row that scrolls sideways when it must.
   =================================================================================================================================================================================== */
#tray-zone { gap: 12px 6px; padding: 8px 8px 12px; align-items: flex-end; }
.l-portrait #tray-zone { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(100% - 12px), 440px); flex-wrap: wrap; align-content: flex-start; overflow: visible; }
.l-landscape #tray-zone, .l-compact #tray-zone { flex-wrap: nowrap; align-items: flex-end; overflow-x: auto; overflow-y: hidden; gap: 8px; padding-left: 6px; padding-right: 6px; }
#tray-zone .grp { --n: 3; flex: var(--n) 1 calc(var(--n) * 42px); gap: 4px; }
.l-landscape #tray-zone .grp, .l-compact #tray-zone .grp { flex: var(--n) 0 auto; }
#tray-zone .grp[data-group='homes'] { --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d); }
#tray-zone .grp[data-group='market'] { --c1: var(--k-blue-l); --c2: var(--k-blue); --c3: #2a9ae8; --dark: var(--k-blue-d); }
#tray-zone .grp[data-group='industry'] { --c1: #fff0a0; --c2: var(--k-gold); --c3: #f0a21e; --dark: #b97a0c; }
#tray-zone .grp > em {   /* DWELLINGS · 3: the group name, in the colour of its tiles */
  display: block; height: 20px; padding: 0 8px; border-radius: 10px; border: 2.5px solid var(--k-ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 900 11px/15px var(--k-font); letter-spacing: 0.3px; color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill;
  background: linear-gradient(var(--c1, #eceef3), var(--c2, #c9ccd6) 55%, var(--c3, #b3b7c4)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
#tray-zone .grp .btns { gap: 4px; }
.zb {
  position: relative; flex: 1 1 var(--pal-btn-w); width: auto; min-width: 40px; max-width: 84px; height: var(--pal-btn-h); margin: 0; padding: 3px 0 2px; gap: 0; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; color: #fff; font-family: var(--k-font);
  border: 3px solid var(--k-ink); border-radius: 16px;
  background: linear-gradient(var(--c1, #eceef3) 0%, var(--c2, #c9ccd6) 46%, var(--c3, #b3b7c4) 54%, var(--c2, #c9ccd6) 100%);
  box-shadow: 0 5px 0 var(--dark, #7a7f90), 0 5px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.zb::before { content: ""; position: absolute; left: 9%; right: 9%; top: 2px; height: 36%; bottom: auto; border-radius: 12px 12px 40% 40%; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04)); pointer-events: none; }
.zb > * { position: relative; }
.zb .ph { display: grid; place-items: center; line-height: 0; }
.zb .ph svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); }
.zb .lb { flex: none; padding: 1px 0 0; font: 900 11px/1.2 var(--k-font); letter-spacing: -0.1px; color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; white-space: nowrap; }
.zb:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--dark, #7a7f90), 0 1px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
.zb:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.zb.on { z-index: 1; box-shadow: 0 5px 0 var(--dark, #7a7f90), 0 5px 0 3px var(--k-ink), 0 0 0 3px #fff3b0, 0 0 0 6px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1); }   /* the brush in hand: a pale halo with an ink edge */
.zb.on:active { transform: translateY(3px); }
/* the demand gauges: a navy chip with three chunky tubes (up = wanted, down = too many) and the letters D M I; tap it for the ten values */
.rcim {
  flex: 0 0 var(--pal-demand-w); width: var(--pal-demand-w); min-height: 0; padding: 3px 4px 4px; gap: 2px; align-items: center; cursor: pointer; touch-action: manipulation;
  border: 3px solid var(--k-ink); border-radius: 18px; color: #fff; font-family: var(--k-font);
  background: linear-gradient(var(--k-navy-1), var(--k-navy-2)); box-shadow: 0 4px 0 var(--k-ink), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.rcim:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-ink), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.rcim:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.rcim h6 { margin: 0; font: 900 11px/1 var(--k-font); letter-spacing: 0; text-transform: none; text-align: center; color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; white-space: nowrap; }
.rcim .bars { width: 100%; height: 36px; padding: 0; gap: 4px; justify-content: center; }
.rcim .bars::after { display: none; }
.rcim .bar { --b1: #d9d9d9; --b2: #b0b0b0; --b3: #8f8f8f; flex: none; width: 14px; height: 100%; overflow: hidden; border: 2.5px solid var(--k-ink); border-radius: 9px; background: #fff1cf; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12); }
.rcim .bar::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: rgba(74, 39, 18, 0.55); }
.rcim .bar[data-g='homes'] { --b1: var(--k-green-l); --b2: var(--k-green); --b3: #3fb126; }
.rcim .bar[data-g='market'] { --b1: var(--k-blue-l); --b2: var(--k-blue); --b3: #2a9ae8; }
.rcim .bar[data-g='industry'] { --b1: #fff0a0; --b2: var(--k-gold); --b3: #f0a21e; }
.rcim .bar i { border: 0; background: linear-gradient(var(--b1), var(--b2) 55%, var(--b3)); }
.rcim .bar i.up { border-radius: 4px 4px 0 0; border-bottom: 1.5px solid var(--k-ink); }
.rcim .bar i.dn { border-radius: 0 0 4px 4px; border-top: 1.5px solid var(--k-ink); }
.rcim .lab { width: 100%; padding: 0; gap: 4px; justify-content: center; }
.rcim .lab b { flex: none; width: 14px; font: 900 12px/1 var(--k-font); text-align: center; color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; }
.l-portrait .rcim { order: 8; margin-left: auto; }
/* Done: the green candy that closes the palette and the tray */
#tray-zone #done {
  --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d); order: 9;
  position: relative; flex: 0 0 var(--pal-done-w); width: var(--pal-done-w); height: var(--pal-done-h); margin: 0; padding: 2px 0 0; gap: 0; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--k-ink); border-radius: 18px; color: #fff; font-family: var(--k-font);
  background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 5px 0 var(--dark), 0 5px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1); text-shadow: none;
}
#tray-zone #done::before { content: ""; position: absolute; left: 9%; right: 9%; top: 2px; height: 36%; border-radius: 12px 12px 40% 40%; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04)); pointer-events: none; }
#tray-zone #done:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
#tray-zone #done:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
#tray-zone #done svg { position: relative; width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.4)); }
#tray-zone #done span { position: relative; font: 900 15px/1.1 var(--k-font); letter-spacing: 0.3px; -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; }
.l-compact .rcim, .l-landscape .rcim { z-index: 2; }
.l-compact #tray-zone #done { position: sticky; right: 0; z-index: 2; }   /* (Done stays in view while the brushes scroll under it) */
@media (max-width: 340px) {   /* the smallest phones: the gauges and Done get slimmer so industry + gauges + Done still share one row */
  .l-portrait .rcim { flex-basis: 50px; width: 50px; padding: 3px 2px 4px; } .l-portrait .rcim h6 { display: none; } .l-portrait .rcim .bars, .l-portrait .rcim .lab { gap: 3px; }
  .l-portrait .rcim .bar, .l-portrait .rcim .lab b { width: 12px; }
  .l-portrait #tray-zone #done { flex-basis: 50px; width: 50px; }
  .l-portrait #tray-zone { padding-left: 6px; padding-right: 6px; gap: 12px 5px; }
}

/* the first-time script's pulsing ring on a tile, a card or a brush: an outline that breathes (the old ring animated the box-shadow, which would wipe the step under the candy) */
.cat.ring, .item.ring, .zb.ring, .rcim.ring, #tray-zone #done.ring { outline: 4px solid #fff3b0; outline-offset: 2px; animation: k-ring 1.2s ease-in-out infinite; }
@keyframes k-ring { 0%, 100% { outline-offset: 2px; outline-color: #fff3b0; } 50% { outline-offset: 7px; outline-color: #ffd25a; } }

/* ===================================================================================================================================================================================
   Flags and tags on the map: cream pills with a thick brown outline (the price flag that follows the finger, the little name tag on a tile, the ring that shows where to tap)
   =================================================================================================================================================================================== */
.flag, .tag {
  color: var(--k-ink); font-family: var(--k-font); border: 3px solid var(--k-ink); border-radius: 22px; letter-spacing: 0.2px;
  background: linear-gradient(#fffbe9, var(--k-cream2)); box-shadow: 0 4px 0 var(--k-ink), 0 8px 10px rgba(58, 22, 8, 0.3), inset 0 2px 0 #fff; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.flag { padding: 7px 14px 8px 12px; font: 900 15px/1 var(--k-font); }
.flag::before { content: ""; display: inline-block; vertical-align: -1px; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; border: 2.5px solid var(--k-ink); background: var(--k-green); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6); }   /* ok = green dot */
.flag.warn { background: linear-gradient(#ffe7a0, #ffc04a); border-color: var(--k-ink); color: var(--k-ink); }
.flag.warn::before { background: var(--k-orange); }   /* warn = amber, never red */
.flag::after, .tag::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 12px; height: 12px; margin-left: -6px; background: var(--k-cream2); border-right: 3px solid var(--k-ink); border-bottom: 3px solid var(--k-ink); border-radius: 0 0 5px 0; transform: translateY(-4px) rotate(45deg); }   /* the little tail towards the finger */
.flag.warn::after { background: #ffc04a; }
.flag.below::after { bottom: auto; top: -13px; border: 0; border-left: 3px solid var(--k-ink); border-top: 3px solid var(--k-ink); border-radius: 5px 0 0 0; transform: translateY(4px) rotate(45deg); background: #fffbe9; }
.tag { padding: 7px 13px 8px; font: 900 14px/1 var(--k-font); }
.mapring {   /* the pulsing ring that shows where to tap (first-time script): a thick pale ring with an ink edge */
  outline: 0; border: 5px solid #fff3b0; box-shadow: 0 0 0 3px var(--k-ink), inset 0 0 0 3px var(--k-ink), 0 0 18px 4px rgba(255, 214, 90, 0.85); animation: k-mapring 1.2s ease-in-out infinite;
}
@keyframes k-mapring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.8; } }