:root {
  --tmvb-gold: #ceab6a;
  --tmvb-gold-2: #f3d18a;
  --tmvb-purple: #6a11cb;
  --tmvb-red: #e51e25;
  --tmvb-bg: #08020f;
  --tmvb-ink: #ffffff;
  --tmvb-muted: rgba(255,255,255,.68);
  --tmvb-card: rgba(255,255,255,.07);
  --tmvb-line: rgba(206,171,106,.38);
}

body.tmvb-body,
body .tmvb-wrap {
  background: #f7f7f7;
}

.tmvb-wrap {
  font-family: Outfit, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tmvb-ink);
  min-height: 100vh;
  padding: 28px 18px 60px;
  box-sizing: border-box;
}

.tmvb-wrap * { box-sizing: border-box; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.tmvb-ticker {
  max-width: 1120px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: #0b0513;
  border: 1px solid var(--tmvb-line);
  color: var(--tmvb-gold-2);
  padding: 10px 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.tmvb-ticker-viewport{overflow:hidden;flex:1 1 auto;min-width:0}
.tmvb-ticker-track{display:flex;align-items:center;gap:28px;min-width:max-content;will-change:transform;animation:tmvbTickerRun 30s linear infinite}
.tmvb-ticker-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.tmvb-ticker-item .tmvb-ticker-accent{color:var(--tmvb-gold-2)}
.tmvb-ticker-item .tmvb-ticker-green{color:#62f5a6}
.tmvb-ticker-item .tmvb-ticker-red{color:#ff7a7a}
.tmvb-ticker-item .tmvb-ticker-pulse{animation:tmvbTickerPulse 1.4s ease-in-out infinite}
.tmvb-ticker-item .tmvb-ticker-blink{animation:tmvbTickerBlink 1s steps(2,end) infinite}
@keyframes tmvbTickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tmvbTickerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}
@keyframes tmvbTickerBlink{0%,49%{opacity:1}50%,100%{opacity:.28}}

.tmvb-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #18ff82;
  box-shadow: 0 0 20px #18ff82;
  flex: 0 0 auto;
}

.tmvb-shell {
  max-width: 1120px;
  margin: 0 auto;
  border: 3px solid var(--tmvb-gold);
  border-radius: 34px;
  background:
    radial-gradient(circle at 70% 15%, rgba(106,17,203,.42), transparent 38%),
    radial-gradient(circle at 30% 85%, rgba(229,30,37,.22), transparent 36%),
    linear-gradient(145deg, #160427 0%, #07010d 100%);
  box-shadow: 0 40px 110px rgba(0,0,0,.46);
  overflow: hidden;
  position: relative;
}

.tmvb-shell:before {
  content: "";
  position: absolute;
  inset: -60px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1px),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 55%);
  background-size: 38px 38px, 100% 100%;
  opacity: .42;
}

.tmvb-head,
.tmvb-layout,
.tmvb-bottom {
  position: relative;
  z-index: 1;
}

.tmvb-head {
  padding: 28px 30px 18px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
}

.tmvb-eyebrow,
.tmvb-modal-badge,
.tmvb-result-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--tmvb-gold-2);
}

.tmvb-head h1 {
  margin: 6px 0 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 6vw, 74px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tmvb-head p {
  margin: 0;
  max-width: 620px;
  color: var(--tmvb-muted);
  font-size: 15px;
}

.tmvb-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.tmvb-link-btn,
.tmvb-sound,
.tmvb-secondary {
  background: rgba(0,0,0,.62);
  color: #fff;
  border: 1px solid var(--tmvb-line);
  border-radius: 13px;
  padding: 11px 14px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.tmvb-link-btn:hover,
.tmvb-sound:hover,
.tmvb-secondary:hover {
  background: var(--tmvb-gold);
  color: #000;
}

.tmvb-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 22px;
  padding: 8px 30px 30px;
}

.tmvb-panel,
.tmvb-card {
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.tmvb-panel--left {
  padding: 20px;
  align-self: start;
  position: sticky;
  top: 16px;
}

.tmvb-balance {
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(206,171,106,.22), rgba(106,17,203,.18));
  border: 1px solid var(--tmvb-line);
  padding: 18px;
  margin-bottom: 16px;
}

.tmvb-balance-label,
.tmvb-kpi span,
.tmvb-rng-sub {
  color: var(--tmvb-muted);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.tmvb-balance-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 900;
  margin-top: 4px;
}

.tmvb-kpis {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.tmvb-kpi {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 13px 14px;
}

.tmvb-kpi b {
  font-size: 24px;
}

.tmvb-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.tmvb-primary {
  border: 0;
  border-radius: 999px;
  padding: 15px 22px;
  background: linear-gradient(90deg, #ff4c00, #ff00ea, #6a11cb, #ff4c00);
  background-size: 260% 100%;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 1000;
  box-shadow: 0 14px 36px rgba(255,76,0,.22);
  animation: tmvbGradient 5s linear infinite;
}

.tmvb-primary--full { width: 100%; }

@keyframes tmvbGradient { to { background-position: 260% 0; } }

.tmvb-rng {
  text-align: center;
  border: 1px dashed var(--tmvb-line);
  border-radius: 16px;
  padding: 13px;
  margin-bottom: 14px;
}

.tmvb-rng-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 30px;
  font-weight: 900;
  color: var(--tmvb-gold-2);
}

.tmvb-status,
.tmvb-error,
.tmvb-modal-error {
  font-size: 13px;
  line-height: 1.45;
  color: var(--tmvb-muted);
}

.tmvb-error,
.tmvb-modal-error {
  color: #fff;
  background: rgba(229,30,37,.28);
  border: 1px solid rgba(229,30,37,.6);
  border-radius: 14px;
  padding: 11px 13px;
  margin-top: 10px;
}

.tmvb-vault {
  min-height: 500px;
  border-radius: 28px;
  padding: 20px;
  background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.26));
  border: 1px solid rgba(255,255,255,.09);
}

.tmvb-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  gap: 14px;
}

.tmvb-box {
  aspect-ratio: 1;
  border: 1px solid rgba(206,171,106,.34);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    radial-gradient(circle at 50% 20%, rgba(206,171,106,.2), transparent 42%);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.tmvb-box:not(.is-opened):not(.is-opening):hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--tmvb-gold);
  box-shadow: 0 14px 32px rgba(206,171,106,.18);
}

.tmvb-box-lock {
  width: 74%;
  height: 74%;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #8c58ff, #391276 52%, #17052d),
    #391276;
  border: 2px solid rgba(206,171,106,.78);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.07), 0 16px 28px rgba(0,0,0,.45);
  position: relative;
  display: grid;
  place-items: center;
}

.tmvb-box-lock:before,
.tmvb-box-lock:after {
  content: "";
  position: absolute;
  background: rgba(206,171,106,.9);
}

.tmvb-box-lock:before {
  width: 100%;
  height: 12%;
  left: 0;
  top: 45%;
}

.tmvb-box-lock:after {
  width: 13%;
  height: 100%;
  left: 44%;
  top: 0;
}

.tmvb-box-num {
  position: absolute;
  right: 9px;
  top: 8px;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,.55);
}

.tmvb-box.is-opening {
  animation: tmvbShake .18s linear infinite;
  pointer-events: none;
}

.tmvb-box.is-opened {
  pointer-events: none;
  transform: scale(.96);
  background: rgba(0,0,0,.34);
}

.tmvb-box.is-opened .tmvb-box-lock { display: none; }

.tmvb-box-result {
  display: none;
  text-align: center;
  padding: 8px;
}

.tmvb-box.is-opened .tmvb-box-result { display: block; }

.tmvb-box-result b {
  display: block;
  font-size: 13px;
  line-height: 1.12;
}

.tmvb-box-result span {
  display: block;
  margin-top: 5px;
  color: var(--tmvb-gold-2);
  font-size: 12px;
  font-weight: 900;
}

.tmvb-box.is-win {
  border-color: var(--tmvb-gold);
  box-shadow: 0 0 34px rgba(206,171,106,.22);
}

@keyframes tmvbShake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-1deg); }
  75% { transform: translate(2px, -1px) rotate(1deg); }
}

.tmvb-pop {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 8px 22px #000;
  animation: tmvbPop 1s ease forwards;
}

@keyframes tmvbPop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -120px) scale(1.45); }
}

.tmvb-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 0 30px 30px;
}

.tmvb-card { padding: 20px; min-height: 170px; }
.tmvb-card h2 {
  margin: 0 0 14px;
  color: var(--tmvb-gold-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tmvb-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.tmvb-prize,
.tmvb-history-row {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.05);
  padding: 12px;
}

.tmvb-prize-title,
.tmvb-history-title { font-weight: 900; font-size: 13px; }
.tmvb-prize-meta,
.tmvb-history-meta { margin-top: 5px; color: var(--tmvb-muted); font-size: 12px; }
.tmvb-prize.is-empty { opacity: .45; }

.tmvb-history { display: grid; gap: 9px; max-height: 320px; overflow: auto; padding-right: 4px; }
.tmvb-history-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.tmvb-history-amount { color: var(--tmvb-gold-2); font-weight: 900; white-space: nowrap; }

.tmvb-modal,
.tmvb-result {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.tmvb-modal.is-open,
.tmvb-result.is-open { display: flex; }

.tmvb-modal-backdrop,
.tmvb-result:before {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(18px);
}

.tmvb-modal-backdrop { content: ""; }
.tmvb-result:before { content: ""; }

.tmvb-modal-card,
.tmvb-result-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  border: 2px solid var(--tmvb-gold);
  border-radius: 30px;
  background: #08020f;
  box-shadow: 0 35px 100px rgba(0,0,0,.62);
  padding: 28px;
}

.tmvb-modal-card h2,
.tmvb-result-title {
  margin: 6px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1;
}

.tmvb-modal-card p {
  color: var(--tmvb-muted);
  margin: 0 0 18px;
}

.tmvb-modal-card label {
  display: block;
  color: var(--tmvb-gold-2);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  font-weight: 900;
  margin: 14px 0 7px;
}

.tmvb-modal-card input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 14px 15px;
  outline: none;
}

.tmvb-modal-card input:focus { border-color: var(--tmvb-gold); }
.tmvb-modal-card .tmvb-primary { margin-top: 18px; }

.tmvb-modal-close {
  margin: 14px auto 0;
  display: block;
  background: transparent;
  border: 0;
  color: var(--tmvb-muted);
  text-decoration: underline;
}

.tmvb-result-card { text-align: center; }
.tmvb-result-amount {
  margin: 12px 0 22px;
  color: var(--tmvb-gold-2);
  font-size: 42px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
}

@media (max-width: 920px) {
  .tmvb-head,
  .tmvb-layout,
  .tmvb-bottom { padding-left: 18px; padding-right: 18px; }
  .tmvb-head { flex-direction: column; }
  .tmvb-head-actions { justify-content: flex-start; }
  .tmvb-layout { grid-template-columns: 1fr; }
  .tmvb-panel--left { position: static; order: 2; }
  .tmvb-vault { order: 1; min-height: auto; }
  .tmvb-bottom { grid-template-columns: 1fr; }
  .tmvb-grid { grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 10px; }
}

@media (max-width: 520px) {
  .tmvb-wrap { padding: 12px 8px 40px; }
  .tmvb-shell { border-radius: 24px; border-width: 2px; }
  .tmvb-head h1 { font-size: 42px; }
  .tmvb-grid { grid-template-columns: repeat(3, minmax(58px, 1fr)); }
  .tmvb-vault { padding: 12px; }
  .tmvb-balance-value { font-size: 34px; }
}

