/* Memecoinx1000 ($X1000) — FRAME styles: the masthead, the tape (+ BREAKING), the floor line, the theme + sound buttons, the
   moments (big stamps, the slam, the float, the cash drawer, THE MEMECOINX1000 TIMES EXTRA), the machines, the lever, the odometer,
   rubber stamps, the share sheet and the cashier. Loaded after style.css. Only the FRAME owner edits this file.
   Every colour is a token from style.css, so the paper-at-night theme works everywhere. Prefix: .fr- */

/* ---------------------------------------------------------------- theme switch: one soft cross-fade, then gone */
html.fr-theming, html.fr-theming *, html.fr-theming *::before, html.fr-theming *::after {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease, stroke .32s ease, box-shadow .32s ease !important;
}

/* ---------------------------------------------------------------- numbers that never wobble (any owner may use it) */
.fr-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the masthead */
.fr-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: .86; padding: 5px 11px 3px; }
.fr-logo small { font: 700 9.5px/1 var(--mono); letter-spacing: 3.2px; margin: 0 0 3px 3px; }
.nav a { position: relative; }
.fr-xbadge {
  position: absolute; top: -7px; right: -6px; font: 400 10px/1 var(--head); font-style: normal; letter-spacing: 1px;
  background: var(--red); color: var(--on-color); padding: 3px 4px 2px; border: 1.5px solid var(--ink); box-shadow: 1.5px 1.5px 0 var(--shade);
  transform: rotate(8deg); animation: frBadge .26s cubic-bezier(.2,1.6,.4,1) both; pointer-events: none;
}
@keyframes frBadge { from { transform: rotate(8deg) scale(2); opacity: 0; } }
.btn.fr-icon { padding: 6px 8px; min-width: 40px; min-height: 38px; justify-content: center; }
.btn.fr-icon svg { width: 22px; height: 22px; display: block; overflow: visible; }
.btn.fr-icon:focus-visible, .fr-linkbtn:focus-visible, .fr-slam-share:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
/* the drawn sun / moon: a disc, a bite that slides in, rays that fold away */
.fr-sm .fr-disc { fill: var(--hi); stroke: var(--ink); stroke-width: 2; }
.fr-sm .fr-bite { fill: var(--sheet); transform: translate(11px, -11px); transition: transform .38s cubic-bezier(.3,1.4,.5,1); }
.fr-sm .fr-rays path { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.fr-sm .fr-rays { transform-origin: 12px 12px; transition: transform .38s cubic-bezier(.3,1.4,.5,1), opacity .22s; }
:root[data-theme="dark"] .fr-sm .fr-disc { fill: var(--ink); }
:root[data-theme="dark"] .fr-sm .fr-bite { transform: translate(3.9px, -3.3px); }
:root[data-theme="dark"] .fr-sm .fr-rays { transform: rotate(-70deg) scale(.4); opacity: 0; }
.fr-theme:hover .fr-rays { transform: rotate(22deg); }
:root[data-theme="dark"] .fr-theme:hover .fr-bite { transform: translate(3.2px, -2.6px); }
/* the drawn speaker: waves show the volume, a red cross when it is off */
.fr-spk path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fr-spk .fr-cone { fill: var(--ink); }
.fr-spk .fr-x { display: none; stroke: var(--red); stroke-width: 2.4; }
.fr-snd[data-vol="LOW"] .fr-w2, .fr-snd[data-vol="LOW"] .fr-w3, .fr-snd[data-vol="MID"] .fr-w3 { opacity: .2; }
.fr-snd.off .fr-w1, .fr-snd.off .fr-w2, .fr-snd.off .fr-w3 { display: none; }
.fr-snd.off .fr-x { display: inline; }
.fr-snd.off .fr-cone { fill: var(--ink3); stroke: var(--ink3); }

/* ---------------------------------------------------------------- the floor line (server mode: real people only) */
.fr-floorline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; padding: 6px 20px; border-bottom: 1px dashed var(--ink-a25); font: 700 12px/1.3 var(--mono); letter-spacing: .4px; color: var(--ink2); }
.fr-floorline b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fr-fl-dot { color: var(--blue); font-size: 10px; margin-right: 8px; animation: frLive 2.4s steps(2, jump-none) infinite; }
@keyframes frLive { 50% { opacity: .35; } }
.fr-fl-i { white-space: nowrap; }
.fr-fl-i:not([hidden]) ~ .fr-fl-i:not([hidden])::before { content: "·"; margin: 0 10px; color: var(--ink3); }
.fr-fl-best { color: var(--blue); text-decoration: none; }
.fr-fl-best b { color: var(--blue); }
.fr-fl-best:hover { text-decoration: underline; text-decoration-thickness: 2px; }
body.lite .fr-fl-dot { animation: none; }

