/* prices: commission builder (js/prices.js): control deck | TV | checkout machine */
.part-wide { max-width: 1200px; }
.calc { display: grid; grid-template-columns: 300px minmax(0, 440px) 320px; grid-template-areas: "deck tv checkout"; justify-content: center; gap: 22px; align-items: start; }
.left { grid-area: deck; display: flex; flex-direction: column; gap: 22px; } .tv { grid-area: tv; } .checkout { grid-area: checkout; }
@media (max-width: 1160px) { .calc { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "tv deck" "tv checkout"; } }
@media (max-width: 760px) { .calc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tv" "deck" "checkout" "monitor"; }
  .left { display: contents; } .deck { grid-area: deck; } .monitor { grid-area: monitor; } }   /* phones: checkout right under the controls, the heart monitor last */

/* ---- the TV: bezel with screws, CRT screen with grid, scanlines, vignette and a slow scan beam */
.tv { position: relative; padding: 14px; border-radius: 26px; border: 1px solid #2b2e39;
  background: radial-gradient(circle at 13px 13px, #3b3e4a 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 13px) 13px, #3b3e4a 0 3px, transparent 4px),
    radial-gradient(circle at 13px calc(100% - 13px), #3b3e4a 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #3b3e4a 0 3px, transparent 4px),
    linear-gradient(#1b1d25, #101117);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.tv-screen { position: relative; overflow: hidden; border-radius: 16px; font: 500 11px/1.4 var(--font-mono); color: var(--cyber-chrome-300);
  background: radial-gradient(120% 90% at 50% 40%, #1c0b11 0%, #0b0b10 55%, #050507 100%);
  box-shadow: inset 0 0 0 1px rgba(255,43,63,.28), inset 0 0 70px rgba(255,43,63,.12); transform-origin: center; }
.tv-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(255,43,63,.06) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(255,43,63,.06) 1px, transparent 1px) 0 0 / 24px 100%; }
.tv-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.6) 100%); }
.tv-scan { position: absolute; left: 0; right: 0; top: -90px; height: 90px; z-index: 5; pointer-events: none;
  background: linear-gradient(transparent, rgba(255,43,63,.09), transparent); animation: tv-scan 5.5s linear infinite; }