/* Production additions: wallet page, iframe auth compatibility, mobile polish */
.tmvb-grid.is-busy .tmvb-box:not(.is-opening) { opacity: .62; pointer-events: none; }
.tmvb-prize-icon { width: 42px; height: 42px; object-fit: contain; display: block; margin-bottom: 8px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }

.tmwl-wallet-page {
  min-height: 100vh;
  padding: 32px 18px 70px;
  background: #f7f7f7;
  color: #fff;
  font-family: Outfit, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.tmwl-wallet-head,
.tmwl-wallet-grid,
.tmwl-wallet-table-wrap {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.tmwl-wallet-head {
  border: 3px solid var(--tmvb-gold);
  border-radius: 30px;
  background: linear-gradient(145deg, #160427 0%, #07010d 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  padding: 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
}
.tmwl-wallet-eyebrow {
  color: var(--tmvb-gold-2);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 900;
}
.tmwl-wallet-head h1 {
  margin: 7px 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
}
.tmwl-wallet-head p { margin: 0; color: var(--tmvb-muted); }
.tmwl-wallet-openwheel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 20px;
  background: var(--tmvb-gold);
  color: #000;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.tmwl-wallet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.tmwl-wallet-kpi,
.tmwl-wallet-table-wrap {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: #10031d;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.tmwl-wallet-kpi { padding: 18px; }
.tmwl-wallet-kpi span {
  display: block;
  color: var(--tmvb-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.7px;
  font-weight: 900;
}
.tmwl-wallet-kpi strong {
  display: block;
  margin-top: 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
}
.tmwl-wallet-table-wrap {
  margin-top: 18px;
  padding: 20px;
  overflow-x: auto;
}
.tmwl-wallet-table-wrap h3 {
  margin: 0 0 14px;
  color: var(--tmvb-gold-2);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
}
.tmwl-wallet-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.tmwl-wallet-table th,
.tmwl-wallet-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  font-size: 13px;
}
.tmwl-wallet-table th {
  color: var(--tmvb-gold-2);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .tmwl-wallet-page { padding: 14px 8px 44px; }
  .tmwl-wallet-head { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 20px; }
  .tmwl-wallet-openwheel { width: 100%; }
  .tmwl-wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tmwl-wallet-kpi strong { font-size: 26px; }
}

@media (max-width: 420px) {
  .tmvb-grid { grid-template-columns: repeat(3, minmax(52px, 1fr)); gap: 8px; }
  .tmvb-box { border-radius: 14px; }
  .tmvb-box-lock { border-radius: 13px; }
  .tmvb-head-actions { width: 100%; }
  .tmvb-link-btn, .tmvb-sound { flex: 1 1 auto; text-align: center; }
  .tmwl-wallet-grid { grid-template-columns: 1fr; }
}

/* Box Vault explosive designer pass: presentation only; API/contracts unchanged. */
.tmvb-vault {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 16%, rgba(243,209,138,.12), transparent 22%),
    radial-gradient(circle at 50% 92%, rgba(229,30,37,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30));
}
.tmvb-vault:before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 24px;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(206,171,106,.05), transparent 24%, rgba(206,171,106,.045) 58%, transparent);
  background-size: 32px 32px, 100% 100%;
  opacity: .32;
}
.tmvb-vault.is-shaking { animation: tmvbVaultShake .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes tmvbVaultShake {
  0%,100% { transform: translate3d(0,0,0); }
  20% { transform: translate3d(-4px,2px,0); }
  40% { transform: translate3d(5px,-2px,0); }
  60% { transform: translate3d(-3px,-1px,0); }
  80% { transform: translate3d(3px,2px,0); }
}
.tmvb-grid { position: relative; z-index: 1; perspective: 900px; }
.tmvb-grid.is-busy .tmvb-box:not(.is-opening):not(.is-fuse-target) { opacity: .54; pointer-events: none; filter: saturate(.75); }
.tmvb-grid.is-auto-open .tmvb-box:not(.is-opened) { transition-duration: .14s; }

.tmvb-box {
  isolation: isolate;
  overflow: visible;
  border-color: rgba(206,171,106,.45);
  background:
    radial-gradient(circle at 50% 20%, rgba(243,209,138,.18), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(0,0,0,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.26);
}
.tmvb-box:before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  background: conic-gradient(from 180deg, transparent 0 18%, rgba(243,209,138,.72), transparent 46%, rgba(229,30,37,.36), transparent 78%);
  opacity: 0;
  z-index: -1;
  filter: blur(7px);
  transition: opacity .18s ease;
}
.tmvb-box:not(.is-opened):not(.is-opening):hover:before,
.tmvb-box.is-fuse-target:before { opacity: .95; }
.tmvb-box:not(.is-opened):not(.is-opening):hover .tmvb-crate { transform: translateY(-5px) rotateX(8deg) rotateZ(-1deg) scale(1.035); }
.tmvb-box.is-fuse-target { border-color: var(--tmvb-gold); box-shadow: 0 0 0 1px rgba(243,209,138,.25), 0 0 36px rgba(255,76,0,.24); }
.tmvb-box.is-igniting { animation: tmvbCrateIgnite .12s linear infinite; }
@keyframes tmvbCrateIgnite {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-2px,1px) rotate(-1.2deg); }
  75% { transform: translate(2px,-1px) rotate(1.2deg); }
}

.tmvb-crate {
  width: 72%;
  height: 72%;
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform .2s ease, opacity .22s ease, filter .22s ease;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.46));
}
.tmvb-crate-shadow,
.tmvb-crate-lid,
.tmvb-crate-body,
.tmvb-crate-band,
.tmvb-crate-seal,
.tmvb-crate-glow { position: absolute; display: block; }
.tmvb-crate-shadow {
  left: 8%; right: 8%; bottom: -9%; height: 16%;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  filter: blur(7px);
}
.tmvb-crate-body {
  inset: 17% 6% 3%;
  border-radius: 14px 14px 18px 18px;
  border: 2px solid rgba(243,209,138,.78);
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 18%, rgba(0,0,0,.22) 68%, rgba(255,255,255,.08)),
    linear-gradient(145deg, #9a5eff 0%, #5818b7 42%, #21043e 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.06), inset 0 -16px 26px rgba(0,0,0,.26), 0 10px 18px rgba(0,0,0,.28);
}
.tmvb-crate-lid {
  left: 2%; right: 2%; top: 4%; height: 29%;
  border-radius: 16px 16px 10px 10px;
  border: 2px solid rgba(243,209,138,.82);
  background:
    linear-gradient(90deg, rgba(255,255,255,.20), transparent 16%, rgba(0,0,0,.20) 72%, rgba(255,255,255,.09)),
    linear-gradient(135deg, #aa6bff 0%, #601ac4 52%, #250548 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.06), 0 7px 12px rgba(0,0,0,.34);
}
.tmvb-crate-band-x {
  left: 8%; right: 8%; top: 45%; height: 13%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe2a0, #b88437 54%, #6d4619);
  box-shadow: 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.24);
}
.tmvb-crate-band-y {
  top: 7%; bottom: 5%; left: 44%; width: 14%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe2a0, #b88437 54%, #6d4619);
  box-shadow: 1px 0 0 rgba(255,255,255,.32), inset -2px 0 0 rgba(0,0,0,.24);
}
.tmvb-crate-seal {
  width: 22%; height: 22%; left: 39%; top: 39%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff7cb, #d6aa50 52%, #65410f);
  box-shadow: 0 0 18px rgba(243,209,138,.42), inset 0 -2px 4px rgba(0,0,0,.3);
}
.tmvb-crate-glow {
  inset: -9%;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(243,209,138,.26), transparent 58%);
  opacity: .42;
  mix-blend-mode: screen;
  animation: tmvbCrateGlow 2.4s ease-in-out infinite;
}
@keyframes tmvbCrateGlow { 0%,100% { opacity: .28; transform: scale(.98); } 50% { opacity: .56; transform: scale(1.06); } }

.tmvb-fuse-cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a19;
  box-shadow: 0 0 0 2px rgba(255,122,25,.18), 0 0 18px rgba(255,122,25,.72);
  opacity: 0;
}
.tmvb-box.is-fuse-target .tmvb-fuse-cap { opacity: 1; animation: tmvbFusePulse .18s linear infinite; }
@keyframes tmvbFusePulse { 50% { transform: scale(1.45); background: #fff2a3; } }
.tmvb-fuse-trail {
  position: fixed;
  z-index: 99998;
  height: 5px;
  pointer-events: none;
  transform-origin: 0 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,246,178,0), #ff5a10 24%, #ffe68c 62%, #fff 100%);
  box-shadow: 0 0 12px rgba(255,90,16,.9), 0 0 30px rgba(255,0,234,.35);
  clip-path: inset(0 100% 0 0);
  animation: tmvbFuseTrail .34s ease-out forwards;
}
.tmvb-fuse-trail:after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, #fff 0 18%, #ffe68c 24% 42%, #ff4c00 52%, transparent 74%);
  box-shadow: 0 0 18px #ff4c00, 0 0 32px #ff00ea;
}
@keyframes tmvbFuseTrail { to { clip-path: inset(0 0 0 0); } }

.tmvb-box.is-opening .tmvb-crate { animation: tmvbBoxDetonate .22s linear infinite; }
@keyframes tmvbBoxDetonate {
  0%,100% { transform: translate(0,0) rotateZ(0); }
  25% { transform: translate(-3px,2px) rotateZ(-2deg); }
  50% { transform: translate(2px,-2px) rotateZ(2deg) scale(1.02); }
  75% { transform: translate(3px,1px) rotateZ(-1deg); }
}
.tmvb-box.is-opened .tmvb-crate {
  opacity: 0;
  transform: scale(.35) rotateZ(18deg);
  pointer-events: none;
}
.tmvb-box.is-opened .tmvb-box-result { display: grid; place-items: center; min-height: 72%; }
.tmvb-box.is-opened.is-win .tmvb-box-result b { color: #fff; text-shadow: 0 0 14px rgba(243,209,138,.7); }
.tmvb-box.is-opened:not(.is-win) .tmvb-box-result { opacity: .72; }

.tmvb-explosion,
.tmvb-result-toast { position: fixed; pointer-events: none; z-index: 100000; }
.tmvb-explosion { width: 0; height: 0; }
.tmvb-shockwave,
.tmvb-smoke,
.tmvb-spark,
.tmvb-shard,
.tmvb-coin { position: absolute; left: 0; top: 0; display: block; }
.tmvb-shockwave {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 2px solid rgba(255,231,153,.9);
  box-shadow: 0 0 28px rgba(255,76,0,.65), inset 0 0 20px rgba(255,255,255,.38);
  animation: tmvbShock .62s ease-out forwards;
}
@keyframes tmvbShock { to { transform: scale(5.8); opacity: 0; } }
.tmvb-smoke {
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.4), rgba(90,65,98,.32) 44%, transparent 72%);
  filter: blur(2px);
  animation: tmvbSmoke .9s ease-out forwards;
}
@keyframes tmvbSmoke { to { transform: translateY(-24px) scale(4.4); opacity: 0; } }
.tmvb-spark {
  width: 8px; height: 3px; margin: -1.5px 0 0 -4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, #ffe68c, #ff4c00);
  box-shadow: 0 0 12px #ff4c00;
  animation: tmvbSpark .78s cubic-bezier(.1,.72,.2,1) forwards;
}
@keyframes tmvbSpark { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.tmvb-shard {
  width: 16px; height: 12px; margin: -6px 0 0 -8px;
  border-radius: 3px;
  background: linear-gradient(135deg, #7e42df, #250548 62%, #ceab6a 63% 72%, #17052d 74%);
  box-shadow: 0 6px 10px rgba(0,0,0,.32);
  animation: tmvbShard .82s cubic-bezier(.12,.72,.22,1) forwards;
}
@keyframes tmvbShard { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.tmvb-coin {
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6bf, #d6a94b 55%, #6c4719);
  box-shadow: 0 0 12px rgba(243,209,138,.75);
  animation: tmvbCoin .95s cubic-bezier(.16,.76,.24,1) forwards;
}
@keyframes tmvbCoin { to { transform: translate(var(--x), var(--y)) rotateY(520deg); opacity: 0; } }

.tmvb-result-toast {
  min-width: 116px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  border: 1px solid rgba(243,209,138,.58);
  border-radius: 18px;
  background: rgba(8,2,15,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 46px rgba(0,0,0,.45), 0 0 34px rgba(206,171,106,.18);
  padding: 10px 14px;
  animation: tmvbToast .96s ease forwards;
}
.tmvb-result-toast span {
  display: block;
  color: var(--tmvb-gold-2);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.tmvb-result-toast b {
  display: block;
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
}
.tmvb-result-toast.is-win {
  background: linear-gradient(145deg, rgba(206,171,106,.28), rgba(8,2,15,.92));
  animation-name: tmvbToastWin;
}
@keyframes tmvbToast { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.72); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -112%) scale(.94); } }
@keyframes tmvbToastWin { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.72); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1.18); } }

