/* ══════════════════════════════════════════════════════════════════════════════
   ATMOSPHERE — dark moody bar aesthetic
   Purely additive — layered over existing styles, nothing removed.
   Swap the Unsplash URL below for any dark bar photo you prefer.
══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Atmospheric background — multi-layer radial gradients ────────────── */
/* Simulates a dark bar with warm bottle-backlighting and cool shadows.
   Swap in a real photo URL here once you have an asset you like:
   background: linear-gradient(rgba(3,1,0,0.55),rgba(3,1,0,0.55)),
               url('YOUR_PHOTO_URL') center/cover no-repeat !important; */
#screen-game {
  background:
    radial-gradient(ellipse at 18% 55%, rgba(180,80,10,0.28)  0%, transparent 38%),
    radial-gradient(ellipse at 78% 42%, rgba(140,60,8,0.22)   0%, transparent 35%),
    radial-gradient(ellipse at 50% 5%,  rgba(80,35,5,0.18)    0%, transparent 45%),
    radial-gradient(ellipse at 50% 95%, rgba(200,110,15,0.14) 0%, transparent 50%),
    linear-gradient(168deg, #110906 0%, #090503 45%, #130a06 100%) !important;
}

/* ── 2. Semi-transparent game layers — photo shows through ───────────────── */
#layer-bartop {
  background: rgba(14, 8, 3, 0.90) !important;
}
#layer-workspace {
  background: rgba(6, 3, 1, 0.76) !important;
}

/* ── Slammed Bar mat — handled in rule block 6 below ─────────────────── */
/* Warm "backlit bottles" glow from below in the well */
#layer-well::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(210,130,20,0.07) 0%, transparent 65%);
}

/* ── 3. Bar mat texture on the workspace grid ────────────────────────────── */
/* Subtle rubber diamond-grid pattern, like a real bar mat */
#workspace-slots {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 6px,
      rgba(255,255,255,0.016) 6px, rgba(255,255,255,0.016) 7px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 6px,
      rgba(255,255,255,0.016) 6px, rgba(255,255,255,0.016) 7px
    ) !important;
  border-radius: 6px;
}

/* ── 4. HUD bar — frosted dark strip ─────────────────────────────────────── */
#hud-top {
  background: rgba(8, 5, 2, 0.84) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* ── 5. Neon glow on key text ────────────────────────────────────────────── */
/* Score — warm amber neon */
#hud-top .hud-score {
  text-shadow:
    0 0 6px  rgba(212,175,55,0.90),
    0 0 14px rgba(212,175,55,0.40);
}
/* Timer — cool white glow */
#hud-top .hud-timer {
  text-shadow: 0 0 6px rgba(240,225,195,0.55);
}
/* Ticket order numbers on slot headers */
.ssh-num {
  text-shadow:
    0 0 7px  rgba(212,175,55,0.85),
    0 0 14px rgba(212,175,55,0.35);
}
/* Drink name inside active slot */
.stc-name {
  text-shadow:
    0 0 8px  rgba(212,175,55,0.55),
    0 0 16px rgba(212,175,55,0.20);
}
/* Ticket names on the rail */
.wt-name {
  text-shadow: 0 0 6px rgba(212,175,55,0.45);
}
.wt-ticket.focus .wt-name {
  text-shadow:
    0 0 8px  rgba(212,175,55,0.75),
    0 0 16px rgba(212,175,55,0.30);
}

/* ── 6. Slot cards — bar mat texture + frosted glass ────────────────────── */
.ws-slot {
  background:
    linear-gradient(rgba(6,3,1,0.42), rgba(6,3,1,0.42)),
    url("../assets/barware%20PNG/Barmatt2%20copy.webp") center/cover no-repeat !important;
  border-color: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 2px 10px rgba(0,0,0,0.45);
  overflow: visible !important; /* allow PNG glass edges to bleed outside slot boundary */
}
.ws-slot.slot-active {
  border-color: rgba(212,175,55,0.42) !important;
  background:
    linear-gradient(rgba(212,175,55,0.06), rgba(212,175,55,0.06)),
    url("../assets/barware%20PNG/Barmatt2%20copy.webp") center/cover no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.07),
    0 0 18px rgba(212,175,55,0.14),
    0 2px 10px rgba(0,0,0,0.45) !important;
}
.ws-slot.slot-drag-over {
  box-shadow:
    0 0 20px rgba(255,255,255,0.12),
    0 2px 10px rgba(0,0,0,0.45) !important;
}

