/* GENERATED FILE — do not edit by hand.
 * Source: shared/skins.json
 * Regenerate: node scripts/generate-skins.mjs
 */

:root[data-skin="orbix"] {
  color-scheme: dark;
  --font-stack: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bg: #070B18;
  --text: #E9EDFF;
  --text-muted: #8A97C2;
  --surface: #FFFFFF0F;
  --surface-strong: #FFFFFF1A;
  --border: #FFFFFF1F;
  --board: #0A1130B3;
  --board-border: #FFFFFF17;
  --cell: #FFFFFF0D;
  --accent: #22D3EE;
  --accent-ink: #042028;
  --accent-alt: #A855F7;
  --danger: #FB7185;
  --success: #34D399;
  --overlay: #050914E6;
  --backdrop:
      radial-gradient(circle at 14% 10%, rgba(124, 58, 237, 0.38) 0%, rgba(124, 58, 237, 0) 62%),
      radial-gradient(circle at 86% 24%, rgba(34, 211, 238, 0.26) 0%, rgba(34, 211, 238, 0) 55%),
      radial-gradient(circle at 72% 88%, rgba(244, 114, 182, 0.22) 0%, rgba(244, 114, 182, 0) 60%),
      radial-gradient(circle at 8% 82%, rgba(29, 78, 216, 0.26) 0%, rgba(29, 78, 216, 0) 58%);
  --board-radius: 28px;
  --tile-radius-ratio: 0.22;
  --gap-ratio: 0.075;
  --board-blur: 0px;
  --bounce: 0;
  --glow-enabled: 1;
}