@media (max-width: 520px) {
  .tmvb-crate { width: 78%; height: 78%; }
  .tmvb-result-toast { min-width: 96px; padding: 8px 10px; }
  .tmvb-result-toast b { font-size: 18px; }
  .tmvb-fuse-trail { height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .tmvb-vault.is-shaking,
  .tmvb-crate-glow,
  .tmvb-box.is-igniting,
  .tmvb-box.is-opening .tmvb-crate,
  .tmvb-fuse-trail,
  .tmvb-fuse-cap,
  .tmvb-shockwave,
  .tmvb-smoke,
  .tmvb-spark,
  .tmvb-shard,
  .tmvb-coin,
  .tmvb-result-toast {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   Supernova Vault v2 — visual-only upgrade. Backend contracts and REST flow are
   unchanged; this layer only replaces the crate artwork, fuse chain, explosion
   feedback and prize-to-counter motion.
-------------------------------------------------------------------------- */
.tmvb-shell {
  background:
    radial-gradient(circle at 72% 12%, rgba(160, 32, 255, .36), transparent 34%),
    radial-gradient(circle at 18% 90%, rgba(255, 18, 126, .22), transparent 32%),
    linear-gradient(145deg, #13001f 0%, #08000e 58%, #030006 100%);
}
.tmvb-vault {
  background:
    radial-gradient(circle at 50% 28%, rgba(136, 44, 255, .16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.36));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -24px 58px rgba(0,0,0,.38), 0 24px 80px rgba(0,0,0,.3);
}
.tmvb-grid {
  gap: 12px;
  perspective: 1100px;
}
.tmvb-box {
  border-radius: 14px;
  border: 1px solid rgba(153, 74, 255, .38);
  background:
    radial-gradient(circle at 50% 50%, rgba(153,74,255,.13), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.42)),
    #07000d;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -18px 32px rgba(0,0,0,.5),
    0 10px 24px rgba(0,0,0,.34);
}
.tmvb-box:after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, rgba(255,255,255,.035) 72%, transparent);
  opacity: .42;
  z-index: 0;
}
.tmvb-box:before {
  inset: -6px;
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255, 237, 166, .8), transparent 34%),
    conic-gradient(from 210deg, transparent 0 18%, #ff00d4 24%, #8d2fff 42%, #ffd77a 52%, #ff4c00 62%, transparent 82%);
  filter: blur(12px);
  opacity: 0;
}
.tmvb-box:not(.is-opened):not(.is-opening):hover,
.tmvb-box.is-fuse-target {
  transform: translateY(-3px) scale(1.025);
  border-color: rgba(255, 216, 124, .85);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,216,124,.22),
    0 0 28px rgba(151,50,255,.38),
    0 22px 48px rgba(0,0,0,.45);
}
.tmvb-box:not(.is-opened):not(.is-opening):hover:before,
.tmvb-box.is-fuse-target:before { opacity: .95; }
.tmvb-box.is-igniting {
  animation: tmvbSupernovaIgnite .075s steps(2, end) infinite;
}
@keyframes tmvbSupernovaIgnite {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(1.025); }
  25% { transform: translate3d(-3px,2px,0) rotate(-1.8deg) scale(1.045); }
  50% { transform: translate3d(2px,-2px,0) rotate(1.4deg) scale(1.035); }
  75% { transform: translate3d(3px,1px,0) rotate(-.8deg) scale(1.055); }
}
.tmvb-crate {
  width: 94%;
  height: 94%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.72));
  z-index: 2;
}
.tmvb-crate:before,
.tmvb-crate:after {
  content: "";
  position: absolute;
  inset: 5% 3% 2%;
  border-radius: 18px;
  pointer-events: none;
  z-index: 0;
}
.tmvb-crate:before {
  background:
    radial-gradient(circle at 14% 28%, rgba(183,84,255,.9), transparent 19%),
    radial-gradient(circle at 86% 38%, rgba(183,84,255,.86), transparent 20%),
    radial-gradient(circle at 50% 88%, rgba(123,34,255,.88), transparent 32%);
  filter: blur(8px);
  opacity: .82;
  animation: tmvbPurpleFlame 1.35s ease-in-out infinite;
}
.tmvb-crate:after {
  inset: 8% 12% 7%;
  border-radius: 10px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 28px rgba(0,0,0,.92), 0 0 24px rgba(123,34,255,.3);
}
@keyframes tmvbPurpleFlame {
  0%,100% { transform: scale(.96) rotate(-1deg); opacity: .65; }
  50% { transform: scale(1.05) rotate(1deg); opacity: 1; }
}
.tmvb-crate-shadow {
  left: 16%; right: 16%; bottom: 0; height: 16%;
  background: rgba(0,0,0,.74);
  filter: blur(8px);
  z-index: 0;
}
.tmvb-crate-body {
  inset: 27% 14% 11%;
  border-radius: 8px 8px 14px 14px;
  border: 1px solid rgba(255, 218, 133, .74);
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 18%, rgba(0,0,0,.44) 60%, rgba(255,255,255,.06)),
    linear-gradient(145deg, #9a52ff 0%, #4d0db3 42%, #090011 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.05),
    inset 0 -18px 22px rgba(0,0,0,.55),
    0 0 18px rgba(155,72,255,.65),
    0 12px 18px rgba(0,0,0,.58);
  z-index: 2;
}
.tmvb-crate-lid {
  left: 9%; right: 9%; top: 15%; height: 25%;
  border-radius: 10px 10px 7px 7px;
  border: 1px solid rgba(255, 224, 149, .86);
  background:
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 20%, rgba(0,0,0,.42) 70%, rgba(255,255,255,.08)),
    linear-gradient(145deg, #bb7aff 0%, #6619d1 46%, #120029 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    0 0 22px rgba(168,85,255,.6),
    0 9px 12px rgba(0,0,0,.55);
  z-index: 5;
}
.tmvb-crate-band-x {
  left: 11%; right: 11%; top: 47%; height: 11%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #fff4bd 0%, #f8cd66 22%, #a86a1f 62%, #4f2b09 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.65), 0 0 16px rgba(255,207,99,.44), inset 0 -2px 0 rgba(0,0,0,.35);
  z-index: 7;
}
.tmvb-crate-band-y {
  top: 15%; bottom: 11%; left: 45%; width: 11%;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #fff4bd 0%, #f8cd66 24%, #a86a1f 65%, #4f2b09 100%);
  box-shadow: 1px 0 0 rgba(255,255,255,.5), 0 0 18px rgba(255,207,99,.44), inset -2px 0 0 rgba(0,0,0,.35);
  z-index: 8;
}
.tmvb-crate-seal {
  width: 21%; height: 15%; left: 39.5%; top: 43.5%;
  border-radius: 4px;
  background:
    radial-gradient(circle at 40% 30%, #fff8cc, #f7cc69 42%, #9c5a19 74%, #3e1e04);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 18px rgba(255,205,96,.9), inset 0 -3px 4px rgba(0,0,0,.32);
  z-index: 10;
}
.tmvb-crate-glow {
  inset: -7%;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,126,.28), transparent 31%),
    radial-gradient(circle at 50% 58%, rgba(158,54,255,.44), transparent 62%);
  opacity: .95;
  animation: tmvbCrateGlow 1.8s ease-in-out infinite;
  z-index: 1;
}
.tmvb-box-num {
  z-index: 11;
  top: 9px;
  right: 9px;
  color: rgba(255,255,255,.7);
  text-shadow: 0 0 8px rgba(0,0,0,.85);
}
.tmvb-box.is-opening .tmvb-crate {
  animation: tmvbSupernovaDetonate .18s linear infinite;
}
@keyframes tmvbSupernovaDetonate {
  0%,100% { transform: translate3d(0,0,0) rotateZ(0) scale(1.04); filter: drop-shadow(0 0 18px rgba(255,216,124,.7)); }
  20% { transform: translate3d(-4px,2px,0) rotateZ(-2.5deg) scale(1.08); }
  45% { transform: translate3d(3px,-3px,0) rotateZ(2.3deg) scale(1.11); }
  70% { transform: translate3d(5px,1px,0) rotateZ(-1.5deg) scale(1.07); }
}
.tmvb-box.is-opened {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,216,124,.12), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.42)),
    #050009;
}
.tmvb-box.is-opened .tmvb-crate {
  opacity: 0;
  transform: translateY(-12px) scale(.12) rotateZ(36deg);
  filter: blur(3px);
}
.tmvb-box.is-opened .tmvb-box-result {
  z-index: 4;
  min-height: 100%;
  padding: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: rgba(255,255,255,.78);
}
.tmvb-box.is-opened.is-win .tmvb-box-result {
  background: radial-gradient(circle, rgba(255,214,112,.28), transparent 62%);
}
.tmvb-box.is-opened.is-win .tmvb-box-result b {
  color: #ffe7a3;
  font-size: 11px;
}
.tmvb-fuse-trail {
  height: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #ff2b00 18%, #ff00c8 42%, #ffe78c 72%, #fff 100%);
  box-shadow: 0 0 16px rgba(255,70,0,.95), 0 0 36px rgba(255,0,210,.72), 0 0 54px rgba(255,216,124,.42);
  animation-duration: .22s;
}
.tmvb-fuse-trail:after {
  width: 22px;
  height: 22px;
  box-shadow: 0 0 22px #ff4c00, 0 0 42px #ff00ea, 0 0 64px #ffe68c;
}
.tmvb-shockwave {
  border-width: 3px;
  border-color: rgba(255,231,153,1);
  box-shadow: 0 0 34px rgba(255,76,0,.9), 0 0 58px rgba(255,0,234,.48), inset 0 0 26px rgba(255,255,255,.5);
}
@keyframes tmvbShock { to { transform: scale(7.4); opacity: 0; } }
.tmvb-spark {
  height: 4px;
  background: linear-gradient(90deg, #fff, #ffe68c 35%, #ff2a00 70%, transparent);
  box-shadow: 0 0 16px #ff4c00, 0 0 24px rgba(255,0,234,.5);
}
.tmvb-shard {
  width: 20px;
  height: 14px;
  background: linear-gradient(135deg, #a65cff, #3a0879 55%, #ffd66f 56% 72%, #090011 74%);
}
.tmvb-pop,
.tmvb-prize-flight {
  position: fixed;
  pointer-events: none;
  z-index: 100002;
  transform: translate(-50%, -50%);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  color: #fff9cf;
  text-shadow: 0 0 10px rgba(255,216,124,.95), 0 0 28px rgba(255,0,210,.55), 0 6px 18px rgba(0,0,0,.75);
  white-space: nowrap;
}
.tmvb-prize-flight {
  font-size: clamp(24px, 3.8vw, 48px);
  letter-spacing: .5px;
}
.tmvb-pop {
  font-size: clamp(20px, 2.7vw, 34px);
  animation: tmvbPopFloat .9s ease-out forwards;
}
@keyframes tmvbPopFloat {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.72); }
  18% { opacity: 1; transform: translate(-50%, -12px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -96px) scale(1.18); }
}
.tmvb-balance.is-crediting {
  animation: tmvbCreditPulse .76s cubic-bezier(.18,.9,.2,1);
}
@keyframes tmvbCreditPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,216,124,0); }
  36% { transform: scale(1.045); box-shadow: 0 0 42px rgba(255,216,124,.44), inset 0 0 28px rgba(255,216,124,.18); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,216,124,0); }
}
.tmvb-result-toast {
  display: none !important;
}
@media (max-width: 760px) {
  .tmvb-grid { gap: 9px; }
  .tmvb-crate { width: 98%; height: 98%; }
  .tmvb-box-num { font-size: 8px; right: 6px; top: 6px; }
}


