/* Premium tooltip placement: float beside the answer field without covering clue content. */

/* Let the sidecar tooltip escape the clue rail and sit above neighbouring panels. */
.rail{
  overflow:visible;
  z-index:60;
}

.rail-card,
.field,
.input-wrap{
  overflow:visible;
}

.tip{
  top:50%;
  bottom:auto;
  left:calc(100% + 1rem);
  width:max-content;
  max-width:min(18rem, 36vw);
  white-space:normal;
  text-align:left;
  padding:.76rem 1rem;
  border-radius:.9rem;
  color:#4a2918;
  background:
    linear-gradient(145deg, rgba(255,220,162,.99), rgba(239,178,103,.99));
  border:1px solid rgba(132,74,28,.32);
  box-shadow:
    0 22px 50px rgba(74,39,14,.28),
    0 6px 16px rgba(74,39,14,.18),
    inset 0 1px 0 rgba(255,248,224,.82),
    inset 0 -1px 0 rgba(126,67,24,.10);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  transform:translateY(-50%) translateX(-10px) scale(.96);
  filter:blur(.2px);
  z-index:9999;
}

.tip::after{
  left:auto;
  right:100%;
  top:50%;
  bottom:auto;
  width:11px;
  height:11px;
  margin:0 -5px 0 0;
  transform:translateY(-50%) rotate(45deg);
  rotate:none;
  background:#f6c77f;
  border:0;
  border-left:1px solid rgba(132,74,28,.30);
  border-bottom:1px solid rgba(132,74,28,.30);
  box-shadow:-3px 3px 8px rgba(74,39,14,.08);
}

.input-wrap:hover .tip{
  opacity:1;
  transform:translateY(-50%) translateX(0) scale(1);
  filter:blur(0);
  animation:tipSideIn 420ms cubic-bezier(.18,1.06,.2,1) 1;
}

@keyframes tipSideIn{
  0%   { transform:translateY(-50%) translateX(-8px) scale(.97); }
  62%  { transform:translateY(-50%) translateX(2px) scale(1.01); }
  100% { transform:translateY(-50%) translateX(0) scale(1); }
}

/* When the rail becomes a single-column/mobile layout, keep the note on-screen. */
@media (max-width:900px){
  .tip{
    top:calc(100% + .7rem);
    left:50%;
    max-width:min(18rem, 88vw);
    text-align:center;
    transform:translateX(-50%) translateY(-8px) scale(.96);
  }

  .tip::after{
    left:50%;
    right:auto;
    top:auto;
    bottom:100%;
    margin:0 0 -5px 0;
    transform:translateX(-50%) rotate(45deg);
    border-left:1px solid rgba(132,74,28,.30);
    border-top:1px solid rgba(132,74,28,.30);
    border-bottom:0;
  }

  .input-wrap:hover .tip{
    transform:translateX(-50%) translateY(0) scale(1);
  }

  @keyframes tipSideIn{
    0%   { transform:translateX(-50%) translateY(-8px) scale(.97); }
    62%  { transform:translateX(-50%) translateY(2px) scale(1.01); }
    100% { transform:translateX(-50%) translateY(0) scale(1); }
  }
}