:root {
  --bg-main: #cfc6b6;
  --bg-inner: #dcd4c6;
  --stone-light: #e8e1d4;
  --stone-dark: #b6ab9a;

  --gold: #8b5e34;
  --royal: #4b6fa8;
  --supreme: #8b1e1e;

  --positive: #8b5e34;
  --negative: #7a2e2e;

  /* modern ui colors */
  --panel-bg: rgba(20,22,28,0.85);
  --panel-border: rgba(255,255,255,0.08);
  --accent: #4da3ff;
}

/* THEMES */
.theme-royal {
  --bg-main: #c7d2e5;
  --bg-inner: #dde6f4;
  --stone-light: #eef3fb;
  --stone-dark: #aebcd6;
  --positive: #3d6fb6;
}
.theme-supreme {
  --bg-main: #d8bcbc;
  --bg-inner: #eedada;
  --stone-light: #f2e1e1;
  --stone-dark: #9b4a4a;
  --positive: #a61c1c;
}

/* BASE */
body{
background:#05070c;
color:#fff;
font-family:Arial;
text-align:center;
}

/* 房间容器 */

.map-select{
display:flex;
justify-content:center;
gap:40px;
margin-top:60px;
flex-wrap:wrap;
}

/* hover动画 */

.room-card:hover{

transform:translateY(-6px) scale(1.04);

box-shadow:
0 0 20px rgba(255,215,0,1),
0 0 40px rgba(255,215,0,0.9),
0 0 80px rgba(255,215,0,0.7),
0 0 120px rgba(255,215,0,0.5);

}

/* 不同房间颜色 */

