/* 777 在线老虎机：复古游戏厅风格，手机竖屏 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #1a0505 radial-gradient(circle at 50% 0%, #3d0c0c, #140303 70%);
  color: #ffe9b0;
  user-select: none;
  overflow-x: hidden;
}
.view { min-height: 100%; }

/* ---------- 全屏适配：双击全屏/地址栏收起后占满可视区（dvh 兼容手机动态视口） ---------- */
html, body { min-height: 100vh; min-height: 100dvh; }
:fullscreen, :-webkit-full-screen { background: #140303; }

/* ---------- 登录 / 注册 ---------- */
#loginView { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-box {
  width: 100%; max-width: 360px;
  background: linear-gradient(160deg, #4a1010, #2a0707);
  border: 2px solid #d4a017; border-radius: 16px;
  padding: 28px 22px; text-align: center;
  box-shadow: 0 0 30px rgba(212, 160, 23, .25);
}
.logo { font-size: 30px; color: #ffd75e; text-shadow: 0 2px 8px #000; }
.logo-sub { font-size: 12px; color: #c9a25e; margin: 6px 0 18px; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs button {
  flex: 1; padding: 9px 0; border: 1px solid #8a6a1f; border-radius: 8px;
  background: #2a0707; color: #c9a25e; font-size: 15px;
}
.tabs button.on { background: #d4a017; color: #2a0707; font-weight: 700; }
.login-box input, .modal-box input {
  width: 100%; padding: 11px 12px; margin-bottom: 10px;
  border: 1px solid #8a6a1f; border-radius: 8px;
  background: #140303; color: #ffe9b0; font-size: 15px; outline: none;
}
.btn-big {
  width: 100%; padding: 12px 0; border: none; border-radius: 10px;
  background: linear-gradient(180deg, #ff5f4d, #c21807); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: 4px;
  box-shadow: 0 3px 0 #7a0e02;
}
.btn-big:active { transform: translateY(2px); box-shadow: none; }
.msg { min-height: 20px; font-size: 13px; color: #ffb3a7; margin-top: 8px; }
.tip { font-size: 11px; color: #8a6a1f; margin-top: 10px; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #2a0707; border-bottom: 1px solid #8a6a1f;
}
.me-avatar { font-size: 22px; }
.me-name { font-size: 14px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-btns { display: flex; gap: 6px; }
.btn-mini {
  padding: 6px 10px; border: 1px solid #8a6a1f; border-radius: 6px;
  background: #3d0c0c; color: #ffe9b0; font-size: 12px;
}
.btn-mini:active { background: #d4a017; color: #2a0707; }

/* ---------- 机器盘面 ---------- */
#machine { padding: 10px 8px 4px; }
#board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 3px;
  aspect-ratio: 8 / 6;
  background: #0d0202;
  border: 3px solid #d4a017; border-radius: 12px;
  padding: 5px;
  box-shadow: inset 0 0 24px #000, 0 0 18px rgba(212, 160, 23, .3);
}
.lamp {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #33100d; border: 1px solid #552; border-radius: 6px;
  font-size: clamp(14px, 4.6vw, 26px); line-height: 1;
  transition: background .08s, box-shadow .08s;
}
.lamp small { font-size: 9px; color: #c9a25e; margin-top: 2px; transform: scale(.9); }
.lamp.on {
  background: radial-gradient(circle, #fff6c8 0%, #ffd75e 55%, #e8910c 100%);
  box-shadow: 0 0 14px 4px rgba(255, 215, 94, .9);
  border-color: #fff;
}
.lamp.on small { color: #7a4a00; }
.lamp.win-blink { animation: blink .18s steps(2) 6; }
@keyframes blink { 50% { background: #33100d; box-shadow: none; } }

/* 中央 LED 记分屏 */
#ledPanel {
  grid-row: 2 / 6; grid-column: 2 / 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #050505; border: 2px solid #442; border-radius: 10px;
  box-shadow: inset 0 0 18px #000;
  padding: 8px;
}
.led-win { display: flex; align-items: baseline; gap: 10px; width: 86%; }
.led-win label { font-size: 12px; color: #888; width: 34px; text-align: right; }
.led-win span {
  flex: 1; text-align: right;
  font-family: "Courier New", monospace; font-weight: 700;
  font-size: clamp(18px, 6vw, 30px); color: #ff3b30;
  text-shadow: 0 0 8px rgba(255, 59, 48, .8);
  letter-spacing: 2px;
}
#ledWin { color: #3dff6e; text-shadow: 0 0 8px rgba(61, 255, 110, .8); }
.led-msg {
  min-height: 18px; font-size: 13px; color: #ffd75e; text-align: center;
  text-shadow: 0 0 6px rgba(255, 215, 94, .6);
}

/* ---------- 筹码 ---------- */
#chips { display: flex; align-items: center; gap: 6px; padding: 8px 10px 2px; }
.chips-label { font-size: 12px; color: #c9a25e; }
.chip {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 3px dashed rgba(255, 255, 255, .75);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  box-shadow: 0 2px 4px #000;
}
.chip.c1 { background: #666; } .chip.c5 { background: #c21807; }
.chip.c10 { background: #0b5ed7; } .chip.c50 { background: #0f8a3d; }
.chip.c100 { background: #7b2fbe; }
.chip.on { outline: 3px solid #ffd75e; transform: scale(1.1); }

/* ---------- 押分排键 ---------- */
#betKeys {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 10px;
}
.bet-key {
  position: relative;
  background: linear-gradient(180deg, #4a1010, #2a0707);
  border: 1px solid #8a6a1f; border-radius: 10px;
  padding: 6px 2px 5px; text-align: center;
  touch-action: none;            /* 长按连押：禁止浏览器长按弹菜单/滚动手势 */
  -webkit-user-select: none; user-select: none;
}
.bet-key:active { background: #d4a017; }
.bet-key .bk-icon { font-size: clamp(18px, 6vw, 26px); line-height: 1.1; }
.bet-key .bk-name { font-size: 11px; color: #ffe9b0; }
.bet-key .bk-odds { font-size: 10px; color: #c9a25e; }
.bet-key .bk-bet {
  position: absolute; top: -6px; right: -4px;
  min-width: 22px; padding: 1px 5px;
  background: #ffd75e; color: #7a0e02; border-radius: 10px;
  font-size: 11px; font-weight: 800;
  display: none;
}
.bet-key .bk-bet.show { display: block; }

/* ---------- 操作键 ---------- */
#actions { display: flex; gap: 8px; padding: 4px 10px calc(14px + env(safe-area-inset-bottom)); }
.btn-act {
  flex: 1; padding: 14px 0; border: none; border-radius: 12px;
  font-size: 17px; font-weight: 800; letter-spacing: 3px; color: #fff;
}
.btn-act:active { transform: translateY(2px); }
.btn-red { background: linear-gradient(180deg, #ff5f4d, #c21807); box-shadow: 0 3px 0 #7a0e02; flex: 2; }
.btn-gold { background: linear-gradient(180deg, #ffd75e, #d4a017); box-shadow: 0 3px 0 #8a6a1f; color: #4a2c00; }
.btn-green { background: linear-gradient(180deg, #3dff6e, #0f8a3d); box-shadow: 0 3px 0 #075c26; color: #043015; }
.btn-gray { background: linear-gradient(180deg, #888, #555); box-shadow: 0 3px 0 #333; }
.btn-blue { background: linear-gradient(180deg, #4da3ff, #0b5ed7); box-shadow: 0 3px 0 #07408f; }
.btn-act:disabled { opacity: .45; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal-box {
  width: 100%; max-width: 360px; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(160deg, #4a1010, #2a0707);
  border: 2px solid #d4a017; border-radius: 16px;
  padding: 20px 18px; text-align: center;
}
.modal-box h3 { color: #ffd75e; margin-bottom: 12px; }
.modal-box .btn-act { margin-top: 12px; width: 100%; flex: none; }

/* 比倍（紧凑自适应：小屏零横向滚动，一屏看全所有按钮） */
#doubleModal { padding: 10px; }
#doubleModal .modal-box {
  max-width: 340px; padding: 14px 12px; max-height: 96vh; max-height: 96dvh;
}
#doubleModal .modal-box h3 { margin-bottom: 6px; font-size: 16px; }
.dbl-amount { font-size: 15px; } .dbl-amount b { color: #3dff6e; font-size: 20px; }
.dbl-times { font-size: 12px; color: #c9a25e; margin: 4px 0 6px; }
/* 比倍双骰舞台：3D CSS 立方体骰子（26-08-16 整改，gemini-code 同款效果），
   白骰子深色点（1 点/4 点为红色），开滚后多圈 3D 翻滚定格，下方亮出点数之和 */
.dbl-dice { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 8px auto 4px; min-height: 84px; }
/* 待开状态：灰色小问号（未猜大小时显示，3D 舞台隐藏） */
.dice.idle { font-size: clamp(28px, 9vw, 36px); font-weight: 900; color: rgba(255, 255, 255, .3); line-height: 1; user-select: none; }
/* 3D 舞台：--d 统一控制骰子尺寸（横屏弹窗内缩小），perspective 产生景深 */
.dice3d-stage { display: flex; justify-content: center; align-items: center; gap: 26px; perspective: 700px; }
.dice3d-box { --d: 64px; width: var(--d); height: var(--d); position: relative; }
.dice3d {
  width: 100%; height: 100%; position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.2, .8, .3, 1.1);  /* 翻滚定格缓冲（带回弹感） */
}
.face3d {
  position: absolute; width: var(--d); height: var(--d);
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  border-radius: calc(var(--d) * .18);
  box-shadow: inset 0 0 calc(var(--d) * .12) rgba(0, 0, 0, .15), 0 0 12px rgba(0, 0, 0, .35);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--d) * .1);
  border: 1px solid rgba(0, 0, 0, .08);
}
.pip {
  width: calc(var(--d) * .17); height: calc(var(--d) * .17);
  background: #1e293b; border-radius: 50%;
  align-self: center; justify-self: center;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .4);
}
.pip.red { background: #ef4444; }
/* 立方体六面定位（translateZ = 边长一半） */
.f1 { transform: rotateY(0deg) translateZ(calc(var(--d) / 2)); }
.f2 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }
.f3 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.f4 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.f5 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
/* 各点数布局（1 居中 / 2、3 对角 / 4 四角 / 5 四角+中 / 6 两列） */
.f1 .pip:nth-child(1) { grid-area: 2 / 2; }
.f2 .pip:nth-child(1) { grid-area: 1 / 1; } .f2 .pip:nth-child(2) { grid-area: 3 / 3; }
.f3 .pip:nth-child(1) { grid-area: 1 / 1; } .f3 .pip:nth-child(2) { grid-area: 2 / 2; } .f3 .pip:nth-child(3) { grid-area: 3 / 3; }
.f4 .pip:nth-child(1) { grid-area: 1 / 1; } .f4 .pip:nth-child(2) { grid-area: 1 / 3; } .f4 .pip:nth-child(3) { grid-area: 3 / 1; } .f4 .pip:nth-child(4) { grid-area: 3 / 3; }
.f5 .pip:nth-child(1) { grid-area: 1 / 1; } .f5 .pip:nth-child(2) { grid-area: 1 / 3; } .f5 .pip:nth-child(3) { grid-area: 2 / 2; } .f5 .pip:nth-child(4) { grid-area: 3 / 1; } .f5 .pip:nth-child(5) { grid-area: 3 / 3; }
.f6 .pip:nth-child(1) { grid-area: 1 / 1; } .f6 .pip:nth-child(2) { grid-area: 2 / 1; } .f6 .pip:nth-child(3) { grid-area: 3 / 1; } .f6 .pip:nth-child(4) { grid-area: 1 / 3; } .f6 .pip:nth-child(5) { grid-area: 2 / 3; } .f6 .pip:nth-child(6) { grid-area: 3 / 3; }
.dbl-sum {
  min-height: 38px; margin: 2px auto 0;
  font-family: "Courier New", monospace; font-weight: 900;
  font-size: clamp(24px, 8vw, 34px); color: #ffd75e;
  text-shadow: 0 0 8px rgba(255, 215, 94, .6);
}
.dbl-sum.small-n { color: #4da3ff; text-shadow: 0 0 8px rgba(77, 163, 255, .6); }
.dbl-sum.big-n { color: #ff5f4d; text-shadow: 0 0 8px rgba(255, 95, 77, .6); }
.dbl-btns { display: flex; gap: 8px; margin-top: 8px; width: 100%; }
.dbl-btns .btn-act {
  margin-top: 0; flex: 1 1 0; min-width: 0;   /* 等宽且允许压缩，绝不溢出 */
  padding: 12px 0; font-size: 15px; letter-spacing: 1px; white-space: nowrap;
}
.dbl-tip { font-size: 11px; color: #c9a25e; margin-top: 6px; }

/* 记录 */
.stat-line { font-size: 12px; color: #c9a25e; margin-bottom: 10px; line-height: 1.7; }
.history-list { max-height: 46vh; overflow-y: auto; text-align: left; font-size: 12px; }
.history-item {
  display: flex; gap: 6px; align-items: center;
  padding: 6px 4px; border-bottom: 1px dashed #552;
}
.history-item .h-t { color: #888; width: 86px; flex: none; }
.history-item .h-b { flex: 1; }
.history-item .h-w { font-weight: 700; }
.h-w.win { color: #3dff6e; } .h-w.lose { color: #888; }
.history-empty { text-align: center; color: #888; padding: 20px 0; }

/* 设置 */
.fld-label { display: block; text-align: left; font-size: 12px; color: #c9a25e; margin: 10px 0 4px; }
.fld-row { display: flex; gap: 8px; }
.fld-row input { flex: 1; margin-bottom: 0; }
.fld-row .btn-mini { flex: none; padding: 0 16px; }
.avatar-row { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-row span {
  font-size: 24px; padding: 4px; border: 2px solid transparent; border-radius: 8px; cursor: pointer;
}
.avatar-row span.on { border-color: #ffd75e; background: #3d0c0c; }

/* ---------- 电脑端右侧记录栏（手机端隐藏） ---------- */
#sidePanel { display: none; }

@media (min-width: 900px) {
  #gameView {
    display: flex; gap: 18px; align-items: flex-start;
    max-width: 1060px; margin: 0 auto; padding: 0 12px;
  }
  #gameMain { flex: 0 0 480px; min-width: 0; }
  #sidePanel {
    display: block; flex: 1; min-width: 0; margin-top: 10px;
    background: linear-gradient(160deg, #4a1010, #2a0707);
    border: 2px solid #d4a017; border-radius: 16px;
    padding: 16px 14px;
    max-height: calc(100vh - 20px); overflow-y: auto;
  }
  #sidePanel h3 { color: #ffd75e; font-size: 16px; margin-bottom: 10px; }
  #sidePanel .history-list { max-height: none; overflow-y: visible; font-size: 13px; }
  #sidePanel .stat-line { font-size: 13px; }
}

/* ---------- 手机横屏（26-08-16 新增）：比倍弹窗左右双栏排布——
   左栏 3D 双骰+点数之和，右栏 奖金/连击/消息/猜大小/收分返回，一屏看全不滚动 ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  #doubleModal .modal-box {
    max-width: 620px; max-height: 98vh; max-height: 98dvh; padding: 6px 16px 10px;
    display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center;
    grid-template-areas:
      "h3    h3"
      "dice  amount"
      "dice  times"
      "dice  msg"
      "sum   guess"
      "sum   tip"
      "sum   act";
  }
  #doubleModal .modal-box h3 { grid-area: h3; margin-bottom: 2px; font-size: 14px; }
  #doubleModal .dbl-amount { grid-area: amount; font-size: 13px; }
  #doubleModal .dbl-amount b { font-size: 16px; }
  #doubleModal .dbl-times { grid-area: times; margin: 2px 0; }
  #doubleModal .dbl-dice { grid-area: dice; margin: 4px 0 2px; min-height: 0; }
  #doubleModal .dice3d-stage { gap: 20px; }
  #doubleModal .dice3d-box { --d: 50px; }             /* 横屏骰子缩小，保证弹窗一屏看全 */
  #doubleModal .dbl-sum { grid-area: sum; min-height: 26px; font-size: 22px; }
  #doubleModal .msg { grid-area: msg; margin-top: 0; min-height: 16px; font-size: 12px; }
  #doubleModal .dbl-guess { grid-area: guess; }
  #doubleModal .dbl-tip { grid-area: tip; margin-top: 2px; }
  #doubleModal .dbl-act { grid-area: act; }
  #doubleModal .dbl-btns { margin-top: 4px; }
  #doubleModal .dbl-btns .btn-act { padding: 9px 0; font-size: 14px; }
}