/*
 * Q 版金绿（2026-10-21 用户在 public/design/luxury.html 里选的方案 E）：保留绿呢 + 金色，换成卡通的样子——
 *   粗深棕描边、圆鼓鼓的果冻按钮（上面一道高光、底下一块贴纸阴影，按下去往下陷）、卡通描边金字、牌和头像都有描边。
 * 只在房间里（牌桌、结算、房间里的弹窗）生效：和 skin-gold*.css 一起由 app.js applySkin() 切换，加在 html.q 下面。
 * 最后加载，压过前面各游戏的样式（按钮、面板这些用了 !important，因为前面有的选择器写得很长）。
 */
html.q {
  --q-ink: #3a2205; /* 描边 */
  --q-gold-hi: #fff3a6;
  --q-gold: #ffcc33;
  --q-gold-lo: #f0a020;
  --q-red-hi: #ff8a7a;
  --q-red: #e8382a;
  --q-green-hi: #5fdc9a;
  --q-green: #1f9a5f;
}
html.q #stage { background:
  radial-gradient(60% 70% at 50% 40%, #23a066, #0e5a38 70%, #073a24); }

/* ---------- 按钮：果冻 ---------- */
html.q .btn, html.q .wbtn, html.q .dbtn, html.q .tbtn, html.q .gtab, html.q .wsb, html.q .chip, html.q .sbtn, html.q .propbtn {
  border: 2.5px solid var(--q-ink) !important; border-radius: 14px !important; font-weight: 900 !important;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--q-ink) !important;
  transition: transform .08s, box-shadow .08s; }
html.q .btn:active:not(:disabled), html.q .wbtn:active:not(:disabled), html.q .dbtn:active, html.q .tbtn:active:not(:disabled), html.q .gtab:active, html.q .wsb:active, html.q .chip:active {
  transform: translateY(3px) !important; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 1px 0 var(--q-ink) !important; }
/* 主按钮（出牌、准备、下一局、确定）：圆鼓鼓的金黄 */
html.q .btn.primary, html.q .btn.gold, html.q .wbtn.green, html.q .dbtn.ok, html.q .chip.on, html.q .gtab.on, html.q .tbtn.on {
  color: #5a3000 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
  background: linear-gradient(var(--q-gold-hi), var(--q-gold) 55%, var(--q-gold-lo)) !important; }
/* 一般按钮：糖果绿 */
html.q .btn.ghost, html.q .btn.blue, html.q .wbtn, html.q .dbtn.cancel, html.q .tbtn, html.q .gtab, html.q .chip, html.q .sbtn, html.q .propbtn {
  color: #fff; text-shadow: 0 2px 0 var(--q-ink);
  background: linear-gradient(var(--q-green-hi), var(--q-green)) ; }