[data-skin="orbix"] .tile {
  --tile-from: #F8FAFC;
  --tile-to: #FFFFFF;
  --tile-ink: #0B1020;
  --tile-glow: rgba(255, 255, 255, 0.95);
}
[data-skin="orbix"] .tile[data-value="2"] { --tile-from: #1E2A54; --tile-to: #2C3E77; --tile-ink: #B9C7F2; --tile-glow: rgba(44, 62, 119, 0); }
[data-skin="orbix"] .tile[data-value="4"] { --tile-from: #1B3D6E; --tile-to: #2B5FA0; --tile-ink: #CBE0FF; --tile-glow: rgba(43, 95, 160, 0); }
[data-skin="orbix"] .tile[data-value="8"] { --tile-from: #0F5C86; --tile-to: #1B8CBF; --tile-ink: #DDF3FF; --tile-glow: rgba(27, 140, 191, 0.18); }
[data-skin="orbix"] .tile[data-value="16"] { --tile-from: #0E7490; --tile-to: #22D3EE; --tile-ink: #042A36; --tile-glow: rgba(34, 211, 238, 0.28); }
[data-skin="orbix"] .tile[data-value="32"] { --tile-from: #0F766E; --tile-to: #34D399; --tile-ink: #03271D; --tile-glow: rgba(52, 211, 153, 0.3); }
[data-skin="orbix"] .tile[data-value="64"] { --tile-from: #3730A3; --tile-to: #6366F1; --tile-ink: #E6E9FF; --tile-glow: rgba(99, 102, 241, 0.34); }
[data-skin="orbix"] .tile[data-value="128"] { --tile-from: #5B21B6; --tile-to: #8B5CF6; --tile-ink: #F1E9FF; --tile-glow: rgba(139, 92, 246, 0.38); }
[data-skin="orbix"] .tile[data-value="256"] { --tile-from: #7E22CE; --tile-to: #C026D3; --tile-ink: #FBEAFF; --tile-glow: rgba(192, 38, 211, 0.42); }
[data-skin="orbix"] .tile[data-value="512"] { --tile-from: #9F1239; --tile-to: #FB7185; --tile-ink: #FFF0F3; --tile-glow: rgba(251, 113, 133, 0.46); }
[data-skin="orbix"] .tile[data-value="1024"] { --tile-from: #C2410C; --tile-to: #FB923C; --tile-ink: #2B1206; --tile-glow: rgba(251, 146, 60, 0.52); }
[data-skin="orbix"] .tile[data-value="2048"] { --tile-from: #6D28D9; --tile-to: #F0ABFC; --tile-ink: #2A0533; --tile-glow: rgba(240, 171, 252, 0.85); }
[data-skin="orbix"] .tile[data-value="4096"] { --tile-from: #B45309; --tile-to: #FCD34D; --tile-ink: #2B1A03; --tile-glow: rgba(252, 211, 77, 0.7); }
[data-skin="orbix"] .tile[data-value="8192"] { --tile-from: #4D7C0F; --tile-to: #A3E635; --tile-ink: #12210A; --tile-glow: rgba(163, 230, 53, 0.7); }
[data-skin="orbix"] .tile[data-value="16384"] { --tile-from: #047857; --tile-to: #6EE7B7; --tile-ink: #032418; --tile-glow: rgba(110, 231, 183, 0.7); }
[data-skin="orbix"] .tile[data-value="32768"] { --tile-from: #1D4ED8; --tile-to: #93C5FD; --tile-ink: #06153A; --tile-glow: rgba(147, 197, 253, 0.7); }
[data-skin="orbix"] .tile[data-value="65536"] { --tile-from: #A21CAF; --tile-to: #F5D0FE; --tile-ink: #2C0733; --tile-glow: rgba(245, 208, 254, 0.75); }
[data-skin="orbix"] .tile[data-value="131072"] { --tile-from: #CBD5E1; --tile-to: #FFFFFF; --tile-ink: #0B1020; --tile-glow: rgba(255, 255, 255, 0.9); }
[data-skin="orbix"] .tile[data-value="2048"] .tile-shine,
[data-skin="orbix"] .tile[data-value="4096"] .tile-shine,
[data-skin="orbix"] .tile[data-value="8192"] .tile-shine,
[data-skin="orbix"] .tile[data-value="16384"] .tile-shine,
[data-skin="orbix"] .tile[data-value="32768"] .tile-shine,
[data-skin="orbix"] .tile[data-value="65536"] .tile-shine,
[data-skin="orbix"] .tile[data-value="131072"] .tile-shine {
  opacity: 1;
  animation: tile-shimmer 3.2s linear infinite;
}

:root[data-skin="mochi"] {
  color-scheme: light;
  --font-stack: 'Baloo 2', 'Segoe UI Rounded', 'Nunito', system-ui, sans-serif;
  --bg: #FFF8F4;
  --text: #5E4A52;
  --text-muted: #A38F97;
  --surface: #FFFFFFE6;
  --surface-strong: #FFFFFF;
  --border: #EBD9D2;
  --board: #FFFFFF;
  --board-border: #F3E2DB;
  --cell: #F7ECE7;
  --accent: #FF7AA2;
  --accent-ink: #FFFFFF;
  --accent-alt: #7ED0EC;
  --danger: #FF7A7A;
  --success: #5CC98D;
  --overlay: #FFF3EDF2;
  --backdrop:
      radial-gradient(circle at 12% 12%, rgba(255, 211, 226, 0.85) 0%, rgba(255, 211, 226, 0) 62%),
      radial-gradient(circle at 88% 20%, rgba(207, 235, 255, 0.75) 0%, rgba(207, 235, 255, 0) 55%),
      radial-gradient(circle at 80% 86%, rgba(255, 240, 190, 0.7) 0%, rgba(255, 240, 190, 0) 58%),
      radial-gradient(circle at 10% 86%, rgba(216, 246, 223, 0.7) 0%, rgba(216, 246, 223, 0) 55%);
  --board-radius: 34px;
  --tile-radius-ratio: 0.3;
  --gap-ratio: 0.075;
  --board-blur: 0px;
  --bounce: 0.34;
  --glow-enabled: 0;
}

[data-skin="mochi"] .tile {
  --tile-from: #FFFFFF;
  --tile-to: #F4EEFB;
  --tile-ink: #3C3350;
  --tile-glow: rgba(244, 238, 251, 0);
}
[data-skin="mochi"] .tile[data-value="2"] { --tile-from: #FFF3F6; --tile-to: #FFE6EC; --tile-ink: #A98E97; --tile-glow: rgba(255, 230, 236, 0); }
[data-skin="mochi"] .tile[data-value="4"] { --tile-from: #FFE2EA; --tile-to: #FFCBD9; --tile-ink: #95666F; --tile-glow: rgba(255, 203, 217, 0); }
[data-skin="mochi"] .tile[data-value="8"] { --tile-from: #FFD7C8; --tile-to: #FFB79F; --tile-ink: #8A5643; --tile-glow: rgba(255, 183, 159, 0); }
[data-skin="mochi"] .tile[data-value="16"] { --tile-from: #FFE6BE; --tile-to: #FFCB86; --tile-ink: #8A6224; --tile-glow: rgba(255, 203, 134, 0); }
[data-skin="mochi"] .tile[data-value="32"] { --tile-from: #FBF2AE; --tile-to: #F5E06B; --tile-ink: #7A6710; --tile-glow: rgba(245, 224, 107, 0); }
[data-skin="mochi"] .tile[data-value="64"] { --tile-from: #DCF3BE; --tile-to: #B6E48A; --tile-ink: #4C6C28; --tile-glow: rgba(182, 228, 138, 0); }
[data-skin="mochi"] .tile[data-value="128"] { --tile-from: #BCF0DF; --tile-to: #86DDC2; --tile-ink: #2A6A56; --tile-glow: rgba(134, 221, 194, 0); }
[data-skin="mochi"] .tile[data-value="256"] { --tile-from: #B8E7F7; --tile-to: #7ED0EC; --tile-ink: #1D5B71; --tile-glow: rgba(126, 208, 236, 0); }
[data-skin="mochi"] .tile[data-value="512"] { --tile-from: #CBD7FC; --tile-to: #9BB0F5; --tile-ink: #31427D; --tile-glow: rgba(155, 176, 245, 0); }
[data-skin="mochi"] .tile[data-value="1024"] { --tile-from: #E0CDF8; --tile-to: #BFA0EE; --tile-ink: #52337D; --tile-glow: rgba(191, 160, 238, 0); }
[data-skin="mochi"] .tile[data-value="2048"] { --tile-from: #FFCEE9; --tile-to: #FF9AD1; --tile-ink: #7A2455; --tile-glow: rgba(255, 154, 209, 0); }
[data-skin="mochi"] .tile[data-value="4096"] { --tile-from: #FFDCB6; --tile-to: #FFB86B; --tile-ink: #7A4413; --tile-glow: rgba(255, 184, 107, 0); }
[data-skin="mochi"] .tile[data-value="8192"] { --tile-from: #CDF2D6; --tile-to: #8FDFA6; --tile-ink: #266939; --tile-glow: rgba(143, 223, 166, 0); }
[data-skin="mochi"] .tile[data-value="16384"] { --tile-from: #BBE3F8; --tile-to: #79C4EE; --tile-ink: #195376; --tile-glow: rgba(121, 196, 238, 0); }
[data-skin="mochi"] .tile[data-value="32768"] { --tile-from: #E7D2FA; --tile-to: #C29BF0; --tile-ink: #582C84; --tile-glow: rgba(194, 155, 240, 0); }
[data-skin="mochi"] .tile[data-value="65536"] { --tile-from: #FFD4D4; --tile-to: #FF9E9E; --tile-ink: #80262A; --tile-glow: rgba(255, 158, 158, 0); }
[data-skin="mochi"] .tile[data-value="131072"] { --tile-from: #F1ECF8; --tile-to: #FFFFFF; --tile-ink: #3C3350; --tile-glow: rgba(255, 255, 255, 0); }
[data-skin="mochi"] .tile[data-value="2048"] .tile-shine,
[data-skin="mochi"] .tile[data-value="4096"] .tile-shine,
[data-skin="mochi"] .tile[data-value="8192"] .tile-shine,
[data-skin="mochi"] .tile[data-value="16384"] .tile-shine,
[data-skin="mochi"] .tile[data-value="32768"] .tile-shine,
[data-skin="mochi"] .tile[data-value="65536"] .tile-shine,
[data-skin="mochi"] .tile[data-value="131072"] .tile-shine {
  opacity: 1;
  animation: tile-shimmer 3.2s linear infinite;
}

:root[data-skin="prism"] {
  color-scheme: light;
  --font-stack: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --bg: #EEF1FF;
  --text: #252A47;
  --text-muted: #6E7499;
  --surface: #FFFFFF66;
  --surface-strong: #FFFFFFB3;
  --border: #FFFFFFB3;
  --board: #FFFFFF59;
  --board-border: #FFFFFFA6;
  --cell: #FFFFFF4D;
  --accent: #5B6BFF;
  --accent-ink: #FFFFFF;
  --accent-alt: #F472B6;
  --danger: #F43F5E;
  --success: #10B981;
  --overlay: #EEF1FFE6;
  --backdrop:
      radial-gradient(circle at 16% 14%, rgba(255, 201, 224, 0.9) 0%, rgba(255, 201, 224, 0) 60%),
      radial-gradient(circle at 86% 16%, rgba(159, 212, 255, 0.85) 0%, rgba(159, 212, 255, 0) 58%),
      radial-gradient(circle at 78% 84%, rgba(196, 181, 253, 0.8) 0%, rgba(196, 181, 253, 0) 62%),
      radial-gradient(circle at 12% 88%, rgba(167, 243, 208, 0.8) 0%, rgba(167, 243, 208, 0) 58%);
  --board-radius: 24px;
  --tile-radius-ratio: 0.16;
  --gap-ratio: 0.07;
  --board-blur: 16px;
  --bounce: 0;
  --glow-enabled: 0;
}

[data-skin="prism"] .tile {
  --tile-from: #FFFFFFF7;
  --tile-to: #DDE3F5F2;
  --tile-ink: #1F2440;
  --tile-glow: rgba(221, 227, 245, 0);
}
[data-skin="prism"] .tile[data-value="2"] { --tile-from: #FFFFFFB8; --tile-to: #EEF2FFA6; --tile-ink: #464C7A; --tile-glow: rgba(238, 242, 255, 0); }
[data-skin="prism"] .tile[data-value="4"] { --tile-from: #E3E9FFCC; --tile-to: #C7D2FEBF; --tile-ink: #3A3F80; --tile-glow: rgba(199, 210, 254, 0); }
[data-skin="prism"] .tile[data-value="8"] { --tile-from: #D2FBFECC; --tile-to: #A5F3FCBF; --tile-ink: #0E5A70; --tile-glow: rgba(165, 243, 252, 0); }
[data-skin="prism"] .tile[data-value="16"] { --tile-from: #A9F4FCD6; --tile-to: #67E8F9CC; --tile-ink: #07566A; --tile-glow: rgba(103, 232, 249, 0); }
[data-skin="prism"] .tile[data-value="32"] { --tile-from: #BEF8D2D6; --tile-to: #86EFACCC; --tile-ink: #125E38; --tile-glow: rgba(134, 239, 172, 0); }
[data-skin="prism"] .tile[data-value="64"] { --tile-from: #E0DAFEE0; --tile-to: #C4B5FDD1; --tile-ink: #42269E; --tile-glow: rgba(196, 181, 253, 0); }
[data-skin="prism"] .tile[data-value="128"] { --tile-from: #ECD8FFE0; --tile-to: #D8B4FED1; --tile-ink: #5A21B4; --tile-glow: rgba(216, 180, 254, 0); }
[data-skin="prism"] .tile[data-value="256"] { --tile-from: #FDD3EAE0; --tile-to: #F9A8D4D1; --tile-ink: #9B164B; --tile-glow: rgba(249, 168, 212, 0); }
[data-skin="prism"] .tile[data-value="512"] { --tile-from: #FECDCDE6; --tile-to: #FCA5A5D9; --tile-ink: #9D1137; --tile-glow: rgba(252, 165, 165, 0); }
[data-skin="prism"] .tile[data-value="1024"] { --tile-from: #FEDBB2E6; --tile-to: #FDBA74D9; --tile-ink: #983010; --tile-glow: rgba(253, 186, 116, 0); }
[data-skin="prism"] .tile[data-value="2048"] { --tile-from: #C7D2FEF2; --tile-to: #F9A8D4F2; --tile-ink: #3B2C6B; --tile-glow: rgba(249, 168, 212, 0); }
[data-skin="prism"] .tile[data-value="4096"] { --tile-from: #FDE9A0F2; --tile-to: #FCD34DE6; --tile-ink: #76330D; --tile-glow: rgba(252, 211, 77, 0); }
[data-skin="prism"] .tile[data-value="8192"] { --tile-from: #BBF7D0F2; --tile-to: #5EEAD4E6; --tile-ink: #0B5442; --tile-glow: rgba(94, 234, 212, 0); }
[data-skin="prism"] .tile[data-value="16384"] { --tile-from: #BFDBFEF2; --tile-to: #93C5FDE6; --tile-ink: #1B3F8A; --tile-glow: rgba(147, 197, 253, 0); }
[data-skin="prism"] .tile[data-value="32768"] { --tile-from: #E9D5FFF2; --tile-to: #C4B5FDE6; --tile-ink: #4C2496; --tile-glow: rgba(196, 181, 253, 0); }
[data-skin="prism"] .tile[data-value="65536"] { --tile-from: #FBCFE8F2; --tile-to: #F0ABFCE6; --tile-ink: #88136B; --tile-glow: rgba(240, 171, 252, 0); }
[data-skin="prism"] .tile[data-value="131072"] { --tile-from: #FFFFFFF7; --tile-to: #E2E8F0F2; --tile-ink: #1F2440; --tile-glow: rgba(226, 232, 240, 0); }
[data-skin="prism"] .tile[data-value="2048"] .tile-shine,
[data-skin="prism"] .tile[data-value="4096"] .tile-shine,
[data-skin="prism"] .tile[data-value="8192"] .tile-shine,
[data-skin="prism"] .tile[data-value="16384"] .tile-shine,
[data-skin="prism"] .tile[data-value="32768"] .tile-shine,
[data-skin="prism"] .tile[data-value="65536"] .tile-shine,
[data-skin="prism"] .tile[data-value="131072"] .tile-shine {
  opacity: 1;
  animation: tile-spectrum 3.2s linear infinite;
}