/*
 * Shared Krix cameo surface.
 *
 * The host never blocks the game: only the dismiss button accepts pointer
 * input; the card and surrounding overlay pass clicks and touch through. The
 * palette variables are deliberately scoped to the widget so a game's own
 * art direction cannot leak out through a global selector.
 */

[hidden].cc-krix-cameo,
.cc-krix-cameo[hidden] { display: none !important; }

.cc-krix-cameo {
  --cc-krix-accent: #79ffff;
  --cc-krix-accent-soft: rgba(0, 204, 204, 0.22);
  --cc-krix-border: rgba(0, 220, 220, 0.7);
  --cc-krix-ink: #e4ffff;
  --cc-krix-muted: #9db8b8;
  --cc-krix-panel: rgba(5, 14, 16, 0.96);
  position: fixed;
  /* Keep the cameo in a predictable peripheral corner.  It used to move
   * beside How to Play, which made a decorative notice cover whichever game
   * control happened to be below that button. */
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px));
  right: auto;
  bottom: auto;
  left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px));
  z-index: 4200;
  width: min(calc(100vw - 32px), 430px);
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  margin: 0;
  pointer-events: none;
  color: var(--cc-krix-ink);
  font-family: "Cinzel", Georgia, serif;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 240ms ease,
    transform 280ms cubic-bezier(0.2, 0.9, 0.25, 1.12);
}

.cc-krix-cameo.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cc-krix-cameo__card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--cc-krix-border);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cc-krix-panel), rgba(3, 8, 10, 0.99));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.68),
    0 0 28px var(--cc-krix-accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  /* The card is decorative and must not cover a game control underneath it. */
  pointer-events: none;
  overflow: hidden;
}

.cc-krix-cameo__portrait {
  display: grid;
  align-self: stretch;
  min-height: 68px;
  place-items: end center;
  border-right: 1px solid var(--cc-krix-accent-soft);
  overflow: hidden;
}

.cc-krix-cameo__image {
  display: block;
  width: 68px;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
  object-position: center bottom;
}

.cc-krix-cameo.is-pixel .cc-krix-cameo__image {
  image-rendering: pixelated;
}

.cc-krix-cameo__body { min-width: 0; }

