/* ==========================================================================
   CloudGraft v3.2.11 — Player Application Styles (dist/css/app.css)
   Defines base canvas typography, clickable HCL AST code tokens, scrollbar
   suppression, and GPU-composited XP float-up / round-summary animations.
   ========================================================================== */

/* Hide uncompiled Vue template bindings prior to root mount */
[v-cloak] {
  display: none !important;
}

/* Base obsidian canvas and typography defaults */
body {
  background-color: var(--cg-bg-obsidian, #070a12);
  color: #f1f5f9;
  font-family: var(--cg-font-sans, 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Monospace stack for Cyber-IDE code panes and HCL snippets */
.code-font {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Interactive clickable AST syntax tokens for token-selection challenges */
.ast-token {
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid transparent;
  display: inline-block;
}
.ast-token:hover {
  background-color: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  color: #e0f2fe;
}
.ast-token-selected {
  background-color: rgba(16, 185, 129, 0.28) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4);
}

/* Cross-browser hidden scrollbars for horizontal tab strips */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Settings drawer entrance transition */
@keyframes settingsPanelFadeInUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.settings-panel-fade-in-up {
  animation: settingsPanelFadeInUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating +XP delta badge keyframe animation on correct submissions */
@keyframes xpFloatUpAndFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.82);
    filter: blur(2px);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 0px) scale(1.06);
    filter: blur(0px);
  }
  70% {
    opacity: 0.95;
    transform: translate(-50%, -46px) scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -88px) scale(0.94);
    filter: blur(1.5px);
  }
}
.xp-float-up-animation {
  animation: xpFloatUpAndFade 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity, filter;
}

/* Round summary score counter motion-blur emphasis */
.summary-counter-num {
  display: inline-block;
  transition: filter 0.14s ease, transform 0.14s ease;
  will-change: filter, transform;
}
.summary-counter-motion-blur {
  filter: blur(1.8px);
  transform: scale(1.05);
}

/* Streak and bonus row entrance slide animation */
@keyframes bonusSlideInLeftToRight {
  0% {
    opacity: 0;
    transform: translateX(-32px);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }
}
.bonus-slide-in-ltr {
  animation: bonusSlideInLeftToRight 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity, filter;
}