/* game.min.css — Revised visual design with score closer to stimulus card */

.game-container {
  height: 80vh; width: 80vw; max-width: 1400px;
  position: relative; transform: translate(-50%, 0%);
  border: 2px solid rgba(255,255,255,0.08); border-radius: 12px;
  overflow: hidden; left: 50%; top: 5%;
  background: linear-gradient(to bottom,
    hsl(210,38%,18%) 0%, hsl(210,38%,28%) 30%, hsl(210,38%,42%) 55%,
    hsl(210,44%,58%) 72%, hsl(210,48%,72%) 85%, hsl(210,46%,80%) 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); user-select: none;
}
.main-container {
  height: 68.5vh; width: 80vw; max-width: 1400px;
  position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); z-index: 3;
}
.bg-ground {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 22%;
  background: linear-gradient(to bottom, hsl(210,46%,80%) 0%, hsl(210,42%,74%) 100%);
  border-top: 1px solid rgba(255,255,255,0.2); z-index: 1;
}
.slider-rail {
  position: absolute; left: 8%; width: 84%; height: 3px; top: 78%;
  transform: translateY(-50%); border-radius: 999px;
  background: rgba(255,255,255,0.55); box-shadow: 0 0 8px rgba(255,255,255,0.15);
  z-index: 8; pointer-events: none;
}
.collector-wrap {
  position: absolute; top: 78%; width: 12%; min-width: 90px; height: 20px;
  transform: translate(-50%, -50%); z-index: 12; pointer-events: none;
  transition: left 0.06s linear;
}
.collector-box {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255,255,255,0.88); border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 3px 10px rgba(0,0,0,0.25);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
  display: flex; align-items: center; justify-content: center;
}
.collector-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: rgba(0,0,0,0.35); text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  transition: color 0.25s;
}
.collector-box.locked {
  background: rgba(100,100,120,0.7); border-color: rgba(255,255,255,0.12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.game-container.practice-theme .collector-box.locked {
  background: rgba(52,56,64,0.82); border-color: rgba(255,255,255,0.72);
  box-shadow: 0 0 0 2px rgba(20,24,30,0.22),
    0 4px 12px rgba(0,0,0,0.48), 0 0 12px rgba(255,255,255,0.14);
}
.collector-box.locked .collector-label { color: rgba(255,255,255,0.3); }

.pe-line {
  position: absolute; top: 78%; height: 2px; transform: translateY(-1px);
  z-index: 10; opacity: 0.7; pointer-events: none;
}
.pe-line.reward {
  background: repeating-linear-gradient(90deg, #39ff14 0 4px, transparent 4px 8px);
}
.pe-line.loss {
  background: repeating-linear-gradient(90deg, #ff4444 0 4px, transparent 4px 8px);
}

.bag-dot {
  position: absolute; top: var(--bag-start-top, 6%); left: 50%;
  transform: translate(-50%, -50%) scale(0.65);
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 0 12px rgba(255,255,255,0.22), 0 3px 8px rgba(0,0,0,0.4);
  z-index: 11; pointer-events: none; opacity: 0;
}
.bag-dot.reward {
  background: radial-gradient(circle, hsl(130,60%,55%) 0%, hsl(130,45%,38%) 100%);
}
.bag-dot.loss {
  background: radial-gradient(circle, hsl(0,65%,55%) 0%, hsl(0,50%,40%) 100%);
}
.bag-dot.dropping {
  animation: bagDropDown 720ms cubic-bezier(0.35,0,0.65,1) forwards;
}
.bag-dot.landed {
  top: var(--bag-land-top, 71%); opacity: 1;
  animation: landingPulse 380ms ease-out forwards;
}

.fragment-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 9; overflow: visible;
}
.bag-fragment {
  position: absolute; top: var(--bag-land-top, 71%);
  width: 7px; height: 7px; border-radius: 2px;
  transform: translate(-50%,-50%) scale(0.4);
  --dx: 0vw; --dy: -0.6vh; --fall: 5.6vh; --dx-mid: 0vw; --fall-mid: 2vh; --rot: 90deg;
  opacity: 0; pointer-events: none; animation: fragmentBurst 700ms ease-out forwards;
}
.bag-fragment.reward {
  background: linear-gradient(180deg, hsl(130,75%,62%), hsl(130,62%,42%));
  box-shadow: 0 0 4px rgba(120,255,130,0.55);
}
.bag-fragment.loss {
  background: linear-gradient(180deg, hsl(0,78%,62%), hsl(0,62%,42%));
  box-shadow: 0 0 4px rgba(255,100,100,0.55);
}

@keyframes bagDropDown {
  0%   { top: var(--bag-start-top, 6%); transform: translate(-50%,-50%) scale(0.65); opacity: 0; }
  15%  { opacity: 1; }
  100% { top: var(--bag-land-top, 71%); transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
@keyframes landingPulse {
  0%   { transform: translate(-50%,-50%) scale(1);
         box-shadow: 0 0 0 0 rgba(255,255,255,0.7), 0 3px 8px rgba(0,0,0,0.35); opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1.7);
         box-shadow: 0 0 0 14px rgba(255,255,255,0), 0 3px 8px rgba(0,0,0,0); opacity: 0.55; }
  100% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
}
@keyframes fragmentBurst {
  0%   { transform: translate(-50%,-50%) scale(0.45) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  30%  { transform: translate(calc(-50% + var(--dx-mid)), calc(-50% + var(--dy))) scale(1) rotate(calc(var(--rot)*0.25)); opacity: 1; }
  55%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--fall-mid))) scale(0.95) rotate(calc(var(--rot)*0.7)); opacity: 1; }
  82%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--fall))) scale(0.85) rotate(var(--rot)); opacity: 1; }
  88%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--fall))) scale(0.55) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--fall))) scale(0.55) rotate(var(--rot)); opacity: 0; }
}

