/* ==========================================================================
   metaeden-net/public/games/counter-culture/counter-culture.css
   Counter Culture (TASK-1669[Q]). Every selector sits under .ccx (the game)
   or .ccx-title. The play screen is ONE 896x504 stage, scaled whole to fit
   the mount (contain, 16:9), so nothing inside it can reflow or overflow:
   top bar, shop floor, the backroom terminal under it, and the shop panel
   down the right. Shop rows are the arcade's shared row
   (games/_shared/shop-ui.css), set a size larger here for this screen.
   Readable text is 14px on the stage (about 12.8px at the framed 820x461),
   light on dark at 4.5:1 or better. ASCII only.
   ========================================================================== */
.ccx{position:relative;width:100%;height:100%;overflow:hidden;background:#05030a;
  font-family:'IBM Plex Mono','Courier New',monospace;color:#f0e6ff;line-height:1.3;
  -webkit-user-select:none;user-select:none;outline:none}
.ccx *{box-sizing:border-box}
.ccx-stage{position:absolute;left:0;top:0;width:896px;height:504px;transform-origin:0 0;overflow:hidden;background:#0d0812}

.ccx-top{position:absolute;left:0;top:0;width:896px;height:30px;display:flex;align-items:center;gap:8px;
  padding:0 calc(8px + var(--ccx-tr,0px)) 0 8px;background:#140c1c;border-bottom:1px solid #3a2a44;font-size:14px;white-space:nowrap}
.ccx-chips{display:flex;gap:6px;align-items:center}
.ccx-top .mshop-chip{padding:2px 7px;height:26px}
.ccx-top .mshop-chip img{width:16px;height:16px;image-rendering:pixelated}
.ccx-top .mshop-chip b{font-size:14px;min-width:22px}
.ccx-top .ccx-gold b{color:#ffd400;min-width:64px}
.ccx-day{margin-left:auto;color:#d7cdea;font-size:14px}
.ccx-ctl{display:flex;gap:6px}
.ccx-cbtn{font:700 14px 'IBM Plex Mono','Courier New',monospace;background:#1a1124;border:1px solid #6a5a80;
  color:#f0e6ff;padding:3px 8px;cursor:pointer;border-radius:3px}
.ccx-cbtn:hover{border-color:#ffd400}
.ccx-cbtn:focus-visible,.ccx-tab:focus-visible,.ccx-hbtn:focus-visible{outline:2px solid #5be7ff;outline-offset:1px}

.ccx-floor{position:absolute;left:0;top:30px;width:560px;height:315px;background:#05030a;cursor:pointer}
.ccx-floor>canvas{position:absolute;left:0;top:0;width:560px;height:315px;image-rendering:pixelated;display:block}
.ccx-goal{position:absolute;z-index:1;left:0;right:0;top:0;height:24px;padding:0 156px 0 8px;background:rgba(10,6,16,0.84);
  color:#ffe98a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  display:flex;align-items:center;gap:6px}
/* the goal line is chips (TASK-1680[Q]): NEXT, the stage, a clock, the goods */
.ccx-goal .ccx-gword{font-weight:700;color:#ffd400;letter-spacing:0.06em}
.ccx-goal .ccx-gname{color:#ffe98a}
.ccx-goal .ccx-chip{background:#1a1124}
.ccx-msg{position:absolute;left:0;top:345px;width:560px;height:24px;padding:3px 8px;background:#0a0610;border-top:1px solid #3a2a44;
  color:#7dffc9;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ccx-back{position:absolute;left:0;top:369px;width:560px;height:135px;background:#001100;border-top:2px solid #173117;cursor:pointer}
.ccx-back>canvas{position:absolute;left:0;top:0;width:560px;height:133px;display:block}

.ccx-side{position:absolute;left:560px;top:30px;width:336px;height:474px;background:#0d0812;border-left:1px solid #3a2a44;
  display:flex;flex-direction:column}
.ccx-tabs{display:flex;height:34px;flex:none;padding-right:var(--ccx-tr,0px);background:#0d0812}
.ccx-tab{flex:1;white-space:nowrap;overflow:hidden;font:700 14px 'IBM Plex Mono','Courier New',monospace;letter-spacing:0.04em;background:#1a1124;color:#d7cdea;
  border:1px solid #3a2a44;border-top:0;cursor:pointer;padding:0;box-shadow:inset 0 -3px 0 transparent}
.ccx-tab.on{background:#2a1a3a;color:#ffd400;box-shadow:inset 0 -3px 0 #ffd400}
.ccx-tight .ccx-tab .k{display:none}
.ccx-side .mshop-addon .plus{font-size:14px}
.ccx-pane{min-height:0}
.ccx-side .mshop-item{padding:6px 7px;gap:7px}
.ccx-side .mshop-item img{width:30px;height:30px;image-rendering:pixelated}
.ccx-side .mshop-item .nm{font:700 14px 'IBM Plex Mono','Courier New',monospace;color:#f0e6ff}
.ccx-side .mshop-item .ds{font:14px/1.35 'IBM Plex Mono','Courier New',monospace;color:#c3cbe6}
.ccx-side .mshop-item .pr{font-size:14px}
.ccx-side .mshop-item button{font:700 14px 'IBM Plex Mono','Courier New',monospace;padding:5px 8px;min-width:74px}
/* THE ROW, RE-LAID FOR A NARROW PANEL (TASK-1670[Q]). The shared row puts
   the price and button in a column beside the words, which left the
   description about 23 characters wide and every row three or four lines
   tall, so the bench and its recipes did not fit without scrolling. Here the
   name, price and button share one line and the description runs the full
   width under the name. Same markup, same shared sheet, this panel only. */
.ccx-side .mshop-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;
  grid-template-areas:"ic nm buy" "ic ds ds";column-gap:7px;row-gap:1px;align-items:center}
.ccx-side .mshop-item>img{grid-area:ic;align-self:start}
.ccx-side .mshop-item .m{display:contents}
.ccx-side .mshop-item .nm{grid-area:nm;overflow-wrap:anywhere}
.ccx-side .mshop-item .ds{grid-area:ds;margin:0}
.ccx-side .mshop-item .buy{grid-area:buy;flex-direction:row;align-items:center;gap:6px}
.ccx-side .mshop-item.teaser{opacity:1;border-style:dashed}
.ccx-side .mshop-item.teaser .nm{color:#b3a9c9}
.ccx-side .mshop-item.owned{border-color:#1f5a40}
.ccx-side .mshop-addon{margin:-2px 0 0 14px}
.ccx-side .mshop-addon .nm{font:700 14px 'IBM Plex Mono','Courier New',monospace}
.ccx-side .mshop-addon .ds{font:14px/1.35 'IBM Plex Mono','Courier New',monospace;color:#c3cbe6}
.ccx-side .mshop-addon .pr{font:700 14px 'IBM Plex Mono','Courier New',monospace}
.ccx-side .mshop-addon button{font:700 14px 'IBM Plex Mono','Courier New',monospace;padding:4px 7px}
/* The repeat add-on row gets the same one-line head (TASK-1670[Q]). */
.ccx-side .mshop-addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pl nm buy" "pl ds ds";
  column-gap:7px;row-gap:1px;align-items:center}
.ccx-side .mshop-addon .plus{grid-area:pl;align-self:start}
.ccx-side .mshop-addon .m{display:contents}
.ccx-side .mshop-addon .nm{grid-area:nm}
.ccx-side .mshop-addon .ds{grid-area:ds;margin:0}
.ccx-side .mshop-addon .buy{grid-area:buy;flex-direction:row;align-items:center;gap:6px}
.ccx-head{padding:6px 2px 0;flex:none}
.ccx-head b{display:block;font:700 14px 'IBM Plex Mono','Courier New',monospace;letter-spacing:0.12em;color:#ffd400;text-transform:uppercase}
.ccx-head i{display:block;font:14px 'IBM Plex Mono','Courier New',monospace;font-style:normal;color:#bfb3d6}
/* an add-on right under a heading (the bench's repeat card under "7 of 7
   busy") stands clear of it: the -2px that tucks an add-on under its item
   put the card's border into the heading's last line (TASK-1684[Q]) */
.ccx-side .ccx-head+.mshop-addon{margin-top:6px}

.ccx-haggle{position:absolute;left:0;top:0;right:0;bottom:0;z-index:3;background:#120a1a;border-left:3px solid #ffd400;
  padding:max(12px,calc(var(--ccx-tr,0px) - 28px)) 12px 10px;display:flex;flex-direction:column;gap:7px}
.ccx-hwho{font:700 15px 'IBM Plex Mono','Courier New',monospace;color:#ffd400;text-transform:uppercase;letter-spacing:0.06em}
.ccx-hsaid{font-size:15px;color:#f0e6ff;min-height:40px}
.ccx-hitem{display:flex;gap:8px;align-items:center;font-size:15px;color:#f0e6ff}
.ccx-hitem img{width:40px;height:40px;image-rendering:pixelated;background:#1a1124;border:1px solid #3a2a44}
.ccx-hhint{font-size:14px;color:#9fe8ff}
.ccx-hmood{font:700 18px 'IBM Plex Mono','Courier New',monospace;min-height:24px}
.ccx-hprice{font:700 26px 'IBM Plex Mono','Courier New',monospace;color:#ffd400;min-height:34px}
.ccx-hslide{width:100%;height:30px;accent-color:#ff3da8;cursor:pointer;margin:0}
.ccx-hrow{display:flex;gap:6px;flex-wrap:wrap}
.ccx-hbtn{font:700 14px 'IBM Plex Mono','Courier New',monospace;padding:8px 10px;background:#1a1124;border:1px solid #6a5a80;
  color:#f0e6ff;cursor:pointer;border-radius:3px}
.ccx-hbtn:hover{border-color:#ffd400}
.ccx-hbtn.go{background:#0f2a1c;border-color:#00ffa0;color:#00ffa0;flex:1}
.ccx-hbtn.sm{width:48px}
/* the shelf desk (TASK-1670[Q]): one press per kind that could go on it */
.ccx-shelflist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.ccx-hbtn.ccx-shelfpick{display:flex;align-items:center;gap:8px;text-align:left;flex:none;padding:5px 8px}
.ccx-shelfpick img{width:24px;height:24px;image-rendering:pixelated;flex:none}
/* the clerk strip (TASK-1671[Q]): always there, one fixed height, under the
   rows, so hiring or losing a clerk never moves the panel above it */
.ccx-clerk{flex:none;height:66px;display:flex;align-items:center;gap:8px;padding:5px 8px;background:#140c1c;
  border-top:1px solid #3a2a44;box-shadow:inset 3px 0 0 transparent}
.ccx-clerk.serving{background:#16221a;box-shadow:inset 3px 0 0 #00ffa0;cursor:pointer}
.ccx-clerk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.ccx-clerk-txt b{font:700 14px 'IBM Plex Mono','Courier New',monospace;color:#ffd400;letter-spacing:0.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccx-clerk-txt span{font:14px/1.25 'IBM Plex Mono','Courier New',monospace;color:#d7cdea;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccx-clerk .ccx-cbtn{flex:none;white-space:nowrap}
.ccx-hbtn[disabled],.ccx-hbtn.go[disabled]{background:#1a1124;border-color:#3a2a44;color:#b3a9c9;cursor:not-allowed}
/* THE BACKROOM (TASK-1672[Q]): the scene button on the floor, the backroom
   canvas in the floor's own box, and the reason under a row that cannot go. */
.ccx-scenebtn{position:absolute;top:1px;right:4px;z-index:2;height:26px;font:700 14px/18px 'IBM Plex Mono','Courier New',monospace;
  background:#2a1633;border:1px solid #ffd400;color:#fff6d0;padding:3px 8px;border-radius:3px;cursor:pointer}
.ccx-scenebtn:hover{border-color:#00ffa0;color:#00ffa0}
.ccx-scenebtn:focus-visible{outline:2px solid #5be7ff;outline-offset:1px}
/* THE STOCKROOM (TASK-1674[Q]): a drawn room at the floor's 320x180, scaled
   crisp like the floor (the rule on .ccx-floor>canvas covers it) */
.ccx-floor.ccx-inback{background:#120a18}
.ccx-shelfpick .ccx-why{display:block;font:14px/1.3 'IBM Plex Mono','Courier New',monospace;font-style:normal;color:#ffc27a;margin-top:2px}
.ccx-hbtn.ccx-shelfpick.go.over{background:#2a200c;border-color:#ffd400;color:#fff0b0}
.ccx-cratedesk .ccx-hwho{color:#00ffa0}
/* the ways out of a stockroom past its size: a line and up to two presses */
.ccx-fix{flex:none;display:flex;flex-direction:column;gap:5px;padding:6px 8px;background:#1c1208;border:1px solid #6a4a2c;border-radius:3px}
.ccx-fixline{font:14px/1.3 'IBM Plex Mono','Courier New',monospace;color:#ffe7b0}
.ccx-fixline.hot{font-weight:700;color:#ffd400}
.ccx-fixrow{display:flex;gap:6px;flex-wrap:wrap}
.ccx-fixrow .ccx-hbtn{flex:1;min-width:0;font-size:14px;padding:6px 8px}

.ccx-pause{position:absolute;left:0;top:0;width:896px;height:504px;z-index:6;display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:10px;background:rgba(5,3,10,0.82);text-align:center}
.ccx.paused .ccx-pause{display:flex}
.ccx-pause b{font:400 28px 'Press Start 2P','Courier New',monospace;color:#ffd400}
.ccx-pause span{font-size:16px;color:#f0e6ff}
.ccx-banners{position:absolute;left:0;top:64px;width:560px;height:0;z-index:4}
.ccx-banners .mshop-banner{width:340px;left:110px}
.ccx-banners .mshop-banner b{font-size:17px}
.ccx-banners .mshop-banner small{font-size:14px;letter-spacing:0.06em;color:#d8cfae}

/* ---- the title ---------------------------------------------------------- */
.ccx-title{position:absolute;left:0;top:0;right:0;bottom:0;z-index:8;overflow:hidden;container-type:size;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;background:#05030a;
  padding:calc(var(--met-inset-tr,0px) + 2cqh) 16px 1.6cqh;outline:none;
  font-family:'IBM Plex Mono','Courier New',monospace}
.ccx-title canvas.ccx-tcv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:contain;
  image-rendering:pixelated;background:#05030a}
.ccx-tscrim{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,3,10,0.72) 0,rgba(5,3,10,0.4) 30%,rgba(5,3,10,0) 44%,rgba(5,3,10,0) 70%,rgba(5,3,10,0.72) 100%)}
.ccx-thead,.ccx-tcta{position:relative;z-index:1;max-width:100%}
.ccx-sign{display:inline-block;position:relative;margin-top:2cqh;padding:1.6cqh 3.2cqw 1.9cqh;
  background:linear-gradient(180deg,#6e4a2c,#4a2e1a);border:0.9cqh solid #2c1a10;border-radius:1.2cqh;
  box-shadow:0 1.2cqh 0 #1a0e08,0 0 4cqh rgba(0,0,0,0.6),inset 0 0.5cqh 0 rgba(255,220,160,0.25)}
.ccx-sign:before,.ccx-sign:after{content:'';position:absolute;top:-6cqh;width:0.6cqh;height:6cqh;background:#8a8f9e}
.ccx-sign:before{left:12%}
.ccx-sign:after{right:12%}
.ccx-logo{margin:0;line-height:1.05;white-space:nowrap;font:400 min(6.2cqw,11.5cqh)/1.05 'Press Start 2P','Courier New',monospace;
  letter-spacing:0.04em;text-transform:uppercase}
.ccx-logo .w1{display:block;color:#ffd400;
  text-shadow:0 0.06em 0 #c98a00,0 0.12em 0 #8a5a32,0 0.18em 0 #3a2414,0 0 0.4em rgba(255,212,0,0.35)}
.ccx-logo .w2{display:block;margin-top:0.18em;color:#ff3da8;font-size:0.82em;letter-spacing:0.16em;
  text-shadow:0 0.07em 0 #7a1450,0 0.14em 0 #3a0a26,0 0 0.35em rgba(255,61,168,0.8),0 0 0.9em rgba(255,61,168,0.45)}
.ccx-tag{margin:2.6cqh 0 0;font:600 clamp(12px,3cqh,24px)/1.3 'IBM Plex Mono','Courier New',monospace;color:#f4f0e6;
  letter-spacing:0.05em;text-shadow:0 1px 2px #000,0 0 10px #05030a}
.ccx-tcta{display:flex;flex-direction:column;align-items:center;gap:1cqh;margin:0;
  max-width:calc(100% - 2 * max(var(--met-inset-bl-w,0px),var(--met-inset-br,0px)) - 8px)}
.ccx-go{margin:0;padding:1.2cqh 2.4cqw;border:0;border-radius:10px;background:rgba(10,6,16,0.72);
  box-shadow:0 0 22px 14px rgba(10,6,16,0.55);color:#00ffa0;cursor:pointer;
  font:400 clamp(12px,min(3cqh,calc((100cqw - 2 * max(var(--met-inset-bl-w,0px),var(--met-inset-br,0px)) - 60px) / 27)),24px)/1.35 'Press Start 2P','Courier New',monospace;
  letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0.15em 0 #064d33,0 0 8px rgba(0,255,160,0.35);animation:ccxpulse 1.5s ease-in-out infinite}
.ccx-go:focus-visible{outline:2px solid #5be7ff;outline-offset:4px}
.ccx-thow{display:inline-block;margin:1.4cqh 0 0;font:600 clamp(12px,2.3cqh,17px) 'IBM Plex Mono','Courier New',monospace;color:#e6dcf5;
  text-shadow:0 1px 2px #000;background:rgba(10,6,16,0.6);padding:2px 10px;border-radius:6px}
@keyframes ccxpulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}
@container (max-height:300px){.ccx-thow{display:none}}
/* A NARROW STAGE has no room for the prompt between the host's corner marks
   (copyright bottom-left, studio mark bottom-right), so the prompt rises above
   the taller of the two and takes the full width instead. */
@container (max-width:1000px){.ccx-tcta{max-width:100%;margin-bottom:max(0px,calc(var(--met-inset-br,0px) - var(--met-inset-bl-h,0px) + 4px))}
.ccx-go{font-size:clamp(12px,3cqh,22px)}}
@container (max-height:220px){.ccx-tag{display:none}.ccx-sign:before,.ccx-sign:after{display:none}}
@container (max-width:480px){.ccx-logo{font-size:min(9.5cqw,12cqh)}}
@media (prefers-reduced-motion:reduce){.ccx-go{animation:none}}
/* a row the sim says is THE answer right now (the backroom, when the stockroom
   has stopped the bench and gold is well above its price) */
.ccx-side .mshop-item.ccx-hotrow{box-shadow:inset 3px 0 0 #ffd400;background:#241a08}
.ccx-side .mshop-item.ccx-hotrow .nm{color:#ffd400}
.ccx-side .mshop-addon.ccx-hotrow{box-shadow:inset 3px 0 0 #ffd400;background:#241a08;opacity:1}
/* ---- chips (TASK-1680[Q]) ------------------------------------------------
   an icon and a number, read at a glance: a material and how many, a clock
   and a time, a shelf and how many on show, a crate and how many wait. Red
   when it is what is missing. A row whose facts are chips wraps them. */
.ccx-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 5px;background:#150e1e;border:1px solid #3a2a44;
  border-radius:3px;font:700 14px/18px 'IBM Plex Mono','Courier New',monospace;color:#e6dcf5;white-space:nowrap;vertical-align:middle}
.ccx-chip img,.ccx-side .mshop-item .ccx-chip img,.ccx-side .mshop-addon .ccx-chip img{width:12px;height:12px;margin:0;image-rendering:pixelated;flex:none;align-self:center}
.ccx-chip b{font:inherit;color:inherit}
.ccx-chip.bad{border-color:#ff5f7a;color:#ffc2cc;background:#2a0e18}
.ccx-chip.good{border-color:#1f7a55;color:#9dffd6}
.ccx-chip.tag{color:#d7cdea;letter-spacing:0.04em}
.ccx-chip.give{border-color:#6a5a80}
.ccx-side .ds.ccx-chiprow,.ccx-head i.ccx-chiprow{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;padding:2px 0}
.ccx-chipnote{font:14px/1.35 'IBM Plex Mono','Courier New',monospace;color:#c3cbe6}
.ccx-badge{display:inline-block;margin-left:6px;padding:2px 5px;border:1px solid #6a5a80;border-radius:3px;font:700 14px/18px 'IBM Plex Mono','Courier New',monospace;
  color:#ffd400;vertical-align:1px;white-space:nowrap}
/* ---- a press, and what it changed (TASK-1681[Q], counter-culture.press.js) ----
   Every state here is paint only: transform, filter, box-shadow, a pseudo
   element laid over the button. No border, padding, margin or size changes,
   so a button, its row and the rows under it keep their boxes to the pixel. */
.ccx button:not([disabled]):active,.ccx button.ccx-down:not([disabled]){transform:translateY(1px);filter:brightness(1.35);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.45)}
.ccx button.ccx-ok,.ccx button.ccx-no{position:relative;overflow:visible}
.ccx button.ccx-ok{box-shadow:0 0 0 2px #00ffa0,0 0 12px 2px rgba(0,255,160,0.65);animation:ccxokglow 0.7s ease-out}
/* the result word, laid OVER the label and grown leftward from the button's
   right edge, so a word longer than the label moves nothing */
.ccx button.ccx-ok:not([data-fx=""])::after{content:attr(data-fx);position:absolute;top:-1px;bottom:-1px;right:-1px;min-width:calc(100% + 2px);
  display:flex;align-items:center;justify-content:center;padding:0 7px;background:#00ffa0;color:#03170d;border-radius:3px;
  font:700 14px 'IBM Plex Mono','Courier New',monospace;letter-spacing:0.04em;white-space:nowrap;pointer-events:none;z-index:2}
.ccx button.ccx-no{box-shadow:0 0 0 2px #ff5f7a,0 0 10px 2px rgba(255,95,122,0.6);animation:ccxshake 0.35s ease-in-out}
@keyframes ccxokglow{0%{filter:brightness(1.8)}100%{filter:brightness(1)}}
@keyframes ccxshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* the layer the pointers draw in, over the panels and under the banners: a
   zero-size origin, so it lies over nothing but what it is drawing */
.ccx-fx{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:3}
.ccx-fly{position:absolute;padding:3px 8px;background:#ffd400;color:#1a1000;border-radius:3px;white-space:nowrap;
  font:700 14px/18px 'IBM Plex Mono','Courier New',monospace;box-shadow:0 2px 10px rgba(0,0,0,0.6);animation:ccxfly 1.2s ease-out forwards}
@keyframes ccxfly{0%{transform:translate(var(--fx,0),var(--fy,0)) scale(0.85);opacity:0.85}40%{transform:translate(0,0) scale(1);opacity:1}
  85%{opacity:1}100%{transform:translate(0,0);opacity:0}}
.ccx-fly.still{animation:none}
.ccx-pop{position:absolute;transform:translateX(-50%);padding:1px 6px;background:#0b2a1c;border:1px solid #00ffa0;color:#b8ffe2;border-radius:3px;
  white-space:nowrap;font:700 14px/18px 'IBM Plex Mono','Courier New',monospace;animation:ccxpop 1s ease-out forwards}
.ccx-pop.spend{background:#2a0e18;border-color:#ff5f7a;color:#ffd0d8}
@keyframes ccxpop{0%{transform:translate(-50%,-8px);opacity:0}20%{transform:translate(-50%,0);opacity:1}80%{opacity:1}100%{transform:translate(-50%,6px);opacity:0}}
.ccx-top .mshop-chip.ccx-bump{box-shadow:0 0 0 2px #00ffa0,0 0 10px rgba(0,255,160,0.6);animation:ccxbump 0.4s ease-out}
@keyframes ccxbump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.ccx-side .mshop-item.ccx-rowflash,.ccx-side .mshop-addon.ccx-rowflash,.ccx-side .ccx-head.ccx-rowflash{
  box-shadow:inset 0 0 0 2px #00ffa0,inset 4px 0 0 #00ffa0;animation:ccxrowflash 0.5s ease-in-out 2}
@keyframes ccxrowflash{50%{box-shadow:inset 0 0 0 2px #00ffa0,inset 4px 0 0 #00ffa0,inset 0 0 18px rgba(0,255,160,0.35)}}
.ccx-tab.ccx-tabflash{box-shadow:inset 0 -3px 0 #00ffa0,0 0 10px rgba(0,255,160,0.6)}
/* REDUCED MOTION: no flight, no shake, no pulse; the same highlights hold
   still for the same time */
@media (prefers-reduced-motion:reduce){
  .ccx button:not([disabled]):active,.ccx button.ccx-down:not([disabled]){transform:none}
  .ccx button.ccx-ok,.ccx button.ccx-no,.ccx-fly,.ccx-pop,.ccx-top .mshop-chip.ccx-bump,.ccx-side .ccx-rowflash{animation:none}
}