/* --------------------------------------------------------------------------
   Luxury Mystery Box v3 — project implementation, not a mockup.
   This layer replaces the cross-shaped crate with a premium jewel/bow box while
   preserving all existing DOM hooks, REST contracts, state handling and payouts.
-------------------------------------------------------------------------- */
.tmvb-box .tmvb-luxe-crate {
  width: 96%;
  height: 96%;
  transform-style: preserve-3d;
  transform: translateZ(0);
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.82));
}
.tmvb-luxe-crate,
.tmvb-luxe-crate span,
.tmvb-luxe-crate i,
.tmvb-luxe-crate b {
  box-sizing: border-box;
}
.tmvb-luxe-aura,
.tmvb-luxe-shadow,
.tmvb-luxe-box,
.tmvb-luxe-backglow,
.tmvb-luxe-body,
.tmvb-luxe-lid,
.tmvb-luxe-trim,
.tmvb-luxe-corner,
.tmvb-luxe-ribbon,
.tmvb-luxe-bow,
.tmvb-luxe-bow i,
.tmvb-luxe-bow b,
.tmvb-luxe-gem,
.tmvb-luxe-shine {
  position: absolute;
  display: block;
}
.tmvb-luxe-aura {
  inset: -4% -8% -3%;
  border-radius: 28px;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 36%, rgba(172,65,255,.88), transparent 22%),
    radial-gradient(circle at 84% 42%, rgba(192,82,255,.72), transparent 24%),
    radial-gradient(circle at 50% 86%, rgba(126,37,255,.78), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255,219,119,.22), transparent 54%);
  filter: blur(9px) saturate(1.15);
  opacity: .92;
  animation: tmvbLuxuryAura 1.55s ease-in-out infinite;
}
@keyframes tmvbLuxuryAura {
  0%,100% { transform: scale(.97) rotate(-1deg); opacity: .68; }
  50% { transform: scale(1.06) rotate(1deg); opacity: 1; }
}
.tmvb-luxe-shadow {
  left: 18%;
  right: 18%;
  bottom: 1%;
  height: 17%;
  z-index: 1;
  border-radius: 50%;
  background: rgba(0,0,0,.8);
  filter: blur(8px);
}
.tmvb-luxe-box {
  left: 13%;
  right: 13%;
  top: 12%;
  bottom: 8%;
  z-index: 3;
  transform: rotateX(7deg) rotateZ(-.7deg);
  transform-origin: 50% 65%;
}
.tmvb-luxe-backglow {
  inset: 7% 1% 0;
  z-index: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,227,152,.18), rgba(143,54,255,.28));
  box-shadow:
    0 0 24px rgba(170,72,255,.78),
    0 0 44px rgba(255,0,196,.24),
    inset 0 0 26px rgba(255,220,132,.16);
}
.tmvb-luxe-body {
  left: 1%;
  right: 1%;
  top: 32%;
  bottom: 0;
  z-index: 3;
  border-radius: 9px 9px 16px 16px;
  border: 1px solid rgba(255,230,163,.88);
  background:
    linear-gradient(118deg, rgba(255,255,255,.22) 0 10%, transparent 22% 62%, rgba(255,255,255,.08) 74%, transparent 100%),
    radial-gradient(circle at 50% 12%, rgba(174,91,255,.76), transparent 38%),
    linear-gradient(145deg, #ad67ff 0%, #6b18cf 36%, #26034f 70%, #08000d 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -18px 26px rgba(0,0,0,.56),
    inset 9px 0 13px rgba(255,255,255,.08),
    inset -10px 0 15px rgba(0,0,0,.38),
    0 12px 18px rgba(0,0,0,.58);
  overflow: hidden;
}
.tmvb-luxe-body:before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  height: 36%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  opacity: .85;
}
.tmvb-luxe-body:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,218,117,.16) 0 3px, transparent 4px calc(100% - 4px), rgba(255,218,117,.16) calc(100% - 3px)),
    linear-gradient(180deg, transparent 0 62%, rgba(0,0,0,.32) 100%);
  pointer-events: none;
}
.tmvb-luxe-lid {
  left: -4%;
  right: -4%;
  top: 16%;
  height: 29%;
  z-index: 7;
  border-radius: 14px 14px 8px 8px;
  border: 1px solid rgba(255,235,177,.96);
  background:
    linear-gradient(116deg, rgba(255,255,255,.34), transparent 18% 58%, rgba(255,255,255,.1) 72%, transparent),
    radial-gradient(circle at 50% 18%, rgba(217,160,255,.88), transparent 45%),
    linear-gradient(145deg, #c98aff 0%, #7522dc 45%, #310668 78%, #09000e 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -8px 11px rgba(0,0,0,.44),
    0 0 18px rgba(172,72,255,.72),
    0 8px 12px rgba(0,0,0,.62);
  transform-origin: 50% 100%;
}
.tmvb-luxe-lid:before,
.tmvb-luxe-lid:after {
  content: "";
  position: absolute;
  top: 18%;
  width: 18%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,201,.36), transparent 62%);
}
.tmvb-luxe-lid:before { left: 6%; }
.tmvb-luxe-lid:after { right: 6%; }
.tmvb-luxe-trim {
  z-index: 9;
  left: 5%;
  right: 5%;
  height: 8%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff7c8 0%, #ffe08c 22%, #d18a2b 58%, #6b3607 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 0 rgba(0,0,0,.35),
    0 0 14px rgba(255,211,103,.55);
}
.tmvb-luxe-trim-top { top: 38%; }
.tmvb-luxe-trim-bottom { bottom: 1%; height: 7%; opacity: .86; }
.tmvb-luxe-corner {
  z-index: 10;
  width: 17%;
  height: 17%;
  border-color: #ffe49c;
  filter: drop-shadow(0 0 8px rgba(255,213,101,.45));
}
.tmvb-luxe-corner.c1 { left: 1%; top: 32%; border-left: 3px solid; border-top: 3px solid; border-radius: 8px 0 0 0; }
.tmvb-luxe-corner.c2 { right: 1%; top: 32%; border-right: 3px solid; border-top: 3px solid; border-radius: 0 8px 0 0; }
.tmvb-luxe-corner.c3 { left: 1%; bottom: 0; border-left: 3px solid; border-bottom: 3px solid; border-radius: 0 0 0 12px; }
.tmvb-luxe-corner.c4 { right: 1%; bottom: 0; border-right: 3px solid; border-bottom: 3px solid; border-radius: 0 0 12px 0; }
.tmvb-luxe-ribbon {
  z-index: 11;
  left: 42.5%;
  top: 17%;
  bottom: 1%;
  width: 15%;
  border-radius: 999px 999px 5px 5px;
  background:
    linear-gradient(90deg, #fff8cd 0%, #ffe294 18%, #cf8529 50%, #fff0b0 76%, #7a3b08 100%);
  box-shadow:
    inset 2px 0 0 rgba(255,255,255,.45),
    inset -3px 0 0 rgba(0,0,0,.28),
    0 0 17px rgba(255,215,111,.55);
}
.tmvb-luxe-ribbon:before {
  content: "";
  position: absolute;
  left: -28%;
  right: -28%;
  top: 26%;
  height: 20%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff8cd 0%, #ffe294 18%, #cf8529 52%, #763707 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -2px 0 rgba(0,0,0,.28),
    0 0 17px rgba(255,215,111,.42);
}
.tmvb-luxe-bow {
  z-index: 13;
  left: 23%;
  right: 23%;
  top: 0;
  height: 28%;
  transform-origin: 50% 65%;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.46)) drop-shadow(0 0 10px rgba(255,211,102,.34));
}
.tmvb-luxe-bow i {
  top: 21%;
  width: 42%;
  height: 62%;
  border: 1px solid rgba(255,239,187,.76);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), transparent 25%),
    linear-gradient(135deg, #fff1ad 0%, #e9ae47 34%, #9b5c17 72%, #512404 100%);
  box-shadow: inset 0 -8px 9px rgba(0,0,0,.28), 0 0 12px rgba(255,211,103,.5);
}
.tmvb-luxe-bow i:first-child {
  left: 2%;
  border-radius: 70% 35% 58% 42%;
  transform: rotate(-18deg) skewX(-6deg);
}
.tmvb-luxe-bow i:nth-child(2) {
  right: 2%;
  border-radius: 35% 70% 42% 58%;
  transform: rotate(18deg) skewX(6deg);
}
.tmvb-luxe-bow b {
  left: 40%;
  top: 33%;
  width: 20%;
  height: 44%;
  border-radius: 45%;
  border: 1px solid rgba(255,241,192,.78);
  background: radial-gradient(circle at 42% 28%, #fff8cc, #d6912f 48%, #673006 100%);
  box-shadow: 0 0 14px rgba(255,220,113,.78), inset 0 -4px 6px rgba(0,0,0,.32);
}
.tmvb-luxe-gem {
  z-index: 14;
  left: 39%;
  top: 49%;
  width: 22%;
  height: 18%;
  clip-path: polygon(50% 0, 90% 32%, 75% 100%, 25% 100%, 10% 32%);
  background:
    radial-gradient(circle at 34% 24%, #fff, #ffd677 20%, #ff397d 47%, #7a0b85 75%, #170018 100%);
  border: 1px solid rgba(255,239,183,.78);
  box-shadow:
    0 0 18px rgba(255,44,160,.9),
    0 0 28px rgba(255,214,112,.55),
    inset 0 -5px 7px rgba(0,0,0,.45);
}
.tmvb-luxe-gem:after {
  content: "";
  position: absolute;
  left: 27%;
  top: 15%;
  width: 22%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  filter: blur(.5px);
}
.tmvb-luxe-shine {
  z-index: 16;
  inset: 4% -12% 0;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255,255,255,.52) 43%, rgba(255,255,255,.08) 49%, transparent 58% 100%);
  transform: translateX(-44%);
  opacity: .74;
  mix-blend-mode: screen;
  animation: tmvbLuxurySweep 2.45s ease-in-out infinite;
}
@keyframes tmvbLuxurySweep {
  0%, 18% { transform: translateX(-56%) skewX(-10deg); opacity: 0; }
  36% { opacity: .76; }
  62%, 100% { transform: translateX(56%) skewX(-10deg); opacity: 0; }
}
.tmvb-box:not(.is-opened):not(.is-opening):hover .tmvb-luxe-box,
.tmvb-box.is-fuse-target .tmvb-luxe-box {
  transform: rotateX(10deg) rotateZ(-1deg) translateY(-4px) scale(1.04);
}
.tmvb-box:not(.is-opened):not(.is-opening):hover .tmvb-luxe-bow,
.tmvb-box.is-fuse-target .tmvb-luxe-bow {
  animation: tmvbBowBounce .52s cubic-bezier(.18,.92,.2,1.35);
}
@keyframes tmvbBowBounce {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-8px) scale(1.14); }
  100% { transform: translateY(0) scale(1); }
}
.tmvb-box.is-opening .tmvb-luxe-box {
  animation: tmvbLuxuryDetonate .16s steps(2, end) infinite;
}
.tmvb-box.is-opening .tmvb-luxe-aura {
  animation: tmvbLuxuryOverload .22s linear infinite;
}
.tmvb-box.is-opening .tmvb-luxe-lid {
  transform: translateY(-10px) rotateX(16deg) scale(1.06);
  box-shadow: 0 0 38px rgba(255,217,125,.9), 0 0 58px rgba(255,0,214,.48);
}
.tmvb-box.is-opening .tmvb-luxe-gem {
  animation: tmvbGemPulse .12s linear infinite;
}
@keyframes tmvbLuxuryDetonate {
  0%,100% { transform: rotateX(7deg) rotateZ(-.7deg) translate3d(0,0,0) scale(1.06); }
  25% { transform: rotateX(7deg) rotateZ(-4deg) translate3d(-5px,3px,0) scale(1.11); }
  50% { transform: rotateX(7deg) rotateZ(3deg) translate3d(4px,-4px,0) scale(1.08); }
  75% { transform: rotateX(7deg) rotateZ(-2deg) translate3d(5px,2px,0) scale(1.13); }
}
@keyframes tmvbLuxuryOverload {
  0%,100% { opacity: .82; filter: blur(8px) saturate(1.1); }
  50% { opacity: 1; filter: blur(12px) saturate(1.7); }
}
@keyframes tmvbGemPulse {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.2); filter: brightness(1.8); }
}
.tmvb-box.is-opened .tmvb-luxe-crate {
  opacity: 0;
  transform: translateY(-18px) scale(.16) rotateZ(42deg);
  filter: blur(4px) drop-shadow(0 0 16px rgba(255,215,116,.6));
}
.tmvb-box.is-opened .tmvb-luxe-box,
.tmvb-box.is-opened .tmvb-luxe-lid,
.tmvb-box.is-opened .tmvb-luxe-bow {
  animation: none;
}
.tmvb-shard {
  border: 1px solid rgba(255,230,158,.45);
  border-radius: 4px;
  background:
    linear-gradient(135deg, #fff0af 0 18%, #bd6fff 19% 48%, #4b0c96 49% 68%, #16001f 69% 100%);
  box-shadow: 0 0 12px rgba(255,211,103,.45), 0 0 18px rgba(151,57,255,.32);
}
.tmvb-spark {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, #fff0a8 30%, #ff3cae 62%, transparent);
  box-shadow: 0 0 18px #ff49c4, 0 0 26px rgba(255,218,118,.72);
}
.tmvb-shockwave {
  border-color: rgba(255,236,171,1);
  background: radial-gradient(circle, rgba(255,230,143,.22), transparent 62%);
}
.tmvb-pop,
.tmvb-prize-flight {
  color: #fff6c7;
  text-shadow:
    0 0 10px rgba(255,219,117,.95),
    0 0 28px rgba(255,45,178,.75),
    0 0 46px rgba(126,38,255,.5),
    0 8px 18px rgba(0,0,0,.82);
}
.tmvb-prize-flight:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 82%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,225,128,.22), transparent 68%);
  z-index: -1;
}
@media (max-width: 760px) {
  .tmvb-box .tmvb-luxe-crate { width: 100%; height: 100%; }
  .tmvb-luxe-box { left: 10%; right: 10%; top: 13%; bottom: 8%; }
  .tmvb-luxe-bow { left: 18%; right: 18%; }
  .tmvb-luxe-gem { left: 37%; width: 26%; }
}
@media (prefers-reduced-motion: reduce) {
  .tmvb-luxe-aura,
  .tmvb-luxe-shine,
  .tmvb-box.is-opening .tmvb-luxe-box,
  .tmvb-box.is-opening .tmvb-luxe-aura,
  .tmvb-box.is-opening .tmvb-luxe-gem {
    animation: none !important;
  }
}

