/* Unified in-stage tooltip chrome (see docs/frontend-design-patterns.md — In-stage tooltips).
 *
 * Rich markup:
 *   <div class="game-tooltip-host">
 *     …
 *     <div class="game-tooltip" role="tooltip" aria-hidden="true">
 *       <div class="game-tooltip__title">Title</div>
 *       <div class="game-tooltip__lines">
 *         <p class="game-tooltip__line">Line</p>
 *         <p class="game-tooltip__line game-tooltip__line--pending">Pending</p>
 *       </div>
 *     </div>
 *   </div>
 *
 * Simple label (attribute):
 *   <button data-tooltip="Label">…</button>
 *   Optional placement: game-tooltip-placement--below-start | --above-center (default)
 */

:root {
  --game-tooltip-gap: calc(var(--gs-u-h) * 0.32);
}

[data-tooltip] {
  position: relative;
}

/* --- Shared panel chrome --- */

.game-tooltip,
[data-tooltip]::after {
  width: max-content;
  max-width: none;
  min-width: 0;
  padding: calc(var(--gs-u-h) * 0.36) calc(var(--gs-u-h) * 0.52);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(255, 210, 160, 0.42);
  background: rgba(22, 16, 10, 0.97);
  text-align: left;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  box-shadow: 0 calc(var(--gs-u-w) * 0.45) calc(var(--gs-u-h) * 1.25) rgba(0, 0, 0, 0.58);
  box-sizing: border-box;
  line-height: 1.35;
  overflow: visible;
}

/* --- Rich markup tooltips --- */

.game-tooltip {
  position: absolute;
  left: var(--game-tooltip-left, 50%);
  right: var(--game-tooltip-right, auto);
  top: var(--game-tooltip-top, auto);
  bottom: var(--game-tooltip-bottom, calc(100% + var(--game-tooltip-gap)));
  transform: var(--game-tooltip-transform, translateX(-50%));
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.22);
  font-size: var(--gs-text-2xs);
  color: #f0e4cf;
}

.game-tooltip--below {
  --game-tooltip-bottom: auto;
  --game-tooltip-top: calc(100% + var(--game-tooltip-gap));
}

.game-tooltip--anchor-start {
  --game-tooltip-left: 0;
  --game-tooltip-right: auto;
  --game-tooltip-transform: none;
}

.game-tooltip--anchor-end {
  --game-tooltip-left: auto;
  --game-tooltip-right: 0;
  --game-tooltip-transform: none;
}

.game-tooltip__title {
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  color: #f0e4cf;
  white-space: nowrap;
}

.game-tooltip__lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.16);
  align-items: flex-start;
}

.game-tooltip__line {
  margin: 0;
  color: #d8ccb8;
  white-space: nowrap;
}

.game-tooltip__line--pending {
  color: #c89bff;
  font-style: italic;
  font-weight: 500;
}

/*
 * Nested rich tooltip that escapes overflow:auto|hidden (Chromium CSS Anchor Positioning).
 * Keep markup under .game-tooltip-host so :hover / :focus-within stay CSS-only.
 */
@supports (anchor-name: --a) {
  .game-tooltip.game-tooltip--css-anchored {
    position: fixed;
    left: anchor(center);
    top: anchor(top);
    right: auto;
    bottom: auto;
    transform: translate(-50%, calc(-100% - var(--game-tooltip-gap)));
    z-index: 600;
    max-width: calc(var(--gs-u-w) * 22);
  }

  .game-tooltip.game-tooltip--css-anchored .game-tooltip__line {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Imperative skill tooltips under .game-stage — JS sets left/top/transform. */
.game-tooltip.game-tooltip--stage-anchored {
  position: absolute;
  right: auto;
  bottom: auto;
  opacity: 1;
  visibility: visible;
  z-index: 600;
  max-width: calc(var(--gs-u-w) * 22);
  pointer-events: none;
}

.game-tooltip.game-tooltip--stage-anchored[hidden] {
  display: none !important;
}

.game-tooltip.game-tooltip--stage-anchored .game-tooltip__line {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* --- Host reveal (rich tooltips) --- */

.game-tooltip-host:hover,
.game-tooltip-host:focus-within {
  z-index: 520;
}

.game-tooltip-host:hover .game-tooltip,
.game-tooltip-host:focus-within .game-tooltip,
.game-tooltip-host:focus-visible .game-tooltip {
  opacity: 1;
  visibility: visible;
}

/* --- Attribute tooltips (simple label) --- */

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: var(--game-tooltip-left, 50%);
  right: var(--game-tooltip-right, auto);
  top: var(--game-tooltip-top, auto);
  bottom: var(--game-tooltip-bottom, calc(100% + var(--game-tooltip-gap)));
  transform: var(--game-tooltip-transform, translateX(-50%));
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  color: #f0e4cf;
  white-space: nowrap;
}

.game-tooltip-placement--below-start {
  --game-tooltip-bottom: auto;
  --game-tooltip-top: calc(100% + var(--game-tooltip-gap));
  --game-tooltip-left: 0;
  --game-tooltip-right: auto;
  --game-tooltip-transform: none;
}

[data-tooltip]:hover,
[data-tooltip]:focus-visible {
  z-index: 520;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

@media (hover: none), (pointer: coarse) {
  [data-tooltip]::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-tooltip,
  [data-tooltip]::after {
    transition: none;
  }
}

/* Shell-sized tooltips — literal 1cqw/1cqh inside this block = stage, not gamecard.
   var(--gs-u-*) must NOT be used here; it re-resolves against nested containers. */
@container game-stage (min-width: 0) {
  [data-tooltip]::after {
    padding: calc(0.2 * 1cqh) calc(0.5 * 1cqw);
    border-radius: 5%;
    border: max(1px, calc(0.1 * 1cqh)) solid rgba(255, 210, 160, 0.42);
    box-shadow: 0 calc(0.45 * 1cqw) calc(1.25 * 1cqh) rgba(0, 0, 0, 0.58);
    font-size: calc(1.45 * 1cqh);
  }

  .game-tooltip {
    width: max-content;
    max-width: 22cqw;
    gap: calc(0.22 * 1cqh);
    --game-tooltip-gap: calc(0.32 * 1cqh);
  }

  .game-tooltip__title {
    font-size: calc(1.45 * 1cqh);
  }

  .game-tooltip__lines {
    gap: calc(0.16 * 1cqh);
  }

  .game-tooltip__line {
    font-size: calc(1.45 * 1cqh);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

}