.cc-krix-cameo__label {
  margin: 0 0 3px;
  color: var(--cc-krix-accent);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cc-krix-cameo__copy {
  margin: 0;
  color: var(--cc-krix-ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.cc-krix-cameo__dismiss {
  align-self: start;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--cc-krix-accent-soft);
  border-radius: 4px;
  background: transparent;
  color: var(--cc-krix-muted);
  font: 1.35rem/1 "Cinzel", Georgia, serif;
  pointer-events: auto;
  cursor: url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.cc-krix-cameo__dismiss:hover,
.cc-krix-cameo__dismiss:focus-visible {
  border-color: var(--cc-krix-accent);
  color: var(--cc-krix-accent);
  outline: 2px solid var(--cc-krix-accent-soft);
  outline-offset: 2px;
}

/* Theme variants — all scoped below the widget to avoid touching game chrome. */
.cc-krix-cameo--ember { --cc-krix-accent: #ffbd71; --cc-krix-accent-soft: rgba(255, 142, 58, 0.25); --cc-krix-border: rgba(255, 170, 91, 0.78); }
.cc-krix-cameo--casino { --cc-krix-accent: #f0d28a; --cc-krix-accent-soft: rgba(184, 125, 50, 0.25); --cc-krix-border: rgba(217, 171, 83, 0.78); }
.cc-krix-cameo--war { --cc-krix-accent: #d9a47e; --cc-krix-accent-soft: rgba(163, 89, 65, 0.3); --cc-krix-border: rgba(214, 126, 94, 0.78); }
.cc-krix-cameo--nocturne { --cc-krix-accent: #e9c4ee; --cc-krix-accent-soft: rgba(159, 96, 183, 0.28); --cc-krix-border: rgba(215, 151, 228, 0.72); }
.cc-krix-cameo--arcade { --cc-krix-accent: #7dffff; --cc-krix-accent-soft: rgba(0, 224, 255, 0.25); --cc-krix-border: rgba(47, 239, 255, 0.78); }
.cc-krix-cameo--rune { --cc-krix-accent: #94f5de; --cc-krix-accent-soft: rgba(49, 187, 161, 0.26); --cc-krix-border: rgba(103, 224, 198, 0.76); }
.cc-krix-cameo--parchment,
.cc-krix-cameo--paper { --cc-krix-accent: #f1d493; --cc-krix-accent-soft: rgba(183, 134, 69, 0.27); --cc-krix-border: rgba(220, 172, 95, 0.76); }
.cc-krix-cameo--azure { --cc-krix-accent: #9ed8ff; --cc-krix-accent-soft: rgba(65, 145, 211, 0.28); --cc-krix-border: rgba(118, 187, 244, 0.76); }
.cc-krix-cameo--moonlit { --cc-krix-accent: #b8d5ff; --cc-krix-accent-soft: rgba(85, 128, 201, 0.3); --cc-krix-border: rgba(132, 172, 242, 0.76); }
.cc-krix-cameo--void { --cc-krix-accent: #d7b9ff; --cc-krix-accent-soft: rgba(125, 76, 204, 0.3); --cc-krix-border: rgba(175, 123, 245, 0.76); }
.cc-krix-cameo--verdant { --cc-krix-accent: #b7f79e; --cc-krix-accent-soft: rgba(91, 179, 80, 0.28); --cc-krix-border: rgba(141, 225, 116, 0.76); }
.cc-krix-cameo--eclipse { --cc-krix-accent: #d5c8ff; --cc-krix-accent-soft: rgba(111, 91, 207, 0.32); --cc-krix-border: rgba(158, 141, 241, 0.76); }
.cc-krix-cameo--masquerade { --cc-krix-accent: #f5b7d6; --cc-krix-accent-soft: rgba(183, 78, 135, 0.27); --cc-krix-border: rgba(224, 121, 176, 0.76); }
.cc-krix-cameo--torch { --cc-krix-accent: #ffc77e; --cc-krix-accent-soft: rgba(219, 110, 47, 0.28); --cc-krix-border: rgba(245, 157, 82, 0.78); }
.cc-krix-cameo--road { --cc-krix-accent: #b9e6ff; --cc-krix-accent-soft: rgba(76, 151, 205, 0.28); --cc-krix-border: rgba(123, 202, 247, 0.76); }

/* Defensive gate suppression. The gate itself wins with a higher z-index; the
 * cameo also disappears in case a game's local stylesheet only toggles the
 * body marker or a browser applies the gate one frame late. Match the gate's
 * own media conditions so a desktop visitor can still receive the cameo on a
 * desktop-only page. */
@media (orientation: portrait) and (max-width: 900px),
       (orientation: landscape) and (max-width: 859px) {
  body.has-portrait-gate .cc-krix-cameo { display: none !important; }
}

@media (max-width: 920px), (hover: none) and (pointer: coarse) {
  body.mobile-unsupported .cc-krix-cameo { display: none !important; }
}


@media (max-width: 560px) {
  .cc-krix-cameo {
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 12px));
    left: max(10px, calc(env(safe-area-inset-left, 0px) + 10px));
    width: min(calc(100vw - 20px), 430px);
    max-width: calc(100vw - 20px);
  }

  .cc-krix-cameo__card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 76px;
    padding: 8px;
  }

  .cc-krix-cameo__portrait { min-height: 60px; }
  .cc-krix-cameo__image { width: 56px; max-height: 78px; }
  .cc-krix-cameo__label { font-size: 0.61rem; }
  .cc-krix-cameo__copy { font-size: 0.76rem; }
  .cc-krix-cameo__dismiss { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-krix-cameo { transition: none; }
}