/* ── 7. Ticket rail — elevated glass strip ───────────────────────────────── */
#ticket-rail {
  background: rgba(10, 6, 2, 0.92) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 -3px 16px rgba(0,0,0,0.5);
}

/* ── 8. Ticket cards on the rail — depth ────────────────────────────────── */
.wt-ticket {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ── 9. Vessel selector — frosted glass panel ────────────────────────────── */
#vessel-selector {
  background: rgba(10, 6, 3, 0.90) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: -4px 0 20px rgba(0,0,0,0.45);
}

/* ── 10. Well bottle cards — PNG top + empty-slot ───────────────────────── */
.well-bottle {
  background: rgba(255,255,255,0.036) !important;
  border: none !important;           /* no border — just the bottle shape */
  box-shadow: none !important;
  position: relative;
}

/* Brown bottle top PNG — fills the wb-icon area */
.brown-bottle-top {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Empty slot: round dark hole, hidden by default */
.wb-empty-slot {
  display: none;
  width: 65%;
  height: 65%;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(0,0,0,0.70);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.9);
}

/* When pouring: hide bottle top, show empty hole */
.well-bottle.wb-pouring .brown-bottle-top { display: none; }
.well-bottle.wb-pouring .wb-empty-slot    { display: block; }

/* Drag ghost — full bottle PNG, 2× size */
.brown-bottle-full {
  width: 110px;
  height: 220px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Active/held glow via box-shadow on icon, not border */
.well-bottle:active .brown-bottle-top,
.well-bottle.held   .brown-bottle-top {
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.70));
}
.well-bottle.wb-pouring .wb-empty-slot {
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.9), 0 0 8px rgba(212,175,55,0.30);
}

/* MainWell PNG — behind the well grid */
#layer-well {
  background:
    rgba(10, 5, 2, 0.55),
    url('../assets/barware PNG/MainWell.webp') center/cover no-repeat !important;
}

