/* Shared purse HUD — fixed top-right on every game screen */
:root {
  --purse-hud-top: max(8px, env(safe-area-inset-top, 0px));
  --purse-hud-right: max(10px, env(safe-area-inset-right, 0px));
  --purse-hud-gap: 10px;
  --purse-hud-width: 196px;
  --purse-hud-height: 88px;
  --purse-hud-clearance-right: calc(var(--purse-hud-width) + var(--purse-hud-right) + var(--purse-hud-gap));
}

.purse-hud {
  position: fixed;
  top: var(--purse-hud-top);
  right: var(--purse-hud-right);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 168px;
  padding: 7px 10px 8px;
  border-radius: 10px;
  text-align: center;
  background:
    linear-gradient(165deg, rgba(34, 72, 56, 0.94), rgba(12, 26, 21, 0.98));
  border: 1px solid rgba(238, 194, 97, 0.3);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'General Sans', 'Inter', system-ui, sans-serif;
}

.purse-hud::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%);
  pointer-events: none;
}

.purse-hud-title {
  position: relative;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #897f6d;
  line-height: 1;
}

.purse-hud-slots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: end;
}

.purse-hud-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.purse-hud-icon {
  display: grid;
  place-items: center;
  height: 22px;
  line-height: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.purse-hud-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
}

.purse-hud-value {
  display: block;
  font-family: 'Zodiak', Georgia, serif;
  font-size: clamp(0.68rem, 0.64rem + 0.15vw, 0.78rem);
  font-weight: 700;
  color: #d0a23a;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.purse-hud-cash { color: #8fd989; }
.purse-hud-gold { color: #f0d060; }
.purse-hud.debt .purse-hud-digital { color: #f26e89; }

.purse-hud-networth {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(238, 194, 97, 0.16);
}

.purse-hud-networth-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #897f6d;
}

.purse-hud-networth-value {
  font-size: clamp(0.76rem, 0.72rem + 0.18vw, 0.88rem);
  color: #e8c878;
}

.purse-hud.negative-net .purse-hud-networth-value { color: #f26e89; }

.purse-hud-delta {
  position: absolute;
  right: 6px;
  top: 2px;
  font-family: 'General Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.purse-hud-delta.is-up { color: #8fd989; }
.purse-hud-delta.is-down { color: #f26e89; }

.purse-hud.low .purse-hud-value { color: #ffd2a0; }
.purse-hud.empty .purse-hud-value { color: #f26e89; }
.purse-hud.empty .purse-hud-icon {
  filter: saturate(0.45) brightness(0.82) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.purse-hud.pulse .purse-hud-value {
  animation: purseHudPulse 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.purse-hud.show-delta .purse-hud-delta {
  animation: purseHudDelta 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes purseHudPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes purseHudDelta {
  0% { opacity: 0; transform: translateY(6px); }
  18% { opacity: 1; transform: translateY(0); }
  72% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Exchange panel — gold desk + price ticker under the HUD */
.purse-hud-panel {
  position: fixed;
  top: calc(var(--purse-hud-top) + var(--purse-hud-height) + 8px);
  right: var(--purse-hud-right);
  z-index: 10000;
  width: 236px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(34, 72, 56, 0.96), rgba(12, 26, 21, 0.98));
  border: 1px solid rgba(238, 194, 97, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'General Sans', 'Inter', system-ui, sans-serif;
  color: #e6dcc4;
}

.purse-hud-panel-econ {
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: #b7ab8f;
  margin-bottom: 8px;
  line-height: 1.5;
}

.purse-hud-panel-econ b { color: #f0d060; }

.purse-hud-panel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.purse-hud-panel-lbl {
  flex: 1;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c9bd9f;
}

.purse-hud-panel-row button {
  font: 700 0.62rem 'General Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.03em;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(238, 194, 97, 0.35);
  background: rgba(238, 194, 97, 0.12);
  color: #f0d060;
  cursor: pointer;
  white-space: nowrap;
}

.purse-hud-panel-row button:hover:not(:disabled) {
  background: rgba(238, 194, 97, 0.26);
}

.purse-hud-panel-row button:disabled {
  opacity: 0.38;
  cursor: default;
}

.purse-hud-panel-note {
  margin-top: 8px;
  font-size: 0.6rem;
  line-height: 1.45;
  color: #897f6d;
}

.purse-hud-panel-section {
  margin: 10px 0 6px;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0d060;
}

.purse-hud-panel-section:first-of-type { margin-top: 2px; }

.purse-hud-panel-row--wrap {
  flex-wrap: wrap;
}

.purse-hud-panel-row--wrap button {
  flex: 1 1 auto;
}

/* Slim trigger when the full HUD is off (roulette floor) */
.purse-cash-desk-btn {
  position: fixed;
  top: var(--purse-hud-top);
  right: var(--purse-hud-right);
  z-index: 10000;
  font: 700 0.72rem 'General Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(238, 194, 97, 0.35);
  background: linear-gradient(165deg, rgba(34, 72, 56, 0.94), rgba(12, 26, 21, 0.98));
  color: #f0d060;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.purse-cash-desk-btn:hover {
  background: linear-gradient(165deg, rgba(44, 92, 70, 0.96), rgba(16, 36, 28, 0.98));
}

/* Roulette floor: HUD off, panel under the cash desk trigger */
body.has-cash-desk:not(.has-purse-hud) .purse-hud-panel {
  top: calc(var(--purse-hud-top) + 44px);
}

/* Craps / liquor: cash desk stacks under the purse HUD */
body.has-purse-hud.has-cash-desk .purse-cash-desk-btn {
  top: calc(var(--purse-hud-top) + var(--purse-hud-height) + var(--purse-hud-gap));
}

body.has-purse-hud.has-cash-desk .purse-hud-panel {
  top: calc(var(--purse-hud-top) + var(--purse-hud-height) + var(--purse-hud-gap) + 44px);
}

/* Keep game UI out from under the fixed HUD */
body.has-purse-hud .topbar {
  padding-right: var(--purse-hud-clearance-right);
}

body.has-purse-hud > .app > .controls {
  padding-right: calc(var(--space-3, 0.75rem) + var(--purse-hud-clearance-right) - var(--purse-hud-right));
}

.purse-stack-amount.purse-stack-amount--hidden,
.purse-block.purse-block--hidden {
  display: none !important;
}