@keyframes tv-scan { from { top: -90px; } to { top: 100%; } }
/* switches on like an old TV the first time it scrolls into view */
.calc .tv-screen { transform: scale(.02, .004); filter: brightness(3); }
.calc.on .tv-screen { animation: tv-on .85s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes tv-on { 0% { transform: scale(.02, .004); filter: brightness(3); } 40% { transform: scale(1, .004); filter: brightness(3); } 100% { transform: none; filter: none; } }

.tv-top, .tv-bottom { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; letter-spacing: .14em; }
.tv-top { justify-content: space-between; border-bottom: 1px solid rgba(255,43,63,.22); }
.tv-title { color: var(--cyber-cyan-400); }
.rec::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ff2b3f; box-shadow: 0 0 8px #ff2b3f; animation: rec 1.2s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.tv-bottom { border-top: 1px solid rgba(255,43,63,.22); }
.tv-bottom span { white-space: nowrap; }
.tv-body { position: relative; z-index: 1; display: grid; grid-template-columns: 24px minmax(0, 1fr); }
.tv-ruler { border-right: 1px solid rgba(255,43,63,.22);
  background: repeating-linear-gradient(to bottom, rgba(255,43,63,.55) 0 1px, transparent 1px 10px) right top / 8px 100% no-repeat,
    repeating-linear-gradient(to bottom, rgba(255,43,63,.9) 0 1px, transparent 1px 50px) right top / 16px 100% no-repeat; }

/* ---- character select: the chosen figure in the middle, neighbours peeking, ‹ › to cycle */
.stage { min-width: 0; padding: 20px 12px 16px; }
.sel { position: relative; }
.track { position: relative; height: var(--H, 320px); overflow: hidden; }
.ln { position: absolute; left: 0; right: 0; z-index: 3; border-top: 2px dashed rgba(255,43,63,.35); pointer-events: none; transition: border-color .25s, box-shadow .25s, opacity .35s; }
.ln span { position: absolute; left: 2px; bottom: 5px; font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cyber-cyan-400); }
.ln.pv { border-top-color: var(--cyber-cyan-500); box-shadow: 0 -1px 10px rgba(255,43,63,.45); }
.ln.pv span { color: #fff; text-shadow: 0 0 8px #ff2b3f; }
.ln.gone { opacity: 0; }                                    /* the chosen line disappears; the liquid marks it */
.subj-fig { position: absolute; top: 0; left: 50%; height: 100%; transition: transform .5s cubic-bezier(.3, 1.25, .4, 1), opacity .35s ease; }
.subj-fig svg { display: block; height: 100%; width: calc(var(--H, 320px) * .4444); overflow: visible; cursor: pointer; transition: filter .4s; }
.subj-fig.filled svg { filter: drop-shadow(0 0 12px rgba(255,43,63,.35)); }
.subj-fig.enter svg { animation: subj-in .6s ease both; }
@keyframes subj-in { from { filter: brightness(4) drop-shadow(0 0 20px #ff2b3f); opacity: 0; } }
.sil-stroke { fill: #c9ccd6; stroke: #c9ccd6; stroke-width: 8; stroke-linejoin: round; }
.sil-fill { fill: #0d0e14; }
.liq-shine { fill: none; stroke: rgba(255,200,205,.75); stroke-width: 2; }
.drips ellipse { fill: #ff2b3f; }
.bubbles circle { fill: rgba(255,255,255,.22); }
.details path { fill: none; stroke: #c9ccd6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.details .nose { stroke-width: 3; }
.bbox { fill: none; stroke: rgba(255,43,63,.45); stroke-width: 1.5; }
.tag { fill: rgba(255,43,63,.5); font: 600 8px var(--font-mono); }
.pv-line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .15s; pointer-events: none; }   /* own name: .pv marks hovered buttons */
.pv-line.show { opacity: .8; }
/* NSFW: devil horns grow out of the head */
.horns path { fill: #c8102a; stroke: #f2f3f6; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255,43,63,.9));
  transform-box: fill-box; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.horns .hl { transform-origin: 100% 100%; } .horns .hr { transform-origin: 0 100%; }
.calc.nsfw .horns path { transform: scale(1); }

.arrow { position: absolute; top: 50%; z-index: 4; width: 38px; height: 54px; transform: translateY(-50%); display: none; place-items: center; padding: 0; cursor: pointer;
  border-radius: 10px; border: 1.5px solid rgba(255,43,63,.5); background: rgba(13,14,20,.75); color: #fff; font: 700 30px/1 var(--font-display);
  text-shadow: 0 0 10px #ff2b3f; transition: border-color .2s, box-shadow .2s, background .2s; }
.arrow.prev { left: 0; } .arrow.next { right: 0; }
.sel.multi .arrow { display: grid; }
.arrow:hover, .arrow:focus-visible { border-color: var(--cyber-cyan-500); background: rgba(255,43,63,.18); box-shadow: 0 0 14px rgba(255,43,63,.5); outline: none; }
.arrow:active { transform: translateY(-50%) scale(.92); }
.sel-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; margin-top: 12px; letter-spacing: .12em; color: var(--cyber-cyan-400); }
.dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer; border: 1.5px solid rgba(255,43,63,.6); background: transparent; transition: background .2s, box-shadow .2s, transform .2s; }
.dot.set { background: rgba(255,43,63,.45); }
.dot.on { background: #ff2b3f; box-shadow: 0 0 8px #ff2b3f; transform: scale(1.25); }
.subj-rm { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1px solid rgba(255,43,63,.45); background: none; cursor: pointer;
  color: var(--color-text-primary); font: 700 12px var(--font-mono); }
.subj-rm:hover, .subj-rm:focus-visible { border-color: var(--cyber-cyan-500); background: var(--cyber-cyan-500); outline: none; }

/* ---- the size buttons: flicker like a glitchy screen when hovered */
.chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chip { display: flex; justify-content: space-between; gap: 6px; padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left;
  font: 600 12px var(--font-mono); letter-spacing: .04em; color: var(--color-text-primary); background: rgba(13,14,20,.85); border: 1.5px solid rgba(255,43,63,.35);
  transition: border-color .2s, box-shadow .2s, background .2s; }
.chip:hover, .chip:focus-visible, .chip.pv { border-color: var(--cyber-cyan-500); box-shadow: 0 0 10px rgba(255,43,63,.4); outline: none; }
.chip:hover, .chip:focus-visible { animation: chip-flicker .45s steps(1) both; }
@keyframes chip-flicker {
  0% { opacity: .35; } 12% { opacity: 1; text-shadow: 0 0 8px #ff2b3f; } 24% { opacity: .45; } 36% { opacity: 1; }   /* no movement: a shift under the cursor would re-trigger the hover */
  52% { opacity: .7; } 64% { opacity: 1; } 100% { opacity: 1; } }
.chip[aria-pressed="true"] { background: var(--cyber-cyan-500); border-color: var(--cyber-cyan-500); color: #fff; }

/* ---- heart monitor (just for show): its own little medical monitor under the control deck */
.monitor { padding: 12px; border-radius: 20px; border: 1px solid #2b2e39; background: linear-gradient(#1b1d25, #101117);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.mon-screen { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-radius: 12px;
  font: 500 11px/1.4 var(--font-mono); color: var(--cyber-chrome-300); background: radial-gradient(120% 90% at 50% 30%, #1c0b11 0%, #0b0b10 60%, #050507 100%);
  box-shadow: inset 0 0 0 1px rgba(255,43,63,.28), inset 0 0 50px rgba(255,43,63,.1); }
.mon-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.mon-head { display: flex; justify-content: space-between; letter-spacing: .14em; padding-bottom: 8px; border-bottom: 1px solid rgba(255,43,63,.22); }
.waves { display: grid; gap: 2px; min-width: 0; }
.waves span { font-size: 9px; letter-spacing: .12em; color: rgba(255,43,63,.75); }
.waves canvas { display: block; width: 100%; }
.waves .ecg { height: 70px; } .waves .pleth { height: 36px; } .waves .resp { height: 30px; }
.reads { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255,43,63,.22); }
.reads small { display: block; font-size: 9px; letter-spacing: .12em; color: rgba(178,183,199,.7); }
.reads b { font: 400 20px/1 "DotGothic16", monospace; color: #ff8a9a; }
.bpm b { font-size: 36px; color: #ff2b3f; text-shadow: 0 0 10px rgba(255,43,63,.8); }
.bpm i { font-style: normal; font-size: 18px; color: #ff2b3f; margin-right: 6px; display: inline-block; vertical-align: top; }
.bpm.beat i { animation: beat .35s ease; }
@keyframes beat { 30% { transform: scale(1.5); text-shadow: 0 0 12px #ff2b3f; } }

/* ---- control deck */
.deck { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 18px; background: rgba(18,20,29,.92); border: 1px solid var(--color-border-default); }
.deck-title { font: 700 12px var(--font-mono); letter-spacing: .22em; color: var(--cyber-cyan-400); }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ctl-label { font: 700 15px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-primary); }
.ctl-label small { font: 500 11px var(--font-mono); letter-spacing: .04em; text-transform: none; color: var(--cyber-chrome-300); }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(13,14,20,.9); border: 1px solid var(--color-border-default); }
.seg-blob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: var(--cyber-cyan-500); box-shadow: 0 0 14px rgba(255,43,63,.55);
  transition: left .35s cubic-bezier(.3, 1.5, .5, 1), width .35s cubic-bezier(.3, 1.5, .5, 1); }
.seg button { position: relative; padding: 6px 12px; border-radius: 999px; border: 1.5px solid transparent; background: none; cursor: pointer;
  font: 700 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-primary); }
.seg button:hover:not([aria-pressed="true"]), .seg button:focus-visible { border-color: var(--cyber-cyan-500); outline: none; }
.seg button[aria-pressed="true"] { color: #fff; }
.switch { position: relative; flex: none; width: 60px; height: 32px; padding: 0; border-radius: 999px; cursor: pointer; border: 1.5px solid rgba(255,43,63,.5);
  background: rgba(13,14,20,.9); transition: background .25s, box-shadow .25s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #c9ccd6;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.switch .knob svg { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.switch[aria-checked="true"] { background: var(--cyber-cyan-500); border-color: var(--cyber-cyan-500); box-shadow: 0 0 16px rgba(255,43,63,.6); }
.switch[aria-checked="true"] .knob { transform: translateX(28px); background: #fff; }
.switch[aria-checked="true"] .knob svg { opacity: 1; transform: none; }
.switch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the checkout machine and its paper receipt */
.machine { position: relative; z-index: 1; padding: 14px 14px 16px; border-radius: 14px; border: 1px solid #343745; background: linear-gradient(#24262f, #15161c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.45); }
.m-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font: 700 11px var(--font-mono); letter-spacing: .16em; color: var(--cyber-chrome-300); }
.m-led { width: 8px; height: 8px; border-radius: 50%; background: #ff2b3f; box-shadow: 0 0 8px #ff2b3f; animation: rec 1.2s steps(1) infinite; }
.m-display { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 8px; background: #07070a;
  box-shadow: inset 0 0 0 1px rgba(255,43,63,.3), inset 0 0 22px rgba(255,43,63,.12); }
.m-label { font: 700 11px var(--font-mono); letter-spacing: .2em; color: var(--cyber-chrome-300); }
.m-total { font: 400 42px/1 "DotGothic16", monospace; color: #ff2b3f; text-shadow: 0 0 12px rgba(255,43,63,.85); }
.m-code { display: flex; gap: 8px; margin-top: 12px; }
.m-in { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1.5px solid rgba(255,43,63,.4); background: #0b0c11; outline: none;
  color: var(--color-text-primary); font: 600 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.m-in:focus { border-color: var(--cyber-cyan-500); box-shadow: 0 0 10px rgba(255,43,63,.35); }
.m-in:disabled { opacity: .7; }
.m-code.bad .m-in { animation: shake .4s; border-color: #ff2b3f; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.m-msg { min-height: 16px; margin-top: 6px; font: 500 11px var(--font-mono); color: var(--cyber-chrome-300); }
.m-msg.ok { color: #7dffb0; }
.m-checkout { width: 100%; margin-top: 8px; padding-block: 12px; font-size: 16px; }
.m-slot { height: 7px; margin: 14px 16px 0; border-radius: 4px; background: #040405; box-shadow: inset 0 2px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); }
.receipt { position: relative; margin: -14px 26px 10px; padding: 18px 14px 14px; background: #ece8df; color: #1c1c23; font: 500 12px/1.6 var(--font-mono); box-shadow: 0 8px 16px rgba(0,0,0,.35); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: linear-gradient(135deg, #ece8df 50%, transparent 50%) 0 0 / 12px 8px repeat-x, linear-gradient(-135deg, #ece8df 50%, transparent 50%) 0 0 / 12px 8px repeat-x; }
.receipt.feed { animation: feed .3s ease; }
@keyframes feed { from { transform: translateY(-6px); } }
.receipt.print { animation: print 1.1s steps(12) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -10px 0); } }
.r-row { display: flex; justify-content: space-between; gap: 10px; }
.r-hr { margin: 7px 0; border-top: 1px dashed #8d8a83; }
.r-center { text-align: center; } .r-dim { color: #6e6b66; } .r-strong { font-weight: 700; letter-spacing: .08em; }
.r-total { font-weight: 700; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .calc .tv-screen, .calc.on .tv-screen { transform: none; filter: none; animation: none; }
  .tv-scan, .rec::before, .m-led, .chip:hover, .chip:focus-visible, .bpm.beat i { animation: none; }
  .subj-fig { transition: none; }
}

/* ---- the printed receipt: B&W avatars, barcode */
.r-figs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 4px; }
.r-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; letter-spacing: .06em; }
.pfig { width: 46px; height: auto; }
.r-barcode { display: flex; justify-content: center; height: 34px; margin: 4px 0 2px; }
.r-barcode i { display: block; background: #111; }
.r-thanks { margin-top: 4px; font-weight: 700; }
.receipt.print { animation: print 1.4s steps(16) both; }