.classic{
background:radial-gradient(circle at top,#2e7d32,#0f3a15);
}

.royal{
background:radial-gradient(circle at top,#ffb300,#ff6f00);
}

.supreme{
background:radial-gradient(circle at top,#ff5252,#b71c1c);
}

/* 星星 */

.stars{
font-size:34px;
color:#ffd700;
margin-bottom:10px;
text-shadow:
0 0 10px #ffd700,
0 0 20px #ffea00;
}

/* 标题 */

.room-card h3{
font-size:28px;
margin:10px 0;
}

/* 价格 */

.price{
font-size:26px;
font-weight:bold;
margin-bottom:18px;
}

/* PLAY按钮 */

.play-btn{
background:linear-gradient(180deg,#4da3ff,#0048ff);
border:none;
padding:12px 38px;
border-radius:28px;

color:white;
font-size:16px;
font-weight:bold;

cursor:pointer;

box-shadow:
0 6px 0 #002a9e,
0 0 20px rgba(0,80,255,0.7);

transition:all .25s;
}

.play-btn:hover{
transform:translateY(-3px);
box-shadow:
0 8px 0 #002a9e,
0 0 28px rgba(0,80,255,1);
}

.game {
  margin-top:90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 40px;
}

/* BOARD WRAPPER */
#map-wrapper {
  width: 96vw;
  max-width: 560px;
  aspect-ratio: 3 / 2;
  margin:auto;
  margin-bottom: 12px;
}

#map {

position:relative;
width:100%;
height:100%;

border-radius:30px;

/* casino table green */
background:
radial-gradient(circle at center,#0c6b2d,#063d18);

border:6px solid #b8860b;

box-shadow:
0 0 30px rgba(0,0,0,0.8),
inset 0 0 80px rgba(0,0,0,0.7);

overflow:hidden;

}

/* CELLS */
.cell{

position:absolute;

width:calc(100% / 9);
height:calc(100% / 6);

border-radius:50%;

background:radial-gradient(circle,#ff3b3b,#8b0000);

border:3px solid gold;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

font-size:10px;
color:white;

box-shadow:
0 0 10px rgba(255,0,0,0.8),
0 0 18px rgba(255,200,0,0.3);

transition:all .25s ease;

}
.cell > .num{

font-size:20px;
font-weight:bold;
color:#fff;

}

.reward-positive{

font-size:15px;

color:#ffd36b;

font-weight:700;

text-shadow:
0 0 6px rgba(255,215,120,0.9);

}

.reward-negative{

font-size:15px;

color:white;

font-weight:900;

text-shadow:
0 0 3px #000,
0 0 6px #000,
0 0 8px #ff0000;

}

/* PATH LIGHT EFFECT */

.cell.path{

box-shadow:
0 0 12px rgba(255,215,120,0.8),
0 0 20px rgba(255,200,80,0.8),
0 0 35px rgba(255,180,60,0.6);

border-color:#ffd36b;

}

.cell.active{

animation:pathGlow .8s infinite alternate;

}

@keyframes pathGlow{

0%{

box-shadow:
0 0 6px rgba(255,215,120,.5),
0 0 12px rgba(255,200,80,.6);

}

100%{

box-shadow:
0 0 16px rgba(255,215,120,.9),
0 0 30px rgba(255,200,80,1);

}

}
.cell.penalty { animation: sink .6s ease forwards; }
@keyframes sink { to { transform: translateY(6px); } }

/* PLAYER */
#player{

position:absolute;

width:26px;
height:26px;

border-radius:50%;

background:radial-gradient(circle,#ffd700,#c9a400);

border:3px solid white;

box-shadow:
0 0 10px rgba(255,215,0,0.9),
0 0 20px rgba(255,180,0,0.6);

z-index:10;

}

@keyframes playerPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}

/* =========================
   CASINO PREMIUM DICE
========================= */

/* dice stage */
#dice-stage{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:clamp(8px, 2vw, 16px);
  padding:clamp(10px, 3vw, 18px);
  border-radius:clamp(12px, 4vw, 20px);

  background:linear-gradient(180deg,#2b2b2b,#111);
  box-shadow:
    inset 0 0 25px rgba(0,0,0,.85),
    0 18px 40px rgba(0,0,0,.8);

  max-width:90%;
  z-index:5;
  pointer-events:none;
}

/* dice body */
.dice{
  width:clamp(36px, 9vw, 54px);
  height:clamp(36px, 9vw, 54px);
  background:radial-gradient(circle at 30% 30%, #fff, #e6e6e6 40%, #cfcfcf 100%);
  border-radius:clamp(8px, 2vw, 12px);
  position:relative;

  box-shadow:
    inset -6px -6px 12px rgba(0,0,0,.25),
    inset 5px 5px 10px rgba(255,255,255,.9),
    0 10px 20px rgba(0,0,0,.7);

  transition:transform .15s ease;
}

/* dice dots */
.dice span{
  position:absolute;
  width:clamp(6px, 1.8vw, 9px);
  height:clamp(6px, 1.8vw, 9px);
  background:#111;
  border-radius:50%;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.4);
}

/* ===== dice faces ===== */
.d1 span:nth-child(1){ left:50%; top:50%; transform:translate(-50%,-50%); }

.d2 span:nth-child(1){ left:18%; top:18%; }
.d2 span:nth-child(2){ right:18%; bottom:18%; }

.d3 span:nth-child(1){ left:18%; top:18%; }
.d3 span:nth-child(2){ left:50%; top:50%; transform:translate(-50%,-50%); }
.d3 span:nth-child(3){ right:18%; bottom:18%; }

.d4 span:nth-child(1){ left:18%; top:18%; }
.d4 span:nth-child(2){ right:18%; top:18%; }
.d4 span:nth-child(3){ left:18%; bottom:18%; }
.d4 span:nth-child(4){ right:18%; bottom:18%; }

.d5 span:nth-child(1){ left:18%; top:18%; }
.d5 span:nth-child(2){ right:18%; top:18%; }
.d5 span:nth-child(3){ left:50%; top:50%; transform:translate(-50%,-50%); }
.d5 span:nth-child(4){ left:18%; bottom:18%; }
.d5 span:nth-child(5){ right:18%; bottom:18%; }

.d6 span:nth-child(1){ left:18%; top:18%; }
.d6 span:nth-child(2){ left:18%; top:50%; transform:translateY(-50%); }
.d6 span:nth-child(3){ left:18%; bottom:18%; }
.d6 span:nth-child(4){ right:18%; top:18%; }
.d6 span:nth-child(5){ right:18%; top:50%; transform:translateY(-50%); }
.d6 span:nth-child(6){ right:18%; bottom:18%; }

/* ===== rolling animation ===== */
#dice-stage.rolling .dice{
  animation:casinoRoll .45s linear infinite;
}

@keyframes casinoRoll{
  0%{ transform:rotate(0deg) translateY(0); }
  25%{ transform:rotate(12deg) translateY(-3px); }
  50%{ transform:rotate(-12deg) translateY(2px); }
  75%{ transform:rotate(8deg) translateY(-2px); }
  100%{ transform:rotate(0deg) translateY(0); }
}

/* ===== glow on result ===== */
#dice-stage.result .dice{
  box-shadow:
    0 0 18px rgba(255,215,120,.9),
    inset -6px -6px 12px rgba(0,0,0,.25),
    inset 5px 5px 10px rgba(255,255,255,.9);
}

/* =========================
   MODERN UI PANELS
========================= */

.bottom{

width:90%;
max-width:560px;

margin:20px auto;

background:var(--panel-bg);

backdrop-filter:blur(6px);

border:1px solid var(--panel-border);

padding:14px;

border-radius:14px;

box-shadow:0 8px 25px rgba(0,0,0,0.45);

text-align:center;

}

#rollBtn{
  margin-top:8px;
  padding:10px 16px;
  font-size:16px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:white;
  cursor:pointer;
  font-weight:600;
}

