/* Shared interaction and theme tokens for TigroPlay games. Game styles own layout and art. */
:root {
  --tp-forest: #173b32;
  --tp-canopy: #244d3c;
  --tp-earth: #8f6341;
  --tp-gold: #e3bc67;
  --tp-cream: #f6f0df;
  --tp-ink: #101b19;
  --tp-muted: #a8b7ae;
  --tp-line: rgb(255 255 255 / 14%);
  --tp-focus: #ffda80;
  --tp-radius-card: 18px;
  --tp-radius-control: 12px;
  --tp-shadow-panel: 0 18px 54px rgb(0 0 0 / 32%);
  --tp-ease-out: cubic-bezier(.2, .75, .25, 1);
}

body.tp-ui {
  --tp-accent: var(--tp-gold);
  --tp-surface-glass: rgb(14 32 27 / 76%);
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body.tp-theme-region { --tp-accent: var(--tp-gold); }
body.tp-theme-arcade {
  --tp-accent: #63f7d0;
  --tp-surface-glass: rgb(14 17 33 / 78%);
  --tp-focus: #80fff0;
}

body.tp-ui :is(button, a[role="button"], input, select, summary) {
  touch-action: manipulation;
}

body.tp-ui :is(button, a[role="button"]) {
  transition: transform 160ms var(--tp-ease-out), filter 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body.tp-ui :is(button, a[role="button"]):not(:disabled):hover {
    filter: brightness(1.09);
  }
}

body.tp-ui :is(button, a[role="button"]):not(:disabled):active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.96);
}

body.tp-ui :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--tp-focus);
  outline-offset: 3px;
}

body.tp-ui :is(button, input, select) {
  accent-color: var(--tp-accent);
}

body.tp-ui .tp-button,
body.tp-ui .game-button,
body.tp-ui .game-filter-btn,
body.tp-ui .dest-splash__actions button,
body.tp-ui .turn-bar button {
  min-height: 44px;
}

body.tp-ui .tp-glass {
  background: var(--tp-surface-glass);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-shadow-panel);
  backdrop-filter: blur(16px);
}

body.tp-ui .tp-panel {
  color: var(--tp-cream);
  background: linear-gradient(155deg, color-mix(in srgb, var(--tp-surface-glass), white 5%), var(--tp-surface-glass));
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-shadow-panel);
}

body.tp-ui .tp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .75rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--tp-accent), white 18%);
  border-radius: var(--tp-radius-control);
  color: #171b15;
  background: var(--tp-accent);
  font: inherit;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tp-accent), transparent 82%);
}

body.tp-ui .tp-button--quiet {
  color: var(--tp-cream);
  background: color-mix(in srgb, var(--tp-surface-glass), transparent 10%);
  border-color: var(--tp-line);
  box-shadow: none;
}

body.tp-ui #modal:not(.hidden) > div,
body.tp-ui #dest-modal:not([hidden]) .dest-modal__box,
body.tp-ui dialog[open] {
  animation: tp-modal-in 220ms var(--tp-ease-out) both;
}

body.tp-ui .tp-reward-pop { position: relative; animation: tp-reward-pop 520ms var(--tp-ease-out) both; }
body.tp-ui .tp-reward-pop::after {
  content: "🪙";
  position: absolute;
  top: -.9em;
  right: -.45em;
  pointer-events: none;
  animation: tp-coin-float 720ms var(--tp-ease-out) both;
}
body.tp-ui .tp-skeleton {
  color: transparent !important;
  background: linear-gradient(100deg, #ffffff0a 25%, #ffffff1c 42%, #ffffff0a 62%);
  background-size: 220% 100%;
  animation: tp-skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--tp-radius-control);
}

.tp-filter-status:empty { display: none; }

.tp-hub .game-filter-bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  padding: 10px 0;
  background: linear-gradient(180deg, rgb(13 13 23 / 97%), rgb(13 13 23 / 86%));
  backdrop-filter: blur(14px);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.tp-hub .game-filter-btn {
  min-height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding-inline: 1rem;
}

.tp-hub .game-filter-btn[aria-pressed="true"] {
  color: #1c180f;
  background: var(--tp-gold);
  border-color: var(--tp-gold);
  box-shadow: 0 5px 20px rgb(227 188 103 / 22%);
}

@keyframes tp-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tp-reward-pop {
  0% { opacity: 0; transform: scale(.72); }
  58% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tp-coin-float {
  0% { opacity: 0; transform: translateY(9px) rotate(-18deg) scale(.6); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-23px) rotate(14deg) scale(1.15); }
}

@keyframes tp-skeleton-shimmer {
  to { background-position-x: -220%; }
}

@media (max-width: 640px) {
  .tp-hub .game-filter-bar { margin-inline: -1rem; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.tp-ui *, body.tp-ui *::before, body.tp-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}