html.q .btn.ghost, html.q .wbtn:not(.green), html.q .dbtn.cancel, html.q .tbtn:not(.on), html.q .gtab:not(.on), html.q .chip:not(.on), html.q .sbtn, html.q .propbtn {
  background: linear-gradient(var(--q-green-hi), var(--q-green)) !important; color: #fff !important; text-shadow: 0 2px 0 var(--q-ink) !important; }
/* 危险 / 解散 / 倒水：番茄红 */
html.q .btn.danger, html.q .btn.gdanger, html.q .dbtn.foulbtn {
  color: #fff !important; text-shadow: 0 2px 0 #7a1208 !important; background: linear-gradient(var(--q-red-hi), var(--q-red)) !important; }
html.q .btn:disabled, html.q .wbtn:disabled, html.q .tbtn:disabled {
  background: linear-gradient(#9cb8a8, #6f8b7c) !important; color: rgba(255, 255, 255, .7) !important; text-shadow: none !important; opacity: 1; }
/* 五十K右下小按钮：原来是斜切的，改成圆角糖果块 */
html.q .wsb { transform: none !important; background: linear-gradient(#ffb15a, #e0782a) !important; color: #fff !important; }
html.q .wsb > * { transform: none !important; }
html.q .wsb span { text-shadow: 0 2px 0 var(--q-ink) !important; }
html.q .wsb svg { stroke: #fff !important; filter: none !important; }
/* 麻将吃碰杠胡：圆形果冻 */
html.q .mjbtn { border: 3px solid var(--q-ink) !important; box-shadow: inset 0 4px 0 rgba(255, 255, 255, .4), 0 5px 0 var(--q-ink) !important; }
html.q .mjbtn:active { transform: translateY(3px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3), 0 2px 0 var(--q-ink) !important; }
html.q .mjbtn.hu { background: linear-gradient(var(--q-red-hi), var(--q-red)) !important; }
/* 聊天按钮 */
html.q .chatfab { border: 3px solid var(--q-ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--q-ink); background: linear-gradient(#ffb15a, #e0782a); color: #fff; }
/* 主按钮隔一会儿弹一下，提醒该你了 */
@keyframes qJelly { 0%, 80%, 100% { scale: 1 1; } 85% { scale: 1.1 .9; } 90% { scale: .95 1.06; } 95% { scale: 1.02 .98; } }
html.q .wactsbox .wbtn.green:not(:disabled), html.q .donebar .dbtn.ok, html.q .tablecenter .btn.primary, html.q .mjrbar .btn.primary, html.q .dyrbar .btn.primary { animation: qJelly 2.6s ease-in-out infinite; }

/* ---------- 牌：细灰边 + 柔和投影，像真的扑克牌（2026-10-22 用户发竞品截图，原来的粗棕描边 + 硬的贴纸投影像卡通贴纸）；头像还是 Q 版描边 ---------- */
html.q .card { box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 5px rgba(0, 0, 0, .38) !important; }
html.q .card.mini { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4) !important; }
html.q .card.selected, html.q .wc.sel .card, html.q .dyh .card.selected { box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 0 0 3px #f2c14e, 0 0 14px rgba(255, 210, 80, .9) !important; }
html.q .card.slot { box-shadow: none !important; }
html.q .avatar { border: 2.5px solid var(--q-ink) !important; box-shadow: 0 0 0 2px var(--q-gold), 0 3px 0 2px var(--q-ink) !important; }

/* ---------- 牌桌：粗棕边 + 金圈 + 上面一道高光 ---------- */
html.q .mjtable, html.q .dytable {
  box-shadow: inset 0 0 0 3px var(--q-ink), inset 0 0 0 7px var(--q-gold), inset 0 0 0 9px var(--q-ink), inset 0 10px 0 rgba(255, 255, 255, .1), inset 0 0 30px rgba(0, 0, 0, .35) !important; }

/* ---------- 面板、弹窗：圆角卡通框 ---------- */
html.q .sheet, html.q .gpanel, html.q .dyrpanel, html.q .mjrpanel, html.q .dysheetbox, html.q .jkbox, html.q .panel, html.q .rblock {
  border: 3px solid var(--q-ink) !important; border-radius: 18px !important;
  box-shadow: inset 0 0 0 3px var(--q-gold), 0 6px 0 var(--q-ink), 0 12px 24px rgba(0, 0, 0, .35) !important; }
html.q .topbar { border-bottom: 3px solid var(--q-ink) !important; box-shadow: 0 3px 0 rgba(255, 204, 51, .55), 0 4px 10px rgba(0, 0, 0, .35) !important; }

/* ---------- 小牌子：名字、分数、张数、鱼篓、标签 ---------- */
html.q .dywho, html.q .mjinfo, html.q .wscore, html.q .wpot, html.q .dyfish, html.q .dypl, html.q .dyhint, html.q .tlab .tn, html.q .tag {
  border: 2px solid var(--q-ink) !important; box-shadow: 0 2px 0 var(--q-ink) !important; }
html.q .wcount { border: 2px solid var(--q-ink) !important; box-shadow: 0 2px 0 var(--q-ink) !important; }

/* ---------- 大字：卡通描边金字（标题、牌型横幅、飘字） ---------- */
html.q .gtitle, html.q .fx-title, html.q .hr-title, html.q .dyfloat, html.q .wvs b, html.q .mjfx b, html.q .dyrhead b, html.q .sheethead b {
  color: #ffe066 !important; -webkit-text-fill-color: #ffe066 !important; background: none !important;
  -webkit-text-stroke: 2px var(--q-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--q-ink) !important; filter: none !important; }
html.q .fx-title, html.q .hr-title { -webkit-text-stroke-width: 3px; }
/* 上面给牌加了描边，钓鱼「能钓的鱼」和钓到时的发光要单独保留 */
html.q .dyp.catch .card { box-shadow: 0 0 0 2.5px var(--q-gold), 0 0 0 4px var(--q-ink), 0 0 16px rgba(255, 210, 80, 1) !important; }
html.q .dyghost.glow .card { box-shadow: 0 0 0 2.5px #fff3c4, 0 0 0 4px var(--q-ink), 0 0 22px rgba(255, 210, 90, 1) !important; }

/* ---------- 房间：C「夜景会所」（2026-10-22 用户在 design/floor.html 选的） ----------
 * 背景和大厅、俱乐部是同一份夜景（#stage 最底下的 .nscene，night.css），房间里压暗一点、正中打光。
 * 等人页：桌子摆在地上，底下一块黑色圆地毯金边（skin-gold-games.css .waittable）。十三水牌桌页也直接看到夜景（它自己画椭圆牌桌）。
 * 五十K / 麻将 / 钓鱼开局后（#stage.felt）：按游戏桌型画一张大桌子，桌子外面也是夜景（见下面）。 */
html.q #stage::before { background: none; }
html.q .topbar { background: linear-gradient(#262c3c, #121620); border-bottom-color: #e8c070; }
/* 五十K / 麻将 / 钓鱼开局后（#stage.felt）：画一张按游戏桌型的大桌子（.screen::before，垫在牌和头像下面），桌子外面露出夜景。
 * 五十K 长桌（两头半圆）、麻将方桌（圆角）、钓鱼圆桌（椭圆）；黑边金线。头像、按钮落在桌外也没关系，跟俱乐部里椅子摆在桌边一样。 */
html.q #stage.felt #app > .screen::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 2.5%; right: 2.5%; top: 42px; bottom: 2%; border-radius: 999px;
  background:
    radial-gradient(60% 70% at 50% 40%, #23a066, #0e5a38 70%, #073a24);
  box-shadow: inset 0 0 0 2px #e8c070, inset 0 0 0 5px #12141b, inset 0 0 0 6px rgba(232, 192, 112, .6), inset 0 0 30px rgba(0, 0, 0, .55),
    0 0 0 2px #000, 0 12px 26px rgba(0, 0, 0, .7);
}
html.q #stage.felt-square #app > .screen::before { left: 6%; right: 6%; top: 40px; bottom: 1.5%; border-radius: 28px; }
html.q #stage.felt-round #app > .screen::before { left: 4%; right: 4%; top: 40px; bottom: 1%; border-radius: 50%; }
/* 台呢颜色跟俱乐部 / 等人页的桌型统一：五十K蓝、麻将绿、钓鱼红 */
html.q #stage.felt-blue #app > .screen::before { background: radial-gradient(60% 70% at 50% 40%, #3f7ec4, #24548c 70%, #163a64); }
html.q #stage.felt-red #app > .screen::before { background: radial-gradient(60% 70% at 50% 40%, #b8483a, #8a2e22 70%, #5e1c13); }
/* 钓鱼（.dytable）、麻将（.mjtable）原来自己画了一块绿台呢，现在桌子统一画在外面了，里面那块去掉，免得叠两层、颜色对不上 */
/* 上面 html.q .mjtable 的粗边框带 !important，这里也要 !important 才盖得住 */
html.q #stage.felt .dytable, html.q #stage.felt .mjtable { background: none; box-shadow: none !important; }

/* 房间里桌子外面的面板（弹窗、总结算、每局结算、王牌 / 摸勾框）：底色从深绿换成深蓝，跟夜景、大厅统一（2026-10-22）。
 * 金边保持 Q 版；桌子上的东西（摆牌三道、台呢）不动。 */
html.q .sheet, html.q .gpanel, html.q .jkbox, html.q .dysheetbox, html.q .dyrpanel, html.q .mjrpanel {
  background: linear-gradient(rgba(28, 38, 74, .97), rgba(10, 14, 30, .98)); }
html.q .panel, html.q .rblock, html.q .wfin { background: rgba(12, 18, 38, .86); }
html.q .rblock.me { background: linear-gradient(180deg, rgba(242, 193, 78, .22), rgba(12, 18, 38, .86) 50%); }
html.q .history th { background: #121a36; color: #ffe7a0; }
html.q .wfin.them h3 { background: linear-gradient(90deg, #1c2a56, #34508a, #1c2a56); }
/* 麻将开局后也是正方形的桌子（2026-10-22 用户要求）：高度占满，宽度跟高度一样，居中 */
html.q #stage.felt-square #app > .screen::before { left: 50%; right: auto; width: auto; aspect-ratio: 1; transform: translateX(-50%); border-radius: 22px; }