#rollBtn:hover{
  filter:brightness(1.08);
}

.history{

width:90%;
max-width:560px;

margin:10px auto;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.07);

backdrop-filter:blur(6px);

padding:12px;

border-radius:12px;

min-height:40px;

box-shadow:0 6px 18px rgba(0,0,0,0.4);

}

.room-card{

width:180px;

padding:30px 18px;

border-radius:20px;

border:2px solid #ffd700;

/* 强 glow */
box-shadow:
0 0 12px rgba(255,215,0,0.9),
0 0 25px rgba(255,215,0,0.8),
0 0 45px rgba(255,215,0,0.6),
0 0 80px rgba(255,215,0,0.4);

transition:all .25s;
overflow:hidden;

}

.room-card::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:40%;
height:100%;

pointer-events:none;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.25),
transparent
);

transform:skewX(-25deg);

animation:cardShine 6s infinite;

}

.user-bar{

width:100%;

display:flex;

justify-content:flex-end;

align-items:center;

gap:10px;

font-size:15px;

color:#fff;

padding-right:100px;

flex-wrap:wrap;

}

#balanceTop{

color:#ffd36b;
font-weight:bold;

}

.user-bar button{

background:#caa64b;

border:none;

padding:6px 12px;

border-radius:6px;

cursor:pointer;

font-weight:bold;

color:#000;

}

.header{

position:fixed;

top:0;
left:0;

width:100%;

display:flex;
flex-direction:column;

align-items:center;

background:rgba(0,0,0,0.65);

padding:12px 20px;

box-shadow:0 4px 15px rgba(0,0,0,0.5);

z-index:1000;

background:linear-gradient(
180deg,
rgba(0,0,0,0.85),
rgba(0,0,0,0.55)
);
}
#backBtn{
  padding:6px 12px;
  background:#444;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  display: none !important;
}
#mapTitle{
  font-size:18px;
  font-weight:bold;
  margin:8px 0;
  color:#ffd36b;
}
.room-card.active{
outline:2px solid #ffd36b;
box-shadow:
0 0 20px #ffd36b,
0 0 35px rgba(255,210,125,0.9);
}
/* ===== GOLD FLASH ===== */
#dice-flash{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(255,215,120,.9), transparent 60%);
  opacity:0;
  pointer-events:none;
  z-index:15;
}

#dice-flash.show{
  animation:flashBoom .45s ease;
}

@keyframes flashBoom{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  40%{ opacity:.9; transform:translate(-50%,-50%) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.8); }
}

/* ===== TOTAL NUMBER ===== */
#dice-total{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.3);
  font-size:clamp(50px,12vw,90px);
  font-weight:900;
  color:#ffd36b;
  letter-spacing:2px;
  opacity:0;
  z-index:20;
  pointer-events:none;

  text-shadow:
    0 0 10px rgba(255,215,120,.9),
    0 0 25px rgba(255,180,60,.8),
    0 0 55px rgba(255,150,0,.6);
}

#dice-total.show{
  animation:totalPop .9s cubic-bezier(.2,.8,.2,1);
}

