/* 极速赛车: 下注台(五个玩法一个标签页) + 场景上的名次条 / 亮相字幕 / 成绩板 / 休息提示。类名 rc- 前缀, 尺寸用 tablekit 的 --u。
 * 号码色(和 racing-scene.js 的 PAINT 一样, 也是车身的颜色): 1 黄 2 蓝 3 深灰 4 橙 5 天蓝 6 紫 7 银白 8 红 9 酒红 10 绿 */
.rc-n{display:inline-grid;place-items:center;flex:none;width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:calc(var(--u)*5);font:800 calc(var(--u)*14)/1 Georgia,serif;font-style:normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.4)}
/* 号码色块: 固定配色(和 racing-scene.js PAINT 一样), 车的颜色和号码色对应 */
.rc-c1{background:#f2cc12;color:#1a1400}.rc-c2{background:#1e6fe0;color:#fff}.rc-c3{background:#4a4d52;color:#fff}.rc-c4{background:#ff8a10;color:#1a0d00}.rc-c5{background:#3aa6e0;color:#00202e}.rc-c6{background:#7040d8;color:#fff}.rc-c7{background:#c4c8cd;color:#1a1a1a}.rc-c8{background:#e0161e;color:#fff}.rc-c9{background:#8b1a2b;color:#fff}.rc-c10{background:#18a840;color:#fff}
.rc-row{display:inline-flex;gap:calc(var(--u)*3);align-items:center}
.rc-row .rc-n{width:calc(var(--u)*19);height:calc(var(--u)*19);font-size:calc(var(--u)*11);border-radius:calc(var(--u)*4)}
.rc-row .rc-n.is-first{outline:calc(var(--u)*1.5) solid #ffe08a;outline-offset:1px}

/* ---------- 下注台 ---------- */
.rc-board{display:flex;flex-direction:column;gap:calc(var(--u)*6);width:100%;max-width:calc(var(--u)*1100)}
/* 玩法标签(10-20 用户: 原来看不出是切换用的): 文件夹式标签页, 底下一条金线, 选中的那页亮起来、顶上一道金色高光, 和下面的下注区连成一体 */
.rc-tabs{display:flex;gap:calc(var(--u)*4);justify-content:center;border-bottom:1px solid rgba(226,184,96,.55)}
.rc-tab{position:relative;margin-bottom:-1px;padding:calc(var(--u)*6) calc(var(--u)*22) calc(var(--u)*5);border:1px solid rgba(217,179,108,.3);border-bottom-color:rgba(226,184,96,.55);
  border-radius:calc(var(--u)*8) calc(var(--u)*8) 0 0;background:linear-gradient(180deg,rgba(255,240,210,.08),rgba(255,240,210,.02));color:var(--tk-mute);font:600 calc(var(--u)*14)/1.2 var(--tk-serif);cursor:pointer;transition:color .15s,background .15s}
.rc-tab:hover{color:var(--tk-ink);background:linear-gradient(180deg,rgba(255,240,210,.16),rgba(255,240,210,.04))}
.rc-tab[aria-selected="true"]{z-index:1;color:#ffe9a8;border-color:rgba(255,224,138,.85);border-bottom-color:transparent;
  background:linear-gradient(180deg,rgba(226,184,96,.34),rgba(30,22,12,.92) 85%);box-shadow:inset 0 calc(var(--u)*3) 0 #ffd36a,0 calc(var(--u)*-4) calc(var(--u)*12) rgba(255,200,90,.2)}
.rc-tab i{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*5);width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#ff5a5a;box-shadow:0 0 calc(var(--u)*4) #ff5a5a}
.rc-tab:focus-visible{outline:2px solid var(--tk-gold-hi);outline-offset:2px}
.rc-pane{height:calc(var(--u)*94);padding-top:calc(var(--u)*4)}
.rc-pane[hidden],.rc-count[hidden],.rc-live[hidden],.rc-result[hidden],.rc-rest[hidden]{display:none}
.rc-fps{position:absolute;left:calc(var(--u)*16);bottom:calc(var(--u)*8);z-index:5;margin:0;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.6);font:12px/1.3 monospace;color:#9f9}
.rc-mine{display:flex;flex-wrap:wrap;gap:calc(var(--u)*4) calc(var(--u)*10);min-height:calc(var(--u)*15);margin:0;font-size:calc(var(--u)*11);color:var(--tk-mute);justify-content:center}
.rc-mine b{color:#ffe08a;font-family:Georgia,serif}

/* 定位胆: 名次一排 + 十个号码 */
.rc-pane[data-rc-pane="pos"]{display:flex;flex-direction:column;gap:calc(var(--u)*7)}
.rc-ranks{display:grid;grid-template-columns:repeat(10,1fr);gap:calc(var(--u)*4)}
.rc-rank{position:relative;height:calc(var(--u)*22);border:0;border-radius:calc(var(--u)*4);background:rgba(255,240,210,.07);color:var(--tk-mute);font-size:calc(var(--u)*12);cursor:pointer}
.rc-rank:hover{color:var(--tk-ink);background:rgba(255,240,210,.14)}
.rc-rank[aria-checked="true"]{color:#ffe08a;background:rgba(217,179,108,.28);box-shadow:inset 0 calc(var(--u)*-2) 0 #e2b860}
.rc-rank.has-bet::after{content:"";position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*4);width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:#ff5a5a}
.rc-nums{display:grid;grid-template-columns:repeat(10,1fr);gap:calc(var(--u)*4);flex:1}
.tk-flat .rc-num{--tint:150,116,58;flex-direction:row;gap:calc(var(--u)*8)}
.rc-num .rc-n{width:calc(var(--u)*32);height:calc(var(--u)*32);font-size:calc(var(--u)*18)}
.tk-racing .rc-num small,.tk-racing .rc-sum small,.tk-racing .rc-x small{font:700 calc(var(--u)*13)/1 Georgia,serif;color:#ffe08a}

/* 冠亚组合: 直选 / 组选 | 两排号码 | 押 */
.rc-top2{display:grid;grid-template-columns:calc(var(--u)*120) 1fr calc(var(--u)*200);gap:calc(var(--u)*12);align-items:stretch}
.rc-modes{display:flex;flex-direction:column;gap:calc(var(--u)*6)}
.rc-mode{flex:1;border:0;border-radius:calc(var(--u)*6);background:rgba(255,240,210,.07);color:var(--tk-mute);font:600 calc(var(--u)*14)/1.2 var(--tk-serif);cursor:pointer}
.rc-mode small{display:block;font:400 calc(var(--u)*10)/1.3 sans-serif}
.rc-mode[aria-checked="true"]{color:#ffe08a;background:rgba(217,179,108,.26);box-shadow:inset 0 0 0 1px rgba(255,224,138,.5)}
.rc-picks{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*8)}
.rc-picks p{display:flex;align-items:center;gap:calc(var(--u)*5);margin:0}
.rc-picks span{width:calc(var(--u)*48);font-size:calc(var(--u)*12);color:var(--tk-mute)}
.rc-pick{flex:1;display:grid;place-items:center;height:calc(var(--u)*36);padding:0;border:0;border-radius:calc(var(--u)*6);background:rgba(255,240,210,.05);cursor:pointer}
.rc-pick:hover{background:rgba(255,240,210,.13)}
.rc-pick[aria-pressed="true"]{background:rgba(255,224,138,.3);box-shadow:inset 0 0 0 calc(var(--u)*2) #ffe08a}
.rc-pick .rc-n{width:calc(var(--u)*26);height:calc(var(--u)*26)}
.tk-flat .rc-go{--tint:180,130,50;gap:calc(var(--u)*6)}
.rc-go b{display:flex;align-items:center;gap:calc(var(--u)*4);font-size:calc(var(--u)*14)}
.rc-go:disabled{opacity:.55;cursor:default}

/* 冠亚和 3~19(10-20 用户: 不要紫色按钮, 用无边框式 —— 就是 tablekit 的 .tk-flat 扁平格子: 透明底, 悬停发金光、底下一道亮线) */
.rc-sums{display:grid;grid-template-columns:repeat(17,1fr);gap:calc(var(--u)*4)}
.rc-sum b{font:800 calc(var(--u)*20)/1 Georgia,serif}

/* 大小单双: 10 个名次 × 4 */
.rc-grid{display:grid;grid-template-columns:calc(var(--u)*30) repeat(10,1fr);grid-template-rows:calc(var(--u)*14) repeat(4,1fr);gap:calc(var(--u)*3)}
.rc-gh,.rc-gl{display:grid;place-items:center;font-size:calc(var(--u)*11);color:var(--tk-mute)}
.rc-gl{font:700 calc(var(--u)*13)/1 var(--tk-serif);color:var(--tk-ink)}
.tk-flat .rc-x{padding:0;border-radius:calc(var(--u)*4)}
.rc-x b{font:700 calc(var(--u)*12)/1 var(--tk-serif)}
.tk-flat .rc-x--b,.tk-flat .rc-x--l{--tint:200,40,40}
.tk-flat .rc-x--s,.tk-flat .rc-x--t{--tint:40,110,220}
.tk-flat .rc-x--o{--tint:210,150,30}
.tk-flat .rc-x--e{--tint:40,170,110}
.rc-grid .tk-spot i[data-on]{right:calc(var(--u)*-3);top:calc(var(--u)*-6);font-size:calc(var(--u)*9)}

/* 龙虎: 5 组 */
.rc-dts{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*10)}
.rc-dt{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:calc(var(--u)*4)}
.rc-dt p{grid-column:1 / -1;margin:0;text-align:center;font-size:calc(var(--u)*12);color:var(--tk-ink)}
.rc-dt p small{color:var(--tk-mute)}
.rc-dt .rc-x b{font-size:calc(var(--u)*22)}
.rc-dt .rc-x small{font:700 calc(var(--u)*11)/1 Georgia,serif;color:#ffe08a}

/* ---------- 场景上的提示 ---------- */
.rc-live{position:absolute;left:calc(var(--u)*16);top:calc(var(--u)*70);z-index:2;display:flex;flex-direction:column;gap:calc(var(--u)*4);margin:0;padding:calc(var(--u)*8);list-style:none;
  border-radius:calc(var(--u)*8);background:rgba(6,8,14,.72)} /* 不用 backdrop-filter: 叠在 3D 画面上每次重画都要重新模糊, 画面会一卡一卡 */
.rc-live li{display:flex;align-items:center;gap:calc(var(--u)*6)}
.rc-live small{width:calc(var(--u)*14);text-align:right;font:700 calc(var(--u)*11)/1 Georgia,serif;color:var(--tk-mute)}
.rc-live li:first-child small{color:#ffe08a}
.rc-result{position:absolute;left:50%;top:calc(var(--u)*68);z-index:2;transform:translateX(-50%);padding:calc(var(--u)*10) calc(var(--u)*18) calc(var(--u)*12);border-radius:calc(var(--u)*10);
  border:1px solid transparent;background:var(--fill) padding-box,var(--rim) border-box;text-align:center;animation:rc-pop .45s cubic-bezier(.2,1.4,.4,1)}
.rc-result header{display:flex;align-items:baseline;justify-content:center;gap:calc(var(--u)*10);margin-bottom:calc(var(--u)*8)}
.rc-result header b{font:700 calc(var(--u)*16)/1 var(--tk-serif);color:#ffe08a}
.rc-result header small{font-size:calc(var(--u)*12);color:var(--tk-mute)}
.rc-result ol{display:flex;gap:calc(var(--u)*6);margin:0;padding:0;list-style:none}
.rc-result li{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3)}
.rc-result li .rc-n{width:calc(var(--u)*36);height:calc(var(--u)*36);font-size:calc(var(--u)*19)}
.rc-result li:first-child .rc-n{outline:calc(var(--u)*2) solid #ffe08a;outline-offset:2px}
.rc-result li small{font-size:calc(var(--u)*11);color:var(--tk-mute)}
.rc-result p{display:flex;justify-content:center;gap:calc(var(--u)*18);margin:calc(var(--u)*8) 0 0;font-size:calc(var(--u)*13)}
.rc-result p b{font:700 calc(var(--u)*16)/1 Georgia,serif;color:#ffe08a}
.rc-dtrow span{display:inline-grid;place-items:center;width:calc(var(--u)*20);height:calc(var(--u)*20);margin-left:calc(var(--u)*3);border-radius:50%;font-size:calc(var(--u)*11);color:#fff}
.rc-dtrow .is-l{background:#c82828}.rc-dtrow .is-t{background:#2a6edc}
@keyframes rc-pop{from{opacity:0;transform:translateX(-50%) scale(.85)}}
.rc-rest{position:absolute;left:50%;top:40%;z-index:2;transform:translate(-50%,-50%);margin:0;padding:calc(var(--u)*18) calc(var(--u)*36);border-radius:calc(var(--u)*12);
  background:rgba(6,8,14,.72);text-align:center;font:700 calc(var(--u)*26)/1.5 var(--tk-serif);color:#fff}
.rc-rest small{font:400 calc(var(--u)*14)/1.5 sans-serif;color:var(--tk-mute)}
@media (prefers-reduced-motion:reduce){.rc-result{animation:none}}

/* 右侧: 最近 8 期的开奖号码 */
.rc-hrow{padding:calc(var(--u)*3) 0;border-bottom:1px solid rgba(255,255,255,.05)}
.rc-hrow:first-child .rc-row{filter:drop-shadow(0 0 calc(var(--u)*4) rgba(255,224,138,.4))}
.rc-hsum{display:flex;justify-content:space-between;margin:calc(var(--u)*6) 0 0;font-size:calc(var(--u)*12);color:var(--tk-mute)}
.rc-hsum b{font:700 calc(var(--u)*15)/1 Georgia,serif;color:#ffe08a}
.tk-racing .tk-hist{width:calc(var(--u)*260)}
.tk-records .rc-row .rc-n{width:calc(var(--u)*20);height:calc(var(--u)*20)}

/* 下注按钮(10-20 用户: 冠亚和 / 大小单双 / 龙虎 那些看起来不像能点): 立体按钮 —— 有颜色的实底 + 亮边 + 顶部高光 + 底部投影,
 * 悬停浮起变亮、按下压下去, 押了注的描金边。比 tablekit 的无边框扁平样式优先(选择器多一层 .tk-racing .rc-board) */
.tk-racing .rc-board .tk-spot:not(.rc-sum){border:1px solid rgba(255,255,255,.2);border-radius:calc(var(--u)*6);cursor:pointer;
  background:linear-gradient(180deg,rgba(var(--tint),.72),rgba(var(--tint),.38) 55%,rgba(var(--tint),.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 calc(var(--u)*-2) 0 rgba(0,0,0,.25),0 calc(var(--u)*2) 0 rgba(0,0,0,.5),0 calc(var(--u)*4) calc(var(--u)*10) rgba(0,0,0,.35);
  transition:transform .1s,filter .15s,border-color .15s,box-shadow .15s}
.tk-racing .rc-board .tk-spot:not(.rc-sum)::after{content:none}
.tk-racing .rc-board .tk-spot:not(.rc-sum):hover{filter:brightness(1.22);transform:translateY(calc(var(--u)*-1.5));border-color:rgba(255,224,138,.75);
  background:linear-gradient(180deg,rgba(var(--tint),.85),rgba(var(--tint),.45) 55%,rgba(var(--tint),.3))}
.tk-racing .rc-board .tk-spot:not(.rc-sum):active{transform:translateY(calc(var(--u)*1));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 rgba(0,0,0,.5)}
.tk-racing .rc-board .tk-spot:not(.rc-sum):has(i[data-on]:not(:empty)){border-color:#ffd36a;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px #ffd36a,0 0 calc(var(--u)*10) rgba(255,211,106,.45)}
.tk-racing .rc-board .tk-spot:not(.rc-sum).is-win{border-color:#fff1b8;background:linear-gradient(180deg,rgba(255,214,120,.85),rgba(var(--tint),.5));animation:tk-flat-win 1.1s ease-in-out infinite alternate}
.tk-racing .rc-board .tk-spot:not(.rc-sum):disabled{filter:grayscale(.6) brightness(.7);transform:none;cursor:default;border-color:rgba(255,255,255,.12)}
.tk-racing .rc-board .tk-spot:not(.rc-sum) b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tk-racing.is-closed .rc-board .tk-spot{cursor:default;transform:none;filter:grayscale(.35)}
.tk-racing .rc-num{--tint:150,116,58}
.tk-racing .rc-go{--tint:190,140,50}

/* 大小单双 / 龙虎(10-20 用户: 不要边框式, 不要圆角): 方角实色块 —— 没有边框和描边, 靠实底色 + 悬停变亮 + 按下变暗看得出能点;
 * 押了注的整块更亮、底部一条金色实线 */
.tk-racing .rc-board .tk-spot.rc-x{border:0;border-radius:0;box-shadow:none;transform:none;
  background:linear-gradient(180deg,rgba(var(--tint),.92),rgba(var(--tint),.7))}
.tk-racing .rc-board .tk-spot.rc-x:hover{border:0;filter:brightness(1.25);transform:none;background:linear-gradient(180deg,rgba(var(--tint),1),rgba(var(--tint),.8))}
.tk-racing .rc-board .tk-spot.rc-x:active{filter:brightness(.85);transform:none;box-shadow:none}
.tk-racing .rc-board .tk-spot.rc-x:has(i[data-on]:not(:empty)){border:0;box-shadow:inset 0 calc(var(--u)*-3) 0 #ffd36a;filter:brightness(1.15)}
.tk-racing .rc-board .tk-spot.rc-x.is-win{border:0;box-shadow:inset 0 calc(var(--u)*-3) 0 #fff1b8;background:linear-gradient(180deg,rgba(255,214,120,.95),rgba(var(--tint),.8))}
.tk-racing .rc-grid,.tk-racing .rc-dt{gap:calc(var(--u)*2)}
.tk-racing .rc-x--b,.tk-racing .rc-x--l{--tint:178,34,40}
.tk-racing .rc-x--s,.tk-racing .rc-x--t{--tint:30,92,196}
.tk-racing .rc-x--o{--tint:196,132,20}
.tk-racing .rc-x--e{--tint:28,140,88}

/* 发车倒数大字(3 / 2 / 1 / GO!): 画面正中, 每一下弹出来再淡掉; GO! 是绿色 */
.rc-count{position:absolute;left:50%;top:36%;z-index:4;margin:0;transform:translate(-50%,-50%);pointer-events:none;
  font:900 calc(var(--u)*150)/1 Georgia,serif;color:#ff3a2a;-webkit-text-stroke:calc(var(--u)*3) #fff;text-shadow:0 0 calc(var(--u)*30) rgba(255,60,40,.8),0 calc(var(--u)*6) calc(var(--u)*12) rgba(0,0,0,.6)}
.rc-count.is-go{color:#3dff6a;text-shadow:0 0 calc(var(--u)*34) rgba(60,255,110,.85),0 calc(var(--u)*6) calc(var(--u)*12) rgba(0,0,0,.6)}
.rc-count.is-pop{animation:rc-count .85s ease-out forwards}
@keyframes rc-count{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@media (prefers-reduced-motion:reduce){.rc-count.is-pop{animation:none}}

/* 冠亚和(10-20 用户: 无边框的太透明, 看着像不能点): 还是无边框, 但给实一点的暖金色底, 悬停更亮, 押了注更亮一档 */
.tk-racing .rc-board .tk-spot.rc-sum{background:linear-gradient(180deg,rgba(150,112,52,.78),rgba(86,62,28,.82));cursor:pointer}
.tk-racing .rc-board .tk-spot.rc-sum:hover{background:linear-gradient(180deg,rgba(196,148,66,.9),rgba(118,84,34,.9))}
.tk-racing .rc-board .tk-spot.rc-sum:has(i[data-on]:not(:empty)){background:linear-gradient(180deg,rgba(214,166,72,.95),rgba(132,94,36,.95))}
.tk-racing .rc-board .tk-spot.rc-sum b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* 提示框(新一期开始下注 / 冠军是几号 / 下注成功…)(10-20 用户: 往垂直居中一点): 公共的在 24% 高, 这里放到 3D 画面的中间 */
.tk-racing .dice-banner{top:42%}