@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* Theme CSS custom properties are now engine-generated via studio_theme_css_tag */

@layer components {
  .card {
    @apply bg-surface rounded-xl border border-subtle;
  }
  .card-hover {
    @apply bg-surface rounded-xl border border-subtle hover:border-primary-700/50 hover:shadow-lg hover:shadow-primary-900/10 transition;
  }
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border;
  }
  .input-field {
    @apply w-full bg-surface-alt border border-strong rounded-lg px-4 py-3 text-heading focus:border-primary focus:outline-none;
  }
  .empty-state {
    @apply bg-surface rounded-xl border border-subtle p-8 text-center;
  }
  .json-debug {
    @apply bg-inset rounded-xl border border-subtle p-4 overflow-x-auto;
  }
  .label-upper {
    @apply text-xs text-muted uppercase tracking-wider;
  }

  /* -- Button System (standardized across all Studio apps) -- */
  .btn {
    @apply inline-flex items-center justify-center font-bold rounded-lg transition px-6 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply text-white;
    background-color: var(--color-cta);
  }
  .btn-primary:hover {
    background-color: var(--color-cta-hover);
  }
  .btn-secondary {
    @apply bg-violet hover:bg-violet-600 text-white;
  }
  .btn-outline {
    @apply bg-transparent border text-heading;
    border-color: var(--color-cta);
  }
  .btn-outline:hover {
    @apply text-white;
    background-color: var(--color-cta);
  }
  .btn-danger {
    @apply text-white;
    background-color: var(--color-danger);
  }
  .btn-danger:hover {
    filter: brightness(0.9);
  }
  .btn-warning {
    @apply text-white;
    background-color: var(--color-warning);
  }
  .btn-warning:hover {
    filter: brightness(0.9);
  }
  .btn-success {
    @apply text-white;
    background-color: var(--color-success);
  }
  .btn-success:hover {
    filter: brightness(0.9);
  }
  .btn-google {
    @apply bg-white border border-strong shadow-sm;
    color: #374151;
  }
  .btn-google:hover {
    @apply bg-gray-50;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  .btn-lg {
    @apply px-8 py-3 text-base rounded-xl shadow;
  }

  .backdrop-overlay {
    backdrop-filter: blur(2px) brightness(0.7);
    -webkit-backdrop-filter: blur(2px) brightness(0.7);
    background: rgb(var(--color-primary-900-rgb, 58 51 89) / 0.2);
  }

  .seeds-invite-row .card {
    margin-bottom: 0;
    height: 100%;
  }

  /* ── Hold Button Component ── */
  .hold-btn {
    --duration: 2000ms;
    --color: #F6F8FF;
    --bg: var(--color-cta);
    --shadow: rgba(0, 61, 9, 0.2);
    --shadow-active: rgba(0, 61, 9, 0.32);
    --progress-border: var(--color-inset, #3a3359);
    --progress-active: #F6F8FF;
    --progress-success: #06D6A0;
    --tick-stroke: var(--progress-active);

    position: relative;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    padding: 14px 32px;
    width: 100%;
    border: 0;
    border-radius: 12px;
    outline: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;
    color: var(--color);
    background: var(--bg);
    transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
    transform: scale(var(--scale, 1));
    border: 1px solid rgb(var(--color-primary-rgb) / 0.5);
    box-shadow: 0 0 20px rgb(var(--color-primary-rgb) / 0.25);
  }
  .hold-btn.nudge { animation: hold-nudge 0.5s ease-in-out 1; }
  .hold-btn.nudge-soft { animation: hold-nudge-soft 0.4s ease-in-out 1; }

  /* Progress circle */
  .hold-btn > .hold-icon {
    position: absolute; top: 50%; left: 14px;
    width: 20px; height: 20px; margin-top: -10px;
    border-radius: 50%; background: var(--progress-border);
    opacity: var(--icon-o, 0);
    transform: translateX(var(--icon-x, -4px));
    transition: transform .3s, opacity .2s;
  }
  .hold-btn > .hold-icon::before {
    content: ''; width: 16px; height: 16px; left: 2px; top: 2px; z-index: 1;
    position: absolute; background: var(--bg); border-radius: inherit;
    transform: scale(var(--bg-scale, 1)); transition: transform .32s ease;
  }
  .hold-btn > .hold-icon svg { display: block; fill: none; width: 20px; height: 20px; }
  .hold-btn > .hold-icon svg.progress {
    transform: rotate(-90deg) scale(var(--progress-scale, 1)); transition: transform .5s ease;
  }
  .hold-btn > .hold-icon svg.progress circle {
    stroke-dashoffset: 1; stroke-dasharray: var(--progress-array, 0) 52;
    stroke-width: 16; stroke: var(--progress-active);
    transition: stroke-dasharray var(--duration) linear;
  }
  .hold-btn > .hold-icon svg.tick {
    position: absolute; left: 0; top: 0; stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round; stroke: var(--tick-stroke);
    transition: stroke .3s ease .7s;
  }
  .hold-btn > .hold-icon svg.tick polyline {
    stroke-dasharray: 18 18 18; stroke-dashoffset: var(--tick-offset, 18);
    transition: stroke-dashoffset .4s ease .7s;
  }

  /* Sliding text */
  .hold-btn .hold-text {
    margin: 0; padding: 0; list-style: none; text-align: center;
    pointer-events: none; position: relative; backface-visibility: hidden;
    transition: transform .3s; transform: translate3d(var(--ul-x, 0), 0, 0);
  }
  .hold-btn .hold-text li {
    backface-visibility: hidden; transform: translateY(var(--ul-y, 0));
    transition: transform .3s ease .16s, opacity .2s ease .16s;
  }
  .hold-btn .hold-text li:not(:first-child) { position: absolute; left: 0; right: 0; }
  .hold-btn .hold-text li:nth-child(1) { top: 0; opacity: var(--ul-o-1, 1); }
  .hold-btn .hold-text li:nth-child(2) { top: 100%; opacity: var(--ul-o-2, 0); }
  .hold-btn .hold-text li:nth-child(3) { top: 200%; opacity: var(--ul-o-3, 0); }
  .hold-btn .hold-text li:nth-child(4) { top: 300%; opacity: var(--ul-o-4, 0); }

  /* State: hover */
  .hold-btn:hover:not(.process):not(.success) {
    --shadow-color: var(--shadow-active);
    filter: brightness(0.92);
    border-color: rgb(var(--color-primary-rgb) / 0.7);
    box-shadow: 0 0 30px rgb(var(--color-primary-rgb) / 0.4);
  }
  .hold-btn:active:not(.success) { --scale: .97; }
  .hold-btn.process, .hold-btn.success { animation: none; }

  /* State: process (holding) */
  .hold-btn.process {
    --icon-x: 0; --ul-y: -100%; --ul-o-1: 0; --ul-o-2: 1; --ul-o-3: 0;
    --bg: var(--color-page, #1e1b35);
    border-color: rgba(6, 214, 160, 0.7);
    box-shadow: 0 0 30px rgba(6, 214, 160, 0.45), 0 0 80px rgba(6, 214, 160, 0.25),
                0 0 120px rgba(6, 214, 160, 0.1), inset 0 0 40px rgba(6, 214, 160, 0.1);
    transition: transform .3s, box-shadow 2.5s ease-out, border-color 1s, background .5s;
  }
  .hold-btn.process, .hold-btn.success {
    --ul-x: 8px; --icon-o: 1; --progress-array: 52;
  }

  /* State: success */
  .hold-btn.success {
    --scale: 1.03; --icon-x: 6px; --progress-border: none; --progress-scale: .11;
    --tick-stroke: var(--progress-success); --bg-scale: 0; --tick-offset: 36;
    --ul-y: -200%; --ul-o-1: 0; --ul-o-2: 0; --ul-o-3: 1;
    border-color: #06D6A0;
    background: linear-gradient(135deg, #025e40, #06D6A0);
    --color: #fff;
    box-shadow: 0 0 40px rgba(6, 214, 160, 0.7), 0 0 100px rgba(6, 214, 160, 0.4),
                0 0 160px rgba(6, 214, 160, 0.15);
    animation: hold-glow-pulse .8s ease-in-out 1;
  }
  .hold-btn.success > .hold-icon svg.progress { animation: hold-tick .3s linear forwards .4s; }

  /* State: error */
  .hold-btn.error {
    --ul-x: 0; --icon-o: 0; --ul-y: -300%;
    --ul-o-1: 0; --ul-o-2: 0; --ul-o-3: 0; --ul-o-4: 1;
    --bg: var(--color-danger, #EF4444);
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
    animation: none; cursor: default;
  }

  /* Debug nudge countdown */
  .nudge-debug {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; pointer-events: none; display: none;
  }
  .dev-mode .nudge-debug { display: block; }
  .nudge-debug svg { width: 24px; height: 24px; transform: rotate(-90deg); }
  .nudge-debug svg circle.track { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 3; }
  .nudge-debug svg circle.fill {
    fill: none; stroke: var(--color-cta, #8E82FE); stroke-width: 3;
    stroke-linecap: round; stroke-dasharray: 56.55; stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.3s linear;
  }
  .nudge-debug .countdown-num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: #F6F8FF; font-family: ui-monospace, monospace;
  }
  .hold-btn.process .nudge-debug, .hold-btn.success .nudge-debug { opacity: 0; }

  /* ── Dev Mode Debug Colors ── */
  .dev-mode .dm-blue     { background: rgba(100, 149, 237, 0.75) !important; } /* cornflowerblue */
  .dev-mode .dm-green    { background: rgba(144, 238, 144, 0.75) !important; } /* lightgreen */
  .dev-mode .dm-orange   { background: rgba(244, 164, 96, 0.75) !important; } /* sandybrown */
  .dev-mode .dm-salmon   { background: rgba(250, 128, 114, 0.75) !important; } /* lightsalmon */
  .dev-mode .dm-purple   { background: rgba(128, 0, 128, 0.75) !important; } /* purple */
  .dev-mode .dm-coral    { background: rgba(240, 128, 128, 0.75) !important; } /* lightcoral */
  .dev-mode .dm-yellow   { background: rgba(240, 230, 140, 0.75) !important; } /* khaki */
  .dev-mode .dm-teal     { background: rgba(175, 238, 238, 0.75) !important; } /* paleturquoise */

  /* Nav level-up bounce (shared by _user_nav and _navbar_seeds_bar) */
  .nav-level-pop { animation: navLevelPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }

  .matchup-selected {
    outline: 3px solid rgb(var(--color-primary-rgb));
    outline-offset: -3px;
    background-color: rgb(var(--color-primary-rgb) / 0.05);
    box-shadow: 0 0 20px 4px rgb(var(--color-primary-rgb) / 0.35);
  }

  /* Theme transition (applied during toggle) */
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
  }
}

@keyframes navLevelPop {
  0% { transform: scale(1); }
  15% { transform: scale(1.5); }
  35% { transform: scale(1.2); }
  50% { transform: scale(1.4); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes progress-countdown {
  from { width: 100%; }
  to { width: 0%; }
}
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-3px) rotate(-1deg); }
  30% { transform: translateX(3px) rotate(1deg); }
  45% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}
.shake { animation: card-shake 0.4s ease-out; }

/* Hold button animations */
@keyframes hold-tick {
  100% { transform: rotate(-90deg) translate(0, -5px) scale(var(--progress-scale)); }
}
@keyframes hold-glow-pulse {
  50% { box-shadow: 0 0 60px rgba(6, 214, 160, 0.9), 0 0 140px rgba(6, 214, 160, 0.5), 0 0 200px rgba(6, 214, 160, 0.2); }
}
@keyframes hold-nudge {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.06) rotate(-2deg); }
  30% { transform: scale(1.06) rotate(2deg); }
  45% { transform: scale(1.04) rotate(-1.5deg); }
  60% { transform: scale(1.03) rotate(1deg); }
  75% { transform: scale(1.02) rotate(-0.5deg); }
  90% { transform: scale(1.01) rotate(0.3deg); }
}
@keyframes hold-nudge-soft {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.03) rotate(-1deg); }
  40% { transform: scale(1.03) rotate(1deg); }
  60% { transform: scale(1.02) rotate(-0.5deg); }
  80% { transform: scale(1.01) rotate(0.5deg); }
}