/* ── 11. Toast notifications — neon treatment ───────────────────────────── */
.toast {
  background: rgba(8, 5, 2, 0.94) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.toast.perfect {
  border-color: rgba(80,220,100,0.50) !important;
  color: #90ffaa !important;
  text-shadow:
    0 0 8px  rgba(80,220,100,0.80),
    0 0 18px rgba(80,220,100,0.35);
}
.toast.good {
  border-color: rgba(212,175,55,0.50) !important;
  color: #e8c84a !important;
  text-shadow:
    0 0 8px  rgba(212,175,55,0.80),
    0 0 18px rgba(212,175,55,0.35);
}
.toast.okay {
  border-color: rgba(210,140,40,0.40) !important;
  color: #d4924a !important;
  text-shadow: 0 0 8px rgba(210,140,40,0.60);
}
.toast.penalty,
.toast.bad {
  border-color: rgba(220,60,60,0.50) !important;
  color: #ff7070 !important;
  text-shadow:
    0 0 8px  rgba(220,60,60,0.75),
    0 0 18px rgba(220,60,60,0.30);
}

/* ── 12. Vessel workspace gfx — subtle depth shadow ─────────────────────── */
.ws-vessel-gfx {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}

/* ── 13. Pouring stream glow ─────────────────────────────────────────────── */
.pour-ghost {
  filter: drop-shadow(0 0 4px rgba(180,220,255,0.45)) !important;
}

/* ── 14. Garnish rack / bitters rack — frosted ───────────────────────────── */
#garnish-rack,
#bitters-rack {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── 15. PNG glassware overlays ──────────────────────────────────────────── */

/* Base container — overridden per glass below */
.has-png-glass {
  width: 70px;
  height: 130px;
  overflow: visible; /* prevent PNG edges being clipped by container */
}

/* PNG overlay — allow image to extend slightly beyond its bounding box */
.has-png-glass .vessel-svg-overlay {
  overflow: visible;
}

/* PNG overlay — normal blend, real alpha transparency */
.vessel-png-glass {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: normal;
  display: block;
}

/* Generic fill positioning — overridden per glass below */
.has-png-glass > [class^="gfx-big-"],
.has-png-glass > [class*=" gfx-big-"] {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 78%;
  clip-path: none;
  border: none;
}

/* Drag ghost: constrain PNG img to a sensible icon size */
#drag-ghost .dg-icon .vs-glass-png,
.drag-ghost-secondary .dg-icon .vs-glass-png {
  width: 36px;
  height: 48px;
  object-fit: contain;
}

/* Pour-target: reduce scale for PNG vessels (base containers are already large) */
.ws-vessel.pour-target .has-png-glass {
  transform: scale(0.6); /* net ~1.2× visible size instead of 2× */
}

/* ── Per-glass container sizes ───────────────────────────────────────────── */
.has-png-martini                          { width: 95px;  height: 145px; }
.has-png-coupe, .has-png-nick-nora        { width: 100px; height: 125px; }
.has-png-collins, .has-png-highball       { width: 68px;  height: 148px; }
.has-png-rocks, .has-png-double-rocks     { width: 85px;  height: 108px; }
.has-png-shot                             { width: 56px;  height: 105px; }
.has-png-champagne-flute                  { width: 52px;  height: 155px; }
.has-png-wine                             { width: 85px;  height: 150px; }
.has-png-mixing-glass,
.has-png-double-mixing-glass              { width: 90px;  height: 165px; }
.has-png-tin,
.has-png-double-tin,
.has-png-triple-tin                       { width: 88px;  height: 168px; }

/* ── Per-glass fill positioning & clip-path ──────────────────────────────── */

/* Martini — push fill higher into the V-bowl */
.has-png-martini > .gfx-big-martini {
  width: 84%;
  height: 40%;
  bottom: 57%;
  clip-path: polygon(0% 0%, 100% 0%, 57% 100%, 43% 100%);
}

/* Coupe — raised, wide at top, rounded bowl bottom */
.has-png-coupe > .gfx-big-coupe,
.has-png-nick-nora > .gfx-big-nick-nora {
  width: 80%;
  height: 30%;
  bottom: 58%;
  clip-path: polygon(0% 0%, 100% 0%, 96% 55%, 80% 88%, 60% 100%, 40% 100%, 20% 88%, 4% 55%);
}

/* Collins / Highball — pronounced outward taper */
.has-png-collins > .gfx-big-collins,
.has-png-highball > .gfx-big-highball {
  width: 64%;
  height: 80%;
  bottom: 9%;
  clip-path: polygon(1% 0%, 99% 0%, 85% 100%, 15% 100%);
}

/* Rocks / Double Rocks */
.has-png-rocks > .gfx-big-rocks,
.has-png-double-rocks > .gfx-big-dbl-rocks {
  width: 74%;
  height: 52%;
  bottom: 14%;
  clip-path: polygon(2% 0%, 98% 0%, 84% 100%, 16% 100%);
}

/* Shot — raised above base, rounded lower corners */
.has-png-shot > .gfx-big-shot {
  width: 58%;
  height: 58%;
  bottom: 28%;
  clip-path: polygon(3% 0%, 97% 0%, 97% 72%, 90% 90%, 72% 100%, 50% 100%, 28% 100%, 10% 90%, 3% 72%);
}

/* Champagne Flute — sits in glass body above long stem; rounded bottom */
.has-png-champagne-flute > .gfx-big-flute {
  width: 44%;
  height: 36%;
  bottom: 50%;
  clip-path: polygon(8% 0%, 92% 0%, 88% 75%, 78% 95%, 60% 100%, 40% 100%, 22% 95%, 12% 75%);
}

/* Wine — oval bowl shape, raised into the bowl area */
.has-png-wine > .gfx-big-wine {
  width: 68%;
  height: 44%;
  bottom: 44%;
  clip-path: polygon(0% 20%, 8% 5%, 25% 0%, 50% 0%, 75% 0%, 92% 5%, 100% 20%, 96% 55%, 80% 85%, 60% 100%, 40% 100%, 20% 85%, 4% 55%);
}

/* Mixing glass — cylindrical body raised above base */
.has-png-mixing-glass > .gfx-big-mixing,
.has-png-double-mixing-glass > .gfx-big-mixing {
  width: 74%;
  height: 70%;
  bottom: 16%;
  clip-path: polygon(3% 0%, 97% 0%, 96% 85%, 88% 96%, 70% 100%, 50% 100%, 30% 100%, 12% 96%, 4% 85%);
}

/* Shaker tins — opaque PNG; hide liquid fill behind it */
.has-png-tin > .gfx-big-tin,
.has-png-double-tin > .gfx-big-tin,
.has-png-triple-tin > .gfx-big-tin {
  opacity: 0;
}


/* Selector button icon — screen blend to drop dark bg on non-transparent PNGs */
.vs-glass-png {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: screen;
  display: block;
}