/* =========================================================
   Pixel Study — global styles
   Modern pixel art aesthetic: vibrant, sharp, juicy
   ========================================================= */

:root {
  /* Palette — vibrant pixel game */
  --bg-0: #0d0a1f;            /* deep midnight */
  --bg-1: #1a1338;            /* panel */
  --bg-2: #2a1f5c;            /* elevated */
  --bg-3: #3d2b80;            /* highlight */
  --ink-0: #f5f1ff;           /* primary text */
  --ink-1: #c4b5e8;           /* secondary text */
  --ink-2: #8678b8;           /* muted */

  --violet: #a35dff;          /* primary */
  --violet-deep: #6b2fc4;
  --cyan: #4de2ff;            /* accent */
  --pink: #ff5cae;            /* hot accent */
  --gold: #ffcc3a;            /* xp / coins */
  --mint: #4dffaa;            /* easy / correct */
  --red: #ff5570;             /* hard / danger */
  --orange: #ff8a3d;          /* warning / streak */

  --pixel: 3px;               /* base pixel unit */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #08060f;
  font-family: 'Silkscreen', 'Press Start 2P', monospace;
  color: var(--ink-0);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  user-select: none;
}

#root {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 20%, #1a0f3a 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, #2a0f4a 0%, transparent 60%),
    #050310;
}

/* Pixel-perfect rendering */
.pixel, .pixel * {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Typography helpers */
.font-display {
  font-family: 'Press Start 2P', 'Silkscreen', monospace;
  letter-spacing: 0;
  line-height: 1.4;
}
.font-ui {
  font-family: 'Silkscreen', monospace;
  letter-spacing: 0.02em;
}
.font-body {
  font-family: 'VT323', 'Silkscreen', monospace;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
}

/* Reusable pixel button — hard-edged shadow, no gradients */
.pxbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 3px solid #0a0618;
  background: var(--violet);
  color: #fff;
  font-family: 'Silkscreen', monospace;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.3),
    inset 0 4px 0 rgba(255,255,255,0.15),
    0 4px 0 #0a0618;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  user-select: none;
}
.pxbtn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.15),
    0 0 0 #0a0618;
}
.pxbtn.ghost {
  background: transparent;
  color: var(--ink-0);
  box-shadow: inset 0 0 0 3px var(--ink-2), 0 4px 0 #0a0618;
  border: 3px solid #0a0618;
}
.pxbtn.cyan { background: var(--cyan); color: #0a0618; }
.pxbtn.pink { background: var(--pink); }
.pxbtn.gold { background: var(--gold); color: #0a0618; }
.pxbtn.mint { background: var(--mint); color: #0a0618; }
.pxbtn.red  { background: var(--red); }

/* Pixel-style panel */
.pxpanel {
  background: var(--bg-1);
  border: 3px solid #0a0618;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.4),
    inset 0 4px 0 rgba(255,255,255,0.06),
    0 4px 0 #0a0618;
}

/* Scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Keyframes */
@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}
@keyframes rise {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 8px; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold); }
  50% { box-shadow: 0 0 24px 4px var(--gold); }
}
@keyframes flyUp {
  0% { opacity: 1; transform: translate(var(--fx, 0), 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--fx, 0), -60px) scale(1.4); }
}
@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes typeIn {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes pressStart {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes demoSwipeRight {
  0%, 20% { transform: translateX(0) rotate(0); opacity: 1; }
  60% { transform: translateX(200px) rotate(20deg); opacity: 1; }
  62%, 100% { transform: translateX(200px) rotate(20deg); opacity: 0; }
}
@keyframes demoSwipeLeft {
  0%, 20% { transform: translateX(0) rotate(0); opacity: 1; }
  60% { transform: translateX(-200px) rotate(-20deg); opacity: 1; }
  62%, 100% { transform: translateX(-200px) rotate(-20deg); opacity: 0; }
}
@keyframes coinPop {
  0% { transform: scale(0) translateY(0); opacity: 1; }
  60% { transform: scale(1.4) translateY(-8px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes marqueeIn {
  0% { letter-spacing: 1em; opacity: 0; }
  100% { letter-spacing: 0.02em; opacity: 1; }
}

.shake { animation: shake 200ms ease-out; }

/* CRT/scanline overlay (subtle) */
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  z-index: 100;
  mix-blend-mode: multiply;
}

/* Pixel hearts (for hearts/lives) — drawn via background */
.pixel-heart {
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle at 30% 35%, var(--red) 50%, transparent 50%),
    radial-gradient(circle at 70% 35%, var(--red) 50%, transparent 50%);
  position: relative;
}

/* Progress bar — chunky pixel style */
.pxbar {
  position: relative;
  height: 14px;
  background: #0a0618;
  border: 2px solid #0a0618;
  overflow: hidden;
}
.pxbar > .fill {
  height: 100%;
  background: var(--gold);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 3px 0 rgba(255,255,255,0.2);
  transition: width 400ms cubic-bezier(.2,.7,.3,1);
}

/* Coin pixel icon */
.coin {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow:
    inset -2px -2px 0 rgba(0,0,0,0.3),
    inset 2px 2px 0 rgba(255,255,255,0.4);
  position: relative;
  flex-shrink: 0;
}

/* Diamond pixel icon */
.gem {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--cyan);
  transform: rotate(45deg);
  box-shadow:
    inset -2px -2px 0 rgba(0,0,0,0.3),
    inset 2px 2px 0 rgba(255,255,255,0.4);
}

/* Star pixel icon (simple) */
.star {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--gold);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* Avatar pixel sprite — generic block */
.sprite {
  display: inline-block;
  background-size: cover;
  image-rendering: pixelated;
}

/* Floating text (combo, +xp) */
.float-text {
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #0a0618;
  pointer-events: none;
  animation: flyUp 800ms ease-out forwards;
}

/* Phone-shaped shell — fills the viewport on phones, centers a phone column on desktop */
.app-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-0);
}
@media (min-width: 500px) {
  .app-shell {
    width: 412px;
    height: min(892px, calc(100vh - 32px));
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  }
}

/* App container — the actual phone screen content */
.app-screen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink-0);
}

/* Card flip / fade */
.card-3d {
  position: relative;
}
.card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
}