/* Seeds bar animations */
@keyframes seedsBarGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(var(--color-primary-500-rgb), 0.3); }
  50% { box-shadow: 0 0 14px rgba(var(--color-primary-500-rgb), 0.6); }
}
@keyframes seedsShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
/* Pulse variant: shine happens in first 25% of duration, then idles. animation-duration controls the cycle interval. */
@keyframes seedsShimmerPulse {
  0%   { transform: translateX(-100%); }
  25%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}
/* Lobby button countdown — drains a fill from full to empty over animation-duration */
@keyframes lobby-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/* Registered custom property — makes --bar-progress interpolatable so a single transition drives all 5 segment widths in lockstep (one ease curve, not 5 chained). */
@property --bar-progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}
.seeds-bar-continuous {
  --bar-progress: 0;
  transition: --bar-progress 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes levelPop {
  0% { transform: scale(1) rotate(0deg); }
  12% { transform: scale(3.2) rotate(-4deg); }
  28% { transform: scale(2.4) rotate(3deg); }
  42% { transform: scale(2.8) rotate(-1.5deg); }
  60% { transform: scale(2.2) rotate(1deg); }
  78% { transform: scale(1.3) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes levelGlow {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb), 0.9); }
  25% { box-shadow: 0 0 40px 16px rgba(var(--color-primary-500-rgb), 0.7); }
  50% { box-shadow: 0 0 25px 10px rgba(var(--color-primary-500-rgb), 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb), 0); }
}
.level-up-pop {
  animation: levelPop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), levelGlow 1.4s ease-out;
  z-index: 10;
}

