/* 赌场模拟器 · 页面样式
   公共按钮 / 卡片骨架来自 style.css，这里只放赌场桌面、仪表和图表。 */

.game.cs-page{
  width:min(100%,1180px);
}

.cs-page .game-head{align-items:flex-start}
.cs-tagline{margin:5px 0 0;font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.cs-disclaimer{margin:4px 0 0;font-size:10.5px;letter-spacing:.04em;color:#cdbf9d}
.cs-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"main side" "chart chart";
  gap:14px;
  align-items:start;
}
.cs-main{grid-area:main;min-width:0}
.cs-side{grid-area:side;display:grid;gap:12px;align-content:start}
.cs-chart-card{grid-area:chart;min-width:0}

/* ---------- 牌桌 ---------- */
.cs-stage{
  min-height:390px;
  border-color:rgba(230,184,92,.34);
  background:
    radial-gradient(120% 90% at 50% 28%, #1c533f 0%, #103528 52%, #071911 100%);
  box-shadow:0 24px 64px rgba(0,0,0,.52), inset 0 0 100px rgba(0,0,0,.5);
}
.cs-stage::before{
  content:"";position:absolute;left:50%;top:55%;
  width:78%;height:64%;transform:translate(-50%,-50%);
  border:1px solid rgba(230,184,92,.17);border-radius:50%;
  pointer-events:none;
}
.cs-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px);
}
.cs-stage-top,.cs-felt,.cs-pot{position:relative;z-index:2}
.cs-stage-top{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:12px 14px 0;
}
.cs-badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:999px;
  border:1px solid rgba(230,184,92,.24);
  background:rgba(4,14,10,.46);
  color:#cdbf9d;font-size:10px;letter-spacing:.08em;line-height:1.5;
}
.cs-badge.is-fair{color:#9fe6b8;border-color:rgba(94,242,160,.28)}
.cs-badge.is-cheat{color:#ffaaaa;border-color:rgba(255,120,120,.45);background:rgba(66,12,12,.5)}
.cs-badge-round{margin-left:auto;color:rgba(230,184,92,.75);border-color:rgba(230,184,92,.15)}

.cs-felt{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,1.28fr) minmax(0,1fr);
  align-items:center;gap:10px;
  min-height:308px;padding:14px 18px 6px;
}
.cs-player{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:0;padding:12px 8px;text-align:center;
  border:1px solid rgba(230,184,92,.15);border-radius:14px;
  background:linear-gradient(180deg,rgba(5,17,12,.7),rgba(5,17,12,.28));
}
.cs-avatar{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:1px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.cs-you .cs-avatar{color:#2a1b05;background:linear-gradient(160deg,#f8e0a0,#d5a33c)}
.cs-opp .cs-avatar{color:#0a1b18;background:linear-gradient(160deg,#a7eaff,#67b6dc)}
.cs-seat-label{color:rgba(230,184,92,.55);font-size:8.5px;letter-spacing:.14em;line-height:1.4}
.cs-player b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.cs-side-chip{
  padding:1px 8px;border:1px solid rgba(230,184,92,.18);border-radius:999px;
  background:rgba(230,184,92,.06);color:#ecd39b;font-size:10px;line-height:1.6;
}
.cs-stake{display:flex;align-items:baseline;gap:4px;margin-top:3px;max-width:100%}
.cs-stake strong{
  color:#f6d98a;font-size:22px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.cs-stake small{color:var(--muted);font-size:9px;white-space:nowrap}
.cs-bank{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#97a69d;font-size:10px;font-variant-numeric:tabular-nums;
}

.cs-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:4px}
.cs-coin{
  width:132px;height:132px;margin:2px 0 5px;
  perspective:800px;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.48));
}
.cs-coin-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transform:rotateY(0deg);will-change:transform;
}
.cs-coin-face{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:4px solid #f2d489;border-radius:50%;
  background:radial-gradient(circle at 34% 27%,#fff1c1 0%,#e9ba5c 39%,#a87020 78%,#6b420d 100%);
  box-shadow:inset 0 0 0 5px rgba(76,45,6,.35),inset 0 0 26px rgba(255,242,196,.35);
  color:#4b2d07;font-size:46px;font-weight:800;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.cs-coin-face::after{
  content:"";position:absolute;inset:12%;border:1px solid rgba(88,54,8,.42);border-radius:50%;
}
.cs-coin-face.back{
  transform:rotateY(180deg);
  background:radial-gradient(circle at 34% 27%,#fff4cf 0%,#e3b354 39%,#9e6820 78%,#66400d 100%);
}

.cs-die{
  display:flex;align-items:center;justify-content:center;
  width:126px;height:126px;margin:8px 0 10px;border-radius:26px;
  background:linear-gradient(145deg,#fff9ea 0%,#f1dfbd 55%,#cfb88e 100%);
  box-shadow:0 10px 0 #a98c5b,0 22px 30px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.8);
  transform:rotate(-4deg);
}
.cs-die.is-rolling{animation:cs-die-roll .55s cubic-bezier(.2,.7,.3,1)}
@keyframes cs-die-roll{
  0%{transform:rotate(-4deg) translateY(0)}
  25%{transform:rotate(7deg) translateY(-10px) scale(1.04)}
  55%{transform:rotate(-9deg) translateY(2px) scale(.98)}
  75%{transform:rotate(4deg) translateY(-3px)}
  100%{transform:rotate(-4deg) translateY(0)}
}
.cs-pips{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  width:76%;height:76%;gap:3px;
}
.cs-pips i{
  display:block;justify-self:center;align-self:center;
  width:14px;height:14px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 36% 32%,#54432d,#1b1209 70%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.22),0 1px 1px rgba(255,255,255,.3);
}
.cs-pips i.on{opacity:1}

.cs-result{
  max-width:100%;min-height:25px;text-align:center;
  color:#f4e7c8;font-size:19px;font-weight:700;line-height:1.3;
  letter-spacing:.01em;
}
.cs-result.is-win{color:#93f0b7}
.cs-result.is-lose{color:#ff9f9f}
.cs-result.is-double{color:#ffc46b}
.cs-result.is-even{color:#c7d4cc}
.cs-result-detail{
  max-width:270px;min-height:17px;text-align:center;
  color:#9fae9f;font-size:10px;line-height:1.6;
  font-variant-numeric:tabular-nums;
}
.cs-roll-label{
  min-height:15px;text-align:center;
  color:rgba(230,184,92,.62);font-size:9.5px;letter-spacing:.15em;line-height:1.5;
}

.cs-pot{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:5px 16px;
  padding:9px 14px 11px;
  border-top:1px solid rgba(230,184,92,.14);
  background:rgba(3,11,8,.28);
  color:#a8b7aa;font-size:10.5px;
}
.cs-pot b{color:#f0dcb0;font-weight:600;font-variant-numeric:tabular-nums;margin-left:2px}
.cs-pot-note{margin-left:auto;color:rgba(168,183,170,.62);font-size:10px}

/* ---------- 操作区 ---------- */
.cs-actions{
  margin-top:12px;padding:12px;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#111923,#0e141b);
}
.cs-bet-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cs-bet-main{display:flex;align-items:center;flex:1;flex-wrap:wrap;gap:8px;min-width:280px}
.cs-label{color:var(--muted);font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
.cs-stepper{
  display:flex;align-items:center;overflow:hidden;
  border:1px solid var(--line);border-radius:10px;background:#0a1118;
}
.cs-stepper button{
  border:0;border-radius:0;background:transparent;
  padding:9px 10px;font-size:14px;line-height:1;color:var(--text);
}
.cs-stepper button:hover{border:0;background:rgba(230,184,92,.1)}
.cs-stepper input{
  width:80px;padding:8px 2px;border:0;outline:none;
  background:transparent;color:var(--text);text-align:center;
  font-size:15px;font-variant-numeric:tabular-nums;
}
.cs-stepper input::-webkit-outer-spin-button,
.cs-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cs-stepper input[type=number]{-moz-appearance:textfield;appearance:textfield}
.cs-mult{display:flex;gap:4px}
.cs-mult .btn{padding:7px 10px;border-radius:8px;font-size:11.5px}
.cs-play{padding:10px 22px}
.cs-auto-btn{padding:10px 15px;min-width:64px}
.cs-auto-btn.is-on{
  border-color:rgba(230,184,92,.6)!important;
  background:rgba(230,184,92,.15)!important;color:#f6d98a;
}
.cs-mult .btn.is-on,.cs-sides .btn.is-on,.cs-speed .btn.is-on,.cs-seg .btn.is-on{
  border-color:rgba(230,184,92,.56);
  background:rgba(230,184,92,.13);
  color:#f7dc9d;
}
.cs-choice-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
.cs-sides{display:flex;gap:4px}
.cs-sides .btn{padding:7px 14px;border-radius:8px;font-size:12px}
.cs-winprob{margin-left:1px;color:var(--muted);font-size:11px;white-space:nowrap}
.cs-winprob b{color:#f1ddb0;font-variant-numeric:tabular-nums}
.cs-speed-wrap{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted);font-size:10.5px;white-space:nowrap}
.cs-speed{display:flex;gap:3px}
.cs-speed .btn{padding:5px 8px;border-radius:7px;font-size:10px}
.cs-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.5}
.cs-meta .is-warn{color:#ffc46b}
#auto-hint{color:#e8c97e}

/* ---------- 卡片 / 设置 ---------- */
.cs-card{
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#111923,#0e141b);
  padding:14px;
}
.cs-card h2{margin:0;color:var(--text);font-size:13px;font-weight:600;letter-spacing:.02em}
.cs-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}
.cs-card-head p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.6}
.cs-value{color:#f3dfb4;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-note{margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.7}
.cs-note.is-warn{color:#ffc46b}

.cs-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0}
.cs-seg .btn{padding:8px 5px;border-radius:9px;font-size:11.5px;white-space:nowrap}
.cs-funds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.cs-field{min-width:0}
.cs-field label{display:block;margin-bottom:3px;color:var(--muted);font-size:9.5px}
.cs-field input{
  width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;
  outline:none;background:#0a1118;color:var(--text);
  font-size:12px;font-variant-numeric:tabular-nums;
}
.cs-field input:focus{border-color:rgba(230,184,92,.5)}
.cs-chips{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.cs-chips .btn{padding:4px 8px;border-radius:7px;font-size:10px;line-height:1.4}
.cs-chips .btn.is-on{border-color:rgba(230,184,92,.56);background:rgba(230,184,92,.13);color:#f7dc9d}
.cs-reset-btn{width:100%;margin-top:7px;font-size:11.5px}
#rake{
  width:100%;height:22px;margin:3px 0 1px;
  accent-color:#e6b85c;cursor:pointer;
}
#rake.is-high{accent-color:#ff9b7a}

.cs-switch-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cs-switch-row h2{font-size:13px}
.cs-switch-row p{margin:2px 0 0;color:var(--muted);font-size:10px}
.cs-switch{
  position:relative;flex:0 0 auto;width:44px;height:25px;padding:0;
  border:1px solid var(--line);border-radius:999px;
  background:#0a1118;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.cs-switch span{
  position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:#7d8a95;transition:transform .16s ease,background .16s ease;
}
.cs-switch[aria-checked="true"]{border-color:rgba(230,184,92,.58);background:rgba(230,184,92,.16)}
.cs-switch[aria-checked="true"] span{transform:translateX(19px);background:#f3d387}

.cs-weights{display:grid;gap:4px;margin-top:10px}
.cs-weight-row{
  display:grid;grid-template-columns:20px minmax(0,1fr) 44px;align-items:center;gap:6px;
  color:var(--muted);font-size:10px;
}
.cs-weight-row > span:first-child{text-align:center;color:#dcc99f;font-weight:600}
.cs-weight-row input[type=range]{width:100%;height:18px;accent-color:#e6b85c;cursor:pointer}
.cs-weight-row output{text-align:right;color:#f0ddb0;font-variant-numeric:tabular-nums}
.cs-dist{margin:10px 0 8px}
.cs-dist-bar{
  display:flex;overflow:hidden;height:9px;
  border:1px solid var(--line);border-radius:999px;background:#0a1118;
}
.cs-dist-bar i{display:block;height:100%;transition:width .15s ease}
.cs-dist-labels{display:flex;justify-content:space-between;gap:8px;margin-top:4px;color:var(--muted);font-size:9.5px}
.cs-dist-labels b{color:#f0ddb0;font-variant-numeric:tabular-nums}
.cs-fair-btn{width:100%;margin-top:2px;font-size:11px}

.cs-help details{font-size:10.5px}
.cs-help summary{cursor:pointer;color:var(--text);font-size:12px;font-weight:600;list-style:none}
.cs-help summary::-webkit-details-marker{display:none}
.cs-help summary::before{content:"＋";display:inline-block;width:15px;color:#e6b85c}
.cs-help details[open] summary::before{content:"−"}
.cs-help p{margin:9px 0 0;color:var(--muted);font-size:10px;line-height:1.75}
.cs-help p b{color:#d9c9a6;font-weight:600}
.cs-disclaimer{margin-top:10px!important;padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}

/* ---------- 其他桌 ---------- */
.cs-other{padding:12px 14px}
.cs-other-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.cs-other-head h2{font-size:12px}
.cs-other-head span{color:var(--muted);font-size:9.5px}
.cs-other-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  padding:7px 0;border-top:1px solid rgba(255,255,255,.045);
  color:#c4cfc8;font-size:10.5px;
}
.cs-other-row:first-child{border-top:0}
.cs-other-name{color:#dce5df;font-weight:600}
.cs-other-dot{display:block;width:6px;height:6px;border-radius:50%}
.cs-other-vs{color:#718078;font-size:8.5px;letter-spacing:.1em;margin:0 2px}
.cs-other-stake{color:#8e9b93;font-variant-numeric:tabular-nums}
.cs-other-net{margin-left:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-other-net.is-win{color:#8fe8b1}
.cs-other-net.is-lose{color:#ff9c9c}
.cs-other-fee{margin-left:auto;color:#8e9b93;font-size:9.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-other-empty{padding:8px 0;color:var(--muted);font-size:10px}

/* ---------- 图表 ---------- */
.cs-chart-card{padding:14px}
.cs-chart-head{align-items:flex-start}
.cs-chart-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;color:var(--muted);font-size:10px;white-space:nowrap}
.cs-chart-meta b{color:#f3dfb4;font-weight:600;font-variant-numeric:tabular-nums}
#chart{
  display:block;width:100%;height:clamp(220px,28vw,320px);
  border-radius:9px;background:linear-gradient(180deg,#0b1219,#091016);
}
.cs-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;color:var(--muted);font-size:10px}
.cs-legend-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.cs-legend-item i{display:block;width:7px;height:7px;border-radius:50%}
.cs-legend-item b{color:#e3ebe5;font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- 覆盖层 ---------- */
.cs-stage .overlay{background:rgba(5,13,10,.82)}
.cs-stage .ov-card{max-width:340px}
.cs-stage .ov-card h2{color:#f3dfb4}
.cs-stage .ov-card p{font-size:12px;line-height:1.8}
.cs-stage .ov-card .tiny{font-size:10px;line-height:1.7}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .cs-layout{
    grid-template-columns:1fr;
    grid-template-areas:"main" "chart" "side";
  }
  .cs-side{grid-template-columns:1fr 1fr;align-items:start}
  .cs-config,.cs-help{grid-column:1 / -1}
  .cs-chart-card{margin-top:0}
}
@media (max-width:640px){
  .cs-side{grid-template-columns:1fr}
  .cs-config,.cs-help{grid-column:auto}
  .cs-page .game-head{flex-wrap:wrap}
  .cs-page .scores{width:100%;justify-content:flex-end}
  .cs-tagline{max-width:calc(100vw - 80px)}
  .cs-felt{
    grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);
    min-height:276px;padding:10px 9px 2px;gap:4px;
  }
  .cs-player{padding:8px 5px;gap:2px}
  .cs-avatar{width:30px;height:30px;font-size:11px}
  .cs-player b{font-size:11px}
  .cs-side-chip{padding:0 6px;font-size:9px}
  .cs-stake strong{font-size:18px}
  .cs-stake small{font-size:8px}
  .cs-bank{font-size:9px}
  .cs-coin{width:96px;height:96px;margin-bottom:2px}
  .cs-coin-face{border-width:3px;font-size:34px}
  .cs-die{width:88px;height:88px;border-radius:20px;margin:6px 0 8px;box-shadow:0 7px 0 #a98c5b,0 15px 22px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.8)}
  .cs-pips i{width:11px;height:11px}
  .cs-result{font-size:16px;min-height:21px}
  .cs-result-detail{max-width:210px;font-size:9px;line-height:1.5}
  .cs-roll-label{font-size:8.5px}
  .cs-pot{gap:4px 11px;padding:8px 10px 9px;font-size:10px}
  .cs-pot-note{display:none}
  .cs-bet-main{min-width:0;width:100%}
  .cs-play{flex:1;padding:10px 14px}
  .cs-auto-btn{flex:0 0 78px}
  .cs-choice-row{gap:6px}
  .cs-speed-wrap{margin-left:0;width:100%;justify-content:flex-end}
  .cs-speed .btn{padding:5px 9px}
  .cs-meta{flex-wrap:wrap}
  .cs-chart-meta{justify-content:flex-start}
  #chart{height:230px}
  .cs-stage{min-height:0}
}
@media (max-width:420px){
  .cs-page .scores{gap:9px}
  .cs-page .scores b{font-size:15px}
  .cs-page .scores div{font-size:10px}
  .cs-felt{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);min-height:255px;padding:8px 6px 2px}
  .cs-player b{font-size:10.5px}
  .cs-stake strong{font-size:16px}
  .cs-bank{font-size:8.5px}
  .cs-coin{width:82px;height:82px}
  .cs-coin-face{font-size:29px}
  .cs-die{width:76px;height:76px;border-radius:17px}
  .cs-pips i{width:9px;height:9px}
  .cs-result{font-size:14.5px}
  .cs-result-detail{max-width:185px;font-size:8.5px}
  .cs-card{padding:12px}
  .cs-funds{grid-template-columns:1fr 1fr;gap:6px}
  .cs-funds input{font-size:11px;padding:7px}
  .cs-chips .btn{padding:4px 6px;font-size:9.5px}
  .cs-legend{gap:5px 10px;font-size:9.5px}
  .cs-other-row{font-size:9.5px}
}

@media (prefers-reduced-motion:reduce){
  .cs-coin-inner{transition:none!important}
  .cs-die.is-rolling{animation:none}
  .cs-dist-bar i{transition:none}
}