/* Generated from the app theme, utilities and shared component. */
.demo-palpite {
  --c-base: 11 10 8; /* #0b0a08 - base quente (= landing) */
  --c-surface: 23 20 16; /* #171410 (= landing surface) */
  --c-elevated: 35 30 23; /* #231e17 (= landing surface-2) */
  --c-border: 66 58 46; /* #423a2e (= landing border) */
  --c-text-primary: 247 245 240; /* #f7f5f0 - branco quente */
  --c-text-secondary: 170 163 152; /* #aaa398 (= landing muted) */
  --c-text-muted: 145 136 120; /* #918878 - metadados (AA em todas as superfícies) */
  --c-accent: 250 204 21; /* #FACC15 amarelo PRF */
  --c-accent-hover: 253 224 71; /* #FDE047 */
  --c-amber: 245 158 11; /* #f59e0b - SÓ glows e sombras coloridas */
  --c-success: 34 197 94; /* #22c55e */
  --c-danger: 248 113 113; /* #f87171 - erros de form/avisos */
  --c-on-accent: 11 10 8; /* texto sobre amarelo é sempre escuro */

  /* OURO METÁLICO - reservado ao símbolo da Missão do Dia e ao selo Elite
     (texto/badge). hi = champanhe (reflexo de luz), deep = bronze (sombra). */
  --gold-hi: 246 227 170; /* #f6e3aa */
  --gold: 226 178 74; /* #e2b24a */
  --gold-deep: 154 111 38; /* #9a6f26 */

  /* ÂMBAR SUAVE - botões de ação (player, CTA da missão). Flat/soft UI:
     tom pastel elegante no lugar do dourado 3D saturado. */
  --c-amber-soft: 214 168 99; /* #d6a863 */
  --c-amber-soft-hover: 226 187 132; /* #e2bb84 */

  /* motion - mesma linguagem da landing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms;
}
.demo-palpite .tag-tactical {
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.demo-palpite .glass {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 40%),
    rgb(var(--c-surface) / 0.72);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.demo-palpite {
  --c-base: 16 23 34;
  --c-surface: 28 40 55;
  --c-elevated: 52 65 80;
  --c-border: 52 66 82;
  --c-text-primary: 246 245 240;
  --c-text-secondary: 176 186 199;
  --c-text-muted: 157 170 188;
  --c-accent: 237 193 90;
  --c-accent-hover: 245 216 130;
  --c-amber: 225 166 63;
  --c-success: 95 203 153;
  --c-on-accent: 16 23 34;
  --gold-hi: 249 224 157;
  --gold: 237 193 90;
  --gold-deep: 157 119 49;
  --c-amber-soft: 237 193 90;
  --c-amber-soft-hover: 245 216 130;
}
.demo-palpite .mb-2 {
    margin-bottom: 0.5rem
}
.demo-palpite .mt-1 {
    margin-top: 0.25rem
}
.demo-palpite .mt-1\.5 {
    margin-top: 0.375rem
}
.demo-palpite .mt-2 {
    margin-top: 0.5rem
}
.demo-palpite .mt-3 {
    margin-top: 0.75rem
}
.demo-palpite .flex {
    display: flex
}
.demo-palpite .inline-flex {
    display: inline-flex
}
.demo-palpite .h-2 {
    height: 0.5rem
}
.demo-palpite .w-2 {
    width: 0.5rem
}
.demo-palpite .w-full {
    width: 100%
}
.demo-palpite .flex-1 {
    flex: 1 1 0%
}
@keyframes pulse {
    50% {
        opacity: .5
    }
}
.demo-palpite .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
@keyframes slide-up {
    from {
        transform: translateY(16px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}
.demo-palpite .animate-slide-up {
    animation: slide-up 200ms ease-out
}
.demo-palpite .items-center {
    align-items: center
}
.demo-palpite .justify-center {
    justify-content: center
}
.demo-palpite .justify-between {
    justify-content: space-between
}
.demo-palpite .gap-1\.5 {
    gap: 0.375rem
}
.demo-palpite .gap-2 {
    gap: 0.5rem
}
.demo-palpite .rounded-2xl {
    border-radius: 1rem
}
.demo-palpite .rounded-full {
    border-radius: 9999px
}
.demo-palpite .border {
    border-width: 1px
}
.demo-palpite .border-border {
    --tw-border-opacity: 1;
    border-color: rgb(var(--c-border) / var(--tw-border-opacity, 1))
}
.demo-palpite .bg-accent {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--c-accent) / var(--tw-bg-opacity, 1))
}
.demo-palpite .bg-elevated {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--c-elevated) / var(--tw-bg-opacity, 1))
}
.demo-palpite .bg-white\/\[0\.07\] {
    background-color: rgb(255 255 255 / 0.07)
}
.demo-palpite .p-2 {
    padding: 0.5rem
}
.demo-palpite .p-4 {
    padding: 1rem
}
.demo-palpite .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.demo-palpite .py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
.demo-palpite .font-mono {
    font-family: ui-monospace, Cascadia Code, JetBrains Mono, Consolas, monospace
}
.demo-palpite .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.demo-palpite .text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
.demo-palpite .font-bold {
    font-weight: 700
}
.demo-palpite .font-medium {
    font-weight: 500
}
.demo-palpite .font-semibold {
    font-weight: 600
}
.demo-palpite .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
.demo-palpite .leading-snug {
    line-height: 1.375
}
.demo-palpite .text-accent {
    --tw-text-opacity: 1;
    color: rgb(var(--c-accent) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-danger {
    --tw-text-opacity: 1;
    color: rgb(var(--c-danger) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-gold {
    --tw-text-opacity: 1;
    color: rgb(var(--gold) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-muted {
    --tw-text-opacity: 1;
    color: rgb(var(--c-text-muted) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-on-accent {
    --tw-text-opacity: 1;
    color: rgb(var(--c-on-accent) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-primary {
    --tw-text-opacity: 1;
    color: rgb(var(--c-text-primary) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-secondary {
    --tw-text-opacity: 1;
    color: rgb(var(--c-text-secondary) / var(--tw-text-opacity, 1))
}
.demo-palpite .text-success {
    --tw-text-opacity: 1;
    color: rgb(var(--c-success) / var(--tw-text-opacity, 1))
}
.demo-palpite .shadow-glow {
    --tw-shadow: 0 10px 34px -10px rgb(var(--c-amber) / 0.45);
    --tw-shadow-colored: 0 10px 34px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.demo-palpite .shadow-glow-btn {
    --tw-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 10px 34px -10px rgb(var(--c-amber) / 0.55);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 10px 34px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.demo-palpite .shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.demo-palpite .outline {
    outline-style: solid
}
.demo-palpite .ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.demo-palpite .ring-inset {
    --tw-ring-inset: inset
}
.demo-palpite .ring-border {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--c-border) / var(--tw-ring-opacity, 1))
}
.demo-palpite .ring-white\/10 {
    --tw-ring-color: rgb(255 255 255 / 0.1)
}
.demo-palpite .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.demo-palpite .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.demo-palpite .duration-200 {
    transition-duration: 200ms
}
.demo-palpite .ease-spring {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)
}
.demo-palpite .hover\:border-accent\/40:hover {
    border-color: rgb(var(--c-accent) / 0.4)
}
.demo-palpite .hover\:bg-accent-hover:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--c-accent-hover) / var(--tw-bg-opacity, 1))
}
.demo-palpite .hover\:bg-border:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--c-border) / var(--tw-bg-opacity, 1))
}
.demo-palpite .hover\:bg-elevated:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--c-elevated) / var(--tw-bg-opacity, 1))
}
.demo-palpite .hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1)
}
.demo-palpite .hover\:text-accent-hover:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--c-accent-hover) / var(--tw-text-opacity, 1))
}
.demo-palpite .hover\:text-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--c-text-primary) / var(--tw-text-opacity, 1))
}
.demo-palpite .hover\:shadow-glow-btn-hover:hover {
    --tw-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 14px 44px -10px rgb(var(--c-amber) / 0.7);
    --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 14px 44px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.demo-palpite .active\:scale-90:active {
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.demo-palpite .active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.demo-palpite .active\:scale-\[0\.97\]:active {
    --tw-scale-x: 0.97;
    --tw-scale-y: 0.97;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.demo-palpite .disabled\:pointer-events-none:disabled {
    pointer-events: none
}
.demo-palpite .disabled\:opacity-40:disabled {
    opacity: 0.4
}