/* 「全服一桌」小游戏的公共界面(tablekit/stage.php), 风格同百家乐: 黑色烟熏面板 + 香槟金细边。舞台 / 全屏的公共样式在 _game/stage.css。
 * 尺寸用 --u(= 舞台宽 / 1700, 容器单位), 窗口多大比例都一样。类名都带 tk- 前缀(站点模板里有 .hp / .hero 等, 撞名会被藏掉)。
 * 布局: 顶栏(桌名 / 期号 / 倒计时 / 按钮) · 右上 走势 · 底栏(星钻 | 下注台 | 筹码 + 操作 + 确认); 开奖时(.is-show)底栏收起让出画面。 */
.tk-stage{container-type:inline-size;--u:max(calc(100cqw / 1700),.5px);
  --tk-gold:#d9b36c;--tk-gold-hi:#f6dc9a;--tk-ink:#f3e6c8;--tk-mute:rgba(243,230,200,.62);
  --tk-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,Georgia,serif;
  --rim:linear-gradient(180deg,#fbe9b4 0%,#d9b36c 22%,#7a5622 52%,#c9a057 78%,#f6dc9a 100%);
  --fill:linear-gradient(180deg,rgba(255,240,210,.075) 0%,rgba(255,240,210,0) 42%),linear-gradient(180deg,rgba(30,23,19,.9) 0%,rgba(12,9,8,.93) 100%);
  background:#0a0507;color:var(--tk-ink);font-variant-numeric:tabular-nums}
.tk-stage button{font:inherit}
.tk-stage .dice-overlay{z-index:6}
.tk-stage .dice-banner{z-index:4;top:24%;font-family:var(--tk-serif);border:1px solid rgba(217,179,108,.5)}
.tk-stage .dice-banner small{font-weight:400;opacity:.85}
.tk-stage .dice-banner b{color:#ffd98a}

/* ---------- 顶栏 ---------- */
.tk-top{position:absolute;left:0;right:0;top:0;z-index:3;height:calc(var(--u)*50);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*16);
  background:linear-gradient(180deg,rgba(6,4,4,.9),rgba(6,4,4,.55) 70%,transparent)} /* 10-15 用户: 下边界不要那么明显 —— 不画金线, 底色往下淡出 */
.tk-top::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(217,179,108,.22),transparent)}
.tk-brand{display:flex;align-items:center;min-width:0}
.tk-seal{flex:none;display:grid;place-items:center;width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;font-style:normal;
  background:radial-gradient(circle at 50% 35%,#2a1d12,#0b0806 70%);box-shadow:inset 0 0 0 calc(var(--u)*2) var(--tk-gold),inset 0 0 0 calc(var(--u)*4) #0b0806,inset 0 0 0 calc(var(--u)*5) rgba(217,179,108,.6)}
.tk-seal b{font:700 calc(var(--u)*18)/1 var(--tk-serif);color:#f3d58f}
.tk-brand__name{display:flex;flex-direction:column;margin-left:calc(var(--u)*12)}
.tk-brand__name b{font:700 calc(var(--u)*21)/1.05 var(--tk-serif);letter-spacing:.12em;background:linear-gradient(180deg,#fff3cf,#e2bf78 55%,#a87e35);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.tk-brand__name small{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*8);letter-spacing:.42em;color:var(--tk-gold);white-space:nowrap}
.tk-info{display:flex;margin:0 0 0 calc(var(--u)*20)}
.tk-info>div{padding:0 calc(var(--u)*14);border-left:1px solid rgba(217,179,108,.35)}
.tk-info dt{font-size:calc(var(--u)*11);color:var(--tk-mute);line-height:1.2}
.tk-info dd{margin:calc(var(--u)*1) 0 0;font:600 calc(var(--u)*14)/1.1 Georgia,serif;color:#fff;white-space:nowrap}
.tk-timer{--p:0;--tc:#22d39a;position:absolute;left:50%;top:calc(var(--u)*4);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*42);pointer-events:none}
.tk-timer.is-mid{--tc:#ffb020}.tk-timer.is-warn{--tc:#ff3b55}
.tk-timer__time{position:relative;isolation:isolate;display:grid;place-items:center;width:calc(var(--u)*42);height:calc(var(--u)*42);border-radius:50%;font:800 calc(var(--u)*18)/1 Georgia,serif;color:#fff;
  background:conic-gradient(var(--tc) calc(var(--p) * 1turn),rgba(255,255,255,.1) 0);filter:drop-shadow(0 0 calc(var(--u)*6) var(--tc))}
.tk-timer__time::before{content:"";position:absolute;inset:calc(var(--u)*4);z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a1f18,#0a0807)}
.tk-timer__time:empty{display:none}
.tk-timer.is-warn .tk-timer__time{animation:tk-beat .5s infinite alternate}
@keyframes tk-beat{to{transform:scale(1.1)}}
.tk-timer__label{font:700 calc(var(--u)*17)/1 var(--tk-serif);letter-spacing:.16em;color:#f3e2b8;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.tk-tools{display:flex;align-items:center;gap:calc(var(--u)*9)}
.tk-ibtn,.tk-home{position:relative;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--u)*30);border:calc(var(--u)*1.5) solid transparent;color:#f3d995;cursor:pointer;
  background:radial-gradient(circle at 50% 35%,#2c221a,#0d0a08 75%) padding-box,var(--rim) border-box;box-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.6)}
.tk-ibtn{width:calc(var(--u)*30);padding:0;border-radius:50%}
.tk-ibtn svg{width:calc(var(--u)*15);height:calc(var(--u)*15)}
.tk-home{gap:calc(var(--u)*4);padding:0 calc(var(--u)*13) 0 calc(var(--u)*9);border-radius:calc(var(--u)*15);font:700 calc(var(--u)*13)/1 var(--tk-serif);text-decoration:none;white-space:nowrap}
.tk-home svg{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.tk-ibtn:hover,.tk-home:hover{color:#fff;filter:brightness(1.15)}
.tk-stage button:focus-visible,.tk-home:focus-visible{outline:2px solid var(--tk-gold-hi);outline-offset:2px}
.tk-ibtn.is-off{color:rgba(243,230,200,.4)}
.tk-ibtn.is-off::after{content:"";position:absolute;width:calc(var(--u)*17);height:calc(var(--u)*1.5);background:currentColor;transform:rotate(-40deg)}

/* ---------- 面板(走势) ---------- */
.tk-panel{position:absolute;z-index:2;border-radius:calc(var(--u)*8);border:1px solid transparent;background:var(--fill) padding-box,var(--rim) border-box;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:calc(var(--u)*13)}
.tk-panel__h{display:flex;align-items:baseline;justify-content:space-between;padding:calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*8);border-bottom:1px solid rgba(217,179,108,.28)}
.tk-panel__h b{font:700 calc(var(--u)*16)/1 var(--tk-serif);letter-spacing:.1em;color:#f6e7c4}
.tk-panel__h small{font-size:calc(var(--u)*11);color:var(--tk-mute)}
.tk-hist{right:calc(var(--u)*16);top:calc(var(--u)*62);width:calc(var(--u)*250)}
.tk-hist__body{padding:calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*12)}
/* 走势里常用: 一排小圆珠 / 一行数字 */
.tk-beads{display:flex;flex-wrap:wrap;gap:calc(var(--u)*4)}
.tk-beads i{display:grid;place-items:center;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;font:700 calc(var(--u)*11)/1 var(--tk-serif);font-style:normal;color:#fff;background:#555;box-shadow:inset 0 calc(var(--u)*-2) calc(var(--u)*3) rgba(0,0,0,.35)}
.tk-beads i:first-child{outline:calc(var(--u)*2) solid var(--tk-gold-hi);outline-offset:1px}
.tk-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*6);margin-top:calc(var(--u)*10)}
.tk-stat div{padding:calc(var(--u)*5) 0;border-radius:calc(var(--u)*5);background:rgba(255,255,255,.04);text-align:center}
.tk-stat small{display:block;font-size:calc(var(--u)*10);color:var(--tk-mute)}
.tk-stat b{font:700 calc(var(--u)*15)/1.2 Georgia,serif}
.tk-empty{margin:0;color:var(--tk-mute);font-size:calc(var(--u)*12)}

/* ---------- 底栏 ---------- */
.tk-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:calc(var(--u)*190) 1fr calc(var(--u)*300);gap:calc(var(--u)*14);align-items:center;
  padding:calc(var(--u)*10) calc(var(--u)*16) calc(var(--u)*12);background:linear-gradient(180deg,rgba(8,5,5,.72),rgba(6,4,4,.95) 30%);border-top:1px solid rgba(217,179,108,.5);
  transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .4s}
.tk-stage.is-show .tk-bar{transform:translateY(calc(100% - var(--u)*0));opacity:0;pointer-events:none}
.tk-wallet{display:flex;flex-direction:column;gap:calc(var(--u)*6)}
.tk-wallet__bal{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*8) calc(var(--u)*10);border-radius:calc(var(--u)*8);border:1px solid transparent;background:var(--fill) padding-box,var(--rim) border-box}
.tk-wallet__bal small{display:block;font-size:calc(var(--u)*11);color:var(--tk-mute)}
.tk-wallet__bal b{font:700 calc(var(--u)*20)/1.1 Georgia,serif;color:#fff}
.tk-wallet__bal>div{flex:1;min-width:0}
.tk-gem{flex:none;width:calc(var(--u)*24);height:calc(var(--u)*24);transform:rotate(45deg);border-radius:calc(var(--u)*4);background:linear-gradient(135deg,#bfe9ff,#3fa6ff 45%,#1b4fd0);box-shadow:0 0 calc(var(--u)*10) rgba(90,170,255,.6)}
.tk-mini{padding:calc(var(--u)*4) calc(var(--u)*8);border:1px solid rgba(217,179,108,.6);border-radius:calc(var(--u)*5);background:rgba(217,179,108,.12);color:#f6dc9a;font-size:calc(var(--u)*12);cursor:pointer}
.tk-wallet__row{display:flex;justify-content:space-between;padding:0 calc(var(--u)*4);font-size:calc(var(--u)*13)}
.tk-wallet__row small{color:var(--tk-mute);font-size:inherit}
.tk-wallet__row b{font-family:Georgia,serif}
.tk-board{min-width:0;display:flex;justify-content:center;align-items:center}
.tk-side{display:grid;grid-template-columns:1fr calc(var(--u)*84);grid-template-rows:auto auto;gap:calc(var(--u)*8) calc(var(--u)*10)}
.tk-chips{grid-column:1 / -1;display:flex;justify-content:space-between}
.tk-chip{position:relative;width:calc(var(--u)*44);height:calc(var(--u)*44);padding:0;border-radius:50%;border:0;cursor:pointer;color:#fff;font:800 calc(var(--u)*13)/1 Georgia,serif;text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:repeating-conic-gradient(var(--e) 0 12deg,var(--c) 12deg 45deg);box-shadow:0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.6);transition:transform .15s}
.tk-chip span{position:absolute;inset:calc(var(--u)*7);display:grid;place-items:center;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 calc(var(--u)*1.5) rgba(255,255,255,.7)}
.tk-chip[aria-checked="true"]{transform:translateY(calc(var(--u)*-5)) scale(1.08);box-shadow:0 0 0 calc(var(--u)*2) #f6dc9a,0 0 calc(var(--u)*14) rgba(246,220,154,.8)}
.tk-btns{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6)}
.tk-act{height:calc(var(--u)*30);border:1px solid rgba(217,179,108,.55);border-radius:calc(var(--u)*6);background:linear-gradient(180deg,#2a1f18,#120c0a);color:#f3d995;font-size:calc(var(--u)*13);cursor:pointer}
.tk-act:disabled{opacity:.4;cursor:default}
.tk-confirm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);border:0;border-radius:calc(var(--u)*10);cursor:pointer;color:#2a1a06;font:700 calc(var(--u)*14)/1 var(--tk-serif);
  background:linear-gradient(180deg,#fff0c0,#e2b860 50%,#a87a2a);box-shadow:inset 0 calc(var(--u)*-3) 0 rgba(0,0,0,.25),0 0 calc(var(--u)*14) rgba(246,220,154,.45)}
.tk-confirm svg{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.tk-confirm:disabled{filter:grayscale(.8) brightness(.6);box-shadow:none;cursor:default}

/* 下注台里的格子(各游戏共用): 金细边按钮, 名称 + 赔率, 右上角是我押了多少 */
.tk-spot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);min-width:0;padding:calc(var(--u)*4);border:1px solid rgba(217,179,108,.5);border-radius:calc(var(--u)*6);
  background:linear-gradient(180deg,rgba(40,30,22,.85),rgba(14,10,8,.9));color:var(--tk-ink);cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s}
.tk-spot b{font:700 calc(var(--u)*15)/1.05 var(--tk-serif);white-space:nowrap}
.tk-spot small{font-size:calc(var(--u)*10.5);color:var(--tk-mute);white-space:nowrap}
.tk-spot:hover{background:linear-gradient(180deg,rgba(70,52,32,.9),rgba(24,16,10,.92));box-shadow:0 0 calc(var(--u)*10) rgba(246,220,154,.3)}
.tk-spot:active{transform:scale(.97)}
.tk-spot i[data-on]{position:absolute;right:calc(var(--u)*-6);top:calc(var(--u)*-8);z-index:1;padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*9);font:700 calc(var(--u)*11)/1.2 Georgia,serif;font-style:normal;
  color:#2a1a06;background:linear-gradient(180deg,#fff0c0,#e2b860);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.tk-spot i[data-on]:empty{display:none}
.tk-spot.is-win{border-color:#ffe39a;background:linear-gradient(180deg,rgba(150,110,40,.9),rgba(70,45,12,.92));box-shadow:0 0 calc(var(--u)*16) rgba(255,215,120,.85);animation:tk-glow 1s infinite alternate}
@keyframes tk-glow{to{box-shadow:0 0 calc(var(--u)*6) rgba(255,215,120,.4)}}
.tk-stage.is-closed .tk-spot{cursor:default}
.tk-stage.is-closed .tk-board{opacity:.75}

/* 座位名牌(tablekit/seats.js): 跟着电脑角色的头 */
.tk-seats{position:absolute;inset:0;z-index:1;pointer-events:none}
.tk-seat{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:calc(var(--u)*4) calc(var(--u)*11) calc(var(--u)*5);border-radius:calc(var(--u)*10);
  border:1px solid rgba(255,255,255,.1);background:var(--fill);font-size:calc(var(--u)*11);white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tk-seat b{font:700 calc(var(--u)*12)/1.2 var(--tk-serif);letter-spacing:.06em}
.tk-seat span{color:var(--tk-gold)}
.tk-seat em{font-style:normal;font-weight:800;font-size:calc(var(--u)*12)}
.tk-seat em.is-up{color:#7ef0bc}.tk-seat em.is-down{color:#ff8f9b}
.tk-seat.is-win{box-shadow:0 0 calc(var(--u)*18) rgba(86,229,169,.55)}

/* 迷你扑克牌 */
.tk-card{position:relative;display:inline-block;width:calc(var(--u)*30);height:calc(var(--u)*42);border-radius:calc(var(--u)*3);background:#f3ecdc;color:#15110f;box-shadow:0 1px 3px rgba(0,0,0,.6);vertical-align:middle}
.tk-card.is-red{color:#b5122e}
.tk-card b{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);font:700 calc(var(--u)*13)/1 Georgia,serif}
.tk-card i{position:absolute;right:calc(var(--u)*3);bottom:calc(var(--u)*2);font-style:normal;font-size:calc(var(--u)*16)}

/* ---------- 弹窗 ---------- */
.tk-pop{z-index:8!important;background:rgba(0,0,0,.6)}
.tk-modal{width:min(92%,calc(var(--u)*760));max-height:86%;display:flex;flex-direction:column;border-radius:calc(var(--u)*12);border:1px solid transparent;background:var(--fill) padding-box,var(--rim) border-box;text-align:left;font-size:calc(var(--u)*14)}
.tk-modal__h{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*14) calc(var(--u)*18);border-bottom:1px solid rgba(217,179,108,.3)}
.tk-modal__h h2{margin:0;font:700 calc(var(--u)*20)/1 var(--tk-serif);color:#f6e7c4}
.tk-modal__h h2 small{font-size:calc(var(--u)*12);color:var(--tk-mute);font-weight:400}
.tk-modal__x{display:grid;place-items:center;width:calc(var(--u)*28);height:calc(var(--u)*28);border:1px solid rgba(217,179,108,.6);border-radius:50%;background:none;color:#f6dc9a;cursor:pointer}
.tk-modal__body{overflow:auto;padding:calc(var(--u)*14) calc(var(--u)*18)}
.tk-rules ul{margin:0;padding-left:1.2em;line-height:1.7}
.tk-records table{width:100%;border-collapse:collapse;font-size:calc(var(--u)*13)}
.tk-records th,.tk-records td{padding:calc(var(--u)*6) calc(var(--u)*8);border-bottom:1px solid rgba(217,179,108,.18);text-align:left;vertical-align:top}
.tk-records th{color:var(--tk-mute);font-weight:400}
.tk-records .is-up{color:#4be3a4}
.tk-records__no{font-family:ui-monospace,Consolas,monospace;color:var(--tk-mute);white-space:nowrap}
.tk-records__void{color:var(--tk-mute)}

/* ---------- 色面下注台(下注台容器加 tk-panels; 龙虎 / 大转盘): 每格一块边缘清晰的半透明色面(颜色 = 格子的 --tint), 平铺、没有边框 / 阴影 / 高光,
 *   格与格之间留窄缝当边界; 最左一格切左斜边、最右一格切右斜边, 拼成下宽上窄的梯形(呼应透视里的半圆桌面); 背后一层很淡的色光(--pl 左 / --pr 右)接到场景里。
 *   悬停 / 押了注: 色面提亮; 开奖赢的那格变金。底栏左右两栏一样宽, 下注台在画面正中 ---------- */
.tk-flat .tk-bar:has(.tk-panels){grid-template-columns:calc(var(--u)*300) minmax(0,1fr) calc(var(--u)*300)}
.tk-flat .tk-bar:has(.tk-panels) .tk-wallet{width:calc(var(--u)*190)}
.tk-panels{position:relative;isolation:isolate}
.tk-panels::before{content:"";position:absolute;inset:calc(var(--u)*-16) calc(var(--u)*-70) calc(var(--u)*-12);z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--pl,255,214,140),.28),transparent 40%,transparent 60%,rgba(var(--pr,255,214,140),.28));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 50%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 50%);mask-composite:intersect}
.tk-flat .tk-panels .tk-spot{border-radius:calc(var(--u)*3);box-shadow:none;background:linear-gradient(180deg,rgba(var(--tint),.30),rgba(var(--tint),.16));transition:background .25s}
.tk-flat .tk-panels .tk-spot:has(i[data-on]:not(:empty)){box-shadow:none;background:linear-gradient(180deg,rgba(var(--tint),.5),rgba(var(--tint),.28))}
/* 悬停(10-15 用户: 区别不明显): 色面加浓到平时的两倍多 + 整体提亮, 底部亮线(公共 ::after) */
.tk-flat .tk-panels .tk-spot:hover,.tk-flat .tk-panels .tk-spot:hover:has(i[data-on]:not(:empty)){box-shadow:none;filter:brightness(1.12);background:linear-gradient(180deg,rgba(var(--tint),.72),rgba(var(--tint),.42))}
.tk-flat .tk-panels .tk-spot:active{transform:none;filter:brightness(1.15)}
.tk-flat .tk-panels .tk-spot::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.tk-flat .tk-panels>.tk-spot:first-child{clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);padding-left:calc(var(--u)*14)}
.tk-flat .tk-panels>.tk-spot:last-child{clip-path:polygon(0 0,91% 0,100% 100%,0 100%);padding-right:calc(var(--u)*14)}
.tk-flat .tk-panels>.tk-spot:last-child i[data-on]{right:12%} /* 右上角被斜边切掉了, 押注数往里挪 */
.tk-flat .tk-panels .tk-glyph b{filter:drop-shadow(0 0 calc(var(--u)*8) rgba(var(--tint),.5)) drop-shadow(0 calc(var(--u)*2) calc(var(--u)*2) rgba(0,0,0,.5))}
.tk-flat .tk-panels .tk-spot small{color:rgba(255,246,228,.66)}
.tk-flat .tk-panels .tk-spot.is-win,.tk-flat .tk-panels .tk-spot.is-win:has(i[data-on]:not(:empty)){box-shadow:none;background:linear-gradient(180deg,rgba(255,214,120,.62),rgba(var(--tint),.3));animation:tk-panel-win 1.1s ease-in-out infinite alternate}
@keyframes tk-panel-win{to{filter:brightness(1.22)}}
@media (prefers-reduced-motion:reduce){.tk-flat .tk-panels .tk-spot.is-win{animation:none}}

/* 荷官说话(cfg.dealerName): 荷官头顶左上方一个对话气泡(浅米色实心底 + 深色字, 看得清), 小尾巴指向荷官; 荷官在画面外时(is-free)放在画面上方居中 */
.tk-say{position:absolute;z-index:5;max-width:calc(var(--u)*400);padding:calc(var(--u)*11) calc(var(--u)*18) calc(var(--u)*13);border-radius:calc(var(--u)*14);
  background:linear-gradient(180deg,rgba(255,251,242,.98),rgba(246,236,214,.98));color:#2a1806;font:600 calc(var(--u)*17)/1.55 var(--tk-serif);
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.45);transform:translate(calc(-100% - var(--u)*14),calc(-100% - var(--u)*6));pointer-events:none;animation:tk-say .25s ease-out}
.tk-say[hidden]{display:none}
.tk-say::after{content:"";position:absolute;right:calc(var(--u)*-7);bottom:calc(var(--u)*14);width:calc(var(--u)*16);height:calc(var(--u)*16);background:#f6ecd6;transform:rotate(45deg);border-radius:calc(var(--u)*2)}
.tk-say__name{display:block;margin-bottom:calc(var(--u)*2);font-size:calc(var(--u)*12);letter-spacing:.12em;color:#a86f12}
.tk-say p{margin:0}
.tk-say b:not(.tk-say__name){color:#b0300f}
.tk-say small{font-size:.85em;color:#6a5030}
.tk-say.is-free{left:50%!important;top:calc(var(--u)*70)!important;transform:translateX(-50%)}
.tk-say.is-free::after{display:none}
@keyframes tk-say{from{opacity:0;margin-top:calc(var(--u)*8)}}
@media (prefers-reduced-motion:reduce){.tk-say{animation:none}}

/* 窄屏(手机横屏): 底栏不能太挤 */
@container (max-width:900px){
  .tk-hist{width:calc(var(--u)*300)}
  .tk-info>div:nth-child(n+2){display:none}
}

/* ---------- 无边框底栏(舞台加 tk-flat 开启; 10-15 骰宝先做, 龙虎 / 赌场战争 / 花式掷骰跟进): 不画金边, 靠留白 + 极淡底色分区;
 *   悬停 / 押了注 / 赢 = 金色柔光 + 底部一道亮线。有颜色的格子设 --tint(如 61,123,255), 底部透一点这个色, 字用渐变色 ---------- */
.tk-flat .tk-bar{border-top:0;background:linear-gradient(180deg,transparent,rgba(6,4,4,.78) 22%,rgba(6,4,4,.94))}
.tk-flat .tk-bar::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(246,220,154,.35),transparent)}
.tk-flat .tk-wallet__bal{border:0;border-radius:calc(var(--u)*10);background:linear-gradient(180deg,rgba(255,240,210,.06),rgba(255,240,210,.015))}
.tk-flat .tk-wallet__bal small,.tk-flat .tk-wallet__row small{color:rgba(232,201,126,.62);letter-spacing:.04em}
.tk-flat .tk-wallet__bal b{color:#fbefd2;text-shadow:0 1px 2px rgba(0,0,0,.5);font-size:calc(var(--u)*16)} /* 10-15 用户: 数字小一点 */
/* 星钻(10-15 用户: 方块不像钻石): 一颗切割钻石 —— 亮蓝冠部 + 深蓝亭部 + 白色切面线, 淡白细轮廓(试过金边, 用户觉得去掉好看), 右上角一颗闪光星 */
.tk-flat .tk-gem{width:calc(var(--u)*28);height:calc(var(--u)*28);transform:none;border-radius:0;box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2fbff'/%3E%3Cstop offset='1' stop-color='%2379c2ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234fb0ff'/%3E%3Cstop offset='1' stop-color='%231338a8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9 6h14l6 7H3z' fill='url%28%23c%29'/%3E%3Cpath d='M3 13h26L16 29z' fill='url%28%23p%29'/%3E%3Cpath d='M3 13h13L16 29z' fill='%232f7ff0' opacity='.55'/%3E%3Cpath d='M9 6l3 7 4-7 4 7 3-7M12 13l4 16 4-16' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='.7' stroke-linejoin='round'/%3E%3Cpath d='M9 6h14l6 7-13 16L3 13z' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='.8' stroke-linejoin='round'/%3E%3Cpath d='M27 1.5l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 calc(var(--u)*6) rgba(90,170,255,.55))}
.tk-flat .tk-wallet__row b{color:var(--tk-ink)}
.tk-flat .tk-mini{border:0;border-radius:calc(var(--u)*12);background:rgba(246,220,154,.1);transition:background .2s}
.tk-flat .tk-mini:hover{background:rgba(246,220,154,.22)}
.tk-flat .tk-spot,.tk-flat .tk-act{--tint:255,240,210;position:relative;border:0;border-radius:calc(var(--u)*8);box-shadow:none;color:var(--tk-ink);
  background:radial-gradient(110% 90% at 50% 120%,rgba(var(--tint),.16),transparent 70%),linear-gradient(180deg,rgba(255,240,210,.06),rgba(255,240,210,.015));
  transition:background .25s,color .2s,transform .1s}
.tk-flat .tk-spot::after,.tk-flat .tk-act::after{content:"";position:absolute;left:24%;right:24%;bottom:calc(var(--u)*3);height:calc(var(--u)*1.5);border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--tk-gold-hi),transparent);opacity:0;transform:scaleX(.4);transition:opacity .25s,transform .25s;pointer-events:none}
.tk-flat .tk-spot:hover,.tk-flat .tk-act:not(:disabled):hover{box-shadow:none;background:radial-gradient(90% 120% at 50% 100%,rgba(255,206,120,.26),rgba(255,206,120,.04) 70%)}
/* 按钮一眼看得出能不能点(10-15 用户, 先在基诺定的): 能点 = 底色加实 + 顶边一道淡高光(像按键), 悬停明显提亮; 不能点 = 变灰变淡 */
.tk-flat .tk-act,.tk-flat .tk-mini{color:#fff6e2;background:linear-gradient(180deg,rgba(255,240,210,.2),rgba(255,240,210,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.16);cursor:pointer}
.tk-flat .tk-act:not(:disabled):hover,.tk-flat .tk-mini:hover{background:linear-gradient(180deg,rgba(255,226,160,.4),rgba(255,226,160,.2));color:#fff}
.tk-flat .tk-act:disabled{opacity:1;color:rgba(255,246,226,.3);background:rgba(255,255,255,.04);box-shadow:none;cursor:not-allowed}
.tk-flat .tk-spot:hover::after,.tk-flat .tk-act:not(:disabled):hover::after,.tk-flat .tk-spot:has(i[data-on]:not(:empty))::after{opacity:1;transform:scaleX(1)}
.tk-flat .tk-spot:active,.tk-flat .tk-act:not(:disabled):active{transform:scale(.97)}
.tk-flat .tk-spot b{text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tk-flat .tk-spot small{color:rgba(232,201,126,.62);letter-spacing:.04em}
/* 大字的格子(龙 / 虎 / 玩家 / 庄家…): 加 tk-glyph, 字用渐变色(--g1 → --g2 → --g3) */
.tk-flat .tk-glyph b{--g1:#fff3cf;--g2:#e2bf78;--g3:#a87e35;font-family:var(--tk-serif);font-weight:800;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  background-image:linear-gradient(180deg,var(--g1),var(--g2) 55%,var(--g3));filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*3) rgba(0,0,0,.55))}
.tk-flat .tk-blue{--tint:61,123,255}.tk-flat .tk-blue b{--g1:#e6f0ff;--g2:#7fa8ff;--g3:#3f6fe0}
.tk-flat .tk-red{--tint:216,52,74}.tk-flat .tk-red b{--g1:#ffe4dc;--g2:#ff8a7a;--g3:#d6303f}
.tk-flat .tk-green{--tint:31,174,116}.tk-flat .tk-green b{--g1:#e2fff1;--g2:#6fe0b0;--g3:#1f9e6c}
.tk-flat .tk-violet{--tint:150,110,255}.tk-flat .tk-violet b{--g1:#efe6ff;--g2:#b49aff;--g3:#7650e0}
/* 押了多少: 金色小数字贴在格子右上角里面 */
.tk-flat .tk-spot i[data-on]{right:calc(var(--u)*3);top:calc(var(--u)*3);padding:0 calc(var(--u)*5);border-radius:calc(var(--u)*6);font-size:calc(var(--u)*10);line-height:1.5;
  box-shadow:0 0 calc(var(--u)*8) rgba(246,220,154,.55)}
.tk-flat .tk-spot.is-win{border:0;background:radial-gradient(100% 130% at 50% 100%,rgba(255,206,110,.55),rgba(255,206,110,.12) 75%);box-shadow:0 0 calc(var(--u)*14) rgba(255,210,120,.35);animation:tk-flat-win 1.1s ease-in-out infinite alternate}
.tk-flat .tk-spot.is-win::after{opacity:1;transform:scaleX(1)}
@keyframes tk-flat-win{to{box-shadow:0 0 calc(var(--u)*4) rgba(255,210,120,.15)}}
.tk-flat .tk-gold{--tint:226,184,96}.tk-flat .tk-gold b{--g1:#fff3cf;--g2:#e2bf78;--g3:#a87e35}
.tk-flat .tk-confirm{box-shadow:0 0 calc(var(--u)*16) rgba(246,220,154,.3)}
.tk-flat .tk-confirm:disabled{filter:none;opacity:.35}
/* 筹码悬停: 一圈黄色亮线(10-15 用户, 龙虎 / 花式掷骰等) */
.tk-flat .tk-chip:not(:disabled):hover{box-shadow:0 0 0 calc(var(--u)*2) #ffd84a,0 0 calc(var(--u)*12) rgba(255,216,74,.75)}
.tk-flat .tk-chip[aria-checked="true"]{box-shadow:0 calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*-4) rgba(246,220,154,.75),0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.6)}
.tk-flat .tk-spot:focus-visible,.tk-flat .tk-act:focus-visible,.tk-flat .tk-mini:focus-visible,.tk-flat .tk-chip:focus-visible,.tk-flat .tk-confirm:focus-visible{outline:2px solid var(--tk-gold-hi);outline-offset:2px}
.tk-flat.is-closed .tk-board{opacity:.6}
@media (prefers-reduced-motion:reduce){.tk-flat .tk-spot.is-win{animation:none}}

/* 舞台里的滚动条(弹窗、记录列表…): 细、透明轨道、淡金色圆角滑块, 和面板的金边统一(10-18 用户) */
.tk-stage *{scrollbar-width:thin;scrollbar-color:rgba(246,220,154,.35) transparent}
.tk-stage ::-webkit-scrollbar{width:8px;height:8px}
.tk-stage ::-webkit-scrollbar-track{background:transparent}
.tk-stage ::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background:rgba(246,220,154,.35) padding-box}
.tk-stage ::-webkit-scrollbar-thumb:hover{background:rgba(246,220,154,.6) padding-box}
.tk-stage ::-webkit-scrollbar-corner{background:transparent}