/* Orb Smash Auto-Open v4: replaces the straight fuse line with a jumping plasma ball. */
.tmvb-smash-orb {
  position: fixed; z-index: 100004; width: 34px; height: 34px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff 0 9%, #fff2a3 13% 23%, #ff4c00 31%, #ff00d4 54%, #4b00ff 72%, rgba(20,0,35,.08) 100%);
  box-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 24px rgba(255,76,0,.98), 0 0 42px rgba(255,0,234,.82), 0 0 70px rgba(116,58,255,.48);
  transform: translate(-50%, -50%); filter: saturate(1.35) contrast(1.08);
}
.tmvb-smash-orb:before, .tmvb-smash-orb:after {
  content: ""; position: absolute; inset: -9px; border-radius: inherit;
  background: conic-gradient(from 30deg, transparent, rgba(255,255,255,.82), rgba(255,0,234,.68), transparent 62%);
  animation: tmvbOrbSpin .42s linear infinite; mix-blend-mode: screen;
}
.tmvb-smash-orb:after {
  inset: 10px 28px 10px -34px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,0,234,0), rgba(255,0,234,.52), rgba(255,232,139,.88));
  filter: blur(3px); animation: tmvbOrbTrail .18s ease-in-out infinite alternate;
}
@keyframes tmvbOrbSpin { to { transform: rotate(360deg); } }
@keyframes tmvbOrbTrail { from { opacity: .45; transform: scaleX(.72); } to { opacity: 1; transform: scaleX(1.12); } }
.tmvb-impact-ring {
  position: fixed; z-index: 100003; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; border-radius: 50%;
  border: 3px solid rgba(255,232,139,.96);
  box-shadow: 0 0 18px rgba(255,76,0,.9), 0 0 34px rgba(255,0,234,.74), inset 0 0 18px rgba(255,255,255,.48);
  animation: tmvbOrbImpact .52s cubic-bezier(.12,.82,.18,1) forwards;
}
@keyframes tmvbOrbImpact { to { transform: scale(4.8); opacity: 0; filter: blur(1px); } }
.tmvb-box.is-smash-target {
  border-color: rgba(255,232,139,.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(255,232,139,.32), 0 0 34px rgba(255,0,234,.38), 0 0 54px rgba(255,76,0,.24);
}
.tmvb-box.is-smash-target .tmvb-luxe-box { animation: tmvbSmashTargetCharge .22s linear infinite; }
@keyframes tmvbSmashTargetCharge {
  0%,100% { transform: translateY(-6px) rotateZ(-1deg) scale(1.075); filter: brightness(1.15) saturate(1.15); }
  50% { transform: translateY(-8px) rotateZ(1deg) scale(1.105); filter: brightness(1.42) saturate(1.35); }
}
.tmvb-fuse-trail, .tmvb-fuse-cap { display: none !important; }
.tmvb-box.is-opening .tmvb-luxe-box { animation: tmvbOrbCrack .1s linear infinite; }
@keyframes tmvbOrbCrack {
  0%,100% { transform: translate(0,0) rotateZ(0) scale(1.08); }
  25% { transform: translate(-5px,3px) rotateZ(-4deg) scale(1.12); }
  50% { transform: translate(4px,-4px) rotateZ(5deg) scale(1.15); }
  75% { transform: translate(5px,2px) rotateZ(-3deg) scale(1.12); }
}
.tmvb-grid.is-auto-open .tmvb-box:not(.is-opened) { filter: saturate(1.12) contrast(1.04); }
@media (max-width: 640px) { .tmvb-smash-orb { width: 26px; height: 26px; } .tmvb-smash-orb:after { inset: 8px 22px 8px -26px; } }
@media (prefers-reduced-motion: reduce) {
  .tmvb-smash-orb, .tmvb-smash-orb:before, .tmvb-smash-orb:after, .tmvb-impact-ring, .tmvb-box.is-smash-target .tmvb-luxe-box, .tmvb-box.is-opening .tmvb-luxe-box {
    animation: none !important; transition: none !important;
  }
}

/* Roulette Ball Random Smash v5: auto-open now jumps to random closed boxes with a solid roulette ball. */
.tmvb-smash-orb.tmvb-roulette-orb {
  width: 31px;
  height: 31px;
  border: 2px solid #fff3d0;
  background:
    radial-gradient(circle at 30% 24%, #ffffff 0 12%, #fff6d7 13% 26%, #e7d5aa 44%, #9c8660 72%, #4b3b27 100%);
  box-shadow:
    0 8px 15px rgba(0,0,0,.48),
    inset -6px -7px 10px rgba(71,48,20,.42),
    inset 4px 3px 8px rgba(255,255,255,.95),
    0 0 0 4px rgba(255,226,151,.12),
    0 0 22px rgba(255,214,122,.48);
  filter: none;
  overflow: visible;
}
.tmvb-smash-orb.tmvb-roulette-orb:before {
  inset: 5px;
  border-radius: 50%;
  background:
    conic-gradient(from 16deg,
      #a70012 0 10%, #f7e7bf 10% 13%, #17120f 13% 23%, #f7e7bf 23% 26%,
      #a70012 26% 36%, #f7e7bf 36% 39%, #17120f 39% 49%, #f7e7bf 49% 52%,
      #a70012 52% 62%, #f7e7bf 62% 65%, #17120f 65% 75%, #f7e7bf 75% 78%,
      #a70012 78% 88%, #f7e7bf 88% 91%, #17120f 91% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,245,207,.78),
    inset 0 -3px 5px rgba(0,0,0,.42);
  opacity: .82;
  mix-blend-mode: normal;
  animation: tmvbRouletteBallSpin .32s linear infinite;
}
.tmvb-smash-orb.tmvb-roulette-orb:after {
  left: -28px;
  top: 55%;
  right: auto;
  bottom: auto;
  width: 34px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,239,187,0), rgba(255,239,187,.58), rgba(72,48,20,.24));
  filter: blur(3px);
  opacity: .78;
  animation: tmvbRouletteBallShadow .16s ease-in-out infinite alternate;
  mix-blend-mode: normal;
}
.tmvb-smash-orb.tmvb-roulette-orb b {
  display: none;
}
@keyframes tmvbRouletteBallSpin {
  to { transform: rotate(360deg); }
}
@keyframes tmvbRouletteBallShadow {
  from { transform: translateY(-50%) scaleX(.72); opacity: .35; }
  to { transform: translateY(-50%) scaleX(1.18); opacity: .86; }
}
.tmvb-grid.is-auto-open .tmvb-box.is-smash-target {
  animation: tmvbRandomTargetPop .22s ease-in-out infinite;
}
@keyframes tmvbRandomTargetPop {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.025); }
}
@media (max-width: 640px) {
  .tmvb-smash-orb.tmvb-roulette-orb { width: 25px; height: 25px; }
  .tmvb-smash-orb.tmvb-roulette-orb:before { inset: 4px; }
  .tmvb-smash-orb.tmvb-roulette-orb:after { width: 28px; height: 8px; left: -23px; }
}
@media (prefers-reduced-motion: reduce) {
  .tmvb-smash-orb.tmvb-roulette-orb:before,
  .tmvb-smash-orb.tmvb-roulette-orb:after,
  .tmvb-grid.is-auto-open .tmvb-box.is-smash-target {
    animation: none !important;
  }
}


