/* ========================================
   ROULETTE — CASINO TABLE THEME
   ======================================== */

/* — Page — */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #090a0f;
  user-select: none;
  overflow-y: auto;
}

/* — Starfield background — */
.starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.starfield .stars-sm {
  width: 1px; height: 1px; background: transparent;
  box-shadow:
    501px 811px #fff, 1450px 1324px #fff, 1093px 1780px #fff, 1469px 678px #fff,
    904px 741px #fff, 1160px 781px #fff, 1841px 1962px #fff, 1630px 1667px #fff,
    1788px 676px #fff, 367px 1734px #fff, 1343px 156px #fff, 1283px 1142px #fff,
    1062px 378px #fff, 1395px 467px #fff, 1017px 1891px #fff, 137px 1114px #fff,
    1767px 1403px #fff, 1543px 11px #fff, 1078px 181px #fff, 1189px 1574px #fff,
    1697px 1551px #fff, 439px 472px #fff, 1491px 677px #fff, 1364px 599px #fff,
    34px 382px #fff, 1221px 1584px #fff, 1266px 1499px #fff, 169px 1907px #fff,
    1219px 1125px #fff, 659px 18px #fff, 1731px 1959px #fff, 332px 1216px #fff,
    1913px 788px #fff, 80px 712px #fff, 326px 1605px #fff, 574px 1502px #fff,
    473px 1653px #fff, 404px 975px #fff, 322px 1797px #fff, 425px 1321px #fff,
    1121px 1797px #fff, 731px 647px #fff, 891px 1584px #fff, 1523px 109px #fff,
    1379px 244px #fff, 865px 1064px #fff, 493px 956px #fff, 624px 1380px #fff,
    440px 619px #fff, 1630px 767px #fff, 955px 1196px #fff, 62px 729px #fff,
    126px 946px #fff, 1256px 896px #fff, 1444px 256px #fff, 661px 1628px #fff,
    1078px 1716px #fff, 300px 737px #fff, 1734px 413px #fff, 1296px 129px #fff,
    1771px 1678px #fff, 977px 1764px #fff, 1879px 549px #fff, 665px 1531px #fff,
    89px 701px #fff, 1084px 1183px #fff, 1597px 1576px #fff, 1354px 1774px #fff,
    554px 1471px #fff, 1469px 287px #fff, 887px 106px #fff, 1962px 766px #fff,
    638px 805px #fff, 1651px 741px #fff, 1517px 1826px #fff, 24px 1152px #fff,
    507px 558px #fff, 1262px 652px #fff, 246px 1048px #fff, 1077px 421px #fff,
    1866px 1847px #fff, 1986px 1561px #fff, 704px 632px #fff, 1991px 1875px #fff,
    1227px 395px #fff, 45px 1116px #fff, 247px 786px #fff, 890px 607px #fff,
    787px 1235px #fff, 557px 524px #fff, 1582px 1285px #fff, 1725px 1366px #fff,
    952px 747px #fff, 251px 458px #fff, 1500px 1250px #fff, 1999px 1734px #fff,
    1336px 1955px #fff, 1705px 1464px #fff, 728px 697px #fff, 594px 510px #fff,
    1345px 1990px #fff, 1919px 1803px #fff, 1117px 966px #fff, 1629px 97px #fff,
    1046px 1196px #fff, 810px 1092px #fff, 722px 976px #fff, 406px 18px #fff,
    1665px 1860px #fff, 1758px 1628px #fff, 1183px 463px #fff, 564px 239px #fff,
    13px 1767px #fff, 1482px 1472px #fff, 1700px 347px #fff, 1362px 244px #fff,
    1141px 1708px #fff, 22px 885px #fff, 374px 1309px #fff, 1034px 1037px #fff,
    1725px 1086px #fff, 1343px 1921px #fff, 596px 903px #fff, 1061px 478px #fff,
    18px 1409px #fff, 729px 1364px #fff, 264px 911px #fff, 677px 1442px #fff,
    123px 33px #fff, 1303px 646px #fff, 1945px 792px #fff, 1305px 938px #fff,
    918px 1536px #fff, 620px 948px #fff, 183px 646px #fff, 695px 687px #fff,
    881px 272px #fff, 1521px 1212px #fff, 1423px 1022px #fff, 1545px 1271px #fff,
    1393px 348px #fff, 685px 1910px #fff, 1446px 856px #fff, 73px 1201px #fff,
    736px 999px #fff, 673px 796px #fff, 469px 850px #fff, 1912px 142px #fff,
    1278px 664px #fff, 184px 1990px #fff, 1173px 1312px #fff, 782px 1879px #fff,
    323px 1035px #fff, 611px 908px #fff, 565px 1449px #fff, 748px 1713px #fff,
    1047px 490px #fff, 1040px 1872px #fff, 1818px 1659px #fff, 1806px 1327px #fff,
    386px 575px #fff, 1550px 463px #fff, 148px 687px #fff, 651px 1683px #fff,
    1588px 1194px #fff, 1831px 2px #fff, 581px 876px #fff, 1396px 1743px #fff,
    1212px 1810px #fff, 421px 1920px #fff, 658px 1461px #fff, 1859px 1809px #fff,
    1456px 388px #fff, 186px 1627px #fff, 1528px 1145px #fff, 171px 97px #fff,
    674px 1072px #fff, 676px 1052px #fff, 1165px 1131px #fff, 1088px 781px #fff,
    1231px 948px #fff, 330px 257px #fff, 426px 1046px #fff, 549px 652px #fff,
    1338px 74px #fff, 1749px 364px #fff, 931px 369px #fff, 383px 1428px #fff,
    1558px 389px #fff, 927px 133px #fff, 234px 1888px #fff, 1785px 1617px #fff,
    556px 643px #fff, 401px 275px #fff, 406px 1644px #fff, 1253px 1852px #fff,
    1599px 883px #fff, 744px 1721px #fff, 524px 1297px #fff, 1226px 1177px #fff,
    1679px 55px #fff, 874px 1811px #fff, 838px 790px #fff, 1241px 430px #fff,
    1676px 652px #fff, 1191px 568px #fff, 53px 1990px #fff, 1163px 237px #fff,
    61px 223px #fff, 592px 456px #fff, 1844px 271px #fff, 1324px 1488px #fff,
    1373px 717px #fff, 1822px 709px #fff, 1464px 941px #fff, 1445px 1118px #fff,
    991px 1414px #fff, 1964px 1076px #fff, 108px 172px #fff, 641px 1722px #fff,
    1539px 427px #fff, 1697px 45px #fff, 1301px 1353px #fff, 1060px 329px #fff,
    967px 1396px #fff, 493px 301px #fff, 1228px 1406px #fff, 1211px 1653px #fff,
    444px 1822px #fff, 1746px 353px #fff, 1449px 381px #fff, 671px 887px #fff,
    650px 138px #fff, 30px 1839px #fff, 1094px 1405px #fff, 273px 796px #fff,
    1618px 1964px #fff, 1045px 1849px #fff, 1472px 1155px #fff, 1529px 1312px #fff,
    728px 448px #fff, 44px 1908px #fff, 691px 818px #fff, 254px 293px #fff,
    1981px 1133px #fff, 1307px 375px #fff, 196px 316px #fff, 1241px 1975px #fff,
    1138px 1706px #fff, 1769px 463px #fff, 1768px 1428px #fff, 1730px 590px #fff,
    1780px 523px #fff, 1862px 1526px #fff, 1613px 909px #fff, 1266px 1781px #fff;
  animation: starScroll 50s linear infinite;
}
.starfield .stars-sm::after {
  content: ''; position: absolute; top: 2000px;
  width: 1px; height: 1px; background: transparent;
  box-shadow:
    501px 811px #fff, 1450px 1324px #fff, 1093px 1780px #fff, 1469px 678px #fff,
    904px 741px #fff, 1160px 781px #fff, 1841px 1962px #fff, 1630px 1667px #fff,
    1788px 676px #fff, 367px 1734px #fff, 1343px 156px #fff, 1283px 1142px #fff,
    1062px 378px #fff, 1395px 467px #fff, 1017px 1891px #fff, 137px 1114px #fff,
    1767px 1403px #fff, 1543px 11px #fff, 1078px 181px #fff, 1189px 1574px #fff,
    1697px 1551px #fff, 439px 472px #fff, 1491px 677px #fff, 1364px 599px #fff,
    34px 382px #fff, 1221px 1584px #fff, 1266px 1499px #fff, 169px 1907px #fff,
    1219px 1125px #fff, 659px 18px #fff, 1731px 1959px #fff, 332px 1216px #fff,
    1913px 788px #fff, 80px 712px #fff, 326px 1605px #fff, 574px 1502px #fff,
    473px 1653px #fff, 404px 975px #fff, 322px 1797px #fff, 425px 1321px #fff,
    1121px 1797px #fff, 731px 647px #fff, 891px 1584px #fff, 1523px 109px #fff,
    1379px 244px #fff, 865px 1064px #fff, 493px 956px #fff, 624px 1380px #fff,
    440px 619px #fff, 1630px 767px #fff, 955px 1196px #fff, 62px 729px #fff,
    126px 946px #fff, 1256px 896px #fff, 1444px 256px #fff, 661px 1628px #fff,
    1078px 1716px #fff, 300px 737px #fff, 1734px 413px #fff, 1296px 129px #fff,
    1771px 1678px #fff, 977px 1764px #fff, 1879px 549px #fff, 665px 1531px #fff,
    89px 701px #fff, 1084px 1183px #fff, 1597px 1576px #fff, 1354px 1774px #fff,
    554px 1471px #fff, 1469px 287px #fff, 887px 106px #fff, 1962px 766px #fff,
    638px 805px #fff, 1651px 741px #fff, 1517px 1826px #fff, 24px 1152px #fff,
    507px 558px #fff, 1262px 652px #fff, 246px 1048px #fff, 1077px 421px #fff,
    1866px 1847px #fff, 1986px 1561px #fff, 704px 632px #fff, 1991px 1875px #fff,
    1227px 395px #fff, 45px 1116px #fff, 247px 786px #fff, 890px 607px #fff,
    787px 1235px #fff, 557px 524px #fff, 1582px 1285px #fff, 1725px 1366px #fff,
    952px 747px #fff, 251px 458px #fff, 1500px 1250px #fff, 1999px 1734px #fff,
    1336px 1955px #fff, 1705px 1464px #fff, 728px 697px #fff, 594px 510px #fff,
    1345px 1990px #fff, 1919px 1803px #fff, 1117px 966px #fff, 1629px 97px #fff,
    1046px 1196px #fff, 810px 1092px #fff, 722px 976px #fff, 406px 18px #fff,
    1665px 1860px #fff, 1758px 1628px #fff, 1183px 463px #fff, 564px 239px #fff,
    13px 1767px #fff, 1482px 1472px #fff, 1700px 347px #fff, 1362px 244px #fff,
    1141px 1708px #fff, 22px 885px #fff, 374px 1309px #fff, 1034px 1037px #fff,
    1725px 1086px #fff, 1343px 1921px #fff, 596px 903px #fff, 1061px 478px #fff,
    18px 1409px #fff, 729px 1364px #fff, 264px 911px #fff, 677px 1442px #fff,
    123px 33px #fff, 1303px 646px #fff, 1945px 792px #fff, 1305px 938px #fff,
    918px 1536px #fff, 620px 948px #fff, 183px 646px #fff, 695px 687px #fff,
    881px 272px #fff, 1521px 1212px #fff, 1423px 1022px #fff, 1545px 1271px #fff,
    1393px 348px #fff, 685px 1910px #fff, 1446px 856px #fff, 73px 1201px #fff,
    736px 999px #fff, 673px 796px #fff, 469px 850px #fff, 1912px 142px #fff,
    1278px 664px #fff, 184px 1990px #fff, 1173px 1312px #fff, 782px 1879px #fff,
    323px 1035px #fff, 611px 908px #fff, 565px 1449px #fff, 748px 1713px #fff,
    1047px 490px #fff, 1040px 1872px #fff, 1818px 1659px #fff, 1806px 1327px #fff,
    386px 575px #fff, 1550px 463px #fff, 148px 687px #fff, 651px 1683px #fff,
    1588px 1194px #fff, 1831px 2px #fff, 581px 876px #fff, 1396px 1743px #fff,
    1212px 1810px #fff, 421px 1920px #fff, 658px 1461px #fff, 1859px 1809px #fff,
    1456px 388px #fff, 186px 1627px #fff, 1528px 1145px #fff, 171px 97px #fff,
    674px 1072px #fff, 676px 1052px #fff, 1165px 1131px #fff, 1088px 781px #fff,
    1231px 948px #fff, 330px 257px #fff, 426px 1046px #fff, 549px 652px #fff,
    1338px 74px #fff, 1749px 364px #fff, 931px 369px #fff, 383px 1428px #fff,
    1558px 389px #fff, 927px 133px #fff, 234px 1888px #fff, 1785px 1617px #fff,
    556px 643px #fff, 401px 275px #fff, 406px 1644px #fff, 1253px 1852px #fff,
    1599px 883px #fff, 744px 1721px #fff, 524px 1297px #fff, 1226px 1177px #fff,
    1679px 55px #fff, 874px 1811px #fff, 838px 790px #fff, 1241px 430px #fff,
    1676px 652px #fff, 1191px 568px #fff, 53px 1990px #fff, 1163px 237px #fff,
    61px 223px #fff, 592px 456px #fff, 1844px 271px #fff, 1324px 1488px #fff,
    1373px 717px #fff, 1822px 709px #fff, 1464px 941px #fff, 1445px 1118px #fff,
    991px 1414px #fff, 1964px 1076px #fff, 108px 172px #fff, 641px 1722px #fff,
    1539px 427px #fff, 1697px 45px #fff, 1301px 1353px #fff, 1060px 329px #fff,
    967px 1396px #fff, 493px 301px #fff, 1228px 1406px #fff, 1211px 1653px #fff,
    444px 1822px #fff, 1746px 353px #fff, 1449px 381px #fff, 671px 887px #fff,
    650px 138px #fff, 30px 1839px #fff, 1094px 1405px #fff, 273px 796px #fff,
    1618px 1964px #fff, 1045px 1849px #fff, 1472px 1155px #fff, 1529px 1312px #fff,
    728px 448px #fff, 44px 1908px #fff, 691px 818px #fff, 254px 293px #fff,
    1981px 1133px #fff, 1307px 375px #fff, 196px 316px #fff, 1241px 1975px #fff,
    1138px 1706px #fff, 1769px 463px #fff, 1768px 1428px #fff, 1730px 590px #fff,
    1780px 523px #fff, 1862px 1526px #fff, 1613px 909px #fff, 1266px 1781px #fff;
}
.starfield .stars-md {
  width: 2px; height: 2px; background: transparent;
  box-shadow:
    1925px 1320px #fff, 693px 1778px #fff, 1016px 711px #fff, 1171px 563px #fff,
    661px 1919px #fff, 1610px 44px #fff, 1275px 140px #fff, 1208px 1802px #fff,
    1473px 1587px #fff, 11px 1117px #fff, 853px 1757px #fff, 1149px 937px #fff,
    1353px 428px #fff, 270px 279px #fff, 258px 1404px #fff, 417px 1188px #fff,
    286px 561px #fff, 393px 1765px #fff, 147px 881px #fff, 666px 1097px #fff,
    1425px 1278px #fff, 806px 156px #fff, 1252px 561px #fff, 218px 52px #fff,
    1371px 1980px #fff, 171px 745px #fff, 1424px 89px #fff, 137px 244px #fff,
    939px 1922px #fff, 137px 1080px #fff, 1757px 50px #fff, 904px 536px #fff,
    1938px 1001px #fff, 1172px 440px #fff, 72px 1475px #fff, 102px 121px #fff,
    804px 1671px #fff, 1314px 270px #fff, 440px 1341px #fff, 1216px 511px #fff,
    1061px 1523px #fff, 97px 274px #fff, 704px 1318px #fff, 52px 1872px #fff,
    1962px 296px #fff, 111px 289px #fff, 1157px 1236px #fff, 1347px 1451px #fff,
    820px 286px #fff, 1389px 1169px #fff, 644px 841px #fff, 1286px 522px #fff,
    955px 659px #fff, 428px 1805px #fff, 237px 557px #fff, 1689px 1058px #fff,
    636px 1882px #fff, 1349px 1664px #fff, 1548px 432px #fff, 1841px 504px #fff,
    302px 252px #fff, 827px 1765px #fff, 620px 123px #fff, 207px 748px #fff,
    1454px 1234px #fff, 1967px 1790px #fff, 542px 33px #fff, 742px 1214px #fff,
    255px 1402px #fff, 74px 1772px #fff, 699px 475px #fff, 980px 1253px #fff,
    534px 1676px #fff, 909px 202px #fff, 1498px 1251px #fff, 1796px 120px #fff,
    1409px 1263px #fff, 1627px 995px #fff, 969px 710px #fff, 1674px 676px #fff,
    1832px 759px #fff, 1623px 563px #fff, 251px 1790px #fff, 96px 1688px #fff,
    886px 239px #fff, 778px 150px #fff, 1767px 430px #fff, 765px 1259px #fff,
    1189px 877px #fff, 444px 1629px #fff, 1560px 324px #fff, 1952px 1097px #fff,
    712px 1173px #fff, 541px 911px #fff, 827px 1420px #fff, 1233px 285px #fff,
    784px 546px #fff, 645px 285px #fff, 1273px 1255px #fff, 1821px 174px #fff;
  animation: starScroll 100s linear infinite;
}
.starfield .stars-md::after {
  content: ''; position: absolute; top: 2000px;
  width: 2px; height: 2px; background: transparent;
  box-shadow:
    1925px 1320px #fff, 693px 1778px #fff, 1016px 711px #fff, 1171px 563px #fff,
    661px 1919px #fff, 1610px 44px #fff, 1275px 140px #fff, 1208px 1802px #fff,
    1473px 1587px #fff, 11px 1117px #fff, 853px 1757px #fff, 1149px 937px #fff,
    1353px 428px #fff, 270px 279px #fff, 258px 1404px #fff, 417px 1188px #fff,
    286px 561px #fff, 393px 1765px #fff, 147px 881px #fff, 666px 1097px #fff,
    1425px 1278px #fff, 806px 156px #fff, 1252px 561px #fff, 218px 52px #fff,
    1371px 1980px #fff, 171px 745px #fff, 1424px 89px #fff, 137px 244px #fff,
    939px 1922px #fff, 137px 1080px #fff, 1757px 50px #fff, 904px 536px #fff,
    1938px 1001px #fff, 1172px 440px #fff, 72px 1475px #fff, 102px 121px #fff,
    804px 1671px #fff, 1314px 270px #fff, 440px 1341px #fff, 1216px 511px #fff,
    1061px 1523px #fff, 97px 274px #fff, 704px 1318px #fff, 52px 1872px #fff,
    1962px 296px #fff, 111px 289px #fff, 1157px 1236px #fff, 1347px 1451px #fff,
    820px 286px #fff, 1389px 1169px #fff, 644px 841px #fff, 1286px 522px #fff,
    955px 659px #fff, 428px 1805px #fff, 237px 557px #fff, 1689px 1058px #fff,
    636px 1882px #fff, 1349px 1664px #fff, 1548px 432px #fff, 1841px 504px #fff,
    302px 252px #fff, 827px 1765px #fff, 620px 123px #fff, 207px 748px #fff,
    1454px 1234px #fff, 1967px 1790px #fff, 542px 33px #fff, 742px 1214px #fff,
    255px 1402px #fff, 74px 1772px #fff, 699px 475px #fff, 980px 1253px #fff,
    534px 1676px #fff, 909px 202px #fff, 1498px 1251px #fff, 1796px 120px #fff,
    1409px 1263px #fff, 1627px 995px #fff, 969px 710px #fff, 1674px 676px #fff,
    1832px 759px #fff, 1623px 563px #fff, 251px 1790px #fff, 96px 1688px #fff,
    886px 239px #fff, 778px 150px #fff, 1767px 430px #fff, 765px 1259px #fff,
    1189px 877px #fff, 444px 1629px #fff, 1560px 324px #fff, 1952px 1097px #fff,
    712px 1173px #fff, 541px 911px #fff, 827px 1420px #fff, 1233px 285px #fff,
    784px 546px #fff, 645px 285px #fff, 1273px 1255px #fff, 1821px 174px #fff;
}
.starfield .stars-lg {
  width: 3px; height: 3px; background: transparent;
  box-shadow:
    200px 981px #fff, 1731px 521px #fff, 132px 1039px #fff, 1888px 1547px #fff,
    899px 1226px #fff, 1887px 580px #fff, 1548px 1092px #fff, 1626px 689px #fff,
    254px 1072px #fff, 1684px 1211px #fff, 672px 1267px #fff, 939px 668px #fff,
    1969px 645px #fff, 1126px 983px #fff, 457px 568px #fff, 476px 876px #fff,
    829px 1896px #fff, 1364px 1846px #fff, 1507px 1120px #fff, 936px 1948px #fff,
    1833px 832px #fff, 1424px 285px #fff, 1377px 1596px #fff, 432px 153px #fff,
    1348px 1410px #fff, 1529px 954px #fff, 1102px 387px #fff, 264px 297px #fff,
    811px 977px #fff, 1931px 673px #fff, 1734px 978px #fff, 1772px 1567px #fff,
    1197px 1400px #fff, 764px 282px #fff, 1103px 822px #fff, 872px 1803px #fff,
    1057px 1763px #fff, 52px 1299px #fff, 1312px 1236px #fff, 235px 1082px #fff,
    299px 1086px #fff, 1017px 1602px #fff, 1950px 626px #fff, 1306px 132px #fff,
    1358px 1618px #fff, 1873px 1718px #fff, 1447px 940px #fff, 1888px 1195px #fff,
    1704px 1765px #fff, 872px 1357px #fff;
  animation: starScroll 150s linear infinite;
}
.starfield .stars-lg::after {
  content: ''; position: absolute; top: 2000px;
  width: 3px; height: 3px; background: transparent;
  box-shadow:
    200px 981px #fff, 1731px 521px #fff, 132px 1039px #fff, 1888px 1547px #fff,
    899px 1226px #fff, 1887px 580px #fff, 1548px 1092px #fff, 1626px 689px #fff,
    254px 1072px #fff, 1684px 1211px #fff, 672px 1267px #fff, 939px 668px #fff,
    1969px 645px #fff, 1126px 983px #fff, 457px 568px #fff, 476px 876px #fff,
    829px 1896px #fff, 1364px 1846px #fff, 1507px 1120px #fff, 936px 1948px #fff,
    1833px 832px #fff, 1424px 285px #fff, 1377px 1596px #fff, 432px 153px #fff,
    1348px 1410px #fff, 1529px 954px #fff, 1102px 387px #fff, 264px 297px #fff,
    811px 977px #fff, 1931px 673px #fff, 1734px 978px #fff, 1772px 1567px #fff,
    1197px 1400px #fff, 764px 282px #fff, 1103px 822px #fff, 872px 1803px #fff,
    1057px 1763px #fff, 52px 1299px #fff, 1312px 1236px #fff, 235px 1082px #fff,
    299px 1086px #fff, 1017px 1602px #fff, 1950px 626px #fff, 1306px 132px #fff,
    1358px 1618px #fff, 1873px 1718px #fff, 1447px 940px #fff, 1888px 1195px #fff,
    1704px 1765px #fff, 872px 1357px #fff;
}
@keyframes starScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-2000px); }
}

