日式RPG

STYLE: JRPG
TYPE: Classic Japanese RPG menu interface

MUST USE:
- Dark background: bg-[#0f172a] or bg-slate-900
- Beveled borders: border-2 with inset shadows
- Gold accent text: text-[#fbbf24]
- Crystal white text: text-[#f0f9ff]
- Gradient panels: bg-gradient-to-b from-slate-800 to-slate-900
- HP/MP bars with colored gradients
- Corner decorations on panels
- Shadow depth: shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]

MUST AVOID:
- White/light backgrounds
- Flat minimal design without borders
- Modern sans-serif only typography
- rounded-full buttons
- Transparent/borderless panels
- Low contrast color combinations

COLOR RULES:
- Primary: Royal Blue (#1e40af)
- Accent: Gold (#fbbf24)
- Background: Dark Navy (#0f172a)
- Text: Crystal White (#f0f9ff)
- HP: Green (#22c55e)
- MP: Blue (#3b82f6)
- Borders: Blue shades with glow

SPECIAL EFFECTS:
- Inset shadows for beveled/raised look
- Corner ornaments on panels
- Gradient overlays for depth
- Stat bar animations

Animation & Interaction Rules:
- Cursor Snap: 交互反馈优先硬切，使用 duration-75 到 120，模拟方向键选中菜单项。
- Retro Confirm Press: active 必须有按键下压感（scale + translate-y + inset shadow 切换）。
- Menu Hover State: hover 时点亮金色边框或高亮条，保持高对比确认反馈。
- Flashing Prompts: 提示性标签可使用轻量 pulse，避免大面积动画干扰读数。

/* JRPG Global Styles */
@layer base {
  body {
    @apply bg-[#0f172a] text-[#f0f9ff] antialiased;
  }

  h1, h2, h3 {
    color: #fbbf24;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  ::selection {
    @apply bg-blue-700 text-white;
  }
}

@keyframes hp-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
}
/* JRPG Design Tokens */
:root {
  --jrpg-primary: #1e40af;
  --jrpg-secondary: #0f172a;
  --jrpg-accent: #fbbf24;
  --jrpg-glow: rgba(30, 64, 175, 0.3);
}

.jrpg-card {
  position: relative;
  overflow: hidden;
}

.jrpg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.05), transparent);
  pointer-events: none;
}

.jrpg-card:hover::before {
  opacity: 1;
}

.jrpg-gradient {
  background: linear-gradient(135deg, #1e40af, #fbbf24);
}

.jrpg-gradient-text {
  background: linear-gradient(135deg, #1e40af, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.jrpg-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(30, 64, 175, 0.08);
}

.jrpg-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.jrpg-animate-in {
  animation: jrpg-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-2",
    "color": "border-blue-700",
    "radius": "rounded-md",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_1px_2px_rgba(0,0,0,0.3)]",
    "md": "shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_2px_4px_rgba(0,0,0,0.5)]",
    "lg": "shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_4px_12px_rgba(0,0,0,0.6)]",
    "none": "shadow-none",
    "hover": "shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_4px_8px_rgba(0,0,0,0.4)]",
    "focus": "shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_0_2px_rgba(30,64,175,0.4)]",
    "colored": {
      "gold": "shadow-[0_0_8px_rgba(251,191,36,0.3)]",
      "blue": "shadow-[0_0_8px_rgba(30,64,175,0.4)]",
      "green": "shadow-[0_0_6px_rgba(34,197,94,0.4)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-200",
    "active": "active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]",
    "hoverScale": "hover:brightness-110"
  },
  "typography": {
    "heading": "font-bold",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-3xl md:text-5xl lg:text-7xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20",
    "container": "px-4 md:px-8",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-3",
      "md": "gap-4",
      "lg": "gap-6"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0f172a]",
      "secondary": "bg-slate-900",
      "accent": [
        "bg-[#1e40af]",
        "bg-[#fbbf24]",
        "bg-[#22c55e]"
      ]
    },
    "text": {
      "primary": "text-[#f0f9ff]",
      "secondary": "text-[#fbbf24]",
      "muted": "text-blue-300/60"
    },
    "button": {
      "primary": "bg-gradient-to-b from-blue-700 to-blue-900 text-[#f0f9ff]",
      "secondary": "bg-slate-900/80 text-blue-300 border-2 border-blue-400/60",
      "danger": "bg-gradient-to-b from-red-700 to-red-900 text-white"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-slate-50",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "rounded-full",
      "rounded-3xl",
      "border-0"
    ],
    "patterns": [
      "^bg-white",
      "^bg-gray-[1-3]",
      "^bg-slate-[1-3]",
      "^shadow-(?!\\[)",
      "^rounded-full",
      "^rounded-3xl"
    ],
    "reasons": {
      "bg-white": "JRPG uses dark navy backgrounds only",
      "shadow-md": "Use inset/beveled shadows: shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
      "rounded-full": "RPG buttons use subtle rounding (rounded-md max)",
      "border-0": "JRPG panels require visible borders for the menu box aesthetic"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "rounded-md",
      "font-bold",
      "tracking-wide",
      "border-2",
      "transition-all duration-200"
    ],
    "card": [
      "bg-gradient-to-b from-slate-800 to-slate-900",
      "border-2 border-blue-700",
      "rounded-md",
      "ring-1 ring-blue-400/20"
    ],
    "input": [
      "bg-slate-900",
      "border-2 border-blue-700",
      "rounded-md",
      "text-[#f0f9ff]",
      "focus:border-blue-400",
      "focus:ring-1 focus:ring-blue-400/30",
      "shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]"
    ]
  }
}