/* === V6 prize showcase + max mobile gaming polish === */
.tmvb-showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.4vw, 14px) !important;
}

.tmvb-prize.tmvb-prize--showcase {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 164px !important;
  padding: 8px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 216, 130, .16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 205, 87, .12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.26) !important;
  text-align: center !important;
  isolation: isolate !important;
}

.tmvb-prize.tmvb-prize--showcase::before {
  content: "";
  position: absolute;
  inset: -40% -70%;
  z-index: -1;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.16), transparent 58%);
  transform: translateX(-45%) rotate(10deg);
  animation: tmvbPrizeSweep 4.6s ease-in-out infinite;
  opacity: .55;
}

@keyframes tmvbPrizeSweep {
  0%, 72% { transform: translateX(-48%) rotate(10deg); opacity: 0; }
  80% { opacity: .7; }
  100% { transform: translateX(48%) rotate(10deg); opacity: 0; }
}

.tmvb-prize-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 72px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 50%, rgba(126, 34, 206, .34), rgba(0,0,0,.72)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 9px 22px rgba(0,0,0,.35) !important;
}

.tmvb-prize-icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover !important;
  transform: scale(1.02) !important;
  filter: saturate(1.18) contrast(1.08) drop-shadow(0 10px 18px rgba(0,0,0,.45)) !important;
}

.tmvb-prize-icon--empty {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,215,122,.5), transparent 24%),
    radial-gradient(circle at 48% 54%, rgba(129,42,255,.45), transparent 44%),
    rgba(0,0,0,.4) !important;
}

.tmvb-prize-media-glow {
  position: absolute;
  inset: auto 10% -18px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 200, 78, .34);
  filter: blur(16px);
  pointer-events: none;
}

.tmvb-prize-caption {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  padding: 0 2px 2px !important;
}

.tmvb-prize-title {
  margin: 0 !important;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(17px, 2.2vw, 24px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.28), 0 0 14px rgba(255, 226, 164, .34) !important;
}

.tmvb-prize-pill,
.tmvb-prize-meta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  min-width: 86px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #08050d !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.34), inset 0 -1px 0 rgba(0,0,0,.08) !important;
}