/* ---------------------------------------------------------------- the tape: money chips + BREAKING */
.tape-item .fr-c { font-style: normal; color: var(--tape-blue); margin-right: 1px; }
.tape-item .fr-p { display: inline-grid; place-items: center; width: 13px; height: 13px; margin: 0 4px 0 1px; border: 1.5px solid var(--tape-dim); color: var(--tape-ink); font: 700 9px/1 var(--mono); font-style: normal; vertical-align: 1px; }
.tape-item.breaking {
  height: 100%; gap: 9px; padding: 0 18px 0 8px; border-right: 0; background: var(--red); color: var(--on-color);
  font: 400 15px/1 var(--head); letter-spacing: .6px; animation: frBreakIn .25s steps(7, end) both;
}
.tape-item.breaking.fr-bk-win { background: var(--blue); }
.tape-item.breaking b, .tape-item.breaking .who { color: var(--on-color); font-weight: 400; }
.tape-item.breaking .who.me { color: var(--on-hi); }
.tape-item.breaking .fr-c { color: var(--on-color); }
.tape-item.breaking .fr-p { border-color: var(--on-color); color: var(--on-color); }
.fr-bk { font: 700 10px/1 var(--mono); letter-spacing: 1.6px; padding: 3px 5px 2px; background: var(--tape-ink); color: var(--on-hi); border: 1.5px solid var(--on-hi); }
.fr-bks { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; font: 400 12px/1 var(--head); font-style: normal; transform: rotate(-12deg); }
@keyframes frBreakIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------------- toasts (+ combo stamps, alerts) */
.toast { transition: opacity .25s, transform .25s; }
.toast.fr-out { opacity: 0; transform: translateX(16px) rotate(-1deg); }
.toast.fr-combo { background: var(--sheet); color: var(--blue); border: 3px solid currentColor; box-shadow: none; font: 400 24px/1 var(--head); letter-spacing: 1.5px; padding: 9px 15px 6px; transform: rotate(-4deg); animation: frCombo .16s cubic-bezier(.2,1.6,.4,1) both; }
.toast.fr-combo-liq { color: var(--red); transform: rotate(3deg); }
.toast.fr-combo.fr-out { opacity: 0; }
@keyframes frCombo { from { transform: rotate(-4deg) scale(2); opacity: 0; } }
.toast.fr-alert { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--blue); }

