/*
 * 霓虹夜场皮肤：渐变、发光、立体按钮。
 * 在 style.css 之后加载，覆盖同名的基础样式；颜色变量在 style.css 开头。
 * 换皮肤：换掉这个文件（和 style.css 开头的变量）即可。
 */

/* ---------- 背景：深紫夜色 + 星点 ---------- */
#stage { background: radial-gradient(120% 100% at 50% 0%, var(--stage-hi) 0%, var(--stage-mid) 45%, var(--stage-lo) 100%); }
#stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 68% 14%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 86% 66%, #ff7ad9, transparent), radial-gradient(1px 1px at 38% 82%, #7af3ff, transparent),
    radial-gradient(1px 1px at 55% 46%, #fff, transparent), radial-gradient(1.5px 1.5px at 8% 62%, #7af3ff, transparent),
    radial-gradient(1px 1px at 93% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 50%, #ffd76a, transparent);
}
.screen { z-index: 1; }

/* ---------- 文字：金色渐变大字 ---------- */
.logo, .bigcode, .lname b, .fxbig, .sheethead b, h2 {
  background: linear-gradient(var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo { font-style: italic; font-weight: 900; filter: drop-shadow(0 0 8px var(--gold-glow)); }
.logo b { color: transparent; }
.bigcode { filter: drop-shadow(0 0 10px var(--gold-glow)); }
h2 { font-weight: 900; letter-spacing: 1px; }
.code { color: var(--gold); text-shadow: 0 0 8px var(--gold-glow); }
.pos { color: var(--pos); text-shadow: 0 0 6px rgba(122, 255, 176, .45); }
.neg { color: var(--neg); text-shadow: 0 0 6px rgba(255, 107, 138, .45); }

/* ---------- 面板：半透明玻璃 + 细光边 ---------- */
.panel, .sheet, .ctable, .clubrow, .rblock, .opp, .lanes { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.panel { background: rgba(28, 10, 64, .62); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ---------- 按钮：渐变 + 底部厚度 + 发光；按下会「陷」下去 ---------- */
.btn {
  border-radius: 999px; font-weight: 800; letter-spacing: .5px; color: var(--text);
  background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35); text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); }
/* 主按钮：全站统一的粉紫霓虹（和五十K的「出牌」一样），一屏只放一个 */
.btn.primary { background: linear-gradient(135deg, #ff9ad0 0%, #ff4fa0 42%, #b14cff 100%); border-color: rgba(255, 210, 245, .85); color: #fff;
  text-shadow: 0 1px 0 rgba(90, 0, 70, .55); box-shadow: 0 3px 0 #7a1a8f, 0 0 16px var(--pink-glow), 0 0 26px rgba(177, 76, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.primary:active { background: linear-gradient(135deg, #ff86c4, #f03d92 42%, #9d3cf0); box-shadow: 0 1px 0 #7a1a8f, 0 0 10px var(--pink-glow); }
/* 次要的强调按钮（中尾道互换、申请加入俱乐部）：深色玻璃 + 青色霓虹描边，和五十K「提示」同一种 */
.btn.blue { background: linear-gradient(rgba(30, 14, 70, .92), rgba(12, 4, 34, .92)); border: 1.5px solid var(--cyan); color: #e9fdff;
  text-shadow: 0 0 6px var(--cyan-glow); box-shadow: 0 0 10px var(--cyan-glow), inset 0 0 8px rgba(122, 243, 255, .18); }
.btn.blue:active { box-shadow: 0 0 16px var(--cyan), inset 0 0 12px var(--cyan-glow); }
.btn.gold { background: linear-gradient(var(--gold-light), var(--gold)); color: #4a2a00; text-shadow: none; box-shadow: 0 4px 0 #a06a00, 0 0 14px var(--gold-glow); }
.btn.ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.btn.danger { color: var(--neg); border-color: rgba(255, 107, 138, .45); }
.btn:disabled { filter: grayscale(.6); opacity: .45; box-shadow: none; }
.btn.round { border-radius: 50%; }

.chip { background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); font-weight: 700; }
/* 选中的选项：金色霓虹描边 + 金字，不再整块金色（选项多的时候不刺眼） */
.chip.on { background: linear-gradient(rgba(255, 211, 77, .22), rgba(255, 170, 30, .1)); color: #ffe7a0; border-color: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow), inset 0 0 8px rgba(255, 211, 77, .25); text-shadow: 0 0 6px rgba(255, 200, 60, .6); }
.stepper b { color: var(--gold); text-shadow: 0 0 8px var(--gold-glow); }

input { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }

/* ---------- 顶栏 ---------- */
.roomcards { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 215, 106, .55); color: var(--gold-light); box-shadow: 0 0 8px rgba(255, 184, 0, .3); }
.roomcards.low { border-color: var(--neg); color: var(--neg); box-shadow: 0 0 8px rgba(255, 107, 138, .4); }
.timer .trk { stroke: rgba(255, 255, 255, .15); }
.timer .prog { stroke: #ff5ad2; filter: drop-shadow(0 0 3px #ff5ad2); }
.timer b { font-weight: 900; }
.timer.urgent .prog { stroke: var(--neg); }

/* ---------- 牌桌：发光的椭圆 ---------- */
.table::before {
  border: 2px solid rgba(122, 243, 255, .55);
  box-shadow: 0 0 22px rgba(122, 243, 255, .45), inset 0 0 50px rgba(255, 90, 210, .25);
  background: radial-gradient(60% 60% at 50% 45%, rgba(120, 60, 220, .38), rgba(20, 8, 50, .25));
}

/* 摆牌时三道后面也有一张发光牌桌 */
.arrange { position: relative; }
.arrange::before {
  content: ""; position: absolute; left: 9%; right: 9%; top: 0; bottom: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(122, 243, 255, .4);
  box-shadow: 0 0 22px rgba(122, 243, 255, .35), inset 0 0 50px rgba(255, 90, 210, .2);
  background: radial-gradient(60% 60% at 50% 45%, rgba(120, 60, 220, .3), rgba(20, 8, 50, .15));
}
.arrange > * { position: relative; z-index: 1; }

/* ---------- 头像：金边发光 ---------- */
.avatar { box-shadow: 0 0 0 2px #ffd76a, 0 0 10px rgba(255, 215, 106, .6); }
.avatar.empty { box-shadow: none; border: 1.5px dashed rgba(122, 243, 255, .6); color: var(--cyan); background: rgba(122, 243, 255, .06); }
.avatar.sit { border-color: var(--pink); color: #fff; background: radial-gradient(var(--pink), #a01f63); box-shadow: 0 0 14px var(--pink-glow); }
.badge { background: linear-gradient(#ff8ad6, #c2188a); color: #fff; border: none; box-shadow: 0 0 8px var(--pink-glow); }
.badge.ok { background: linear-gradient(#b8ffd6, #2bd67b); color: #063; box-shadow: 0 0 8px rgba(122, 255, 176, .6); }
.badge.off, .badge.bot { background: #2b1d55; color: #cfc6e8; border: 1px solid rgba(255, 255, 255, .25); box-shadow: none; } /* 实心底，压在头像图上也看得清 */
.sname.me { color: var(--gold); text-shadow: 0 0 8px var(--gold-glow); }
.sscore { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 215, 106, .35); }

/* ---------- 扑克牌：白牌金边，选中发青光 ---------- */
.card { background: linear-gradient(#ffffff, #f2edff); box-shadow: 0 3px 8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 215, 106, .55); }
.card.selected { box-shadow: 0 0 0 2px var(--cyan), 0 0 16px var(--cyan); }
.card.slot { background: rgba(122, 243, 255, .04); border: 1.5px dashed rgba(122, 243, 255, .45); box-shadow: none; }
.card.mini { box-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 215, 106, .4); }
.backs .back { background: linear-gradient(135deg, var(--back-1), var(--back-2)); border: 1px solid #ffd1f4; box-shadow: 0 0 4px rgba(255, 90, 210, .6); }

/* ---------- 摆牌：对手、三道面板、牌型按钮 ---------- */
.opp { background: linear-gradient(90deg, rgba(255, 90, 210, .18), rgba(122, 243, 255, .08)); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; }
.opp.done { border-color: rgba(122, 255, 170, .75); background: linear-gradient(90deg, rgba(122, 255, 176, .2), rgba(122, 243, 255, .06)); box-shadow: 0 0 10px rgba(122, 255, 170, .45); }
.opp .avatar { box-shadow: 0 0 0 1.5px #ffd76a, 0 0 6px rgba(255, 215, 106, .5); }
.opp .done-mark { background: linear-gradient(#b8ffd6, #2bd67b); box-shadow: 0 0 6px rgba(122, 255, 176, .8); }
.lanes { background: rgba(20, 8, 50, .58); border: 1.5px solid rgba(255, 215, 106, .6); border-radius: 18px; box-shadow: 0 0 22px rgba(255, 184, 0, .22); }
.lane:not(.locked):active { background: rgba(122, 243, 255, .1); }
.lname b { font-size: 16px; font-weight: 900; letter-spacing: 3px; filter: drop-shadow(0 0 4px rgba(255, 184, 0, .5)); }
.lname small { background: linear-gradient(90deg, #ff5ad2, #ff9a3c); color: #fff; box-shadow: 0 0 8px var(--pink-glow); font-weight: 800; }
.lname small.bad { background: linear-gradient(90deg, #ff3b5c, #b3002d); color: #fff; box-shadow: 0 0 8px rgba(255, 59, 92, .6); }
.side .suggest .chip { background: rgba(255, 255, 255, .07); border-radius: 10px; }
.warn { background: rgba(255, 59, 92, .18); border: 1px solid rgba(255, 107, 138, .5); box-shadow: 0 0 10px rgba(255, 59, 92, .3); }
.types .tbtn { background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; color: #fff; font-weight: 800; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.types .tbtn:active { transform: translateY(2px); box-shadow: none; }
.types .tbtn.on { background: linear-gradient(var(--gold-light), var(--gold)); color: #4a2a00; border-color: transparent; box-shadow: 0 0 12px var(--gold-glow); }
.types .tbtn:disabled { opacity: .3; box-shadow: none; }
.special { background: linear-gradient(rgba(255, 200, 58, .25), rgba(255, 90, 210, .15)); border: 1px solid var(--gold); box-shadow: 0 0 12px var(--gold-glow); }

/* ---------- 结算 ---------- */
.rblock { background: rgba(28, 10, 64, .6); border: 1px solid rgba(255, 255, 255, .14); }
.rblock.me { border-color: rgba(255, 215, 106, .75); background: linear-gradient(180deg, rgba(255, 200, 58, .18), rgba(28, 10, 64, .6) 50%); box-shadow: 0 0 14px rgba(255, 184, 0, .3); }
.rblock.me .rplayer { color: var(--gold); text-shadow: 0 0 6px var(--gold-glow); }
.rtotal { font-size: 20px; font-weight: 900; }
.rname { color: var(--cyan); text-shadow: 0 0 6px rgba(122, 243, 255, .4); }
.tag { background: rgba(255, 255, 255, .14); }
.tag.gun { background: linear-gradient(90deg, #ff9a3c, #ff4fa0); color: #fff; box-shadow: 0 0 8px rgba(255, 120, 80, .6); }
.tag.horse { background: linear-gradient(90deg, #ff3b5c, #b3002d); color: #fff; }
.tag.bad { background: rgba(255, 59, 92, .25); color: #ff9db1; }
.tag.watch, .tag.club { background: rgba(122, 243, 255, .15); color: var(--cyan); }
.homerun { color: #ff9a3c; text-shadow: 0 0 10px rgba(255, 154, 60, .8); }
.spbadge { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); }
.history th { background: #1f0c4a; }

/* ---------- 打枪 / 全垒打 ---------- */
.gunfx {
  background: radial-gradient(ellipse at center, rgba(90, 20, 120, .96), rgba(20, 6, 45, .96));
  border: 2px solid #ff5ad2; box-shadow: 0 0 30px var(--pink-glow), 0 0 0 6px rgba(255, 90, 210, .15);
}
.gunfx .fxbig { font-size: 32px; font-weight: 900; font-style: italic; filter: drop-shadow(0 0 10px var(--gold-glow)); }

/* ---------- 弹层、提示、开关 ---------- */
.overlay { background: rgba(6, 2, 18, .7); }
.sheet { background: linear-gradient(rgba(52, 20, 110, .92), rgba(20, 8, 50, .94)); border: 1.5px solid rgba(255, 215, 106, .55); box-shadow: 0 0 30px rgba(255, 184, 0, .2), 0 20px 50px rgba(0, 0, 0, .6); }
.toast { background: rgba(40, 14, 90, .95); border: 1px solid rgba(255, 90, 210, .6); box-shadow: 0 0 16px var(--pink-glow); }
.offline { background: linear-gradient(90deg, #ff3b5c, #ff4fa0); }
.switch { background: rgba(255, 255, 255, .18); }
.switch.on { background: linear-gradient(90deg, #ff9a3c, #ff4fa0); box-shadow: 0 0 10px var(--pink-glow); }
.bubble { border: 2px solid #ff5ad2; box-shadow: 0 0 12px var(--pink-glow); }
.chatlog { background: rgba(0, 0, 0, .3); }
.emoji { background: rgba(255, 255, 255, .08); }
.dotbadge { background: linear-gradient(#ff8ad6, #ff2d7a); box-shadow: 0 0 6px var(--pink-glow); }

/* ---------- 俱乐部 ---------- */
.ctable { background: rgba(28, 10, 64, .6); border: 1px solid rgba(255, 255, 255, .14); }
.ctable:not(.playing) { border-color: rgba(122, 243, 255, .45); box-shadow: 0 0 12px rgba(122, 243, 255, .2); }
.cthead .live { color: var(--pos); text-shadow: 0 0 6px rgba(122, 255, 176, .5); }
.clubrow { background: linear-gradient(90deg, rgba(255, 90, 210, .14), rgba(122, 243, 255, .06)); border: 1px solid rgba(255, 255, 255, .16); }