/**
 * Palm Beach HUD kit — components from art/hud/hud-kit-palm-beach.png.
 *
 * Numbered to the kit sheet:
 *   1  .hud-coin    coin balance pill
 *   2  .hud-hex     stake tier chip (hexagon)
 *   3  .hud-var     variance button (identity colour per tier)
 *   4  .hud-shield  shuffle remaining badge
 *   5  .hud-cta     primary CTA
 *   6  .hud-ghost   secondary ghost
 *   7  .hud-streak  streak readout
 *   9  .hud-round   circular menu / back / icon button
 *  12  .hud-round   small icon set (same component)
 *
 * copy-next-app: link after host layout CSS. Tokens: docs/TOKENS.md
 * Do not import this from gameplay modules.
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650;9..144,700&family=Nunito:wght@700;800;900&display=swap");

:root {
  --forest: #1E4D3A;
  --coral: #FF6B5B;
  --cream: #F7F3E9;
  --gold: #D4AF37;
  --teal: #0F5C56;
  --salmon: #FF8C8C;
  --sage: #8FA88A;
  --forest-ink: #0A2E24;
  --forest-hi: #2A6A52;
  --gold-deep: #8A6D16;
  --gold-hi: #FFE9A8;
  --cream-hi: #FFF8E4;
  --felt: #0F3D34;
  --felt-hi: #164A3C;
  --hud-font-display: "Fraunces", "Palatino Linotype", Palatino, Georgia, serif;
  --hud-font-num: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* The kit's burnished band. Used as a border-box layer so the rim reads as
     metal turning through the light rather than a flat gold line. */
  --rim: linear-gradient(150deg, var(--gold-hi) 0%, var(--gold) 34%,
                         var(--gold-deep) 62%, var(--gold) 82%, var(--gold-hi) 100%);
  --forest-face: linear-gradient(180deg, var(--forest-hi) 0%, var(--forest) 52%, var(--forest-ink) 100%);
  --coral-face: linear-gradient(180deg, #FF9184 0%, var(--coral) 52%, #E4503F 100%);
}

/* A gold-rimmed surface: fill paints to the padding box, rim to the border box. */
.hud-rimmed {
  border: 2px solid transparent;
  background: var(--forest-face) padding-box, var(--rim) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 228, 0.22),
    0 2px 5px rgba(6, 28, 22, 0.4);
}

/* --- Title (resort serif) --- */

.hud-chrome-title,
.hud-chrome h1 {
  margin: 0;
  font-family: var(--hud-font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--gold-hi);
  -webkit-text-stroke: 0.6px var(--gold-deep);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 #fff6d0,
    0 2px 0 var(--gold),
    0 3px 0 var(--gold-deep),
    0 5px 0 var(--forest-ink),
    0 10px 20px rgba(0, 0, 0, 0.4);
}

/* --- 1. Coin balance pill --- */

.hud-coin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.75rem 0.2rem 0.2rem;
  border-radius: 999px;
  border: 2.5px solid transparent;
  background: var(--forest-face) padding-box, var(--rim) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 228, 0.25),
    inset 0 -3px 8px rgba(6, 28, 22, 0.5),
    0 2px 6px rgba(6, 28, 22, 0.45);
  white-space: nowrap;
}

.hud-coin-icon {
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 26%, #fff6d4 0%, var(--gold) 52%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 -2px 3px rgba(90, 68, 8, 0.45),
    inset 0 2px 2px rgba(255, 255, 255, 0.5),
    0 0 0 1.5px var(--gold-deep);
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 0.86rem;
  color: #6B520E;
  text-shadow: 0 1px 0 rgba(255, 246, 212, 0.7);
}

.hud-coin-num {
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--cream-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(6, 28, 22, 0.75), 0 0 6px rgba(255, 233, 168, 0.25);
}

.hud-coin-plus {
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--gold-hi);
  text-shadow: 0 1px 0 rgba(6, 28, 22, 0.7);
}

/* --- 2. Stake tier chip (hexagon) ---
   clip-path clips the border too, so the rim is the outer element's
   background and the face is an inner layer inset inside the same shape. */

.hud-hex {
  --hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(6, 28, 22, 0.45));
  transition: transform 0.12s ease;
}

.hud-hex-shape {
  display: block;
  clip-path: var(--hex);
  background: var(--rim);
  padding: 2px;
}

.hud-hex-face {
  display: block;
  clip-path: var(--hex);
  background: var(--forest-face);
  padding: 0.34rem 1.15rem;
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 0.82rem;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(6, 28, 22, 0.8);
}

.hud-hex:hover:not(:disabled) { transform: translateY(-1px); }
.hud-hex[aria-pressed="true"],
.hud-hex.active { transform: scale(1.1); z-index: 1; }
.hud-hex[aria-pressed="true"] .hud-hex-face,
.hud-hex.active .hud-hex-face {
  background: var(--coral-face);
  color: #fff;
}
.hud-hex:disabled { cursor: not-allowed; filter: none; opacity: 0.38; }