/* ========================================
   TOP BAR
   ======================================== */
.rl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  flex: none;
  position: relative;
  z-index: 10;
}
.rl-back-btn {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 13px;
  font-family: var(--font-heading);
  transition: color 0.2s;
}
.rl-back-btn:hover { color: rgba(255,255,255,0.7); }
.rl-header-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 6px 16px;
}
.rl-bankroll-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}
.rl-bankroll-val {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}
.rl-bankroll-val::before {
  content: '$';
  font-size: 14px;
  opacity: 0.5;
  margin-right: 1px;
}

/* ========================================
   THE TABLE
   ======================================== */
.rl-table {
  width: 98%;
  max-width: 920px;
  margin: 0 auto 16px;
  padding: 28px 32px 24px;
  position: relative;
  z-index: 1;
  border-radius: 40px;
  background: radial-gradient(ellipse at bottom, #321b35 0%, #090a0f 100%);
  border: 12px solid #1c1f35;
  box-shadow:
    inset 0 0 120px rgba(0,0,0,0.2),
    inset 0 0 0 3px rgba(180,160,90,0.12),
    0 0 0 2px #0a0c16,
    0 0 0 6px #2a2d48,
    0 0 0 8px #0a0c16,
    0 12px 48px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ========================================
   WHEEL
   ======================================== */
.rl-wheel-wrap {
  display: flex;
  justify-content: center;
  z-index: 1;
  position: relative;
}
#wheel-canvas {
  width: 340px;
  height: 340px;
  display: block;
}

/* ========================================
   MESSAGE
   ======================================== */
.rl-msg {
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  color: #fff;
  text-align: center;
  min-height: 24px;
  margin: 0;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,1);
  z-index: 1;
}
.rl-msg.win { color: #6fdb8f; }
.rl-msg.lose { color: #e88; }

/* ========================================
   HISTORY
   ======================================== */
.rl-history {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 28px;
  z-index: 1;
}
.rl-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 3px rgba(0,0,0,0.4);
}
.rl-dot-red { background: #a62626; }
.rl-dot-black { background: #1a1d2e; border: 1px solid rgba(255,255,255,0.1); }
.rl-dot-green { background: #1a6e3a; }

/* ========================================
   BET TYPE SELECTOR
   ======================================== */
.rl-bet-types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 1;
}
.rl-bet-type {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-heading);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rl-bet-type:hover {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}
.rl-bet-type.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(124,109,216,0.12);
}
.rl-bet-type:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rl-payout {
  font-size: 10px;
  opacity: 0.55;
}

/* ========================================
   BETTING BOARD
   ======================================== */
.rl-board-wrap {
  width: 100%;
  overflow-x: auto;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
}
.rl-board {
  display: grid;
  grid-template-columns: 44px repeat(12, minmax(34px, 1fr)) 44px;
  grid-template-rows: repeat(3, 42px) 36px 36px;
  gap: 2px;
  width: 100%;
  max-width: 600px;
}

/* — Cell base — */
.rl-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  overflow: hidden;
}
.rl-cell:hover:not(.rl-disabled) {
  border-color: rgba(145,132,217,0.5);
  box-shadow: 0 0 8px rgba(145,132,217,0.25);
}
.rl-cell.rl-active {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 10px rgba(145,132,217,0.4) !important;
}
.rl-cell.rl-highlight {
  border-color: rgba(145,132,217,0.35);
  background-image: linear-gradient(rgba(145,132,217,0.08), rgba(145,132,217,0.08));
}
.rl-cell.rl-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rl-cell.rl-winning {
  animation: rl-win-pulse 1s ease infinite;
  border-color: #DAA520 !important;
  z-index: 2;
}

/* — Cell colors — */
.rl-cell-red {
  background: linear-gradient(170deg, #a62626 0%, #8b1a1a 100%);
}
.rl-cell-black {
  background: linear-gradient(170deg, #242840 0%, #16192a 100%);
}
.rl-cell-green {
  background: linear-gradient(170deg, #1a6e3a 0%, #145a30 100%);
}
.rl-cell-outside {
  background: rgba(0,0,0,0.35);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
}
.rl-cell-basket {
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

/* RED/BLACK outside bet markers */
.rl-cell[data-bet="red"] {
  background: rgba(139,26,26,0.35);
}
.rl-cell[data-bet="black"] {
  background: rgba(22,25,42,0.7);
  border-right: 1px solid rgba(255,255,255,0.06);
}

/* — Bet marker chip — */
.rl-bet-marker {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 3;
  pointer-events: none;
}
.rl-cell.rl-has-bet .rl-bet-marker {
  display: flex;
}

/* — Zero column — */
.rl-zero-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   CHIP PILE
   ======================================== */
.rl-chip-pile {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  z-index: 2;
}
.chip-stack {
  display: flex;
  align-items: center;
}
.pile-chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px dashed var(--pile-edge);
  background: var(--pile-bg);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 3px rgba(0,0,0,0.35);
}
.pile-chip::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}
.pile-chip + .pile-chip {
  margin-left: -22px;
}
.pile-100 { --pile-bg: #7b1fa2; --pile-edge: #ce93d8; }
.pile-25  { --pile-bg: #2e7d32; --pile-edge: #81c784; }
.pile-5   { --pile-bg: #1565c0; --pile-edge: #64b5f6; }
.pile-1   { --pile-bg: #616161; --pile-edge: #bdbdbd; }

/* ========================================
   CONTROLS BAR
   ======================================== */
.rl-controls {
  padding: 16px 24px 24px;
  display: grid;
  place-items: center;
  min-height: 78px;
  flex: none;
  position: relative;
  z-index: 2;
}
.rl-ctrl-group {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 10px 20px;
  transition: opacity 0.15s, visibility 0.15s;
}
.rl-controls .rl-ctrl-group.hidden {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.rl-ctrl-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.08);
  margin: 0 4px;
}

/* — Casino chips (bet buttons) — */
.rl-chip {
  --chip-bg: #444;
  --chip-edge: #666;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px dashed var(--chip-edge);
  background: var(--chip-bg);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.15),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rl-chip::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.1);
  pointer-events: none;
}
.rl-chip:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 8px 16px rgba(0,0,0,0.5);
}
.rl-chip:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.rl-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.rl-chip.active {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.5),
    0 0 0 3px var(--color-accent);
}
.rl-chip span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.rl-chip-5   { --chip-bg: #1565c0; --chip-edge: #64b5f6; }
.rl-chip-25  { --chip-bg: #2e7d32; --chip-edge: #81c784; }
.rl-chip-100 { --chip-bg: #7b1fa2; --chip-edge: #ce93d8; }

/* — Buttons — */
.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}
.rl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rl-btn-accent {
  background: linear-gradient(180deg, #7c6dd8 0%, #6354b8 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108,84,184,0.4);
}
.rl-btn-accent:hover:not(:disabled) {
  background: linear-gradient(180deg, #8d7ee4 0%, #7465c8 100%);
  box-shadow: 0 4px 12px rgba(108,84,184,0.5);
  transform: translateY(-1px);
}
.rl-btn-accent:active:not(:disabled) { transform: translateY(0); }
.rl-btn-outline {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.12);
}
.rl-btn-outline:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes rl-win-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(218,165,32,0.5); }
  50% { box-shadow: 0 0 18px 4px rgba(218,165,32,0.8); }
}

@keyframes result-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.rl-msg.win, .rl-msg.lose {
  animation: result-pulse 0.4s ease;
}

/* ========================================
   RESPONSIVE — TABLET
   ======================================== */
@media (max-width: 768px) {
  .rl-table {
    width: 98%;
    padding: 24px 20px;
    border-width: 8px;
    border-radius: 32px;
  }
  #wheel-canvas {
    width: 280px;
    height: 280px;
  }
  .rl-board {
    grid-template-columns: 38px repeat(12, minmax(28px, 1fr)) 38px;
    grid-template-rows: repeat(3, 38px) 32px 32px;
  }
  .rl-cell { font-size: 12px; }
  .rl-cell-outside { font-size: 10px; }
  .rl-chip { width: 46px; height: 46px; font-size: 13px; }
  .rl-bet-type { font-size: 11px; padding: 3px 8px; }
  .pile-chip { width: 28px; height: 28px; }
  .pile-chip + .pile-chip { margin-left: -18px; }
}

/* ========================================
   RESPONSIVE — MOBILE
   ======================================== */
@media (max-width: 480px) {
  .rl-header { padding: 8px 14px; }
  .rl-header-info { padding: 4px 12px; gap: 8px; }
  .rl-bankroll-val { font-size: 17px; }
  .rl-bankroll-label { font-size: 9px; }

  .rl-table {
    width: 100%;
    padding: 16px 10px 18px;
    border-width: 6px;
    border-radius: 24px;
    gap: 10px;
    box-shadow:
      inset 0 0 80px rgba(0,0,0,0.2),
      inset 0 0 0 2px rgba(180,160,90,0.1),
      0 0 0 2px #0a0c16,
      0 0 0 4px #2a2d48,
      0 8px 32px rgba(0,0,0,0.5);
  }
  #wheel-canvas {
    width: 220px;
    height: 220px;
  }
  .rl-msg { font-size: 13px; min-height: 20px; }
  .rl-dot { width: 22px; height: 22px; font-size: 8px; }
  .rl-history { gap: 3px; }

  .rl-bet-types { gap: 4px; }
  .rl-bet-type { font-size: 10px; padding: 3px 6px; }
  .rl-payout { font-size: 8px; }

  .rl-board {
    grid-template-columns: 30px repeat(12, minmax(22px, 1fr)) 30px;
    grid-template-rows: repeat(3, 32px) 26px 26px;
  }
  .rl-cell { font-size: 10px; border-width: 1.5px; }
  .rl-cell-outside { font-size: 8px; }
  .rl-cell-basket { font-size: 7px; }
  .rl-bet-marker { width: 12px; height: 12px; font-size: 6px; top: 1px; right: 1px; }

  .rl-chip-pile { gap: 3px; }
  .pile-chip { width: 22px; height: 22px; }
  .pile-chip + .pile-chip { margin-left: -14px; }
  .pile-chip::after { inset: 3px; }

  .rl-controls { padding: 10px 12px 16px; }
  .rl-ctrl-group { padding: 8px 12px; gap: 8px; border-radius: 12px; }
  .rl-ctrl-divider { height: 28px; }
  .rl-chip { width: 42px; height: 42px; font-size: 12px; border-width: 2.5px; }
  .rl-chip::after { inset: 4px; }
  .rl-btn { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
}

/* ========================================
   UTILITY
   ======================================== */
.hidden { display: none !important; }