/* ── Feedback value — just above the bag drop zone ── */
.fb-value {
  position: absolute;
  top: 56%;              /* just BELOW the stimulus card (card ends ~52%) */
  transform: translateX(-50%);
  z-index: 15;
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.3);
  pointer-events: none;
  animation: valueAppear 0.2s ease-out;
}

.stimulus-card {
  position: absolute; top: clamp(14%, 16vh, 20%);
  transform: translateX(-50%); z-index: 14;
  width: 210px; height: 210px;
  background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.22);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  pointer-events: none; animation: itemFadeIn 0.35s ease-out;
}
.stimulus-card .emoji-stim {
  font-size: 125px; line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}
.stimulus-card .stimulus-img {
  max-width: 82%; max-height: 82%; object-fit: contain;
  display: block; user-select: none; pointer-events: none; image-rendering: auto;
}

.css-drone-shape {
  width: 72px; height: 32px; box-sizing: border-box;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  user-select: none; pointer-events: none;
}
.css-drone-shape .css-drone-arm {
  position: absolute; left: 7px; right: 7px; top: 14px; height: 4px;
  border-radius: 999px; background: #94a3b8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.css-drone-shape .css-drone-body {
  position: absolute; left: 50%; top: 7px; width: 36px; height: 18px;
  transform: translateX(-50%); z-index: 2;
  border: 2px solid rgba(226,232,240,0.86); border-radius: 55% 55% 45% 45%;
  background: linear-gradient(to bottom,#dbe5eb 0%,#8393a1 48%,#475569 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.42),0 2px 5px rgba(0,0,0,0.34);
}
.css-drone-shape .css-drone-body::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 7px; height: 4px; transform: translateX(-50%);
  border-radius: 999px; background: #67e8f9;
  box-shadow: 0 0 7px rgba(103,232,249,0.9);
}
.css-drone-shape .css-drone-rotor {
  position: absolute; top: 5px; width: 25px; height: 4px; z-index: 3;
  border-radius: 999px; background: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.32);
}
.css-drone-shape .css-drone-rotor.left { left: -2px; }
.css-drone-shape .css-drone-rotor.right { right: -2px; }
.drone-el {
  position: absolute; top: 5%;
  transform: translateX(-50%); z-index: 6;
  visibility: hidden;
  opacity: 0.3;
}
.drone-el.visible { visibility: visible; opacity: 0.9; }
.drone-el.outcome-phase { opacity: 0.9; }
.bird {
  position: absolute; transform: translate(-50%,-50%);
  left: 35%; top: 5%; height: 10%; width: 10%;
  overflow: visible; visibility: hidden;
}

@keyframes valueAppear {
  from { transform: translateX(-50%) translateY(8px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes itemFadeIn {
  from { transform: translateX(-50%) translateY(6px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}