@keyframes totalPop{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.2) rotate(-10deg);
  }
  40%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.25) rotate(4deg);
  }
  70%{
    transform:translate(-50%,-50%) scale(.95) rotate(-2deg);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

.cs-widget{
  position:fixed;

  right:20px;
  bottom: calc(40px + env(safe-area-inset-bottom));

  width:56px;
  height:56px;

  border-radius:50%;
  border:none;

  background:#FFD700;
  color:#000;

  font-size:26px;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 4px 15px rgba(0,0,0,0.35);

  z-index:9999;
}

/* hover */
.cs-widget:hover{
  transform:scale(1.08);
}

/* 手机优化 */
@media (max-width:600px){

  /* 棋盘字体缩小 */
  .cell{
    font-size:11px;
    padding:2px;
  }

  .cell > .num{
font-size:12px;
}

.reward-positive,
.reward-negative{
font-size:9px;
}

  /* 客服按钮 */
  .cs-widget{
    width:46px;
    height:46px;
    font-size:22px;

    right:16px;
    bottom:60px;
  }
  
  .map-select{

    flex-direction:column;
    align-items:center;
    
    }
    
    .room-card{
    
    width:60%;
    
    }
    .room-card::before{
display:none;
}

}

.logo{

font-size:26px;

font-weight:900;

color:#ffd36b;

letter-spacing:3px;

text-shadow:
0 0 10px rgba(255,210,100,0.9),
0 0 20px rgba(255,180,50,0.8);

margin-bottom:6px;

}

.coin{

background:rgba(255,215,120,0.15);

padding:6px 12px;

border-radius:20px;

color:#ffd36b;

font-weight:bold;

box-shadow:0 0 10px rgba(255,215,120,0.4);

}

.coin-icon{

display:inline-block;

width:14px;
height:14px;

border-radius:50%;

background:linear-gradient(#ffd36b,#d4a400);

margin-right:6px;

box-shadow:
0 0 6px rgba(255,215,0,0.8),
inset 0 0 3px rgba(255,255,255,0.7);

}

.buy-btn{

margin-top:10px;

background:linear-gradient(180deg,#ffd36b,#cfa400);

border:none;

padding:12px 28px;

border-radius:28px;

color:#000;

font-size:16px;

font-weight:900;

cursor:pointer;

box-shadow:
0 6px 0 #9c7a00,
0 0 18px rgba(255,215,0,0.8);

transition:all .25s;

}

.buy-btn:hover{

transform:translateY(-3px);

box-shadow:
0 8px 0 #9c7a00,
0 0 28px rgba(255,215,0,1);

}

.buy-btn:active{

transform:translateY(2px);

box-shadow:
0 3px 0 #9c7a00;

}

.card-title{
margin-bottom:25px;
}

.login-to{
font-size:26px;
color:#7a6a5d;
margin-bottom:6px;
}

.card-logo{

font-family:Georgia,"Times New Roman",serif;

font-size:48px;
font-weight:700;
letter-spacing:2px;

background:linear-gradient(
180deg,
#fff2b3 0%,
#f4c85b 30%,
#c9871b 65%,
#8f5a12 100%
);

-webkit-background-clip:text;
background-clip:text;
color:transparent;

text-shadow:
0 1px 0 rgba(255,255,255,.4),
0 3px 10px rgba(201,135,27,.25);

}

/* 1. 起点发光特效 */
.bonus-glow {
    filter: drop-shadow(0 0 15px #ffcc00) brightness(1.5);
    transition: all 0.3s;
}

/* 2. 屏幕中央奖励弹出框 */
.bonus-popup-effect {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid #ffcc00;
    padding: 40px 80px;
    border-radius: 30px;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 0 60px rgba(255, 204, 0, 0.6);
    pointer-events: none; /* 防止遮挡点击 */
    animation: bonusPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bonus-title {
    color: #ffcc00;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.bonus-amount {
    color: #fff;
    font-size: 60px;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}

/* 弹出动画 */
@keyframes bonusPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.controls-row {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.auto-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}

.auto-switch input {
    display: none;
}

.slider {
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    position: relative;
    transition: .4s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4caf50; /* 开启时的颜色 */
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.label-text {
    text-transform: uppercase;
}