/* ---------------------------------------------------------------- THE MOMENTS */
.big-stamp.fr-big { animation: frSlam .16s cubic-bezier(.2,1.6,.4,1) both; transition: opacity .28s; }
.big-stamp.fr-big.fr-out { opacity: 0; }
@keyframes frSlam { from { transform: scale(2.4) rotate(var(--rot)); opacity: 0; } to { transform: scale(1) rotate(var(--rot)); opacity: 1; } }
.big-stamp .fr-count { font: inherit; font-size: .42em; vertical-align: .95em; margin-left: .08em; }
.big-stamp .fr-count:empty { display: none; }
.big-stamp.fr-ten { font-size: clamp(56px, 11vw, 150px); --rot: -4deg; }
.big-stamp small.fr-roll:empty { display: none; }
/* a new rubber stamp, mid-screen */
.fr-slam { display: grid; justify-items: center; gap: 10px; animation: frSlam2 .16s cubic-bezier(.2,1.6,.4,1) both; transition: opacity .28s; }
.fr-slam.fr-out { opacity: 0; }
@keyframes frSlam2 { from { transform: scale(2.4) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.fr-slam-k { font: 400 22px/1 var(--head); letter-spacing: 3px; background: var(--ink); color: var(--paper); padding: 6px 12px 4px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--red); }
.fr-slam-art { width: min(220px, 60vw); aspect-ratio: 1; }
.fr-slam-share { pointer-events: auto; border: var(--line); background: var(--hi); color: var(--on-hi); font: 400 16px/1 var(--head); letter-spacing: 1.5px; padding: 10px 18px 8px; min-height: 38px; box-shadow: 3px 3px 0 var(--shade); cursor: pointer; }
.fr-slam-share:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shade); }
/* T1: the amount floats off the receipt */
.fr-float { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); white-space: nowrap; font: 400 34px/1 var(--head); letter-spacing: .5px; color: var(--blue); background: var(--white); border: 2.5px solid var(--blue); padding: 5px 11px 3px; box-shadow: 3px 3px 0 var(--shade); }
/* T3 / T4: the cash drawer slides up from the bottom edge */
.fr-drawer { position: fixed; left: 50%; bottom: 0; z-index: 51; width: min(420px, 92vw); transform: translate(-50%, 100%); pointer-events: none; }
.fr-drawer svg { display: block; width: 100%; height: auto; }
/* T4: THE MEMECOINX1000 TIMES · EXTRA — the paper spins in and lands */
.fr-extra { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; overflow: auto; background: var(--scrim); animation: fadeIn .2s; transition: opacity .25s; }
.fr-extra.fr-out { opacity: 0; }
.fr-np { position: relative; width: min(760px, 100%); background: var(--white); border: var(--line); box-shadow: 10px 10px 0 var(--shade); padding: 18px 26px 22px; transform: rotate(-1.5deg); animation: frSpin .62s cubic-bezier(.2,.9,.3,1.08) both; }
@keyframes frSpin { 0% { transform: rotate(-720deg) scale(.04); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-1.5deg) scale(1); } }
.fr-np-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 700 11px var(--mono); letter-spacing: .5px; border-bottom: 2px solid var(--ink); padding-bottom: 5px; }
.fr-np-mast { margin: 10px 0 6px; text-align: center; font: 400 clamp(26px, 6.2vw, 58px)/.95 var(--head); letter-spacing: 1px; }
.fr-np-rule { display: flex; justify-content: space-around; border-top: 4px double var(--ink); border-bottom: 4px double var(--ink); padding: 4px 0 2px; font: 400 14px/1.1 var(--head); letter-spacing: 6px; color: var(--red); }
.fr-np-ribbon { position: absolute; top: 16px; right: -12px; transform: rotate(8deg); background: var(--red); color: var(--on-color); font: 400 26px/1 var(--head); font-style: normal; letter-spacing: 2px; padding: 8px 18px 6px; box-shadow: 4px 4px 0 var(--shade); }
.fr-np-head { margin: 16px 0 6px; font: 400 clamp(30px, 6.4vw, 62px)/1 var(--head); letter-spacing: .5px; text-transform: uppercase; }
.fr-np-amt { color: var(--blue); }
.fr-np-deck { margin: 0 0 12px; font: 700 15px var(--mono); color: var(--ink2); }
.fr-np-body { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; border-top: 2px solid var(--ink); padding-top: 12px; }
.fr-np-pict { aspect-ratio: 5 / 3; }
.fr-np-pict svg { display: block; width: 100%; height: 100%; }
.fr-np-story { font: 400 16px/1.5 var(--mono); }
.fr-np-story p { margin: 0 0 8px; }
.fr-np-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 6px; }

/* ---------------------------------------------------------------- the machines */
.fr-machine { width: 100%; height: 100%; }
.fr-machine svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fr-dialL, .fr-dialR, .fr-lamp, .fr-shlamp { transform-box: fill-box; transform-origin: center; }
.fr-slotPaper { transform-box: fill-box; }
.fr-sh-body { transform-box: fill-box; transform-origin: 50% 0; }
.fr-pile { transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.fr-flying { will-change: transform; }

/* ---------------------------------------------------------------- THE 1000x LEVER */
.fr-lever { position: relative; width: 100%; height: 74px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
.fr-lever:active { cursor: grabbing; }
.fr-lever:focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }
.fr-lever svg { display: block; overflow: visible; }
.fr-lv-handle { transition: transform .07s cubic-bezier(.3,1.6,.5,1); }
.fr-lv-holding .fr-lv-val { opacity: 0; }
.fr-lv-stop:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the odometer: digits on rolling strips */
.fr-odo { display: inline-flex; align-items: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fr-od { display: inline-block; height: 1.08em; overflow: hidden; vertical-align: top; }
.fr-ods { display: flex; flex-direction: column; transition: transform .22s cubic-bezier(.3,1.4,.5,1); will-change: transform; }
.fr-ods i { display: block; height: 1.08em; line-height: 1.08em; font-style: normal; text-align: center; }
.fr-oc { display: inline-block; height: 1.08em; line-height: 1.08em; }

/* ---------------------------------------------------------------- rubber stamps */
.fr-mstamp {
  position: absolute; z-index: 4; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); font-family: var(--head); font-weight: 400; line-height: 1;
  letter-spacing: .05em; white-space: nowrap; border: .14em solid currentColor; border-radius: .1em; padding: .14em .34em .06em; pointer-events: none;
  mix-blend-mode: var(--blend); animation: frMs .12s cubic-bezier(.2,1.4,.4,1) both; transition: opacity .3s;
}
.fr-mstamp.fr-out { opacity: 0; }
@keyframes frMs { from { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.8); opacity: 0; } }
.fr-ink-blue { color: var(--blue); } .fr-ink-red { color: var(--red); } .fr-ink-ink { color: var(--ink); } .fr-ink-grey { color: var(--ink3); }
.fr-stampart { display: block; width: 100%; height: 100%; overflow: visible; mix-blend-mode: var(--blend); }

