/* ===================================================================
   Grambl Contact Bar
   Floating "Contact a Manager" button - Telegram / Discord / Contact form.
   Trigger is an ornate circular seal / vial motif (dark crimson glass,
   rotating rune ring, heartbeat pulse) matching the gramblpvp theme.
   Uses the theme's own --gp-* variables where available.
=================================================================== */

.gc-widget{
  --gc-void:      var(--gp-void, #0a0a0c);
  --gc-surface:   var(--gp-surface, #141416);
  --gc-surface-2: var(--gp-surface-2, #1b1b1e);
  --gc-steel:     var(--gp-steel, #302f33);
  --gc-crimson:   var(--gp-crimson, #c8102e);
  --gc-crimson-d: var(--gp-crimson-d, #7a0819);
  --gc-crimson-x: var(--gp-crimson-x, #450410);
  --gc-text:      var(--gp-text, #f2efe9);

  --gc-size: 116px;

  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 99990;
  font-family: 'Inter', sans-serif;
}

/* ---------- Trigger wrapper (holds button + hover tooltip) ---------- */
.gc-trigger-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ---------- Trigger button: dark crimson "vial" core ---------- */
.gc-trigger{
  position: relative;
  width: var(--gc-size);
  height: var(--gc-size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 90, 110, .55) 0%, transparent 32%),
    radial-gradient(circle at 50% 55%, var(--gc-crimson) 0%, var(--gc-crimson-d) 46%, var(--gc-crimson-x) 76%, #170307 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 -10px 18px rgba(0, 0, 0, .55),
    inset 0 6px 10px rgba(255, 255, 255, .06),
    0 12px 30px rgba(0, 0, 0, .55);
  animation: gc-heartbeat 3.6s ease-in-out infinite;
  transition: transform .25s ease;
}
.gc-trigger:hover{
  transform: translateY(-3px) scale(1.03);
}
.gc-trigger:active{
  transform: translateY(-1px) scale(.98);
}

/* Decorative rings - a slow-rotating rune circle around the vial */
.gc-trigger-ring{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.gc-trigger-ring-outer{
  inset: -14px;
  border: 1px dashed rgba(200, 16, 46, .5);
  animation: gc-rotate 26s linear infinite;
}
.gc-trigger-ring-outer::before,
.gc-trigger-ring-outer::after{
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gc-crimson);
  box-shadow: 0 0 6px 1px rgba(200, 16, 46, .8);
  top: 50%;
  left: -2.5px;
  transform: translateY(-50%);
}
.gc-trigger-ring-outer::after{
  left: auto;
  right: -2.5px;
}
.gc-trigger-ring-inner{
  inset: -5px;
  border: 1px solid rgba(242, 239, 233, .12);
}

/* Icon core */
.gc-trigger-core{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, .08), transparent 70%);
  color: #ffe9ec;
  font-size: calc(var(--gc-size) * 0.30);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

@keyframes gc-rotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Heartbeat: lub-dub double pulse, then rest */
@keyframes gc-heartbeat{
  0%   { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -10px 18px rgba(0,0,0,.55), inset 0 6px 10px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(200,16,46,.45); }
  8%   { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -10px 18px rgba(0,0,0,.55), inset 0 6px 10px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.55), 0 0 0 10px rgba(200,16,46,0); }
  16%  { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -10px 18px rgba(0,0,0,.55), inset 0 6px 10px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(200,16,46,.45); }
  24%  { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -10px 18px rgba(0,0,0,.55), inset 0 6px 10px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.55), 0 0 0 14px rgba(200,16,46,0); }
  100% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -10px 18px rgba(0,0,0,.55), inset 0 6px 10px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(200,16,46,0); }
}
@media (prefers-reduced-motion: reduce){
  .gc-trigger{ animation: none; }
  .gc-trigger-ring-outer{ animation: none; }
}

/* ---------- Hover tooltip label (desktop / mouse only) ---------- */
.gc-trigger-tooltip{
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  background: var(--gc-surface);
  border: 1px solid var(--gc-steel);
  color: var(--gc-text);
  padding: 9px 16px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  transition: opacity .18s ease, transform .18s ease;
}
.gc-trigger-tooltip::after{
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: var(--gc-surface);
  border-right: 1px solid var(--gc-steel);
  border-top: 1px solid var(--gc-steel);
}
@media (hover: hover) and (pointer: fine){
  .gc-trigger-wrap:hover .gc-trigger-tooltip,
  .gc-trigger:focus-visible ~ .gc-trigger-tooltip{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}
.gc-widget.gc-open .gc-trigger-tooltip{
  opacity: 0 !important;
}

/* ---------- Options panel ---------- */
.gc-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--gc-surface);
  border: 1px solid var(--gc-steel);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.gc-widget.gc-open .gc-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.gc-widget.gc-open .gc-trigger{
  animation: none;
}

.gc-option{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: var(--gc-surface-2);
  border: 1px solid var(--gc-steel);
  color: var(--gc-text);
  transition: border-color .15s, transform .15s, background .15s;
}
.gc-option:hover,
.gc-option:focus-visible{
  border-color: var(--gc-crimson);
  transform: translateX(-3px);
  color: var(--gc-text);
}

.gc-icon{
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
}
.gc-telegram .gc-icon{ background: #229ED9; }
.gc-discord  .gc-icon{ background: #5865F2; }
.gc-email    .gc-icon{ background: var(--gc-crimson); }

.gc-label{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
}

/* ---------- Small screens: compact circle, no ring animation, no tooltip ---------- */
@media (max-width: 480px){
  .gc-widget{ right: 16px; bottom: 16px; --gc-size: 60px; }
  .gc-trigger-ring-outer{ animation: none; opacity: .6; }
  .gc-trigger-core{ font-size: calc(var(--gc-size) * 0.34); }
  .gc-panel{ width: 220px; }
}

/* ---------- Tablet: slightly smaller than full desktop size ---------- */
@media (min-width: 481px) and (max-width: 991px){
  .gc-widget{ --gc-size: 88px; }
}