:root{
  --bg:#0b0f17;
  --panel:#0f1728;
  --card:#121a2a;
  --text:#eaf0ff;
  --muted:#9fb0d0;
  --line:rgba(255,255,255,.10);
  --good:rgba(100,255,160,.18);
  --bad:rgba(255,90,90,.18);
  --flat:rgba(160,180,255,.14);
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial}
body{margin:0;background:var(--bg);color:var(--text)}
h1,h2{margin:0}
.wrap{padding:18px 22px}

.topbar{
  padding:16px 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  font-weight:900;
}
.sub{font-size:12px;color:var(--muted);margin-top:2px}
.right{display:flex;align-items:center;gap:10px}

.pill{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.5px;
}
.pill.crash{border-color:rgba(255,90,90,.55);color:#ffb3b3}

.timer{display:grid;gap:2px; text-align:right}
.timerLabel{font-size:10px;color:var(--muted)}
.timerValue{font-size:18px;font-weight:900;letter-spacing:1px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 12px;
}
.cardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.drink{font-size:18px;letter-spacing:.2px}
.price{font-size:46px;font-weight:1000;margin-top:10px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

.badge{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;color:var(--muted);
  white-space:nowrap;
}
.badge.up{background:var(--good); color:#bfffd6}
.badge.down{background:var(--bad); color:#ffd0d0}
.badge.flat{background:var(--flat); color:#d7e2ff}
.badgeIcon{font-weight:900}

.ticker{
  margin-top:16px;
  border-top:1px solid var(--line);
  padding-top:12px;
  overflow:hidden;
}
.tickerTrack{
  display:flex;gap:28px;
  white-space:nowrap;
  animation: scroll 18s linear infinite;
  color:var(--muted);
  font-size:13px;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ADMIN */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  margin-bottom:14px;
}
.panelTitle{font-weight:900;letter-spacing:.4px;margin-bottom:10px}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

.field{display:grid;gap:6px}
label{font-size:12px;color:var(--muted)}
input,select{
  background:#0f1626;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.note{font-size:12px;color:var(--muted);margin:10px 0 0}

.table{display:grid;gap:10px}
.thead{
  display:grid;
  grid-template-columns:1.2fr .6fr .6fr .6fr .6fr .6fr .9fr;
  gap:10px;
  color:var(--muted);
  font-size:12px;
  padding:0 2px;
}
.trow{
  display:grid;
  grid-template-columns:1.2fr .6fr .6fr .6fr .6fr .6fr .9fr;
  gap:10px;
}
.actions{display:flex;gap:8px;justify-content:flex-end}
.btn{
  background:#1a2540;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.1)}
.btn.danger{background:#3a1b1b}
.btn.tiny{padding:8px 10px;border-radius:10px}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .thead,.trow{grid-template-columns:1fr 1fr}
  .actions{justify-content:flex-start}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .price{font-size:40px}
  .quick{grid-template-columns:1fr}
}

/* HOT highlight */
.card.hot{
  border-color: rgba(255, 200, 60, .55) !important;
  box-shadow: 0 0 0 1px rgba(255, 200, 60, .25), 0 0 22px rgba(255, 200, 60, .18);
}


/* Stronger HOT highlight */
.card.hot{
  border-color: rgba(255, 170, 40, .85) !important;
  box-shadow:
    0 0 0 1px rgba(255, 170, 40, .35),
    0 0 36px rgba(255, 170, 40, .22),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Big price color */
.price.priceUp{ color: #bfffd6; }
.price.priceDown{ color: #ffd0d0; }
.price.priceFlat{ color: var(--text); }

/* Slot/roll-ish animation on change */
@keyframes rollUp {
  0% { transform: translateY(10px) scale(0.98); filter: blur(1px); opacity: .65; }
  100% { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
}
@keyframes rollDown {
  0% { transform: translateY(-10px) scale(0.98); filter: blur(1px); opacity: .65; }
  100% { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
}
.price.rollUp{ animation: rollUp .35s ease-out; }
.price.rollDown{ animation: rollDown .35s ease-out; }


/* Crash settings mini panel (admin header) */
.crashBox{
  display:grid;
  gap:6px;
  padding:10px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.crashBoxTitle{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.3px}
.crashBoxRow{display:flex;align-items:center;gap:6px}
.crashBoxRow label{font-size:12px;color:var(--muted);width:28px}
.crashBoxRow input{
  width:80px;
  padding:8px 10px;
  border-radius:12px;
}

/* Pre-crash overlay (display) */
.overlay{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.72);
  z-index:9999;
}
.overlay.hidden{ display:none; }
.overlayInner{
  text-align:center;
  padding:26px 28px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 0 60px rgba(255,80,80,.20);
}
.overlayTitle{
  font-weight:1000;
  letter-spacing:2px;
  color:#ffd0d0;
  font-size:28px;
}
.overlayTime{
  font-weight:1000;
  font-size:120px;
  line-height:1;
  margin-top:8px;
  color:#ffb3b3;
}

/* Make roll animation more noticeable */
@keyframes rollUp {
  0% { transform: translateY(18px) scale(0.96); filter: blur(1.2px); opacity: .55; }
  100% { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
}
@keyframes rollDown {
  0% { transform: translateY(-18px) scale(0.96); filter: blur(1.2px); opacity: .55; }
  100% { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
}


/* Price animation v6: flip/slot style */
@keyframes flipUp {
  0%   { transform: perspective(600px) rotateX(70deg) translateY(10px); opacity: .25; }
  60%  { transform: perspective(600px) rotateX(-12deg) translateY(-2px); opacity: 1; }
  100% { transform: perspective(600px) rotateX(0deg) translateY(0); opacity: 1; }
}
@keyframes flipDown {
  0%   { transform: perspective(600px) rotateX(-70deg) translateY(-10px); opacity: .25; }
  60%  { transform: perspective(600px) rotateX(12deg) translateY(2px); opacity: 1; }
  100% { transform: perspective(600px) rotateX(0deg) translateY(0); opacity: 1; }
}
.price.flipUp{ animation: flipUp .55s cubic-bezier(.2,.9,.2,1); }
.price.flipDown{ animation: flipDown .55s cubic-bezier(.2,.9,.2,1); }

/* Extra HOT punch */
.card.hot{
  border-color: rgba(255, 140, 20, .92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 140, 20, .45),
    0 0 46px rgba(255, 140, 20, .28),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Admin preview */
.previewBox{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}

.textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--text);
  resize:vertical;
}

/* Display CRASH mode */
body.display.crashMode{
  background: radial-gradient(1200px 600px at 50% 0%, rgba(255,60,60,.30), transparent 60%), #160006;
}
body.display.crashMode .topbar{
  border-bottom-color: rgba(255,120,120,.25);
  box-shadow: 0 12px 30px rgba(255,60,60,.10);
}
body.display.crashMode .logo{
  background: rgba(255,90,90,.20);
  border-color: rgba(255,90,90,.35);
}
body.display.crashMode .ticker{
  border-top-color: rgba(255,120,120,.25);
}


/* Pre-crash banner in topbar (doesn't cover prices) */
.preBanner{
  font-weight:1000;
  letter-spacing:1px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,130,130,.28);
  background:rgba(255,70,70,.12);
  color:#ffd0d0;
  text-align:center;
  min-width:220px;
}
.preBanner.hidden{ display:none; }

/* Bigger crash countdown */
body.display.crashMode #countdown{
  font-size:34px;
  letter-spacing:1px;
}
body.display.crashMode #timerLabel{
  font-size:14px;
  opacity:.95;
}

/* Ticker manual messages bold */
.ticker strong{
  font-weight:1000;
}

/* Admin preview: fit to container (no fixed scale) */
.previewFrame{
  width:100%;
  height:520px;
  transform:none;
}

/* v7.2 pre-crash banner centered & bigger */
.preBanner{
  font-size:18px;
  min-width:280px;
  padding:12px 18px;
  margin:0 auto;
}


.topbar{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
}
.topbar .title{ justify-self:start; }
.topbar .timer{ justify-self:end; }

/* v74: Two tickers stacked */
.tickerMessages{ opacity:.95; }
.ticker strong{ font-weight:1000; }


/* v75: Topbar layout (keep LIVE + timer on the right, banners centered) */
.topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:16px;
}
.topbar .brand{ justify-self:start; }
.topbar .center{ justify-self:center; display:flex; gap:10px; align-items:center; }
.topbar .right{ justify-self:end; display:flex; gap:14px; align-items:center; }

/* Center banners */
.preBanner, .crashBanner{
  font-weight:1000;
  letter-spacing:1px;
  padding:12px 18px;
  border-radius:16px;
  text-align:center;
  min-width:300px;
}
.preBanner{
  border:1px solid rgba(255,130,130,.28);
  background:rgba(255,70,70,.12);
  color:#ffd0d0;
}
.crashBanner{
  border:1px solid rgba(255,170,80,.28);
  background:rgba(255,120,40,.12);
  color:#ffe3c7;
}
.preBanner.hidden, .crashBanner.hidden{ display:none; }

/* v75: two tickers stacked */
footer.tickers{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px 12px;
  backdrop-filter: blur(10px);
}
footer.tickers .ticker{
  border-top:1px solid rgba(255,255,255,.08);
}
footer.tickers .ticker:first-child{
  border-top:none;
}
.tickerMessages strong{ font-weight:1000; }

/* v76 topbar layout: left/center/right (keep LIVE+Next update on right) */
.topbar{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topLeft{flex:0 0 auto}
.topCenter{flex:1 1 auto; display:flex; justify-content:center; align-items:center; gap:12px}
.topRight{flex:0 0 auto}

/* Crash banner (during crash) */
.crashBanner{
  font-weight:1000;
  letter-spacing:1px;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid rgba(255,130,130,.35);
  background:rgba(255,40,40,.18);
  color:#ffe0e0;
  text-align:center;
  min-width:280px;
}
.crashBanner.hidden{display:none}

/* Ensure tickers always visible and above everything */
.tickers{ z-index: 50; }


/* v78: tickers under prices (not fixed to bottom) */
.display main{
  padding-bottom: 24px;
}
.tickers{
  position: relative;
  left:auto; right:auto; bottom:auto;
  margin-top: 18px;
}

/* v78: topbar right elements */
.topRight{
  display:flex;
  align-items:center;
  gap:12px;
}
.timerValue{
  font-size:22px;
  font-weight:900;
  letter-spacing:1px;
  text-align:right;
}
.statePill{
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.statePill.crash{
  border-color: rgba(255,70,70,.6);
  background: rgba(255,70,70,.18);
}

/* brand */
.brand{ display:flex; align-items:center; gap:12px; }
.brandText{ display:flex; flex-direction:column; line-height:1.05; }
.brandTitle{ font-weight:1000; letter-spacing:1px; }
.brandSub{ opacity:.75; font-size:12px; }

/* v79: ticker directly under prices (override earlier fixed footer styles) */
.tickers{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 10px 0 0 !important;
  backdrop-filter: none !important;
}
.ticker{
  margin-top: 8px !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 10px !important;
}

/* v80: show HOT button pressed when hot or autoHot */
.btn.tiny.active{
  border-color: rgba(255,140,0,.65) !important;
  box-shadow: 0 0 0 2px rgba(255,140,0,.15) inset, 0 8px 28px rgba(255,90,0,.18) !important;
  background: rgba(255,140,0,.12) !important;
}

/* v80: crash mode - avoid blur cuts */
body.display.crashMode .card,
body.display.crashMode .topbar,
body.display.crashMode .ticker{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.display.crashMode{
  background: #1a0a0a !important; /* solid to avoid seams */
}
body.display.crashMode::before,
body.display.crashMode::after{
  display:none !important;
}


/* ===== DISPLAY ONLY OVERRIDES (1890x241 strip) ===== */
body.display .drink{
  font-size: clamp(48px, 9vh, 110px);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.display .price{
  font-size: clamp(36px, 7vh, 80px);
  font-weight: 900;
  margin-top: 0;
  white-space: nowrap;
}

/* 💥 CRASH countdown banners (pre + during) */
body.display .topCenter{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
}

body.display .preBanner,
body.display .crashBanner{
  font-size: clamp(44px, 10vh, 140px);
  font-weight: 1000;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 14px;
  white-space: nowrap;
}

/* Make the time part even bigger */
body.display #preCrashBannerTime,
body.display #crashBannerTime{
  font-size: 1.15em;
  font-weight: 1100;
}


/* 📢 TICKER DISPLAY STRIP */
body.display .ticker{
  height: 100%;
  display: flex;
  align-items: center;
}

body.display .tickerTrack{
  font-size: clamp(32px, 6vh, 72px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}


/* ⏱ TOP RIGHT COUNTER (same size as CRASH) */
body.display .topRight,
body.display .topRight *{
  font-size: clamp(44px, 10vh, 140px);
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}


/* ➕ PRICE DELTA same size as drink name */
body.display .delta,
body.display .change,
body.display .diff,
body.display .badge,
body.display .badge.up,
body.display .badge.down{
  font-size: clamp(48px, 9vh, 110px);
  font-weight: 900;
  line-height: 1;
}


/* ===== DISPLAY: make remaining small UI text bigger ===== */

/* Header / brand */
body.display .brandTitle{
  font-size: clamp(24px, 4.5vh, 56px);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: .5px;
}
body.display .brandSub{
  font-size: clamp(18px, 3.2vh, 40px);
  font-weight: 700;
  line-height: 1.05;
  opacity: .95;
}

/* Clock / status on topbar */
body.display .clock,
body.display .time,
body.display #clock{
  font-size: clamp(22px, 4.2vh, 54px);
  font-weight: 900;
  line-height: 1;
}

/* Any helper / hint text */
body.display .hint,
body.display .sub,
body.display .small,
body.display .meta{
  font-size: clamp(18px, 3.0vh, 38px);
  font-weight: 700;
  line-height: 1.1;
}

/* Badges that aren't delta (still keep them readable) */
body.display .badge{
  padding: 8px 14px;
  border-radius: 999px;
  font-size: clamp(18px, 3.0vh, 38px);
  font-weight: 800;
  line-height: 1;
}

/* Offer tag */
.offerTag{ opacity:.95; margin-left:10px; font-weight:1000; letter-spacing:.6px; }
.offerCard .hint{ opacity:.9; }



/* ===== OFERTA: layout FIX ===== */

/* Do not let offer card grow wider than others */
.offerCard{
  max-width: 100%;
}

/* Force header layout to wrap vertically */
.offerCard .cardTop{
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Name full width */
.offerCard .drink{
  width: 100%;
}

/* OFERTA LIMITADA under name */
.offerCard .offerTag{
  display: block;
  margin: 6px 0 0 0;
  font-size: 0.65em;
  opacity: .9;
}

/* Timer stays aligned but not forcing width */
.offerCard .offerTimer{
  margin-left: auto;
  white-space: nowrap;
}



/* ===== OFERTA: height & optional price FIX ===== */

/* Keep offer card height similar to others */
.offerCard{
  align-self: stretch;
}

.offerCard .cardTop{
  margin-bottom: 4px;
}

/* Reduce spacing when price exists */
.offerCard .price{
  margin-top: 4px;
}

/* If price is hidden, remove spacing */
.offerCard.noPrice .price{
  display: none;
}



/* ===== PANTALLA CAMAREROS (NO TOCA DISPLAY) ===== */
body.waiters{
  overflow:hidden;
}

/* Make everything bigger and clearer */
body.waiters .grid{
  /* fewer columns so each card is big */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Card sizing */
body.waiters .card{
  padding: 18px 20px;
}

/* Drink name very big */
body.waiters .drink{
  font-size: clamp(34px, 4.8vh, 72px);
  font-weight: 1000;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price: always white, big, no color changes */
body.waiters .price{
  font-size: clamp(30px, 4.2vh, 64px);
  font-weight: 1000;
  line-height: 1.05;
  color: #fff !important;
}

body.waiters .priceUp,
body.waiters .priceDown{
  color: #fff !important;
}

/* Badges and deltas readable but not screaming */
body.waiters .badge{
  font-size: clamp(22px, 3.2vh, 44px);
  font-weight: 900;
  line-height: 1;
}

/* Ticker and crash HUD can stay but make them readable */
body.waiters .tickerTrack{
  font-size: clamp(26px, 3.6vh, 54px);
  font-weight: 900;
}



/* ===== OFERTA: overlay display + barra camareros (no toca estructura grid) ===== */
.hidden{ display:none !important; }

/* Display: centered overlay above grid */
body.display .offerOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  pointer-events:none;
}
body.display .offerOverlayInner{
  max-width: 92%;
  padding: 14px 18px;
  border-radius: 16px;
  text-align:center;
  backdrop-filter: blur(6px);
}
body.display .offerOverlayTag{
  font-weight: 1000;
  letter-spacing: .6px;
  font-size: clamp(28px, 6vh, 72px);
  line-height: 1.05;
}
body.display .offerOverlayName{
  margin-top: 6px;
  font-weight: 1000;
  font-size: clamp(34px, 8vh, 110px);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.display .offerOverlayMeta{
  margin-top: 8px;
  display:flex;
  gap: 18px;
  justify-content:center;
  align-items:center;
  font-weight: 900;
  font-size: clamp(22px, 5vh, 70px);
  line-height: 1.05;
}
body.display .offerOverlayPrice:empty{ display:none; }

/* Camareros: full-width bottom row */



/* ===== CAMAREROS: oferta como fila dentro del GRID ===== */
body.camareros .offerRowCard{
  grid-column: 1 / -1;
  padding: 18px 20px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

body.camareros .offerRowTop{
  display:flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

body.camareros .offerRowTag{
  font-weight: 1000;
  letter-spacing: .6px;
  font-size: clamp(24px, 3.4vh, 54px);
  white-space: nowrap;
}

body.camareros .offerRowName{
  flex: 1;
  font-weight: 1000;
  font-size: clamp(28px, 4.0vh, 72px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.camareros .offerRowRight{
  display:flex;
  align-items:center;
  gap: 16px;
  white-space: nowrap;
  font-weight: 1000;
  font-size: clamp(24px, 3.4vh, 60px);
}

body.camareros .offerRowPrice{
  font-size: clamp(30px, 4.2vh, 78px); /* más grande */
  font-weight: 1000;
}

body.camareros .offerRowPrice:empty{ display:none; }


body.camareros .ticker, body.camareros #ticker, body.camareros .tickerWrap { display:none !important; }



/* ===== CAMAREROS: oferta última fila, ancho completo, tamaño como tarjetas ===== */
body.camareros .offerRowCard{
  grid-column: 1 / -1;
  /* keep similar padding/height to other cards */
  padding: 18px 20px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

body.camareros .offerRowTop{
  display:flex;
  align-items:center;
  gap: 14px;
  justify-content: space-between;
}

body.camareros .offerRowTag{
  font-weight: 1000;
  letter-spacing: .6px;
  font-size: clamp(24px, 3.2vh, 54px);
  white-space: nowrap;
}

body.camareros .offerRowName{
  flex: 1;
  font-weight: 1000;
  font-size: clamp(30px, 3.8vh, 72px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.camareros .offerRowRight{
  display:flex;
  align-items:center;
  gap: 16px;
  white-space: nowrap;
  font-weight: 1000;
  font-size: clamp(24px, 3.2vh, 60px);
}

body.camareros .offerRowPrice{
  font-size: clamp(34px, 4.6vh, 90px);
  font-weight: 1000;
}

body.camareros .offerRowPrice:empty{ display:none; }



/* ===== CAMAREROS: oferta MUCHO más grande ===== */
body.camareros .offerRowCard{
  padding: 26px 30px;
  border-radius: 22px;
  border: 4px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.62);
}

body.camareros .offerRowTag{
  font-size: clamp(34px, 5.0vh, 82px);
}

body.camareros .offerRowName{
  font-size: clamp(42px, 6.2vh, 110px);
}

body.camareros .offerRowRight{
  font-size: clamp(34px, 5.0vh, 92px);
}

body.camareros .offerRowTime{
  font-size: clamp(34px, 5.0vh, 92px);
}

body.camareros .offerRowPrice{
  font-size: clamp(52px, 7.6vh, 140px);
}



/* ===== DISPLAY: oferta más llamativa (más contraste + borde HOT) ===== */
body.display .offerOverlayInner{
  background: rgba(0,0,0,.70);
  border: 4px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.08);
  padding: 18px 26px;
  max-width: 96%;
}

/* Make it feel "HOT" */
body.display .offerOverlayInner{
  /* subtle glow */
  filter: drop-shadow(0 0 18px rgba(255,255,255,.18));
}

body.display .offerOverlayTag{
  font-size: clamp(34px, 7vh, 92px);
}

body.display .offerOverlayName{
  font-size: clamp(44px, 9vh, 130px);
}

body.display .offerOverlayMeta{
  font-size: clamp(28px, 6vh, 92px);
}

body.display .offerOverlayPrice{
  font-size: clamp(34px, 7vh, 110px);
  font-weight: 1000;
}



/* ===== DISPLAY: oferta ocupa MÁS espacio (alto/ancho) ===== */
body.display .offerOverlay{
  padding: 10px; /* ensures inner can be larger without touching edges */
}

body.display .offerOverlayInner{
  max-width: 98%;
  width: 98%;
  padding: 26px 34px;
  border-radius: 26px;
  border-width: 5px;
}

/* Bigger typography */
body.display .offerOverlayTag{
  font-size: clamp(40px, 8vh, 110px);
  margin-bottom: 8px;
}

body.display .offerOverlayName{
  font-size: clamp(56px, 11vh, 170px);
  margin-top: 2px;
}

body.display .offerOverlayMeta{
  margin-top: 14px;
  gap: 26px;
  font-size: clamp(34px, 7vh, 110px);
}

body.display .offerOverlayPrice{
  font-size: clamp(42px, 9vh, 140px);
}



/* ===== CAMAREROS: oferta aún MÁS grande + separación + centrado ===== */
body.camareros .offerRowCard{
  padding: 32px 36px;
  border-radius: 26px;
  border-width: 5px;
}

/* Change layout to vertical for better separation */
body.camareros .offerRowTop{
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* Tag full width and separated */
body.camareros .offerRowTag{
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

/* Name centered and full width */
body.camareros .offerRowName{
  width: 100%;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Right area centered */
body.camareros .offerRowRight{
  width: 100%;
  justify-content: center;
  gap: 22px;
}

/* Even bigger text */
body.camareros .offerRowTag{
  font-size: clamp(40px, 5.8vh, 96px);
}
body.camareros .offerRowName{
  font-size: clamp(52px, 7.4vh, 140px);
}
body.camareros .offerRowTime{
  font-size: clamp(42px, 6.0vh, 110px);
}
body.camareros .offerRowRight{
  font-size: clamp(42px, 6.0vh, 110px);
}
body.camareros .offerRowPrice{
  font-size: clamp(64px, 9.2vh, 170px);
}



/* ===== DISPLAY: centrar oferta en el CENTRO de la TABLA ===== */
body.display .grid{
  position: relative;
}

body.display .offerOverlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;   /* centro vertical de la tabla */
  justify-content: center; /* centro horizontal de la tabla */
  pointer-events: none;
}





/* ===== Admin: Preview Display FULL WIDTH ===== */
.previewBox {
  width: 100%;
  height: 75vh;        /* altura grande, ajustable */
  overflow: hidden;
  border-radius: 16px;
}

.previewFrame {
  width: 100%;
  height: 100%;
  border: 0;
}


/* ===== Admin: Preview Display SCALE REDUCED ===== */
.previewFrame {
  zoom: 0.7;          /* admin preview larger; display real unchanged */
}



/* ===== Admin Preview: ocultar parte inferior (estado/ticker) ===== */
/* Esto SOLO afecta al preview (iframe dentro de admin) */
.previewFrame body .ticker,
.previewFrame body .status,
.previewFrame body .footer,
.previewFrame body .bottom,
.previewFrame body .waiting,
.previewFrame body [class*="ticker"],
.previewFrame body [class*="status"],
.previewFrame body [class*="esperando"],
.previewFrame body [class*="actualiz"]{
  display: none !important;
}




body.test .card{
  background: rgba(0,0,0,.58);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

body.test .drink,
body.test .price,
body.test .badge,
body.test .pill,
body.test .hud,
body.test .tickerTrack{
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

body.test .grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Precio más protagonista */
body.test .price{
  font-size: clamp(42px, 6.2vh, 120px);
  font-weight: 1000;
  color: #fff !important;
  letter-spacing: .2px;
}

/* Nombre más legible */
body.test .drink{
  font-size: clamp(44px, 6.6vh, 128px);
  font-weight: 1000;
  line-height: 1.06;
}

/* Ocultar textos secundarios para limpiar */
body.test .sub,
body.test .small,
body.test .muted{
  display: none !important;
}

/* Header un poco más alto y contrastado */
body.test .topbar, 
body.test .headerBar{
  background: rgba(0,0,0,.65);
  border-bottom: 2px solid rgba(255,255,255,.18);
}



/* ===== TEST: Camareros sin scroll + alta lectura (solo en test.html) ===== */
body.test{
  overflow: hidden; /* nunca scroll */
}

/* Grid fijo al alto visible (sin scroll). Ajusta si tu header es más alto */
body.test .grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  /* deja sitio abajo para la oferta (fila completa) */
  padding-bottom: 180px;
}

/* Tarjetas más legibles pero sin reventar el layout */
body.test .card{
  background: rgba(0,0,0,.58);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

body.test .drink,
body.test .price,
body.test .badge,
body.test .pill{
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Tipos grandes pero más controlados para que quepan más bebidas */
body.test .drink{
  font-size: clamp(34px, 4.6vh, 88px);
  font-weight: 1000;
  line-height: 1.06;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.test .price{
  font-size: clamp(32px, 4.2vh, 82px);
  font-weight: 1000;
  color:#fff !important;
}

/* Oculta secundarios si existen */
body.test .sub,
body.test .small,
body.test .muted{
  display:none !important;
}



/* ===== TEST: autoscale si hay muchas bebidas (mantiene espacio oferta) ===== */
body.test{
  --test-grid-scale: 1;
}

/* Escala el grid completo para que quepan más bebidas sin scroll */
body.test .grid{
  transform: scale(var(--test-grid-scale));
  transform-origin: top left;
  /* compensa el scale para seguir ocupando el ancho */
  width: calc(100% / var(--test-grid-scale));
}



/* ===== TEST: fuentes más grandes ===== */
body.test .drink{
  font-size: clamp(40px, 5.6vh, 110px);
}

body.test .price{
  font-size: clamp(38px, 5.2vh, 100px);
}

body.test .offerRowName{
  font-size: clamp(56px, 7.6vh, 140px);
}

body.test .offerRowPrice{
  font-size: clamp(60px, 8.4vh, 160px);
}



/* ===== TEST: nombre y precio como protagonistas absolutos ===== */

/* Nombre de bebida: el MÁS grande */
body.test .drink{
  font-size: clamp(52px, 7.2vh, 150px);
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
}

/* Precio: segundo más importante */
body.test .price{
  font-size: clamp(48px, 6.6vh, 135px);
  font-weight: 1000;
  text-align: center;
  margin-top: 6px;
}

/* Reduce aún más todo lo secundario */
body.test .badge,
body.test .pill,
body.test .delta,
body.test .sub,
body.test .small,
body.test .muted{
  display: none !important;
}

/* Centrar contenido de la tarjeta */
body.test .card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}


/* ===== TEST: ajuste fino (todo un poco más pequeño) ===== */
body.test .drink{
  font-size: clamp(46px, 6.5vh, 130px);
}

body.test .price{
  font-size: clamp(42px, 6.0vh, 120px);
}

body.test .offerRowName{
  font-size: clamp(50px, 7.0vh, 125px);
}

body.test .offerRowPrice{
  font-size: clamp(54px, 7.6vh, 140px);
}

/* reduce padding general de tarjetas */
body.test .card{
  padding: 16px;
}


/* ===== TEST: reducción fuerte de tamaño (más compacto) ===== */
body.test .drink{
  font-size: clamp(34px, 4.8vh, 95px);
}

body.test .price{
  font-size: clamp(30px, 4.4vh, 85px);
}

body.test .offerRowName{
  font-size: clamp(40px, 5.6vh, 110px);
}

body.test .offerRowPrice{
  font-size: clamp(42px, 6.0vh, 120px);
}

body.test .card{
  padding: 12px;
}


/* ===== Watchdog Overlay: Reconectando… (debajo del título, más visible) ===== */
.reconnecting{
  position: fixed;
  top: 190px;           /* MÁS ABAJO: debajo real del header/título */
  left: 500px;
  transform: none;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 34px;      /* MÁS GRANDE */
  font-weight: 900;
  padding: 14px 24px;
  border-radius: 14px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.reconnecting.hidden{ display:none; }

/* ===== DISPLAY LED PANEL: native 120px-high outputs used by display.html composite ===== */
body.display.ledPanel{
  width:100vw;
  height:120px;
  min-width:0;
  overflow:hidden;
  background:#0b0f17;
}
body.display.ledPanel .topbar{
  height:30px;
  padding:2px 6px;
  gap:4px;
}
body.display.ledPanel .logo{width:24px;height:24px;border-radius:6px;font-size:10px}
body.display.ledPanel .brand{gap:4px}
body.display.ledPanel .brandTitle{font-size:10px;line-height:1}
body.display.ledPanel .brandSub{display:none}
body.display.ledPanel .topRight,
body.display.ledPanel .topRight *{font-size:10px;line-height:1}
body.display.ledPanel .statePill{padding:3px 5px;border-radius:5px}
body.display.ledPanel .timer{gap:0}
body.display.ledPanel .timerLabel{font-size:7px}
body.display.ledPanel .timerValue{font-size:11px}
body.display.ledPanel .topCenter{min-width:0}
body.display.ledPanel .preBanner,
body.display.ledPanel .crashBanner{font-size:11px;padding:3px 5px;border-radius:5px}
body.display.ledPanel .wrap{height:90px;padding:3px 5px;overflow:hidden}
body.display.ledPanel .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
body.display.ledPanel .card{border-radius:6px;padding:3px 4px;height:54px;overflow:hidden}
body.display.ledPanel .cardTop{gap:2px;align-items:center}
body.display.ledPanel .drink{font-size:10px;line-height:1;min-width:0}
body.display.ledPanel .badge,
body.display.ledPanel .badge.up,
body.display.ledPanel .badge.down,
body.display.ledPanel .delta,
body.display.ledPanel .change,
body.display.ledPanel .diff{font-size:8px;line-height:1;padding:2px 3px;gap:1px}
body.display.ledPanel .price{font-size:18px;line-height:1;margin-top:3px}
body.display.ledPanel .hint{display:none}
body.display.ledPanel .tickers{height:25px;margin-top:2px!important;padding:0!important;overflow:hidden}
body.display.ledPanel .ticker{height:25px!important;margin:0!important;padding:0!important;border-top:1px solid var(--line)!important}
body.display.ledPanel .tickerTrack{font-size:9px;line-height:24px;gap:14px}
body.display.ledPanel .offerOverlayInner{transform:scale(.45)}
body.display.ledPanel .overlayInner{transform:scale(.45)}
body.display.ledPanel .reconnecting{font-size:12px}

/* ===== v23 Admin Preview: mucho más grande, centrado ===== */
.previewBox{
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
}
.previewFrame{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52.6316%;
  height: 52.6316%;
  zoom: 1 !important;
  transform: translate(-50%, -50%) scale(1.9) !important;
  transform-origin: center center !important;
  border: 0;
}


/* BARRAS · Flash Drop: keep the drink in the grid and highlight it like HOT */
body.camareros .card.flashdropBar{
  position:relative;
  border-color:rgba(255,196,45,.98) !important;
  box-shadow:
    0 0 0 2px rgba(255,196,45,.48),
    0 0 42px rgba(255,170,20,.32),
    inset 0 0 24px rgba(255,185,35,.08) !important;
  animation:barFlashDropPulse 1.25s ease-in-out infinite;
}
body.camareros .card.flashdropBar::after{
  content:"⚡ FLASH DROP";
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  color:#ffd45a;
  text-shadow:0 0 10px rgba(255,190,35,.55);
}
@keyframes barFlashDropPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.12);}
}

/* v29 - Supervisión Admin */
.connectionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.connectionCard{display:flex;align-items:center;gap:10px;background:#0c1423;border:1px solid var(--line);border-radius:14px;padding:11px 12px;min-height:58px}
.connDot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;background:#73809a;box-shadow:0 0 0 4px rgba(115,128,154,.10)}
.connDot.online{background:#52e58a;box-shadow:0 0 10px rgba(82,229,138,.65)}
.connDot.warn{background:#ffbd4a;box-shadow:0 0 10px rgba(255,189,74,.55)}
.connDot.offline{background:#ff6262;box-shadow:0 0 10px rgba(255,98,98,.55)}
.connDot.waiting{background:#73809a}
.activityHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.activityLog{display:grid;gap:6px;max-height:270px;overflow:auto;padding-right:4px}
.activityItem{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:start;padding:8px 10px;border:1px solid rgba(255,255,255,.07);background:#0c1423;border-radius:10px;font-size:12px}
.activityTime{color:var(--muted);font-variant-numeric:tabular-nums}
.activityText{color:var(--text)}
@media(max-width:800px){.connectionGrid{grid-template-columns:1fr}.activityHead{align-items:flex-start;flex-direction:column}}

/* ===== v33 Admin Preview: selector Display/Barras + zoom ajustable ===== */
.previewPanelHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.previewPanelHead h2{margin:0 0 4px}
.previewPanelHead p{margin:0}
.previewControls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-left:auto}
.previewControl{display:flex;flex-direction:column;gap:5px}
.previewSelect{min-width:145px;height:38px}
.previewZoomControl{min-width:230px}
#previewZoom{width:230px;accent-color:#fff;cursor:pointer}
#previewZoomValue{display:inline-block;min-width:44px;text-align:right}
#previewZoomReset{height:38px;white-space:nowrap}
@media(max-width:760px){.previewControls{width:100%;margin-left:0}.previewZoomControl,#previewZoom{width:100%}.previewZoomControl{min-width:180px;flex:1}.previewSelect{min-width:130px}}


/* ===== v34 Admin Preview: contenido completo, sin crop ni huecos ===== */
#previewPanel .previewBox{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto;
  overflow:hidden!important;
  background:#000;
  transition:height .18s ease;
}
#previewPanel .previewFrame{
  position:absolute!important;
  margin:0!important;
  border:0!important;
  max-width:none!important;
  max-height:none!important;
  zoom:1!important;
}


/* ===== v35 Preview: sin zoom, ajuste automatico hasta los bordes ===== */
#previewPanel .previewControls{align-items:flex-end}
#previewPanel .previewBox{padding:0!important;margin:0!important;border-radius:10px;overflow:hidden!important}
#previewPanel .previewFrame{left:0!important;top:0!important}

/* ===== v36 Preview: ajuste real al contenido, sin huecos artificiales ===== */
#previewPanel .previewBox{
  position:relative!important;
  width:100%!important;
  height:auto;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border-radius:10px;
  transition:height .16s ease;
}
#previewPanel .previewFrame{
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  max-width:none!important;
  max-height:none!important;
  zoom:1!important;
  transform-origin:top left!important;
  transform:scale(var(--preview-scale,1))!important;
}
#previewPanel .previewBox.preview-barras .previewFrame{
  position:relative!important;
  width:100%!important;
  transform:none!important;
}


/* BARRAS · Flash Drop countdown */
body.camareros .card.flashdropBar .flashdropBarStatus{
  position:absolute;
  left:12px;
  bottom:8px;
  z-index:3;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.55px;
  color:#ffd45a;
  text-shadow:0 0 10px rgba(255,190,35,.55);
  white-space:nowrap;
}
body.camareros .card.flashdropBar::after{
  content:"" !important;
  display:none !important;
}
body.camareros .card.flashdropBar .flashdropBarTimeVal{
  font-variant-numeric:tabular-nums;
  color:#fff1b0;
}


/* v43 · BARRAS Flash Drop timer: visible in the normal hint position */
body.camareros.test .card.flashdropBar .flashdropBarStatus{
  display:block !important;
  position:static !important;
  margin-top:3px !important;
  font-size:clamp(12px,1.65vh,22px) !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
  letter-spacing:.45px !important;
  color:#ffd45a !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-shadow:0 0 10px rgba(255,190,35,.6) !important;
}
body.camareros.test .card.flashdropBar .flashdropBarTimeVal{
  color:#fff3bd !important;
  font-variant-numeric:tabular-nums !important;
}

/* v44 · BARRAS: Flash Drop countdown made prominent for bartenders */
body.camareros.test .card.flashdropBar .flashdropBarStatus{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:24px !important;
  margin-top:1px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body.camareros.test .card.flashdropBar .flashdropBarLabel{
  display:inline-block !important;
  font-size:clamp(9px,1.15vh,15px) !important;
  font-weight:1000 !important;
  letter-spacing:.65px !important;
  color:#ffd45a !important;
  text-shadow:0 0 9px rgba(255,190,35,.65) !important;
}
body.camareros.test .card.flashdropBar .flashdropBarTimeVal{
  display:inline-block !important;
  min-width:66px !important;
  padding:2px 7px 3px !important;
  border:1px solid rgba(255,205,70,.95) !important;
  border-radius:7px !important;
  background:rgba(255,178,20,.13) !important;
  font-size:clamp(20px,2.8vh,34px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  letter-spacing:.8px !important;
  color:#fff6cf !important;
  text-shadow:0 0 12px rgba(255,195,45,.9) !important;
  box-shadow:0 0 12px rgba(255,170,20,.18), inset 0 0 8px rgba(255,190,35,.08) !important;
  font-variant-numeric:tabular-nums !important;
}
@keyframes flashdropUrgentTimer{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.35)}
}
body.camareros.test .card.flashdropBar.flashdropEndingSoon .flashdropBarTimeVal{
  animation:flashdropUrgentTimer .65s ease-in-out infinite !important;
}


/* v45 SERVER — Mantenimiento / estado de bolsa */
.marketOpenControl{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0 16px}
.marketOpenSwitchWrap{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.marketOpenStatus{font-weight:1000;font-size:14px;letter-spacing:.4px}.marketOpenStatus.open{color:#44e58a}.marketOpenStatus.closed{color:#ff5b62}
.switch{position:relative;display:inline-block;width:58px;height:30px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;cursor:pointer;background:#6d2630;border-radius:999px;transition:.2s;border:1px solid rgba(255,255,255,.18)}.slider:before{content:"";position:absolute;width:24px;height:24px;left:2px;top:2px;background:white;border-radius:50%;transition:.2s;box-shadow:0 2px 7px rgba(0,0,0,.4)}.switch input:checked+.slider{background:#16864c}.switch input:checked+.slider:before{transform:translateX(28px)}
.maintenanceDivider{border:0;border-top:1px solid rgba(255,255,255,.12);margin:0 0 14px}
.marketClosedOverlay{position:fixed;inset:0;z-index:10000;background:#080b10;display:flex;align-items:center;justify-content:center;text-align:center}.marketClosedOverlay.hidden{display:none!important}.marketClosedInner{display:flex;align-items:center;justify-content:center;gap:10px}.marketClosedIcon{color:#ff4f55;font-size:16px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,79,85,.75))}.marketClosedTitle{font-weight:1000;color:#fff;letter-spacing:1.6px;font-size:22px;line-height:1;text-shadow:0 0 10px rgba(255,255,255,.15)}
body.led-480 .marketClosedTitle{font-size:20px}body.led-360 .marketClosedTitle{font-size:17px;letter-spacing:1px}body.led-360 .marketClosedIcon{font-size:13px}
body.market-closed #marketUpdateFx,body.market-closed #offerIntroFx,body.market-closed #flashDropIntroFx,body.market-closed #moneyRain,body.market-closed #crashImpact{display:none!important}

/* v48: BOLSA CERRADA = pausa visual real del Display. El overlay no es solo cosmético:
   se detienen todas las animaciones CSS del contenido que queda debajo. */
body.display.market-closed *:not(.marketClosedOverlay):not(.marketClosedOverlay *){
  animation-play-state: paused !important;
}
body.display.market-closed .tickerTrack,
body.display.market-closed #grid,
body.display.market-closed .card,
body.display.market-closed #flashDropPinned,
body.display.market-closed #offerOverlay{
  animation-play-state: paused !important;
}