:root {
  --bg: #0c0a13;
  --bg2: #120f1d;
  --panel: #191529;
  --panel2: #221d38;
  --line: #2f2850;
  --text: #f1ecff;
  --muted: #9a90bd;
  --gold: #ffcf4a;
  --red: #ff4d5e;
  --green: #2ee59d;
  --blue: #4dc3ff;
  --purple: #a86bff;
  --accent: #ff3d8b;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #2a1446 0%, transparent 60%), var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
input, select { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; outline: none; }
input:focus, select:focus { border-color: var(--purple); }
/* iPad / 手机：快速连点不要触发「双击放大」（manipulation 仍然允许滑动和双指缩放）；
   赌场里连点也不要选中文字、弹出长按菜单和点击高亮 */
html, body, * { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
#top, .day { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* iOS 聚焦字号小于 16px 的输入框会自动放大页面 */
@media (pointer: coarse) { input, select, textarea { font-size: 16px; } }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* ---------- 按钮 ---------- */
.btn {
  border: 1px solid var(--line); background: var(--panel2); border-radius: 9px; padding: 7px 13px; cursor: pointer;
  font-weight: 600; transition: transform .08s, background .15s, border-color .15s; white-space: nowrap; user-select: none;
}
.btn:hover:not(:disabled) { border-color: var(--purple); background: #2b2448; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #ff5c9d, #e0246f); border-color: #ff7cb1; color: #fff; box-shadow: 0 4px 18px #ff3d8b44; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ff74ad, #ea3a7d); border-color: #ffa0c8; }
.btn.gold { background: linear-gradient(180deg, #ffe17a, #e9a91c); border-color: #ffe9a3; color: #2a1b00; }
.btn.gold:hover:not(:disabled) { background: linear-gradient(180deg, #ffe892, #f2b630); border-color: #fff1c4; }
.btn.danger { background: #3a1621; border-color: #7a2a3c; color: #ff9aa6; }
.btn.ghost { background: transparent; }
.btn.sel { border-color: var(--gold); background: #3a2f12; color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.btn.big { padding: 11px 26px; font-size: 17px; border-radius: 12px; }
.btn.sm { padding: 3px 8px; font-size: 12px; border-radius: 7px; }

/* ---------- 布局 ---------- */
#app { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }
#app.no-side { grid-template-columns: 1fr; }
#app.no-side #side { display: none; }
#top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #0f0c19cc; backdrop-filter: blur(8px); min-height: 52px; flex-wrap: wrap; }
#main { overflow: auto; position: relative; min-width: 0; }
#side { border-left: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; min-height: 0; }
.logo { font-weight: 900; font-size: 18px; letter-spacing: 1px; background: linear-gradient(90deg, var(--gold), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.top-spacer { flex: 1; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; cursor: pointer; }
#side-toggle { display: none; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hud-item { display: flex; flex-direction: column; line-height: 1.15; }
.hud-item small { color: var(--muted); font-size: 11px; }
.hud-item b { font-size: 17px; }
.timer b { font-variant-numeric: tabular-nums; font-size: 22px; }
.timer.warn b { color: var(--red); animation: pulse 1s infinite; }
.bankbar { min-width: 220px; flex: 1; max-width: 380px; }
.bankbar .bar { height: 10px; background: #2a2340; border-radius: 6px; overflow: hidden; position: relative; margin-top: 4px; }
.bankbar .bar { display: flex; }
.bankbar .fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .3s; }
.bankbar .over, .quota-bar .over { height: 100%; background: linear-gradient(90deg, #ffb800, #ff5a1f); box-shadow: 0 0 8px #ff8a1f; transition: width .3s; }
.bankbar .fill.ok { background: linear-gradient(90deg, #19c37d, var(--green)); }
.bankbar .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bankbar .bank { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bank.flash-up { animation: flashUp .5s; }
.bank.flash-down { animation: flashDown .5s; }
@keyframes flashUp { 0% { color: var(--green); transform: scale(1.12); } 100% { color: inherit; transform: none; } }
@keyframes flashDown { 0% { color: var(--red); transform: scale(.94); } 100% { color: inherit; transform: none; } }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- 通用面板 ---------- */
.screen { padding: 20px; max-width: 1100px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel h2, .panel h3 { margin: 0 0 10px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* ---------- 首页 ---------- */
.home { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.home-card { width: min(440px, 100%); text-align: center; }
.home-title { font-size: clamp(34px, 8vw, 54px); font-weight: 900; margin: 0; line-height: 1.1; background: linear-gradient(90deg, var(--gold), var(--accent), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px #ff3d8b55); }
.home-sub { color: var(--muted); margin: 8px 0 24px; }
.home-card input { width: 100%; text-align: center; font-size: 16px; padding: 11px; }
.home-card .or { margin: 14px 0; color: var(--muted); font-size: 12px; }
.dice-deco { font-size: 40px; letter-spacing: 10px; margin-bottom: 8px; }

/* ---------- 大厅 ---------- */
.room-code { font-size: 44px; font-weight: 900; letter-spacing: 10px; color: var(--gold); font-variant-numeric: tabular-nums; }
.rules li { margin: 4px 0; color: #d7cff2; }

/* ---------- 玩家列表 ---------- */
.side-sec { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.side-sec h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 1px; }
.pl { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.pl + .pl { border-top: 1px dashed #2a2445; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #120f1d; flex: none; font-size: 14px; position: relative; }
.avatar.off { filter: grayscale(1) brightness(.5); }
.pl-body { flex: 1; min-width: 0; }
.pl-name { font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.pl-items { font-size: 14px; letter-spacing: 1px; }
.tag { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: #2c2547; color: var(--muted); font-weight: 600; }
.tag.host { background: #3c2f10; color: var(--gold); }
.tag.ok { background: #123a2b; color: var(--green); }
.tag.warn { background: #3a1621; color: #ff9aa6; }
.parts { font-size: 11px; color: #ff9aa6; }

/* ---------- 动态 / 聊天 ---------- */
#feed { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 80px; }
.ev { font-size: 12.5px; padding: 4px 8px; border-radius: 7px; background: #1b1730; border-left: 3px solid #3a3260; word-break: break-word; }
.ev.minor { opacity: .55; background: none; padding: 1px 8px; }
.ev.win { border-left-color: var(--green); }
.ev.loss { border-left-color: var(--red); }
.ev.item { border-left-color: var(--purple); background: #231a3a; }
.ev.sys { border-left-color: var(--gold); background: #2a2210; }
.ev.chat { border-left-color: var(--blue); background: #14223a; }
.ev .who { font-weight: 700; }
#chat { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
#chat input { flex: 1; min-width: 0; }

/* ---------- 白天 ---------- */
.day { display: flex; flex-direction: column; height: 100%; }
.floor-tabs { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }
.floor-tab { border: 1px solid var(--line); background: var(--panel); border-radius: 10px 10px 0 0; padding: 7px 14px; cursor: pointer; font-weight: 700; color: var(--muted); }
.floor-tab.on { color: var(--gold); border-color: var(--gold); background: #2a2210; }
.floor-tab:disabled { cursor: not-allowed; opacity: .45; }
.day-body { flex: 1; overflow: auto; padding: 14px 16px; position: relative; }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.table-card { background: linear-gradient(160deg, #241d3d, #181428); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; text-align: left; transition: transform .12s, border-color .12s; position: relative; }
.table-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.table-card .ti { font-size: 34px; }
.table-card .tn { font-weight: 800; font-size: 16px; margin-top: 4px; }
.table-card .tb { color: var(--muted); font-size: 12px; }
.table-card .who { position: absolute; top: 10px; right: 10px; display: flex; gap: 3px; }
.table-card .who span { width: 12px; height: 12px; border-radius: 50%; }
.table-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.table-head .tn { font-size: 18px; font-weight: 800; }
.game-root { position: relative; min-width: 0; background: radial-gradient(800px 400px at 50% 0%, #1f4d36 0%, #123024 55%, #0d2119 100%); border: 1px solid #2d5c45; border-radius: 16px; padding: 16px; min-height: 420px; box-shadow: inset 0 0 60px #0008; }
.inv-bar { border-top: 1px solid var(--line); padding: 8px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg2); }
.inv-item { font-size: 13px; padding: 5px 10px; }
.inv-item .ii { font-size: 18px; margin-right: 4px; vertical-align: -2px; }
.fx-chip { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: #2a2145; border: 1px solid #41356b; white-space: nowrap; }
.fx-chip.team { background: #10303a; border-color: #23596b; }

/* ---------- 游戏通用 ---------- */
.g-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.g-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.g-msg { font-size: 18px; font-weight: 700; text-align: center; min-height: 26px; }
.g-sub { font-size: 12px; color: var(--muted); text-align: center; }
.chip-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #0007; border: 1px solid #fff2; }
.betbox { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; background: #0006; padding: 6px 8px; border-radius: 12px; border: 1px solid #ffffff14; }
.betbox input { width: 110px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.betbox .max { font-size: 11px; color: var(--muted); }
.betbox.chip-on { border-color: var(--gold); box-shadow: 0 0 12px #ffcf4a55; }
.betbox .chipnote { font-size: 12px; color: var(--gold); width: 100%; text-align: center; }


/* 结算浮字 */
.result-pop { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; z-index: 20; animation: popUp 1.6s ease-out forwards; }
.result-pop b { font-size: 44px; font-weight: 900; text-shadow: 0 4px 18px #000; display: block; }
.result-pop.win b { color: var(--green); }
.result-pop.loss b { color: var(--red); }
.result-pop.push b { color: #ddd; }
.result-pop span { font-size: 14px; background: #000a; padding: 2px 10px; border-radius: 99px; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }

/* ---------- 商店 ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.item-card { background: linear-gradient(170deg, #2a2145, #1a1530); border: 1px solid #3d3366; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.item-card.sold { opacity: .35; }
.item-card .ic { font-size: 34px; }
.item-card .in { font-weight: 800; font-size: 16px; }
.item-card .id { color: #d7cff2; font-size: 12.5px; flex: 1; }
.item-card .is { color: var(--gold); font-size: 11.5px; }
.price { font-weight: 800; color: var(--gold); }
.result-banner { border-radius: 14px; padding: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.result-banner.pass { background: linear-gradient(90deg, #0f3b2a, #162c22); border: 1px solid #2c7a57; }
.result-banner.intro { background: linear-gradient(90deg, #2a1d4a, #1a1530); border: 1px solid #4a3f7a; }
.result-banner.fail { background: linear-gradient(90deg, #4a1220, #2c1018); border: 1px solid #8a2a3c; }
.shark { font-size: 48px; }
.quote { font-size: 16px; }
.quote b { color: var(--gold); }
.rank-list { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-list .r { background: #0005; border-radius: 9px; padding: 4px 10px; font-size: 13px; }

/* ---------- 弹窗 / 提示 ---------- */
#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 100; pointer-events: none; align-items: center; width: min(92vw, 520px); }
.toast { background: #241d3dee; border: 1px solid #4a3f7a; padding: 8px 16px; border-radius: 10px; box-shadow: 0 8px 30px #0008; animation: toastIn .2s ease-out; font-weight: 600; text-align: center; }
.toast.err { border-color: #8a2a3c; background: #3a1621ee; }
.toast.big { border-color: var(--gold); background: #2f250aee; font-size: 16px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }
.modal-bg { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 90; padding: 16px; }
.modal { background: var(--panel); border: 1px solid #4a3f7a; border-radius: 16px; padding: 20px; width: min(420px, 100%); box-shadow: 0 20px 60px #000; max-height: 90vh; overflow: auto; }
.modal h3 { margin: 0 0 12px; }
.modal .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.reel-big { font-size: 64px; text-align: center; margin: 10px 0; }
.reel-big.spin { animation: reelSpin .12s linear infinite; }
@keyframes reelSpin { 50% { transform: translateY(-6px) scale(.95); filter: blur(1px); } }

/* ---------- 状态特效 ---------- */
body.drunk #main { animation: drunk 3.2s ease-in-out infinite; }
@keyframes drunk { 0%, 100% { transform: rotate(0) translateX(0); filter: hue-rotate(0) blur(0); } 25% { transform: rotate(1.2deg) translateX(6px); filter: hue-rotate(25deg) blur(.6px); } 75% { transform: rotate(-1.2deg) translateX(-6px); filter: hue-rotate(-20deg) blur(.4px); } }
.eye-shade { position: fixed; top: 0; bottom: 0; width: 55%; pointer-events: none; z-index: 80; }
.eye-shade.left { left: 0; background: linear-gradient(90deg, #000 0%, #000e 60%, transparent 100%); }
.eye-shade.right { right: 0; background: linear-gradient(270deg, #000 0%, #000e 60%, transparent 100%); }
.eye-blind { position: fixed; inset: 0; pointer-events: none; z-index: 81; backdrop-filter: blur(7px) brightness(.45); }
.hit-flash { position: fixed; inset: 0; background: #ff0020; pointer-events: none; z-index: 95; animation: hitFlash .6s ease-out forwards; }
@keyframes hitFlash { from { opacity: .6; } to { opacity: 0; } }
body.shake #app { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(4px, -1px); } }
#mic-banner { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #3d1a5e, #1a2f5e); border: 1px solid var(--purple); border-radius: 99px; padding: 6px 18px; z-index: 70; font-weight: 700; white-space: nowrap; max-width: 92vw; overflow: hidden; box-shadow: 0 6px 24px #a86bff55; }
#mic-banner .lyric { display: inline-block; animation: bob .6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px); } }
#conn { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); background: #3a1621; border: 1px solid #8a2a3c; padding: 6px 14px; border-radius: 99px; z-index: 120; }
.splash { position: fixed; inset: 0; display: grid; place-items: center; z-index: 85; pointer-events: none; }
.splash div { font-size: clamp(36px, 9vw, 72px); font-weight: 900; color: var(--gold); text-shadow: 0 6px 40px #ff3d8b; animation: splash 1.8s ease-out forwards; }
@keyframes splash { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.1); } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }

/* ---------- 结束 ---------- */
.over-title { font-size: clamp(36px, 8vw, 60px); font-weight: 900; margin: 0; }
.over-title.win { color: var(--gold); }
.over-title.lose { color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.stat { background: #0004; border-radius: 10px; padding: 10px 12px; }
.stat small { color: var(--muted); display: block; }
.stat b { font-size: 18px; }

/* ---------- 手机 ---------- */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  #side { position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 88vw); z-index: 60; transform: translateX(100%); transition: transform .2s; box-shadow: -10px 0 40px #000; }
  #app.side-open #side { transform: none; }
  #side-toggle { display: inline-block; }
  #top { padding: 6px 10px; gap: 10px; }
  .screen { padding: 14px 12px; }
  .day-body { padding: 10px; }
  .floor-tabs { padding: 8px 10px 0; }
  .game-root { padding: 10px; min-height: 360px; }
  .logo { display: none; }
  .hud { gap: 8px 12px; flex: 1; }
  .hud-item small { display: none; }
  .hud-item b { font-size: 15px; }
  .timer b { font-size: 18px; }
  .bankbar { min-width: 0; flex: 1 1 150px; }
  .bankbar .bank { font-size: 16px; }
  .top-spacer { display: none; }
  .icon-btn { padding: 3px 7px; }
  .floor-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .floor-tab { padding: 6px 10px; white-space: nowrap; font-size: 13px; }
  .tables { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .table-card { padding: 10px; }
  .table-card .ti { font-size: 28px; }
  .inv-bar { padding: 6px 10px; }
  .inv-bar > .muted:first-child { display: none; }
}

/* ---------- v2：赌场楼层、桌簇、键盘、手里的道具 ---------- */
.floor-view { display: flex; flex-direction: column; gap: 12px; }
.floor-title { font-size: 18px; font-weight: 800; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.stamp { background: linear-gradient(160deg, #241d3d, #181428); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.stamp-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.stamp-head .ti { font-size: 26px; }
.stamp-tables { display: flex; flex-wrap: wrap; gap: 6px; }
.tbl { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #0f2a1f; color: var(--text); border-radius: 9px; padding: 6px 10px; cursor: pointer; font-weight: 600; }
.tbl:hover { border-color: var(--green); }
.tbl.busy { border-color: var(--gold); background: #2a2210; }
.tbl .who { display: inline-flex; gap: 2px; }
.tbl .who i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.table-view { display: flex; flex-direction: column; gap: 8px; }
.tv-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; align-items: start; }
.keypad { background: #1a1a22; border: 2px solid #2c2c38; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.keypad.golden { border-color: var(--gold); box-shadow: 0 0 16px #ffcf4a66; }
.kp-screen { background: #050806; border-radius: 8px; padding: 8px 10px; font-family: Dangrek, ui-monospace, Consolas, monospace; }
.kp-input { font-size: 28px; font-weight: 800; color: #ff4d5e; text-align: right; text-shadow: 0 0 10px #ff4d5e55; word-break: break-all; }
.kp-input.ok { color: #3dff8a; text-shadow: 0 0 10px #3dff8a66; }
.kp-lim { font-size: 11px; color: #8fb39d; white-space: pre-line; text-align: right; }
.kp-note { font-size: 12px; color: #ff8a8a; min-height: 15px; text-align: right; }
.keypad.golden .kp-note { color: var(--gold); }
.kp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kp-k { border: none; border-radius: 9px; padding: 9px 0; font-weight: 800; cursor: pointer; background: #7d8a8c; color: #fff; box-shadow: 0 3px 0 #4f5a5c; font-size: 15px; font-family: Dangrek, system-ui, sans-serif; }
.kp-k:active { transform: translateY(2px); box-shadow: 0 1px 0 #4f5a5c; }
.kp-k.k-clr { background: #9c1f21; box-shadow: 0 3px 0 #5e1214; }
.kp-k.k-min, .kp-k.k-all { background: #ffb314; color: #3a2400; box-shadow: 0 3px 0 #b07a08; font-size: 13px; }
.kp-k.k-q, .kp-k.k-h { font-size: 13px; }
.hand-bar { border-top: 1px solid var(--line); padding: 8px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg2); min-height: 48px; }
.hand-item { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; background: #241d3d; border: 1px solid #41356b; padding: 4px 10px; border-radius: 9px; }
.hand-item .ii { font-size: 18px; }
.phone { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.phone-ic { font-size: 40px; }
.phone.ringing .phone-ic { animation: ring 0.6s infinite; }
@keyframes ring { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.quota-bar { position: relative; display: flex; width: min(520px, 100%); height: 26px; background: #2a2340; border-radius: 13px; overflow: hidden; }
.quota-bar .fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); }
.quota-bar .fill.ok { background: linear-gradient(90deg, #19c37d, var(--green)); }
.quota-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 13px; text-shadow: 0 1px 3px #000; }
.bags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bag { font-size: 40px; display: flex; flex-direction: column; align-items: center; }
.bag small { font-size: 12px; color: var(--gold); font-weight: 700; }
.coin { font-size: 80px; }
.coin.flip { animation: coinflip 1.6s ease-out; }
@keyframes coinflip { 0% { transform: rotateX(0) translateY(0); } 50% { transform: rotateX(1440deg) translateY(-80px); } 100% { transform: rotateX(2880deg) translateY(0); } }
@media (max-width: 860px) {
  .tv-body { grid-template-columns: minmax(0, 1fr); }
  .keypad { position: static; }
  .stamps { grid-template-columns: 1fr; }
  .hand-bar { padding: 6px 10px; }
}
.fx-chip.chl { background: #2a2210; border-color: #6b5520; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.fx-chip.chl.done { background: #123a2b; border-color: #2c7a57; }

/* 日结算：原作的三项数字 + 盈利折线 */
.sum-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(520px, 100%); }
.sum-stats .stat { background: #ffffff0d; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sum-stats .stat small { color: var(--muted); }
.profit-graph { width: min(520px, 100%); height: auto; background: #0b0a14; border-radius: 10px; }
.hand-live { font-variant-numeric: tabular-nums; }

/* 个人道具栏：每件道具一格，按钮跟在名字后面 */
.item-slot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 10px; background: #ffffff0a; border: 1px solid #ffffff14; flex-wrap: wrap; }