/* ---------------------------------------------------------------- the share sheet */
.fr-shot { position: relative; margin-top: 8px; aspect-ratio: 1200 / 675; border: var(--line); background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.fr-shot .share-img { margin: 0; border: 0; width: 100%; height: 100%; }
.fr-shot-wait { font: 400 22px var(--head); letter-spacing: 3px; color: var(--ink3); animation: frWait 1s steps(2, jump-none) infinite; }
@keyframes frWait { 50% { opacity: .35; } }
.fr-post { margin: 10px 0 0; font: 700 14px/1.4 var(--mono); }
.fr-post span { color: var(--blue); }
.fr-share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fr-share-btns .big-btn { font-size: 20px; padding: 12px; }
.fr-share-btns a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.fr-clipbtn { position: relative; overflow: hidden; }
.fr-clipbtn .fr-bar { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--p, 0) * 100%); background: var(--red); }
.fr-clipbtn.fr-busy { cursor: progress; }

/* ---------------------------------------------------------------- THE CASHIER 2.0 */
.fr-cashier .fr-cz-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; font: 700 13px var(--mono); }
.fr-cashier .fr-cz-state span { color: var(--ink2); font-weight: 400; }
.fr-ok { color: var(--blue); }
.fr-linkbtn { border: 2px solid var(--ink); background: var(--hi); color: var(--on-hi); font: 400 14px/1 var(--head); letter-spacing: 1px; padding: 7px 11px 5px; min-height: 32px; box-shadow: 2px 2px 0 var(--shade); }
.fr-cz-min { margin: 6px 0 0; font: 700 11px var(--mono); color: var(--ink2); }
.fr-cz-line { margin: 12px 0 0; padding-left: 10px; border-left: 4px solid var(--red); font: 700 12px/1.4 var(--mono); }
.fr-cz-note { margin: 10px 0 0; padding: 8px 10px; border: 2px dashed var(--ink3); font: 700 13px/1.4 var(--mono); }
.note.fr-bad, .fr-cz-note.fr-bad { background: var(--error-wash); color: var(--ink); }
.note a, .fr-cz-moves a { color: var(--blue); font-weight: 700; }
.fr-cz-moves h4 { margin: 16px 0 4px; font: 400 18px/1 var(--head); letter-spacing: 1px; }
.fr-cz-moves ol { list-style: none; margin: 0; padding: 0; }
.fr-cz-moves li { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "k amt tx" "k st t"; gap: 1px 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--ink3); font: 700 12px var(--mono); }
.fr-cz-moves li > b { grid-area: k; align-self: center; font: 400 14px/1 var(--head); letter-spacing: 1px; }
.fr-cz-moves li > span:first-of-type { grid-area: amt; }
.fr-cz-moves li > em { grid-area: st; font-style: normal; color: var(--ink2); }
.fr-cz-moves li > .fr-cz-t { grid-area: t; color: var(--ink3); font-weight: 400; text-align: right; }
.fr-cz-moves li > a { grid-area: tx; text-align: right; }
.fr-cz-moves li.fr-out-done em, .fr-cz-moves li.fr-in em { color: var(--blue); }
.fr-cz-moves li.fr-out-refunded em { color: var(--red); }

/* ---------------------------------------------------------------- phones (375px and up) */
@media (max-width: 900px) {
  .nav { padding-top: 7px; }
}
@media (max-width: 760px) {
  .fr-floorline { padding: 5px 14px; font-size: 11px; }
  .fr-fl-i:not([hidden]) ~ .fr-fl-i:not([hidden])::before { margin: 0 7px; }
  .fr-share-btns { grid-template-columns: 1fr; }
  .fr-np { padding: 14px 16px 16px; box-shadow: 6px 6px 0 var(--shade); }
  .fr-np-ribbon { right: 8px; top: -12px; font-size: 18px; padding: 6px 12px 4px; }
  .fr-np-body { grid-template-columns: 1fr; }
  .fr-np-pict { max-width: 220px; }
  .fr-np-btns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mast-right .money { order: 5; flex-basis: 100%; }
  .mast-right .btn.wallet { margin-left: auto; }
  .fr-float { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-np { animation: none; transform: rotate(-1.5deg); }
  .fr-lv-handle, .fr-ods, .fr-pile { transition: none; }
}

/* GK 2026-10-12: the cashier pop-up was cut off (two cards in a 460 px sheet). Wider sheet; the cards stack on a phone. */
.sheet.fr-cashier { width: min(720px, 100%); }
.fr-cashier .cash-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fr-cashier .cash-card { min-width: 0; }