.tmvb-prize.is-won .tmvb-prize-pill {
  color: #1b0b00 !important;
  background: linear-gradient(180deg, #ffe9a5, #ffc545) !important;
  box-shadow: 0 0 24px rgba(255, 196, 69, .35), 0 10px 22px rgba(0,0,0,.32) !important;
}

.tmvb-prize.is-empty { opacity: .62 !important; }

@media (min-width: 1180px) {
  .tmvb-prize.tmvb-prize--showcase { min-height: 176px !important; }
  .tmvb-prize-media { min-height: 82px !important; }
}

@media (max-width: 1100px) {
  .tmvb-bottom { grid-template-columns: 1fr !important; }
  .tmvb-showcase { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 920px) {
  .tmvb-wrap { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(54px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important; }
  .tmvb-shell { width: 100% !important; border-radius: 22px !important; }
  .tmvb-head { gap: 14px !important; padding: 22px 16px 10px !important; }
  .tmvb-head h1 { font-size: clamp(40px, 12vw, 68px) !important; line-height: .86 !important; }
  .tmvb-head-actions { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .tmvb-head-actions > * { min-height: 44px !important; width: 100% !important; }
  .tmvb-layout { grid-template-columns: 1fr !important; gap: 14px !important; padding: 10px 14px 18px !important; }
  .tmvb-panel--left { order: 1 !important; position: relative !important; top: auto !important; padding: 14px !important; }
  .tmvb-vault { order: 2 !important; padding: 12px !important; border-radius: 20px !important; }
  .tmvb-kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .tmvb-kpi { min-height: 58px !important; padding: 10px !important; }
  .tmvb-kpi span { font-size: 9px !important; letter-spacing: .08em !important; }
  .tmvb-actions { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px !important; }
  .tmvb-primary, .tmvb-secondary, .tmvb-link-btn, .tmvb-sound { min-height: 46px !important; touch-action: manipulation !important; }
  .tmvb-bottom { padding: 0 14px 18px !important; gap: 14px !important; }
}

@media (max-width: 760px) {
  .tmvb-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; }
  .tmvb-prize.tmvb-prize--showcase { min-height: 136px !important; padding: 6px !important; border-radius: 12px !important; }
  .tmvb-prize-media { min-height: 56px !important; border-radius: 8px !important; }
  .tmvb-prize-title { font-size: clamp(15px, 5vw, 20px) !important; }
  .tmvb-prize-pill, .tmvb-prize-meta { min-height: 30px !important; min-width: 76px !important; padding: 7px 9px !important; font-size: 12px !important; border-radius: 8px !important; }
}

@media (max-width: 560px) {
  .tmvb-wrap { padding-inline: 7px !important; }
  .tmvb-ticker { margin-inline: 2px !important; height: 30px !important; font-size: 10px !important; }
  .tmvb-head { padding: 18px 12px 8px !important; }
  .tmvb-head h1 { font-size: clamp(36px, 16vw, 54px) !important; }
  .tmvb-head p { font-size: 13px !important; }
  .tmvb-layout { padding-inline: 10px !important; }
  .tmvb-balance { padding: 14px !important; }
  .tmvb-balance-value { font-size: clamp(32px, 12vw, 46px) !important; }
  .tmvb-kpis { grid-template-columns: 1fr 1fr !important; }
  .tmvb-kpis .tmvb-kpi:first-child { grid-column: span 2 !important; }
  .tmvb-grid { grid-template-columns: repeat(3, minmax(70px, 1fr)) !important; gap: 8px !important; }
  .tmvb-box { min-height: 86px !important; border-radius: 13px !important; }
  .tmvb-box-num { font-size: 9px !important; opacity: .7 !important; }
  .tmvb-card { padding: 14px !important; border-radius: 18px !important; }
  .tmvb-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tmvb-prize.tmvb-prize--showcase { min-height: 146px !important; }
  .tmvb-prize-media { min-height: 66px !important; }
}

@media (max-width: 380px) {
  .tmvb-grid { grid-template-columns: repeat(3, minmax(58px, 1fr)) !important; }
  .tmvb-showcase { gap: 7px !important; }
  .tmvb-prize.tmvb-prize--showcase { min-height: 132px !important; }
  .tmvb-prize-media { min-height: 58px !important; }
  .tmvb-prize-pill, .tmvb-prize-meta { min-width: 68px !important; font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tmvb-prize.tmvb-prize--showcase::before { animation: none !important; }
}


/* =========================================================
   Mobile Ultra Performance Layer v9
   Uses modern browser primitives: containment, content-visibility,
   adaptive quality classes from JS, GPU-only transforms, fewer paints.
   ========================================================= */

.tmvb-wrap,
.tmvb-shell,
.tmvb-layout,
.tmvb-vault,
.tmvb-grid,
.tmvb-card,
.tmvb-showcase,
.tmvb-history {
  contain: layout paint style;
}

.tmvb-card {
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}

.tmvb-bottom {
  content-visibility: auto;
  contain-intrinsic-size: 820px;
}

.tmvb-box,
.tmvb-crate,
.tmvb-luxe-crate,
.tmvb-prize,
.tmvb-prize-media {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.tmvb-box.is-opening,
.tmvb-box.is-fuse-target,
.tmvb-box.is-smash-target,
.tmvb-box.is-igniting,
.tmvb-box.is-opened,
.tmvb-smash-orb,
.tmvb-roulette-orb,
.tmvb-explosion,
.tmvb-prize-flight {
  will-change: transform, opacity;
}

/* Remove expensive hover work on touch devices. */
@media (hover: none), (pointer: coarse) {
  .tmvb-box:not(.is-opened):not(.is-opening):hover .tmvb-crate,
  .tmvb-box:not(.is-opened):not(.is-opening):hover .tmvb-luxe-crate {
    transform: translateZ(0) !important;
  }
}

/* JS adds .tmvb-lite-motion on mobile/low-memory/low-core devices. */
.tmvb-lite-motion .tmvb-shell,
.tmvb-lite-motion .tmvb-vault,
.tmvb-lite-motion .tmvb-panel,
.tmvb-lite-motion .tmvb-card,
.tmvb-lite-motion .tmvb-prize,
.tmvb-lite-motion .tmvb-box {
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

.tmvb-lite-motion .tmvb-luxe-aura,
.tmvb-lite-motion .tmvb-luxe-backglow,
.tmvb-lite-motion .tmvb-prize-media-glow,
.tmvb-lite-motion .tmvb-smoke,
.tmvb-lite-motion .tmvb-fuse-trail,
.tmvb-lite-motion .tmvb-prize.tmvb-prize--showcase::before {
  animation: none !important;
  filter: none !important;
  opacity: .38 !important;
}

.tmvb-lite-motion .tmvb-luxe-crate,
.tmvb-lite-motion .tmvb-crate,
.tmvb-lite-motion .tmvb-prize-icon {
  filter: none !important;
}

.tmvb-lite-motion .tmvb-luxe-shine,
.tmvb-lite-motion .tmvb-luxe-gem,
.tmvb-lite-motion .tmvb-luxe-bow {
  animation: none !important;
}

.tmvb-lite-motion .tmvb-modal,
.tmvb-lite-motion .tmvb-result-toast {
  backdrop-filter: none !important;
}

.tmvb-lite-motion .tmvb-shockwave {
  box-shadow: 0 0 18px rgba(255,196,69,.42) !important;
}

.tmvb-lite-motion .tmvb-spark:nth-of-type(n+12),
.tmvb-lite-motion .tmvb-shard:nth-of-type(n+6),
.tmvb-lite-motion .tmvb-coin:nth-of-type(n+6) {
  display: none !important;
}

@media (max-width: 760px) {
  body.tmvb-body {
    overflow-x: hidden !important;
  }

  .tmvb-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  .tmvb-shell {
    border-width: 1px !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
  }

  .tmvb-head h1 {
    letter-spacing: -.06em !important;
    text-wrap: balance;
  }

  .tmvb-layout {
    gap: 10px !important;
    padding: 8px 10px 14px !important;
  }

  .tmvb-panel--left {
    display: grid !important;
    gap: 10px !important;
    contain: layout paint style !important;
  }

  .tmvb-vault {
    padding: 10px !important;
    min-height: auto !important;
  }

  .tmvb-grid {
    grid-template-columns: repeat(3, minmax(82px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .tmvb-box {
    min-height: 92px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 6px !important;
    touch-action: manipulation !important;
  }

  .tmvb-luxe-crate,
  .tmvb-crate {
    width: 68px !important;
    height: 68px !important;
    margin: auto !important;
  }

  .tmvb-box-result {
    display: none !important;
  }

  .tmvb-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .tmvb-prize.tmvb-prize--showcase {
    min-height: 142px !important;
    padding: 8px !important;
  }

  .tmvb-prize-media {
    min-height: 68px !important;
    border-radius: 10px !important;
  }

  .tmvb-prize-icon {
    width: 100% !important;
    height: 66px !important;
    object-fit: cover !important;
    border-radius: 9px !important;
  }

  .tmvb-history {
    max-height: 360px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 430px) {
  .tmvb-wrap {
    padding-inline: 5px !important;
  }

  .tmvb-head h1 {
    font-size: clamp(32px, 14.8vw, 48px) !important;
  }

  .tmvb-grid {
    grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
    gap: 7px !important;
  }

  .tmvb-box {
    min-height: 82px !important;
    border-radius: 12px !important;
  }

  .tmvb-luxe-crate,
  .tmvb-crate {
    width: 58px !important;
    height: 58px !important;
  }

  .tmvb-kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  .tmvb-kpis .tmvb-kpi:first-child {
    grid-column: span 2 !important;
  }

  .tmvb-showcase {
    gap: 8px !important;
  }

  .tmvb-prize.tmvb-prize--showcase {
    min-height: 130px !important;
    border-radius: 14px !important;
  }

  .tmvb-prize-title {
    font-size: clamp(13px, 4.4vw, 17px) !important;
  }

  .tmvb-prize-pill {
    min-height: 30px !important;
    min-width: 78px !important;
    font-size: 11px !important;
  }

  .tmvb-result-toast {
    max-width: 84vw !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 360px) {
  .tmvb-grid {
    grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
  }

  .tmvb-box {
    min-height: 74px !important;
  }

  .tmvb-luxe-crate,
  .tmvb-crate {
    width: 52px !important;
    height: 52px !important;
  }

  .tmvb-showcase {
    grid-template-columns: 1fr 1fr !important;
  }

  .tmvb-prize.tmvb-prize--showcase {
    min-height: 122px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmvb-smash-orb,
  .tmvb-roulette-orb,
  .tmvb-explosion,
  .tmvb-spark,
  .tmvb-shard,
  .tmvb-coin,
  .tmvb-luxe-aura,
  .tmvb-luxe-shine,
  .tmvb-prize-flight,
  .tmvb-result-toast {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* === V10 Mobile Luxury Box Restoration: premium crate visuals without animated shimmer ===
   Keeps the richer luxury-box appearance on phones while removing the expensive,
   constantly-running glow/sweep animations that caused mobile jank. This layer is
   CSS-only and does not change REST contracts, auth, wallet, accounting or payouts.
*/
@media (max-width: 760px), (pointer: coarse) {
  .tmvb-grid {
    grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
    gap: clamp(8px, 2.4vw, 12px) !important;
  }

  .tmvb-box {
    min-height: clamp(96px, 28vw, 126px) !important;
    padding: clamp(6px, 2vw, 10px) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(255, 220, 137, .085), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.022)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.045),
      0 10px 24px rgba(0,0,0,.28) !important;
    contain: layout paint style !important;
  }

  .tmvb-box .tmvb-luxe-crate,
  .tmvb-lite-motion .tmvb-box .tmvb-luxe-crate {
    width: clamp(76px, 22vw, 100px) !important;
    height: clamp(76px, 22vw, 100px) !important;
    margin: auto !important;
    transform: translateZ(0) !important;
    filter: none !important;
    will-change: transform, opacity !important;
  }

  .tmvb-luxe-aura,
  .tmvb-lite-motion .tmvb-luxe-aura {
    animation: none !important;
    inset: 0 -3% -2% !important;
    opacity: .56 !important;
    filter: blur(4px) saturate(1.03) !important;
    background:
      radial-gradient(circle at 50% 58%, rgba(143,61,255,.46), transparent 46%),
      radial-gradient(circle at 50% 72%, rgba(255,207,101,.16), transparent 48%) !important;
  }

  .tmvb-luxe-shine,
  .tmvb-prize.tmvb-prize--showcase::before,
  .tmvb-lite-motion .tmvb-luxe-shine {
    display: none !important;
    animation: none !important;
  }

  .tmvb-luxe-box {
    left: 9% !important;
    right: 9% !important;
    top: 13% !important;
    bottom: 7% !important;
    transform: rotateX(7deg) rotateZ(-.7deg) translateZ(0) !important;
  }

  .tmvb-luxe-backglow {
    box-shadow:
      0 0 14px rgba(157,72,255,.34),
      inset 0 0 18px rgba(255,220,132,.10) !important;
  }

  .tmvb-luxe-body {
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.18),
      inset 0 -14px 20px rgba(0,0,0,.50),
      inset 7px 0 10px rgba(255,255,255,.065),
      inset -8px 0 12px rgba(0,0,0,.32),
      0 8px 14px rgba(0,0,0,.44) !important;
  }

  .tmvb-luxe-lid {
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.24),
      inset 0 -7px 10px rgba(0,0,0,.38),
      0 6px 11px rgba(0,0,0,.46) !important;
  }

  .tmvb-luxe-trim,
  .tmvb-luxe-ribbon,
  .tmvb-luxe-bow i,
  .tmvb-luxe-bow b,
  .tmvb-luxe-gem {
    filter: none !important;
  }

  .tmvb-luxe-bow,
  .tmvb-lite-motion .tmvb-luxe-bow {
    left: 18% !important;
    right: 18% !important;
    animation: none !important;
    filter: none !important;
  }

  .tmvb-luxe-gem,
  .tmvb-lite-motion .tmvb-luxe-gem {
    left: 37% !important;
    width: 26% !important;
    animation: none !important;
    box-shadow:
      0 0 10px rgba(255,44,160,.42),
      0 0 15px rgba(255,214,112,.24),
      inset 0 -5px 7px rgba(0,0,0,.42) !important;
  }

  .tmvb-box:not(.is-opened):not(.is-opening):hover .tmvb-luxe-box,
  .tmvb-box.is-fuse-target .tmvb-luxe-box,
  .tmvb-box.is-smash-target .tmvb-luxe-box,
  .tmvb-lite-motion .tmvb-box.is-smash-target .tmvb-luxe-box {
    animation: none !important;
    filter: none !important;
    transform: rotateX(8deg) rotateZ(-.7deg) translateY(-3px) scale(1.03) translateZ(0) !important;
  }

  .tmvb-grid.is-auto-open .tmvb-box.is-smash-target {
    animation: none !important;
  }

  .tmvb-box.is-smash-target {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 0 0 1px rgba(255,232,139,.22),
      0 0 18px rgba(255,190,90,.18) !important;
  }

  .tmvb-box.is-opening .tmvb-luxe-box,
  .tmvb-lite-motion .tmvb-box.is-opening .tmvb-luxe-box {
    animation: tmvbMobileImpactJolt .13s steps(2, end) 2 !important;
  }

  .tmvb-box.is-opening .tmvb-luxe-aura,
  .tmvb-box.is-opening .tmvb-luxe-gem,
  .tmvb-lite-motion .tmvb-box.is-opening .tmvb-luxe-aura,
  .tmvb-lite-motion .tmvb-box.is-opening .tmvb-luxe-gem {
    animation: none !important;
  }

  .tmvb-smash-orb.tmvb-roulette-orb {
    width: clamp(24px, 7vw, 30px) !important;
    height: clamp(24px, 7vw, 30px) !important;
    box-shadow:
      0 6px 12px rgba(0,0,0,.42),
      inset -5px -6px 9px rgba(71,48,20,.36),
      inset 3px 3px 7px rgba(255,255,255,.86),
      0 0 12px rgba(255,214,122,.26) !important;
  }

  .tmvb-smash-orb.tmvb-roulette-orb:before {
    animation-duration: .48s !important;
  }

  .tmvb-smash-orb.tmvb-roulette-orb:after {
    opacity: .42 !important;
    filter: blur(2px) !important;
    animation: none !important;
  }

  .tmvb-grid.is-auto-open .tmvb-box:not(.is-opened),
  .tmvb-lite-motion .tmvb-grid.is-auto-open .tmvb-box:not(.is-opened) {
    filter: none !important;
  }
}

@keyframes tmvbMobileImpactJolt {
  0%,100% { transform: rotateX(7deg) rotateZ(-.7deg) translate3d(0,0,0) scale(1.04); }
  50% { transform: rotateX(7deg) rotateZ(2deg) translate3d(3px,-3px,0) scale(1.08); }
}

@media (max-width: 430px) {
  .tmvb-box .tmvb-luxe-crate,
  .tmvb-lite-motion .tmvb-box .tmvb-luxe-crate {
    width: clamp(70px, 23vw, 88px) !important;
    height: clamp(70px, 23vw, 88px) !important;
  }

  .tmvb-box {
    min-height: clamp(88px, 29vw, 112px) !important;
  }
}

@media (max-width: 360px) {
  .tmvb-grid {
    grid-template-columns: repeat(3, minmax(66px, 1fr)) !important;
    gap: 6px !important;
  }

  .tmvb-box .tmvb-luxe-crate,
  .tmvb-lite-motion .tmvb-box .tmvb-luxe-crate {
    width: 64px !important;
    height: 64px !important;
  }

  .tmvb-box {
    min-height: 78px !important;
    padding: 5px !important;
  }
}


/* =========================================================
   V11 Mobile Casino UX + Persistent Revealed Prize Cards
   - Mobile HUD first: Total Won | Boxes Left | Auto Open.
   - Game zone uses 3 columns with 12-18 visible boxes from JS.
   - Opened boxes keep a compact, attractive prize/no-win card in place.
   - Mobile keeps premium static detail but removes continuous light sweeps.
   ========================================================= */

.tmvb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tmvb-card-head h2 { margin: 0 !important; }

.tmvb-history-toggle {
  display: none;
  border: 1px solid rgba(243,209,138,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tmvb-opened-prize {
  width: 100%;
  height: 100%;
  min-height: 74px;
  display: grid;
  grid-template-rows: minmax(34px, 1fr) auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 3px;
  padding: 7px 6px 6px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 228, 154, .25), transparent 36%),
    linear-gradient(160deg, rgba(255, 207, 96, .20), rgba(66, 15, 95, .84) 58%, rgba(8, 4, 12, .96));
  border: 1px solid rgba(255, 215, 127, .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -18px 24px rgba(0,0,0,.36),
    0 8px 18px rgba(0,0,0,.36);
  transform: translateZ(0);
}

.tmvb-opened-prize::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(255,255,255,.18) 36%, transparent 52%),
    radial-gradient(circle at 50% 0, rgba(255, 225, 151, .22), transparent 42%);
  opacity: .42;
}

.tmvb-opened-prize-media {
  width: 92%;
  height: 100%;
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  z-index: 1;
}

.tmvb-opened-prize-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
}

.tmvb-opened-prize-media--fallback {
  color: #ffd66d;
  font-size: 22px;
}

.tmvb-opened-prize-kicker,
.tmvb-opened-prize small {
  z-index: 1;
  font-size: 8px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.tmvb-opened-prize b {
  z-index: 1;
  max-width: 100%;
  color: #fff;
  font-size: clamp(9px, 1.2vw, 12px);
  line-height: 1.05;
  font-weight: 1000;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 2px 0 rgba(0,0,0,.38);
}

.tmvb-opened-prize--win small {
  color: #ffe18a;
  text-shadow: 0 0 10px rgba(255,205,93,.32);
}

.tmvb-opened-prize--empty {
  grid-template-rows: 1fr auto auto;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 38%),
    linear-gradient(160deg, rgba(26, 25, 30, .94), rgba(5, 4, 9, .98));
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.32);
}

.tmvb-opened-prize--empty b {
  color: rgba(255,255,255,.84);
}

.tmvb-box.is-opened .tmvb-box-result {
  padding: 6px !important;
}

.tmvb-box.is-opened .tmvb-opened-prize {
  animation: tmvbPrizeCardArrive .22s cubic-bezier(.2,.9,.22,1) both;
}

@keyframes tmvbPrizeCardArrive {
  from { opacity: 0; transform: scale(.78) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 760px) {
  .tmvb-wrap {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    background: #07010d !important;
  }

  .tmvb-ticker {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    margin-bottom: 7px !important;
    height: 28px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
  }

  .tmvb-shell {
    border-width: 1px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
  }

  .tmvb-shell::before {
    opacity: .18 !important;
    background-size: 52px 52px, 100% 100% !important;
  }

  .tmvb-head {
    padding: 14px 12px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tmvb-eyebrow {
    font-size: 9px !important;
    letter-spacing: .22em !important;
  }

  .tmvb-head h1 {
    font-size: clamp(34px, 13.5vw, 52px) !important;
    line-height: .84 !important;
    margin: 4px 0 !important;
  }

  .tmvb-head p {
    font-size: 12px !important;
    line-height: 1.25 !important;
    opacity: .82 !important;
  }

  .tmvb-head-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .tmvb-head-actions > * {
    min-height: 38px !important;
    padding: 8px 7px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  .tmvb-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 8px 8px 12px !important;
  }

  .tmvb-panel--left {
    order: 1 !important;
    position: sticky !important;
    top: 34px !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(78px, .75fr) minmax(104px, .9fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(5, 2, 10, .86) !important;
    backdrop-filter: none !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .tmvb-balance {
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 10px 9px !important;
    border-radius: 13px !important;
    min-width: 0 !important;
  }

  .tmvb-balance-label {
    font-size: 8px !important;
    letter-spacing: .12em !important;
    margin-bottom: 2px !important;
  }

  .tmvb-balance-value {
    font-size: clamp(22px, 7.4vw, 32px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .tmvb-kpis {
    grid-column: 2 !important;
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .tmvb-kpi {
    min-height: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 8px 6px !important;
    border-radius: 13px !important;
    text-align: center !important;
  }

  .tmvb-kpi:not(:first-child) {
    display: none !important;
  }

  .tmvb-kpi span {
    font-size: 8px !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
  }

  .tmvb-kpi b {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1 !important;
  }

  .tmvb-actions {
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  .tmvb-actions .tmvb-primary,
  .tmvb-actions .tmvb-secondary {
    min-height: 100% !important;
    padding: 9px 8px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    letter-spacing: .10em !important;
    animation: none !important;
    background: linear-gradient(135deg, #fe2d8c, #7a16f6) !important;
    box-shadow: 0 8px 18px rgba(170,30,240,.24) !important;
  }

  .tmvb-rng,
  .tmvb-status,
  .tmvb-error {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  .tmvb-rng {
    padding: 7px 9px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  .tmvb-rng[hidden] {
    display: none !important;
  }

  .tmvb-rng-num {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .tmvb-rng-sub {
    font-size: 8px !important;
    letter-spacing: .08em !important;
    text-align: right !important;
  }

  .tmvb-status {
    font-size: 11px !important;
    line-height: 1.25 !important;
    padding: 0 2px !important;
    color: rgba(255,255,255,.76) !important;
  }

  .tmvb-vault {
    order: 2 !important;
    padding: 9px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.26) !important;
    min-height: auto !important;
  }

  .tmvb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(7px, 2.2vw, 10px) !important;
    perspective: none !important;
  }

  .tmvb-box {
    min-height: clamp(94px, 27.8vw, 122px) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 15px !important;
    padding: clamp(5px, 1.6vw, 8px) !important;
  }

  .tmvb-box .tmvb-luxe-crate,
  .tmvb-lite-motion .tmvb-box .tmvb-luxe-crate {
    width: clamp(70px, 22vw, 92px) !important;
    height: clamp(70px, 22vw, 92px) !important;
  }

  .tmvb-box.is-opened .tmvb-crate,
  .tmvb-box.is-opened .tmvb-luxe-crate {
    display: none !important;
  }

  .tmvb-box.is-opened .tmvb-box-result {
    display: grid !important;
    place-items: stretch !important;
    position: absolute !important;
    inset: 5px !important;
    min-height: auto !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  .tmvb-opened-prize {
    min-height: 0 !important;
    border-radius: 12px !important;
    padding: 5px !important;
    grid-template-rows: minmax(34px, 1fr) auto auto auto !important;
    gap: 2px !important;
  }

  .tmvb-opened-prize-media {
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  .tmvb-opened-prize-kicker,
  .tmvb-opened-prize small {
    font-size: 7px !important;
    letter-spacing: .06em !important;
  }

  .tmvb-opened-prize b {
    font-size: clamp(9px, 2.7vw, 12px) !important;
  }

  .tmvb-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 8px 12px !important;
    content-visibility: visible !important;
  }

  .tmvb-card {
    border-radius: 17px !important;
    padding: 13px !important;
    content-visibility: auto !important;
    contain-intrinsic-size: 420px !important;
  }

  .tmvb-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .tmvb-card--history .tmvb-history-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tmvb-card--history.is-collapsed .tmvb-history {
    display: none !important;
  }

  .tmvb-history {
    max-height: min(320px, 62vh) !important;
  }

  .tmvb-history-row:nth-child(n+11) {
    display: none !important;
  }

  .tmvb-luxe-shine,
  .tmvb-prize-media-glow,
  .tmvb-prize.tmvb-prize--showcase::before {
    display: none !important;
    animation: none !important;
  }

  .tmvb-luxe-aura,
  .tmvb-luxe-backglow {
    animation: none !important;
  }
}

@media (max-width: 430px) {
  .tmvb-panel--left {
    grid-template-columns: minmax(0, 1.1fr) minmax(68px, .66fr) minmax(94px, .86fr) !important;
    gap: 6px !important;
    top: 32px !important;
  }

  .tmvb-box {
    min-height: clamp(84px, 28vw, 108px) !important;
    border-radius: 13px !important;
  }

  .tmvb-box .tmvb-luxe-crate,
  .tmvb-lite-motion .tmvb-box .tmvb-luxe-crate {
    width: clamp(62px, 21.5vw, 82px) !important;
    height: clamp(62px, 21.5vw, 82px) !important;
  }

  .tmvb-opened-prize small {
    display: none !important;
  }

  .tmvb-prize.tmvb-prize--showcase {
    min-height: 132px !important;
  }
}

@media (max-width: 360px) {
  .tmvb-panel--left {
    grid-template-columns: 1fr 66px 88px !important;
  }

  .tmvb-balance-value,
  .tmvb-kpi b {
    font-size: 21px !important;
  }

  .tmvb-box {
    min-height: 78px !important;
  }

  .tmvb-box .tmvb-luxe-crate,
  .tmvb-lite-motion .tmvb-box .tmvb-luxe-crate {
    width: 58px !important;
    height: 58px !important;
  }

  .tmvb-opened-prize-media {
    display: none !important;
  }

  .tmvb-opened-prize {
    grid-template-rows: 1fr auto auto !important;
  }
}

/* =========================================================
   V12 Mobile Auto-Open Optimization + Text-Only Prize Cards
   - A revealed box without an image now keeps the prize name in the square.
   - Auto-open avoids continuous repaint work and reduces mobile audio pressure.
   - No API, wallet, FastAPI, accounting or admin contracts are changed.
   ========================================================= */
.tmvb-opened-prize--text-only {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 10px 7px 8px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 227, 142, .34), transparent 36%),
    radial-gradient(circle at 50% 76%, rgba(151, 56, 255, .28), transparent 50%),
    linear-gradient(160deg, rgba(255, 199, 78, .20), rgba(68, 18, 98, .86) 56%, rgba(7, 4, 12, .98)) !important;
}

.tmvb-opened-prize--text-only b {
  align-self: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  max-width: 100% !important;
  font-size: clamp(13px, 1.45vw, 18px) !important;
  line-height: 1.02 !important;
  letter-spacing: .01em !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.55),
    0 0 14px rgba(255,210,111,.22) !important;
}

.tmvb-opened-prize--text-only small {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tmvb-opened-prize-media--fallback {
  display: none !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .tmvb-opened-prize--text-only {
    padding: 7px 5px 6px !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .tmvb-opened-prize--text-only b {
    font-size: clamp(13px, 4.2vw, 18px) !important;
    line-height: .98 !important;
    -webkit-line-clamp: 3 !important;
  }

  .tmvb-opened-prize--text-only .tmvb-opened-prize-kicker,
  .tmvb-opened-prize--text-only small {
    font-size: 7px !important;
  }

  .tmvb-smash-orb.tmvb-roulette-orb:before {
    animation-duration: .72s !important;
  }

  .tmvb-smash-orb.tmvb-roulette-orb:after {
    display: none !important;
  }

  .tmvb-impact-ring {
    animation-duration: .34s !important;
    box-shadow: 0 0 14px rgba(255,196,82,.54) !important;
    filter: none !important;
  }

  .tmvb-explosion .tmvb-smoke,
  .tmvb-lite-motion .tmvb-explosion .tmvb-smoke,
  .tmvb-lite-motion .tmvb-coin:nth-of-type(n+4),
  .tmvb-lite-motion .tmvb-spark:nth-of-type(n+8),
  .tmvb-lite-motion .tmvb-shard:nth-of-type(n+4) {
    display: none !important;
  }

  .tmvb-result-toast {
    animation-duration: .38s !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.32) !important;
    backdrop-filter: none !important;
  }

  .tmvb-pop,
  .tmvb-prize-flight {
    filter: none !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.45) !important;
  }

  .tmvb-grid.is-auto-open .tmvb-box:not(.is-opened),
  .tmvb-grid.is-auto-open .tmvb-box:not(.is-opened) * {
    filter: none !important;
  }
}

@media (max-width: 360px) {
  .tmvb-opened-prize--text-only b {
    font-size: clamp(11px, 4.1vw, 15px) !important;
    -webkit-line-clamp: 2 !important;
  }

  .tmvb-opened-prize--text-only small {
    display: none !important;
  }
}


/* === FastAPI instant-open + iframe embed fit patch === */
.tmvb-box.is-opening .tmvb-luxe-box,
.tmvb-lite-motion .tmvb-box.is-opening .tmvb-luxe-box {
  animation-duration: .075s !important;
}
.tmvb-vault.is-shaking { animation-duration: .30s !important; }
.tmvb-rng-num { transition: opacity .08s linear; }

html:has(body.tmvb-is-embed),
body.tmvb-is-embed {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 0 !important;
  background: transparent !important;
  overflow-x: hidden !important;
}
body.tmvb-is-embed .tmvb-wrap {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.tmvb-is-embed .tmvb-ticker {
  margin-top: 0 !important;
}
body.tmvb-is-embed .tmvb-shell {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 22px !important;
}
body.tmvb-is-embed .tmvb-history {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}
@media (max-width: 760px) {
  body.tmvb-is-embed .tmvb-ticker { display: none !important; }
  body.tmvb-is-embed .tmvb-head { padding-top: 14px !important; }
  body.tmvb-is-embed .tmvb-bottom { padding-bottom: 14px !important; }
}

.tmvb-box.is-locked:not(.is-opened):not(.is-opening) {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.25) saturate(.75);
}

.tmvb-box.is-locked:not(.is-opened):not(.is-opening) .tmvb-crate,
.tmvb-box.is-locked:not(.is-opened):not(.is-opening) .tmvb-luxe-crate {
  transform: none !important;
}

/* Box History live list: keep only the latest 10 visible rows. The JS keeps the list updated after every confirmed engine spin; CSS is only a display safety net. */
.tmvb-card--history .tmvb-history .tmvb-history-row:nth-child(n+11) {
  display: none !important;
}

/* Manual title banner from admin settings */
#tmvb_title.tmvb-title--image {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#tmvb_title .tmvb-title-banner-img {
  display: block;
  width: auto;
  max-width: min(360px, 100%);
  max-height: 96px;
  object-fit: contain;
}

#tmvb_title .tmvb-title-banner-text {
  display: inline-block;
}

@media (max-width: 760px) {
  #tmvb_title.tmvb-title--image {
    justify-content: center;
    gap: 10px;
  }

  #tmvb_title .tmvb-title-banner-img {
    max-width: 100%;
    max-height: 72px;
  }
}