/* --- 3. Variance ---
   Colour is the tier's identity, not its selected state, so selection is
   carried by lift and a gold halo instead of a colour change. */

.hud-var {
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.32rem 0.9rem;
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 0.78rem;
  cursor: pointer;
  background: var(--forest-face) padding-box, var(--rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(6, 28, 22, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}

.hud-var[data-var="steady"] {
  background: linear-gradient(180deg, #A6BC9F, var(--sage) 55%, #6F8A6B) padding-box,
              var(--rim) border-box;
  color: var(--cream-hi);
  text-shadow: 0 1px 0 rgba(40, 60, 40, 0.5);
}
.hud-var[data-var="standard"] {
  background: linear-gradient(180deg, var(--cream-hi), var(--cream) 55%, #E6DCC2) padding-box,
              var(--rim) border-box;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.hud-var[data-var="bold"] {
  background: var(--coral-face) padding-box, var(--rim) border-box;
  color: #fff;
  text-shadow: 0 1px 0 rgba(150, 40, 30, 0.6);
}

.hud-var:hover:not(:disabled) { transform: translateY(-1px); }
.hud-var[aria-pressed="true"],
.hud-var.active {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(255, 233, 168, 0.55),
    0 3px 8px rgba(6, 28, 22, 0.45);
}
.hud-var:disabled { opacity: 0.38; cursor: not-allowed; }

/* --- 4. Shuffle remaining badge (shield) --- */

.hud-shield {
  --shield: polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 2px 3px rgba(6, 28, 22, 0.5));
}

.hud-shield-shape {
  display: block;
  clip-path: var(--shield);
  background: var(--rim);
  padding: 2px;
}

.hud-shield-face {
  display: grid;
  place-items: center;
  clip-path: var(--shield);
  background: var(--forest-face);
  padding: 0.22rem 0.5rem 0.55rem;
  min-width: 2.3rem;
  font-family: var(--hud-font-num);
  line-height: 1;
  color: var(--cream-hi);
}

.hud-shield-num {
  font-weight: 900;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(6, 28, 22, 0.8);
}

.hud-shield-label {
  font-weight: 800;
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  opacity: 0.85;
}

/* --- 5. Primary CTA --- */

.hud-cta {
  border: 2.5px solid transparent;
  border-radius: 14px;
  padding: 0.6rem 1.3rem;
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #fff;
  cursor: pointer;
  background: var(--coral-face) padding-box, var(--rim) border-box;
  text-shadow: 0 1px 0 rgba(150, 40, 30, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 0 #B03A2E,
    0 6px 12px rgba(6, 28, 22, 0.4);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hud-cta--green {
  background: var(--forest-face) padding-box, var(--rim) border-box;
  text-shadow: 0 1px 0 rgba(6, 28, 22, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 228, 0.28),
    0 4px 0 #0A2E24,
    0 6px 12px rgba(6, 28, 22, 0.4);
}
.hud-cta:hover:not(:disabled) { filter: brightness(1.06); }
.hud-cta:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 #B03A2E;
}
.hud-cta--green:active:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 248, 228, 0.28), 0 1px 0 #0A2E24;
}
.hud-cta:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* --- 6. Secondary ghost --- */

.hud-ghost {
  border: 2px dashed rgba(212, 175, 55, 0.7);
  border-radius: 12px;
  padding: 0.5rem 1.1rem;
  background: rgba(247, 243, 233, 0.9);
  color: #6F8A6B;
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 0.86rem;
  cursor: pointer;
}
.hud-ghost:hover:not(:disabled) { background: var(--cream-hi); }
.hud-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- 7. Streak --- */

.hud-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold-hi);
  white-space: nowrap;
}
.hud-streak-flame { font-size: 0.85rem; line-height: 1; filter: saturate(1.2); }
.hud-streak[data-streak="0"] { color: rgba(247, 243, 233, 0.45); }
.hud-streak[data-streak="0"] .hud-streak-flame { filter: grayscale(1); opacity: 0.5; }

/* --- 9 / 12. Circular icon button --- */

.hud-round {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--forest-face) padding-box, var(--rim) border-box;
  color: var(--gold-hi);
  display: grid;
  place-items: center;
  font-family: var(--hud-font-num);
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 228, 0.25),
    0 2px 5px rgba(6, 28, 22, 0.4);
  transition: transform 0.1s ease;
}
.hud-round:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); }
.hud-round:active:not(:disabled) { transform: translateY(1px); }
.hud-round:disabled { opacity: 0.38; cursor: not-allowed; }

/* --- Board felt --- */

.hud-chrome-felt {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(47, 107, 90, 0.5), transparent 70%),
    linear-gradient(180deg, var(--felt-hi), var(--felt));
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* --- Focus --- */

.hud-chrome :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hud-hex, .hud-var, .hud-cta, .hud-round { transition: none; }
}