{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"skeleton","type":"registry:component","title":"Warcraft Skeleton","description":"A Warcraft-themed skeleton/loading placeholder with faction themes (orc, elf, human, undead) and shimmer animation","registryDependencies":[],"files":[{"path":"components/ui/warcraftcn/skeleton.tsx","type":"registry:component","target":"components/ui/warcraftcn/skeleton.tsx","content":"import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/components/ui/warcraftcn/styles/warcraft.css\";\n\nconst skeletonVariants = cva(\n  \"fantasy relative overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"rounded-md\",\n        circular: \"rounded-full\",\n      },\n      faction: {\n        default: \"wc-skeleton\",\n        orc: \"wc-skeleton-orc\",\n        elf: \"wc-skeleton-elf\",\n        human: \"wc-skeleton-human\",\n        undead: \"wc-skeleton-undead\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      faction: \"default\",\n    },\n  }\n);\n\nfunction Skeleton({\n  className,\n  variant,\n  faction,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof skeletonVariants>) {\n  return (\n    <div\n      className={cn(skeletonVariants({ variant, faction }), className)}\n      data-slot=\"skeleton\"\n      {...props}\n    >\n      {/* Faction icon overlay with pulse animation */}\n      <div className=\"wc-skeleton-icons\" aria-hidden=\"true\" />\n      {/* Shimmer effect overlay */}\n      <div className=\"wc-skeleton-shimmer\" aria-hidden=\"true\" />\n    </div>\n  );\n}\n\nexport { Skeleton, skeletonVariants };\n"},{"path":"components/ui/warcraftcn/styles/warcraft.css","type":"registry:component","target":"components/ui/warcraftcn/styles/warcraft.css","content":"@import url(\"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap\");\n\n.fantasy {\n  font-family: \"Cinzel\", serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n\n/* Border-image classes for responsive frames */\n.wc-btn-border {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/button-bg.webp\");\n}\n\n.wc-btn-border-sm {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/button-bg-sm.webp\");\n}\n\n.wc-btn-border-frame {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/button-bg-with-frame.webp\");\n}\n\n.wc-btn-border-frame-sm {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/button-bg-with-frame-sm.webp\");\n}\n\n.wc-card-border {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/card-bg.webp\");\n}\n\n.wc-input-border {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/input-frame.webp\");\n}\n\n.wc-dropdown-border {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/dropdown-menu-bg.webp\");\n}\n\n.wc-textarea-border {\n  border-image-source: url(\"https://warcraftcn.com/warcraftcn/textarea-bg.webp\");\n}\n\n/* Legacy background-image classes (kept for compatibility) */\n.wc-btn-bg {\n  background-image: url(\"https://warcraftcn.com/warcraftcn/button-bg.webp\");\n}\n\n.wc-card-bg {\n  background-image: url(\"https://warcraftcn.com/warcraftcn/card-bg.webp\");\n}\n\n/* ============================================\n   SKELETON BASE & FACTION VARIANTS\n   ============================================ */\n\n/* Base skeleton - neutral/default */\n.wc-skeleton {\n  background: linear-gradient(\n    135deg,\n    hsl(35 10% 12%) 0%,\n    hsl(35 8% 18%) 50%,\n    hsl(35 10% 14%) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 hsl(35 10% 25% / 0.3),\n    inset 0 -1px 0 hsl(35 10% 8% / 0.5),\n    0 2px 8px hsl(0 0% 0% / 0.4);\n}\n\n/* Orc variant - red/brown warrior theme */\n.wc-skeleton-orc {\n  background: linear-gradient(\n    135deg,\n    hsl(0 30% 12%) 0%,\n    hsl(10 25% 18%) 50%,\n    hsl(0 30% 14%) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 hsl(10 30% 25% / 0.3),\n    inset 0 -1px 0 hsl(0 30% 8% / 0.5),\n    0 2px 8px hsl(10 50% 10% / 0.5);\n}\n\n/* Elf variant - teal/nature theme */\n.wc-skeleton-elf {\n  background: linear-gradient(\n    135deg,\n    hsl(170 35% 12%) 0%,\n    hsl(175 30% 18%) 50%,\n    hsl(170 35% 14%) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 hsl(175 35% 25% / 0.3),\n    inset 0 -1px 0 hsl(170 35% 8% / 0.5),\n    0 2px 8px hsl(175 40% 10% / 0.5);\n}\n\n/* Human variant - blue/gold royal theme */\n.wc-skeleton-human {\n  background: linear-gradient(\n    135deg,\n    hsl(220 40% 15%) 0%,\n    hsl(225 35% 20%) 50%,\n    hsl(220 40% 17%) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 hsl(225 40% 28% / 0.3),\n    inset 0 -1px 0 hsl(220 40% 10% / 0.5),\n    0 2px 8px hsl(220 50% 10% / 0.5);\n}\n\n/* Undead variant - purple/dark necromantic theme */\n.wc-skeleton-undead {\n  background: linear-gradient(\n    135deg,\n    hsl(270 25% 10%) 0%,\n    hsl(275 20% 15%) 50%,\n    hsl(270 25% 12%) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 hsl(275 25% 22% / 0.3),\n    inset 0 -1px 0 hsl(270 25% 6% / 0.5),\n    0 2px 8px hsl(270 40% 8% / 0.6);\n}\n\n/* ============================================\n   SHIMMER ANIMATIONS\n   ============================================ */\n\n@keyframes wc-shimmer {\n  0% {\n    transform: translateX(-100%) skewX(-15deg);\n  }\n  100% {\n    transform: translateX(200%) skewX(-15deg);\n  }\n}\n\n/* Base shimmer - shared properties */\n.wc-skeleton-shimmer {\n  position: absolute;\n  inset: 0;\n  animation: wc-shimmer 2.5s ease-in-out infinite;\n  pointer-events: none;\n}\n\n/* Default shimmer - gold */\n.wc-skeleton .wc-skeleton-shimmer {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    hsl(45 100% 50% / 0.08) 20%,\n    hsl(40 100% 60% / 0.15) 40%,\n    hsl(35 100% 55% / 0.2) 50%,\n    hsl(40 100% 60% / 0.15) 60%,\n    hsl(45 100% 50% / 0.08) 80%,\n    transparent 100%\n  );\n}\n\n/* Orc shimmer - fiery red-orange */\n.wc-skeleton-orc .wc-skeleton-shimmer {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    hsl(10 100% 50% / 0.08) 20%,\n    hsl(15 100% 60% / 0.15) 40%,\n    hsl(20 100% 55% / 0.2) 50%,\n    hsl(15 100% 60% / 0.15) 60%,\n    hsl(10 85% 50% / 0.08) 80%,\n    transparent 100%\n  );\n}\n\n/* Elf shimmer - moonlight silver-teal */\n.wc-skeleton-elf .wc-skeleton-shimmer {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    hsl(180 80% 60% / 0.08) 20%,\n    hsl(185 70% 65% / 0.15) 40%,\n    hsl(190 60% 70% / 0.2) 50%,\n    hsl(185 70% 65% / 0.15) 60%,\n    hsl(180 80% 60% / 0.08) 80%,\n    transparent 100%\n  );\n}\n\n/* Human shimmer - bright blue/cyan */\n.wc-skeleton-human .wc-skeleton-shimmer {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    hsl(200 80% 60% / 0.08) 20%,\n    hsl(210 70% 65% / 0.15) 40%,\n    hsl(220 60% 70% / 0.2) 50%,\n    hsl(210 70% 65% / 0.15) 60%,\n    hsl(200 80% 60% / 0.08) 80%,\n    transparent 100%\n  );\n}\n\n/* Undead shimmer - sickly purple */\n.wc-skeleton-undead .wc-skeleton-shimmer {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    hsl(280 70% 50% / 0.08) 20%,\n    hsl(285 60% 55% / 0.15) 40%,\n    hsl(290 50% 60% / 0.2) 50%,\n    hsl(285 60% 55% / 0.15) 60%,\n    hsl(280 70% 50% / 0.08) 80%,\n    transparent 100%\n  );\n}\n\n/* ============================================\n   FACTION ICON PATTERNS\n   ============================================ */\n\n@keyframes wc-icon-pulse {\n  0%,\n  100% {\n    opacity: 0.03;\n  }\n  50% {\n    opacity: 0.08;\n  }\n}\n\n/* Base icons - shared properties */\n.wc-skeleton-icons {\n  position: absolute;\n  inset: 0;\n  animation: wc-icon-pulse 3s ease-in-out infinite;\n  pointer-events: none;\n}\n\n/* Default icons - ancient runes */\n.wc-skeleton .wc-skeleton-icons {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 L35 15 L30 25 L25 15 Z M10 30 L20 35 L10 40 Z M50 30 L40 35 L50 40 Z M30 35 L35 45 L30 55 L25 45 Z' fill='%23d4a853' fill-opacity='0.5'/%3E%3C/svg%3E\");\n  background-size: 40px 40px;\n}\n\n/* Orc icons - realistic axe (like 🪓) */\n.wc-skeleton-orc .wc-skeleton-icons {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23d4624a' fill-opacity='0.5'%3E%3C!-- Wooden handle (centered at 30) --%3E%3Crect x='28' y='15' width='4' height='30' rx='2' fill='%23703010'/%3E%3C!-- Axe blade (curved single blade) --%3E%3Cpath d='M20 20 Q18 25 20 30 L28 30 L28 20 Z' fill='%23d4624a'/%3E%3C!-- Blade edge (darker) --%3E%3Cpath d='M20 20 Q18 25 20 30' stroke='%23902010' stroke-width='1.2' fill='none'/%3E%3C!-- Small back spike --%3E%3Cpath d='M32 23 L36 25 L32 27 Z' fill='%23a04020'/%3E%3C/g%3E%3C/svg%3E\");\n  background-size: 35px 35px;\n}\n\n/* Elf icons - realistic flowing leaves (like 🍃) */\n.wc-skeleton-elf .wc-skeleton-icons {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%235aaaa5' fill-opacity='0.5'%3E%3C!-- Center leaf (simple flowing shape) --%3E%3Cpath d='M30 18 Q28 20 26 25 Q28 30 30 32 Q32 30 34 25 Q32 20 30 18 Z' fill='%235aaaa5'/%3E%3Cline x1='30' y1='18' x2='30' y2='32' stroke='%234a9a95' stroke-width='0.8'/%3E%3C!-- Left leaf --%3E%3Cpath d='M20 22 Q18 24 17 28 Q19 32 20 33 Q21 32 23 28 Q22 24 20 22 Z' fill='%235aaaa5' opacity='0.85'/%3E%3Cline x1='20' y1='22' x2='20' y2='33' stroke='%234a9a95' stroke-width='0.6' opacity='0.7'/%3E%3C!-- Right leaf --%3E%3Cpath d='M40 22 Q38 24 37 28 Q39 32 40 33 Q41 32 43 28 Q42 24 40 22 Z' fill='%235aaaa5' opacity='0.85'/%3E%3Cline x1='40' y1='22' x2='40' y2='33' stroke='%234a9a95' stroke-width='0.6' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E\");\n  background-size: 35px 35px;\n}\n\n/* Human icons - detailed kite shield */\n.wc-skeleton-human .wc-skeleton-icons {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%235a8ac4' fill-opacity='0.5'%3E%3C!-- Shield (centered at 30) --%3E%3Cpath d='M30 12 L40 17 L40 32 Q40 38 30 45 Q20 38 20 32 L20 17 Z' fill='%235a8ac4' stroke='%234a7ab4' stroke-width='1.2'/%3E%3C!-- Shield boss --%3E%3Ccircle cx='30' cy='27' r='3.5' fill='%234a7ab4' opacity='0.7'/%3E%3C!-- Cross --%3E%3Cline x1='30' y1='17' x2='30' y2='40' stroke='%234a7ab4' stroke-width='1.5' opacity='0.4'/%3E%3Cline x1='23' y1='27' x2='37' y2='27' stroke='%234a7ab4' stroke-width='1.5' opacity='0.4'/%3E%3C!-- Shine --%3E%3Cpath d='M25 20 Q27.5 19 30 20' stroke='%236a9ad4' stroke-width='0.8' fill='none' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E\");\n  background-size: 35px 35px;\n}\n\n/* Undead icons - detailed skull */\n.wc-skeleton-undead .wc-skeleton-icons {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23a68ac4' fill-opacity='0.5'%3E%3Cpath d='M30 10 Q40 10 45 18 Q50 26 48 35 L42 35 Q42 38 40 40 L35 40 L35 45 L32 48 L28 48 L25 45 L25 40 L20 40 Q18 38 18 35 L12 35 Q10 26 15 18 Q20 10 30 10 M22 22 Q22 26 25 26 Q28 26 28 22 Q28 18 25 18 Q22 18 22 22 M32 22 Q32 26 35 26 Q38 26 38 22 Q38 18 35 18 Q32 18 32 22 M25 32 L28 35 L30 33 L32 35 L35 32'/%3E%3C/g%3E%3C/svg%3E\");\n  background-size: 45px 45px;\n}\n\n/* ============================================\n   SPINNER\n   ============================================ */\n\n@keyframes wc-spinner-core-light {\n  0%,\n  100% {\n    opacity: 0.2;\n    color: rgb(52 178 108 / 0.2);\n  }\n  25% {\n    opacity: 0.62;\n    color: rgb(56 186 114 / 0.62);\n  }\n  50% {\n    opacity: 0.98;\n    color: rgb(70 206 130 / 0.98);\n  }\n  75% {\n    opacity: 0.64;\n    color: rgb(57 190 116 / 0.64);\n  }\n}\n\n@keyframes wc-spinner-core-dark {\n  0%,\n  100% {\n    opacity: 0.2;\n    color: rgb(102 255 153 / 0.2);\n  }\n  25% {\n    opacity: 0.62;\n    color: rgb(110 255 159 / 0.62);\n  }\n  50% {\n    opacity: 0.98;\n    color: rgb(136 255 176 / 0.98);\n  }\n  75% {\n    opacity: 0.64;\n    color: rgb(112 255 161 / 0.64);\n  }\n}\n\n@keyframes wc-spinner-glow-light {\n  0%,\n  100% {\n    opacity: 0.08;\n    filter: blur(1.2px) drop-shadow(0 0 2px rgb(52 178 108 / 0.12))\n      drop-shadow(0 0 5px rgb(52 178 108 / 0.06));\n  }\n  25% {\n    opacity: 0.24;\n    filter: blur(1.6px) drop-shadow(0 0 6px rgb(56 186 114 / 0.28))\n      drop-shadow(0 0 14px rgb(56 186 114 / 0.14));\n  }\n  50% {\n    opacity: 0.52;\n    filter: blur(2.2px) drop-shadow(0 0 10px rgb(70 206 130 / 0.42))\n      drop-shadow(0 0 20px rgb(70 206 130 / 0.2));\n  }\n  75% {\n    opacity: 0.26;\n    filter: blur(1.7px) drop-shadow(0 0 7px rgb(57 190 116 / 0.3))\n      drop-shadow(0 0 15px rgb(57 190 116 / 0.14));\n  }\n}\n\n@keyframes wc-spinner-glow-dark {\n  0%,\n  100% {\n    opacity: 0.08;\n    filter: blur(1.2px) drop-shadow(0 0 2px rgb(102 255 153 / 0.12))\n      drop-shadow(0 0 5px rgb(102 255 153 / 0.06));\n  }\n  25% {\n    opacity: 0.24;\n    filter: blur(1.6px) drop-shadow(0 0 6px rgb(110 255 159 / 0.28))\n      drop-shadow(0 0 14px rgb(110 255 159 / 0.14));\n  }\n  50% {\n    opacity: 0.52;\n    filter: blur(2.2px) drop-shadow(0 0 10px rgb(130 255 172 / 0.42))\n      drop-shadow(0 0 20px rgb(130 255 172 / 0.2));\n  }\n  75% {\n    opacity: 0.26;\n    filter: blur(1.7px) drop-shadow(0 0 7px rgb(112 255 161 / 0.3))\n      drop-shadow(0 0 15px rgb(112 255 161 / 0.14));\n  }\n}\n\n.wc-spinner {\n  background: transparent;\n  color: rgb(52 178 108 / 0.95);\n  overflow: visible;\n}\n\n.dark .wc-spinner {\n  color: rgb(102 255 153 / 0.95);\n}\n\n@keyframes wc-spinner-flicker {\n  0%,\n  100% {\n    transform: translateY(0) scale(1);\n  }\n  50% {\n    transform: translateY(-0.03px) scale(1.0007);\n  }\n}\n\n.wc-spinner-wrap {\n  transform-origin: center;\n  animation: wc-spinner-flicker 3400ms linear infinite;\n}\n\n.wc-spinner-core {\n  transform-origin: center;\n  animation: wc-spinner-core-light 2600ms linear infinite;\n}\n\n.wc-spinner-glow {\n  transform-origin: center;\n  animation: wc-spinner-glow-light 2600ms linear infinite;\n}\n\n.dark .wc-spinner-core {\n  animation-name: wc-spinner-core-dark;\n}\n\n.dark .wc-spinner-glow {\n  animation-name: wc-spinner-glow-dark;\n}\n\n/* ============================================\n   ACCESSIBILITY\n   ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  .wc-spinner-wrap,\n  .wc-spinner-core,\n  .wc-spinner-glow,\n  .dark .wc-spinner-wrap,\n  .dark .wc-spinner-core,\n  .dark .wc-spinner-glow {\n    animation: none;\n  }\n\n  .wc-spinner-core,\n  .dark .wc-spinner-core {\n    opacity: 1;\n  }\n\n  .wc-spinner-glow,\n  .dark .wc-spinner-glow {\n    opacity: 0.35;\n  }\n\n  .wc-skeleton-shimmer {\n    animation: none;\n  }\n\n  .wc-skeleton-icons {\n    animation: none;\n  }\n}\n\n.clip-path-banner {\n  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);\n}\n\n/* ============================================\n   TOOLTIP — Item Quality / Rarity Variants\n   ============================================ */\n\n/* Shared tooltip background */\n.wc-tooltip-base {\n  background: linear-gradient(180deg, hsl(35 15% 8%) 0%, hsl(35 10% 5%) 100%);\n}\n\n/* Default — gold/amber (Common) */\n.wc-tooltip {\n  border: 1px solid hsl(45 60% 35%);\n  box-shadow:\n    inset 0 0 8px hsl(45 50% 25% / 0.12),\n    0 4px 20px hsl(0 0% 0% / 0.7);\n}\n\n/* Uncommon — muted green */\n.wc-tooltip-uncommon {\n  border: 1px solid hsl(120 35% 32%);\n  box-shadow:\n    inset 0 0 8px hsl(120 30% 28% / 0.12),\n    0 4px 20px hsl(0 0% 0% / 0.7);\n}\n\n/* Rare — muted blue */\n.wc-tooltip-rare {\n  border: 1px solid hsl(220 50% 42%);\n  box-shadow:\n    inset 0 0 8px hsl(220 45% 38% / 0.12),\n    0 4px 20px hsl(0 0% 0% / 0.7);\n}\n\n/* Epic — muted purple */\n.wc-tooltip-epic {\n  border: 1px solid hsl(280 40% 42%);\n  box-shadow:\n    inset 0 0 10px hsl(280 35% 38% / 0.15),\n    0 4px 20px hsl(0 0% 0% / 0.7);\n}\n\n/* Legendary — warm muted orange */\n.wc-tooltip-legendary {\n  border: 1px solid hsl(30 70% 40%);\n  box-shadow:\n    inset 0 0 10px hsl(30 60% 35% / 0.15),\n    0 4px 20px hsl(0 0% 0% / 0.7);\n}\n\n/* ============================================\n   Avatar FACTION VARIANTS\n   ============================================ */\n\n.wc-avatar-default {\n  --wc-frame-url: url(\"https://warcraftcn.com/warcraftcn/avatar-default.webp\");\n}\n\n.wc-avatar-human {\n  --wc-frame-url: url(\"https://warcraftcn.com/warcraftcn/avatar-human.webp\");\n}\n\n.wc-avatar-elf {\n  --wc-frame-url: url(\"https://warcraftcn.com/warcraftcn/avatar-elf.webp\");\n}\n\n.wc-avatar-orc {\n  --wc-frame-url: url(\"https://warcraftcn.com/warcraftcn/avatar-orc.webp\");\n}\n\n.wc-avatar-undead {\n  --wc-frame-url: url(\"https://warcraftcn.com/warcraftcn/avatar-undead.webp\");\n}\n\n.wc-avatar-frame {\n  background-image: var(--wc-frame-url);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n\n/* ============================================\n   Cursor FACTION VARIANTS\n   ============================================ */\n\n.wc-orc-cursor,\n.wc-orc-cursor * {\n  cursor: url(\"../assets/cursors/orc.cur\"), auto;\n}\n\n.wc-human-cursor,\n.wc-human-cursor * {\n  cursor: url(\"../assets/cursors/human.cur\"), auto;\n}\n\n.wc-elf-cursor,\n.wc-elf-cursor * {\n  cursor: url(\"../assets/cursors/elf.cur\"), auto;\n}\n\n.wc-undead-cursor,\n.wc-undead-cursor * {\n  cursor: url(\"../assets/cursors/undead.cur\"), auto;\n}\n\n/* checkbox.css */\n.wc-checkbox {\n  all: unset;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border: 2px solid transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  flex-shrink: 0;\n  transition: border-color 0.15s ease;\n}\n\n.wc-checkbox:focus-visible {\n  outline: none;\n  border-color: hsl(45 100% 60%);\n  box-shadow: 0 0 0 3px hsl(45 100% 60% / 0.4);\n}\n\n.wc-checkbox[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.wc-checkbox-default {\n  background-image: url(\"../assets/checkbox-default.webp\");\n}\n.wc-checkbox-default[data-state=\"checked\"] {\n  background-image: url(\"../assets/checkbox-default-checked.webp\");\n}\n\n/* Human faction */\n.wc-checkbox-human {\n  background-image: url(\"../assets/checkbox-human.webp\");\n}\n.wc-checkbox-human[data-state=\"checked\"] {\n  background-image: url(\"../assets/checkbox-human-checked.webp\");\n}\n\n/* Orc faction */\n.wc-checkbox-orc {\n  background-image: url(\"../assets/checkbox-orc.webp\");\n}\n.wc-checkbox-orc[data-state=\"checked\"] {\n  background-image: url(\"../assets/checkbox-orc-checked.webp\");\n}\n\n/* Elf faction */\n.wc-checkbox-elf {\n  background-image: url(\"../assets/checkbox-elf.webp\");\n}\n.wc-checkbox-elf[data-state=\"checked\"] {\n  background-image: url(\"../assets/checkbox-elf-checked.webp\");\n}\n\n/* Undead faction */\n.wc-checkbox-undead {\n  background-image: url(\"../assets/checkbox-undead.webp\");\n}\n.wc-checkbox-undead[data-state=\"checked\"] {\n  background-image: url(\"../assets/checkbox-undead-checked.webp\");\n}\n\n/* ============================================\n   RADIO GROUP — Gem Socket Rune Style\n   ============================================ */\n\n/* Base gem socket - dark stone with metallic border */\n.wc-radio-socket {\n  all: unset;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  /* Dark stone socket */\n  background: radial-gradient(\n    circle at 40% 35%,\n    hsl(35 8% 18%) 0%,\n    hsl(35 6% 10%) 70%,\n    hsl(35 4% 6%) 100%\n  );\n\n  /* Metallic border ring */\n  box-shadow:\n    inset 0 1px 3px hsl(0 0% 0% / 0.6),\n    inset 0 -1px 1px hsl(35 20% 30% / 0.2),\n    0 0 0 1.5px hsl(35 15% 28%),\n    0 0 0 2.5px hsl(35 10% 15%);\n  transition:\n    box-shadow 0.2s ease,\n    background 0.2s ease;\n}\n\n/* Focus — gold magical glow */\n.wc-radio-socket:focus-visible {\n  outline: none;\n  box-shadow:\n    inset 0 1px 3px hsl(0 0% 0% / 0.6),\n    inset 0 -1px 1px hsl(35 20% 30% / 0.2),\n    0 0 0 1.5px hsl(45 70% 50%),\n    0 0 0 3px hsl(45 80% 50% / 0.35),\n    0 0 12px hsl(45 100% 60% / 0.3);\n}\n\n/* Disabled */\n.wc-radio-socket[data-disabled],\n.wc-radio-socket:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Gem indicator (selected state) */\n\n.wc-radio-gem {\n  display: block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n\n  /* Gold/amber gem gradient */\n  background: radial-gradient(\n    circle at 40% 35%,\n    hsl(48 100% 78%) 0%,\n    hsl(43 100% 60%) 40%,\n    hsl(38 90% 45%) 75%,\n    hsl(30 80% 35%) 100%\n  );\n\n  /* Glow effect */\n  box-shadow:\n    0 0 4px hsl(45 100% 55% / 0.8),\n    0 0 10px hsl(45 100% 50% / 0.4),\n    inset 0 -1px 2px hsl(30 80% 30% / 0.4),\n    inset 0 1px 1px hsl(50 100% 85% / 0.5);\n  animation: wc-gem-pulse 2.5s ease-in-out infinite;\n}\n\n/* Subtle pulse for living gem feel */\n@keyframes wc-gem-pulse {\n  0%, 100% {\n    box-shadow:\n      0 0 4px hsl(45 100% 55% / 0.8),\n      0 0 10px hsl(45 100% 50% / 0.4),\n      inset 0 -1px 2px hsl(30 80% 30% / 0.4),\n      inset 0 1px 1px hsl(50 100% 85% / 0.5);\n  }\n  50% {\n    box-shadow:\n      0 0 6px hsl(45 100% 55% / 1),\n      0 0 16px hsl(45 100% 50% / 0.55),\n      inset 0 -1px 2px hsl(30 80% 30% / 0.4),\n      inset 0 1px 1px hsl(50 100% 85% / 0.5);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wc-radio-gem {\n    animation: none;\n  }\n}\n\n/* ============================================\n   ACCORDION\n   ============================================ */\n\n.wc-accordion-medieval-icon--sword {\n  background-image: url(\"../assets/svg/sword.svg\");\n  filter: brightness(0) saturate(100%) invert(83%) sepia(38%) saturate(1148%)\n    hue-rotate(349deg) brightness(102%) contrast(101%);\n}\n\n.wc-accordion-medieval-icon--shield {\n  background-image: url(\"../assets/svg/shield.svg\");\n  filter: brightness(0) saturate(100%) invert(66%) sepia(30%) saturate(965%)\n    hue-rotate(171deg) brightness(92%) contrast(88%);\n}\n\n.wc-accordion-medieval-icon--rune-stone {\n  background-image: url(\"../assets/svg/rune-stone.svg\");\n  filter: brightness(0) saturate(100%) invert(66%) sepia(18%) saturate(951%)\n    hue-rotate(253deg) brightness(94%) contrast(91%);\n}\n\n@keyframes wc-light-sweep {\n  from {\n    transform: translateX(-100%);\n    opacity: 1;\n  }\n  to {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n}\n\n@keyframes wc-accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes wc-accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n.wc-accordion-content-border {\n  border-image-source: url(\"../assets/accordion-content-bg.webp\");\n}\n\n.wc-accordion-header-border {\n  border-image-source: url(\"../assets/accordion-header.webp\");\n}\n/* Default Tab Faction */\n\n/* TAB BUTTON */\n.wc-tabs-default .wc-tab-trigger {\n  background-image: url(\"../assets/tabs/tab-list.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  text-overflow: ellipsis;\n  height: 50px;\n}\n\n.wc-tab-trigger:focus-visible {\n  outline: 2px solid hsl(45 100% 60%);\n  outline-offset: 2px;\n}\n\n/* HOVER LIFT */\n.wc-tab-trigger:hover {\n  filter: brightness(1.25);\n}\n\n/* ACTIVE TAB */\n.wc-tabs-default .wc-tab-trigger[data-state=\"active\"] {\n  background-image: url(\"../assets/tabs/tab-list-active.webp\");\n}\n\n/* CONTENT PANEL */\n.wc-tabs-default .wc-tab-content {\n  background-image: url(\"../assets/tabs/tab-content.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  height: 300px;\n}\n\n/* Human Tab Faction */\n\n/* TAB BUTTON */\n.wc-tabs-human .wc-tab-trigger {\n  background-image: url(\"../assets/tabs/tab-list-human.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  text-overflow: ellipsis;\n}\n\n/* ACTIVE TAB */\n.wc-tabs-human .wc-tab-trigger[data-state=\"active\"] {\n  background-image: url(\"../assets/tabs/tab-list-active-human.webp\");\n}\n\n/* CONTENT PANEL */\n.wc-tabs-human .wc-tab-content {\n  background-image: url(\"../assets/tabs/tab-content-human.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  height: 300px;\n}\n\n/* Orc Tab Faction */\n\n/* TAB BUTTON */\n.wc-tabs-orc .wc-tab-trigger {\n  background-image: url(\"../assets/tabs/tab-list-orc.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  text-overflow: ellipsis;\n}\n\n/* ACTIVE TAB */\n.wc-tabs-orc .wc-tab-trigger[data-state=\"active\"] {\n  background-image: url(\"../assets/tabs/tab-list-active-orc.webp\");\n}\n\n/* CONTENT PANEL */\n.wc-tabs-orc .wc-tab-content {\n  background-image: url(\"../assets/tabs/tab-content-orc.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  height: 300px;\n}\n\n/* Elf Tab Faction */\n\n/* TAB BUTTON */\n.wc-tabs-elf .wc-tab-trigger {\n  background-image: url(\"../assets/tabs/tab-list-elf.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  text-overflow: ellipsis;\n  color: var(--color-black);\n}\n\n/* ACTIVE TAB */\n.wc-tabs-elf .wc-tab-trigger[data-state=\"active\"] {\n  background-image: url(\"../assets/tabs/tab-list-active-elf.webp\");\n}\n\n/* CONTENT PANEL */\n.wc-tabs-elf .wc-tab-content {\n  background-image: url(\"../assets/tabs/tab-content-elf.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  height: 300px;\n}\n\n/* Undead Tab Faction */\n\n/* TAB BUTTON */\n.wc-tabs-undead .wc-tab-trigger {\n  background-image: url(\"../assets/tabs/tab-list-undead.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  text-overflow: ellipsis;\n  color: var(--color-black);\n}\n\n/* ACTIVE TAB */\n.wc-tabs-undead .wc-tab-trigger[data-state=\"active\"] {\n  background-image: url(\"../assets/tabs/tab-list-active-undead.webp\");\n}\n\n/* CONTENT PANEL */\n.wc-tabs-undead .wc-tab-content {\n  background-image: url(\"../assets/tabs/tab-content-undead.webp\");\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  height: 300px;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n  /* Chrome, Safari and Opera */\n}\n\n/* Label and Content */\n.tab-label-base {\n  position: relative;\n  z-index: 2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: inline-block;\n}\n\n.tab-label-vertical {\n  justify-content: flex-start;\n  text-align: left;\n  width: 100%;\n}\n\n .scroll-handle-default {\n   background-image: url('../assets/toast/scroll-handle.png');\n   background-size: 100% 100%;\n }\n\n .scroll-handle-human {\n   background-image: url('../assets/toast/scroll-handle-human.png');\n   background-size: 100% 100%;\n }\n\n .scroll-handle-undead {\n   background-image: url('../assets/toast/scroll-handle-undead.png');\n   background-size: 100% 100%;\n }\n\n .scroll-handle-orc {\n   background-image: url('../assets/toast/scroll-handle-orc.png');\n   background-size: 100% 100%;\n }\n\n .scroll-handle-elf {\n   background-image: url('../assets/toast/scroll-handle-elf.png');\n   background-size: 100% 100%;\n }\n\n .scroll-handle-flip {\n   transform: scaleX(-1);\n }\n\n .scroll-center-default {\n   background-image: url('../assets/toast/scroll-content.webp');\n   background-size: 100% 100%;\n }\n\n .scroll-center-human {\n   background-image: url('../assets/toast/scroll-content-human.webp');\n   background-size: 100% 100%;\n }\n\n .scroll-center-undead {\n   background-image: url('../assets/toast/scroll-content-undead.webp');\n   background-size: 100% 100%;\n }\n\n .scroll-center-orc {\n   background-image: url('../assets/toast/scroll-content-orc.webp');\n   background-size: 100% 100%;\n }\n\n .scroll-center-elf {\n   background-image: url('../assets/toast/scroll-content-elf.webp');\n   background-size: 100% 100%;\n }"}]}