/* ============================================================
   OPTIMUS — Global stylesheet (static version)
   Ported from app/globals.css + tailwind.config.js theme.
   Tailwind utility classes come from the CDN; this file holds
   everything custom: kawaii background, stickers, facet cards,
   gradient text, accent colors, status pills.
   ============================================================ */

/* ---------- Theme variables (from tailwind.config.js) ---------- */
:root {
  --ink: #FFF0F5;       /* soft blush-pink page base */
  --inktext: #5B3A4A;   /* deep plum body text */
  --panel: #FFFFFF;
  --panel2: #FFE3EE;
  --line: #FBC2D9;
  --gem: #FF6FA8;       /* bubblegum pink */
  --gold: #F5B84B;
  --magenta: #E0459A;
  --violet: #B48CFB;
  --ash: #9B7B94;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Noto Sans Khmer", sans-serif;
}

.font-display {
  font-family: "Rajdhani", "Noto Sans Khmer", sans-serif;
}

/* ---------- Kawaii pastel-pink animated background ---------- */
.bg-tech {
  background-color: #FFF0F5;
  background-image:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(255,111,168,0.35) 0%, rgba(255,240,245,0) 55%),
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(180,140,251,0.28) 0%, rgba(255,240,245,0) 55%),
    radial-gradient(ellipse 50% 45% at 90% 85%, rgba(255,178,217,0.30) 0%, rgba(255,240,245,0) 55%),
    radial-gradient(ellipse 55% 45% at 8% 90%, rgba(245,184,75,0.20) 0%, rgba(255,240,245,0) 55%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,111,168,0.10) 0%, rgba(255,240,245,0) 60%),
    radial-gradient(rgba(255,111,168,0.18) 2px, transparent 2px);
  background-size: 140% 140%, 140% 140%, 140% 140%, 140% 140%, 140% 140%, 28px 28px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, center;
  animation: tech-bg-drift 24s ease-in-out infinite;
}

@keyframes tech-bg-drift {
  0%   { background-position: 0% 0%,   100% 0%,  100% 100%, 0% 100%, 50% 50%, center; }
  50%  { background-position: 10% 8%,  92% 10%,   90% 90%,  8% 92%, 55% 45%, center; }
  100% { background-position: 0% 0%,   100% 0%,  100% 100%, 0% 100%, 50% 50%, center; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-tech { animation: none; }
}

/* ---------- Floating kawaii stickers layer ---------- */
.sticker-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

.sticker {
  position: absolute;
  font-size: 2rem;
  filter: drop-shadow(0 2px 6px rgba(224, 69, 154, 0.25));
  animation: sticker-float 6s ease-in-out infinite;
  user-select: none;
}

@keyframes sticker-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-14px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sticker { animation: none; }
}

/* ---------- Faceted diamond corner-cut card ---------- */
.facet-card {
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

::selection {
  background: #3de0c8;
  color: #0b0f1a;
}

:focus-visible {
  outline: 2px solid #3de0c8;
  outline-offset: 2px;
}

/* ---------- Bright multi-color gradient headline ---------- */
.text-gradient-tech {
  background: linear-gradient(
    90deg,
    #ff6fa8 0%,
    #ff9ecb 22%,
    #f5b84b 45%,
    #e0459a 68%,
    #b48cfb 88%,
    #ff6fa8 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 111, 168, 0.35)) drop-shadow(0 0 28px rgba(224, 69, 154, 0.2));
  animation: tech-gradient-shift 6s ease-in-out infinite;
}

@keyframes tech-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .text-gradient-tech { animation: none; }
}

/* ---------- Per-game accent colors ----------
   Used instead of dynamically-built Tailwind classes so the
   storefront works even if the CDN is slow/blocked. */
.acc-gem     { color: var(--gem); }
.acc-gold    { color: var(--gold); }
.acc-magenta { color: var(--magenta); }
.acc-violet  { color: var(--violet); }

.game-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(224, 69, 154, 0.16);
}
.game-card[data-accent="gem"]     { border-color: rgba(255,111,168,0.35); }
.game-card[data-accent="gem"]:hover     { border-color: var(--gem); box-shadow: 0 10px 26px rgba(255,111,168,0.22); }
.game-card[data-accent="magenta"] { border-color: rgba(224,69,154,0.35); }
.game-card[data-accent="magenta"]:hover { border-color: var(--magenta); box-shadow: 0 10px 26px rgba(224,69,154,0.22); }
.game-card[data-accent="gold"]    { border-color: rgba(245,184,75,0.35); }
.game-card[data-accent="gold"]:hover    { border-color: var(--gold); box-shadow: 0 10px 26px rgba(245,184,75,0.22); }
.game-card[data-accent="violet"]  { border-color: rgba(180,140,251,0.35); }
.game-card[data-accent="violet"]:hover  { border-color: var(--violet); box-shadow: 0 10px 26px rgba(180,140,251,0.25); }

.pkg-card:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(245, 184, 75, 0.18);
}

/* ---------- Status pills (admin dashboard / order page) ---------- */
.pill {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
}
.pill-pending { background: rgba(245,184,75,0.20); color: #B97E1E; }
.pill-paid    { background: rgba(255,111,168,0.20); color: #D14A87; }
.pill-fulfilled { background: rgba(255,111,168,0.30); color: #C13A78; }
.pill-cancelled { background: rgba(224,69,154,0.18); color: #C13A78; }

/* ---------- Small helpers ---------- */
.hidden-step { display: none !important; }

.btn-primary {
  background: var(--gem);
  color: var(--ink);
  font-family: "Rajdhani", "Noto Sans Khmer", sans-serif;
  font-weight: 700;
  transition: opacity 0.15s ease;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  font-family: "Rajdhani", "Noto Sans Khmer", sans-serif;
  font-weight: 700;
}
.btn-gold:hover { opacity: 0.9; }

.btn-outline {
  border: 1px solid var(--line);
  transition: border-color 0.15s ease;
}
.btn-outline:hover { border-color: var(--gem); }

.input-field {
  background: var(--panel);
  border: 1px solid var(--line);
  outline: none;
  transition: border-color 0.15s ease;
}
.input-field:focus { border-color: var(--gem); }
.input-field-alt {
  background: var(--panel2);
  border: 1px solid var(--line);
  outline: none;
  transition: border-color 0.15s ease;
}
.input-field-alt:focus { border-color: var(--gem); }