:root{
  --vp-accent:#00ff66; --vp-accent-2:#00cc88;
  --vp-bg:rgba(0,0,0,.82); --vp-ring:rgba(0,255,102,.35);
  --vp-text:#fff;
}
.vp-backdrop{ position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px); z-index:4500; }
.vp-backdrop.show{ display:grid; }

.vp-modal{ width:min(640px,94vw); border-radius:16px; overflow:hidden;
  background:var(--vp-bg); color:var(--vp-text);
  border:1px solid var(--vp-ring); box-shadow:0 0 24px var(--vp-accent); }
.vp-inner{ padding:20px; font-family:system-ui,Arial,sans-serif; }
.vp-head{ display:flex; align-items:center; gap:10px; }
.vp-pill{ font-size:.75rem; padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--vp-accent) 60%, #001F23); font-weight:800; }
.vp-close{ margin-left:auto; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; }
.vp-question{ margin:10px 0 14px; font-weight:600; }
.vp-countdown{ margin:8px 0 14px; font-weight:700; text-shadow:0 0 10px rgba(0,255,102,.3); }
.vp-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vp-btn, .vp-opt{
  border:none; border-radius:12px; padding:12px 14px; font-weight:800; cursor:pointer;
}
.vp-opt{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18); }
.vp-opt:hover{ border-color:rgba(255,255,255,.35); }
.vp-opt.selected{ outline:2px solid var(--vp-accent); box-shadow:0 0 14px var(--vp-accent); }
.vp-actions{ display:flex; justify-content:flex-end; margin-top:14px; }
.vp-btn{ background:var(--vp-accent); color:#001F23; box-shadow:0 0 10px var(--vp-accent);
}
.vp-btn:disabled{ opacity:.6; cursor:not-allowed; }
.vp-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25); }
.vp-status{ margin-top:10px; font-size:.95rem; }
.vp-results h4{ margin:12px 0 6px; }
.vp-fastest, .vp-correct{ margin:6px 0; font-weight:700; }


/* attentionCue.js stílusai */
#auction-cue {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}
#auction-cue.show {
  display: grid;
  animation: fadeOut 2.5s forwards;
}
#auction-cue .box {
  background: #111;
  border: 2px solid #00d084;
  border-radius: 16px;
  padding: 24px 32px;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(0,208,132,.7);
  animation: pulse 1s ease-out 2;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,208,132,.7); }
  100% { box-shadow: 0 0 0 24px rgba(0,208,132,0); }
}
@keyframes fadeOut {
  0%,85% { opacity:1; }
  100%   { opacity:0; display:none; }
}
.cue-glow {
  outline:3px solid #00d084;
  box-shadow:0 0 24px #00d084 !important;
  transition:outline .2s,box-shadow .2s;
}