/* Pick slot attention animations */
@keyframes pick-pulse {
  0%, 100% { border-color: rgb(var(--color-primary-rgb) / 0.2); box-shadow: 0 0 0 0 rgb(var(--color-primary-rgb) / 0); }
  50% { border-color: rgb(var(--color-primary-rgb) / 0.9); box-shadow: 0 0 14px 3px rgb(var(--color-primary-rgb) / 0.3); }
}
.pick-pulse {
  animation: pick-pulse 2s ease-in-out infinite;
  border-style: solid;
}

@keyframes pick-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pick-pulse-shimmer {
  animation: pick-pulse 2s ease-in-out infinite, pick-shimmer 3s ease-in-out infinite;
  border-style: solid;
  background-size: 200% 100%;
  background-image: linear-gradient(
    120deg,
    transparent 25%,
    rgb(var(--color-primary-rgb) / 0.1) 45%,
    rgb(var(--color-primary-rgb) / 0.2) 50%,
    rgb(var(--color-primary-rgb) / 0.1) 55%,
    transparent 75%
  );
}

@keyframes pick-pulse-urgent {
  0%, 100% { border-color: rgb(var(--color-primary-rgb) / 0.3); box-shadow: 0 0 0 0 rgb(var(--color-primary-rgb) / 0); transform: scale(1); }
  50% { border-color: rgb(var(--color-primary-rgb) / 1); box-shadow: 0 0 20px 6px rgb(var(--color-primary-rgb) / 0.45); transform: scale(1.04); }
}
@keyframes pick-shimmer-fast {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pick-pulse-urgent {
  animation: pick-pulse-urgent 1s ease-in-out infinite, pick-shimmer-fast 1.5s ease-in-out infinite;
  border-style: solid;
  background-size: 200% 100%;
  background-image: linear-gradient(
    120deg,
    transparent 20%,
    rgb(var(--color-primary-rgb) / 0.15) 40%,
    rgb(var(--color-primary-rgb) / 0.3) 50%,
    rgb(var(--color-primary-rgb) / 0.15) 60%,
    transparent 80%
  );
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.wallet-badge {
  top: 20px;
  font-size: 8px;
}